/* =========================================================
   PULPBASE
   MAIN WEBSITE STYLES
========================================================= */


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

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


html {
    scroll-behavior: smooth;
}


body {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #fdebd4;
    color: #2c211a;

    overflow-x: hidden;
}


a {
    text-decoration: none;
}


button {
    font: inherit;
}


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



/* =========================================================
   02. BRAND VARIABLES
========================================================= */

:root {

    --brown: #95613c;

    --gold: #d7b56d;

    --cream: #fdeAD2;

    --green: #14693c;

    --deep-green: #0c4d2b;

    --dark: #2f241d;

    --white: #ffffff;

}



/* =========================================================
   03. HEADER
========================================================= */

.site-header {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    padding:
        22px
        0;

    transition:
        background 0.35s ease,
        padding 0.35s ease,
        box-shadow 0.35s ease;

}


.header-container {

    width: min(92%, 1500px);

    margin: 0 auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

/* =========================================================
   CENTER DESKTOP HEADER NAVIGATION
========================================================= */

@media (min-width: 821px) {

    .header-container {
        position: relative;
    }

    .main-navigation {
        position: absolute;

        left: 50%;
        top: 50%;

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

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

}


/* LOGO */

.brand-logo {

    position: relative;

    z-index: 1002;

    display: inline-flex;

    align-items: center;

}


.brand-logo img {

    width: 190px;

    height: auto;

}


/* NAVIGATION */

.main-navigation {

    display: flex;

    align-items: center;

    gap: 50px;

}




.nav-link {

    position: relative;

    font-size: 15px;

    font-weight: 700;

    letter-spacing: 0.03em;

    color: var(--brown);

    padding: 10px 0;

    transition: color 0.3s ease;

}


.nav-link::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 0;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--green);

    transform:
        translateX(-50%)
        scale(0);

    transition: transform 0.3s ease;

}


.nav-link:hover,
.nav-link.active {

    color: var(--green);

}


.nav-link:hover::after,
.nav-link.active::after {

    transform:
        translateX(-50%)
        scale(1);

}



/* =========================================================
   04. STICKY HEADER
========================================================= */

.site-header.header-scrolled {

    position: fixed;

    padding:
        13px
        0;

    background:
        rgba(
            253,
            234,
            210,
            0.94
        );

    backdrop-filter: blur(16px);

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

    box-shadow:
        0
        10px
        40px
        rgba(70, 45, 25, 0.08);

}


.site-header.header-scrolled
.brand-logo img {

    width: 165px;

}



/* =========================================================
   05. MOBILE MENU BUTTON
========================================================= */

.menu-toggle {

    display: none;

    width: 44px;
    height: 44px;

    border: 0;

    background: transparent;

    cursor: pointer;

    position: relative;

    z-index: 1002;

}


.menu-toggle span {

    display: block;

    width: 26px;
    height: 2px;

    margin: 6px auto;

    background: var(--green);

    border-radius: 20px;

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

}



/* =========================================================
   06. MOBILE NAVIGATION
========================================================= */

.mobile-navigation {

    display: none;

}



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

.hero-section {

    position: relative;

    width: 100%;

    min-height: 100vh;

    overflow: hidden;

    display: flex;

    align-items: center;

    background: var(--cream);

}



/* BACKGROUND */

.hero-background {

    position: absolute;

    inset: 0;

    z-index: 0;

}


.hero-background img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

}



/* OVERLAY */

.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(253, 234, 210, 0.98) 0%,
            rgba(253, 234, 210, 0.92) 22%,
            rgba(253, 234, 210, 0.50) 47%,
            rgba(253, 234, 210, 0.04) 71%,
            rgba(253, 234, 210, 0) 100%
        );

}



/* =========================================================
   08. HERO CONTENT
========================================================= */

.hero-container {

    position: relative;

    z-index: 5;

    width: min(92%, 1500px);

    margin:
        0
        auto;

    padding-top: 120px;

}


.hero-content {

    width: min(650px, 50%);

}



/* EYEBROW */

.hero-eyebrow {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 25px;

    color: var(--green);

    font-size: 12px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.22em;

}


.eyebrow-line {

    width: 36px;
    height: 2px;

    background: var(--gold);

}



/* TITLE */

.hero-title {

    max-width: 630px;

    font-size:
        clamp(
            54px,
            5.2vw,
            88px
        );

    line-height: 0.96;

    letter-spacing: -0.055em;

    font-weight: 700;

    color: var(--brown);

}


.hero-title span {

    display: block;

    color: var(--green);

    margin-top: 12px;

}



/* DESCRIPTION */

.hero-description {

    max-width: 570px;

    margin-top: 30px;

    font-size: 17px;

    line-height: 1.8;

    color:
        rgba(
            47,
            36,
            29,
            0.75
        );

}



/* =========================================================
   09. HERO BUTTON
========================================================= */

.hero-actions {

    margin-top: 35px;

}


.primary-button {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 25px;

    padding:
        17px
        20px
        17px
        26px;

    border-radius: 100px;

    background: var(--green);

    color: var(--white);

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 0.02em;

    overflow: hidden;

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

}


.primary-button:hover {

    transform:
        translateY(-3px);

    background: var(--deep-green);

    box-shadow:
        0
        15px
        35px
        rgba(20, 105, 60, 0.22);

}


.button-arrow {

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

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

    font-size: 20px;

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

}


.primary-button:hover
.button-arrow {

    transform:
        translateX(4px);

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

}



/* =========================================================
   10. BRAND PHILOSOPHY
========================================================= */

.earth-message {

    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 43px;

}


.earth-message-icon {

    width: 45px;
    height: 45px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(
            20,
            105,
            60,
            0.09
        );

}


.earth-message-icon svg {

    width: 22px;

    fill: var(--green);

}


.earth-message small {

    display: block;

    margin-bottom: 4px;

    font-size: 10px;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color:
        rgba(
            47,
            36,
            29,
            0.5
        );

}


.earth-message strong {

    font-size: 13px;

    color: var(--brown);

    letter-spacing: 0.02em;

}



/* =========================================================
   11. ORGANIC DECORATION
========================================================= */

.hero-organic-shape {

    position: absolute;

    z-index: 2;

    pointer-events: none;

}


.shape-one {

    left: -170px;

    bottom: -260px;

    width: 550px;
    height: 550px;

    border-radius:
        42%
        58%
        65%
        35% /
        45%
        35%
        65%
        55%;

    border:
        1px
        solid
        rgba(
            149,
            97,
            60,
            0.12
        );

}



/* =========================================================
   12. SCROLL INDICATOR
========================================================= */

.hero-scroll {

    position: absolute;

    z-index: 6;

    bottom: 30px;

    left: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    transform: translateX(-50%);

}


.hero-scroll span {

    font-size: 9px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.2em;

    color:
        rgba(
            47,
            36,
            29,
            0.45
        );

}


.scroll-line {

    position: relative;

    width: 1px;
    height: 40px;

    background:
        rgba(
            47,
            36,
            29,
            0.13
        );

    overflow: hidden;

}


.scroll-line::after {

    content: "";

    position: absolute;

    top: -40px;
    left: 0;

    width: 1px;
    height: 20px;

    background: var(--green);

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

}



/* =========================================================
   13. SELECTION
========================================================= */

::selection {

    background: var(--green);

    color: var(--white);

}

/* =========================================================
   14. CERTIFICATES SECTION
========================================================= */

.certificates-section {

    position: relative;

    padding:
        110px
        0
        120px;

    background:
        linear-gradient(
            180deg,
            #fdebd6 0%,
            #fff8ee 100%
        );

    overflow: hidden;

}


/* DECORATIVE BACKGROUND */

.certificates-section::before {

    content: "";

    position: absolute;

    top: -120px;
    right: -120px;

    width: 320px;
    height: 320px;

    border-radius: 50%;

    background:
        rgba(
            215,
            181,
            109,
            0.10
        );

}


.certificates-section::after {

    content: "";

    position: absolute;

    bottom: -170px;
    left: -170px;

    width: 390px;
    height: 390px;

    border-radius: 50%;

    border:
        1px
        solid
        rgba(
            149,
            97,
            60,
            0.10
        );

}


.certificates-container {

    position: relative;

    z-index: 2;

    width: min(92%, 1450px);

    margin:
        0
        auto;

}



/* =========================================================
   CERTIFICATE HEADING
========================================================= */

.certificates-heading {

    max-width: 760px;

    margin:
        0
        auto
        65px;

    text-align: center;

}


.section-tag {

    display: inline-block;

    margin-bottom: 16px;

    color: var(--green);

    font-size: 11px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.20em;

}


.certificates-heading h2 {

    font-size:
        clamp(
            38px,
            4vw,
            62px
        );

    line-height: 1.05;

    letter-spacing: -0.04em;

    color: var(--brown);

}


.certificates-heading h2 span {

    display: block;

    color: var(--green);

    margin-top: 7px;

}


.certificates-heading p {

    max-width: 650px;

    margin:
        24px
        auto
        0;

    font-size: 16px;

    line-height: 1.8;

    color:
        rgba(
            47,
            36,
            29,
            0.68
        );

}



/* =========================================================
   CERTIFICATES GRID
========================================================= */

.certificates-grid {

    display: grid;

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

    gap: 18px;

    align-items: stretch;

}



/* =========================================================
   CERTIFICATE CARD
========================================================= */

.certificate-card {

    position: relative;

    min-height: 220px;

    padding:
        26px
        18px
        22px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 18px;

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

    border:
        1px
        solid
        rgba(
            149,
            97,
            60,
            0.10
        );

    border-radius: 30px;

    backdrop-filter:
        blur(12px);

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

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

}


.certificate-card::before {

    content: "";

    position: absolute;

    inset: 8px;

    border-radius: 23px;

    border:
        1px
        solid
        rgba(
            215,
            181,
            109,
            0
        );

    transition:
        border-color 0.35s ease;

}


.certificate-card:hover {

    transform:
        translateY(-10px);

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

    border-color:
        rgba(
            215,
            181,
            109,
            0.32
        );

    box-shadow:
        0
        24px
        55px
        rgba(
            95,
            60,
            32,
            0.10
        );

}


.certificate-card:hover::before {

    border-color:
        rgba(
            215,
            181,
            109,
            0.25
        );

}



/* LOGO */

.certificate-logo {

    width: 125px;
    height: 125px;

    display: flex;

    align-items: center;

    justify-content: center;

    transition:
        transform 0.4s ease;

}


.certificate-logo img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0
            8px
            12px
            rgba(
                80,
                48,
                25,
                0.08
            )
        );

}


.certificate-card:hover
.certificate-logo {

    transform:
        scale(1.07)
        rotate(-2deg);

}



/* LABEL */

.certificate-card span {

    position: relative;

    z-index: 2;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--brown);

}

/* =========================================================
   15. ABOUT SECTION
========================================================= */

.about-section {

    position: relative;

    padding:
        140px
        0;

    background: #fffaf3;

    overflow: hidden;

}


/* LARGE BACKGROUND WORD */

.about-background-word {

    position: absolute;

    top: 15px;
    left: 50%;

    transform:
        translateX(-50%);

    font-size:
        clamp(
            100px,
            15vw,
            240px
        );

    line-height: 1;

    font-weight: 800;

    letter-spacing: -0.07em;

    color:
        rgba(
            149,
            97,
            60,
            0.035
        );

    white-space: nowrap;

    pointer-events: none;

    user-select: none;

}



/* =========================================================
   ABOUT LAYOUT
========================================================= */

.about-container {

    position: relative;

    z-index: 2;

    width: min(92%, 1450px);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(0, 0.95fr);

    gap: 90px;

    align-items: center;

}



/* =========================================================
   ABOUT IMAGE
========================================================= */

.about-visual {

    position: relative;

}


.about-image-frame {

    position: relative;

    width: 100%;

    border-radius:
        15px
        120px
        15px
        15px;

    overflow: visible;

}


.about-image-frame::before {

    content: "";

    position: absolute;

    top: -18px;
    left: -18px;

    width: 90px;
    height: 90px;

    border-top:
        1px solid
        rgba(
            215,
            181,
            109,
            0.75
        );

    border-left:
        1px solid
        rgba(
            215,
            181,
            109,
            0.75
        );

    z-index: 3;

}


.about-image {

    width: 100%;

    aspect-ratio: 1.2 / 1;

    object-fit: cover;

    border-radius:
        15px
        120px
        15px
        15px;

    box-shadow:
        0
        35px
        80px
        rgba(
            77,
            49,
            28,
            0.10
        );

}



/* =========================================================
   ECO BADGE
========================================================= */

.about-eco-badge {

    position: absolute;

    right: -35px;
    bottom: 35px;

    width: 175px;
    height: 175px;

    padding: 25px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    border-radius: 50%;

    background: var(--green);

    color: var(--white);

    box-shadow:
        0
        22px
        50px
        rgba(
            20,
            105,
            60,
            0.22
        );

}


.eco-badge-icon {

    width: 35px;
    height: 35px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 10px;

}


.eco-badge-icon svg {

    width: 30px;

    fill: var(--gold);

}


.about-eco-badge > span:last-child {

    font-size: 10px;

    line-height: 1.5;

    text-transform: uppercase;

    letter-spacing: 0.11em;

}


.about-eco-badge strong {

    display: block;

    margin-top: 2px;

    font-size: 12px;

    color: var(--gold);

}



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

.about-content {

    position: relative;

    padding-left: 10px;

}


.about-heading {

    margin-bottom: 28px;

}


.about-heading h2 {

    max-width: 660px;

    font-size:
        clamp(
            42px,
            4.2vw,
            67px
        );

    line-height: 1.03;

    letter-spacing: -0.045em;

    color: var(--brown);

}


.about-heading h2 span {

    color: var(--green);

}



/* =========================================================
   COMPANY LINE
========================================================= */

.about-company {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 28px;

}


.about-company-line {

    width: 38px;
    height: 1px;

    flex-shrink: 0;

    background: var(--gold);

}


.about-company strong {

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.12em;

    color: var(--green);

}



/* =========================================================
   ABOUT TEXT
========================================================= */

.about-copy {

    max-width: 650px;

}


.about-copy p {

    margin-bottom: 18px;

    font-size: 15px;

    line-height: 1.85;

    color:
        rgba(
            47,
            36,
            29,
            0.68
        );

}


.about-copy p:last-child {

    margin-bottom: 0;

}



/* =========================================================
   PHILOSOPHY
========================================================= */

.about-philosophy {

    max-width: 650px;

    margin-top: 35px;

    padding-top: 25px;

    border-top:
        1px solid
        rgba(
            149,
            97,
            60,
            0.13
        );

    display: flex;

    align-items: center;

    gap: 22px;

}


.philosophy-number {

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.1em;

    color: var(--gold);

}


.philosophy-content {

    padding-left: 22px;

    border-left:
        1px solid
        rgba(
            149,
            97,
            60,
            0.16
        );

}


.philosophy-content small {

    display: block;

    margin-bottom: 5px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.17em;

    text-transform: uppercase;

    color:
        rgba(
            47,
            36,
            29,
            0.45
        );

}


.philosophy-content strong {

    font-size: 16px;

    color: var(--brown);

}


.philosophy-content strong span {

    color: var(--green);

}

/* =========================================================
   HERO LARGE BRAND MARK
========================================================= */

.hero-brand-mark {

    position: absolute;

    z-index: 2;

    left: -55px;

    top: 50%;

    transform: translateY(-46%);

    width: clamp(
        360px,
        34vw,
        620px
    );

    height: 78%;

    pointer-events: none;

    user-select: none;

    overflow: hidden;

}


.hero-brand-mark img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    object-position: left center;

    opacity: 0.14;

}

/* =========================================================
   16. CATEGORIES SECTION
========================================================= */

.categories-section {

    position: relative;

    padding:
        125px
        0
        110px;

    background:
        linear-gradient(
            180deg,
            #fffaf3 0%,
            #f8f1e6 100%
        );

    overflow: hidden;

}


.categories-section::before {

    content: "";

    position: absolute;

    left: -170px;
    top: 110px;

    width: 420px;
    height: 420px;

    border-radius:
        42%
        58%
        63%
        37% /
        42%
        38%
        62%
        58%;

    background:
        rgba(
            215,
            181,
            109,
            0.09
        );

}


.categories-container {

    position: relative;

    z-index: 2;

    width: min(92%, 1450px);

    margin: 0 auto;

}



/* =========================================================
   CATEGORIES HEADING
========================================================= */

.categories-heading {

    max-width: 760px;

    margin:
        0
        auto
        55px;

    text-align: center;

}


.categories-heading h2 {

    font-size:
        clamp(
            42px,
            4.5vw,
            66px
        );

    line-height: 1;

    letter-spacing: -0.045em;

    color: var(--brown);

}


.categories-heading h2 span {

    color: var(--green);

}


.categories-heading p {

    max-width: 580px;

    margin:
        20px
        auto
        0;

    font-size: 15px;

    line-height: 1.75;

    color:
        rgba(
            47,
            36,
            29,
            0.62
        );

}



/* =========================================================
   CATEGORY GRID
========================================================= */

.categories-grid {

    display: grid;

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

    gap: 22px;

}



/* =========================================================
   CATEGORY CARD
========================================================= */

.category-card {

    position: relative;

    min-width: 0;

    overflow: hidden;

    border-radius: 26px;

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

    border:
        1px
        solid
        rgba(
            149,
            97,
            60,
            0.10
        );

    color: inherit;

    box-shadow:
        0
        18px
        50px
        rgba(
            69,
            49,
            32,
            0.06
        );

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;

}


.category-card:hover {

    transform:
        translateY(-10px);

    border-color:
        rgba(
            20,
            105,
            60,
            0.25
        );

    box-shadow:
        0
        30px
        70px
        rgba(
            69,
            49,
            32,
            0.10
        );

}



/* NUMBER */

.category-number {

    position: absolute;

    top: 22px;
    left: 22px;

    z-index: 4;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 0.08em;

    color: var(--brown);

}



/* =========================================================
   CATEGORY IMAGE AREA
========================================================= */

.category-image-wrap {

    position: relative;

    height: 340px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}


.category-shape {

    position: absolute;

    width: 78%;
    height: 78%;

    border-radius:
        48%
        52%
        38%
        62% /
        55%
        38%
        62%
        45%;

    background:
        linear-gradient(
            145deg,
            rgba(215, 181, 109, 0.25),
            rgba(20, 105, 60, 0.10)
        );

    transition:
        transform 0.5s ease,
        border-radius 0.5s ease;

}


.category-card:nth-child(even)
.category-shape {

    background:
        linear-gradient(
            145deg,
            rgba(20, 105, 60, 0.14),
            rgba(215, 181, 109, 0.18)
        );

}


