/* ============================================================
   STICK NOTE
   MAIN INDEX PAGE STYLESHEET

   File:
   css/style.css

   This file controls:
   - Intro screen
   - Navbar
   - Hero
   - Six vertical panels
   - About section placeholder
   - Team
   - Services
   - Work
   - Contact
   - Footer
   - Responsive/mobile layout
============================================================ */


/* ============================================================
   01. GLOBAL RESET
============================================================ */

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


html {
    scroll-behavior: smooth;
}


body {
    font-family: "Inter", Arial, sans-serif;
    background: #f5f7fa;
    color: #092b52;
    overflow-x: hidden;
}


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


button {
    font-family: inherit;
}


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


::selection {
    background: #ffd400;
    color: #003d82;
}





/* ============================================================
   03. INTRO SCREEN
============================================================ */

.intro-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;

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

    background:
        linear-gradient(
            135deg,
            #003d82 0%,
            #0057b8 55%,
            #0071d8 100%
        );

    transition:
        opacity 0.7s ease,
        visibility 0.7s ease;
}


.intro-screen.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* ============================================================
   STICKY NOTE INTRO
============================================================ */

.sticky-note {
    position: relative;

    width: 250px;
    height: 210px;

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

    background: #ffd400;

    color: #003d82;

    font-size: 27px;
    font-weight: 900;
    letter-spacing: -0.04em;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.25);

    transform:
        rotate(-3deg);

    animation:
        introNote 0.9s ease both;
}


.sticky-note span {
    position: relative;
    z-index: 2;
}


.sticky-tape {
    position: absolute;

    top: -13px;
    left: 50%;

    width: 82px;
    height: 28px;

    transform: translateX(-50%) rotate(-2deg);

    background: rgba(255, 255, 255, 0.45);
}


@keyframes introNote {

    from {
        opacity: 0;
        transform:
            translateY(30px)
            rotate(-8deg)
            scale(0.9);
    }

    to {
        opacity: 1;
        transform:
            translateY(0)
            rotate(-3deg)
            scale(1);
    }

}


/* ============================================================
   04. NAVBAR
============================================================ */










/* ============================================================
   NAV LOGO
============================================================ */







/* ============================================================
   DESKTOP NAVIGATION
============================================================ */
















/* ============================================================
   MOBILE MENU BUTTON
============================================================ */







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




/* ============================================================
   05. HERO SECTION
============================================================ */

.hero {
    position: relative;

    min-height: 100vh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #003d82 0%,
            #0057b8 55%,
            #0071d8 100%
        );

    color: #ffffff;
}


.hero::before {
    content: "";

    position: absolute;

    width: 600px;
    height: 600px;

    right: -250px;
    top: -220px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.05);
}


.hero::after {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    left: -200px;
    bottom: -220px;

    border-radius: 50%;

    background: rgba(255, 212, 0, 0.08);
}


/* ============================================================
   HERO CONTAINER
============================================================ */

.hero-container {
    position: relative;

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

    min-height: 100vh;

    margin: 0 auto;

    padding-top: 90px;

    display: flex;

    align-items: center;
}


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

.hero-content {
    position: relative;

    z-index: 5;

    width: 62%;
}


.hero-eyebrow {
    margin-bottom: 28px;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.2em;

    color: #ffd400;
}


.hero-title {
    max-width: 1000px;

    font-size:
        clamp(55px, 8vw, 120px);

    line-height: 0.9;

    letter-spacing: -0.06em;

    font-weight: 600;
}


.highlight-word {
    color: #ffd400;
}


.outline-word {
    color: transparent;

    -webkit-text-stroke:
        2px rgba(255, 255, 255, 0.9);
}


.hero-description {
    max-width: 560px;

    margin-top: 38px;

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

    font-size: 16px;

    line-height: 1.7;
}


/* ============================================================
   HERO BUTTONS
============================================================ */

.hero-buttons {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 34px;
}


.btn {
    display: inline-flex;

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

    min-height: 52px;

    padding:
        0 25px;

    border: 2px solid transparent;

    font-size: 13px;
    font-weight: 700;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}


.btn:hover {
    transform: translateY(-3px);
}


/* Primary button */

.btn-primary {
    background: #ffd400;

    color: #003d82;
}


.btn-primary:hover {
    background: #ffffff;

    color: #003d82;
}


/* WhatsApp button */

.btn-whatsapp {
    background: #25d366;

    color: #ffffff;
}


.btn-whatsapp:hover {
    background: #ffffff;

    color: #168b43;
}


/* ============================================================
   HERO SIDE LOGO
============================================================ */

.hero-side-logo {
    position: absolute;

    right: 3%;
    top: 52%;

    z-index: 4;

    width:
        clamp(280px, 24vw, 400px);

    transform:
        translateY(-50%)
        rotate(5deg);

    transition:
        transform 0.5s ease,
        filter 0.5s ease;
}


.hero-side-logo img {
    width: 100% !important;

    height: auto !important;
}


.hero-side-logo span {
    display: block;

    margin-top: 12px;

    text-align: center;

    color: #ffffff;

    font-size: 14px;
    font-weight: 800;

    letter-spacing: 0.22em;
}


.hero-side-logo:hover {
    transform:
        translateY(-50%)
        rotate(0deg)
        scale(1.04);

    filter:
        drop-shadow(
            0 25px 40px rgba(0, 0, 0, 0.2)
        );
}


/* ============================================================
   HERO SCROLL INDICATOR
============================================================ */

.hero-scroll {
    position: absolute;

    right: 0;
    bottom: 125px;

    z-index: 5;

    display: flex;

    align-items: center;

    gap: 10px;

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

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.16em;

    transform: rotate(90deg);

    transform-origin: right center;
}


.scroll-arrow {
    font-size: 18px;

    color: #ffd400;
}


/* ============================================================
   HERO BOTTOM TAGS
============================================================ */

.hero-tags {
    position: absolute;

    left: 0;
    bottom: 30px;

    z-index: 5;

    display: flex;

    gap: 10px;

    flex-wrap: wrap;
}


