/* =====================================================================
   WILLOW EVENTS & PROMOTION PLC
   COMPLETE HOME PAGE
   File: static/css/home.css

   Designed for the current home.html:
   01. Hero slider
   02. Introduction
   03. Proof / statistics
   04. Services
   05. Client logos
   06. Footprint
   07. Marquee
   08. Brand statement
   09. Portfolio slider
   10. Willow approach
   11. Consultation CTA
   12. Testimonials
   13. FamTrips
   14. Social links
   15. Final CTA
===================================================================== */


/* =====================================================================
   01. DESIGN SYSTEM
===================================================================== */

.willow-home {
    --willow-dark: #061813;
    --willow-dark-2: #09251e;
    --willow-dark-3: #10352b;

    --willow-green: #164d3e;
    --willow-green-2: #1d6752;
    --willow-green-3: #2e8068;

    --willow-gold: #d8b269;
    --willow-gold-light: #ecd39d;
    --willow-gold-dark: #ad8440;

    --willow-cream: #f4f0e7;
    --willow-cream-light: #faf8f3;
    --willow-cream-dark: #e9e2d5;

    --willow-white: #ffffff;
    --willow-black: #050807;

    --willow-text: #17231f;
    --willow-muted: #68746f;

    --willow-border: rgba(23, 63, 52, 0.14);
    --willow-border-light: rgba(255, 255, 255, 0.17);

    --willow-shadow:
        0 20px 70px rgba(4, 20, 16, 0.1);

    --willow-shadow-large:
        0 35px 100px rgba(4, 20, 16, 0.16);

    --home-container: 1380px;

    --section-space:
        clamp(90px, 9vw, 155px);

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

    --transition:
        0.45s var(--ease);

    position: relative;

    width: 100%;

    overflow: hidden;

    color: var(--willow-text);

    background: var(--willow-cream);

    isolation: isolate;
}


/* =====================================================================
   02. BASE
===================================================================== */

.willow-home *,
.willow-home *::before,
.willow-home *::after {
    box-sizing: border-box;
}


.willow-home img {
    display: block;

    max-width: 100%;
}


.willow-home a {
    color: inherit;

    text-decoration: none;
}


.willow-home button {
    font: inherit;
}


.willow-home .container {
    width:
        min(
            calc(100% - 80px),
            var(--home-container)
        );

    margin-inline: auto;
}


/* =====================================================================
   03. COMMON SECTION TYPOGRAPHY
===================================================================== */

.home-section-label,
.hero-kicker {
    display: flex;

    align-items: center;

    gap: 14px;

    margin:
        0 0 23px;

    font-size: 11px;

    font-weight: 700;

    line-height: 1.2;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


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

    flex: 0 0 34px;

    width: 34px;

    height: 1px;

    background: currentColor;
}


.home-section-label.light {
    color:
        rgba(255, 255, 255, 0.68);
}


.home-section-heading {
    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(280px, 0.7fr);

    gap:
        clamp(45px, 7vw, 100px);

    align-items: end;

    margin-bottom:
        clamp(48px, 5vw, 78px);
}


.home-section-heading h2,
.home-intro h2,
.home-proof-heading h2,
.home-experience h2 {
    margin: 0;

    max-width: 950px;

    font-size:
        clamp(3rem, 5.2vw, 6.2rem);

    font-weight: 500;

    line-height: 0.94;

    letter-spacing: -0.055em;
}


.home-section-heading h2 span,
.home-intro h2 span,
.home-proof-heading h2 span,
.home-experience h2 span {
    display: block;

    font-weight: 300;
}


.home-heading-description {
    max-width: 500px;
}


.home-heading-description p {
    margin:
        0 0 29px;

    color: var(--willow-muted);

    font-size: 16px;

    line-height: 1.78;
}


.home-section-heading.light {
    color: var(--willow-white);
}


.home-section-heading.light
.home-heading-description p {
    color:
        rgba(255, 255, 255, 0.62);
}


/* =====================================================================
   04. BUTTONS
===================================================================== */

.home-btn {
    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    min-height: 58px;

    padding:
        0 29px;

    overflow: hidden;

    border:
        1px solid transparent;

    border-radius: 0;

    font-size: 10px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.11em;

    text-align: center;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}


.home-btn span {
    font-size: 15px;

    transition:
        transform var(--transition);
}


.home-btn-primary {
    color: var(--willow-dark);

    background: var(--willow-gold);
}


.home-btn-transparent {
    color: var(--willow-white);

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

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

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);
}


.home-btn-outline {
    color: var(--willow-white);

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

    background: transparent;
}


/* =====================================================================
   05. TEXT LINKS
===================================================================== */

.home-text-link {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    width: fit-content;

    padding-bottom: 7px;

    border-bottom:
        1px solid currentColor;

    color: var(--willow-green);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.11em;

    text-transform: uppercase;

    transition:
        gap var(--transition),
        color var(--transition),
        opacity var(--transition);
}


.home-text-link span {
    font-size: 17px;

    line-height: 1;
}


/* =====================================================================
   06. HERO
===================================================================== */

.willow-hero {
    position: relative;

    width: 100%;

    height: 100vh;
    height: 100svh;

    min-height: 680px;

    max-height: 1080px;

    overflow: hidden;

    color: var(--willow-white);

    background: var(--willow-dark);
}


/* =====================================================================
   07. HERO SLIDES
===================================================================== */

.hero-slides {
    position: absolute;

    inset: 0;
}


.hero-slide {
    position: absolute;

    inset: 0;

    z-index: 1;

    visibility: hidden;

    opacity: 0;

    pointer-events: none;

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


.hero-slide.active {
    z-index: 2;

    visibility: visible;

    opacity: 1;

    pointer-events: auto;
}


.hero-background {
    position: absolute;

    inset: -4%;

    background-color: var(--willow-dark);

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;

    transform: scale(1.04);

    will-change:
        transform,
        background-position;
}


.hero-slide.active
.hero-background {
    animation:
        willowHeroMove
        12s
        ease-out
        both;
}


@keyframes willowHeroMove {

    from {
        background-position:
            center 45%;
    }

    to {
        background-position:
            center 52%;
    }

}


.hero-background-default {
    background:
        radial-gradient(
            circle at 78% 26%,
            rgba(72, 139, 115, 0.65),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #061813 0%,
            #0b2d24 50%,
            #245c4a 100%
        );
}


/* =====================================================================
   08. HERO OVERLAY
===================================================================== */

.hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(3, 13, 10, 0.94) 0%,
            rgba(3, 13, 10, 0.83) 30%,
            rgba(3, 13, 10, 0.57) 55%,
            rgba(3, 13, 10, 0.27) 80%,
            rgba(3, 13, 10, 0.15) 100%
        );
}


