/* RESET */
* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    margin: 0;
    padding: 0;
}

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

button {
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
}

/* utility colors */
.gold {
    color: #E7D4AD;
}
.white {
    color: #FFFFFF;
}

/* =========================================================
   PAGE BACKGROUND
   ========================================================= */
.page-body {
    background-color: #050505;
    background-image:
        radial-gradient(
            circle at 50% 20%,
            rgba(0, 0, 0, 0.45) 0%,
            rgba(0, 0, 0, 0.5) 60%,
            rgba(0, 0, 0, 0.6) 100%
        ),
        url("/static/img/site_bg.webp");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: scroll; /* avoid scroll jank */

    color: #fff;
    font-family: 'Urbanist', system-ui, -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
}

/* =========================================================
   NAVBAR
   ========================================================= */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    z-index: 2000;

    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.55) 20%,
        rgba(0, 0, 0, 0.32) 40%,
        rgba(0, 0, 0, 0.0) 100%
    );

    border-bottom: none;

    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    /* header slide hide/show */
    transform: translateY(0);
    transition:
        transform 0.28s ease,
        background 0.28s ease,
        backdrop-filter 0.28s ease,
        -webkit-backdrop-filter 0.28s ease;
}

/* header hidden state when scrolling down */
.site-header.site-header--hidden {
    transform: translateY(-100%);
}

/* style once scrolled */
.site-header.scrolled {
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);

    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.6) 0%,
        rgba(0, 0, 0, 0.22) 40%,
        rgba(0, 0, 0, 0.0) 100%
    );

    border-bottom: none;
}

.site-header-inner {
    position: relative;

    max-width: 1883px;
    width: 100%;
    margin: 0 auto;

    height: 110px;
}

/* LOGO */
.brand {
    position: absolute;
    left: 97px;
    top: 20px;

    display: flex;
    align-items: flex-start;
    flex-direction: row;
    flex-shrink: 0;
}

.brand-logo {
    width: 216px;
    height: 75px;
    object-fit: contain;
}

.brand-name {
    display: none;
    font-family: 'Urbanist', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #d9c9a4;
    letter-spacing: 0.03em;
}

/* NAV LINKS */
.main-nav {
    position: absolute;
    left: 593px;
    top: 45px;

    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    column-gap: 63px;
    row-gap: 0;

    font-family: 'Urbanist', sans-serif;
}

.nav-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.02em;
    transition: color 0.15s ease;
}

.nav-link.active,
.nav-link:hover {
    color: #e2d6b1;
}

/* CONTACT BUTTON WRAP */
.cta-wrap {
    position: absolute;
    left: 1637px;
    top: 20px;

    display: flex;
    align-items: flex-start;
    flex-shrink: 0;
}

/* =========================================================
   CONTACT BUTTON (PREMIUM GRADIENT BORDER + HOVER GLOW)
   ========================================================= */

/* custom animatable angle for conic gradient spin */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@keyframes spinBorder {
    to {
        --angle: 360deg;
    }
}

.contact-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 186.5px;
    height: 70.34px;

    padding: 10px 16px;

    font-family: 'Urbanist', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.2;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    letter-spacing: 0.02em;

    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;

    box-shadow:
        0 16px 32px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 255, 255, 0.05) inset;

    backdrop-filter: blur(6px) brightness(1.05) saturate(1.2) contrast(1.1);
    -webkit-backdrop-filter: blur(6px) brightness(1.05) saturate(1.2) contrast(1.1);

    transition:
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease,
        color 0.18s ease;
    z-index: 0; /* for pseudo-elements layering */
    overflow: visible;
}

/* animated conic gradient border ring */
.contact-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 1px; /* border thickness */

    background: conic-gradient(
        from var(--angle),
        /* warm gold to white to dark and back */
        rgba(231,212,173,1) 0%,
        rgba(255,255,255,0.9) 15%,
        rgba(231,212,173,0.0) 30%,
        rgba(255,255,255,0.35) 50%,
        rgba(231,212,173,0.0) 70%,
        rgba(231,212,173,1) 100%
    );

    /* mask trick => show only the 1px ring */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;

    pointer-events: none;
    z-index: 2;

    animation: spinBorder 4s linear infinite;
}