.hero-tags span {
    padding:
        7px 13px;

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

    border-radius: 100px;

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

    font-size: 9px;
    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


/* ============================================================
   06. SIX VERTICAL STICK PANELS
============================================================ */

.stick-panels-section {
    position: relative;

    padding:
        70px 0;

    background: #f5f7fa;

    overflow: hidden;
}


.stick-panels {
    width: min(
        1400px,
        calc(100% - 80px)
    );

    margin: 0 auto;

    display: grid;

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

    gap: 12px;

    align-items: stretch;
}


/* ============================================================
   INDIVIDUAL PANEL
============================================================ */

.stick-panel {
    position: relative;

    height: 275px;

    padding: 24px 18px;

    overflow: hidden;

    background: #ffd400;

    cursor: pointer;

    transition:
        background 0.4s ease,
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


.stick-panel:hover {
    background: #0057b8;

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

    box-shadow:
        0 22px 45px rgba(0, 61, 130, 0.2);
}


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

.panel-number {
    display: block;

    color: #003d82;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 0.08em;

    transition:
        color 0.3s ease;
}


.stick-panel:hover .panel-number {
    color: #ffffff;
}


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

.panel-content {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 18px;
}


.panel-content h3 {
    color: #003d82;

    font-size:
        clamp(15px, 1.35vw, 21px);

    line-height: 1;

    letter-spacing: -0.04em;

    font-weight: 900;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.stick-panel:hover .panel-content h3 {
    color: #ffffff;

    transform:
        translateY(-8px);
}


/* ============================================================
   PANEL DESCRIPTION
============================================================ */

.panel-content p {
    max-height: 0;

    margin-top: 0;

    overflow: hidden;

    opacity: 0;

    color: #ffffff;

    font-size: 11px;

    line-height: 1.55;

    transform:
        translateY(15px);

    transition:
        max-height 0.4s ease,
        margin-top 0.4s ease,
        opacity 0.35s ease,
        transform 0.4s ease;
}


.stick-panel:hover .panel-content p {
    max-height: 120px;

    margin-top: 14px;

    opacity: 1;

    transform:
        translateY(0);
}


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

.panel-arrow {
    display: block;

    margin-top: 13px;

    color: #ffffff;

    font-size: 20px;

    opacity: 0;

    transform:
        translateY(10px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


.stick-panel:hover .panel-arrow {
    opacity: 1;

    transform:
        translateY(0);
}


/* ============================================================
   07. ABOUT SECTION
============================================================ */

.about-section {
    min-height: 300px;

    display: flex;

    align-items: center;

    background:
        linear-gradient(
            135deg,
            #eaf3ff,
            #ffffff
        );
}


/*
    This section is intentionally kept open.

    Your new About page design will be added here
    after you give me the About-page instructions.
*/


/* ============================================================
   08. COMMON SECTION HEADING
============================================================ */








/* ============================================================
   09. TEAM SECTION
============================================================ */









/* ============================================================
   TEAM GRID
============================================================ */

.team-grid {
    display: grid;

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

    gap: 22px;
}


.team-card {
    position: relative;
}


.team-placeholder {
    height: 380px;

    display: flex;

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

    background:
        linear-gradient(
            135deg,
            #dcecff,
            #eef5fc
        );

    color: #0057b8;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: 0.15em;

    transition:
        transform 0.4s ease,
        background 0.4s ease;
}


.team-card:hover .team-placeholder {
    transform:
        translateY(-8px);

    background: #ffd400;

    color: #003d82;
}


.team-card h3 {
    margin-top: 18px;

    color: #003d82;

    font-size: 20px;

    letter-spacing: -0.03em;
}


.team-card p {
    margin-top: 5px;

    color: #7890a8;

    font-size: 12px;
}


/* ============================================================
   10. SERVICES SECTION
============================================================ */





/* ============================================================
   11. WORK SECTION
============================================================ */




/* ============================================================
   WORK GRID
============================================================ */












/* ============================================================
   12. CONTACT SECTION
============================================================ */






/* ============================================================
   STICK NOTE
   CONTACT SECTION
   DESGRO-INSPIRED EDITORIAL LAYOUT
   BLUE + YELLOW THEME
============================================================ */


/* ============================================================
   MAIN SECTION
============================================================ */

.contact-section {
    position: relative;

    width: 100%;
    min-height: 760px;

    padding: 55px 50px 25px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(255, 212, 0, 0.08),
            transparent 25%
        ),
        #031b38;

    color: #ffffff;
}


/* ============================================================
   BACKGROUND WORD
============================================================ */

.contact-background-word {
    position: absolute;

    top: 45%;
    right: -5%;

    transform: translateY(-50%);

    font-size: clamp(180px, 24vw, 390px);

    line-height: 0.8;

    font-weight: 900;

    letter-spacing: -0.08em;

    color: transparent;

    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.035);

    white-space: nowrap;

    pointer-events: none;

    user-select: none;
}


/* ============================================================
   MAIN TWO-COLUMN LAYOUT
============================================================ */

.contact-layout {
    position: relative;

    z-index: 2;

    width: min(1500px, 100%);

    min-height: 670px;

    margin: 0 auto;

    display: grid;

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

    gap: 70px;

    align-items: center;
}


/* ============================================================
   LEFT SIDE
============================================================ */

.contact-left {
    min-width: 0;
}


/* ============================================================
   LABEL
============================================================ */

.contact-label {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-bottom: 35px;

    color: #ffd400;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.25em;
}


.contact-label span {
    width: 42px;

    height: 1px;

    background: #ffd400;

    display: block;
}


/* ============================================================
   HUGE TITLE
============================================================ */

.contact-big-title {
    width: 100%;
    max-width: 900px;

    font-family:
        Arial Black,
        Arial,
        Helvetica,
        sans-serif;

    font-weight: 900;

    text-transform: uppercase;

    letter-spacing: -0.085em;

    line-height: 0.77;

    overflow: visible;
}

/* ============================================================
   OUTLINED LET'S
============================================================ */

.contact-outline {
    font-size: clamp(75px, 10vw, 165px);

    color: transparent;

    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.95);

    white-space: nowrap;
}


/* ============================================================
   SOLID WORK
============================================================ */

.contact-solid {
    font-size: clamp(80px, 10.5vw, 175px);

    color: #ffffff;

    white-space: nowrap;
}


/* ============================================================
   TOGETHER
============================================================ */

.contact-yellow {
    font-size: clamp(52px, 7vw, 120px);

    color: #ffd400;

    white-space: nowrap;

    letter-spacing: -0.095em;

    display: block;

    max-width: 100%;
}


/* ============================================================
   RIGHT SIDE
============================================================ */

.contact-right {
    position: relative;

    z-index: 4;

    width: 100%;
}


/* ============================================================
   GET STARTED BUTTON
============================================================ */

.contact-start-button {
    width: 100%;

    min-height: 76px;

    margin-bottom: 26px;

    padding: 0 30px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    border-radius: 999px;

    background: #ffd400;

    color: #062a50;

    text-decoration: none;

    font-size: 17px;

    font-weight: 900;

    letter-spacing: 0.08em;

    transition:
        transform 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}


.contact-start-button strong {
    font-size: 26px;

    line-height: 1;

    transition:
        transform 0.3s ease;
}


.contact-start-button:hover {
    background: #58e79a;

    transform: translateY(-4px);

    box-shadow:
        0 18px 45px rgba(88, 231, 154, 0.20);
}


.contact-start-button:hover strong {
    transform: translateX(7px);
}


/* ============================================================
   INFORMATION BOX
============================================================ */

.contact-info-box {
    position: relative;

    width: 100%;

    min-height: 88px;

    padding: 15px 22px;

    margin-bottom: 12px;

    display: flex;

    align-items: center;

    gap: 22px;

    border: 1px solid rgba(255, 212, 0, 0.30);

    border-radius: 15px;

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

    color: #ffffff;

    text-decoration: none;

    overflow: hidden;

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* subtle yellow hover fill */

.contact-info-box::before {
    content: "";

    position: absolute;

    inset: 0;

    background: rgba(255, 212, 0, 0.07);

    transform: translateX(-100%);

    transition:
        transform 0.4s ease;

    pointer-events: none;
}


.contact-info-box:hover::before {
    transform: translateX(0);
}


.contact-info-box:hover {
    border-color: #ffd400;

    transform: translateX(6px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.16);
}


/* ============================================================
   ICON
============================================================ */

.contact-info-icon {
    position: relative;

    z-index: 2;

    width: 46px;

    height: 46px;

    flex: 0 0 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border: 1px solid rgba(255, 212, 0, 0.65);

    color: #ffd400;

    font-size: 19px;

    font-weight: 800;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}


.contact-info-box:hover .contact-info-icon {
    background: #ffd400;

    color: #062a50;

    transform: rotate(-8deg);
}


/* ============================================================
   INFO TEXT
============================================================ */

.contact-info-content {
    position: relative;

    z-index: 2;

    flex: 1;

    min-width: 0;
}


.contact-info-content h3 {
    margin: 0 0 4px;

    font-size: 22px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -0.025em;
}


.contact-info-content p {
    margin: 0;

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

    font-size: 12px;

    font-weight: 500;

    letter-spacing: 0.02em;
}


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

.contact-info-arrow {
    position: relative;

    z-index: 2;

    flex: 0 0 auto;

    color: #ffd400;

    font-size: 24px;

    transition:
        transform 0.3s ease;
}


.contact-info-box:hover .contact-info-arrow {
    transform: translateX(7px);
}


/* ============================================================
   BOTTOM LINE
============================================================ */

.contact-bottom-line {
    position: relative;

    z-index: 5;

    width: min(1500px, 100%);

    margin: 30px auto 0;

    padding-top: 18px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-top:
        1px solid rgba(255, 255, 255, 0.12);

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

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.15em;
}


.contact-bottom-line span:last-child {
    color: #ffd400;
}


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

@media (max-width: 1100px) {

    .contact-section {
        padding:
            55px 30px 25px;
    }


    .contact-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(360px, 0.9fr);

        gap: 40px;
    }


    .contact-outline {
        font-size: clamp(70px, 10vw, 130px);
    }


    .contact-solid {
        font-size: clamp(75px, 11vw, 145px);
    }


    .contact-yellow {
        font-size: clamp(52px, 8vw, 105px);
    }

}


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

@media (max-width: 800px) {

    .contact-section {
        min-height: auto;

        padding:
            75px 20px 30px;
    }


    .contact-layout {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 55px;
    }


    .contact-left {
        width: 100%;
    }


    .contact-label {
        margin-bottom: 30px;
    }


    .contact-outline {
        font-size: clamp(68px, 17vw, 115px);
    }


    .contact-solid {
        font-size: clamp(72px, 18vw, 125px);
    }


    .contact-yellow {
        font-size: clamp(50px, 13vw, 90px);
    }


    .contact-right {
        width: 100%;
    }


    .contact-start-button {
        min-height: 70px;

        font-size: 14px;
    }


    .contact-info-box {
        min-height: 82px;
    }


    .contact-background-word {
        top: 35%;

        right: -20%;

        font-size: 35vw;
    }


    .contact-bottom-line {
        margin-top: 50px;

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;
    }

}


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

@media (max-width: 480px) {

    .contact-section {
        padding:
            65px 15px 25px;
    }


    .contact-layout {
        gap: 45px;
    }


    .contact-label {
        font-size: 9px;

        letter-spacing: 0.18em;

        gap: 12px;
    }


    .contact-label span {
        width: 28px;
    }


    .contact-outline {
        font-size: 20vw;

        -webkit-text-stroke-width: 1.5px;
    }


    .contact-solid {
        font-size: 21vw;
    }


    .contact-yellow {
        font-size: 14vw;
    }


    .contact-start-button {
        min-height: 64px;

        margin-bottom: 18px;

        font-size: 12px;
    }


    .contact-info-box {
        min-height: 75px;

        padding:
            12px 14px;

        gap: 14px;

        border-radius: 12px;
    }


    .contact-info-icon {
        width: 39px;

        height: 39px;

        flex-basis: 39px;

        font-size: 15px;
    }


    .contact-info-content h3 {
        font-size: 17px;
    }


    .contact-info-content p {
        font-size: 10px;
    }


    .contact-info-arrow {
        font-size: 20px;
    }


    .contact-bottom-line {
        font-size: 7px;

        letter-spacing: 0.10em;
    }

}




/* ============================================================
   13. FOOTER
============================================================ */

.footer {
    background: #002d61;

    color: #ffffff;

    padding:
        70px 0 25px;
}


.footer-container {
    width: min(
        1200px,
        calc(100% - 80px)
    );

    margin: 0 auto;
}


/* ============================================================
   FOOTER BRAND
============================================================ */

.footer-brand {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding-bottom: 45px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.12);
}


.footer-brand img {
    width: 65px;
}


.footer-brand p {
    max-width: 350px;

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

    font-size: 13px;

    line-height: 1.6;

    text-align: right;
}


/* ============================================================
   FOOTER LINKS
============================================================ */

.footer-links {
    display: flex;

    flex-wrap: wrap;

    gap: 25px;

    padding:
        25px 0;
}


.footer-links a {
    color: rgba(255, 255, 255, 0.65);

    font-size: 11px;
    font-weight: 600;

    transition:
        color 0.25s ease;
}


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


/* ============================================================
   FOOTER BOTTOM
============================================================ */

.footer-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding-top: 20px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);

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

    font-size: 10px;
}