.category-image {

    position: relative;

    z-index: 3;

    width: 82%;
    height: 82%;

    object-fit: contain;

    transition:
        transform 0.5s ease;

    filter:
        drop-shadow(
            0
            24px
            22px
            rgba(
                65,
                46,
                30,
                0.12
            )
        );

}


.category-card:hover
.category-image {

    transform:
        translateY(-8px)
        scale(1.05);

}


.category-card:hover
.category-shape {

    transform:
        rotate(5deg)
        scale(1.04);

    border-radius:
        58%
        42%
        56%
        44% /
        40%
        55%
        45%
        60%;

}



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

.category-card-footer {

    min-height: 110px;

    padding:
        22px
        22px
        24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    border-top:
        1px
        solid
        rgba(
            149,
            97,
            60,
            0.08
        );

}


.category-card-footer h3 {

    margin-bottom: 8px;

    font-size: 21px;

    line-height: 1.1;

    color: var(--brown);

}


.category-card-footer span {

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.15em;

    color:
        rgba(
            47,
            36,
            29,
            0.46
        );

}



/* ARROW */

.category-arrow {

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border:
        1px
        solid
        rgba(
            20,
            105,
            60,
            0.30
        );

    color: var(--green);

    font-size: 18px;

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

}


.category-card:hover
.category-arrow {

    background: var(--green);

    color: var(--white);

    transform:
        translateX(4px);

}



/* =========================================================
   VIEW MORE BUTTON
========================================================= */

.categories-more {

    margin-top: 45px;

    text-align: center;

}


.categories-more-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 14px;

    padding:
        12px
        21px;

    border-radius: 100px;

    border:
        1px
        solid
        rgba(
            20,
            105,
            60,
            0.34
        );

    color: var(--green);

    font-size: 12px;
    width: 200px;
    height: 55px;
    font-weight: 700;

    letter-spacing: 0.04em;

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

}


.categories-more-btn span {

    font-size: 16px;

}


.categories-more-btn:hover {

    background: var(--green);

    color: var(--white);

    transform:
        translateY(-2px);

}

/* =========================================================
   17. BENEFITS SECTION
========================================================= */

.benefits-section {

    position: relative;

    padding:
        120px
        0
        125px;

    background: var(--cream);

    overflow: hidden;

}


/* SOFT DECORATIVE GLOW */

.benefits-section::before {

    content: "";

    position: absolute;

    top: -180px;
    right: -180px;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    background:
        rgba(
            20,
            105,
            60,
            0.05
        );

}


.benefits-container {

    position: relative;

    z-index: 2;

    width: min(92%, 1350px);

    margin:
        0
        auto;

}



/* =========================================================
   BENEFITS HEADING
========================================================= */

.benefits-heading {

    max-width: 750px;

    margin:
        0
        auto
        65px;

    text-align: center;

}


.benefits-heading h2 {

    font-size:
        clamp(
            42px,
            4.2vw,
            64px
        );

    line-height: 1.02;

    letter-spacing: -0.045em;

    color: var(--brown);

}


.benefits-heading h2 span {

    display: block;

    color: var(--green);

    margin-top: 7px;

}


.benefits-heading p {

    max-width: 620px;

    margin:
        20px
        auto
        0;

    font-size: 15px;

    line-height: 1.75;

    color:
        rgba(
            47,
            36,
            29,
            0.62
        );

}



/* =========================================================
   BENEFITS GRID
========================================================= */

.benefits-grid {

    display: grid;

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

    gap:
        30px
        25px;

}



/* =========================================================
   BENEFIT ITEM
========================================================= */

.benefit-item {

    position: relative;

    min-height: 245px;

    padding:
        32px
        20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

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

    border:
        1px
        solid
        rgba(
            149,
            97,
            60,
            0.09
        );

    border-radius: 28px;

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

}


.benefit-item:hover {

    transform:
        translateY(-8px);

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

    box-shadow:
        0
        24px
        55px
        rgba(
            87,
            56,
            31,
            0.08
        );

}



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

.benefit-icon-wrap {

    width: 125px;
    height: 125px;

    margin-bottom: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    position: relative;

}


.benefit-icon-wrap::before {

    content: "";

    position: absolute;

    inset: -9px;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            215,
            181,
            109,
            0.25
        );

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

}


.benefit-icon-wrap img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition:
        transform 0.4s ease;

}


.benefit-item:hover
.benefit-icon-wrap img {

    transform:
        scale(1.07);

}


.benefit-item:hover
.benefit-icon-wrap::before {

    transform:
        scale(1.10);

}



/* =========================================================
   BENEFIT TITLE
========================================================= */

.benefit-item h3 {

    font-size: 16px;

    color: var(--brown);

    font-weight: 700;

    letter-spacing: 0.01em;

}

/* =========================================================
   18. WHY CHOOSE US
========================================================= */

.why-section {
    position: relative;
    padding: 140px 0;
    background: var(--green);
    overflow: hidden;
}


/* LARGE DECORATIVE CIRCLE */

.why-section::before {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    left: -360px;
    bottom: -330px;
    border-radius: 50%;
    border: 1px solid rgba(253, 234, 210, 0.12);
}


.why-section::after {
    content: "";
    position: absolute;
    width: 380px;
    height: 380px;
    left: -225px;
    bottom: -195px;
    border-radius: 50%;
    border: 1px solid rgba(215, 181, 109, 0.16);
}


.why-container {
    position: relative;
    z-index: 2;
    width: min(92%, 1400px);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 110px;
}


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

.why-intro {
    position: relative;
}


.why-intro-sticky {
    position: sticky;
    top: 150px;
}


.why-section .section-tag {
    color: var(--gold);
}


.why-intro h2 {
    max-width: 570px;
    margin-top: 5px;

    font-size: clamp(48px, 4.8vw, 75px);
    line-height: 0.98;
    letter-spacing: -0.05em;

    color: var(--cream);
}


.why-intro h2 span {
    display: block;
    margin-top: 10px;
    color: var(--gold);
}


.why-intro > .why-intro-sticky > p {
    max-width: 540px;
    margin-top: 30px;

    font-size: 16px;
    line-height: 1.85;

    color: rgba(255, 248, 238, 0.68);
}


/* BRAND LINE */

.why-brand-line {
    margin-top: 50px;

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

    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;

    color: rgba(255, 248, 238, 0.58);
}


.why-brand-line > span {
    width: 45px;
    height: 1px;
    margin-right: 8px;
    background: var(--gold);
}


.why-brand-line strong {
    color: var(--gold);
}


/* =========================================================
   RIGHT LIST
========================================================= */

.why-list {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}


.why-item {
    position: relative;

    display: grid;
    grid-template-columns: 55px 1fr 45px;
    gap: 25px;
    align-items: center;

    min-height: 170px;

    padding: 35px 10px;

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

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


/* HOVER BACKGROUND */

.why-item::before {
    content: "";

    position: absolute;
    inset: 0;

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

    transition: background 0.35s ease;

    pointer-events: none;
}


.why-item:hover::before {
    background: rgba(255, 255, 255, 0.055);
}


.why-item:hover {
    padding-left: 25px;
    padding-right: 20px;
}


/* NUMBER */

.why-number {
    align-self: start;
    padding-top: 5px;

    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.1em;

    color: var(--gold);
}


/* CONTENT */

.why-item-content {
    position: relative;
    z-index: 2;
}


.why-item-content h3 {
    margin-bottom: 12px;

    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.15;

    color: var(--cream);
}


.why-item-content p {
    max-width: 550px;

    font-size: 14px;
    line-height: 1.75;

    color: rgba(255, 248, 238, 0.58);
}


/* ARROW */

.why-arrow {
    position: relative;
    z-index: 2;

    width: 42px;
    height: 42px;

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

    border-radius: 50%;

    border: 1px solid rgba(215, 181, 109, 0.35);

    color: var(--gold);

    font-size: 18px;

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


.why-item:hover .why-arrow {
    background: var(--gold);
    color: var(--green);

    transform:
        rotate(45deg);
}

/* =========================================================
   TESTIMONIALS
========================================================= */

.testimonials-section {
    position: relative;
    padding: 140px 0;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(188, 155, 86, 0.08),
            transparent 28%
        ),
        #f7f1e7;

    overflow: hidden;
}


.testimonials-container {
    width: min(92%, 1400px);
    margin: 0 auto;
}


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

.testimonials-header {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 80px;
    align-items: end;

    margin-bottom: 75px;
}


.testimonials-header h2 {
    max-width: 800px;
    margin-top: 10px;

    font-size: clamp(46px, 5vw, 76px);
    line-height: 1;
    letter-spacing: -0.05em;

    color: var(--green);
}


.testimonials-header h2 span {
    display: block;
    color: var(--brown);
}


.testimonials-header > p {
    max-width: 430px;

    font-size: 15px;
    line-height: 1.8;

    color: rgba(55, 62, 46, 0.68);
}


/* =========================================================
   MAIN GRID
========================================================= */

.testimonials-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 25px;
}


/* =========================================================
   FEATURED
========================================================= */

.testimonial-featured {
    position: relative;

    min-height: 620px;

    display: flex;
    flex-direction: column;

    padding: 55px;

    background: var(--brown);

    border-radius: 35px 35px 150px 35px;

    overflow: hidden;
}


.testimonial-top {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}


.testimonial-number {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.15em;

    color: rgba(255, 248, 238, 0.55);
}


.testimonial-quote {
    height: 70px;

    font-family: Georgia, serif;
    font-size: 110px;
    line-height: 0.8;

    color: var(--gold);
}


.testimonial-featured blockquote {
    position: relative;
    z-index: 2;

    max-width: 560px;

    margin: 85px 0 55px;

    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1.42;

    letter-spacing: -0.025em;

    color: #fff8ee;
}


.testimonial-person {
    position: relative;
    z-index: 2;

    margin-top: auto;

    display: flex;
    align-items: center;
    gap: 15px;
}


.testimonial-avatar {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

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

    border-radius: 50%;

    background: var(--gold);

    color: var(--brown);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
}


.testimonial-person h4 {
    margin-bottom: 4px;

    font-size: 14px;
    color: #fff8ee;
}


.testimonial-person span {
    font-size: 11px;
    color: rgba(255, 248, 238, 0.55);
}


/* BACKGROUND WORD */

.testimonial-featured-word {
    position: absolute;

    right: -25px;
    bottom: -25px;

    font-size: clamp(100px, 12vw, 180px);
    font-weight: 900;

    letter-spacing: -0.08em;

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

    pointer-events: none;
}


/* =========================================================
   RIGHT TESTIMONIALS
========================================================= */

.testimonial-list {
    display: flex;
    flex-direction: column;
}


.testimonial-card {
    position: relative;

    flex: 1;

    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 25px;

    padding: 38px 25px;

    border-top: 1px solid rgba(71, 81, 58, 0.18);

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


.testimonial-card:last-child {
    border-bottom: 1px solid rgba(71, 81, 58, 0.18);
}


.testimonial-card:hover {
    padding-left: 40px;

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


.testimonial-card-number {
    padding-top: 8px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;

    color: var(--brown);
}


.testimonial-card-content {
    position: relative;
    padding-right: 30px;
}


.mini-quote {
    position: absolute;

    right: 0;
    top: -15px;

    font-family: Georgia, serif;
    font-size: 65px;
    line-height: 1;

    color: rgba(139, 101, 53, 0.15);
}


.testimonial-card-content > p {
    position: relative;
    z-index: 2;

    max-width: 620px;

    font-size: 16px;
    line-height: 1.75;

    color: #46503c;
}


/* PERSON */

.testimonial-card-person {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 24px;
}


.testimonial-avatar.small {
    width: 39px;
    height: 39px;

    background: var(--green);
    color: #fff8ee;

    font-size: 9px;
}


.testimonial-card-person h4 {
    margin-bottom: 3px;

    font-size: 12px;
    color: var(--green);
}


.testimonial-card-person span {
    font-size: 10px;
    color: rgba(55, 62, 46, 0.58);
}

/* =========================================================
   TESTIMONIALS
========================================================= */

.testimonials-section {
    position: relative;
    padding: 140px 0;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(188, 155, 86, 0.08),
            transparent 28%
        ),
        #f7f1e7;

    overflow: hidden;
}


.testimonials-container {
    width: min(92%, 1400px);
    margin: 0 auto;
}


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

.testimonials-header {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 80px;
    align-items: end;

    margin-bottom: 75px;
}


.testimonials-header h2 {
    max-width: 800px;
    margin-top: 10px;

    font-size: clamp(46px, 5vw, 76px);
    line-height: 1;
    letter-spacing: -0.05em;

    color: var(--green);
}


.testimonials-header h2 span {
    display: block;
    color: var(--brown);
}


.testimonials-header > p {
    max-width: 430px;

    font-size: 15px;
    line-height: 1.8;

    color: rgba(55, 62, 46, 0.68);
}


/* =========================================================
   MAIN GRID
========================================================= */

.testimonials-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 25px;
}


/* =========================================================
   FEATURED
========================================================= */

.testimonial-featured {
    position: relative;

    min-height: 620px;

    display: flex;
    flex-direction: column;

    padding: 55px;

    background: var(--brown);

    border-radius: 35px 35px 150px 35px;

    overflow: hidden;
}


.testimonial-top {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}


.testimonial-number {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.15em;

    color: rgba(255, 248, 238, 0.55);
}


.testimonial-quote {
    height: 70px;

    font-family: Georgia, serif;
    font-size: 110px;
    line-height: 0.8;

    color: var(--gold);
}


.testimonial-featured blockquote {
    position: relative;
    z-index: 2;

    max-width: 560px;

    margin: 85px 0 55px;

    font-size: clamp(24px, 2.2vw, 34px);
    line-height: 1.42;

    letter-spacing: -0.025em;

    color: #fff8ee;
}


.testimonial-person {
    position: relative;
    z-index: 2;

    margin-top: auto;

    display: flex;
    align-items: center;
    gap: 15px;
}


.testimonial-avatar {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

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

    border-radius: 50%;

    background: var(--gold);

    color: var(--brown);

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
}


.testimonial-person h4 {
    margin-bottom: 4px;

    font-size: 14px;
    color: #fff8ee;
}


.testimonial-person span {
    font-size: 11px;
    color: rgba(255, 248, 238, 0.55);
}


/* BACKGROUND WORD */

.testimonial-featured-word {
    position: absolute;

    right: -25px;
    bottom: -25px;

    font-size: clamp(100px, 12vw, 180px);
    font-weight: 900;

    letter-spacing: -0.08em;

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

    pointer-events: none;
}


/* =========================================================
   RIGHT TESTIMONIALS
========================================================= */

.testimonial-list {
    display: flex;
    flex-direction: column;
}