.hero-overlay::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.23) 0%,
            transparent 28%,
            transparent 64%,
            rgba(0, 0, 0, 0.62) 100%
        );
}


/* =====================================================================
   09. HERO CONTENT
===================================================================== */

.hero-container {
    position: relative;

    z-index: 5;

    display: flex;

    align-items: center;

    height: 100%;
}


.hero-content {
    width:
        min(1100px, 89%);

    padding-top: 75px;
}


.hero-kicker {
    color:
        rgba(255, 255, 255, 0.68);

    opacity: 0;

    transform:
        translateY(24px);
}


.hero-title {
    margin: 0;

    max-width: 1120px;

    font-size:
        clamp(4rem, 7.2vw, 8.6rem);

    font-weight: 600;

    line-height: 0.84;

    letter-spacing: -0.067em;

    text-transform: uppercase;
}


.hero-title span {
    display: block;

    opacity: 0;

    transform:
        translateY(62px);
}


.hero-title-accent {
    color: transparent;

    -webkit-text-stroke:
        1.35px rgba(255, 255, 255, 0.8);
}


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

    margin:
        34px 0 0;

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

    font-size:
        clamp(14px, 1.1vw, 17px);

    line-height: 1.74;

    opacity: 0;

    transform:
        translateY(25px);
}


.hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 13px;

    margin-top: 35px;

    opacity: 0;

    transform:
        translateY(25px);
}


/* =====================================================================
   10. HERO ENTRANCE
===================================================================== */

.hero-slide.active
.hero-kicker {
    animation:
        heroFadeUp
        0.75s
        0.18s
        var(--ease)
        forwards;
}


.hero-slide.active
.hero-title span:nth-child(1) {
    animation:
        heroTitleUp
        0.9s
        0.28s
        var(--ease)
        forwards;
}


.hero-slide.active
.hero-title span:nth-child(2) {
    animation:
        heroTitleUp
        0.9s
        0.39s
        var(--ease)
        forwards;
}


.hero-slide.active
.hero-title span:nth-child(3) {
    animation:
        heroTitleUp
        0.9s
        0.5s
        var(--ease)
        forwards;
}


.hero-slide.active
.hero-description {
    animation:
        heroFadeUp
        0.8s
        0.64s
        var(--ease)
        forwards;
}


.hero-slide.active
.hero-actions {
    animation:
        heroFadeUp
        0.8s
        0.75s
        var(--ease)
        forwards;
}


@keyframes heroTitleUp {

    from {
        opacity: 0;

        transform:
            translateY(62px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes heroFadeUp {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =====================================================================
   11. HERO EVENT INFO
===================================================================== */

.hero-event-info {
    position: absolute;

    z-index: 10;

    right:
        max(
            40px,
            calc((100vw - var(--home-container)) / 2)
        );

    bottom: 45px;

    display: flex;

    align-items: center;

    gap: 18px;

    max-width: 360px;
}


.hero-event-number {
    flex: 0 0 auto;

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

    font-size: 39px;

    font-weight: 300;

    line-height: 1;
}


.hero-event-info > div {
    display: flex;

    flex-direction: column;

    gap: 4px;

    min-width: 0;

    padding-left: 18px;

    border-left:
        1px solid rgba(255, 255, 255, 0.28);
}


.hero-event-info small {
    color:
        rgba(255, 255, 255, 0.55);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.16em;

    text-transform: uppercase;
}


.hero-event-info strong {
    overflow: hidden;

    color: var(--willow-white);

    font-size: 14px;

    font-weight: 600;

    text-overflow: ellipsis;

    white-space: nowrap;
}


.hero-event-info > div > span {
    color:
        rgba(255, 255, 255, 0.55);

    font-size: 11px;
}


/* =====================================================================
   12. HERO CONTROLS
===================================================================== */

.hero-navigation {
    position: absolute;

    z-index: 12;

    left: 50%;

    bottom: 43px;

    display: flex;

    align-items: center;

    gap: 17px;

    transform:
        translateX(-50%);
}


.hero-arrow {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    padding: 0;

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

    border-radius: 50%;

    color: var(--willow-white);

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

    cursor: pointer;

    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition),
        transform var(--transition);
}


.hero-pagination {
    display: flex;

    align-items: center;

    gap: 8px;
}


.hero-dot {
    width: 7px;

    height: 7px;

    padding: 0;

    border: 0;

    border-radius: 999px;

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

    cursor: pointer;

    transition:
        width var(--transition),
        background var(--transition);
}


.hero-dot.active {
    width: 29px;

    background: var(--willow-white);
}


/* =====================================================================
   13. HERO SCROLL INDICATOR
===================================================================== */

.hero-scroll {
    position: absolute;

    z-index: 12;

    left:
        max(
            40px,
            calc((100vw - var(--home-container)) / 2)
        );

    bottom: 48px;

    display: flex;

    align-items: center;

    gap: 14px;

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

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.15em;

    text-transform: uppercase;
}


.hero-scroll i {
    position: relative;

    display: block;

    width: 51px;

    height: 1px;

    overflow: hidden;

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


.hero-scroll i::after {
    content: "";

    position: absolute;

    inset: 0;

    background: var(--willow-white);

    animation:
        heroScrollLine
        2s
        ease-in-out
        infinite;
}


@keyframes heroScrollLine {

    0% {
        transform:
            translateX(-100%);
    }

    55%,
    100% {
        transform:
            translateX(100%);
    }

}


/* =====================================================================
   14. INTRO
===================================================================== */

.home-intro {
    position: relative;

    padding:
        var(--section-space)
        0;

    background: var(--willow-cream);
}


.home-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.28fr)
        minmax(300px, 0.72fr);

    gap:
        clamp(65px, 9vw, 155px);

    align-items: end;
}


.home-intro-heading h2 {
    max-width: 870px;
}


.home-intro-heading h2 span {
    color: var(--willow-green);
}


.home-intro-content {
    max-width: 580px;

    padding-bottom: 8px;
}


.home-intro-content p {
    margin:
        0 0 34px;

    color: var(--willow-muted);

    font-size:
        clamp(16px, 1.25vw, 19px);

    line-height: 1.8;
}


/* =====================================================================
   15. PROOF / STATISTICS
===================================================================== */

.home-proof {
    position: relative;

    padding:
        var(--section-space)
        0;

    background: var(--willow-white);
}


.home-proof-heading {
    margin-bottom:
        clamp(45px, 5vw, 72px);
}


.home-proof-heading h2 span {
    color: var(--willow-green);
}


.home-proof-grid {
    display: grid;

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

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

    border-bottom:
        1px solid var(--willow-border);
}


.home-proof-item {
    display: flex;

    flex-direction: column;

    justify-content: space-between;

    min-height: 235px;

    padding:
        34px 29px;

    border-right:
        1px solid var(--willow-border);
}


.home-proof-item:first-child {
    padding-left: 0;
}


.home-proof-item:last-child {
    border-right: 0;
}


.home-proof-item strong {
    color: var(--willow-green);

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

    font-weight: 300;

    line-height: 0.98;

    letter-spacing: -0.055em;
}


.home-proof-item span {
    max-width: 175px;

    color: var(--willow-muted);

    font-size: 12px;

    line-height: 1.55;
}


/* =====================================================================
   16. SERVICES
===================================================================== */

.home-services {
    position: relative;

    padding:
        var(--section-space)
        0;

    background: var(--willow-cream-light);
}


.home-service-grid {
    display: grid;

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

    gap:
        clamp(20px, 2vw, 30px);
}


.home-service-card {
    min-width: 0;
}


.home-service-card > a {
    display: flex;

    flex-direction: column;

    height: 100%;
}


.home-service-media {
    position: relative;

    height:
        clamp(350px, 31vw, 465px);

    overflow: hidden;

    background: var(--willow-dark-2);
}


.home-service-media img {
    width: 100%;

    height: 100%;

    object-fit: cover;

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


.home-service-media::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.02) 32%,
            rgba(0, 0, 0, 0.52) 100%
        );

    opacity: 0.38;

    transition:
        opacity var(--transition);
}