/* ============================================================
   14. RESPONSIVE — TABLET
============================================================ */

@media (max-width: 1000px) {


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .hero-content {
        width: 65%;
    }


    .hero-side-logo {
        right: 0;

        width:
            clamp(230px, 27vw, 320px);
    }


    /* -----------------------------------------
       SIX PANELS
    ----------------------------------------- */

    .stick-panels {
        grid-template-columns:
            repeat(3, 1fr);
    }


    .stick-panel {
        height: 230px;
    }


    /* -----------------------------------------
       TEAM
    ----------------------------------------- */

    .team-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    /* -----------------------------------------
       SERVICES
    ----------------------------------------- */


    /* -----------------------------------------
       WORK
    ----------------------------------------- */

    .work-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* ============================================================
   15. RESPONSIVE — MOBILE
============================================================ */

@media (max-width: 700px) {


    /* -----------------------------------------
       COMMON
    ----------------------------------------- */

    .section-container {
        width:
            calc(100% - 40px);
    }


    /* -----------------------------------------
       NAVBAR
    ----------------------------------------- */

    


    


    


    


    


    


    


    /* -----------------------------------------
       HERO
    ----------------------------------------- */

    .hero-container {
        width:
            calc(100% - 40px);

        min-height:
            100svh;

        padding-top: 100px;

        padding-bottom: 80px;

        align-items: flex-start;
    }


    .hero-content {
        width: 100%;

        padding-top: 55px;
    }


    .hero-eyebrow {
        margin-bottom: 20px;

        font-size: 9px;
    }


    .hero-title {
        font-size:
            clamp(48px, 14vw, 75px);
    }


    .hero-description {
        max-width: 90%;

        margin-top: 28px;

        font-size: 14px;
    }


    .hero-buttons {
        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

        margin-top: 28px;
    }


    .btn {
        width: auto;

        min-height: 48px;

        padding:
            0 20px;
    }


    /* -----------------------------------------
       HERO LOGO
    ----------------------------------------- */

    .hero-side-logo {
        top: auto;
        right: 5px;
        bottom: 100px;

        width: 145px;

        transform:
            rotate(5deg);
    }


    .hero-side-logo:hover {
        transform:
            rotate(0deg)
            scale(1.04);
    }


    .hero-side-logo span {
        font-size: 8px;

        letter-spacing: 0.15em;
    }


    /* -----------------------------------------
       HERO SCROLL
    ----------------------------------------- */

    .hero-scroll {
        display: none;
    }


    /* -----------------------------------------
       HERO TAGS
    ----------------------------------------- */

    .hero-tags {
        bottom: 25px;

        gap: 6px;
    }


    .hero-tags span {
        padding:
            6px 9px;

        font-size: 7px;
    }


    /* -----------------------------------------
       SIX PANELS
    ----------------------------------------- */

    .stick-panels-section {
        padding:
            35px 0;
    }


    .stick-panels {
        width:
            calc(100% - 30px);

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

        gap: 8px;
    }


    .stick-panel {
        height: 200px;

        padding:
            17px 14px;
    }


    .panel-content {
        left: 14px;
        right: 14px;
        bottom: 14px;
    }


    .panel-content h3 {
        font-size: 15px;
    }


    .panel-content p {
        font-size: 9px;
    }


    /* -----------------------------------------
       ABOUT
    ----------------------------------------- */

    .about-section {
        min-height: 220px;
    }


    /* -----------------------------------------
       SECTION SPACING
    ----------------------------------------- */




    /* -----------------------------------------
       TEAM
    ----------------------------------------- */

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


    .team-placeholder {
        height: 330px;
    }


    /* -----------------------------------------
       SERVICES
    ----------------------------------------- */



    /* -----------------------------------------
       WORK
    ----------------------------------------- */

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


    .work-placeholder {
        height: 300px;
    }


    /* -----------------------------------------
       CONTACT
    ----------------------------------------- */

    .contact-section {
        padding:
            90px 0;
    }


    .contact-container {
        width:
            calc(100% - 40px);
    }


    .contact-section h2 {
        font-size:
            clamp(50px, 14vw, 75px);
    }


    .contact-section p {
        font-size: 14px;
    }


    .contact-buttons {
        flex-direction: column;

        align-items: flex-start;
    }


    /* -----------------------------------------
       FOOTER
    ----------------------------------------- */

    .footer {
        padding:
            55px 0 20px;
    }


    .footer-container {
        width:
            calc(100% - 40px);
    }


    .footer-brand {
        flex-direction: column;

        align-items: flex-start;
    }


    .footer-brand p {
        text-align: left;
    }


    .footer-bottom {
        flex-direction: column;

        align-items: flex-start;
    }

}


/* ============================================================
   16. VERY SMALL PHONES
============================================================ */

@media (max-width: 420px) {


    .hero-title {
        font-size:
            45px;
    }


    .hero-side-logo {
        width: 120px;

        right: 0;

        bottom: 95px;
    }


    .stick-panels {
        grid-template-columns:
            1fr;
    }


    .stick-panel {
        height: 180px;
    }


    .panel-content h3 {
        font-size: 18px;
    }


    .work-placeholder {
        height: 250px;
    }

}


/* ============================================================
   END OF INDEX STYLE SHEET
============================================================ */
/* ============================================================
   PIXEL-MATCH OVERRIDES — TARGET REFERENCE
   These rules intentionally override the older base rules above.
============================================================ */

:root {
    --sn-blue: #0757b8;
    --sn-yellow: #ffd400;
    --sn-green: #58e79a;
    --sn-white: #ffffff;
    --sn-dark: #062a50;
}

body { background: #f5f7fa; }

/* HEADER */
























/* HERO */
.hero {
    min-height: 0;
    height: clamp(690px, 86vh, 820px);
    background: #0757b8;
    isolation: isolate;
}

/* Exact-style vertical grid: 12 columns + faint horizontal structure */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.105) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 8.333333% 100%, 100% 115px;
}