.testimonial-card {
    position: relative;

    flex: 1;

    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 25px;

    padding: 38px 25px;

    border-top: 1px solid rgba(71, 81, 58, 0.18);

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


.testimonial-card:last-child {
    border-bottom: 1px solid rgba(71, 81, 58, 0.18);
}


.testimonial-card:hover {
    padding-left: 40px;

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


.testimonial-card-number {
    padding-top: 8px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;

    color: var(--brown);
}


.testimonial-card-content {
    position: relative;
    padding-right: 30px;
}


.mini-quote {
    position: absolute;

    right: 0;
    top: -15px;

    font-family: Georgia, serif;
    font-size: 65px;
    line-height: 1;

    color: rgba(139, 101, 53, 0.15);
}


.testimonial-card-content > p {
    position: relative;
    z-index: 2;

    max-width: 620px;

    font-size: 16px;
    line-height: 1.75;

    color: #46503c;
}


/* PERSON */

.testimonial-card-person {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-top: 24px;
}


.testimonial-avatar.small {
    width: 39px;
    height: 39px;

    background: var(--green);
    color: #fff8ee;

    font-size: 9px;
}


.testimonial-card-person h4 {
    margin-bottom: 3px;

    font-size: 12px;
    color: var(--green);
}


.testimonial-card-person span {
    font-size: 10px;
    color: rgba(55, 62, 46, 0.58);
}

/* =========================================================
   FAQ
========================================================= */

.faq-section {
    position: relative;
    padding: 140px 0;
    background: #f7f1e7;
    overflow: hidden;
}


.faq-container {
    position: relative;
    z-index: 2;

    width: min(92%, 1400px);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 110px;
}


/* BACKGROUND WORD */

.faq-bg-word {
    position: absolute;

    left: -30px;
    bottom: -30px;

    font-size: clamp(110px, 16vw, 250px);
    font-weight: 900;

    letter-spacing: -0.08em;

    color: rgba(85, 69, 44, 0.035);

    pointer-events: none;
    user-select: none;
}


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

.faq-intro {
    position: relative;
}


.faq-intro h2 {
    margin-top: 10px;

    max-width: 600px;

    font-size: clamp(48px, 5vw, 76px);
    line-height: 0.98;

    letter-spacing: -0.05em;

    color: var(--green);
}


.faq-intro h2 span {
    display: block;
    color: var(--brown);
}


.faq-intro > p {
    margin-top: 28px;

    max-width: 520px;

    font-size: 15px;
    line-height: 1.85;

    color: rgba(55, 62, 46, 0.68);
}


/* SMALL NOTE */

.faq-small-note {
    margin-top: 45px;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;

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

    text-transform: uppercase;
    letter-spacing: 0.08em;

    color: rgba(55, 62, 46, 0.55);
}


.faq-small-note > span {
    width: 40px;
    height: 1px;

    margin-right: 6px;

    background: var(--gold);
}


.faq-small-note strong {
    color: var(--brown);
}


/* =========================================================
   FAQ LIST
========================================================= */

.faq-list {
    border-top: 1px solid rgba(72, 78, 60, 0.18);
}


.faq-item {
    border-bottom: 1px solid rgba(72, 78, 60, 0.18);
}


/* QUESTION */

.faq-question {
    width: 100%;

    display: grid;
    grid-template-columns: 50px 1fr 42px;
    gap: 20px;
    align-items: center;

    padding: 30px 5px;

    border: none;
    outline: none;

    background: transparent;

    text-align: left;
    cursor: pointer;

    transition:
        padding 0.3s ease,
        background 0.3s ease;
}


.faq-question:hover {
    padding-left: 15px;
    padding-right: 15px;

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


/* NUMBER */

.faq-number {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.12em;

    color: var(--brown);
}


/* QUESTION TEXT */

.faq-question-text {
    font-size: clamp(18px, 1.6vw, 24px);
    font-weight: 600;
    line-height: 1.3;

    color: var(--green);
}


/* PLUS / MINUS */

.faq-icon {
    position: relative;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    border: 1px solid rgba(139, 101, 53, 0.3);

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


.faq-icon::before,
.faq-icon::after {
    content: "";

    position: absolute;
    left: 50%;
    top: 50%;

    width: 14px;
    height: 1.5px;

    background: var(--brown);

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

    transition: transform 0.3s ease;
}


.faq-icon::after {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}


/* ACTIVE ICON */

.faq-item.active .faq-icon {
    background: var(--brown);
}


.faq-item.active .faq-icon::before,
.faq-item.active .faq-icon::after {
    background: #fff8ee;
}


.faq-item.active .faq-icon::after {
    transform:
        translate(-50%, -50%)
        rotate(0deg);
}


/* =========================================================
   ANSWER
========================================================= */

.faq-answer {
    max-height: 0;

    overflow: hidden;

    transition: max-height 0.45s ease;
}


.faq-answer-inner {
    padding:
        0
        70px
        30px
        75px;
}


.faq-answer p {
    max-width: 720px;

    font-size: 14px;
    line-height: 1.85;

    color: rgba(55, 62, 46, 0.68);
}

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

.site-footer {
    position: relative;
    background: #273426;
    color: #fff8ee;
    overflow: hidden;
}


.footer-container {
    width: min(92%, 1400px);
    margin: 0 auto;
}


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

.footer-top {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1.7fr 0.7fr 1fr 0.8fr;
    gap: 75px;

    padding: 100px 0 80px;
}


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

.footer-brand {
    max-width: 470px;
}


.footer-logo-text {
    font-size: clamp(34px, 3.5vw, 55px);
    font-weight: 900;

    letter-spacing: -0.05em;

    color: var(--gold);
}


.footer-tagline {
    margin-top: 8px;

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

    text-transform: uppercase;
    letter-spacing: 0.12em;

    color: rgba(255, 248, 238, 0.72);
}


.footer-description {
    margin-top: 28px;

    max-width: 430px;

    font-size: 14px;
    line-height: 1.85;

    color: rgba(255, 248, 238, 0.55);
}


.footer-company {
    display: inline-block;

    margin-top: 28px;
    padding-top: 18px;

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

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

    text-transform: uppercase;
    letter-spacing: 0.12em;

    color: var(--gold);
}


/* =========================================================
   COLUMNS
========================================================= */

.footer-heading {
    display: inline-block;

    margin-bottom: 28px;

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

    text-transform: uppercase;
    letter-spacing: 0.15em;

    color: var(--gold);
}


.footer-column ul {
    list-style: none;
    margin: 0;
    padding: 0;
}


.footer-column ul li {
    margin-bottom: 14px;
}


.footer-column a {
    text-decoration: none;

    font-size: 14px;

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

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


.footer-column a:hover {
    color: var(--gold);
}


/* =========================================================
   CONTACT
========================================================= */

.footer-contact-item {
    margin-bottom: 22px;
}


.footer-contact-item > span {
    display: block;

    margin-bottom: 7px;

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

    text-transform: uppercase;
    letter-spacing: 0.12em;

    color: rgba(255, 248, 238, 0.38);
}


.footer-contact-item a,
.footer-contact-item p {
    font-size: 13px;
    line-height: 1.55;

    color: rgba(255, 248, 238, 0.72);
}


/* =========================================================
   SOCIAL
========================================================= */

.footer-social-list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}


.footer-social-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 12px 0;
}


.footer-social-list a span {
    font-size: 13px;

    transition: transform 0.3s ease;
}


.footer-social-list a:hover span {
    transform: rotate(45deg);
}


/* =========================================================
   BIG WORD
========================================================= */

.footer-big-word {
    position: relative;

    margin-left: -8px;
    margin-bottom: -28px;

    font-size: clamp(90px, 15vw, 230px);
    font-weight: 900;
    line-height: 0.8;

    letter-spacing: -0.08em;

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

    user-select: none;
    pointer-events: none;
}


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

.footer-bottom {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;

    padding: 27px 0 32px;

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


.footer-bottom p {
    font-size: 10px;
    letter-spacing: 0.04em;

    color: rgba(255, 248, 238, 0.42);
}


.footer-bottom-links {
    display: flex;
    gap: 25px;
}


.footer-bottom-links a {
    text-decoration: none;

    font-size: 10px;

    color: rgba(255, 248, 238, 0.42);

    transition: color 0.3s ease;
}


.footer-bottom-links a:hover {
    color: var(--gold);
}

/* =========================================================
   PULPBASE — CONCEPTUAL ENQUIRY SECTION
========================================================= */

.contact-art-section {
    position: relative;

    padding: 145px 0 130px;

    overflow: hidden;

    background:
        linear-gradient(
            115deg,
            #eee5d5 0%,
            #f8f4ec 52%,
            #ece3d3 100%
        );
}


/* giant editorial word */

.contact-art-word {
    position: absolute;

    left: 50%;
    top: 70px;

    transform: translateX(-50%);

    font-size: clamp(120px, 17vw, 270px);

    line-height: 0.8;

    font-weight: 900;

    letter-spacing: -0.075em;

    color:
        rgba(58, 79, 56, 0.045);

    white-space: nowrap;

    pointer-events: none;
}


/* decorative circles */

.contact-art-ring {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.contact-art-ring-one {
    width: 440px;
    height: 440px;

    left: -250px;
    top: 100px;

    border:
        1px solid
        rgba(76, 92, 67, 0.11);
}


.contact-art-ring-two {
    width: 620px;
    height: 620px;

    right: -340px;
    bottom: -250px;

    border:
        1px solid
        rgba(166, 124, 69, 0.13);
}


/* layout */

.contact-art-container {
    position: relative;
    z-index: 2;

    width:
        min(1180px, calc(100% - 44px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    gap: 85px;

    align-items: center;
}


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

.contact-art-intro {
    position: relative;

    padding-left: 28px;
}


.contact-art-intro::before {
    content: "";

    position: absolute;

    left: 0;
    top: 2px;
    bottom: 0;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            #a87b43,
            rgba(168, 123, 67, 0)
        );
}


.contact-art-kicker {
    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 25px;
}


.contact-art-line {
    width: 40px;
    height: 1px;

    background: #9b7445;
}


.contact-art-kicker span:last-child {
    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    color: #8e6b40;
}


.contact-art-intro h2 {
    max-width: 570px;

    font-size:
        clamp(48px, 5.6vw, 78px);

    line-height: 0.92;

    letter-spacing: -0.055em;

    color: #273d2b;
}


.contact-art-intro h2 span {
    display: block;

    color: #9c7546;
}


.contact-art-intro-text {
    max-width: 500px;

    margin-top: 30px;
    margin-bottom: 46px;

    font-size: 13px;
    line-height: 1.9;

    color: #72756c;
}


/* step notes */

.contact-art-note {
    max-width: 460px;

    display: grid;

    grid-template-columns: 50px 1fr;

    gap: 10px;

    padding: 17px 0;

    border-top:
        1px solid
        rgba(55, 72, 52, 0.12);
}


.contact-art-note:last-of-type {
    border-bottom:
        1px solid
        rgba(55, 72, 52, 0.12);
}


.contact-art-note-number {
    font-size: 10px;
    font-weight: 800;

    letter-spacing: 0.1em;

    color: #ac8452;
}


.contact-art-note p {
    max-width: 290px;

    font-size: 11px;
    line-height: 1.7;

    color: #656c63;
}


/* bottom statement */

.contact-art-statement {
    margin-top: 42px;

    display: flex;

    align-items: flex-end;

    gap: 22px;
}


.contact-art-statement > span {
    writing-mode: vertical-rl;

    transform: rotate(180deg);

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

    letter-spacing: 0.25em;

    color: #a77e4d;
}


.contact-art-statement p {
    font-size: 24px;
    line-height: 1.08;

    letter-spacing: -0.03em;

    color: #314834;
}


/* =========================================================
   FORM SHELL
========================================================= */

.contact-art-form-shell {
    position: relative;

    margin-top: 65px;

    padding:
        48px 48px 42px;

    background: #2a422f;

    border-radius:
        38px 8px 38px 8px;

    box-shadow:
        0 38px 100px
        rgba(39, 54, 40, 0.20);
}


/* floating offset border */

.contact-art-form-shell::before {
    content: "";

    position: absolute;

    inset:
        -14px 14px 14px -14px;

    border:
        1px solid
        rgba(163, 124, 73, 0.40);

    border-radius:
        38px 8px 38px 8px;

    pointer-events: none;
}


/* little top shape */

.contact-art-form-shell::after {
    content: "";

    position: absolute;

    width: 68px;
    height: 68px;

    right: 30px;
    top: -34px;

    border-radius:
        50% 50% 5px 50%;

    background: #b38751;

    transform: rotate(20deg);
}


/* header */

.contact-art-form-top {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 40px;

    padding-bottom: 23px;

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


.contact-art-form-top span {
    display: block;

    margin-bottom: 8px;

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

    letter-spacing: 0.17em;

    text-transform: uppercase;

    color: #cfa96f;
}


.contact-art-form-top h3 {
    max-width: 420px;

    font-size: 31px;

    letter-spacing: -0.035em;

    color: #ffffff;
}


.contact-art-form-index {
    font-size: 11px;
    font-weight: 800;

    color:
        rgba(255,255,255,0.30);
}


/* form */

.contact-art-form {
    position: relative;
    z-index: 2;
}


.contact-art-grid {
    display: grid;

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

    column-gap: 24px;
    row-gap: 28px;
}


/* floating-label field */

.contact-art-field {
    position: relative;
}


.contact-art-field-full {
    grid-column:
        1 / -1;
}


.contact-art-field input,
.contact-art-field textarea {
    width: 100%;

    padding:
        18px 0 10px;

    border: none;

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

    border-radius: 0;

    outline: none;

    background: transparent;

    color: #ffffff;

    font-size: 13px;

    font-family: inherit;

    transition:
        border-color .25s ease;
}


.contact-art-field textarea {
    min-height: 95px;

    resize: vertical;
}


.contact-art-field label {
    position: absolute;

    left: 0;
    top: 18px;

    pointer-events: none;

    font-size: 11px;

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

    transition:
        top .2s ease,
        font-size .2s ease,
        color .2s ease;
}


.contact-art-field input:focus,
.contact-art-field textarea:focus {
    border-color: #cfaa73;
}


.contact-art-field input:focus + label,
.contact-art-field input:not(:placeholder-shown) + label,
.contact-art-field textarea:focus + label,
.contact-art-field textarea:not(:placeholder-shown) + label {
    top: -3px;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;

    color: #d1ac76;
}


/* form footer */

.contact-art-bottom {
    display: flex;

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

    gap: 25px;

    margin-top: 42px;
}


.contact-art-bottom p {
    max-width: 220px;

    font-size: 9px;
    line-height: 1.6;

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


.contact-art-submit {
    min-width: 205px;
    min-height: 58px;

    padding:
        8px 8px 8px 22px;

    display: flex;

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

    gap: 25px;

    border: none;

    border-radius: 999px;

    cursor: pointer;

    background: #f1e4cd;

    color: #2a402e;

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

    letter-spacing: .08em;

    text-transform: uppercase;

    transition:
        transform .25s ease,
        background .25s ease;
}


.contact-art-submit:hover {
    transform: translateY(-3px);

    background: #ffffff;
}


.contact-art-submit-circle {
    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 50%;

    background: #ad8150;

    color: #ffffff;

    font-size: 15px;

    transition:
        transform .25s ease;
}


.contact-art-submit:hover
.contact-art-submit-circle {
    transform: rotate(45deg);
}


/* side tag */

.contact-art-card-tag {
    position: absolute;

    right: -48px;
    bottom: 92px;

    transform: rotate(90deg);

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

    letter-spacing: .19em;

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

.enquiry-alert {
    position: relative;
    z-index: 3;

    margin-bottom: 28px;
    padding: 14px 17px;

    border-radius: 10px;

    font-size: 11px;
    line-height: 1.6;
}

.enquiry-alert strong {
    font-weight: 800;
}

.enquiry-alert-success {
    background: rgba(219, 239, 218, 0.12);

    border:
        1px solid
        rgba(191, 224, 188, 0.30);

    color: #dcebd9;
}

.enquiry-alert-error {
    background: rgba(255, 210, 204, 0.10);

    border:
        1px solid
        rgba(255, 196, 187, 0.24);

    color: #ffd8d1;
}

/* =========================================================
   DYNAMIC CATEGORY STATES
========================================================= */

.category-no-image {
    width: 100%;
    height: 100%;

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

    position: relative;
    z-index: 2;
}

.category-no-image span {
    font-size: 11px;
    font-weight: 700;

    letter-spacing: 0.18em;

    color: rgba(47, 74, 50, 0.35);
}


/* EMPTY CATEGORY SECTION */

.categories-empty {
    max-width: 620px;

    margin: 0 auto;

    padding: 60px 30px;

    text-align: center;

    border-radius: 20px;

    background: #f5f1e9;

    border:
        1px solid
        rgba(60, 70, 55, 0.08);
}

.categories-empty > span {
    display: block;

    margin-bottom: 12px;

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

    letter-spacing: 0.18em;

    color: #a77c48;
}

.categories-empty h3 {
    font-size: 24px;

    color: #2e4931;
}

.categories-empty p {
    margin-top: 9px;

    font-size: 11px;
    line-height: 1.7;

    color: #8b8d87;
}

/* =========================================================
   PRODUCTS CATEGORY PAGE
========================================================= */

.product-categories-hero {
    position: relative;
    overflow: hidden;

    padding:
        185px 0
        110px;

    background: linear-gradient(
            135deg,
            #fdead2 0%,
            #f8e3c7 48%,
            #f2ddc1 100%
        );
}


.product-categories-bg-word {
    position: absolute;

    left: 50%;
    top: 50%;

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

    font-size:
        clamp(
            95px,
            15vw,
            220px
        );

    font-weight: 800;

    line-height: .8;

    letter-spacing: -.07em;

    white-space: nowrap;

    color:
        rgba(
            46,
            73,
            49,
            .045
        );

    pointer-events: none;
}


.product-categories-hero-container {
    position: relative;
    z-index: 2;

    width:
        min(
            1240px,
            calc(100% - 60px)
        );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 80px;

    align-items: end;
}


.product-categories-hero-content {
    max-width: 820px;
}


.product-categories-hero-content h1 {
    margin-top: 16px;

    font-size:
        clamp(
            54px,
            6vw,
            88px
        );

    line-height: .96;

    letter-spacing: -.05em;

    font-weight: 500;

    color: #2e4931;
}


.product-categories-hero-content h1 span {
    display: block;

    color: #9a7547;
}


.product-categories-hero-content p {
    max-width: 650px;

    margin-top: 28px;

    font-size: 16px;

    line-height: 1.75;

    color: #70766c;
}


.product-categories-hero-side {
    padding-left: 30px;

    border-left:
        1px solid
        rgba(
            46,
            73,
            49,
            .18
        );
}


.product-categories-hero-side > span {
    font-size: 10px;

    font-weight: 700;

    letter-spacing: .16em;

    color: #9a7547;
}


.product-categories-hero-side p {
    margin-top: 13px;

    font-size: 14px;

    line-height: 1.7;

    color: #677067;
}


.products-category-page {
    padding-top: 110px;
    padding-bottom: 120px;
}


.products-category-page .categories-grid {
    margin-top: 52px;
}


/* RESPONSIVE */

@media (max-width: 820px) {

    .product-categories-hero {
        padding:
            150px 0
            85px;
    }


    .product-categories-hero-container {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .product-categories-hero-side {
        max-width: 420px;
    }

}


@media (max-width: 600px) {

    .product-categories-hero-container {
        width:
            calc(
                100% - 32px
            );
    }


    .product-categories-hero-content h1 {
        font-size: 47px;
    }


    .product-categories-hero-content p {
        font-size: 14px;
    }


    .products-category-page {
        padding-top: 75px;
        padding-bottom: 85px;
    }

}

/* =========================================================
   CATEGORY PRODUCTS PAGE
========================================================= */

.cp-hero {
    position: relative;
    overflow: hidden;
    padding: 175px 0 105px;
    background: linear-gradient(
            135deg,
            #fdead2 0%,
            #f8e3c7 48%,
            #f2ddc1 100%
        );
}

.cp-hero-container {
    position: relative;
    z-index: 3;
    width: min(1240px, calc(100% - 60px));
    margin: 0 auto;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        240px;
    gap: 90px;
    align-items: end;
}

.cp-hero-bg-word {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    font-size: clamp(90px, 14vw, 210px);
    font-weight: 800;
    line-height: .8;
    letter-spacing: -.07em;
    white-space: nowrap;
    color: rgba(46, 73, 49, .04);
    pointer-events: none;
}

.cp-hero-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(151, 114, 68, .18);
}

.cp-hero-orbit-one {
    width: 480px;
    height: 480px;
    right: -220px;
    top: -190px;
}

.cp-hero-orbit-two {
    width: 220px;
    height: 220px;
    right: 150px;
    bottom: -120px;
}

.cp-hero-content {
    max-width: 850px;
}

.cp-back-link {
    display: inline-flex;
    margin-bottom: 42px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7d6647;
}

.cp-back-link:hover {
    color: #2e4931;
}

.cp-hero-content h1 {
    margin-top: 15px;
    font-size: clamp(58px, 7vw, 100px);
    line-height: .92;
    letter-spacing: -.055em;
    font-weight: 500;
    color: #2e4931;
}

.cp-hero-content p {
    max-width: 650px;
    margin-top: 28px;
    font-size: 16px;
    line-height: 1.75;
    color: #70766d;
}

.cp-hero-meta {
    padding-left: 28px;
    border-left: 1px solid rgba(46, 73, 49, .16);
}

.cp-meta-label {
    display: block;
    margin-bottom: 12px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #a17d4d;
}

.cp-hero-meta strong {
    display: block;
    font-size: 56px;
    line-height: 1;
    font-weight: 500;
    color: #2e4931;
}

.cp-meta-text {
    display: block;
    margin-top: 7px;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8b8f87;
}

.cp-meta-line {
    width: 52px;
    height: 1px;
    margin: 28px 0 17px;
    background: #a17d4d;
}

.cp-hero-meta p {
    font-size: 11px;
    line-height: 1.65;
    color: #777d74;
}


/* PRODUCTS */

.cp-products-section {
    padding: 110px 0 125px;
    background: #fbfaf6;
}

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

.cp-section-header {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    align-items: end;
    margin-bottom: 50px;
}

.cp-section-header > div > span {
    display: block;
    margin-bottom: 9px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #a17d4d;
}

.cp-section-header h2 {
    font-size: clamp(42px, 5vw, 68px);
    line-height: .95;
    letter-spacing: -.045em;
    font-weight: 500;
    color: #2e4931;
}

.cp-section-header h2 em {
    display: block;
    font-style: normal;
    color: #9a7547;
}

.cp-section-header > p {
    max-width: 330px;
    font-size: 12px;
    line-height: 1.75;
    color: #81857d;
}

.cp-products-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.cp-product-card {
    position: relative;
    display: block;
    overflow: hidden;
    min-width: 0;
    padding: 18px;
    background: #ffffff;
    border: 1px solid rgba(59, 72, 55, .08);
    color: inherit;
    transition:
        transform .45s ease,
        box-shadow .45s ease,
        border-color .45s ease;
}

.cp-product-card:hover {
    transform: translateY(-7px);
    border-color: rgba(154, 117, 71, .25);
    box-shadow: 0 26px 60px rgba(53, 63, 48, .09);
}

.cp-product-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.cp-product-index {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .13em;
    color: #a17d4d;
}

.cp-product-label {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .16em;
    color: #a0a39c;
}

.cp-product-visual {
    position: relative;
    height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f3eee5;
}

.cp-product-circle {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(180, 151, 109, .12);
    transform: scale(.86);
    transition: transform .5s ease;
}

.cp-product-card:hover .cp-product-circle {
    transform: scale(1.05);
}

.cp-product-visual img {
    position: relative;
    z-index: 2;
    width: 82%;
    height: 82%;
    object-fit: contain;
    transition: transform .55s ease;
}

.cp-product-card:hover .cp-product-visual img {
    transform: translateY(-5px) scale(1.045);
}

.cp-product-placeholder {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-product-placeholder span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .18em;
    color: rgba(46, 73, 49, .28);
}

.cp-product-content {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;
    gap: 20px;
    align-items: end;
    padding: 23px 3px 17px;
}

.cp-product-copy h3 {
    font-size: 23px;
    line-height: 1.15;
    letter-spacing: -.025em;
    color: #2e4931;
}

.cp-product-copy p {
    margin-top: 9px;
    font-size: 11px;
    line-height: 1.7;
    color: #82867e;
}

.cp-product-arrow {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ede5d8;
    color: #745a3a;
    transition:
        transform .35s ease,
        background .35s ease,
        color .35s ease;
}

.cp-product-card:hover .cp-product-arrow {
    transform: rotate(45deg);
    background: #2e4931;
    color: #ffffff;
}

.cp-product-bottom-line {
    width: 100%;
    height: 1px;
    background: rgba(60, 70, 56, .08);
}

.cp-product-view {
    display: block;
    padding-top: 13px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9a7547;
}


/* EMPTY */

.cp-empty,
.cp-invalid {
    background: #f5f0e6;
}

.cp-invalid {
    min-height: 75vh;
    display: flex;
    align-items: center;
    padding: 160px 30px 90px;
}

.cp-invalid-inner,
.cp-empty {
    width: min(760px, 100%);
    margin: 0 auto;
    text-align: center;
}

.cp-invalid-inner > span,
.cp-empty > span {
    display: block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .17em;
    color: #a17d4d;
}

.cp-invalid-inner h1,
.cp-empty h3 {
    margin-top: 12px;
    font-size: clamp(36px, 5vw, 60px);
    color: #2e4931;
}

.cp-invalid-inner p,
.cp-empty p {
    max-width: 520px;
    margin: 15px auto 0;
    font-size: 13px;
    line-height: 1.7;
    color: #80847c;
}

.cp-invalid-inner a,
.cp-empty a {
    display: inline-flex;
    margin-top: 25px;
    font-size: 10px;
    font-weight: 700;
    color: #785d3b;
}

.cp-empty {
    padding: 65px 30px;
    background: #f1ece2;
}


/* BRAND STRIP */

.cp-brand-strip {
    overflow: hidden;
    padding: 20px 0;
    background: #2e4931;
}

.cp-brand-strip-inner {
    width: max-content;
    min-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 0 30px;
}

.cp-brand-strip span {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .76);
}

.cp-brand-strip i {
    width: 5px;
    height: 5px;
    display: block;
    border-radius: 50%;
    background: #c79f6a;
}

/* =========================================================
   PRODUCT DETAIL PAGE
========================================================= */

.pd-hero {
    position: relative;
    overflow: hidden;

    min-height: 850px;

    padding:
        160px 0
        105px;

    background: #f5f0e6;
}


.pd-container {
    position: relative;
    z-index: 3;

    width:
        min(
            1240px,
            calc(100% - 60px)
        );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.04fr)
        minmax(0, .96fr);

    gap: 95px;

    align-items: center;
}


.pd-bg-word {
    position: absolute;

    left: 50%;
    bottom: -35px;

    transform:
        translateX(-50%);

    font-size:
        clamp(
            110px,
            18vw,
            280px
        );

    line-height: .75;

    font-weight: 800;

    letter-spacing: -.075em;

    color:
        rgba(
            46,
            73,
            49,
            .035
        );

    pointer-events: none;

    white-space: nowrap;
}


.pd-shape {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            157,
            120,
            75,
            .16
        );
}


.pd-shape-one {
    width: 520px;
    height: 520px;

    left: -280px;
    top: 70px;
}


.pd-shape-two {
    width: 330px;
    height: 330px;

    right: -160px;
    top: -90px;
}


/* =========================================================
   PRODUCT VISUAL
========================================================= */

.pd-visual-column {
    min-width: 0;
}


.pd-visual-index {
    margin-bottom: 16px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .16em;

    color: #9a7547;
}


.pd-image-stage {
    position: relative;

    min-height: 600px;

    display: flex;

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

    overflow: hidden;

    background:
        #eee7da;

    border:
        1px solid
        rgba(
            78,
            82,
            69,
            .06
        );
}


.pd-image-circle {
    position: absolute;

    width: 410px;
    height: 410px;

    border-radius: 50%;

    background:
        rgba(
            177,
            143,
            98,
            .12
        );
}


.pd-image-ring {
    position: absolute;

    width: 490px;
    height: 490px;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            124,
            99,
            65,
            .12
        );
}


.pd-product-image {
    position: relative;
    z-index: 3;

    width: 80%;
    height: 500px;

    object-fit: contain;

    transition:
        transform .65s ease;
}


.pd-image-stage:hover
.pd-product-image {
    transform:
        scale(1.035)
        translateY(-4px);
}


.pd-product-placeholder {
    position: relative;
    z-index: 3;

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

    display: flex;

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


.pd-product-placeholder span {
    font-size: 12px;

    font-weight: 700;

    letter-spacing: .2em;

    color:
        rgba(
            46,
            73,
            49,
            .28
        );
}


.pd-floating-label {
    position: absolute;
    z-index: 4;

    right: 22px;
    bottom: 24px;

    padding:
        15px 18px;

    background: #2e4931;

    color: #ffffff;
}


.pd-floating-label span {
    display: block;

    font-size: 7px;

    letter-spacing: .16em;

    color:
        rgba(
            255,
            255,
            255,
            .62
        );
}


.pd-floating-label strong {
    display: block;

    margin-top: 4px;

    font-size: 10px;

    letter-spacing: .08em;
}


.pd-visual-footer {
    display: flex;

    align-items: center;

    gap: 16px;

    margin-top: 16px;
}


.pd-visual-footer span {
    font-size: 8px;

    font-weight: 700;

    letter-spacing: .13em;

    text-transform: uppercase;

    color: #8c8d85;
}


.pd-visual-footer i {
    width: 42px;
    height: 1px;

    background: #b28a59;
}


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

.pd-content-column {
    max-width: 540px;
}


.pd-breadcrumb {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 9px;

    margin-bottom: 36px;

    font-size: 9px;

    font-weight: 600;

    letter-spacing: .08em;

    text-transform: uppercase;
}


.pd-breadcrumb a {
    color: #84887f;
}


.pd-breadcrumb a:hover {
    color: #2e4931;
}


.pd-breadcrumb span {
    color: #b9b8b1;
}


.pd-category-label {
    display: inline-block;

    margin-bottom: 13px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .16em;

    text-transform: uppercase;

    color: #9a7547;
}


.pd-content-column h1 {
    font-size:
        clamp(
            50px,
            5.3vw,
            78px
        );

    line-height: .96;

    letter-spacing: -.05em;

    font-weight: 500;

    color: #2e4931;
}


.pd-lead {
    margin-top: 24px;

    font-size: 16px;

    line-height: 1.75;

    color: #6d746b;
}


.pd-divider {
    width: 100%;
    height: 1px;

    margin:
        34px 0;

    background:
        rgba(
            64,
            72,
            59,
            .12
        );
}


.pd-description-block > span {
    display: block;

    margin-bottom: 11px;

    font-size: 8px;

    font-weight: 700;

    letter-spacing: .17em;

    text-transform: uppercase;

    color: #9b7548;
}


.pd-description-block p {
    font-size: 13px;

    line-height: 1.85;

    color: #757b73;
}


.pd-points {
    display: grid;

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

    gap: 14px;

    margin-top: 34px;
}


.pd-point {
    display: grid;

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

    gap: 13px;

    padding: 17px;

    background:
        rgba(
            255,
            255,
            255,
            .48
        );

    border:
        1px solid
        rgba(
            62,
            72,
            57,
            .07
        );
}


.pd-point > span {
    font-size: 8px;

    font-weight: 700;

    color: #a27d4e;
}


.pd-point strong {
    display: block;

    font-size: 11px;

    color: #2e4931;
}


.pd-point p {
    margin-top: 6px;

    font-size: 9px;

    line-height: 1.55;

    color: #878a84;
}


.pd-action-area {
    margin-top: 38px;
}


.pd-enquiry-button {
    width: 100%;

    display: flex;

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

    gap: 30px;

    padding:
        13px 14px
        13px 22px;

    background: #2e4931;

    color: #ffffff;

    transition:
        transform .3s ease,
        background .3s ease;
}


.pd-enquiry-button:hover {
    transform:
        translateY(-2px);

    background: #263e29;
}


.pd-enquiry-button > span {
    font-size: 11px;

    font-weight: 700;

    letter-spacing: .06em;

    text-transform: uppercase;
}


.pd-enquiry-button i {
    width: 42px;
    height: 42px;

    display: flex;

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

    border-radius: 50%;

    background: #d2ad79;

    color: #2e4931;

    font-style: normal;

    transition:
        transform .35s ease;
}


.pd-enquiry-button:hover i {
    transform:
        rotate(45deg);
}


.pd-action-area > p {
    margin-top: 13px;

    font-size: 9px;

    line-height: 1.55;

    color: #90938d;
}


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

.pd-strip {
    overflow: hidden;

    padding:
        20px 0;

    background: #2e4931;
}


.pd-strip-inner {
    width: max-content;
    min-width: 100%;

    display: flex;

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

    gap: 28px;

    padding:
        0 30px;
}


.pd-strip span {
    font-size: 8px;

    font-weight: 700;

    letter-spacing: .18em;

    color:
        rgba(
            255,
            255,
            255,
            .72
        );
}


.pd-strip i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #c8a16d;
}


/* =========================================================
   NOT FOUND
========================================================= */

.pd-not-found {
    min-height: 75vh;

    display: flex;

    align-items: center;

    padding:
        150px 30px
        90px;

    background: #f5f0e6;
}


.pd-not-found-inner {
    width:
        min(
            700px,
            100%
        );

    margin: 0 auto;

    text-align: center;
}


.pd-not-found-inner > span {
    display: block;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .17em;

    color: #a17d4d;
}


.pd-not-found-inner h1 {
    margin-top: 12px;

    font-size:
        clamp(
            40px,
            6vw,
            66px
        );

    color: #2e4931;
}


.pd-not-found-inner p {
    max-width: 500px;

    margin:
        15px auto
        0;

    font-size: 13px;

    line-height: 1.7;

    color: #81847e;
}


.pd-not-found-inner a {
    display: inline-flex;

    margin-top: 25px;

    font-size: 10px;

    font-weight: 700;

    color: #795e3d;
}

/* =========================================================
   PRODUCT ENQUIRY PAGE
========================================================= */

.pe-section {
    position: relative;
    overflow: hidden;
    min-height: 100vh;

    padding:
        155px 0
        110px;

    background: #f4efe5;
}


.pe-container {
    position: relative;
    z-index: 3;

    width:
        min(
            1240px,
            calc(100% - 60px)
        );

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, .88fr)
        minmax(0, 1.12fr);

    gap: 95px;

    align-items: center;
}


.pe-bg-word {
    position: absolute;

    left: 50%;
    top: 50%;

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

    font-size:
        clamp(
            120px,
            19vw,
            300px
        );

    line-height: .75;

    font-weight: 800;

    letter-spacing: -.08em;

    color:
        rgba(
            46,
            73,
            49,
            .035
        );

    white-space: nowrap;

    pointer-events: none;
}


.pe-ring {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(
            156,
            118,
            71,
            .16
        );
}


.pe-ring-one {
    width: 470px;
    height: 470px;

    left: -240px;
    top: 150px;
}


.pe-ring-two {
    width: 340px;
    height: 340px;

    right: -180px;
    bottom: -100px;
}


/* LEFT */

.pe-left {
    max-width: 510px;
}


.pe-back {
    display: inline-flex;

    margin-bottom: 42px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .1em;

    text-transform: uppercase;

    color: #795e3d;
}


.pe-eyebrow {
    display: block;

    margin-bottom: 12px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: .17em;

    text-transform: uppercase;

    color: #a17b4a;
}


.pe-left h1 {
    font-size:
        clamp(
            52px,
            5.7vw,
            80px
        );

    line-height: .94;

    letter-spacing: -.055em;

    font-weight: 500;

    color: #2e4931;
}


.pe-left h1 span {
    display: block;

    color: #9a7547;
}


.pe-intro {
    margin-top: 27px;

    max-width: 470px;

    font-size: 14px;

    line-height: 1.8;

    color: #71776e;
}


/* SELECTED PRODUCT */

.pe-product-card {
    display: grid;

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

    gap: 20px;

    align-items: center;

    margin-top: 40px;

    padding:
        14px;

    background:
        rgba(
            255,
            255,
            255,
            .58
        );

    border:
        1px solid
        rgba(
            60,
            70,
            56,
            .09
        );
}


.pe-product-image {
    width: 100px;
    height: 100px;

    display: flex;

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

    overflow: hidden;

    background: #ebe3d5;
}


.pe-product-image img {
    width: 88%;
    height: 88%;

    object-fit: contain;
}


.pe-product-image > span {
    font-size: 7px;

    font-weight: 700;

    letter-spacing: .16em;

    color:
        rgba(
            46,
            73,
            49,
            .32
        );
}


.pe-product-info > span {
    display: block;

    margin-bottom: 5px;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: .14em;

    text-transform: uppercase;

    color: #9d7a4d;
}


.pe-product-info h2 {
    font-size: 20px;

    line-height: 1.15;

    color: #2e4931;
}


.pe-product-info p {
    margin-top: 6px;

    font-size: 10px;

    color: #868a82;
}


.pe-brand-note {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 30px;
}


.pe-brand-note > span {
    font-size: 8px;

    font-weight: 700;

    letter-spacing: .16em;

    color: #9b7748;
}


.pe-brand-note i {
    width: 38px;
    height: 1px;

    background: #a98658;
}


.pe-brand-note p {
    font-size: 8px;

    line-height: 1.5;

    text-transform: uppercase;

    letter-spacing: .08em;

    color: #91958d;
}


/* FORM */

.pe-form-wrap {
    position: relative;
}


.pe-form-decoration {
    position: absolute;

    left: -14px;
    top: 16px;

    width: 100%;
    height: 100%;

    border:
        1px solid
        rgba(
            161,
            125,
            77,
            .5
        );

    pointer-events: none;
}


.pe-form-card {
    position: relative;
    z-index: 2;

    padding:
        42px;

    background: #2e4931;

    box-shadow:
        0 28px 70px
        rgba(
            39,
            52,
            39,
            .14
        );
}


.pe-form-top {
    display: flex;

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

    gap: 20px;

    margin-bottom: 34px;
}


.pe-form-top span {
    font-size: 8px;

    font-weight: 700;

    letter-spacing: .17em;

    color: #d3ae7c;
}


.pe-form-top p {
    font-size: 8px;

    color:
        rgba(
            255,
            255,
            255,
            .5
        );
}


.pe-form-row {
    display: grid;

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

    gap: 22px;
}


.pe-field {
    position: relative;

    margin-bottom: 28px;
}


.pe-field input,
.pe-field textarea {
    width: 100%;

    border: 0;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            .2
        );

    outline: 0;

    padding:
        16px 0
        10px;

    background: transparent;

    color: #ffffff;

    font: inherit;

    font-size: 13px;

    transition:
        border-color .3s ease;
}


.pe-field textarea {
    resize: vertical;

    min-height: 115px;
}


.pe-field input:focus,
.pe-field textarea:focus {
    border-color: #d4ad79;
}


.pe-field label {
    position: absolute;

    left: 0;
    top: 16px;

    font-size: 10px;

    color:
        rgba(
            255,
            255,
            255,
            .48
        );

    pointer-events: none;

    transition:
        all .25s ease;
}


.pe-field input:focus + label,
.pe-field input:not(:placeholder-shown) + label,
.pe-field textarea:focus + label,
.pe-field textarea:not(:placeholder-shown) + label {

    top: -3px;

    font-size: 7px;

    letter-spacing: .1em;

    text-transform: uppercase;

    color: #d5ad79;
}


.pe-readonly-field input {
    color:
        rgba(
            255,
            255,
            255,
            .62
        );
}


.pe-submit {
    width: 100%;

    border: 0;

    display: flex;

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

    gap: 30px;

    padding:
        13px
        14px
        13px
        20px;

    background: #d0aa76;

    color: #263d29;

    cursor: pointer;

    transition:
        transform .3s ease,
        background .3s ease;
}


.pe-submit:hover {
    transform: translateY(-2px);

    background: #ddba87;
}


.pe-submit > span {
    font-size: 10px;

    font-weight: 700;

    letter-spacing: .07em;

    text-transform: uppercase;
}


.pe-submit i {
    width: 40px;
    height: 40px;

    display: flex;

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

    border-radius: 50%;

    background: #2e4931;

    color: #ffffff;

    font-style: normal;

    transition:
        transform .35s ease;
}


.pe-submit:hover i {
    transform: rotate(45deg);
}


.pe-form-note {
    margin-top: 14px;

    font-size: 8px;

    line-height: 1.55;

    color:
        rgba(
            255,
            255,
            255,
            .38
        );
}


/* ALERTS */

.pe-alert {
    margin-bottom: 25px;

    padding:
        13px 15px;

    font-size: 10px;

    line-height: 1.6;
}


.pe-alert-success {
    background:
        rgba(
            192,
            219,
            177,
            .14
        );

    border:
        1px solid
        rgba(
            192,
            219,
            177,
            .3
        );

    color: #d8ebcf;
}


.pe-alert-error {
    background:
        rgba(
            226,
            161,
            143,
            .12
        );

    border:
        1px solid
        rgba(
            226,
            161,
            143,
            .25
        );

    color: #f0c7bc;
}


/* INVALID */

.pe-invalid {
    min-height: 75vh;

    display: flex;

    align-items: center;

    padding:
        150px 30px
        90px;

    background: #f4efe5;
}


.pe-invalid-inner {
    width:
        min(
            700px,
            100%
        );

    margin: auto;

    text-align: center;
}


.pe-invalid-inner > span {
    font-size: 9px;

    font-weight: 700;

    letter-spacing: .16em;

    color: #9d7949;
}


.pe-invalid-inner h1 {
    margin-top: 12px;

    font-size:
        clamp(
            40px,
            6vw,
            65px
        );

    color: #2e4931;
}


.pe-invalid-inner p {
    margin-top: 14px;

    font-size: 13px;

    color: #858881;
}


.pe-invalid-inner a {
    display: inline-flex;

    margin-top: 24px;

    font-size: 10px;

    font-weight: 700;

    color: #765a39;
}

/* =========================================================
   HEADER PRODUCT DROPDOWN
========================================================= */

.nav-dropdown {
    position: relative;
}


.nav-dropdown-trigger {
    border: 0;
    padding: 0;

    display: flex;
    align-items: center;
    gap: 7px;

    background: transparent;

    font: inherit;

    cursor: pointer;
}


.nav-dropdown-icon {
    display: inline-flex;

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

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

    transition:
        transform .3s ease;
}


.nav-dropdown:hover
.nav-dropdown-icon {
    transform: rotate(45deg);
}


.nav-dropdown.active
.nav-dropdown-trigger {
    color: #9b7547;
}


/* DROPDOWN */

.nav-dropdown-menu {
    position: absolute;

    top: calc(100% + 23px);
    left: 50%;

    width: 340px;

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

    padding: 10px;

    background: #f5f0e6;

    border:
        1px solid
        rgba(66, 72, 58, .10);

    box-shadow:
        0 24px 60px
        rgba(39, 52, 39, .14);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease,
        transform .25s ease;
}


.nav-dropdown:hover
.nav-dropdown-menu,
.nav-dropdown:focus-within
.nav-dropdown-menu {
    opacity: 1;
    visibility: visible;

    pointer-events: auto;

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


/* invisible bridge so dropdown doesn't close
   while mouse moves from Products to menu */

.nav-dropdown-menu::before {
    content: "";

    position: absolute;

    left: 0;
    bottom: 100%;

    width: 100%;
    height: 24px;
}


/* HEADER */

.nav-dropdown-header {
    padding:
        17px
        17px
        14px;

    border-bottom:
        1px solid
        rgba(55, 66, 53, .08);
}


.nav-dropdown-header span {
    display: block;

    margin-bottom: 4px;

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

    letter-spacing: .17em;

    text-transform: uppercase;

    color: #a47b48;
}


.nav-dropdown-header strong {
    font-size: 15px;

    color: #2e4931;
}


/* CATEGORY LIST */

.nav-dropdown-list {
    padding:
        8px 0;
}


.nav-dropdown-item {
    display: grid;

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

    align-items: center;

    gap: 9px;

    min-height: 49px;

    padding:
        8px
        12px;

    color: #526055;

    transition:
        background .2s ease,
        padding-left .25s ease;
}


.nav-dropdown-item:hover {
    padding-left: 16px;

    background: #ebe4d7;
}


.nav-category-number {
    font-size: 7px;

    font-weight: 800;

    color: #aa8354;
}


.nav-category-name {
    font-size: 10px;

    font-weight: 700;

    letter-spacing: .02em;

    color: #344b38;
}


.nav-category-arrow {
    font-size: 11px;

    color: #9a7547;

    transition:
        transform .25s ease;
}


.nav-dropdown-item:hover
.nav-category-arrow {
    transform:
        translate(2px, -2px);
}


/* DROPDOWN FOOTER */

.nav-dropdown-footer {
    display: flex;

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

    gap: 20px;

    padding:
        13px 16px;

    background: #2e4931;
}


.nav-dropdown-footer span {
    font-size: 7px;

    font-weight: 800;

    letter-spacing: .14em;

    color: #d3ad77;
}


.nav-dropdown-footer p {
    font-size: 7px;

    color:
        rgba(255,255,255,.55);
}


/* =========================================================
   MOBILE PRODUCT DROPDOWN
========================================================= */

.mobile-product-menu {
    width: 100%;
}


.mobile-product-trigger {
    width: 100%;

    display: flex;

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

    border: 0;

    background: transparent;

    color: inherit;

    font: inherit;

    cursor: pointer;
}


.mobile-product-icon {
    font-size: 18px;

    transition:
        transform .3s ease;
}


.mobile-product-menu.is-open
.mobile-product-icon {
    transform: rotate(45deg);
}


.mobile-category-menu {
    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition:
        max-height .45s ease,
        opacity .3s ease,
        margin .3s ease;
}


.mobile-product-menu.is-open
.mobile-category-menu {
    max-height: 700px;

    margin-top: 12px;

    opacity: 1;
}


.mobile-category-menu a {
    display: grid;

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

    align-items: center;

    gap: 10px;

    padding:
        12px 0;

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


.mobile-category-menu a > span {
    font-size: 7px;

    color: #cba36d;
}


.mobile-category-menu a strong {
    font-size: 10px;

    font-weight: 600;

    color: inherit;
}


.mobile-category-menu a i {
    font-size: 10px;

    font-style: normal;

    color: #cba36d;
}


.mobile-category-empty {
    padding:
        12px 0;

    font-size: 9px;

    opacity: .6;
}

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

.footer-logo {
    margin-bottom: 18px;
}


.footer-logo a {
    display: inline-flex;
}


.footer-logo img {
    display: block;

    width: 190px;
    max-width: 100%;

    height: auto;

    object-fit: contain;
}


/* TABLET */

@media (max-width: 900px) {

    .footer-logo img {
        width: 175px;
    }

}


/* MOBILE */

@media (max-width: 600px) {

    .footer-logo {
        margin-bottom: 15px;
    }


    .footer-logo img {
        width: 155px;
    }

}

.footer-logo {
    margin-bottom: 18px;
}


.footer-logo a {
    display: inline-flex;
    align-items: center;
}


.footer-logo img {
    width: 190px;
    height: auto;

    display: block;

    object-fit: contain;
}

/* =========================================================
   FOOTER DECORATIVE LOGO
========================================================= */

.site-footer {
    position: relative;
    overflow: hidden;
}


.footer-container {
    position: relative;
    z-index: 2;
}


.footer-decorative-logo {
    position: absolute;

    right: -80px;
    top: 50%;

    transform: translateY(-50%);

    width: 520px;
    height: 78%;

    z-index: 1;

    pointer-events: none;
    user-select: none;

    overflow: hidden;
    left:85%;
    opacity: 0.10;
}


.footer-decorative-logo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: right center;
}


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

@media (max-width: 900px) {

    .footer-decorative-logo {
        right: -110px;

        width: 420px;
        height: 70%;

        opacity: 0.08;
    }

}


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

@media (max-width: 600px) {

    .footer-decorative-logo {
        top: 55%;

        width: 330px;
        height: 60%;

        opacity: 0.06;
    }

}

/* =========================================================
   FOOTER DECORATIVE LOGO
========================================================= */

.site-footer {
    position: relative;
    overflow: hidden;
}


.footer-container {
    position: relative;
    z-index: 2;
}


.footer-decorative-logo {
    position: absolute;

    right: -80px;
    top: 50%;

    transform: translateY(-50%);

    width: 520px;
    height: 78%;

    z-index: 1;

    pointer-events: none;
    user-select: none;

    overflow: hidden;

    opacity: 0.10;
}


.footer-decorative-logo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: right center;
}


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

@media (max-width: 900px) {

    .footer-decorative-logo {
        right: -110px;

        width: 420px;
        height: 70%;

        opacity: 0.08;
    }

}


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

@media (max-width: 600px) {

    .footer-decorative-logo {
        right: -120px;
        top: 55%;

        width: 330px;
        height: 60%;

        opacity: 0.06;
    }
}

.footer-image{
 transform: scaleX(-1);

}

/* =========================================================
   FOOTER DECORATIVE LOGO — MOBILE
========================================================= */

@media (max-width: 600px) {

    .footer-decorative-logo {
        top: 50%;
        right: 5px;
        left: auto;

        transform: translateY(-50%);

        width: 180px;
        height: auto;

        opacity: 0.07;

        z-index: 0;

        overflow: visible;
    }


    .footer-decorative-logo img {
        display: block;

        width: 100%;
        height: auto;

        object-fit: contain;
        object-position: center;
    }


    .footer-container {
        position: relative;
        z-index: 2;
    }

}

/* =========================================================
   NEW PRODUCT DETAIL PAGE
   PULPBASE
========================================================= */

.product-detail-new {
    position: relative;
    overflow: hidden;
    padding: 155px 0 120px;
    background: #f5f0e6;
}

.product-detail-new-container {
    position: relative;
    z-index: 3;
    width: min(1280px, calc(100% - 60px));
    margin: 0 auto;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.product-detail-bg-word {
    position: absolute;
    top: 130px;
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(120px, 17vw, 270px);
    line-height: .8;
    font-weight: 800;
    letter-spacing: -.075em;
    white-space: nowrap;
    color: rgba(46, 73, 49, .035);
    pointer-events: none;
    user-select: none;
}

.product-detail-orbit {
    position: absolute;
    border: 1px solid rgba(151, 114, 68, .16);
    border-radius: 50%;
    pointer-events: none;
}

.product-detail-orbit-one {
    width: 500px;
    height: 500px;
    top: -260px;
    right: -220px;
}

.product-detail-orbit-two {
    width: 240px;
    height: 240px;
    left: -120px;
    bottom: 80px;
}


/* =========================================================
   BREADCRUMB
========================================================= */

.product-detail-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 55px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #9a907e;
}

.product-detail-breadcrumb a {
    color: #726349;
    transition:
        color .3s ease,
        opacity .3s ease;
}

.product-detail-breadcrumb a:hover {
    color: #2e4931;
}

.product-detail-breadcrumb > span:last-child {
    color: #2e4931;
}


/* =========================================================
   MAIN GRID
========================================================= */

.product-detail-main {
    display: grid;
    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(0, .98fr);
    gap: 95px;
    align-items: center;
}


/* =========================================================
   PRODUCT VISUAL
========================================================= */

.product-detail-visual {
    position: relative;
}

.product-visual-number {
    margin: 0 0 17px 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    color: #8c7658;
}

.product-organic-stage {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* MAIN ORGANIC BACKGROUND */

.product-organic-shape {
    position: absolute;
    inset: 22px 30px 30px 5px;
    background:
        linear-gradient(
            145deg,
            #a67d4c 0%,
            #8f673d 52%,
            #79532f 100%
        );

    border-radius:
        46% 54% 44% 56% /
        56% 42% 58% 44%;

    transform: rotate(-3deg);

    box-shadow:
        0 35px 80px rgba(83, 57, 31, .15);
}


/* OUTLINE AROUND ORGANIC SHAPE */

.product-organic-line {
    position: absolute;
    inset: 0 7px 5px 28px;

    border: 1px solid rgba(161, 125, 77, .38);

    border-radius:
        53% 47% 57% 43% /
        43% 58% 42% 57%;

    transform: rotate(4deg);
}


/* PRODUCT IMAGE */

.product-detail-image {
    position: relative;
    z-index: 4;
    width: 83%;
    height: 510px;
    object-fit: contain;
    filter:
        drop-shadow(
            0 25px 22px rgba(52, 36, 21, .17)
        );
    transition:
        transform .7s cubic-bezier(.2,.7,.2,1);
}

.product-organic-stage:hover
.product-detail-image {
    transform:
        translateY(-8px)
        scale(1.025);
}


/* PLACEHOLDER */

.product-detail-placeholder {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 75%;
    height: 400px;
}

.product-detail-placeholder span {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: .12em;
    color: rgba(255,255,255,.6);
}


/* ECO STAMP */

.product-eco-stamp {
    position: absolute;
    z-index: 5;
    right: 4px;
    bottom: 60px;

    width: 112px;
    height: 112px;

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

    border-radius: 50%;
    background: #2e4931;

    box-shadow:
        0 15px 35px rgba(32, 54, 35, .2);
}

.product-eco-stamp::before {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: inherit;
}

.product-eco-stamp span {
    position: relative;
    z-index: 2;
    font-size: 28px;
    line-height: 1;
    font-weight: 600;
    color: #f5f0e6;
}

.product-eco-stamp small {
    position: relative;
    z-index: 2;
    margin-top: 7px;
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .14em;
    color: rgba(255,255,255,.68);
}


/* VISUAL CAPTION */

.product-visual-caption {
    display: flex;
    align-items: center;
    gap: 14px;
    width: calc(100% - 55px);
    margin: 18px auto 0;
}

.product-visual-caption span {
    flex-shrink: 0;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #7d725f;
}

.product-visual-caption i {
    width: 100%;
    height: 1px;
    background: rgba(92, 77, 54, .18);
}


/* =========================================================
   PRODUCT INFORMATION
========================================================= */

.product-detail-information {
    position: relative;
    max-width: 590px;
}

.product-detail-topline {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 21px;
}

.product-detail-category {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #a17d4d;
}

.product-detail-category::before {
    content: "";
    width: 22px;
    height: 1px;
    background: #a17d4d;
}

.product-detail-code {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;

    font-size: 7px;
    font-weight: 700;
    letter-spacing: .13em;
    color: #999084;
}

.product-detail-code strong {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    color: #2e4931;
}

.product-detail-information h1 {
    margin: 0;
    max-width: 620px;

    font-size: clamp(48px, 5.1vw, 74px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 500;

    color: #2e4931;
}

.product-detail-intro {
    max-width: 530px;
    margin-top: 24px;

    font-size: 15px;
    line-height: 1.8;
    color: #77786f;
}


/* =========================================================
   PRODUCT DETAILS HEADING
========================================================= */

.product-specification-area {
    margin-top: 44px;
}

.product-section-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 16px;
}

.product-section-heading > span {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #a17d4d;
}

.product-section-heading h2 {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #2e4931;
}


/* =========================================================
   SPECIFICATION TABLE
========================================================= */

.product-specification-table {
    border-top: 1px solid rgba(46, 73, 49, .17);
}

.product-spec-row {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 25px;

    padding: 14px 0;

    border-bottom:
        1px solid rgba(46, 73, 49, .12);
}

.product-spec-row > span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #938a7d;
}

.product-spec-row strong {
    font-size: 13px;
    line-height: 1.5;
    font-weight: 500;
    color: #303b31;
}


/* =========================================================
   AVAILABLE COLORS
========================================================= */

.product-colors-area {
    margin-top: 28px;
}

.product-colors-title {
    display: block;
    margin-bottom: 14px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #827766;
}

.product-color-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.product-color-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    min-width: 105px;
    padding: 7px 13px 7px 7px;

    border:
        1px solid rgba(46, 73, 49, .13);

    background:
        rgba(255,255,255,.25);
}

.product-color-swatch {
    position: relative;

    width: 30px;
    height: 30px;

    flex-shrink: 0;

    border:
        1px solid rgba(35, 45, 36, .13);
}

.product-color-name {
    font-size: 10px;
    font-weight: 600;
    color: #4c5048;
}


/* =========================================================
   PRODUCT DESCRIPTION
========================================================= */

.product-detail-description {
    margin-top: 31px;
    padding-left: 19px;
    border-left: 2px solid #a17d4d;
}

.product-detail-description > span {
    display: block;
    margin-bottom: 9px;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #a17d4d;
}

.product-detail-description p {
    margin: 0;
    font-size: 13px;
    line-height: 1.75;
    color: #77786f;
}


/* =========================================================
   ENQUIRE
========================================================= */

.product-detail-action {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 34px;
}

.product-detail-enquire {
    min-width: 185px;
    height: 58px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    padding: 0 19px 0 23px;

    background: #2e4931;
    color: #ffffff;

    transition:
        transform .35s ease,
        background .35s ease;
}

.product-detail-enquire:hover {
    transform: translateY(-3px);
    background: #203923;
}

.product-detail-enquire > span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.product-detail-enquire i {
    width: 29px;
    height: 29px;

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

    border-radius: 50%;

    background: rgba(255,255,255,.12);

    font-style: normal;
    font-size: 13px;

    transition: transform .35s ease;
}

.product-detail-enquire:hover i {
    transform: rotate(45deg);
}

.product-detail-action > p {
    max-width: 230px;
    margin: 0;

    font-size: 10px;
    line-height: 1.65;
    color: #89877e;
}


/* =========================================================
   SIMILAR PRODUCTS
========================================================= */

.similar-products-section {
    position: relative;
    overflow: hidden;
    padding: 120px 0 130px;
    background: #fbf9f4;
}

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

.similar-products-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 55px;
}

.similar-products-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 15px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .16em;
    color: #a17d4d;
}