/* optional subtle inner glow layer (soft highlight) */
.contact-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(
        circle at 50% 0%,
        rgba(255,255,255,0.18) 0%,
        rgba(231,212,173,0.07) 40%,
        rgba(0,0,0,0) 70%
    );
    mix-blend-mode: screen;
    opacity: 0.6;
    filter: blur(20px);
}

/* HOVER EFFECT (separate from border animation)
   - lift slightly
   - warm diffused glow around button
   - brighter glass fill
*/
.contact-btn:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #ffffff;
    box-shadow:
        0 28px 60px rgba(231,212,173,0.25),
        0 20px 40px rgba(0, 0, 0, 0.8),
        0 0 24px rgba(255, 255, 255, 0.18) inset;
    transform: translateY(-2px) scale(1.02);
}

/* =========================================================
   HERO SECTION / TILE STRIP
   ========================================================= */
.hero {
    position: relative;
    flex: 1;

    background:
        radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.08) 0%, rgba(0, 0, 0, 0) 70%),
        radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0) 65%);
    background-repeat: no-repeat;
    background-size: cover;

    padding-top: 0;
    padding-bottom: 60px;
}

.hero-inner {
    max-width: 1883px;
    width: 100%;
    margin: 0 auto;

    padding-left: 0;
    padding-right: 0;

    display: flex;
    flex-direction: column;
    position: relative;
}

/* TILES + DIVIDERS GRID */
.hero-panels-wrapper {
    position: relative;
    width: 100%;

    display: grid;
    grid-template-columns:
        458px 23px
        452px 23px
        452px 23px
        452px;
    column-gap: 0;
    row-gap: 0;
    align-items: start;

    margin-bottom: 0;

    background: transparent;
    isolation: isolate;
}

/* tile wrapper */
.tile-col {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    overflow: visible;
    background: transparent;
}

/* vertical black dividers */
.panel-divider {
    background-color: #000000;
    box-shadow:
        0 0 20px rgba(0, 0, 0, 0.9),
        0 0 60px rgba(0, 0, 0, 0.9);
    width: 100%;
    align-self: flex-start;

    transform: translateY(-120%);
    opacity: 0;
    will-change: transform, opacity;
}

/* divider heights match the PRECEDING tile */
.divider-1 {
    height: 845px;
}

.divider-2 {
    height: 993px;
}

.divider-3 {
    height: 910px;
}

/* hero tiles (slices of one big hero_bg.webp) */
.hero-tile {
    background-image: url("/static/img/hero_bg.webp");
    background-repeat: no-repeat;
    background-size: 1814px auto;

    background-color: transparent;

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

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

    overflow: hidden;

    border-radius: 0 0 50px 50px;

    transform: translateY(-120%);
    opacity: 0;
    will-change: transform, opacity;
}

/* Tile sizes/positions */
.hero-tile-1 {
    width: 458px;
    height: 845px;
    background-position: 0px 0px;
}
.hero-tile-2 {
    width: 452px;
    height: 993px;
    background-position: -458px 0px;
}
.hero-tile-3 {
    width: 452px;
    height: 1176px;
    background-position: -910px 0px;
}
.hero-tile-4 {
    width: 452px;
    height: 910px;
    background-position: -1362px 0px;
}

/* round "play" bubble */
.play-bubble {
    position: absolute;
    left: calc(
        458px + 23px + 452px + 23px + 452px + 23px + 452px
        - 452px - 140px + 10px
    );
    bottom: 150px;

    width: 235px;
    height: 235px;
    min-width: 140px;
    min-height: 140px;

    border-radius: 999px;
    background-color: #cdb98f;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.8),
        0 0 60px rgba(205, 185, 143, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);

    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.15s ease;
    z-index: 10;
}

.play-bubble:hover {
    filter: brightness(1.07);
}

.play-icon {
    color: #ffffff;
    font-size: 1.5rem;
    line-height: 1;
    display: inline-block;
    transform: translateX(2px);
    font-weight: 500;

    animation: spinPlay 3s linear infinite;
    will-change: transform;
}

@keyframes spinPlay {
    0% {
        transform: translateX(2px) rotate(0deg);
    }
    100% {
        transform: translateX(2px) rotate(360deg);
    }
}