.hero::after {
    width: 620px;
    height: 620px;
    right: -270px;
    top: 120px;
    background: rgba(0, 61, 130, .18);
    border: 1px solid rgba(255,255,255,.06);
    z-index: 0;
}

.hero-container {
    width: calc(100% - 100px);
    max-width: none;
    min-height: 100%;
    height: 100%;
    padding: 0;
    margin: 0 auto;
    align-items: center;
}

.hero-content {
    width: 62%;
    padding-top: 15px;
}

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 22px;
    color: rgba(255,255,255,.82);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
}

.eyebrow-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--sn-yellow);
}

.hero-title {
    max-width: 820px;
    font-size: clamp(64px, 7.25vw, 106px);
    line-height: .88;
    letter-spacing: -.065em;
    font-weight: 700;
    color: #fff;
}

.highlight-word { color: var(--sn-yellow); }

.outline-word {
    color: transparent;
    -webkit-text-stroke: 2px rgba(255,255,255,.92);
}

.hero-description {
    max-width: 545px;
    margin-top: 31px;
    color: rgba(255,255,255,.74);
    font-size: 14px;
    line-height: 1.55;
}

.hero-buttons {
    gap: 13px;
    margin-top: 27px;
}

.btn {
    min-height: 58px;
    padding: 0 8px 0 24px;
    border: 0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.btn-primary {
    min-width: 205px;
    justify-content: space-between;
    background: var(--sn-yellow);
    color: var(--sn-dark);
}

.btn-primary::after {
    content: "↗";
    width: 43px;
    height: 43px;
    margin-left: 17px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(6,42,80,.12);
    font-size: 17px;
}

.btn-whatsapp {
    min-width: 220px;
    padding-left: 8px;
    padding-right: 21px;
    background: var(--sn-green);
    color: var(--sn-dark);
}

.btn-whatsapp::before {
    content: "◔";
    width: 43px;
    height: 43px;
    margin-right: 10px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(6,42,80,.16);
    font-size: 20px;
}

.btn-whatsapp:hover,
.btn-primary:hover { color: var(--sn-dark); }

/* REAL ASSET ONLY — no invented circle/ring */
.hero-side-logo {
    right: 6.8%;
    top: 50%;
    width: clamp(350px, 31vw, 485px);
    transform: translateY(-50%) rotate(5deg);
    z-index: 4;
}

.hero-side-logo img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
}

.hero-side-logo span {
    margin-top: 0;
    color: var(--sn-yellow);
    font-size: 0;
    letter-spacing: 0;
}

/* If the supplied PNG already contains the complete mark, don't add text.
   The original image remains the source of truth. */
.hero-side-logo span { display: none; }

.hero-scroll {
    right: 4.5%;
    bottom: 170px;
    gap: 9px;
    color: rgba(255,255,255,.78);
    font-size: 8px;
    letter-spacing: .20em;
    transform: rotate(90deg);
}

.hero-scroll .scroll-arrow { color: var(--sn-yellow); }

.hero-tags {
    left: 50%;
    bottom: 23px;
    transform: translateX(-50%);
    width: max-content;
    display: flex;
    gap: 0;
    flex-wrap: nowrap;
}

.hero-tags span {
    padding: 0 30px;
    border: 0;
    border-radius: 0;
    color: rgba(255,255,255,.88);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .18em;
    line-height: 1;
    text-transform: uppercase;
}

.hero-tags span + span {
    border-left: 1px solid rgba(255,255,255,.27);
}

/* SERVICE PANELS — continuous six-column yellow grid */
.stick-panels-section {
    padding: 0;
    background: var(--sn-yellow);
    overflow: hidden;
}

.stick-panels {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0;
}

.stick-panel {
    min-width: 0;
    min-height: 300px;
    padding: 28px 24px 25px;
    border: 0;
    border-right: 1px solid rgba(6,42,80,.24);
    border-radius: 0;
    background: var(--sn-yellow);
    box-shadow: none;
    color: var(--sn-dark);
    transform: none;
}

.stick-panel:last-child { border-right: 0; }

.stick-panel:hover {
    transform: none;
    box-shadow: none;
}