.similar-products-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: #a17d4d;
}

.similar-products-header h2 {
    margin: 0;

    font-size: clamp(48px, 5vw, 74px);
    line-height: .95;
    letter-spacing: -.055em;
    font-weight: 500;

    color: #2e4931;
}

.similar-products-header h2 em {
    font-weight: 400;
    color: #a17d4d;
}

.similar-products-view-all {
    display: inline-flex;
    align-items: center;
    gap: 16px;

    padding-bottom: 8px;

    border-bottom:
        1px solid rgba(46, 73, 49, .35);

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;

    color: #2e4931;
}

.similar-products-view-all span {
    transition: transform .3s ease;
}

.similar-products-view-all:hover span {
    transform:
        translate(3px, -3px);
}


/* FIVE PRODUCTS */

.similar-products-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
}

.similar-product-card {
    display: block;
    min-width: 0;
    color: inherit;
}

.similar-product-image-area {
    position: relative;
    overflow: hidden;

    height: 275px;

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

    background: #f0eadf;
}

.similar-product-shape {
    position: absolute;

    width: 190px;
    height: 190px;

    border-radius:
        54% 46% 57% 43% /
        46% 58% 42% 54%;

    background:
        rgba(161, 125, 77, .12);

    transform: rotate(-8deg);

    transition:
        transform .6s ease,
        background .4s ease;
}