/* HERO tileDrop animation */
@keyframes tileDrop {
    0% {
        transform: translateY(-120%);
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.hero-panels-wrapper.reveal-start .hero-tile-1 {
    animation: tileDrop 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0s;
}
.hero-panels-wrapper.reveal-start .divider-1 {
    animation: tileDrop 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0s;
}
.hero-panels-wrapper.reveal-start .hero-tile-2 {
    animation: tileDrop 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s;
}
.hero-panels-wrapper.reveal-start .divider-2 {
    animation: tileDrop 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s;
}
.hero-panels-wrapper.reveal-start .hero-tile-3 {
    animation: tileDrop 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 1.0s;
}
.hero-panels-wrapper.reveal-start .divider-3 {
    animation: tileDrop 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 1.0s;
}
.hero-panels-wrapper.reveal-start .hero-tile-4 {
    animation: tileDrop 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 1.5s;
}

/* =========================================================
   HERO FOOTER LAYOUT
   ========================================================= */
.hero-footer-layout {
    position: relative;
    width: 100%;
    max-width: 1883px;

    color: #ffffff;
    font-family: 'Urbanist', sans-serif;

    height: 0;
    overflow: visible;

    margin-top: 0;
    margin-bottom: 60px;
}

.headline-block {
    position: absolute;
    left: 0px;
    top: -122px;
    width: 933px;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    line-height: 1.05;
    text-transform: uppercase;
    color: #ffffff;

    font-family: 'Urbanist', sans-serif;
    font-weight: 300;
}

.headline-line {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 140px;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.05;
}

.headline-word {
    color: #ffffff;
    white-space: nowrap;
    font-weight: 300;
}

.headline-word--white {
    color: #ffffff;
    opacity: 1;
}
.headline-word--gold {
    color: #E7D4AD;
    opacity: 1;
}

/* CTA BUTTON */
.quote-btn-bar {
    position: absolute;
    left: 956px;
    top: 45px;

    width: 452px;
    height: 101px;

    background-color: #ffffff;
    color: #000000;
    border-radius: 30px;
    border: 1px solid rgba(0, 0, 0, 0.1);

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.8),
        0 0 60px rgba(255, 255, 255, 0.2);

    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;

    font-family: 'Urbanist', sans-serif;
    font-size: 35px;
    font-weight: 500;
    line-height: 56px;
    letter-spacing: 0.02em;
    color: #000;

    transition:
        filter 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease,
        background-color 0.15s ease;
}

.quote-btn-bar:hover {
    background-color: #ffffff;
    filter: brightness(1.05);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.9),
        0 0 80px rgba(255, 255, 255, 0.35);
    transform: translateY(-2px) scale(1.01);
}

.quote-text {
    display: inline-block;
    color: #000000;
}

.quote-arrow {
    display: inline-block;
    margin-left: 16px;
    line-height: 1;
    font-size: 35px;
    color: #CFBD97;
}

/* RIGHT-SIDE COPY */
.side-copy {
    position: absolute;
    left: 1431px;
    top: -125px;

    width: 452px;

    font-family: 'Urbanist', sans-serif;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    max-width: 452px;

    font-size: 45px;
    font-weight: 300;
    line-height: 56px;
    letter-spacing: 0.05em;
    color: #ffffff;

    text-align: right;
    align-items: flex-end;
}

.side-line {
    color: #ffffff;
    font-weight: 300;
    line-height: 56px;
    display: block;
    white-space: nowrap;
    text-align: right;
}

.side-line-inline {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: flex-end;
    text-align: right;
    width: 100%;
}

.no-wrap {
    white-space: nowrap;
}
.that-showcase-gap {
    margin-left: 12px;
}
.dim-inline {
    opacity: 0.5;
    font-weight: 300;
    color: #ffffff;
}
.normal-inline {
    opacity: 1;
    font-weight: 300;
    color: #ffffff;
}

/* =========================================================
   WHO WE ARE SECTION
   ========================================================= */
.who-section {
    position: relative;
    width: 100%;
    padding-top: 200px;
    padding-bottom: 60px;
    color: #ffffff;
    font-family: 'Urbanist', sans-serif;
}

.who-inner {
    max-width: 1883px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    overflow: visible;
}

.who-grid {
    position: relative;
    width: 100%;
    min-height: 1100px;

    will-change: transform;
    transform: translateZ(0);
}