.home-service-number {
    position: absolute;

    z-index: 4;

    top: 20px;

    left: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

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

    border-radius: 50%;

    color: var(--willow-white);

    background:
        rgba(5, 24, 19, 0.45);

    -webkit-backdrop-filter:
        blur(10px);

    backdrop-filter:
        blur(10px);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.08em;
}


.home-service-arrow {
    position: absolute;

    z-index: 4;

    right: 20px;

    bottom: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 55px;

    height: 55px;

    border-radius: 50%;

    color: var(--willow-dark);

    background: var(--willow-white);

    font-size: 18px;

    opacity: 0;

    transform:
        translateY(18px);

    transition:
        opacity var(--transition),
        transform var(--transition);
}


.home-service-body {
    display: flex;

    flex: 1;

    flex-direction: column;

    padding:
        26px 3px 0;
}


.home-service-body h3 {
    margin:
        0 0 13px;

    font-size:
        clamp(1.4rem, 1.8vw, 1.95rem);

    font-weight: 500;

    line-height: 1.08;

    letter-spacing: -0.035em;
}


.home-service-body p {
    margin:
        0 0 21px;

    color: var(--willow-muted);

    font-size: 14px;

    line-height: 1.72;
}


.home-card-link {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    width: fit-content;

    margin-top: auto;

    color: var(--willow-green);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.1em;

    text-transform: uppercase;
}


/* =====================================================================
   17. IMAGE FALLBACK
===================================================================== */

.home-image-fallback {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;

    background:
        radial-gradient(
            circle at 72% 28%,
            rgba(89, 158, 134, 0.55),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #09251e,
            #285d4c
        );
}


.home-image-fallback.gold {
    background:
        radial-gradient(
            circle at 72% 28%,
            rgba(255, 230, 177, 0.3),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #71531d,
            #d8b269
        );
}


.home-image-fallback span {
    color:
        rgba(255, 255, 255, 0.24);

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

    font-weight: 300;
}


/* =====================================================================
   18. CLIENT LOGOS
===================================================================== */

.home-clients {
    position: relative;

    padding:
        75px 0;

    overflow: hidden;

    background: var(--willow-white);

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

    border-bottom:
        1px solid var(--willow-border);
}


.home-clients-header {
    margin-bottom: 34px;
}


.home-client-track {
    position: relative;

    margin-right:
        calc(50% - 50vw);

    overflow: hidden;
}


.home-client-track::before,
.home-client-track::after {
    content: "";

    position: absolute;

    z-index: 4;

    top: 0;

    bottom: 0;

    width: 90px;

    pointer-events: none;
}


.home-client-track::before {
    left: 0;

    background:
        linear-gradient(
            90deg,
            var(--willow-white),
            transparent
        );
}


.home-client-track::after {
    right: 0;

    background:
        linear-gradient(
            -90deg,
            var(--willow-white),
            transparent
        );
}


.home-client-track-inner {
    display: flex;

    align-items: center;

    width: max-content;

    animation:
        clientLogoScroll
        32s
        linear
        infinite;
}


.home-client-logo {
    display: flex;

    align-items: center;

    justify-content: center;

    width:
        clamp(180px, 16vw, 245px);

    height: 105px;

    padding:
        20px 32px;

    border-right:
        1px solid var(--willow-border);
}


.home-client-logo a {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 100%;
}


.home-client-logo img {
    max-width: 145px;

    max-height: 63px;

    object-fit: contain;

    filter: grayscale(1);

    opacity: 0.58;

    transition:
        filter var(--transition),
        opacity var(--transition);
}


.home-client-logo strong {
    color: var(--willow-muted);

    font-size: 14px;

    font-weight: 600;

    text-align: center;
}


@keyframes clientLogoScroll {

    from {
        transform:
            translateX(0);
    }

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

}


/* =====================================================================
   19. FOOTPRINT
===================================================================== */

.home-footprint {
    position: relative;

    padding:
        var(--section-space)
        0;

    overflow: hidden;

    color: var(--willow-white);

    background: var(--willow-dark-2);
}