.similar-product-card:hover
.similar-product-shape {
    transform:
        rotate(5deg)
        scale(1.08);

    background:
        rgba(161, 125, 77, .18);
}

.similar-product-image-area img {
    position: relative;
    z-index: 2;

    width: 82%;
    height: 215px;

    object-fit: contain;

    transition:
        transform .55s cubic-bezier(.2,.7,.2,1);
}

.similar-product-card:hover
.similar-product-image-area img {
    transform:
        translateY(-7px)
        scale(1.04);
}

.similar-product-placeholder {
    position: relative;
    z-index: 2;

    font-size: 15px;
    font-weight: 700;
    letter-spacing: .1em;

    color: rgba(46,73,49,.4);
}

.similar-product-arrow {
    position: absolute;
    z-index: 5;

    top: 14px;
    right: 14px;

    width: 35px;
    height: 35px;

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

    border-radius: 50%;

    background: #2e4931;
    color: #ffffff;

    font-size: 12px;

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

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.similar-product-card:hover
.similar-product-arrow {
    opacity: 1;
    transform: translateY(0);
}

.similar-product-content {
    padding: 17px 3px 0;
}

.similar-product-code {
    display: block;
    margin-bottom: 7px;

    font-size: 8px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;

    color: #a17d4d;
}

.similar-product-content h3 {
    margin: 0;

    font-size: 17px;
    line-height: 1.3;
    font-weight: 500;

    color: #2e4931;

    transition: color .3s ease;
}

.similar-product-card:hover
.similar-product-content h3 {
    color: #a17d4d;
}


/* =========================================================
   PRODUCT FAQ
========================================================= */

.product-faq-section {
    position: relative;
    overflow: hidden;

    padding: 125px 0 135px;

    background: #29422d;
}

.product-faq-bg-word {
    position: absolute;

    left: 50%;
    bottom: -28px;

    transform: translateX(-50%);

    font-size: clamp(100px, 15vw, 230px);
    line-height: .75;
    font-weight: 800;
    letter-spacing: -.075em;

    white-space: nowrap;

    color: rgba(255,255,255,.025);

    pointer-events: none;
    user-select: none;
}

.product-faq-container {
    position: relative;
    z-index: 2;

    width: min(1240px, calc(100% - 60px));
    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(0, .7fr)
        minmax(0, 1.3fr);

    gap: 105px;
}


/* FAQ INTRO */

.product-faq-intro {
    position: sticky;
    top: 150px;
    align-self: start;
}

.product-faq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 22px;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: .17em;

    color: #d1ad75;
}