.panel-number {
    color: var(--sn-dark);
    font-size: 11px;
    font-weight: 800;
}

.panel-content {
    position: relative;
    min-height: 235px;
    padding: 0;
}

.panel-content h3 {
    margin-top: 47px;
    color: var(--sn-dark);
    font-size: clamp(17px, 1.45vw, 23px);
    line-height: 1;
    letter-spacing: -.035em;
    font-weight: 800;
}

.panel-content p { display: none; }

.panel-arrow {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 47px;
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--sn-dark);
    border-radius: 50%;
    color: var(--sn-dark);
    font-size: 18px;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.stick-panel:hover .panel-arrow {
    background: var(--sn-dark);
    color: var(--sn-yellow);
    transform: rotate(45deg);
}

/* Keep the following existing sections functional but visually separated. */
.about-section { min-height: 220px; }

/* MOBILE */
@media (max-width: 1100px) {
    
    
    .hero-side-logo { right: 2%; width: clamp(300px, 34vw, 400px); }
    .hero-title { font-size: clamp(58px, 7.5vw, 90px); }
    .hero-tags span { padding: 0 18px; }
    .stick-panel { padding-left: 17px; padding-right: 17px; }
}

@media (max-width: 768px) {
    
    
    
    

    

    .hero {
        height: auto;
        min-height: 820px;
    }

    .hero-container {
        width: calc(100% - 44px);
        min-height: 820px;
        height: auto;
        padding-top: 115px;
        padding-bottom: 145px;
        align-items: flex-start;
    }

    .hero-content { width: 100%; }
    .hero-title { font-size: clamp(49px, 14.8vw, 76px); letter-spacing: -.055em; }
    .hero-description { max-width: 420px; font-size: 13px; }
    .hero-buttons { flex-direction: column; align-items: flex-start; }
    .btn-primary, .btn-whatsapp { min-width: 205px; }

    .hero-side-logo {
        width: 300px;
        right: -80px;
        top: auto;
        bottom: 115px;
        transform: rotate(5deg);
        opacity: .48;
    }

    .hero-scroll { right: 13px; bottom: 160px; }

    .hero-tags { left: 22px; right: 22px; bottom: 24px; width: auto; transform: none; justify-content: center; }
    .hero-tags span { padding: 0 7px; font-size: 6.5px; letter-spacing: .12em; }

    .stick-panels { grid-template-columns: repeat(2, 1fr); }
    .stick-panel { min-height: 220px; border-bottom: 1px solid rgba(6,42,80,.24); }
    .stick-panel:nth-child(even) { border-right: 0; }
    .panel-content { min-height: 165px; }
    .panel-content h3 { margin-top: 30px; font-size: 18px; }
}

@media (max-width: 430px) {
    .hero { min-height: 790px; }
    .hero-container { min-height: 790px; }
    .hero-title { font-size: 48px; }
    .hero-side-logo { width: 250px; right: -75px; bottom: 100px; }
    .hero-tags span { padding: 0 4px; font-size: 6px; }
    .stick-panels { grid-template-columns: 1fr; }
    .stick-panel, .stick-panel:nth-child(even) { border-right: 0; }
    .stick-panel:last-child { border-bottom: 0; }
}


/* ============================================================
   FINAL FIX — INTRO + UNIVERSAL NAVBAR
   ============================================================ */

.intro-screen.hide {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ============================================================
   HOME TEAM SECTION
   BLUE CIRCULAR TEAM DESIGN
============================================================ */

.home-team-section {
    position: relative;

    min-height: 850px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #003d82 0%,
            #0056a8 48%,
            #00336f 100%
        );

    color: #ffffff;
}


.home-team-section::before {
    content: "";

    position: absolute;

    width: 700px;
    height: 700px;

    right: -280px;
    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

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

    box-shadow:
        0 0 0 100px rgba(255,255,255,0.018),
        0 0 0 200px rgba(255,255,255,0.012);

    pointer-events: none;
}


.home-team-section::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -250px;
    bottom: -300px;

    border-radius: 50%;

    background:
        rgba(0, 105, 210, 0.35);

    filter: blur(80px);

    pointer-events: none;
}


/* ============================================================
   CONTAINER
============================================================ */

.home-team-container {
    position: relative;

    width: min(
        1400px,
        calc(100% - 110px)
    );

    min-height: 850px;

    margin: 0 auto;

    padding:
        100px 0 50px;

    z-index: 2;
}


/* ============================================================
   TOP HEADING
============================================================ */

.home-team-heading {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 45px;
}


.home-team-label {
    display: flex;

    align-items: center;

    gap: 14px;

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

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.20em;

    text-transform: uppercase;
}


.home-team-line {
    width: 34px;

    height: 2px;

    background: #ffd400;
}


.home-team-number {
    color:
        rgba(255,255,255,0.45);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.16em;
}


/* ============================================================
   MAIN LAYOUT
============================================================ */

.home-team-layout {
    display: grid;

    grid-template-columns:
        0.8fr 1.4fr;

    align-items: center;

    min-height: 570px;
}


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

.home-team-copy {
    position: relative;

    z-index: 10;

    max-width: 500px;
}


.home-team-copy h2 {
    margin: 0;

    font-size:
        clamp(
            65px,
            7vw,
            110px
        );

    font-weight: 800;

    line-height: 0.88;

    letter-spacing:
        -0.055em;
}


.home-team-copy h2 span {
    display: block;

    color: #ffd400;
}


.home-team-copy p {
    max-width: 390px;

    margin:
        35px 0 30px;

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

    font-size: 15px;

    line-height: 1.7;
}


/* ============================================================
   BUTTON
============================================================ */