.home-footprint-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    gap:
        clamp(70px, 9vw, 150px);

    align-items: center;
}


.home-footprint-content {
    max-width: 690px;
}


.home-footprint-content h2 {
    margin:
        0 0 31px;

    font-size:
        clamp(3.2rem, 5.8vw, 6.4rem);

    font-weight: 500;

    line-height: 0.91;

    letter-spacing: -0.055em;
}


.home-footprint-content h2 span {
    display: block;

    color: var(--willow-gold);

    font-weight: 300;
}


.home-footprint-content > p {
    max-width: 575px;

    margin:
        0 0 31px;

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

    font-size: 15px;

    line-height: 1.8;
}


.home-footprint-content
.home-text-link {
    color: var(--willow-gold);
}


.home-footprint-visual {
    position: relative;

    aspect-ratio: 1 / 1;

    min-height: 480px;
}


.footprint-circle {
    position: absolute;

    top: 50%;

    left: 50%;

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

    border-radius: 50%;

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


.footprint-circle-large {
    width: 92%;

    height: 92%;
}


.footprint-circle-medium {
    width: 65%;

    height: 65%;
}


.footprint-circle-small {
    width: 36%;

    height: 36%;
}


.footprint-circle::after {
    content: "";

    position: absolute;

    top: 50%;

    left: -5px;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: var(--willow-gold);

    box-shadow:
        0 0 0 7px rgba(216, 178, 105, 0.12);
}


.footprint-location {
    position: absolute;

    z-index: 5;

    top: 50%;

    left: 50%;

    display: flex;

    align-items: center;

    gap: 16px;

    min-width: 230px;

    padding:
        18px 20px;

    background: var(--willow-white);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.22);

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


.footprint-location > span {
    flex: 0 0 auto;

    width: 13px;

    height: 13px;

    border-radius: 50%;

    background: var(--willow-gold);

    box-shadow:
        0 0 0 6px rgba(216, 178, 105, 0.18);
}


.footprint-location div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.footprint-location small {
    color: var(--willow-muted);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.footprint-location strong {
    color: var(--willow-dark);

    font-size: 14px;

    font-weight: 600;
}


/* =====================================================================
   20. MARQUEE
===================================================================== */

.home-marquee {
    position: relative;

    overflow: hidden;

    padding:
        22px 0;

    color: var(--willow-white);

    background: var(--willow-green);
}


.home-marquee::before,
.home-marquee::after {
    content: "";

    position: absolute;

    z-index: 3;

    top: 0;

    bottom: 0;

    width: 7vw;

    pointer-events: none;
}


.home-marquee::before {
    left: 0;

    background:
        linear-gradient(
            90deg,
            var(--willow-green),
            transparent
        );
}


.home-marquee::after {
    right: 0;

    background:
        linear-gradient(
            -90deg,
            var(--willow-green),
            transparent
        );
}


.home-marquee-track {
    display: flex;

    width: max-content;

    animation:
        willowMarquee
        29s
        linear
        infinite;
}


.home-marquee-track span {
    display: flex;

    flex-shrink: 0;

    align-items: center;

    white-space: nowrap;

    font-size:
        clamp(2.1rem, 4vw, 4.8rem);

    font-weight: 300;

    line-height: 1;

    letter-spacing: -0.035em;
}


.home-marquee-track i {
    margin:
        0 34px;

    color: var(--willow-gold);

    font-size: 0.42em;

    font-style: normal;
}


@keyframes willowMarquee {

    from {
        transform:
            translateX(0);
    }

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

}


/* =====================================================================
   21. LARGE BRAND STATEMENT
===================================================================== */

.home-statement {
    position: relative;

    padding:
        clamp(105px, 12vw, 205px)
        0;

    overflow: hidden;

    color: var(--willow-white);

    background: var(--willow-green);
}


.home-statement::after {
    content: "";

    position: absolute;

    top: -25vw;

    right: -18vw;

    width: 58vw;

    height: 58vw;

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

    border-radius: 50%;
}


.home-statement .container {
    position: relative;

    z-index: 2;
}


.home-statement h2 {
    max-width: 1230px;

    margin: 0;

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

    font-weight: 500;

    line-height: 0.87;

    letter-spacing: -0.065em;
}


.home-statement h2 span {
    display: block;

    color: transparent;

    -webkit-text-stroke:
        1.4px rgba(255, 255, 255, 0.5);
}


/* =====================================================================
   22. PORTFOLIO
===================================================================== */

.home-portfolio {
    position: relative;

    padding:
        var(--section-space)
        0;

    color: var(--willow-white);

    background: var(--willow-dark);
}


.portfolio-slider {
    margin-right:
        calc(50% - 50vw);

    overflow: hidden;
}


.portfolio-track {
    display: flex;

    gap: 28px;

    padding-right: 30px;

    padding-bottom: 14px;

    overflow-x: auto;

    scroll-behavior: smooth;

    scroll-snap-type:
        x mandatory;

    overscroll-behavior-inline:
        contain;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}


.portfolio-track::-webkit-scrollbar {
    display: none;
}


.home-project {
    flex:
        0 0 min(72vw, 900px);

    min-width: 0;

    scroll-snap-align: start;
}


.home-project > a {
    display: block;

    width: 100%;

    height: 100%;
}


.home-project-media {
    position: relative;

    height:
        clamp(500px, 55vw, 760px);

    overflow: hidden;

    background: var(--willow-green);
}


.home-project-media img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 1s var(--ease);
}


.home-project-media::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.02) 22%,
            rgba(0, 0, 0, 0.2) 53%,
            rgba(0, 0, 0, 0.84) 100%
        );

    pointer-events: none;
}


.home-project-overlay {
    position: absolute;

    z-index: 4;

    right: 0;

    bottom: 0;

    left: 0;

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    padding:
        clamp(25px, 4vw, 55px);
}


.project-category {
    display: block;

    margin-bottom: 14px;

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

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;
}


.home-project-overlay h3 {
    max-width: 720px;

    margin:
        0 0 10px;

    color: var(--willow-white);

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

    font-weight: 500;

    line-height: 0.98;

    letter-spacing: -0.045em;
}


.home-project-overlay p {
    margin: 0;

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

    font-size: 13px;
}