/* WHO tiles */
.who-tile {
    position: absolute;
    width: 452px;
    height: 624px;
    border-radius: 50px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
        0 40px 60px rgba(0,0,0,0.8);

    /* START STATE (before scroll trigger) */
    opacity: 0;
    transform: translate3d(0, 60px, 0) scale(1.02);
    will-change: transform, opacity;

    transition:
        transform 0.6s cubic-bezier(0.16,1,0.3,1) var(--delay, 0s),
        opacity 0.6s cubic-bezier(0.16,1,0.3,1) var(--delay, 0s);
}

/*
Columns math:
col1 left = 0
col2 left = 452 + 22 = 474px
col3 left = 474 + 452 + 22 = 948px
col4 left = 948 + 452 + 22 = 1422px

Rows (staggered):
Tile 1 top = 0
Tile 3 top = 0
Tile 2 top = 312
Tile 4 top = 312
*/

.who-tile-1 {
    left: 0px;
    top: 0px;
    background-image: url("/static/img/who-we-are-1.webp");
}
.who-tile-2 {
    left: 474px;
    top: 312px;
    background-image: url("/static/img/who-we-are-2.webp");
    background-position: -550px center;
}
.who-tile-3 {
    left: 948px;
    top: 0px;
    background-image: url("/static/img/who-we-are-3.webp");
    background-position: -30px center;
}
.who-tile-4 {
    left: 1422px;
    top: 312px;
    background-image: url("/static/img/who-we-are-4.webp");
}

/* FINAL STATE (after scroll trigger) */
.who-run .who-tile {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

/* HEADLINES: WHO / ARE / WE */
.who-headline {
    position: absolute;
    font-family: 'Urbanist', sans-serif;
    font-size: 140px;
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    color: #ffffff;

    width: 452px;
    text-align: center;

    /* START STATE */
    opacity: 0;
    filter: blur(8px);
    will-change: opacity, filter;

    transition:
        opacity 0.5s ease var(--h-delay, 0s),
        filter 0.5s ease var(--h-delay, 0s);
}

.who-text-who {
    color: #E7D4AD;
    left: 474px;
    top: 44px;
}
.who-text-are {
    color: #FFFFFF;
    left: 1422px;
    top: 44px;
}
.who-text-we {
    color: #FFFFFF;
    left: 948px;
    top: 745px;
}

/* FINAL STATE for headlines */
.who-run .who-headline {
    opacity: 1;
    filter: blur(0px);
}

/* GLASS CARDS (WHO SECTION) */
.glass-card {
    position: absolute;
    width: 289.5px;
    height: 180px;
    border-radius: 25px;

    padding: 20px 24px;

    background: rgba(20, 20, 20, 0.28);
    backdrop-filter: blur(6px) brightness(1.05) saturate(1.2) contrast(1.1);
    -webkit-backdrop-filter: blur(6px) brightness(1.05) saturate(1.2) contrast(1.1);

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

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

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: #fff;
    font-family: 'Urbanist', sans-serif;
    font-weight: 300;
    line-height: 1.4;
    font-size: 16px;

    /* START STATE */
    opacity: 0;
    transform: translate3d(0, 20px, 0) scale(0.98);
    will-change: opacity, transform;

    transition:
        opacity 0.5s ease var(--c-delay, 0s),
        transform 0.5s ease var(--c-delay, 0s);
}

.glass-card-1 {
    left: 307.25px;
    top: 534px;
}
.glass-card-2 {
    left: 792.25px;
    top: 222px;
}
.glass-card-3 {
    left: 1266.25px;
    top: 534px;
}

/* FINAL STATE for cards */
.who-run .glass-card {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}

.glass-icon {
    margin-bottom: 16px;
    flex-shrink: 0;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.8));
    display: block;
}

.glass-icon-1 {
    width: 39px;
    height: 39px;
}
.glass-icon-2 {
    width: 47px;
    height: 29.96px;
}
.glass-icon-3 {
    width: 39px;
    height: 39px;
}

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

.glass-text {
    color: #ffffff;
    opacity: 0.9;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 0.02em;
    white-space: normal;
    text-align: left;
}

/* =========================================================
   HOW IT WORKS SECTION
   ========================================================= */
.process-section {
    position: relative;
    width: 100%;
    padding-top: 200px;
    padding-bottom: 200px;
    color: #ffffff;
    font-family: 'Urbanist', sans-serif;

    background: transparent;
    isolation: isolate;
}