.home-team-button {
    display: inline-flex;

    align-items: center;

    gap: 14px;

    min-height: 50px;

    padding:
        5px 7px 5px 20px;

    border-radius: 999px;

    background: #ffd400;

    color: #062a50;

    font-size: 12px;

    font-weight: 800;

    text-decoration: none;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.home-team-arrow {
    width: 38px;
    height: 38px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(6,42,80,0.12);

    font-size: 17px;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}


.home-team-button:hover {
    transform: translateY(-4px);

    background: #58e79a;

    box-shadow:
        0 15px 35px
        rgba(0,0,0,0.20);
}


.home-team-button:hover
.home-team-arrow {
    transform: rotate(45deg);

    background: #062a50;

    color: #58e79a;
}


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

.home-team-stage {
    position: relative;

    width: 700px;
    height: 620px;

    margin-left: auto;

    perspective: 1300px;

    transform-style: preserve-3d;
}


/* ============================================================
   ORBIT
============================================================ */

.home-team-orbit {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 580px;
    height: 350px;

    transform:
        translate(-50%, -50%)
        rotateX(62deg);

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

    border-radius: 50%;

    box-shadow:
        0 0 50px
        rgba(255,255,255,0.03);
}


/* ============================================================
   YELLOW ACCENT
============================================================ */

.home-team-accent {
    position: absolute;

    right: 10px;
    top: 25px;

    width: 5px;
    height: 190px;

    background: #ffd400;

    transform:
        rotate(12deg);

    box-shadow:
        0 0 20px
        rgba(255,212,0,0.35);

    z-index: 1;
}


/* ============================================================
   TEAM CARDS
============================================================ */

.home-team-card {
    position: absolute;

    width: 205px;
    height: 310px;

    overflow: hidden;

    border-radius: 16px;

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

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

    transform-style: preserve-3d;

    transition:
        transform 0.55s cubic-bezier(
            .2,
            .8,
            .2,
            1
        ),
        box-shadow 0.4s ease,
        filter 0.4s ease;

    cursor: pointer;
}


.home-team-card:hover {
    z-index: 20;

    filter: brightness(1.08);

    box-shadow:
        0 40px 80px
        rgba(0,0,0,0.50);
}


/* ============================================================
   CARD POSITIONS
============================================================ */

.home-card-one {
    left: 25px;
    top: 185px;

    transform:
        rotate(-9deg)
        translateZ(0);
}


.home-card-two {
    left: 245px;
    top: 75px;

    transform:
        rotate(2deg)
        translateZ(80px);

    z-index: 10;
}


.home-card-three {
    right: 20px;
    top: 170px;

    transform:
        rotate(9deg)
        translateZ(20px);
}


.home-card-one:hover {
    transform:
        rotate(-5deg)
        translateY(-20px)
        translateZ(70px)
        scale(1.04);
}


.home-card-two:hover {
    transform:
        rotate(0deg)
        translateY(-25px)
        translateZ(130px)
        scale(1.05);
}


.home-card-three:hover {
    transform:
        rotate(5deg)
        translateY(-20px)
        translateZ(80px)
        scale(1.04);
}


/* ============================================================
   CARD COLORS
============================================================ */

.home-card-color {
    position: absolute;

    inset: 0;

    z-index: 0;
}


.blue-card {
    background:
        linear-gradient(
            145deg,
            #164cff,
            #06277e
        );
}


.pink-card {
    background:
        linear-gradient(
            145deg,
            #ff009d,
            #7d005e
        );
}


.orange-card {
    background:
        linear-gradient(
            145deg,
            #ff6500,
            #9e2200
        );
}


/* ============================================================
   CARD TOP
============================================================ */

.home-card-top {
    position: absolute;

    top: 17px;
    left: 18px;
    right: 18px;

    display: flex;

    justify-content: space-between;

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

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.14em;

    z-index: 5;
}


/* ============================================================
   PERSON
============================================================ */

.home-card-person {
    position: absolute;

    left: 10%;
    right: 10%;

    top: 50px;
    bottom: 75px;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 2;
}


.home-person-placeholder {
    width: 145px;
    height: 180px;

    display: flex;

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

    border-radius: 80px 80px 20px 20px;

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

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

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.18em;

    box-shadow:
        inset 0 0 40px
        rgba(255,255,255,0.08);
}


/* ============================================================
   CARD INFORMATION
============================================================ */

.home-card-info {
    position: absolute;

    left: 18px;
    right: 18px;
    bottom: 17px;

    z-index: 5;
}


.home-card-info small {
    display: block;

    margin-bottom: 4px;

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

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 0.16em;
}


.home-card-info h3 {
    margin: 0;

    color: #fff;

    font-size: 28px;

    font-weight: 800;

    line-height: 1;

    letter-spacing: -0.04em;
}


.home-card-info p {
    margin: 6px 0 0;

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

    font-size: 8px;

    font-weight: 600;
}


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

.home-team-center {
    position: absolute;

    left: 50%;
    top: 51%;

    width: 135px;
    height: 135px;

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

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

    background:
        rgba(0,35,85,0.72);

    backdrop-filter:
        blur(12px);

    box-shadow:
        0 0 60px
        rgba(0,0,0,0.25);

    z-index: 8;

    pointer-events: none;
}


.home-team-center span {
    color:
        rgba(255,255,255,0.50);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.18em;
}


.home-team-center strong {
    margin-top: 3px;

    color: #ffd400;

    font-size: 27px;

    line-height: 1;

    letter-spacing: -0.05em;
}


.home-team-center small {
    margin-top: 7px;

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

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 0.2em;
}


/* ============================================================
   BOTTOM STRIP
============================================================ */

.home-team-bottom {
    display: flex;

    align-items: center;

    gap: 18px;

    margin-top: 25px;

    padding-top: 22px;

    border-top:
        1px solid
        rgba(255,255,255,0.13);

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

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.18em;
}


.home-team-bottom div {
    width: 35px;

    height: 1px;

    background:
        rgba(255,255,255,0.25);
}


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

@media (max-width: 1100px) {

    .home-team-container {
        width:
            calc(100% - 60px);
    }


    .home-team-layout {
        grid-template-columns:
            0.7fr 1.3fr;
    }


    .home-team-stage {
        width: 620px;

        transform:
            scale(0.88);

        transform-origin:
            center right;
    }


    .home-team-copy h2 {
        font-size: 72px;
    }

}


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

@media (max-width: 768px) {

    .home-team-section {
        min-height: 1100px;
    }


    .home-team-container {
        width:
            calc(100% - 36px);

        padding:
            75px 0 40px;
    }


    .home-team-layout {
        display: flex;

        flex-direction: column;

        min-height: auto;
    }


    .home-team-copy {
        width: 100%;

        max-width: none;
    }


    .home-team-copy h2 {
        font-size:
            clamp(
                58px,
                16vw,
                85px
            );
    }


    .home-team-copy p {
        max-width: 330px;

        font-size: 13px;

        margin-top: 25px;
    }


    .home-team-stage {
        width: 650px;
        height: 570px;

        margin:
            50px auto 0;

        left: 50%;

        transform:
            translateX(-50%);

        flex-shrink: 0;
    }


    .home-team-orbit {
        width: 500px;
        height: 300px;
    }


    .home-team-card {
        width: 165px;
        height: 250px;
    }


    .home-card-one {
        left: 75px;
        top: 170px;
    }


    .home-card-two {
        left: 242px;
        top: 75px;
    }


    .home-card-three {
        right: 75px;
        top: 170px;
    }


    .home-person-placeholder {
        width: 115px;
        height: 145px;
    }


    .home-card-info h3 {
        font-size: 22px;
    }


    .home-team-center {
        width: 110px;
        height: 110px;
    }


    .home-team-center strong {
        font-size: 23px;
    }


    .home-team-accent {
        display: none;
    }


    .home-team-bottom {
        flex-wrap: wrap;

        gap: 12px;
    }

}


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

@media (max-width: 480px) {

    .home-team-section {
        min-height: 1000px;
    }


    .home-team-heading {
        margin-bottom: 30px;
    }


    .home-team-label {
        font-size: 8px;

        letter-spacing: 0.14em;
    }


    .home-team-copy h2 {
        font-size: 58px;
    }


    .home-team-stage {
        width: 570px;
        height: 510px;

        margin-top: 35px;
    }


    .home-team-orbit {
        width: 420px;
        height: 260px;
    }


    .home-team-card {
        width: 140px;
        height: 215px;
    }


    .home-card-one {
        left: 78px;
        top: 150px;
    }


    .home-card-two {
        left: 215px;
        top: 70px;
    }


    .home-card-three {
        right: 78px;
        top: 150px;
    }


    .home-card-info {
        left: 13px;
        right: 13px;
        bottom: 12px;
    }


    .home-card-info h3 {
        font-size: 18px;
    }


    .home-card-info p {
        font-size: 7px;
    }


    .home-person-placeholder {
        width: 95px;
        height: 125px;

        font-size: 9px;
    }


    .home-team-center {
        width: 90px;
        height: 90px;
    }


    .home-team-center strong {
        font-size: 19px;
    }


    .home-team-center span {
        font-size: 6px;
    }


    .home-team-center small {
        font-size: 5px;
    }

}


/* ============================================================
   PREMIUM SERVICES
   BLUE CREATIVE AGENCY DESIGN
============================================================ */

.premium-services-section {
    position: relative;

    overflow: hidden;

    min-height: 950px;

    background:
        linear-gradient(
            135deg,
            #00346f 0%,
            #0059ad 48%,
            #002d64 100%
        );

    color: #ffffff;
}


/* subtle background lighting */

.premium-services-section::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    top: -300px;
    right: -200px;

    border-radius: 50%;

    background:
        rgba(42, 139, 255, 0.22);

    filter: blur(100px);

    pointer-events: none;
}