.project-arrow {
    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 68px;

    height: 68px;

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

    border-radius: 50%;

    color: var(--willow-white);

    font-size: 21px;

    transition:
        color var(--transition),
        background var(--transition),
        transform var(--transition);
}


.home-project-fallback {
    width: 100%;

    height: 100%;

    background:
        radial-gradient(
            circle at 72% 26%,
            rgba(65, 133, 109, 0.6),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #153f34,
            #061813
        );
}


.portfolio-footer {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    margin-top: 38px;
}


.portfolio-controls {
    display: flex;

    gap: 10px;
}


.portfolio-controls button {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 54px;

    height: 54px;

    padding: 0;

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

    border-radius: 50%;

    color: var(--willow-white);

    background: transparent;

    cursor: pointer;

    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition),
        transform var(--transition);
}


/* =====================================================================
   23. WILLOW APPROACH
===================================================================== */

.home-experience {
    position: relative;

    padding:
        var(--section-space)
        0;

    background: var(--willow-cream-light);
}


.home-experience-grid {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.8fr)
        minmax(0, 1.2fr);

    gap:
        clamp(70px, 10vw, 170px);

    align-items: start;
}


.home-experience-title h2 {
    position: sticky;

    top: 110px;
}


.home-experience-title h2 span {
    color: var(--willow-green);
}


.home-experience-list {
    border-top:
        1px solid var(--willow-border);
}


.experience-item {
    display: grid;

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

    gap: 27px;

    padding:
        39px 0;

    border-bottom:
        1px solid var(--willow-border);
}


.experience-item > span {
    padding-top: 6px;

    color: var(--willow-green);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.1em;
}


.experience-item h3 {
    margin:
        0 0 13px;

    font-size:
        clamp(1.45rem, 1.9vw, 2.1rem);

    font-weight: 500;

    line-height: 1.1;

    letter-spacing: -0.03em;
}


.experience-item p {
    max-width: 620px;

    margin: 0;

    color: var(--willow-muted);

    font-size: 15px;

    line-height: 1.75;
}


/* =====================================================================
   24. CONSULTATION
===================================================================== */

.home-consultation {
    position: relative;

    padding:
        clamp(70px, 7vw, 110px)
        0;

    overflow: hidden;

    color: var(--willow-white);

    background: var(--willow-green);
}


.home-consultation::after {
    content: "";

    position: absolute;

    right: -100px;

    bottom: -230px;

    width: 500px;

    height: 500px;

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

    border-radius: 50%;
}


.home-consultation-inner {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;
}


.home-consultation-inner h2 {
    max-width: 850px;

    margin: 0;

    font-size:
        clamp(2.8rem, 5vw, 5.7rem);

    font-weight: 500;

    line-height: 0.94;

    letter-spacing: -0.05em;
}


/* =====================================================================
   25. TESTIMONIALS
===================================================================== */

.home-testimonials {
    position: relative;

    padding:
        var(--section-space)
        0;

    overflow: hidden;

    background: var(--willow-white);
}


.testimonial-counter {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 12px;

    color: var(--willow-muted);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.1em;
}


.testimonial-counter i {
    display: block;

    width: 45px;

    height: 1px;

    background: var(--willow-border);
}


.testimonial-slider {
    position: relative;

    max-width: 1180px;

    min-height: 400px;
}


.testimonial-slide {
    position: absolute;

    inset: 0;

    visibility: hidden;

    opacity: 0;

    transform:
        translateY(25px);

    transition:
        opacity 0.6s var(--ease),
        transform 0.6s var(--ease),
        visibility 0.6s;
}


.testimonial-slide.active {
    position: relative;

    visibility: visible;

    opacity: 1;

    transform:
        translateY(0);
}


.testimonial-slide blockquote {
    margin:
        0 0 44px;

    color: var(--willow-text);

    font-size:
        clamp(2rem, 3.7vw, 4.35rem);

    font-weight: 400;

    line-height: 1.12;

    letter-spacing: -0.04em;
}


.testimonial-person {
    display: flex;

    align-items: center;

    gap: 19px;
}


.testimonial-person img {
    width: 80px;

    height: 60px;

    object-fit: contain;
}


.testimonial-person div {
    display: flex;

    flex-direction: column;

    gap: 4px;
}


.testimonial-person strong {
    font-size: 14px;
}


.testimonial-person span {
    color: var(--willow-muted);

    font-size: 11px;
}


.testimonial-controls {
    display: flex;

    gap: 10px;

    margin-top: 44px;
}


.testimonial-controls button {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 54px;

    height: 54px;

    padding: 0;

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

    border-radius: 50%;

    color: var(--willow-text);

    background: transparent;

    cursor: pointer;

    transition:
        color var(--transition),
        background var(--transition),
        border-color var(--transition);
}


/* =====================================================================
   26. FAMTRIPS
===================================================================== */

.home-trips {
    position: relative;

    padding:
        var(--section-space)
        0;

    background: var(--willow-cream);
}


.home-trip-grid {
    display: grid;

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

    gap:
        clamp(20px, 2vw, 30px);
}


.home-trip-card {
    min-width: 0;
}


.home-trip-card > a {
    display: block;
}


.home-trip-image {
    position: relative;

    height:
        clamp(340px, 30vw, 430px);

    overflow: hidden;

    background: var(--willow-dark);
}


.home-trip-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition:
        transform 0.9s var(--ease);
}


.home-trip-image::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            180deg,
            transparent 52%,
            rgba(0, 0, 0, 0.35) 100%
        );

    pointer-events: none;
}


.trip-arrow {
    position: absolute;

    z-index: 4;

    top: 20px;

    right: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 52px;

    height: 52px;

    border-radius: 50%;

    color: var(--willow-dark);

    background: var(--willow-white);

    font-size: 17px;

    transition:
        transform var(--transition);
}


.home-trip-content {
    padding-top: 23px;
}


.trip-date {
    display: block;

    margin-bottom: 12px;

    color: var(--willow-green);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.13em;

    text-transform: uppercase;
}


.home-trip-content h3 {
    margin:
        0 0 8px;

    font-size:
        clamp(1.45rem, 1.8vw, 1.95rem);

    font-weight: 500;

    line-height: 1.1;

    letter-spacing: -0.03em;
}