.process-section::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.8) 0%,
            rgba(0,0,0,0.0) 25%,
            rgba(0,0,0,0.0) 75%,
            rgba(0,0,0,0.8) 100%
        ),
        url("/static/img/works_bg.webp");
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;

    z-index: -1;
}

.process-inner {
    max-width: 1883px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.process-headline {
    font-family: 'Urbanist', sans-serif;
    font-weight: 300;
    font-size: 160px;
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #ffffff;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 200px;
}

.process-headline-white {
    color: #FFFFFF;
}
.process-headline-gold {
    color: #E7D4AD;
}

.process-row {
    width: 100%;
    max-width: 1883px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    column-gap: 19px;
    row-gap: 19px;
    align-items: flex-start;
}

/* =========================================================
   PROCESS CARD
   ========================================================= */

.process-card {
    position: relative;
    width: 419.53px;
    height: 229.87px;

    /*
      clip-path now matches the curved top "notch" silhouette
    */
    clip-path: path(
        "M24 0
         H60
         C100 0 120 20 160 60
         C190 80 250 80 280 60
         C320 20 340 0 380 0
         H416
         Q440 0 440 24
         V246
         Q440 270 416 270
         H24
         Q0 270 0 246
         V24
         Q0 0 24 0
         Z"
    );

    border-radius: 40px; /* soft outer fallback */

    /* Glass look */
    background: rgba(20, 20, 20, 0.28);
    backdrop-filter: blur(6px) brightness(1.05) saturate(1.2) contrast(1.1);
    -webkit-backdrop-filter: blur(6px) brightness(1.05) saturate(1.2) contrast(1.1);

    /* Border handled by SVG stroke */
    border: none;

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

    color: #fff;
    font-family: 'Urbanist', sans-serif;
    font-weight: 300;
    line-height: 1.4;
    font-size: 16px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    overflow: visible;

    /* START STATE before scroll trigger */
    opacity: 0;
    transform: translate3d(0,40px,0) scale(0.97);
    will-change: transform, opacity;
    transition:
        transform 0.7s cubic-bezier(0.16,1,0.3,1) var(--card-delay, 0s),
        opacity 0.7s cubic-bezier(0.16,1,0.3,1) var(--card-delay, 0s);
}

/* soft light sweep (subtle high-end reflection pass) */
.process-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 40px;
    pointer-events: none;
    background: radial-gradient(
        circle at 50% 0%,
        rgba(255,255,255,0.22) 0%,
        rgba(231,212,173,0.12) 30%,
        rgba(0,0,0,0) 70%
    );
    opacity: 0;
    filter: blur(26px);
    mix-blend-mode: screen;
    will-change: opacity, filter, transform;
    transform: translateY(24px) scale(0.9);
}

@keyframes cardGlowSweepCalm {
    0% {
        opacity: 0;
        filter: blur(32px);
        transform: translateY(24px) scale(0.9);
    }
    50% {
        opacity: 0.45;
        filter: blur(18px);
        transform: translateY(6px) scale(1);
    }
    100% {
        opacity: 0;
        filter: blur(40px);
        transform: translateY(-6px) scale(1.03);
    }
}

/* cards enter final state */
.works-run .process-card {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
}

/* run subtle sweep once per card */
.works-run .process-card::after {
    animation: cardGlowSweepCalm 1.4s cubic-bezier(0.16,1,0.3,1) both;
    animation-delay: var(--glow-delay, 0s);
}

/* SVG background layer with custom top notch */
.process-card-shape {
    position: absolute;
    inset: 0;
    z-index: 0;
    filter:
        drop-shadow(0 30px 60px rgba(0,0,0,0.8))
        drop-shadow(0 0 60px rgba(0,0,0,0.7));
}

.process-card-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* The stroked outline that matches clip-path above */
.process-card-path {
    fill: rgba(20,20,20,0.28);
    stroke: rgba(255,255,255,0.3);
    stroke-width: 2px;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* =========================================================
   BUBBLE / COIN RISE
   ========================================================= */
/*
   - Coin emerges straight up from inside card
   - No bounce / no zoom / calm
*/
.process-icon-bubble {
    position: absolute;
    top: -110px;      /* final position anchor */
    left: 50%;
    transform-origin: 50% 50%;

    width: 160px;
    height: 160px;
    border-radius: 999px;

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

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

    z-index: 3;

    /* START hidden lower behind the glass */
    transform: translateX(-50%) translateY(80px);
    opacity: 0;

    box-shadow:
        0 10px 20px rgba(0,0,0,0.8),
        0 0 10px rgba(0,0,0,0.6);

    will-change: transform, opacity, box-shadow;
}

.bubble-1 {
    background-color: #FFFFFF;
}
.bubble-2 {
    background-color: #E7D4AD;
}
.bubble-3 {
    background-color: #D9D9D9;
}
.bubble-4 {
    background-color: #E7D4AD;
}

.process-icon-img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    display: block;
}