.product-faq-eyebrow::before {
    content: "";

    width: 28px;
    height: 1px;

    background: #d1ad75;
}

.product-faq-intro h2 {
    max-width: 450px;
    margin: 0;

    font-size: clamp(52px, 5.5vw, 80px);
    line-height: .93;
    letter-spacing: -.06em;
    font-weight: 500;

    color: #f6f1e7;
}

.product-faq-intro h2 em {
    display: block;
    font-weight: 400;
    color: #d1ad75;
}

.product-faq-intro > p {
    max-width: 390px;
    margin-top: 28px;

    font-size: 13px;
    line-height: 1.8;

    color: rgba(255,255,255,.55);
}

.product-faq-line {
    display: flex;
    align-items: center;
    gap: 12px;

    max-width: 330px;
    margin-top: 45px;
}

.product-faq-line span {
    font-size: 9px;
    font-weight: 700;
    color: #d1ad75;
}

.product-faq-line i {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,.16);
}

.product-faq-line small {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: .13em;
    color: rgba(255,255,255,.45);
}


/* =========================================================
   FAQ ITEMS
========================================================= */

.product-faq-list {
    border-top:
        1px solid rgba(255,255,255,.16);
}

.product-faq-item {
    border-bottom:
        1px solid rgba(255,255,255,.16);
}

.product-faq-item summary {
    position: relative;

    min-height: 102px;

    display: grid;
    grid-template-columns: 42px 1fr 34px;
    gap: 15px;
    align-items: center;

    cursor: pointer;
    list-style: none;
}

.product-faq-item summary::-webkit-details-marker {
    display: none;
}

.product-faq-number {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .12em;
    color: #d1ad75;
}

.product-faq-item summary strong {
    max-width: 570px;

    font-size: 17px;
    line-height: 1.45;
    font-weight: 500;

    color: #f6f1e7;
}


/* PLUS ICON */

.product-faq-item summary i {
    position: relative;

    width: 32px;
    height: 32px;

    border:
        1px solid rgba(255,255,255,.2);

    border-radius: 50%;
}

.product-faq-item summary i::before,
.product-faq-item summary i::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 10px;
    height: 1px;

    background: #d1ad75;

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

    transition:
        transform .3s ease;
}

.product-faq-item summary i::after {
    transform:
        translate(-50%, -50%)
        rotate(90deg);
}

.product-faq-item[open]
summary i::after {
    transform:
        translate(-50%, -50%)
        rotate(0deg);
}


/* ANSWER */

.product-faq-answer {
    padding:
        0 50px
        28px 57px;
}

.product-faq-answer p {
    max-width: 590px;
    margin: 0;

    font-size: 13px;
    line-height: 1.85;

    color: rgba(255,255,255,.57);
}


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

@media (max-width: 1100px) {

    .product-detail-main {
        gap: 55px;
    }

    .product-organic-stage {
        min-height: 560px;
    }

    .product-detail-image {
        height: 440px;
    }

    .product-detail-information h1 {
        font-size: 52px;
    }

    .similar-products-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 25px 18px;
    }

    .product-faq-container {
        gap: 60px;
    }

}


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

@media (max-width: 820px) {

    .product-detail-new {
        padding: 125px 0 85px;
    }

    .product-detail-new-container,
    .similar-products-container,
    .product-faq-container {
        width: min(100% - 36px, 680px);
    }

    .product-detail-breadcrumb {
        margin-bottom: 35px;
    }

    .product-detail-main {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .product-detail-information {
        max-width: none;
    }

    .product-organic-stage {
        min-height: 570px;
        max-width: 620px;
        margin: 0 auto;
    }

    .product-detail-image {
        height: 450px;
    }

    .product-detail-information h1 {
        font-size: clamp(46px, 10vw, 68px);
    }

    .product-spec-row {
        grid-template-columns: 130px 1fr;
    }

    .similar-products-section {
        padding: 90px 0;
    }

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

    .similar-product-image-area {
        height: 310px;
    }

    .similar-product-image-area img {
        height: 240px;
    }

    .product-faq-section {
        padding: 90px 0;
    }

    .product-faq-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .product-faq-intro {
        position: relative;
        top: auto;
    }

}


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

@media (max-width: 600px) {

    .product-detail-new {
        padding: 105px 0 70px;
    }

    .product-detail-new-container,
    .similar-products-container,
    .product-faq-container {
        width: calc(100% - 30px);
    }

    .product-detail-bg-word {
        top: 110px;
        font-size: 90px;
    }

    .product-detail-breadcrumb {
        gap: 7px;
        margin-bottom: 28px;
        font-size: 8px;
    }

    .product-detail-main {
        gap: 50px;
    }

    .product-visual-number {
        margin-left: 4px;
    }

    .product-organic-stage {
        min-height: 420px;
    }

    .product-organic-shape {
        inset: 15px 18px 20px 3px;
    }

    .product-organic-line {
        inset: 0 3px 4px 16px;
    }

    .product-detail-image {
        width: 88%;
        height: 335px;
    }

    .product-eco-stamp {
        right: -2px;
        bottom: 30px;

        width: 82px;
        height: 82px;
    }

    .product-eco-stamp span {
        font-size: 21px;
    }

    .product-eco-stamp small {
        margin-top: 5px;
        font-size: 5px;
    }

    .product-visual-caption {
        width: calc(100% - 20px);
    }

    .product-visual-caption span {
        font-size: 6px;
    }

    .product-detail-topline {
        flex-direction: column;
        gap: 13px;
    }

    .product-detail-code {
        align-items: flex-start;
    }

    .product-detail-information h1 {
        font-size: 45px;
    }

    .product-detail-intro {
        font-size: 14px;
    }

    .product-specification-area {
        margin-top: 37px;
    }

    .product-spec-row {
        grid-template-columns: 100px 1fr;
        gap: 15px;
    }

    .product-detail-action {
        align-items: flex-start;
        flex-direction: column;
    }

    .product-detail-enquire {
        width: 100%;
    }

    .product-detail-action > p {
        max-width: 100%;
    }


    /* SIMILAR */

    .similar-products-section {
        padding: 75px 0 80px;
    }

    .similar-products-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px;
        margin-bottom: 40px;
    }

    .similar-products-header h2 {
        font-size: 48px;
    }

    .similar-products-grid {
        grid-template-columns: 1fr 1fr;
        gap: 25px 10px;
    }

    .similar-product-image-area {
        height: 205px;
    }

    .similar-product-image-area img {
        width: 88%;
        height: 160px;
    }

    .similar-product-shape {
        width: 135px;
        height: 135px;
    }

    .similar-product-arrow {
        top: 9px;
        right: 9px;

        width: 30px;
        height: 30px;

        opacity: 1;
        transform: none;
    }

    .similar-product-content h3 {
        font-size: 14px;
    }


    /* FAQ */

    .product-faq-section {
        padding: 78px 0 85px;
    }

    .product-faq-intro h2 {
        font-size: 50px;
    }

    .product-faq-intro > p {
        font-size: 12px;
    }

    .product-faq-item summary {
        min-height: 90px;

        grid-template-columns:
            28px 1fr 30px;

        gap: 9px;
    }

    .product-faq-item summary strong {
        font-size: 14px;
    }

    .product-faq-item summary i {
        width: 28px;
        height: 28px;
    }

    .product-faq-answer {
        padding:
            0 35px
            25px 37px;
    }

    .product-faq-answer p {
        font-size: 12px;
    }

}


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

@media (max-width: 390px) {

    .product-organic-stage {
        min-height: 380px;
    }

    .product-detail-image {
        height: 300px;
    }

    .product-detail-information h1 {
        font-size: 40px;
    }

    .similar-product-image-area {
        height: 185px;
    }

    .similar-product-image-area img {
        height: 145px;
    }

    .similar-product-content h3 {
        font-size: 13px;
    }

}


/* =========================================================
   HEADER CATALOGUE BUTTON
========================================================= */

.header-catalogue-btn {
    position: relative;

    min-width: 155px;
    height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 0 9px 0 18px;

    background: #2e4931;
    color: #ffffff;

    border-radius: 100px;

    overflow: hidden;

    transition:
        transform .3s ease,
        background .3s ease;
}

.header-catalogue-btn span {
    position: relative;
    z-index: 2;

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

    letter-spacing: .1em;
    text-transform: uppercase;
}

.header-catalogue-btn i {
    position: relative;
    z-index: 2;

    width: 32px;
    height: 32px;

    flex-shrink: 0;

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

    border-radius: 50%;

    background: #d2ae73;

    color: #2e4931;

    font-size: 14px;
    font-style: normal;

    transition:
        transform .35s ease;
}

.header-catalogue-btn:hover {
    background: #223b26;
    transform: translateY(-2px);
}

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


/* =========================================================
   MOBILE CATALOGUE BUTTON
========================================================= */

.mobile-catalogue-btn {
    width: 100%;
    max-width: 330px;

    min-height: 58px;

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

    margin-top: 20px;
    padding: 8px 9px 8px 21px;

    border-radius: 100px;

    background: #2e4931;
    color: #ffffff;
}

.mobile-catalogue-btn span {
    font-size: 10px;
    font-weight: 700;

    letter-spacing: .11em;
    text-transform: uppercase;
}

.mobile-catalogue-btn i {
    width: 40px;
    height: 40px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: #d2ae73;
    color: #2e4931;

    font-size: 16px;
    font-style: normal;
}


/* =========================================================
   CATALOGUE BUTTON RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .header-catalogue-btn {
        display: none;
    }

    .mobile-catalogue-btn {
        display: flex;
    }

}

/* =========================================================
   HEADER ACTION GROUP
========================================================= */

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-header-actions {
    display: none;
}


/* MOBILE */