.home-trip-content p {
    margin: 0;

    color: var(--willow-muted);

    font-size: 13px;

    line-height: 1.6;
}


/* =====================================================================
   27. SOCIAL
===================================================================== */

.home-social {
    padding:
        clamp(80px, 8vw, 130px)
        0;

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

    background: var(--willow-cream-light);
}


.home-social-inner {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(260px, 0.75fr);

    gap:
        clamp(50px, 8vw, 130px);

    align-items: end;
}


.home-social-heading h2 {
    max-width: 850px;

    margin: 0;

    font-size:
        clamp(2.8rem, 5vw, 5.7rem);

    font-weight: 500;

    line-height: 0.95;

    letter-spacing: -0.05em;
}


.home-social-links {
    display: flex;

    flex-direction: column;

    border-top:
        1px solid var(--willow-border);
}


.home-social-links a {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        21px 0;

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

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 0.09em;

    text-transform: uppercase;

    transition:
        padding var(--transition),
        color var(--transition);
}


.home-social-links a span {
    font-size: 17px;
}


/* =====================================================================
   28. FINAL CTA
===================================================================== */

.home-cta {
    position: relative;

    padding:
        clamp(110px, 11vw, 185px)
        0;

    overflow: hidden;

    color: var(--willow-white);

    background: var(--willow-green);
}


.home-cta::before {
    content: "";

    position: absolute;

    top: -25%;

    left: -8%;

    width: 35vw;

    height: 35vw;

    min-width: 350px;

    min-height: 350px;

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

    border-radius: 50%;
}


.home-cta-decoration {
    position: absolute;

    top: 50%;

    right: -5vw;

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

    font-size:
        min(52vw, 800px);

    font-weight: 600;

    line-height: 0.7;

    pointer-events: none;

    transform:
        translateY(-50%);
}


.home-cta-inner {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap:
        clamp(55px, 8vw, 110px);

    align-items: center;
}


.home-cta-content {
    max-width: 900px;
}


.home-cta-content h2 {
    margin:
        0 0 32px;

    font-size:
        clamp(4rem, 7.25vw, 8.6rem);

    font-weight: 500;

    line-height: 0.86;

    letter-spacing: -0.06em;
}


.home-cta-content h2 span {
    display: block;

    color: var(--willow-gold);
}


.home-cta-content > p:last-child {
    max-width: 620px;

    margin: 0;

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

    font-size:
        clamp(14px, 1.2vw, 17px);

    line-height: 1.76;
}


.home-cta-circle {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 17px;

    width:
        clamp(190px, 17vw, 255px);

    height:
        clamp(190px, 17vw, 255px);

    border-radius: 50%;

    color: var(--willow-dark);

    background: var(--willow-gold);

    text-align: center;

    transition:
        transform var(--transition),
        background var(--transition),
        box-shadow var(--transition);
}


.home-cta-circle span {
    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}


.home-cta-circle strong {
    font-size: 29px;

    font-weight: 300;

    line-height: 1;
}


/* =====================================================================
   29. SCROLL REVEAL
===================================================================== */

.reveal {
    opacity: 0;

    transform:
        translateY(42px);

    transition:
        opacity 0.85s var(--ease),
        transform 0.85s var(--ease);
}


.reveal.reveal-visible {
    opacity: 1;

    transform:
        translateY(0);
}


.home-service-grid
.reveal:nth-child(2),
.home-trip-grid
.reveal:nth-child(2),
.home-proof-grid
.reveal:nth-child(2) {
    transition-delay: 0.08s;
}


.home-service-grid
.reveal:nth-child(3),
.home-trip-grid
.reveal:nth-child(3),
.home-proof-grid
.reveal:nth-child(3) {
    transition-delay: 0.16s;
}


.home-proof-grid
.reveal:nth-child(4) {
    transition-delay: 0.24s;
}


/* =====================================================================
   30. ACCESSIBLE FOCUS
===================================================================== */

.home-btn:focus-visible,
.home-text-link:focus-visible,
.hero-arrow:focus-visible,
.hero-dot:focus-visible,
.portfolio-controls button:focus-visible,
.testimonial-controls button:focus-visible,
.home-cta-circle:focus-visible,
.home-social-links a:focus-visible {
    outline:
        3px solid var(--willow-gold-light);

    outline-offset: 4px;
}


/* =====================================================================
   31. DESKTOP HOVER EFFECTS
===================================================================== */

@media (hover: hover) and (pointer: fine) {

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


    .home-btn:hover span {
        transform:
            translate(3px, -2px);
    }


    .home-btn-primary:hover {
        background: var(--willow-gold-light);

        box-shadow:
            0 15px 40px rgba(216, 178, 105, 0.2);
    }


    .home-btn-transparent:hover {
        color: var(--willow-dark);

        border-color: var(--willow-white);

        background: var(--willow-white);
    }


    .home-btn-outline:hover {
        color: var(--willow-dark);

        border-color: var(--willow-white);

        background: var(--willow-white);
    }


    .home-text-link:hover {
        gap: 19px;

        color: var(--willow-green-2);
    }


    .hero-arrow:hover {
        color: var(--willow-dark);

        border-color: var(--willow-white);

        background: var(--willow-white);

        transform:
            scale(1.06);
    }


    .home-service-card:hover
    .home-service-media img {
        transform:
            scale(1.065);
    }


    .home-service-card:hover
    .home-service-media::after {
        opacity: 0.72;
    }


    .home-service-card:hover
    .home-service-arrow {
        opacity: 1;

        transform:
            translateY(0);
    }


    .home-client-logo:hover img {
        filter:
            grayscale(0);

        opacity: 1;
    }


    .home-project:hover
    .home-project-media img {
        transform:
            scale(1.045);
    }


    .home-project:hover
    .project-arrow {
        color: var(--willow-dark);

        background: var(--willow-white);

        transform:
            rotate(8deg);
    }


    .portfolio-controls button:hover {
        color: var(--willow-dark);

        border-color: var(--willow-white);

        background: var(--willow-white);

        transform:
            translateY(-2px);
    }


    .testimonial-controls button:hover {
        color: var(--willow-white);

        border-color: var(--willow-green);

        background: var(--willow-green);
    }


    .home-trip-card:hover
    .home-trip-image img {
        transform:
            scale(1.065);
    }


    .home-trip-card:hover
    .trip-arrow {
        transform:
            rotate(45deg);
    }


    .home-social-links a:hover {
        padding-left: 12px;

        color: var(--willow-green);
    }


    .home-cta-circle:hover {
        background: var(--willow-gold-light);

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

        transform:
            scale(1.055);
    }

}