/* smooth straight slide up */
@keyframes bubbleCoinRise {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(80px);
        box-shadow:
            0 10px 20px rgba(0,0,0,0.8),
            0 0 10px rgba(0,0,0,0.6);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0px);
        box-shadow:
            0 20px 40px rgba(0,0,0,0.8),
            0 0 30px rgba(0,0,0,0.6);
    }
}

/* trigger rise once, stagger per bubble */
.works-run .process-icon-bubble {
    animation: bubbleCoinRise 1s cubic-bezier(0.16,1,0.3,1) forwards;
    animation-delay: var(--b-delay, 0s);
}

/* =========================================================
   CARD CONTENT
   ========================================================= */
.process-card-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 90px;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.process-card-title {
    font-family: 'Urbanist', sans-serif;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
    margin-bottom: 16px;
    letter-spacing: 0.02em;
    text-wrap: balance;
}

.process-card-desc {
    color: #ffffff;
    opacity: 0.9;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-align: center;
    text-wrap: balance;
}

/* per-card hooks */
.card-1 {}
.card-2 {}
.card-3 {}
.card-4 {}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1400px) {
    .hero-inner {
        overflow-x: auto;
    }

    .hero-panels-wrapper {
        min-width: 1883px;
    }

    .hero-footer-layout {
        min-width: 1883px;
    }

    .site-header-inner {
        height: auto;
        min-height: 110px;
        padding-bottom: 16px;
    }

    .brand,
    .main-nav,
    .cta-wrap {
        position: static;
        margin-top: 16px;
    }

    .brand {
        order: 1;
    }

    .main-nav {
        order: 2;
        flex-wrap: wrap;
        column-gap: 32px;
        row-gap: 8px;
        top: auto;
        left: auto;
    }

    .nav-link {
        font-size: 18px;
    }

    .cta-wrap {
        order: 3;
    }

    .contact-btn {
        width: auto;
        height: auto;
        min-width: 186.5px;
        min-height: 70.34px;
        padding: 10px 16px;
        font-size: 16px;
    }

    .headline-line {
        font-size: 80px;
        line-height: 1.05;
    }

    .quote-btn-bar {
        font-size: 24px;
        line-height: 32px;
        height: auto;
        min-height: 80px;
        border-radius: 20px;
    }

    .quote-arrow {
        font-size: 24px;
        margin-left: 12px;
    }

    .side-copy {
        font-size: 32px;
        line-height: 40px;
    }

    .side-line,
    .side-line-inline {
        line-height: 40px;
    }

    .who-inner {
        overflow-x: auto;
    }

    .who-grid {
        min-width: 1883px;
    }

    .process-inner {
        overflow-x: auto;
    }

    .process-row {
        min-width: 1883px;
    }

    .process-headline {
        font-size: 96px;
        line-height: 1.05;
        gap: 16px;
    }
}

@media (max-width: 600px) {
    .contact-btn {
        font-size: 0.85rem;
        padding: 8px 14px;
    }

    .brand-logo {
        width: 180px;
        height: auto;
    }

    .headline-line {
        font-size: 48px;
        line-height: 1.05;
    }

    .quote-btn-bar {
        font-size: 20px;
        line-height: 28px;
        min-height: 64px;
        border-radius: 20px;
    }

    .quote-arrow {
        font-size: 20px;
        margin-left: 10px;
    }

    .side-copy {
        font-size: 24px;
        line-height: 32px;
    }

    .side-line,
    .side-line-inline {
        line-height: 32px;
    }

    .who-headline {
        font-size: 80px;
    }

    .glass-text {
        font-size: 14px;
        line-height: 1.4;
    }

    .process-headline {
        font-size: 64px;
        line-height: 1.05;
        gap: 12px;
        text-align: center;
    }

    .process-card-title {
        font-size: 20px;
    }

    .process-card-desc {
        font-size: 14px;
    }
}