.premium-services-section::after {
    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    left: -250px;
    bottom: -250px;

    border-radius: 50%;

    background:
        rgba(0, 110, 255, 0.20);

    filter: blur(90px);

    pointer-events: none;
}


/* ============================================================
   CONTAINER
============================================================ */

.premium-services-container {

    position: relative;

    width:
        min(
            1400px,
            calc(100% - 110px)
        );

    margin: 0 auto;

    padding:
        105px 0 45px;

    z-index: 2;
}


/* ============================================================
   HEADER
============================================================ */

.premium-services-heading {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 35px;
}


.premium-services-label {

    display: flex;

    align-items: center;

    gap: 14px;

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

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.20em;
}


.premium-services-line {

    width: 35px;

    height: 2px;

    background: #ffd400;
}


.premium-services-number {

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

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.18em;
}


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

.premium-services-intro {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 65px;
}


.premium-services-intro h2 {

    margin: 0;

    font-size:
        clamp(
            70px,
            8vw,
            125px
        );

    font-weight: 800;

    line-height: 0.84;

    letter-spacing:
        -0.06em;
}


.premium-services-intro h2 span {

    display: inline-block;

    color: #ffd400;
}


.premium-services-intro p {

    width: 330px;

    margin: 0 30px 5px 0;

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

    font-size: 14px;

    line-height: 1.7;
}


/* ============================================================
   SERVICES GRID
============================================================ */

.premium-services-grid {

    display: grid;

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

    gap: 18px;
}


/* ============================================================
   SERVICE CARD
============================================================ */

.premium-service-card {

    position: relative;

    min-height: 315px;

    padding: 25px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

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

    border-radius: 20px;

    box-shadow:
        0 25px 50px
        rgba(0,0,0,0.20);

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

    transition:
        transform 0.45s cubic-bezier(
            .2,
            .8,
            .2,
            1
        ),
        box-shadow 0.45s ease,
        border-color 0.3s ease;
}


.premium-service-card::before {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -80px;
    bottom: -90px;

    border-radius: 50%;

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

    transition:
        transform 0.5s ease;
}


.premium-service-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.10),
            transparent 45%
        );

    pointer-events: none;
}


.premium-service-card:hover {

    transform:
        translateY(-12px)
        rotate(-1deg);

    box-shadow:
        0 35px 70px
        rgba(0,0,0,0.35);

    border-color:
        rgba(255,255,255,0.32);
}


.premium-service-card:hover::before {

    transform:
        scale(1.35);
}


/* ============================================================
   CARD COLORS
============================================================ */

.service-blue {

    background:
        linear-gradient(
            145deg,
            #075fc0,
            #00367c
        );
}


.service-dark {

    background:
        linear-gradient(
            145deg,
            #00336f,
            #001d45
        );
}


.service-yellow {

    background:
        linear-gradient(
            145deg,
            #ffd400,
            #e5a900
        );

    color: #062a50;
}


.service-blue-light {

    background:
        linear-gradient(
            145deg,
            #0878dc,
            #03458e
        );
}


.service-dark-blue {

    background:
        linear-gradient(
            145deg,
            #064b9d,
            #02285d
        );
}


.service-electric {

    background:
        linear-gradient(
            145deg,
            #168eff,
            #0051aa
        );
}


/* ============================================================
   CARD TOP
============================================================ */

.premium-service-top {

    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.premium-service-number {

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 0.12em;

    opacity: 0.65;
}


.premium-service-symbol {

    width: 40px;

    height: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    font-size: 17px;

    transition:
        transform 0.35s ease,
        background 0.35s ease;
}


.premium-service-card:hover
.premium-service-symbol {

    transform:
        rotate(45deg);

    background:
        rgba(255,255,255,0.24);
}


/* yellow card */

.service-yellow
.premium-service-symbol {

    background:
        rgba(6,42,80,0.12);
}


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

.premium-service-content {

    position: relative;

    z-index: 3;
}


.premium-service-category {

    display: block;

    margin-bottom: 15px;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.18em;

    opacity: 0.58;
}


.premium-service-content h3 {

    margin: 0;

    max-width: 290px;

    font-size:
        clamp(
            27px,
            2.5vw,
            40px
        );

    font-weight: 800;

    line-height: 0.95;

    letter-spacing:
        -0.045em;
}


/* ============================================================
   CARD FOOTER
============================================================ */

.premium-service-bottom {

    position: relative;

    z-index: 3;

    padding-top: 15px;

    border-top:
        1px solid
        rgba(255,255,255,0.15);

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

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 0.13em;
}


.service-yellow
.premium-service-bottom {

    color:
        rgba(6,42,80,0.55);

    border-color:
        rgba(6,42,80,0.18);
}


/* ============================================================
   OFFSET CARD EFFECT
============================================================ */

.premium-service-card:nth-child(2) {

    transform:
        translateY(30px);
}


.premium-service-card:nth-child(2):hover {

    transform:
        translateY(18px)
        rotate(1deg);
}


.premium-service-card:nth-child(3) {

    transform:
        translateY(8px);
}


.premium-service-card:nth-child(4) {

    transform:
        translateY(8px);
}


.premium-service-card:nth-child(5) {

    transform:
        translateY(-22px);
}


.premium-service-card:nth-child(6) {

    transform:
        translateY(8px);
}


/* ============================================================
   FOOTER
============================================================ */

.premium-services-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 55px;

    padding-top: 22px;

    border-top:
        1px solid
        rgba(255,255,255,0.12);

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

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 0.18em;
}


.premium-services-footer-arrow {

    width: 35px;

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 50%;

    color: #ffd400;

    font-size: 14px;
}


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