/* =====================================================================
   32. LARGE DESKTOP
===================================================================== */

@media (min-width: 1600px) {

    .willow-home {
        --home-container: 1500px;
    }


    .hero-content {
        width:
            min(1180px, 89%);
    }


    .home-service-media {
        height: 500px;
    }


    .home-trip-image {
        height: 460px;
    }

}


/* =====================================================================
   33. TABLET / SMALL LAPTOP
===================================================================== */

@media (max-width: 1100px) {

    .willow-home .container {
        width:
            min(
                calc(100% - 50px),
                var(--home-container)
            );
    }


    .hero-content {
        width: 95%;
    }


    .hero-title {
        font-size:
            clamp(3.9rem, 9vw, 7rem);
    }


    .hero-event-info {
        display: none;
    }


    .hero-navigation {
        right: 25px;

        left: auto;

        transform: none;
    }


    .home-intro-grid {
        gap: 65px;
    }


    .home-service-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .home-service-media {
        height: 390px;
    }


    .home-proof-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .home-proof-item:nth-child(2) {
        border-right: 0;
    }


    .home-proof-item:nth-child(-n + 2) {
        border-bottom:
            1px solid var(--willow-border);
    }


    .home-proof-item:nth-child(3) {
        padding-left: 0;
    }


    .home-footprint-grid {
        gap: 70px;
    }


    .home-trip-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .home-trip-image {
        height: 390px;
    }

}


/* =====================================================================
   34. TABLET / MOBILE
===================================================================== */

@media (max-width: 800px) {

    .willow-home {
        --section-space: 78px;
    }


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


    /* HERO */

    .willow-hero {
        min-height: 650px;
    }


    .hero-content {
        width: 100%;

        padding-top: 60px;

        padding-bottom: 55px;
    }


    .hero-kicker {
        margin-bottom: 18px;

        font-size: 9px;
    }


    .hero-title {
        font-size:
            clamp(3.2rem, 13vw, 5.8rem);

        line-height: 0.88;
    }


    .hero-title-accent {
        -webkit-text-stroke:
            1px rgba(255, 255, 255, 0.78);
    }


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

        margin-top: 26px;

        font-size: 14px;
    }


    .hero-actions {
        margin-top: 28px;
    }


    .hero-scroll {
        left: 18px;

        bottom: 26px;
    }


    .hero-navigation {
        right: 18px;

        bottom: 21px;
    }


    .hero-navigation
    .hero-arrow {
        display: none;
    }


    /* COMMON */

    .home-section-heading,
    .home-intro-grid,
    .home-experience-grid,
    .home-footprint-grid,
    .home-social-inner,
    .home-cta-inner {
        grid-template-columns: 1fr;
    }


    .home-section-heading,
    .home-intro-grid {
        gap: 38px;
    }


    .home-section-heading {
        margin-bottom: 44px;
    }


    .home-section-heading h2,
    .home-intro h2,
    .home-proof-heading h2,
    .home-experience h2 {
        font-size:
            clamp(2.75rem, 10.5vw, 4.9rem);
    }


    .home-heading-description,
    .home-intro-content {
        max-width: 650px;
    }


    /* SERVICES */

    .home-service-grid {
        grid-template-columns: 1fr;
    }


    .home-service-media {
        height:
            min(105vw, 540px);
    }


    /* FOOTPRINT */

    .home-footprint-grid {
        gap: 55px;
    }


    .home-footprint-visual {
        min-height: 500px;
    }


    /* STATEMENT */

    .home-statement h2 {
        font-size:
            clamp(3.4rem, 13.5vw, 6.8rem);
    }


    /* PORTFOLIO */

    .portfolio-track {
        gap: 18px;

        padding-right: 18px;
    }


    .home-project {
        flex-basis:
            calc(100vw - 55px);
    }


    .home-project-media {
        height:
            min(120vw, 660px);
    }


    .home-project-overlay {
        padding: 25px;
    }


    .home-project-overlay h3 {
        font-size:
            clamp(2rem, 7vw, 3.4rem);
    }


    .project-arrow {
        width: 52px;

        height: 52px;

        font-size: 17px;
    }


    /* EXPERIENCE */

    .home-experience-grid {
        gap: 48px;
    }


    .home-experience-title h2 {
        position: static;
    }


    /* CONSULTATION */

    .home-consultation-inner {
        align-items: flex-start;

        flex-direction: column;

        gap: 38px;
    }


    /* TESTIMONIAL */

    .testimonial-slider {
        min-height: 450px;
    }


    /* TRIPS */

    .home-trip-grid {
        grid-template-columns: 1fr;
    }


    .home-trip-image {
        height:
            min(105vw, 540px);
    }


    /* CTA */

    .home-cta-inner {
        gap: 52px;
    }


    .home-cta-content h2 {
        font-size:
            clamp(3.6rem, 13.5vw, 6.7rem);
    }


    .home-cta-action {
        display: flex;

        justify-content: flex-start;
    }


    .home-cta-circle {
        width: 190px;

        height: 190px;
    }

}


/* =====================================================================
   35. SMALL MOBILE
===================================================================== */