@media (max-width: 900px) {

    .header-actions {
        display: none;
    }

    .mobile-header-actions {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

}

/* =========================================================
   GET QUOTE BUTTON - FINAL FIX
========================================================= */

.site-header .header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-header .header-quote-btn {
    width: auto;
    min-width: 135px;
    height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    padding: 0 9px 0 18px;

    border: 1px solid #2e4931;
    border-radius: 100px;

    background: transparent;
    color: #2e4931;

    text-decoration: none;

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

.site-header .header-quote-btn span {
    display: block;

    font-size: 9px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: 0.1em;
    text-transform: uppercase;

    color: inherit;
}

.site-header .header-quote-btn i {
    width: 31px;
    height: 31px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: #d2ae73;
    color: #2e4931;

    font-size: 12px;
    line-height: 1;
    font-style: normal;

    transition: transform 0.3s ease;
}

.site-header .header-quote-btn:hover {
    background: #2e4931;
    color: #ffffff;

    transform: translateY(-2px);
}

.site-header .header-quote-btn:hover i {
    transform: rotate(45deg);
}


/* =========================================================
   MOBILE GET QUOTE
========================================================= */

.site-header .mobile-header-actions {
    display: none;
}

.site-header .mobile-quote-btn {
    width: 100%;
    max-width: 330px;
    min-height: 58px;

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

    padding: 8px 9px 8px 21px;

    border: 1px solid #2e4931;
    border-radius: 100px;

    background: transparent;
    color: #2e4931;

    text-decoration: none;
}

.site-header .mobile-quote-btn span {
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.11em;
    text-transform: uppercase;

    color: inherit;
}

.site-header .mobile-quote-btn i {
    width: 40px;
    height: 40px;

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

    flex-shrink: 0;

    border-radius: 50%;

    background: #d2ae73;
    color: #2e4931;

    font-size: 14px;
    font-style: normal;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

    .site-header .header-actions {
        display: none;
    }

    .site-header .mobile-header-actions {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 12px;
        margin-top: 20px;
    }

}


/* =========================================================
   PULPBASE
   ABOUT PAGE — INTRO SECTION
========================================================= */

.about-page-intro {
    position: relative;
    width: 100%;
    min-height: 850px;
    padding: 165px 0 110px;

    background:
        radial-gradient(
            circle at 82% 38%,
            rgba(210, 174, 115, 0.13),
            transparent 30%
        ),
        #f5f0e7;

    overflow: hidden;
}


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

.about-page-word {
    position: absolute;
    left: -20px;
    bottom: -65px;

    font-size: clamp(150px, 18vw, 330px);
    line-height: 0.8;
    font-weight: 700;
    letter-spacing: -0.07em;

    color: rgba(46, 73, 49, 0.035);

    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}


/* =========================================================
   DECORATIVE ORBITS
========================================================= */

.about-page-orbit {
    position: absolute;

    border: 1px solid rgba(46, 73, 49, 0.09);
    border-radius: 50%;

    pointer-events: none;
}

.about-page-orbit-one {
    width: 520px;
    height: 520px;

    right: -190px;
    top: 80px;
}

.about-page-orbit-two {
    width: 720px;
    height: 720px;

    right: -320px;
    top: -40px;
}


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

.about-page-container {
    position: relative;
    z-index: 2;

    width: min(1380px, calc(100% - 80px));
    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;
    gap: clamp(60px, 7vw, 120px);
}


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

.about-page-content {
    position: relative;
    z-index: 3;
}


/* KICKER */

.about-page-kicker {
    display: flex;
    align-items: center;
    gap: 15px;

    margin-bottom: 28px;
}

.about-page-kicker-line {
    width: 44px;
    height: 1px;

    background: #b78c4f;
}

.about-page-kicker > span:last-child {
    font-size: 11px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: #7c613d;
}


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

.about-page-title {
    max-width: 680px;
    margin: 0;

    font-size: clamp(58px, 5.3vw, 92px);
    line-height: 0.91;
    font-weight: 500;
    letter-spacing: -0.055em;

    color: #253d29;
}

.about-page-title span {
    display: block;

    color: #a97842;
}


/* =========================================================
   COPY
========================================================= */

.about-page-copy {
    max-width: 650px;

    margin-top: 42px;
    padding-left: 70px;

    position: relative;
}

.about-page-copy::before {
    content: "";

    position: absolute;
    left: 0;
    top: 9px;

    width: 38px;
    height: 1px;

    background: rgba(46, 73, 49, 0.4);
}

.about-page-copy p {
    margin: 0 0 18px;

    font-size: 17px;
    line-height: 1.85;
    font-weight: 400;

    color: #5f625a;
}

.about-page-copy p:last-child {
    margin-bottom: 0;
}

.about-page-copy strong {
    color: #2e4931;
    font-weight: 650;
}


/* =========================================================
   SMALL BRAND STATEMENT
========================================================= */

.about-page-statement {
    max-width: 480px;

    margin-top: 42px;
    margin-left: 70px;

    padding-top: 24px;

    display: flex;
    align-items: flex-start;
    gap: 20px;

    border-top: 1px solid rgba(46, 73, 49, 0.15);
}

.about-page-statement-number {
    width: 39px;
    height: 39px;

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

    flex-shrink: 0;

    border: 1px solid rgba(46, 73, 49, 0.25);
    border-radius: 50%;

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

    color: #a97842;
}

.about-page-statement div {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.about-page-statement small {
    font-size: 9px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.17em;
    text-transform: uppercase;

    color: #a97842;
}

.about-page-statement strong {
    font-size: 19px;
    line-height: 1.4;
    font-weight: 500;

    color: #2e4931;
}


/* =========================================================
   RIGHT VISUAL
========================================================= */

.about-page-visual {
    position: relative;

    min-height: 620px;

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


/* LARGE NUMBER */

.about-page-visual-number {
    position: absolute;

    top: -40px;
    right: 0;

    font-size: 150px;
    line-height: 1;
    font-weight: 600;

    color: rgba(46, 73, 49, 0.045);

    pointer-events: none;
}


/* =========================================================
   IMAGE STAGE
========================================================= */

.about-page-image-stage {
    position: relative;

    width: min(100%, 590px);
    height: 590px;

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


/* ORGANIC BACKGROUND */

.about-page-image-shape {
    position: absolute;

    width: 500px;
    height: 535px;

    background: #d8c8a9;

    border-radius:
        48% 52% 61% 39%
        /
        40% 45% 55% 60%;

    transform: rotate(-5deg);

    transition:
        transform 0.7s ease,
        border-radius 0.7s ease;
}

.about-page-visual:hover
.about-page-image-shape {
    transform: rotate(-2deg) scale(1.025);

    border-radius:
        56% 44% 47% 53%
        /
        47% 57% 43% 53%;
}


/* OUTLINE */

.about-page-image-line {
    position: absolute;

    width: 535px;
    height: 555px;

    border: 1px solid rgba(46, 73, 49, 0.2);

    border-radius:
        42% 58% 48% 52%
        /
        54% 42% 58% 46%;

    transform: rotate(7deg);

    transition: transform 0.8s ease;
}

.about-page-visual:hover
.about-page-image-line {
    transform: rotate(11deg);
}


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

.about-page-image {
    position: relative;
    z-index: 3;

    width: 88%;
    max-width: 530px;
    height: auto;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(
            0 30px 35px rgba(41, 48, 37, 0.16)
        );

    transition:
        transform 0.65s cubic-bezier(.2,.7,.2,1);
}

.about-page-visual:hover
.about-page-image {
    transform:
        translateY(-10px)
        rotate(1deg)
        scale(1.02);
}


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

.about-page-image-label {
    position: absolute;
    z-index: 5;

    left: 0;
    bottom: 50px;

    min-width: 180px;

    padding: 18px 22px;

    background: #2e4931;

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.about-page-image-label span {
    font-size: 13px;
    line-height: 1;

    font-weight: 700;
    letter-spacing: 0.17em;

    color: #ffffff;
}

.about-page-image-label small {
    font-size: 9px;
    line-height: 1.4;

    letter-spacing: 0.08em;

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


/* =========================================================
   ECO MARK
========================================================= */

.about-page-eco-mark {
    position: absolute;
    z-index: 6;

    right: -5px;
    bottom: 20px;

    width: 126px;
    height: 126px;

    border-radius: 50%;

    background: #f5f0e7;

    border: 1px solid rgba(46, 73, 49, 0.22);

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

    text-align: center;

    box-shadow:
        0 15px 40px
        rgba(46, 73, 49, 0.08);

    transition:
        transform 0.5s ease;
}

.about-page-eco-mark span {
    max-width: 80px;

    font-size: 7px;
    line-height: 1.4;

    font-weight: 700;
    letter-spacing: 0.12em;

    color: #6f715f;
}

.about-page-eco-mark strong {
    margin: 5px 0;

    font-size: 19px;
    font-weight: 400;

    color: #a97842;
}

.about-page-visual:hover
.about-page-eco-mark {
    transform: rotate(8deg);
}


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

@media (max-width: 1100px) {

    .about-page-intro {
        min-height: auto;
        padding:
            145px 0
            100px;
    }

    .about-page-container {
        width:
            min(
                100% - 50px,
                1000px
            );

        gap: 45px;
    }

    .about-page-title {
        font-size:
            clamp(
                52px,
                6vw,
                72px
            );
    }

    .about-page-copy {
        padding-left: 45px;
    }

    .about-page-statement {
        margin-left: 45px;
    }

    .about-page-visual {
        min-height: 530px;
    }

    .about-page-image-stage {
        width: 480px;
        height: 500px;
    }

    .about-page-image-shape {
        width: 410px;
        height: 445px;
    }

    .about-page-image-line {
        width: 440px;
        height: 470px;
    }

}


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

@media (max-width: 820px) {

    .about-page-intro {
        padding:
            130px 0
            80px;
    }

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

        grid-template-columns: 1fr;

        gap: 65px;
    }

    .about-page-content {
        max-width: 680px;
    }

    .about-page-title {
        max-width: 600px;

        font-size:
            clamp(
                52px,
                10vw,
                76px
            );
    }

    .about-page-copy {
        max-width: 620px;
    }

    .about-page-visual {
        min-height: 600px;
    }

    .about-page-image-stage {
        width: min(100%, 560px);
        height: 560px;
    }

    .about-page-image-shape {
        width: 470px;
        height: 500px;
    }

    .about-page-image-line {
        width: 500px;
        height: 520px;
    }

}


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

@media (max-width: 600px) {

    .about-page-intro {
        padding:
            115px 0
            65px;
    }

    .about-page-container {
        width:
            calc(
                100% - 30px
            );

        gap: 45px;
    }

    .about-page-kicker {
        margin-bottom: 20px;
    }

    .about-page-kicker-line {
        width: 30px;
    }

    .about-page-title {
        font-size:
            clamp(
                44px,
                14vw,
                64px
            );

        line-height: 0.94;
    }

    .about-page-copy {
        margin-top: 32px;
        padding-left: 0;
    }

    .about-page-copy::before {
        display: none;
    }

    .about-page-copy p {
        font-size: 15px;
        line-height: 1.75;
    }

    .about-page-statement {
        margin:
            32px 0
            0;

        padding-top: 20px;
    }

    .about-page-statement strong {
        font-size: 17px;
    }


    /* VISUAL */

    .about-page-visual {
        min-height: 430px;
    }

    .about-page-image-stage {
        width: 100%;
        height: 420px;
    }

    .about-page-image-shape {
        width: 86%;
        height: 370px;
    }

    .about-page-image-line {
        width: 91%;
        height: 390px;
    }

    .about-page-image {
        width: 90%;
    }

    .about-page-image-label {
        left: 0;
        bottom: 18px;

        min-width: 150px;

        padding:
            14px 17px;
    }

    .about-page-image-label span {
        font-size: 11px;
    }

    .about-page-eco-mark {
        width: 100px;
        height: 100px;

        right: 0;
        bottom: -5px;
    }

    .about-page-eco-mark span {
        max-width: 67px;
        font-size: 6px;
    }

    .about-page-eco-mark strong {
        font-size: 15px;
    }

    .about-page-visual-number {
        font-size: 100px;

        top: -25px;
        right: 5px;
    }

}


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

@media (max-width: 390px) {

    .about-page-intro {
        padding-top: 105px;
    }

    .about-page-container {
        width:
            calc(
                100% - 24px
            );
    }

    .about-page-title {
        font-size: 43px;
    }

    .about-page-visual {
        min-height: 380px;
    }

    .about-page-image-stage {
        height: 370px;
    }

    .about-page-image-shape {
        height: 325px;
    }

    .about-page-image-line {
        height: 345px;
    }

    .about-page-eco-mark {
        width: 88px;
        height: 88px;
    }

}



/* =========================================================
   PULPBASE ABOUT PAGE
   QUALITY SECTION V2
========================================================= */

.about-quality-v2 {
    position: relative;
    width: 100%;
    padding: 105px 0 70px;

    background: #29472f;

    overflow: hidden;
}


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

.about-quality-v2-bg {
    position: absolute;

    top: -15px;
    left: 2%;

    font-size: clamp(130px, 16vw, 280px);
    line-height: 0.8;
    font-weight: 600;
    letter-spacing: -0.06em;

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

    white-space: nowrap;

    pointer-events: none;
    user-select: none;
}


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

.about-quality-v2-container {
    position: relative;
    z-index: 2;

    width: min(1450px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   MAIN GRID
========================================================= */

.about-quality-v2-grid {
    display: grid;

    grid-template-columns:
        minmax(420px, 0.92fr)
        minmax(0, 1.08fr);

    gap: clamp(60px, 6vw, 100px);

    align-items: stretch;
}


/* =========================================================
   LEFT VISUAL
========================================================= */

.about-quality-v2-visual {
    position: relative;

    min-width: 0;
}

.about-quality-v2-image-wrap {
    position: relative;

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

    overflow: hidden;

    border:
        1px solid rgba(210, 174, 115, 0.45);

    border-radius:
        230px 230px 0 0;

    background: #d8c8a9;
}


/* IMAGE */

.about-quality-v2-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 1s cubic-bezier(.2,.7,.2,1);
}

.about-quality-v2-image-wrap:hover
.about-quality-v2-image {
    transform: scale(1.035);
}


/* DARK SOFT OVERLAY */

.about-quality-v2-image-wrap::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(22, 43, 27, 0.20) 0%,
            rgba(22, 43, 27, 0.02) 52%,
            rgba(22, 43, 27, 0.10) 100%
        );

    pointer-events: none;
}


/* =========================================================
   IMAGE TEXT
========================================================= */

.about-quality-v2-image-copy {
    position: absolute;

    z-index: 3;

    top: 31%;
    left: 10%;

    display: flex;
    flex-direction: column;

    transform: rotate(-4deg);
}

.about-quality-v2-image-copy span {
    display: block;

    font-size: clamp(27px, 2.3vw, 40px);
    line-height: 1.25;
    font-weight: 400;
    font-style: italic;

    letter-spacing: -0.025em;

    color: #ffffff;

    text-shadow:
        0 3px 20px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   ECO BADGE
========================================================= */

.about-quality-v2-badge {
    position: absolute;

    z-index: 4;

    top: 17%;
    right: 9%;

    width: 132px;
    height: 132px;

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

    border-radius: 50%;

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

    text-align: center;

    color: #ffffff;

    backdrop-filter: blur(2px);

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

.about-quality-v2-badge::before {
    content: "";

    position: absolute;

    inset: 8px;

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

    border-radius: 50%;
}

.about-quality-v2-badge-icon {
    position: relative;
    z-index: 2;

    margin-bottom: 7px;

    font-size: 25px;
    line-height: 1;
}

.about-quality-v2-badge span {
    position: relative;
    z-index: 2;

    font-size: 7px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.23em;
}

.about-quality-v2-badge small {
    position: relative;
    z-index: 2;

    margin-top: 7px;

    font-size: 5px;
    line-height: 1;

    letter-spacing: 0.16em;

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

.about-quality-v2-image-wrap:hover
.about-quality-v2-badge {
    transform: rotate(8deg);

    background:
        rgba(46, 73, 49, 0.18);
}


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

.about-quality-v2-content {
    position: relative;

    display: flex;
    flex-direction: column;

    justify-content: center;

    padding: 25px 0 15px;
}


/* =========================================================
   KICKER
========================================================= */

.about-quality-v2-kicker {
    display: flex;
    align-items: center;
    gap: 16px;

    margin-bottom: 22px;
}

.about-quality-v2-kicker > span {
    width: 55px;
    height: 1px;

    flex-shrink: 0;

    background: #d2ae73;
}

.about-quality-v2-kicker strong {
    font-size: 10px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.2em;
    text-transform: uppercase;

    color: #e2be7d;
}


/* =========================================================
   MAIN TITLE
========================================================= */

.about-quality-v2-intro h2 {
    max-width: 800px;

    margin: 0;

    font-size: clamp(55px, 5vw, 82px);
    line-height: 0.94;

    font-weight: 500;

    letter-spacing: -0.055em;

    color: #ffffff;
}

.about-quality-v2-intro h2 span {
    display: block;

    color: #d9aa69;
}


/* INTRO PARAGRAPH */

.about-quality-v2-intro > p {
    max-width: 760px;

    margin: 30px 0 0;

    font-size: 16px;
    line-height: 1.75;

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


/* =========================================================
   WHY BAGASSE
========================================================= */

.about-quality-v2-story {
    margin-top: 45px;
}

.about-quality-v2-label {
    display: block;

    margin-bottom: 12px;

    font-size: 12px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.08em;

    color: #e1b775;
}

.about-quality-v2-story h3 {
    max-width: 760px;

    margin: 0;

    font-size: clamp(40px, 3.7vw, 60px);
    line-height: 0.98;

    font-weight: 500;

    letter-spacing: -0.045em;

    color: #ffffff;
}

.about-quality-v2-story h3 span {
    display: block;

    color: #d9aa69;
}

.about-quality-v2-story > p {
    max-width: 770px;

    margin: 25px 0 0;

    font-size: 15px;
    line-height: 1.75;

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


/* =========================================================
   QUALITY POINT GRID
========================================================= */

.about-quality-v2-points {
    margin-top: 42px;

    display: grid;

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

    border-top:
        1px solid rgba(210, 174, 115, 0.38);

    border-bottom:
        1px solid rgba(210, 174, 115, 0.38);
}


/* POINT */

.about-quality-v2-point {
    position: relative;

    min-height: 150px;

    display: grid;

    grid-template-columns:
        52px 1fr;

    gap: 15px;

    padding:
        26px 25px
        25px 0;

    transition:
        background 0.35s ease,
        padding-left 0.35s ease;
}


/* MIDDLE DIVIDER */

.about-quality-v2-point:nth-child(odd) {
    padding-right: 32px;

    border-right:
        1px solid rgba(210, 174, 115, 0.38);
}

.about-quality-v2-point:nth-child(even) {
    padding-left: 32px;
}


/* FIRST ROW DIVIDER */

.about-quality-v2-point:nth-child(1),
.about-quality-v2-point:nth-child(2) {
    border-bottom:
        1px solid rgba(210, 174, 115, 0.38);
}


/* NUMBER */

.about-quality-v2-number {
    font-size: 27px;
    line-height: 1;

    font-weight: 400;

    color: #e0b875;
}


/* POINT HEADING */

.about-quality-v2-point h4 {
    margin: 0 0 8px;

    font-size: 17px;
    line-height: 1.25;

    font-weight: 500;

    color: #ffffff;
}


/* POINT TEXT */

.about-quality-v2-point p {
    max-width: 280px;

    margin: 0;

    font-size: 12px;
    line-height: 1.6;

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


/* HOVER */

.about-quality-v2-point:hover {
    background:
        rgba(255, 255, 255, 0.025);
}

.about-quality-v2-point:nth-child(odd):hover {
    padding-left: 8px;
}

.about-quality-v2-point:nth-child(even):hover {
    padding-left: 40px;
}


/* =========================================================
   BOTTOM QUOTE AREA
========================================================= */

.about-quality-v2-quote {
    position: relative;

    margin-top: 35px;

    min-height: 145px;

    display: grid;

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

    gap: 42px;

    align-items: center;

    padding: 30px 10px 20px;

    border-top:
        1px solid rgba(210, 174, 115, 0.65);
}


/* BRAND */

.about-quality-v2-quote-brand {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.about-quality-v2-quote-brand strong {
    font-size: 13px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.32em;

    color: #ffffff;
}

.about-quality-v2-quote-brand span {
    font-size: 7px;
    line-height: 1;

    font-weight: 600;

    letter-spacing: 0.23em;

    color:
        rgba(255, 255, 255, 0.58);
}


/* DIVIDER */

.about-quality-v2-quote-divider {
    width: 1px;
    height: 48px;

    background:
        rgba(210, 174, 115, 0.55);
}


/* QUOTE */

.about-quality-v2-quote blockquote {
    max-width: 820px;

    margin: 0;

    font-size: clamp(24px, 2vw, 33px);
    line-height: 1.3;

    font-weight: 400;
    font-style: italic;

    letter-spacing: -0.02em;

    color: #e9c78e;
}


/* ARROW */

.about-quality-v2-quote-arrow {
    width: 62px;
    height: 62px;

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

    justify-self: end;

    border-radius: 50%;

    background: #dfb66f;
    color: #29472f;

    font-size: 22px;
    line-height: 1;

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

.about-quality-v2-quote:hover
.about-quality-v2-quote-arrow {
    transform: rotate(45deg);

    background: #efd29e;
}


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

@media (max-width: 1200px) {

    .about-quality-v2 {
        padding-top: 90px;
    }

    .about-quality-v2-container {
        width:
            min(
                1100px,
                calc(100% - 50px)
            );
    }

    .about-quality-v2-grid {
        grid-template-columns:
            minmax(360px, 0.85fr)
            minmax(0, 1.15fr);

        gap: 55px;
    }

    .about-quality-v2-image-wrap {
        min-height: 680px;

        border-radius:
            190px 190px 0 0;
    }

    .about-quality-v2-intro h2 {
        font-size: 62px;
    }

    .about-quality-v2-story h3 {
        font-size: 48px;
    }

}


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

@media (max-width: 950px) {

    .about-quality-v2 {
        padding:
            85px 0 65px;
    }

    .about-quality-v2-container {
        width:
            calc(100% - 40px);
    }

    .about-quality-v2-grid {
        grid-template-columns: 1fr;

        gap: 65px;
    }


    /* IMAGE */

    .about-quality-v2-visual {
        width: 100%;
        max-width: 680px;

        margin: 0 auto;
    }

    .about-quality-v2-image-wrap {
        min-height: 750px;

        border-radius:
            260px 260px 0 0;
    }


    /* CONTENT */

    .about-quality-v2-content {
        max-width: 760px;

        margin: 0 auto;

        padding: 0;
    }

    .about-quality-v2-intro h2 {
        font-size:
            clamp(
                54px,
                8vw,
                76px
            );
    }

    .about-quality-v2-story h3 {
        font-size:
            clamp(
                43px,
                6vw,
                58px
            );
    }


    /* QUOTE */

    .about-quality-v2-quote {
        margin-top: 65px;

        grid-template-columns:
            170px 1px 1fr 65px;

        gap: 28px;
    }

}


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

@media (max-width: 650px) {

    .about-quality-v2 {
        padding:
            70px 0 55px;
    }

    .about-quality-v2-container {
        width:
            calc(100% - 30px);
    }


    /* BACKGROUND WORD */

    .about-quality-v2-bg {
        top: 5px;

        font-size: 100px;
    }


    /* IMAGE */

    .about-quality-v2-grid {
        gap: 50px;
    }

    .about-quality-v2-image-wrap {
        min-height: 540px;

        border-radius:
            170px 170px 0 0;
    }

    .about-quality-v2-image-copy {
        top: 28%;
        left: 8%;
    }

    .about-quality-v2-image-copy span {
        font-size: 27px;
    }

    .about-quality-v2-badge {
        width: 105px;
        height: 105px;

        top: 16%;
        right: 6%;
    }


    /* MAIN TITLE */

    .about-quality-v2-kicker {
        margin-bottom: 18px;
    }

    .about-quality-v2-kicker > span {
        width: 35px;
    }

    .about-quality-v2-intro h2 {
        font-size: 47px;
        line-height: 0.97;
    }

    .about-quality-v2-intro > p {
        margin-top: 23px;

        font-size: 14px;
        line-height: 1.75;
    }


    /* BAGASSE */

    .about-quality-v2-story {
        margin-top: 38px;
    }

    .about-quality-v2-story h3 {
        font-size: 39px;
        line-height: 1;
    }

    .about-quality-v2-story > p {
        margin-top: 20px;

        font-size: 14px;
        line-height: 1.75;
    }


    /* POINTS */

    .about-quality-v2-points {
        grid-template-columns: 1fr;

        margin-top: 35px;
    }

    .about-quality-v2-point,
    .about-quality-v2-point:nth-child(odd),
    .about-quality-v2-point:nth-child(even) {
        min-height: auto;

        padding:
            22px 0;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(210, 174, 115, 0.3);
    }

    .about-quality-v2-point:last-child {
        border-bottom: 0;
    }

    .about-quality-v2-point:nth-child(odd):hover,
    .about-quality-v2-point:nth-child(even):hover {
        padding-left: 7px;
    }

    .about-quality-v2-point p {
        max-width: 100%;
    }


    /* QUOTE */

    .about-quality-v2-quote {
        margin-top: 45px;

        grid-template-columns: 1fr;

        gap: 22px;

        padding:
            32px 0
            25px;
    }

    .about-quality-v2-quote-divider {
        width: 55px;
        height: 1px;
    }

    .about-quality-v2-quote blockquote {
        max-width: 470px;

        font-size: 24px;
        line-height: 1.35;
    }

    .about-quality-v2-quote-arrow {
        width: 55px;
        height: 55px;

        justify-self: start;

        margin-top: 5px;
    }

}


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

@media (max-width: 400px) {

    .about-quality-v2-container {
        width:
            calc(100% - 24px);
    }

    .about-quality-v2-image-wrap {
        min-height: 470px;

        border-radius:
            145px 145px 0 0;
    }

    .about-quality-v2-image-copy span {
        font-size: 23px;
    }

    .about-quality-v2-badge {
        width: 90px;
        height: 90px;
    }

    .about-quality-v2-badge-icon {
        font-size: 19px;
    }

    .about-quality-v2-intro h2 {
        font-size: 41px;
    }

    .about-quality-v2-story h3 {
        font-size: 35px;
    }

    .about-quality-v2-number {
        font-size: 24px;
    }

}

/* =========================================================
   PULPBASE ABOUT
   VISION & MISSION — MINIMAL PREMIUM
========================================================= */

.vm-section {
    position: relative;
    padding: 110px 0 70px;
    background: #f6f2e9;
    overflow: hidden;
}

.vm-container {
    width: min(1450px, calc(100% - 80px));
    margin: 0 auto;
}


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

.vm-header {
    max-width: 850px;
    margin: 0 auto 75px;
    text-align: center;
}

.vm-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 22px;
}

.vm-eyebrow span {
    width: 95px;
    height: 1px;
    background: rgba(46, 73, 49, .35);
}

.vm-eyebrow strong {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: #2e4931;
}

.vm-header h2 {
    margin: 0;

    font-size: clamp(55px, 5.3vw, 84px);
    line-height: .94;
    font-weight: 500;
    letter-spacing: -.05em;

    color: #29432d;
}

.vm-header h2 span {
    display: block;
    color: #ad7c45;
}

.vm-header > p {
    max-width: 700px;
    margin: 25px auto 0;

    font-size: 15px;
    line-height: 1.75;

    color: #67685f;
}


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

.vm-layout {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(280px, .85fr)
        minmax(390px, 1.15fr)
        minmax(280px, .85fr);

    gap: clamp(40px, 5vw, 80px);
    align-items: center;
}


/* =========================================================
   VISION / MISSION PANELS
========================================================= */

.vm-panel {
    position: relative;

    min-height: 570px;

    padding: 55px 35px 45px;

    border-top: 1px solid rgba(46, 73, 49, .28);
}


/* curved outer line */

.vm-panel::before {
    content: "";

    position: absolute;
    top: -1px;

    width: 115px;
    height: 115px;

    pointer-events: none;
}

.vm-vision::before {
    right: 0;

    border-top: 1px solid rgba(46, 73, 49, .18);
    border-right: 1px solid rgba(46, 73, 49, .18);

    border-radius: 0 100px 0 0;
}

.vm-mission::before {
    left: 0;

    border-top: 1px solid rgba(46, 73, 49, .18);
    border-left: 1px solid rgba(46, 73, 49, .18);

    border-radius: 100px 0 0 0;
}


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

.vm-panel-icon {
    width: 52px;
    height: 52px;

    margin-bottom: 30px;

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

    border-radius: 50%;

    background: #29472f;

    transition:
        transform .4s ease,
        background .4s ease;
}

.vm-panel-icon svg {
    width: 22px;
    height: 22px;

    fill: none;
    stroke: #ffffff;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vm-panel:hover .vm-panel-icon {
    transform: rotate(8deg);
    background: #a97842;
}


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

.vm-panel-label {
    display: block;
    margin-bottom: 22px;

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

    letter-spacing: .3em;
    text-transform: uppercase;

    color: #29472f;
}

.vm-panel h3 {
    margin: 0;

    font-size: clamp(38px, 3.1vw, 52px);
    line-height: 1.02;
    font-weight: 500;
    letter-spacing: -.045em;

    color: #29472f;
}

.vm-panel h3 span {
    color: #ad7c45;
}

.vm-panel-copy {
    max-width: 370px;
    margin: 26px 0 0;

    font-size: 14px;
    line-height: 1.8;

    color: #61645d;
}

.vm-small-line {
    width: 42px;
    height: 1px;

    margin: 28px 0;

    background: #b58953;

    transition: width .4s ease;
}

.vm-panel:hover .vm-small-line {
    width: 75px;
}


/* =========================================================
   VALUE ITEMS
========================================================= */

.vm-values {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.vm-value {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 15px;
    align-items: center;
}

.vm-value-icon {
    width: 38px;
    height: 38px;

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

    border-radius: 50%;

    background: rgba(46, 73, 49, .055);

    transition:
        background .3s ease,
        transform .3s ease;
}

.vm-value-icon svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: #29472f;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.vm-value > span {
    font-size: 9px;
    line-height: 1.45;
    font-weight: 700;

    letter-spacing: .17em;
    text-transform: uppercase;

    color: #4f5b50;
}

.vm-value:hover .vm-value-icon {
    background: #29472f;
    transform: translateY(-2px);
}

.vm-value:hover .vm-value-icon svg {
    stroke: #ffffff;
}


/* =========================================================
   CENTER VISUAL
========================================================= */

.vm-center {
    position: relative;

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

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


/* OUTER ORBIT */

.vm-orbit {
    position: absolute;

    width: min(100%, 510px);
    aspect-ratio: 1 / 1;

    border: 1px solid rgba(46, 73, 49, .35);
    border-radius: 50%;

    transition: transform .8s ease;
}

.vm-orbit::before {
    content: "";

    position: absolute;

    inset: 19px;

    border-top:
        1px solid rgba(169, 120, 66, .38);

    border-radius: 50%;

    transform: rotate(35deg);
}

.vm-center:hover .vm-orbit {
    transform: rotate(8deg);
}


/* =========================================================
   MAIN SPLIT CIRCLE
========================================================= */

.vm-circle {
    position: relative;
    z-index: 2;

    width: min(82%, 420px);
    aspect-ratio: 1 / 1;

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

    border-radius: 50%;
    overflow: hidden;

    box-shadow:
        0 25px 55px rgba(46, 73, 49, .12);

    transition:
        transform .6s cubic-bezier(.2,.7,.2,1);
}

.vm-center:hover .vm-circle {
    transform: scale(1.025);
}


/* =========================================================
   NATURE HALF
========================================================= */

.vm-circle-nature {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255,255,255,.15),
            transparent 3%
        ),
        linear-gradient(
            145deg,
            #355f3a,
            #173b23
        );
}

.vm-nature-texture {
    position: absolute;
    inset: 0;

    background:
        repeating-radial-gradient(
            ellipse at 100% 50%,
            transparent 0,
            transparent 22px,
            rgba(255,255,255,.06) 23px,
            transparent 24px
        );
}

.vm-nature-texture::before {
    content: "";

    position: absolute;

    width: 1px;
    height: 120%;

    left: 48%;
    top: -10%;

    background:
        rgba(255,255,255,.22);

    transform: rotate(25deg);
}


/* =========================================================
   PRODUCT HALF
========================================================= */

.vm-circle-product {
    position: relative;

    background: #ddd0b8;

    overflow: hidden;
}

.vm-circle-product img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transform: scale(1.08);

    transition: transform .7s ease;
}

.vm-center:hover
.vm-circle-product img {
    transform: scale(1.13);
}


/* =========================================================
   CSS LEAVES
========================================================= */

.vm-leaf {
    position: absolute;
    z-index: 5;

    width: 62px;
    height: 115px;

    background:
        linear-gradient(
            135deg,
            #476d3c,
            #1d4a29
        );

    border-radius:
        100% 0 100% 0;

    box-shadow:
        0 15px 25px rgba(33, 65, 39, .15);

    transition: transform .5s ease;
}

.vm-leaf span {
    position: absolute;

    width: 1px;
    height: 85%;

    top: 8%;
    left: 50%;

    background:
        rgba(255,255,255,.25);

    transform: rotate(43deg);
}

.vm-leaf-top {
    top: 70px;
    left: 14%;

    transform: rotate(-32deg);
}

.vm-leaf-bottom {
    width: 52px;
    height: 100px;

    right: 12%;
    bottom: 58px;

    transform: rotate(28deg);
}

.vm-center:hover .vm-leaf-top {
    transform:
        rotate(-25deg)
        translateY(-5px);
}

.vm-center:hover .vm-leaf-bottom {
    transform:
        rotate(35deg)
        translateY(-5px);
}


/* =========================================================
   FLOW LABELS
========================================================= */

.vm-flow-label {
    position: absolute;
    z-index: 6;

    display: flex;
    align-items: center;
    gap: 12px;
}

.vm-flow-label i {
    width: 10px;
    height: 10px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #29472f;

    border: 2px solid #d2ae73;
}

.vm-flow-label span {
    font-size: 8px;
    line-height: 1.55;
    font-weight: 700;

    letter-spacing: .2em;
    text-transform: uppercase;

    color: #29472f;
}

.vm-flow-left {
    left: -3px;
    top: 48%;

    flex-direction: row-reverse;

    text-align: right;
}

.vm-flow-right {
    right: -10px;
    top: 48%;
}


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

.vm-footer {
    margin-top: 55px;

    min-height: 125px;

    display: grid;

    grid-template-columns:
        250px 1px
        minmax(300px, 1fr)
        1px 300px;

    gap: 38px;
    align-items: center;

    padding: 30px 15px;

    border-top:
        1px solid rgba(46, 73, 49, .2);

    border-bottom:
        1px solid rgba(46, 73, 49, .2);
}


/* BRAND */

.vm-footer-brand {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.vm-footer-brand strong {
    font-size: 15px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: .32em;

    color: #1f3324;
}

.vm-footer-brand span {
    font-size: 7px;
    line-height: 1.4;

    font-weight: 600;

    letter-spacing: .2em;

    color: #77776d;
}


/* DIVIDER */

.vm-footer-divider {
    width: 1px;
    height: 45px;

    background:
        rgba(46, 73, 49, .25);
}


/* QUOTE */

.vm-footer blockquote {
    margin: 0;

    text-align: center;

    font-size: clamp(23px, 2vw, 31px);
    line-height: 1.25;

    font-weight: 400;
    font-style: italic;

    letter-spacing: -.025em;

    color: #29472f;
}

.vm-footer blockquote span {
    display: block;
}


/* END */

.vm-footer-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 22px;
}

.vm-footer-arrow {
    width: 62px;
    height: 62px;

    flex-shrink: 0;

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

    border-radius: 50%;

    background: #d2ae73;
    color: #29472f;

    font-size: 21px;

    transition:
        transform .4s ease,
        background .4s ease;
}

.vm-footer-end:hover
.vm-footer-arrow {
    transform: rotate(45deg);

    background: #e1c28d;
}

.vm-footer-end > span {
    font-size: 7px;
    line-height: 1.7;

    font-weight: 700;

    letter-spacing: .18em;
    text-transform: uppercase;

    color: #596158;
}


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

@media (max-width: 1200px) {

    .vm-container {
        width: calc(100% - 50px);
    }

    .vm-layout {
        grid-template-columns:
            minmax(250px, .9fr)
            minmax(340px, 1.1fr)
            minmax(250px, .9fr);

        gap: 35px;
    }

    .vm-panel {
        padding-left: 20px;
        padding-right: 20px;
    }

    .vm-center {
        min-height: 530px;
    }

    .vm-circle {
        width: min(78%, 370px);
    }

    .vm-orbit {
        width: min(96%, 450px);
    }

    .vm-footer {
        grid-template-columns:
            190px 1px
            1fr
            1px 240px;

        gap: 25px;
    }

}


/* =========================================================
   TABLET — STACKED PURPOSE
========================================================= */

@media (max-width: 900px) {

    .vm-section {
        padding: 90px 0 65px;
    }

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

    .vm-header {
        margin-bottom: 65px;
    }

    .vm-layout {
        max-width: 700px;

        margin: 0 auto;

        grid-template-columns: 1fr;

        gap: 50px;
    }

    .vm-panel {
        min-height: auto;

        padding:
            40px 30px
            45px;
    }

    .vm-panel-copy {
        max-width: 520px;
    }

    .vm-center {
        min-height: 620px;
    }

    .vm-circle {
        width: min(65vw, 430px);
    }

    .vm-orbit {
        width: min(78vw, 520px);
    }

    .vm-flow-left {
        left: 5%;
    }

    .vm-flow-right {
        right: 5%;
    }


    /* FOOTER */

    .vm-footer {
        max-width: 700px;

        margin:
            55px auto 0;

        grid-template-columns:
            1fr 1fr;

        gap: 30px;

        padding: 35px 0;
    }

    .vm-footer-divider {
        display: none;
    }

    .vm-footer blockquote {
        grid-column: 1 / -1;
        grid-row: 1;

        padding-bottom: 28px;

        border-bottom:
            1px solid rgba(46, 73, 49, .15);
    }

}


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

@media (max-width: 600px) {

    .vm-section {
        padding: 75px 0 55px;
    }

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


    /* HEADER */

    .vm-header {
        margin-bottom: 50px;

        text-align: left;
    }

    .vm-eyebrow {
        justify-content: flex-start;
    }

    .vm-eyebrow span {
        width: 38px;
    }

    .vm-eyebrow span:last-child {
        display: none;
    }

    .vm-header h2 {
        font-size: 46px;
        line-height: .97;
    }

    .vm-header > p {
        margin-left: 0;

        font-size: 14px;
    }


    /* PANELS */

    .vm-layout {
        gap: 40px;
    }

    .vm-panel {
        padding:
            35px 5px
            40px;
    }

    .vm-panel::before {
        display: none;
    }

    .vm-panel-icon {
        width: 48px;
        height: 48px;
    }

    .vm-panel h3 {
        font-size: 40px;
    }

    .vm-panel-copy {
        font-size: 14px;
    }


    /* CENTER */

    .vm-center {
        min-height: 450px;
    }

    .vm-circle {
        width: min(72vw, 310px);
    }

    .vm-orbit {
        width: min(88vw, 370px);
    }

    .vm-leaf-top {
        width: 43px;
        height: 80px;

        top: 50px;
        left: 8%;
    }

    .vm-leaf-bottom {
        width: 40px;
        height: 75px;

        right: 7%;
        bottom: 45px;
    }

    .vm-flow-label span {
        font-size: 6px;
    }

    .vm-flow-left {
        left: 0;
    }

    .vm-flow-right {
        right: 0;
    }


    /* FOOTER */

    .vm-footer {
        grid-template-columns: 1fr;

        gap: 24px;

        padding: 30px 0;
    }

    .vm-footer blockquote {
        grid-column: auto;
        grid-row: auto;

        padding:
            25px 0;

        text-align: left;

        border-top:
            1px solid rgba(46, 73, 49, .15);

        border-bottom:
            1px solid rgba(46, 73, 49, .15);
    }

    .vm-footer-end {
        justify-content: flex-start;
    }

}


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

@media (max-width: 390px) {

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

    .vm-header h2 {
        font-size: 40px;
    }

    .vm-panel h3 {
        font-size: 36px;
    }

    .vm-center {
        min-height: 400px;
    }

    .vm-circle {
        width: 270px;
    }

    .vm-orbit {
        width: 325px;
    }

    .vm-flow-label {
        display: none;
    }

}/* =========================================================
   VISION BLOCK — RIGHT ALIGN
========================================================= */

.vm-vision {
    text-align: right;
}


/* Main icon */

.vm-vision .vm-panel-icon {
    margin-left: auto;
    margin-right: 0;
}


/* Label */

.vm-vision .vm-panel-label {
    text-align: right;
}


/* Heading */

.vm-vision h3 {
    margin-left: auto;
    margin-right: 0;

    text-align: right;
}


/* Paragraph */

.vm-vision .vm-panel-copy {
    margin-left: auto;
    margin-right: 0;

    text-align: right;
}


/* Small gold line */

.vm-vision .vm-small-line {
    margin-left: auto;
    margin-right: 0;
}


/* =========================================================
   VISION VALUE ITEMS
========================================================= */

.vm-vision .vm-value {
    grid-template-columns: 1fr 42px;
}


/* Put icon on right */

.vm-vision .vm-value-icon {
    grid-column: 2;
    grid-row: 1;

    justify-self: end;
}


/* Put text on left of icon but align toward center */

.vm-vision .vm-value > span {
    grid-column: 1;
    grid-row: 1;

    text-align: right;
}


/* =========================================================
   MISSION — KEEP LEFT ALIGNED
========================================================= */

.vm-mission {
    text-align: left;
}

.vm-mission .vm-panel-icon {
    margin-left: 0;
    margin-right: auto;
}

.vm-mission h3,
.vm-mission .vm-panel-copy {
    margin-left: 0;
    margin-right: auto;

    text-align: left;
}

.vm-mission .vm-small-line {
    margin-left: 0;
    margin-right: auto;
}


/* =========================================================
   MOBILE
   BOTH SIDES LEFT ALIGNED FOR BETTER READABILITY
========================================================= */

@media (max-width: 600px) {

    .vm-vision {
        text-align: left;
    }

    .vm-vision .vm-panel-icon {
        margin-left: 0;
        margin-right: auto;
    }

    .vm-vision .vm-panel-label,
    .vm-vision h3,
    .vm-vision .vm-panel-copy {
        text-align: left;

        margin-left: 0;
        margin-right: auto;
    }

    .vm-vision .vm-small-line {
        margin-left: 0;
        margin-right: auto;
    }

    .vm-vision .vm-value {
        grid-template-columns: 42px 1fr;
    }

    .vm-vision .vm-value-icon {
        grid-column: 1;
        grid-row: 1;

        justify-self: start;
    }

    .vm-vision .vm-value > span {
        grid-column: 2;
        grid-row: 1;

        text-align: left;
    }

}