@media (max-width: 1000px) {

    .premium-services-container {

        width:
            calc(100% - 60px);
    }


    .premium-services-grid {

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


    .premium-service-card:nth-child(n) {

        transform:
            translateY(0);
    }


    .premium-service-card:hover {

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

}


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

@media (max-width: 700px) {

    .premium-services-section {

        min-height: auto;
    }


    .premium-services-container {

        width:
            calc(100% - 36px);

        padding:
            80px 0 35px;
    }


    .premium-services-intro {

        display: block;

        margin-bottom: 40px;
    }


    .premium-services-intro h2 {

        font-size:
            clamp(
                60px,
                17vw,
                90px
            );
    }


    .premium-services-intro p {

        width: auto;

        margin:
            25px 0 0;

        max-width: 330px;
    }


    .premium-services-grid {

        grid-template-columns:
            1fr;

        gap: 14px;
    }


    .premium-service-card {

        min-height: 280px;

        border-radius: 17px;
    }


    .premium-service-card:nth-child(n) {

        transform:
            translateY(0);
    }


    .premium-service-card:hover {

        transform:
            translateY(-7px);
    }


    .premium-service-content h3 {

        font-size: 34px;
    }


    .premium-services-footer {

        margin-top: 35px;

        line-height: 1.5;
    }

}


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

@media (max-width: 430px) {

    .premium-services-container {

        width:
            calc(100% - 28px);
    }


    .premium-services-label {

        font-size: 8px;

        letter-spacing: 0.14em;
    }


    .premium-service-card {

        min-height: 255px;

        padding: 21px;
    }


    .premium-service-content h3 {

        font-size: 30px;
    }

}





/* ============================================================
   OUR TOP CLIENTS
============================================================ */

.clients-section {
    position: relative;
    width: 100%;
    min-height: 420px;
    padding: 70px 0 65px;
    background: #050505;
    color: #ffffff;
    overflow: hidden;
}


/* CONTAINER */

.clients-container {
    width: min(1400px, calc(100% - 60px));
    margin: 0 auto;
}


/* SMALL RED LABEL */

.clients-eyebrow {
    margin-bottom: 12px;
}

.clients-eyebrow span {
    display: inline-block;
    color: #ff3b30;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
}


/* MAIN HEADING */

.clients-title {
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 18px;
    font-size: clamp(48px, 6vw, 90px);
    line-height: 0.95;
    font-weight: 800;
    letter-spacing: -0.05em;
    text-transform: uppercase;
}

.clients-title span {
    color: #ffffff;
}

.clients-title strong {
    color: #ff3b30;
    font-weight: 800;
}


/* MARQUEE */

.clients-marquee {
    position: relative;
    width: 100%;
    margin-top: 45px;
    overflow: hidden;
}


/* EDGE FADE */

.clients-marquee::before,
.clients-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 5;
    pointer-events: none;
}

.clients-marquee::before {
    left: 0;
    background: linear-gradient(
        to right,
        #050505,
        transparent
    );
}

.clients-marquee::after {
    right: 0;
    background: linear-gradient(
        to left,
        #050505,
        transparent
    );
}


/* TRACK */

.clients-track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 18px;
    animation: clientsMarquee 32s linear infinite;
}


/* LOGO CARD */

.client-logo {
    width: 122px;
    height: 106px;
    flex: 0 0 122px;

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

    padding: 20px;

    background: #ffffff;
    border-radius: 18px;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.client-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}


/* HOVER */

.client-logo:hover {
    transform: translateY(-8px) scale(1.04);
    box-shadow:
        0 18px 35px rgba(255, 59, 48, 0.20);
}


/* PAUSE ON HOVER */

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


/* INFINITE MOVEMENT */

@keyframes clientsMarquee {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-50% - 9px));
    }

}


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

@media (max-width: 900px) {

    .clients-section {
        min-height: 390px;
        padding: 60px 0 55px;
    }

    .clients-container {
        width: calc(100% - 40px);
    }

    .clients-title {
        font-size: clamp(44px, 8vw, 70px);
        gap: 12px;
    }

    .clients-marquee {
        margin-top: 38px;
    }

    .client-logo {
        width: 110px;
        height: 96px;
        flex-basis: 110px;
        padding: 17px;
        border-radius: 16px;
    }

}


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

@media (max-width: 600px) {

    .clients-section {
        min-height: 360px;
        padding: 55px 0 50px;
    }

    .clients-container {
        width: calc(100% - 30px);
    }

    .clients-eyebrow span {
        font-size: 10px;
    }

    .clients-title {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        font-size: clamp(44px, 13vw, 65px);
        line-height: 0.9;
    }

    .clients-marquee {
        margin-top: 35px;
    }

    .clients-track {
        gap: 12px;
        animation-duration: 25s;
    }

    .client-logo {
        width: 92px;
        height: 82px;
        flex-basis: 92px;
        padding: 14px;
        border-radius: 14px;
    }

    .clients-marquee::before,
    .clients-marquee::after {
        width: 60px;
    }

}


/* ============================================================
   SERVICES — HOVER DETAILS
============================================================ */

.services-hover-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #071426;
    color: #ffffff;
}


/* ============================================================
   TOP CATEGORY NAV
============================================================ */

.services-top-nav {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: #0754aa;
    overflow: hidden;
}

.services-top-nav span {
    min-width: 150px;
    padding: 0 30px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);

    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-align: center;
}


/* ============================================================
   SERVICES GRID
============================================================ */

.services-hover-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    width: 100%;
}


/* ============================================================
   SERVICE CARD
============================================================ */

.service-hover-card {
    position: relative;
    min-height: 338px;
    padding: 34px 28px;

    background: #ffd400;
    color: #003d82;

    border-right: 1px solid rgba(0, 61, 130, 0.20);

    overflow: hidden;
    cursor: pointer;

    transition:
        background 0.45s ease,
        color 0.45s ease;
}


/* NUMBER */

.service-number {
    position: relative;
    z-index: 3;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;

    transition: color 0.35s ease;
}


/* TITLE */

.service-hover-card h2 {
    position: relative;
    z-index: 3;

    margin: 30px 0 0;

    font-family: Arial Black, Arial, Helvetica, sans-serif;
    font-size: clamp(24px, 2vw, 34px);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -0.045em;
    text-transform: uppercase;

    transition:
        color 0.35s ease,
        transform 0.45s ease;
}


/* ============================================================
   HIDDEN DETAILS
============================================================ */

.service-details {
    position: absolute;
    left: 28px;
    right: 24px;
    bottom: 28px;

    opacity: 0;
    transform: translateY(25px);

    transition:
        opacity 0.4s ease,
        transform 0.45s ease;
}


.service-details h3 {
    margin: 0 0 15px;

    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}


.service-details ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


.service-details li {
    position: relative;

    margin-bottom: 9px;
    padding-left: 15px;

    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
}


.service-details li::before {
    content: "→";

    position: absolute;
    left: 0;
    top: 0;

    font-weight: 900;
}


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

.service-hover-card:hover {
    background: #ffffff;
    color: #111111;
}


.service-hover-card:hover .service-number {
    color: #111111;
}


.service-hover-card:hover h2 {
    color: #111111;
    transform: translateY(-8px);
}


.service-hover-card:hover .service-details {
    opacity: 1;
    transform: translateY(0);
}


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

.service-arrow {
    position: absolute;
    left: 28px;
    bottom: 20px;

    width: 52px;
    height: 52px;

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

    border-radius: 50%;
    background: #003d82;
    color: #ffd400;

    font-size: 22px;

    transition:
        opacity 0.3s ease,
        transform 0.35s ease;
}


.service-hover-card:hover .service-arrow {
    opacity: 0;
    transform: translateX(15px);
}


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

@media (max-width: 1000px) {

    .services-hover-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .service-hover-card {
        min-height: 330px;
    }

    .services-top-nav span {
        min-width: auto;
        flex: 1;
        padding: 0 10px;
        font-size: 9px;
    }
}


@media (max-width: 700px) {

    .services-top-nav {
        display: none;
    }

    .services-hover-grid {
        grid-template-columns: 1fr;
    }

    .service-hover-card {
        min-height: 280px;
        padding: 28px 24px;
    }

    .service-hover-card h2 {
        font-size: 30px;
        margin-top: 25px;
    }

    .service-details {
        left: 24px;
        right: 24px;
        bottom: 24px;
    }

    /*
       On mobile there is no mouse hover.
       Keep details visible so the client can read them.
    */

    .service-details {
        opacity: 1;
        transform: translateY(0);
    }

    .service-hover-card .service-arrow {
        display: none;
    }
}