@media (max-width: 520px) {

    .willow-home {
        --section-space: 65px;
    }


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


    .home-section-label,
    .hero-kicker {
        gap: 10px;

        margin-bottom: 17px;

        font-size: 8px;
    }


    .home-section-label::before {
        flex-basis: 25px;

        width: 25px;
    }


    .home-btn {
        min-height: 53px;

        padding:
            0 19px;

        font-size: 9px;
    }


    /* HERO */

    .willow-hero {
        min-height: 620px;
    }


    .hero-background {
        inset: -2%;
    }


    .hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(3, 13, 10, 0.93) 0%,
                rgba(3, 13, 10, 0.77) 55%,
                rgba(3, 13, 10, 0.42) 100%
            );
    }


    .hero-content {
        padding-top: 72px;

        padding-bottom: 75px;
    }


    .hero-title {
        font-size:
            clamp(2.75rem, 14vw, 4.45rem);

        line-height: 0.89;

        letter-spacing: -0.055em;
    }


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

        margin-top: 22px;

        font-size: 13px;

        line-height: 1.62;
    }


    .hero-actions {
        flex-direction: column;

        align-items: stretch;

        gap: 9px;

        width:
            min(100%, 340px);

        margin-top: 25px;
    }


    .hero-actions
    .home-btn {
        width: 100%;
    }


    .hero-scroll {
        display: none;
    }


    .hero-navigation {
        right: auto;

        left: 15px;

        bottom: 18px;
    }


    /* SERVICES */

    .home-service-media {
        height: 390px;
    }


    .home-service-number {
        top: 15px;

        left: 15px;

        width: 44px;

        height: 44px;
    }


    .home-service-arrow {
        right: 15px;

        bottom: 15px;

        width: 50px;

        height: 50px;

        opacity: 1;

        transform: none;
    }


    /* CLIENTS */

    .home-clients {
        padding:
            55px 0;
    }


    .home-client-logo {
        width: 160px;

        height: 90px;

        padding:
            18px 25px;
    }


    .home-client-logo img {
        max-width: 115px;

        max-height: 52px;
    }


    /* FOOTPRINT */

    .home-footprint {
        padding:
            75px 0;
    }


    .home-footprint-content h2 {
        font-size:
            clamp(3rem, 13vw, 4.7rem);
    }


    .home-footprint-visual {
        min-height: 350px;
    }


    .footprint-location {
        min-width: 205px;

        padding:
            15px 17px;
    }


    /* MARQUEE */

    .home-marquee {
        padding:
            16px 0;
    }


    .home-marquee-track span {
        font-size: 2rem;
    }


    .home-marquee-track i {
        margin:
            0 19px;
    }


    /* STATEMENT */

    .home-statement {
        padding:
            85px 0;
    }


    .home-statement h2 {
        font-size:
            clamp(3rem, 14vw, 5.2rem);

        line-height: 0.89;
    }


    /* PORTFOLIO */

    .home-project {
        flex-basis:
            calc(100vw - 34px);
    }


    .home-project-media {
        height: 510px;
    }


    .home-project-overlay {
        align-items: flex-start;

        flex-direction: column;

        gap: 18px;

        padding: 22px;
    }


    .home-project-overlay h3 {
        font-size:
            clamp(1.9rem, 8vw, 2.8rem);
    }


    .project-arrow {
        display: none;
    }


    .portfolio-footer {
        align-items: flex-start;

        flex-direction: column;

        gap: 23px;
    }


    /* EXPERIENCE */

    .experience-item {
        grid-template-columns:
            36px minmax(0, 1fr);

        gap: 13px;

        padding:
            28px 0;
    }


    .experience-item h3 {
        font-size: 1.4rem;
    }


    .experience-item p {
        font-size: 14px;
    }


    /* CONSULTATION */

    .home-consultation {
        padding:
            70px 0;
    }


    .home-consultation-inner h2 {
        font-size:
            clamp(2.7rem, 12vw, 4.4rem);
    }


    /* TESTIMONIAL */

    .testimonial-slider {
        min-height: 500px;
    }


    .testimonial-slide blockquote {
        font-size:
            clamp(1.8rem, 8vw, 3rem);
    }


    .testimonial-counter {
        justify-content: flex-start;
    }


    /* TRIPS */

    .home-trip-image {
        height: 390px;
    }


    .trip-arrow {
        top: 15px;

        right: 15px;

        width: 48px;

        height: 48px;
    }


    /* SOCIAL */

    .home-social-heading h2 {
        font-size:
            clamp(2.7rem, 11vw, 4.5rem);
    }


    /* CTA */

    .home-cta {
        padding:
            85px 0;
    }


    .home-cta-content h2 {
        font-size:
            clamp(3.1rem, 14vw, 5rem);

        line-height: 0.89;
    }


    .home-cta-content > p:last-child {
        font-size: 14px;
    }


    .home-cta-circle {
        width: 165px;

        height: 165px;
    }


    .home-cta-circle span {
        font-size: 9px;
    }


    .home-cta-circle strong {
        font-size: 24px;
    }

}


/* =====================================================================
   36. VERY SMALL MOBILE
===================================================================== */

@media (max-width: 380px) {

    .willow-home .container {
        width:
            calc(100% - 24px);
    }


    .hero-title {
        font-size:
            clamp(2.5rem, 13.5vw, 3.4rem);
    }


    .hero-description {
        max-width: 100%;
    }


    .home-service-media,
    .home-trip-image {
        height: 350px;
    }


    .home-project-media {
        height: 460px;
    }


    .home-footprint-visual {
        min-height: 320px;
    }

}


/* =====================================================================
   37. SHORT LAPTOP SCREENS
===================================================================== */

@media (min-width: 801px) and (max-height: 760px) {

    .willow-hero {
        min-height: 620px;
    }


    .hero-content {
        padding-top: 80px;
    }


    .hero-title {
        font-size:
            clamp(3.7rem, 6.3vw, 6.6rem);
    }


    .hero-description {
        margin-top: 22px;
    }


    .hero-actions {
        margin-top: 24px;
    }


    .hero-navigation,
    .hero-scroll {
        bottom: 24px;
    }


    .hero-event-info {
        bottom: 25px;
    }

}


/* =====================================================================
   38. REDUCED MOTION
===================================================================== */

@media (prefers-reduced-motion: reduce) {

    .willow-home *,
    .willow-home *::before,
    .willow-home *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-delay:
            0ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }


    .reveal {
        opacity: 1;

        transform: none;
    }


    .hero-kicker,
    .hero-title span,
    .hero-description,
    .hero-actions {
        opacity: 1;

        transform: none;
    }


    .home-client-track-inner,
    .home-marquee-track {
        animation: none;
    }

}


/* =====================================================================
   39. PRINT
===================================================================== */

@media print {

    .willow-hero {
        height: auto;

        min-height: 500px;
    }


    .hero-navigation,
    .hero-scroll,
    .portfolio-controls,
    .testimonial-controls {
        display: none !important;
    }


    .reveal {
        opacity: 1 !important;

        transform: none !important;
    }

}