/*
Theme Name: Ubuntu Ltd
Theme URI: https://ubuntu.co/
Author: Ubuntu Ltd
Description: Custom WooCommerce WordPress theme for Ubuntu Ltd, South Sudan.
Version: 1.0.0
Text Domain: ubuntu
Requires at least: 6.0
Requires PHP: 8.0
*/

/* =========================================================
   YOUR EXISTING CSS STARTS BELOW
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Lora:ital,wght@0,400..700;1,400..700&family=Manrope:wght@200..800&display=swap');

/* =========================================================
   TOKENS
========================================================= */

:root {
    --bark: #13231A;
    --bark-2: #1C3124;

    --amber: #E3A62C;
    --amber-soft: #F0C86B;

    --husk: #EBEDE4;
    --husk-2: #DDE1D4;

    --clay: #A9412A;
    --leaf: #5E7C41;

    --ink: #16201A;
    --ink-60: rgba(22, 32, 26, .66);

    --paper: #FFFFFF;

    --line: rgba(19, 35, 26, .14);
    --line-dark: rgba(235, 237, 228, .16);

    /* --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --sans: "Archivo", "Helvetica Neue", Arial, sans-serif; */
    /* --serif: "Cormorant Garamond", Georgia, serif;
    --sans: "Manrope", Arial, sans-serif; */
    /* --serif: "Bodoni Moda", Georgia, serif;
    --sans: "Instrument Sans", Arial, sans-serif; */
    --serif: "Lora", Georgia, serif;
    --sans: "Bricolage Grotesque", Arial, sans-serif;

    --pad: clamp(20px, 5vw, 72px);
    --r: 14px;

    box-sizing: border-box;

    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}


html {
    scroll-padding-top:
        calc(
            78px +
            env(safe-area-inset-top, 0px)
        );

    scroll-behavior: smooth;
}


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


body {
    margin: 0;

    background: var(--husk);
    color: var(--ink);

    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;

    -webkit-font-smoothing: antialiased;

    overflow-x: hidden;
}


img,
svg {
    max-width: 100%;
}


h1,
h2,
h3,
h4 {
    font-family: var(--serif);
    font-weight: 600;

    line-height: 1.08;

    margin: 0;

    letter-spacing: -.015em;
}


h1 {
    font-size:
        clamp(
            2.6rem,
            6.4vw,
            5rem
        );

    font-variation-settings:
        "SOFT" 30,
        "WONK" 1;
}


h2 {
    font-size:
        clamp(
            2rem,
            4.2vw,
            3.2rem
        );
}


h3 {
    font-size:
        clamp(
            1.3rem,
            2.2vw,
            1.65rem
        );
}


p {
    margin:
        0 0 1em;
}


a {
    color: inherit;
}


:focus-visible {
    outline:
        3px solid var(--amber);

    outline-offset:
        3px;

    border-radius:
        4px;
}


.wrap {
    max-width:
        1280px;

    margin:
        0 auto;

    padding-inline:
        var(--pad);
}


.sec {
    padding-block:
        clamp(
            64px,
            9vw,
            128px
        );
}


.lede {
    max-width:
        60ch;

    font-size:
        1.06rem;

    color:
        var(--ink-60);
}


.kicker {
    font-family:
        var(--serif);

    font-style:
        italic;

    font-size:
        1.05rem;

    color:
        var(--clay);

    margin:
        0 0 .6rem;
}


.dark .kicker {
    color:
        var(--amber-soft);
}



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

.btn {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        .6rem;

    font-family:
        var(--sans);

    font-weight:
        600;

    font-size:
        .95rem;

    padding:
        .92rem 1.6rem;

    border-radius:
        100px;

    text-decoration:
        none;

    border:
        1.5px solid transparent;

    cursor:
        pointer;

    transition:
        transform .35s cubic-bezier(.2, .8, .3, 1),
        background .3s,
        color .3s,
        border-color .3s;
}


.btn-amber {
    background:
        var(--amber);

    color:
        var(--bark);
}


.btn-amber:hover {
    background:
        var(--amber-soft);

    transform:
        translateY(-3px);
}


.btn-ghost {
    border-color:
        currentColor;

    background:
        transparent;
}


.btn-ghost:hover {
    background:
        currentColor;

    color:
        var(--bark);

    transform:
        translateY(-3px);
}


.dark .btn-ghost:hover {
    color:
        var(--bark);
}


.btn-dark {
    background:
        var(--bark);

    color:
        var(--husk);
}


.btn-dark:hover {
    background:
        var(--bark-2);

    transform:
        translateY(-3px);
}



/* =========================================================
   REVEAL ANIMATIONS
========================================================= */

/*
 * Content stays visible until theme.js confirms that the
 * reveal observer is active. This prevents blank WordPress
 * sections if JavaScript is delayed or unavailable.
 */

.rv {
    opacity:
        1;

    transform:
        none;

    transition:
        opacity .9s cubic-bezier(.2, .8, .3, 1),
        transform .9s cubic-bezier(.2, .8, .3, 1);
}


html.reveal-enabled .rv {
    opacity:
        0;
}


html.reveal-enabled .rv-l {
    transform:
        translateX(-56px);
}


html.reveal-enabled .rv-r {
    transform:
        translateX(56px);
}


html.reveal-enabled .rv-u {
    transform:
        translateY(56px);
}


html.reveal-enabled .rv-s {
    transform:
        scale(.94);
}


html.reveal-enabled .rv.in {
    opacity:
        1;

    transform:
        none;
}


[data-delay="1"] {
    transition-delay:
        .12s;
}


[data-delay="2"] {
    transition-delay:
        .24s;
}


[data-delay="3"] {
    transition-delay:
        .36s;
}


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

    html {
        scroll-behavior:
            auto;
    }

    .rv,
    html.reveal-enabled .rv {
        opacity:
            1;

        transform:
            none;

        transition:
            none;
    }

    * {
        animation-duration:
            .001ms !important;

        transition-duration:
            .08s !important;
    }
}



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

.hdr {
    position:
        fixed;

    top:
        0;

    left:
        0;

    right:
        0;

    z-index:
        60;

    padding:
        calc(
            env(
                safe-area-inset-top,
                0px
            ) + 14px
        )
        var(--pad)
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    color:
        var(--husk);

    transition:
        background .45s,
        box-shadow .45s,
        padding .45s;
}


.hdr.stuck {
    background:
        rgba(
            19,
            35,
            26,
            .94
        );

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 1px 0
        var(--line-dark);
}


.brand {
    display:
        flex;

    align-items:
        center;

    gap:
        .65rem;

    text-decoration:
        none;

    font-family:
        var(--serif);

    font-size:
        1.5rem;

    font-weight:
        600;

    letter-spacing:
        -.02em;
}


.brand small {
    display:
        block;

    font-family:
        var(--sans);

    font-size:
        .58rem;

    font-weight:
        600;

    letter-spacing:
        .24em;

    opacity:
        .7;

    margin-top:
        -2px;
}


.nav {
    display:
        flex;

    align-items:
        center;

    gap:
        clamp(
            14px,
            2.2vw,
            32px
        );
}


.nav a {
    text-decoration:
        none;

    font-size:
        .93rem;

    font-weight:
        500;

    position:
        relative;

    padding:
        4px 0;
}


.nav a::after {
    content:
        "";

    position:
        absolute;

    left:
        0;

    bottom:
        0;

    height:
        1.5px;

    width:
        0;

    background:
        var(--amber);

    transition:
        width .4s
        cubic-bezier(
            .2,
            .8,
            .3,
            1
        );
}


.nav a:hover::after,
.nav a[aria-current]::after {
    width:
        100%;
}


.hdr-cta {
    display:
        flex;

    align-items:
        center;

    gap:
        14px;
}


.cart-btn {
    display:
        flex;

    align-items:
        center;

    gap:
        .45rem;

    background:
        none;

    border:
        0;

    color:
        inherit;

    font:
        inherit;

    font-size:
        .9rem;

    cursor:
        pointer;

    padding:
        6px;
}


.cart-count {
    background:
        var(--amber);

    color:
        var(--bark);

    font-size:
        .72rem;

    font-weight:
        700;

    min-width:
        20px;

    height:
        20px;

    border-radius:
        99px;

    display:
        grid;

    place-items:
        center;

    transition:
        transform .3s;
}


.cart-count.pop {
    transform:
        scale(1.45);
}


.burger {
    display:
        none;

    background:
        none;

    border:
        0;

    color:
        inherit;

    padding:
        8px;

    cursor:
        pointer;
}



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

.hero {
    position:
        relative;

    min-height:
        100svh;

    display:
        grid;

    align-items:
        center;

    background:
        var(--bark);

    color:
        var(--husk);

    overflow:
        hidden;

    isolation:
        isolate;
}


.hero-art {
    position:
        absolute;

    inset:
        0;

    z-index:
        -2;
}


.hero-art img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.hero::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    background:
        radial-gradient(
            120% 90%
            at
            50% 110%,
            rgba(227, 166, 44, .26),
            transparent 62%
        ),
        linear-gradient(
            180deg,
            rgba(19, 35, 26, .86),
            rgba(19, 35, 26, .5) 45%,
            rgba(19, 35, 26, .92)
        );
}


.slides {
    position:
        relative;

    padding-block:
        170px 120px;

    min-height:
        100svh;

    display:
        grid;
}


.slide {
    grid-area:
        1 / 1;

    max-width:
        820px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    pointer-events:
        none;

    opacity:
        0;

    visibility:
        hidden;
}


.slide.active {
    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}


.slide h2 {
    font-size:
        clamp(
            1rem,
            1.7vw,
            1.3rem
        );

    font-family:
        var(--sans);

    font-weight:
        600;

    letter-spacing:
        .16em;

    color:
        var(--amber);

    margin-bottom:
        1.1rem;
}


.slide h1 {
    margin-bottom:
        1.3rem;

    font-weight:
        400;
}


.slide p {
    font-size:
        clamp(
            1.02rem,
            1.5vw,
            1.22rem
        );

    max-width:
        54ch;

    color:
        rgba(
            235,
            237,
            228,
            .84
        );
}


.slide .acts {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        1.4rem;
}


.slide.active h2 {
    animation:
        inL .95s
        cubic-bezier(
            .16,
            .84,
            .3,
            1
        )
        both;
}


.slide.active h1 {
    animation:
        inR 1.05s .12s
        cubic-bezier(
            .16,
            .84,
            .3,
            1
        )
        both;
}


.slide.active p {
    animation:
        inU .95s .3s
        cubic-bezier(
            .16,
            .84,
            .3,
            1
        )
        both;
}


.slide.active .acts {
    animation:
        inU .95s .44s
        cubic-bezier(
            .16,
            .84,
            .3,
            1
        )
        both;
}


@keyframes inL {

    from {
        opacity:
            0;

        transform:
            translateX(-70px);
    }

    to {
        opacity:
            1;

        transform:
            none;
    }
}


@keyframes inR {

    from {
        opacity:
            0;

        transform:
            translateX(80px);
    }

    to {
        opacity:
            1;

        transform:
            none;
    }
}


@keyframes inU {

    from {
        opacity:
            0;

        transform:
            translateY(48px);
    }

    to {
        opacity:
            1;

        transform:
            none;
    }
}


.dots {
    position:
        absolute;

    bottom:
        clamp(
            28px,
            6vh,
            56px
        );

    left:
        var(--pad);

    display:
        flex;

    gap:
        10px;

    z-index:
        5;
}


.dots button {
    width:
        34px;

    height:
        4px;

    border:
        0;

    padding:
        0;

    border-radius:
        99px;

    background:
        rgba(
            235,
            237,
            228,
            .3
        );

    cursor:
        pointer;

    transition:
        background .4s,
        width .4s;
}


.dots button[aria-selected="true"] {
    background:
        var(--amber);

    width:
        56px;
}


.scrollcue {
    position:
        absolute;

    bottom:
        clamp(
            26px,
            6vh,
            54px
        );

    right:
        var(--pad);

    font-size:
        .76rem;

    letter-spacing:
        .2em;

    color:
        rgba(
            235,
            237,
            228,
            .6
        );

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.scrollcue i {
    display:
        block;

    width:
        1px;

    height:
        44px;

    background:
        linear-gradient(
            var(--amber),
            transparent
        );

    animation:
        cue 2.4s infinite;
}


@keyframes cue {

    0% {
        transform:
            scaleY(0);

        transform-origin:
            top;
    }

    45% {
        transform:
            scaleY(1);

        transform-origin:
            top;
    }

    55% {
        transform:
            scaleY(1);

        transform-origin:
            bottom;
    }

    100% {
        transform:
            scaleY(0);

        transform-origin:
            bottom;
    }
}



/* =========================================================
   THREE-COLUMN SECTION
========================================================= */

.tri {
    display:
        grid;

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

    gap:
        clamp(
            24px,
            4vw,
            56px
        );

    align-items:
        center;
}


.tri-art {
    border-radius:
        200px 200px
        var(--r)
        var(--r);

    overflow:
        hidden;

    background:
        var(--bark);

    aspect-ratio:
        3 / 4;
}


.tri-col h3 {
    margin-bottom:
        .7rem;
}


.tri-col p {
    color:
        var(--ink-60);

    font-size:
        1rem;
}


.tri-col .btn {
    margin-top:
        .4rem;
}


.tri-stat {
    font-family:
        var(--serif);

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

    color:
        var(--clay);

    line-height:
        1;

    margin-bottom:
        .3rem;
}



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

.cats {
    display:
        grid;

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

    gap:
        clamp(
            18px,
            2.4vw,
            30px
        );

    margin-top:
        48px;
}


.cat {
    position:
        relative;

    display:
        block;

    text-decoration:
        none;

    border-radius:
        var(--r);

    overflow:
        hidden;

    background:
        var(--bark);

    aspect-ratio:
        4 / 5;

    isolation:
        isolate;
}


.cat-art {
    position:
        absolute;

    inset:
        0;

    transition:
        transform 1s
        cubic-bezier(
            .2,
            .8,
            .3,
            1
        );
}


.cat::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            transparent 36%,
            rgba(19,35,26,.9)
        );
}


.cat-body {
    position:
        absolute;

    inset:
        auto 0 0 0;

    z-index:
        2;

    padding:
        26px;

    color:
        var(--husk);

    transform:
        translateY(
            calc(
                100% - 92px
            )
        );

    transition:
        transform .6s
        cubic-bezier(
            .2,
            .8,
            .3,
            1
        );
}


.cat-body p {
    font-size:
        .94rem;

    color:
        rgba(
            235,
            237,
            228,
            .8
        );

    margin:
        .6rem 0 1rem;

    opacity:
        0;

    transition:
        opacity .5s .1s;
}


.cat-body .shoplink {
    font-size:
        .88rem;

    font-weight:
        600;

    color:
        var(--amber);

    opacity:
        0;

    transition:
        opacity .5s .16s;
}


.cat:hover .cat-art,
.cat:focus-visible .cat-art {
    transform:
        scale(1.07);
}


.cat:hover .cat-body,
.cat:focus-visible .cat-body {
    transform:
        none;
}


.cat:hover .cat-body p,
.cat:hover .cat-body .shoplink,
.cat:focus-visible .cat-body p,
.cat:focus-visible .cat-body .shoplink {
    opacity:
        1;
}



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

.feat {
    background:
        var(--bark);

    color:
        var(--husk);
}


.feat-grid {
    display:
        grid;

    grid-template-columns:
        1.05fr 1fr;

    gap:
        clamp(
            30px,
            5vw,
            80px
        );

    align-items:
        center;
}


.feat-art {
    border-radius:
        var(--r);

    background:
        linear-gradient(
            160deg,
            #1E3527,
            #13231A
        );

    position:
        relative;

    overflow:
        hidden;

    aspect-ratio:
        1;
}


.badge {
    position:
        absolute;

    top:
        22px;

    left:
        22px;

    z-index:
        3;

    background:
        var(--clay);

    color:
        #fff;

    font-size:
        .74rem;

    font-weight:
        700;

    letter-spacing:
        .1em;

    padding:
        .45rem .9rem;

    border-radius:
        99px;
}


.stars {
    display:
        flex;

    gap:
        3px;

    align-items:
        center;

    color:
        var(--amber);

    font-size:
        .95rem;
}


.stars span {
    color:
        rgba(
            235,
            237,
            228,
            .6
        );

    font-size:
        .86rem;

    margin-left:
        .5rem;
}


.price {
    display:
        flex;

    align-items:
        baseline;

    gap:
        .8rem;

    margin:
        1.1rem 0 1.2rem;
}


.price b {
    font-family:
        var(--serif);

    font-size:
        2.5rem;

    color:
        var(--amber);
}


.price s {
    color:
        rgba(
            235,
            237,
            228,
            .5
        );
}


.price em {
    font-style:
        normal;

    font-size:
        .82rem;

    font-weight:
        600;

    color:
        var(--leaf);

    background:
        rgba(
            94,
            124,
            65,
            .18
        );

    padding:
        .3rem .65rem;

    border-radius:
        99px;
}


.opts {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-bottom:
        1.5rem;
}


.opt {
    background:
        transparent;

    border:
        1.5px solid
        var(--line-dark);

    color:
        inherit;

    font:
        inherit;

    font-size:
        .88rem;

    padding:
        .55rem 1rem;

    border-radius:
        99px;

    cursor:
        pointer;

    transition:
        border-color .3s,
        background .3s,
        transform .3s;
}


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

    border-color:
        var(--amber);
}


.opt[aria-pressed="true"] {
    background:
        var(--amber);

    border-color:
        var(--amber);

    color:
        var(--bark);

    font-weight:
        600;
}


.buyrow {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        14px;
}


.qty {
    display:
        flex;

    align-items:
        center;

    border:
        1.5px solid
        var(--line-dark);

    border-radius:
        99px;

    overflow:
        hidden;
}


.qty button {
    background:
        none;

    border:
        0;

    color:
        inherit;

    font-size:
        1.15rem;

    width:
        42px;

    height:
        46px;

    cursor:
        pointer;
}


.qty button:hover {
    background:
        rgba(
            235,
            237,
            228,
            .1
        );
}


.qty output {
    min-width:
        34px;

    text-align:
        center;

    font-weight:
        600;
}


.feat-meta {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        20px;

    margin-top:
        1.7rem;

    padding-top:
        1.4rem;

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

    font-size:
        .86rem;

    color:
        rgba(
            235,
            237,
            228,
            .68
        );
}



/* =========================================================
   STATS
========================================================= */

.stats {
    display:
        grid;

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

    gap:
        clamp(
            20px,
            3vw,
            42px
        );

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

    padding-top:
        54px;
}


.stat b {
    display:
        block;

    font-family:
        var(--serif);

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

    font-weight:
        400;

    color:
        var(--clay);

    line-height:
        1;

    letter-spacing:
        -.03em;
}


.stat p {
    margin:
        .6rem 0 0;

    font-size:
        .95rem;

    color:
        var(--ink-60);

    max-width:
        24ch;
}



/* =========================================================
   WHY US
========================================================= */

.why {
    background:
        var(--paper);
}


.why-grid {
    display:
        grid;

    grid-template-columns:
        .85fr 1.15fr;

    gap:
        clamp(
            30px,
            5vw,
            80px
        );
}


.why-list {
    display:
        grid;

    gap:
        2px;

    background:
        var(--line);

    border-radius:
        var(--r);

    overflow:
        hidden;
}


.why-item {
    background:
        var(--paper);

    padding:
        clamp(
            22px,
            3vw,
            34px
        );

    display:
        grid;

    grid-template-columns:
        52px 1fr;

    gap:
        22px;

    align-items:
        start;

    transition:
        background .45s;
}


.why-item:hover {
    background:
        var(--husk);
}


.why-item > img {
    width:
        44px;

    height:
        44px;

    color:
        var(--leaf);
}


.why-item h3 {
    font-size:
        1.18rem;

    margin-bottom:
        .35rem;
}


.why-item p {
    margin:
        0;

    font-size:
        .96rem;

    color:
        var(--ink-60);
}



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

.quotes {
    position:
        relative;

    color:
        var(--husk);

    overflow:
        hidden;

    isolation:
        isolate;
}


.quotes-bg {
    position:
        absolute;

    inset:
        0;

    z-index:
        -2;
}


.quotes::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        -1;

    background:
        linear-gradient(
            105deg,
            rgba(
                19,
                35,
                26,
                .94
            )
            38%,
            rgba(
                19,
                35,
                26,
                .72
            )
        );
}


.q-grid {
    display:
        grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:
        clamp(
            24px,
            5vw,
            72px
        );

    align-items:
        end;
}


.q-figure {
    align-self:
        end;

    filter:
        drop-shadow(
            0 30px 50px
            rgba(
                0,
                0,
                0,
                .45
            )
        );
}


.q-slider {
    position:
        relative;

    padding-bottom:
        64px;

    display:
        grid;
}


.q {
    grid-area:
        1 / 1;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(22px);

    transition:
        opacity .7s,
        transform .7s;
}


.q.active {
    opacity:
        1;

    visibility:
        visible;

    transform:
        none;
}


.q blockquote {
    margin:
        0 0 1.5rem;

    font-family:
        var(--serif);

    font-size:
        clamp(
            1.35rem,
            2.6vw,
            2rem
        );

    line-height:
        1.34;

    font-weight:
        400;
}


.q cite {
    font-style:
        normal;

    display:
        block;

    font-weight:
        600;

    font-size:
        1rem;
}


.q cite span {
    display:
        block;

    font-weight:
        400;

    font-size:
        .88rem;

    color:
        rgba(
            235,
            237,
            228,
            .62
        );

    margin-top:
        .15rem;
}


.q .stars {
    margin-bottom:
        1.2rem;
}


.q-dots {
    position:
        absolute;

    left:
        0;

    bottom:
        0;

    display:
        flex;

    gap:
        10px;
}


.q-dots button {
    width:
        10px;

    height:
        10px;

    border-radius:
        99px;

    border:
        1.5px solid
        rgba(
            235,
            237,
            228,
            .45
        );

    background:
        transparent;

    cursor:
        pointer;

    padding:
        0;

    transition:
        background .35s,
        transform .35s,
        border-color .35s;
}


.q-dots button[aria-selected="true"] {
    background:
        var(--amber);

    border-color:
        var(--amber);

    transform:
        scale(1.25);
}



/* =========================================================
   PARTNERS
========================================================= */

.partners {
    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        clamp(
            26px,
            5vw,
            64px
        );

    margin-top:
        36px;
}


.partners img {
    height:
        34px;

    width:
        auto;

    color:
        var(--ink);

    opacity:
        .42;

    transition:
        opacity .4s,
        transform .4s;
}


.partners a:hover img {
    opacity:
        1;

    transform:
        translateY(-3px);
}



/* =========================================================
   PHOTO HIGHLIGHTS
========================================================= */

.moments {
    display:
        grid;

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

    grid-auto-rows:
        150px;

    gap:
        14px;

    margin-top:
        44px;
}


.moment {
    border-radius:
        var(--r);

    overflow:
        hidden;

    position:
        relative;

    background:
        var(--bark-2);
}


.moment img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    transition:
        transform 1.1s
        cubic-bezier(
            .2,
            .8,
            .3,
            1
        );
}


.moment:hover img {
    transform:
        scale(1.08);
}


.moment figcaption {
    position:
        absolute;

    inset:
        auto 0 0 0;

    padding:
        14px 16px;

    font-size:
        .82rem;

    color:
        var(--husk);

    background:
        linear-gradient(
            transparent,
            rgba(
                19,
                35,
                26,
                .88
            )
        );

    opacity:
        0;

    transform:
        translateY(8px);

    transition:
        opacity .45s,
        transform .45s;
}


.moment:hover figcaption {
    opacity:
        1;

    transform:
        none;
}


.m-tall {
    grid-row:
        span 2;
}


.m-wide {
    grid-column:
        span 2;
}



/* =========================================================
   BLOG
========================================================= */

.blog-heading {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        20px;

    align-items:
        end;

    justify-content:
        space-between;
}


.posts {
    display:
        grid;

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

    gap:
        clamp(
            20px,
            3vw,
            34px
        );

    margin-top:
        46px;
}


.post {
    background:
        var(--paper);

    border-radius:
        var(--r);

    overflow:
        hidden;

    text-decoration:
        none;

    display:
        flex;

    flex-direction:
        column;

    transition:
        transform .5s
        cubic-bezier(
            .2,
            .8,
            .3,
            1
        ),
        box-shadow .5s;
}


.post:hover {
    transform:
        translateY(-8px);

    box-shadow:
        0 22px 44px
        rgba(
            19,
            35,
            26,
            .14
        );
}


.post-art {
    aspect-ratio:
        16 / 10;

    background:
        var(--bark-2);

    overflow:
        hidden;
}


.post-body {
    padding:
        24px 26px 28px;
}


.post-date {
    font-size:
        .8rem;

    color:
        var(--clay);

    font-weight:
        600;

    margin-bottom:
        .6rem;

    display:
        block;
}


.post h3 {
    font-size:
        1.2rem;

    margin-bottom:
        .5rem;
}


.post p {
    font-size:
        .94rem;

    color:
        var(--ink-60);

    margin:
        0;
}



/* =========================================================
   SHOP CTA
========================================================= */

.shopcta {
    background:
        var(--amber);

    color:
        var(--bark);

    position:
        relative;

    overflow:
        hidden;
}


.shopcta-inner {
    display:
        grid;

    grid-template-columns:
        1.2fr .8fr;

    gap:
        40px;

    align-items:
        center;
}


.shopcta h2 {
    font-size:
        clamp(
            2.2rem,
            5vw,
            3.6rem
        );

    max-width:
        16ch;

    font-weight:
        400;
}


.shopcta p {
    max-width:
        46ch;

    color:
        rgba(
            19,
            35,
            26,
            .76
        );
}


.shopcta-actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

    margin-top:
        1.4rem;
}


.shopcta-art {
    justify-self:
        end;

    filter:
        drop-shadow(
            0 26px 40px
            rgba(
                19,
                35,
                26,
                .28
            )
        );
}



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

.ft {
    background:
        var(--bark);

    color:
        rgba(
            235,
            237,
            228,
            .72
        );

    padding-block:
        clamp(
            56px,
            7vw,
            88px
        )
        32px;
}


.ft-grid {
    display:
        grid;

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

    gap:
        clamp(
            24px,
            4vw,
            48px
        );
}


.ft h4 {
    font-family:
        var(--sans);

    font-size:
        .8rem;

    letter-spacing:
        .16em;

    color:
        var(--husk);

    margin:
        0 0 1rem;

    font-weight:
        700;
}


.ft ul {
    list-style:
        none;

    margin:
        0;

    padding:
        0;

    display:
        grid;

    gap:
        .6rem;

    font-size:
        .94rem;
}


.ft a {
    text-decoration:
        none;

    transition:
        color .3s;
}


.ft a:hover {
    color:
        var(--amber);
}


.ft .brand {
    color:
        var(--husk);

    margin-bottom:
        1rem;
}


.ft-note {
    max-width:
        34ch;

    font-size:
        .94rem;
}


.ft-sub {
    display:
        flex;

    gap:
        8px;

    margin-top:
        1rem;
}


.ft-sub input {
    flex:
        1;

    min-width:
        0;

    background:
        transparent;

    border:
        1.5px solid
        var(--line-dark);

    border-radius:
        99px;

    padding:
        .7rem 1.1rem;

    color:
        var(--husk);

    font:
        inherit;

    font-size:
        .9rem;
}


.ft-sub input::placeholder {
    color:
        rgba(
            235,
            237,
            228,
            .45
        );
}


.ft-btm {
    margin-top:
        clamp(
            40px,
            6vw,
            64px
        );

    padding-top:
        24px;

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

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    justify-content:
        space-between;

    font-size:
        .85rem;
}


.visually-hidden {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    padding:
        0;

    margin:
        -1px;

    overflow:
        hidden;

    clip:
        rect(0, 0, 0, 0);

    white-space:
        nowrap;

    border:
        0;
}



/* =========================================================
   TOAST
========================================================= */

.toast {
    position:
        fixed;

    left:
        50%;

    bottom:
        28px;

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

    background:
        var(--bark);

    color:
        var(--husk);

    padding:
        .9rem 1.5rem;

    border-radius:
        99px;

    font-size:
        .92rem;

    z-index:
        90;

    box-shadow:
        0 18px 40px
        rgba(
            0,
            0,
            0,
            .3
        );

    transition:
        transform .55s
        cubic-bezier(
            .2,
            .8,
            .3,
            1
        );
}


.toast.show {
    transform:
        translate(
            -50%,
            0
        );
}



/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 920px) {

    .nav {
        position:
            fixed;

        inset:
            0 0 0 auto;

        width:
            min(
                80vw,
                320px
            );

        background:
            var(--bark);

        flex-direction:
            column;

        justify-content:
            center;

        gap:
            28px;

        transform:
            translateX(100%);

        transition:
            transform .5s
            cubic-bezier(
                .2,
                .8,
                .3,
                1
            );
    }


    .nav.open {
        transform:
            none;
    }


    .nav a {
        font-size:
            1.15rem;
    }


    .burger {
        display:
            flex;

        order:
            3;
    }


    .hdr-cta .btn {
        display:
            none;
    }


    .tri {
        grid-template-columns:
            1fr;

        gap:
            38px;
    }


    .tri-art {
        order:
            -1;

        aspect-ratio:
            4 / 3;

        border-radius:
            var(--r);
    }


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


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


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


    .q-figure {
        max-width:
            280px;
    }

}



@media (max-width: 860px) {

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


    .cat {
        aspect-ratio:
            16 / 10;
    }


    .cat-body {
        transform:
            none;
    }


    .cat-body p,
    .cat-body .shoplink {
        opacity:
            1;
    }


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


    .shopcta-inner {
        grid-template-columns:
            1fr;
    }


    .shopcta-art {
        justify-self:
            start;

        max-width:
            260px;
    }


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

}



@media (max-width: 820px) {

    .stats {
        grid-template-columns:
            1fr 1fr;

        gap:
            34px;
    }


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

        grid-auto-rows:
            130px;
    }

}



@media (max-width: 640px) {

    .scrollcue {
        display:
            none;
    }


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


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


    .shopcta h2 {
        max-width:
            none;
    }

}


/* =========================================================
   REAL IMAGE ASSETS
   These rules replace the old inline-SVG artwork without
   changing the original section proportions or visual rhythm.
========================================================= */

.brand-logo {
    display:
        block;

    width:
        100px;

    height:
        auto;

    object-fit:
        contain;

    flex-shrink:
        0;
}


.cart-icon {
    display:
        block;

    width:
        20px;

    height:
        20px;

    object-fit:
        contain;
}


.tri-art img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 1s cubic-bezier(.2, .8, .3, 1);
}


.tri-art:hover img {
    transform:
        scale(1.04);
}


.cat-art img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}


.feat-art {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.feat-art > img {
    width:
        82%;

    height:
        82%;

    object-fit:
        contain;

    filter:
        drop-shadow(
            0 30px 35px
            rgba(0, 0, 0, .28)
        );

    transition:
        transform .7s cubic-bezier(.2, .8, .3, 1);
}


.feat-art:hover > img {
    transform:
        translateY(-8px)
        scale(1.025);
}


.quotes-bg img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;
}


.q-figure img {
    display:
        block;

    width:
        100%;

    max-height:
        540px;

    object-fit:
        contain;

    object-position:
        bottom center;
}


.partners a {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.partners img {
    max-width:
        150px;

    object-fit:
        contain;

    filter:
        grayscale(1);
}


.partners a:hover img {
    filter:
        grayscale(0);
}


.post-art img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform .7s cubic-bezier(.2, .8, .3, 1);
}


.post:hover .post-art img {
    transform:
        scale(1.055);
}


.shopcta-art img {
    display:
        block;

    width:
        min(100%, 430px);

    max-height:
        470px;

    object-fit:
        contain;
}


/* =========================================================
   HTML BURGER ICON
========================================================= */

.burger {
    width:
        42px;

    height:
        42px;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;
}


.burger span {
    display:
        block;

    width:
        24px;

    height:
        1.5px;

    background:
        currentColor;

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


.burger[aria-expanded="true"] span:nth-child(1) {
    transform:
        translateY(6.5px)
        rotate(45deg);
}


.burger[aria-expanded="true"] span:nth-child(2) {
    opacity:
        0;
}


.burger[aria-expanded="true"] span:nth-child(3) {
    transform:
        translateY(-6.5px)
        rotate(-45deg);
}


/* =========================================================
   WORDPRESS COMPATIBILITY
========================================================= */

.custom-logo-link {
    display:
        block;

    line-height:
        0;
}


.custom-logo {
    display:
        block;

    width:
        100px;

    height:
        auto;
}


.admin-bar .hdr {
    top:
        32px;
}


.nav .menu-item {
    list-style:
        none;
}


.nav .current-menu-item > a::after,
.nav .current_page_item > a::after {
    width:
        100%;
}


.wp-post-image {
    display:
        block;

    width:
        100%;

    height:
        auto;
}


/* =========================================================
   WOOCOMMERCE NOTICES
========================================================= */

.woocommerce-notices-wrapper {
    position:
        relative;

    z-index:
        10;
}


.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    margin:
        0;

    border:
        0;

    border-radius:
        0;

    padding:
        16px var(--pad);

    font-family:
        var(--sans);
}


.woocommerce-message {
    background:
        var(--leaf);

    color:
        #fff;
}


.woocommerce-info {
    background:
        var(--amber);

    color:
        var(--bark);
}


.woocommerce-error {
    background:
        var(--clay);

    color:
        #fff;
}


@media screen and (max-width: 782px) {

    .admin-bar .hdr {
        top:
            46px;
    }
}


/* =========================================================
   REVEAL FAILSAFE
========================================================= */

html:not(.reveal-enabled) .rv {
    opacity:
        1 !important;

    transform:
        none !important;
}







/* =========================================================
   WORDPRESS RESTORATION / VISUAL FIXES
   Keeps original homepage appearance intact
========================================================= */


/* =========================================================
   SCROLL REVEALS
========================================================= */

.rv {
    opacity: 1;
    transform: none;

    transition:
        opacity .9s cubic-bezier(.2, .8, .3, 1),
        transform .9s cubic-bezier(.2, .8, .3, 1);
}


/*
Only enter the hidden animation starting state
after JavaScript is confirmed active.
*/

html.reveal-enabled .rv {
    opacity: 0;
}


html.reveal-enabled .rv-l {
    transform: translateX(-56px);
}


html.reveal-enabled .rv-r {
    transform: translateX(56px);
}


html.reveal-enabled .rv-u {
    transform: translateY(56px);
}


html.reveal-enabled .rv-s {
    transform: scale(.94);
}


html.reveal-enabled .rv.in {
    opacity: 1;
    transform: none;
}


[data-delay="1"] {
    transition-delay: .12s;
}


[data-delay="2"] {
    transition-delay: .24s;
}


[data-delay="3"] {
    transition-delay: .36s;
}


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

.hdr {
    background: transparent;

    transition:
        background-color .45s ease,
        backdrop-filter .45s ease,
        box-shadow .45s ease,
        padding .45s ease;
}


.hdr.stuck {
    background-color: rgba(19, 35, 26, .96) !important;

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

    box-shadow:
        0 1px 0
        rgba(235, 237, 228, .16);
}


/* WordPress admin toolbar */

.admin-bar .hdr {
    top: 32px;
}


@media screen and (max-width: 782px) {

    .admin-bar .hdr {
        top: 46px;
    }

}


/* =========================================================
   HERO REAL IMAGE
========================================================= */

.hero-art img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   INTRODUCTION IMAGE
========================================================= */

.tri-art img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform 1s cubic-bezier(.2, .8, .3, 1);
}


.tri-art:hover img {
    transform: scale(1.04);
}


/* =========================================================
   CATEGORY IMAGES
========================================================= */

.cat-art {
    overflow: hidden;
}


.cat-art img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/*
Keep the original category-card zoom effect.
*/

.cat:hover .cat-art,
.cat:focus-visible .cat-art {
    transform: scale(1.07);
}


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

.feat-art {
    display: flex;

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


.feat-art > img {
    display: block;

    width: 82%;
    height: 82%;

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

    filter:
        drop-shadow(
            0 30px 35px
            rgba(0, 0, 0, .28)
        );

    transition:
        transform .7s cubic-bezier(.2, .8, .3, 1);
}


.feat-art:hover > img {
    transform:
        translateY(-8px)
        scale(1.025);
}


/* =========================================================
   WHY CHOOSE UBUNTU ICONS
========================================================= */

.why-item > img {
    display: block;

    width: 44px;
    height: 44px;

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


/* =========================================================
   TESTIMONIAL BACKGROUND
========================================================= */

.quotes-bg img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   TESTIMONIAL LADY
========================================================= */

.q-figure img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 540px;

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


/* =========================================================
   PARTNER LOGOS
========================================================= */

.partners a {
    display: flex;

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


.partners img {
    display: block;

    width: auto;
    height: 34px;

    max-width: 150px;

    object-fit: contain;

    opacity: .42;

    filter: grayscale(1);

    transition:
        opacity .4s,
        filter .4s,
        transform .4s;
}


.partners a:hover img {
    opacity: 1;

    filter: grayscale(0);

    transform: translateY(-3px);
}


/* =========================================================
   MOMENTS WORTH SHARING

   IMPORTANT:
   Real photographs must COVER the original gallery boxes.
   This prevents stretching/distortion.
========================================================= */

.moment {
    position: relative;

    overflow: hidden;

    border-radius: var(--r);

    background: var(--bark-2);
}


.moment img {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

    object-fit: cover;
    object-position: center;

    transition:
        transform 1.1s cubic-bezier(.2, .8, .3, 1);
}


.moment:hover img {
    transform: scale(1.08);
}


.moment figcaption {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2;

    padding: 14px 16px;

    font-size: .82rem;

    color: var(--husk);

    background:
        linear-gradient(
            transparent,
            rgba(19, 35, 26, .88)
        );

    opacity: 0;

    transform: translateY(8px);

    transition:
        opacity .45s,
        transform .45s;
}


.moment:hover figcaption {
    opacity: 1;

    transform: none;
}


/*
Retain the original masonry/grid proportions.
*/

.m-tall {
    grid-row: span 2;
}


.m-wide {
    grid-column: span 2;
}


/* =========================================================
   BLOG IMAGES
========================================================= */

.post-art {
    overflow: hidden;
}


.post-art img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform .7s cubic-bezier(.2, .8, .3, 1);
}


.post:hover .post-art img {
    transform: scale(1.055);
}


/* =========================================================
   SHOP CTA PACKSHOT
========================================================= */

.shopcta-art img {
    display: block;

    width: min(100%, 430px);
    height: auto;

    max-height: 470px;

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


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

.brand-logo {
    display: block;

    width: 100px;
    height: auto;

    object-fit: contain;
}


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

.cart-icon {
    display: block;

    width: 20px;
    height: 20px;

    object-fit: contain;
}


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

.burger {
    width: 42px;
    height: 42px;

    flex-direction: column;

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

    gap: 5px;
}


.burger span {
    display: block;

    width: 24px;
    height: 1.5px;

    background: currentColor;

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


.burger[aria-expanded="true"] span:nth-child(1) {
    transform:
        translateY(6.5px)
        rotate(45deg);
}


.burger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}


.burger[aria-expanded="true"] span:nth-child(3) {
    transform:
        translateY(-6.5px)
        rotate(-45deg);
}


@media (max-width: 920px) {

    .burger {
        display: flex;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .rv,
    html.reveal-enabled .rv {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

}





/* =========================================================
   PARTNERS / WHO WE WORK WITH
========================================================= */

.partners {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: clamp(
        32px,
        5vw,
        70px
    );

    margin-top: 42px;
}


.partners a {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 75px;

    text-decoration: none;
}


.partners img {
    display: block;

    width: auto;
    height: auto;

    max-width: 210px;
    max-height: 75px;

    object-fit: contain;

    /* Show actual logo colours */
    filter: none;

    opacity: 1;

    transition:
        transform .4s cubic-bezier(.2, .8, .3, 1),
        opacity .4s;
}


.partners a:hover img {
    filter: none;
    opacity: 1;

    transform: translateY(-4px);
}


@media (max-width: 820px) {

    .partners {
        gap: 30px;
    }


    .partners img {
        max-width: 170px;
        max-height: 65px;
    }

}


@media (max-width: 520px) {

    .partners {
        display: grid;

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

        gap: 28px 20px;
    }


    .partners a {
        min-height: 60px;
    }


    .partners img {
        max-width: 145px;
        max-height: 58px;
    }

}


/* =========================================================
   PHOTO HIGHLIGHTS / MOMENTS WORTH SHARING
========================================================= */

.moments {
    display: grid;

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

    align-items: start;

    gap: 18px;

    margin-top: 44px;
}


.moment {
    position: relative;

    margin: 0;

    border-radius: var(--r);

    overflow: hidden;

    background: var(--bark-2);

    align-self: start;
}


/*
IMPORTANT:
Images keep their natural aspect ratio.

No fixed height.
No object-fit: cover.
No cropping.
No absolute positioning.
*/

.moment img {
    position: relative;

    inset: auto;

    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    object-fit: initial;
    object-position: initial;

    transition:
        transform 1.1s
        cubic-bezier(
            .2,
            .8,
            .3,
            1
        );
}


.moment:hover img {
    transform:
        scale(1.025);
}


/* Caption overlay */

.moment figcaption {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2;

    padding:
        38px 16px 15px;

    font-size:
        .82rem;

    color:
        var(--husk);

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(19, 35, 26, .86)
        );

    opacity: 0;

    transform:
        translateY(8px);

    transition:
        opacity .45s,
        transform .45s;
}


.moment:hover figcaption {
    opacity: 1;

    transform: none;
}


/*
Keep the wider visual treatment,
but don't force an image height.
*/

.m-wide {
    grid-column:
        span 2;
}


/*
Do not force tall images to span artificial rows.
Their natural image ratio determines their height.
*/

.m-tall {
    grid-row:
        auto;
}


/* =========================================================
   MOMENTS RESPONSIVE
========================================================= */

@media (max-width: 900px) {

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

        gap: 16px;
    }


    .m-wide {
        grid-column:
            span 2;
    }

}


@media (max-width: 600px) {

    .moments {
        grid-template-columns:
            1fr;

        gap: 16px;
    }


    .m-wide,
    .m-tall {
        grid-column:
            auto;

        grid-row:
            auto;
    }


    .moment figcaption {
        opacity: 1;

        transform: none;
    }

}




/* =========================================================
   UBUNTU FINAL WORDPRESS OVERRIDES
   Paste this entire block at the END of style.css
========================================================= */


/* =========================================================
   1. STICKY HEADER
========================================================= */

.hdr {
    background: transparent !important;

    transition:
        background .45s ease,
        background-color .45s ease,
        box-shadow .45s ease,
        backdrop-filter .45s ease,
        -webkit-backdrop-filter .45s ease,
        padding .45s ease;
}


.hdr.stuck {
    background: rgba(19, 35, 26, .96) !important;
    background-color: rgba(19, 35, 26, .96) !important;

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

    box-shadow:
        0 1px 0
        rgba(235, 237, 228, .16),
        0 8px 30px
        rgba(0, 0, 0, .08);
}


/* WordPress admin bar */

.admin-bar .hdr {
    top: 32px;
}


@media screen and (max-width: 782px) {

    .admin-bar .hdr {
        top: 46px;
    }

}


/* =========================================================
   2. SCROLL REVEAL ANIMATIONS
========================================================= */

/*
Content is visible if JS fails.
JS adds .reveal-enabled when IntersectionObserver is ready.
*/

.rv {
    opacity: 1 !important;

    transform: none !important;

    transition:
        opacity .9s cubic-bezier(.2, .8, .3, 1),
        transform .9s cubic-bezier(.2, .8, .3, 1) !important;
}


html.reveal-enabled .rv:not(.in) {
    opacity: 0 !important;
}


html.reveal-enabled .rv-l:not(.in) {
    transform:
        translateX(-56px) !important;
}


html.reveal-enabled .rv-r:not(.in) {
    transform:
        translateX(56px) !important;
}


html.reveal-enabled .rv-u:not(.in) {
    transform:
        translateY(56px) !important;
}


html.reveal-enabled .rv-s:not(.in) {
    transform:
        scale(.94) !important;
}


html.reveal-enabled .rv.in {
    opacity: 1 !important;

    transform: none !important;
}


html.reveal-enabled [data-delay="1"] {
    transition-delay: .12s !important;
}


html.reveal-enabled [data-delay="2"] {
    transition-delay: .24s !important;
}


html.reveal-enabled [data-delay="3"] {
    transition-delay: .36s !important;
}


/* =========================================================
   3. CART ICON
   Hide image asset and use a real UI icon
========================================================= */

.cart-btn {
    text-decoration: none;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: .45rem;
}


.cart-btn .cart-icon {
    display: none !important;
}


.cart-btn::before {
    content: "";

    display: block;

    width: 21px;
    height: 21px;

    flex: 0 0 21px;

    background-color: currentColor;

    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h2.2l2.2 10.4a2 2 0 0 0 2 1.6h7.8a2 2 0 0 0 2-1.6L21 7H6.1M10 21a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z' fill='%23000'/%3E%3C/svg%3E")
        center / contain
        no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h2.2l2.2 10.4a2 2 0 0 0 2 1.6h7.8a2 2 0 0 0 2-1.6L21 7H6.1M10 21a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z' fill='%23000'/%3E%3C/svg%3E")
        center / contain
        no-repeat;
}


/* =========================================================
   4. WHY CHOOSE UBUNTU ICONS
   Existing PNGs are hidden and replaced with UI icons.
========================================================= */

.why-item > img {
    display: none !important;
}


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

    display: block;

    width: 44px;
    height: 44px;

    background-color: var(--leaf);

    align-self: start;
}


/* Sustainability */

.why-item:nth-child(1)::before {
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' d='M40 6C23 7 10 14 8 28c-1 8 4 14 12 14 14 0 20-16 20-36ZM14 37C20 24 27 17 36 11c-9 8-15 17-18 29l-4-3Z'/%3E%3C/svg%3E")
        center / contain
        no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' d='M40 6C23 7 10 14 8 28c-1 8 4 14 12 14 14 0 20-16 20-36ZM14 37C20 24 27 17 36 11c-9 8-15 17-18 29l-4-3Z'/%3E%3C/svg%3E")
        center / contain
        no-repeat;
}


/* Integrity */

.why-item:nth-child(2)::before {
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' d='m24 4 17 7v12c0 11-6.7 19-17 22C13.7 42 7 34 7 23V11l17-7Zm-3 27 13-13-3-3-10 10-5-5-3 3 8 8Z'/%3E%3C/svg%3E")
        center / contain
        no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' d='m24 4 17 7v12c0 11-6.7 19-17 22C13.7 42 7 34 7 23V11l17-7Zm-3 27 13-13-3-3-10 10-5-5-3 3 8 8Z'/%3E%3C/svg%3E")
        center / contain
        no-repeat;
}


/* Quality */

.why-item:nth-child(3)::before {
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' d='m24 3 6 12 13 2-9.5 9 2.3 13L24 33l-11.8 6 2.3-13L5 17l13-2 6-12Z'/%3E%3C/svg%3E")
        center / contain
        no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' d='m24 3 6 12 13 2-9.5 9 2.3 13L24 33l-11.8 6 2.3-13L5 17l13-2 6-12Z'/%3E%3C/svg%3E")
        center / contain
        no-repeat;
}


/* Community */

.why-item:nth-child(4)::before {
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' d='M17 23a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm15-2a6 6 0 1 0 0-12 6 6 0 0 0 0 12ZM3 42c0-10 5-16 14-16s14 6 14 16H3Zm27-14c1.3-.7 2.9-1 4.5-1C41 27 45 32 45 40H34c-.4-5-1.6-9-4-12Z'/%3E%3C/svg%3E")
        center / contain
        no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' d='M17 23a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm15-2a6 6 0 1 0 0-12 6 6 0 0 0 0 12ZM3 42c0-10 5-16 14-16s14 6 14 16H3Zm27-14c1.3-.7 2.9-1 4.5-1C41 27 45 32 45 40H34c-.4-5-1.6-9-4-12Z'/%3E%3C/svg%3E")
        center / contain
        no-repeat;
}


/* =========================================================
   5. WHO WE WORK WITH
========================================================= */

.partners {
    display: flex !important;

    flex-wrap: wrap !important;

    align-items: center !important;

    justify-content: center !important;

    column-gap:
        clamp(
            32px,
            4.5vw,
            64px
        ) !important;

    row-gap:
        34px !important;

    margin-top:
        44px !important;
}


.partners a {
    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    flex:
        0 1 175px !important;

    width:
        175px !important;

    min-height:
        86px !important;

    padding:
        8px 12px !important;

    text-decoration:
        none !important;
}


.partners img {
    display: block !important;

    width:
        auto !important;

    height:
        auto !important;

    max-width:
        175px !important;

    max-height:
        76px !important;

    object-fit:
        contain !important;

    opacity:
        1 !important;

    filter:
        none !important;

    -webkit-filter:
        none !important;

    transition:
        transform .4s
        cubic-bezier(.2, .8, .3, 1) !important;
}


.partners a:hover img {
    opacity:
        1 !important;

    filter:
        none !important;

    -webkit-filter:
        none !important;

    transform:
        translateY(-4px) !important;
}


/* =========================================================
   6. MOMENTS WORTH SHARING
   Natural aspect ratio / no cropping / proper gaps
========================================================= */

.moments {
    display: block !important;

    columns:
        3 !important;

    column-gap:
        20px !important;

    margin-top:
        44px !important;

    grid-template-columns:
        none !important;

    grid-auto-rows:
        initial !important;
}


.moment,
.moment.m-tall,
.moment.m-wide {
    display:
        inline-block !important;

    position:
        relative !important;

    width:
        100% !important;

    height:
        auto !important;

    margin:
        0 0 20px !important;

    padding:
        0 !important;

    vertical-align:
        top !important;

    break-inside:
        avoid !important;

    -webkit-column-break-inside:
        avoid !important;

    page-break-inside:
        avoid !important;

    grid-row:
        auto !important;

    grid-column:
        auto !important;

    border-radius:
        var(--r) !important;

    overflow:
        hidden !important;

    background:
        var(--bark-2) !important;
}


.moment img {
    position:
        relative !important;

    inset:
        auto !important;

    display:
        block !important;

    width:
        100% !important;

    height:
        auto !important;

    min-height:
        0 !important;

    max-height:
        none !important;

    max-width:
        100% !important;

    object-fit:
        initial !important;

    object-position:
        initial !important;

    aspect-ratio:
        auto !important;

    transition:
        transform 1.1s
        cubic-bezier(.2, .8, .3, 1) !important;
}


.moment:hover img {
    transform:
        scale(1.025) !important;
}


.moment figcaption {
    position:
        absolute !important;

    left:
        0 !important;

    right:
        0 !important;

    bottom:
        0 !important;

    top:
        auto !important;

    z-index:
        3 !important;

    padding:
        42px 17px 16px !important;

    color:
        var(--husk) !important;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(19, 35, 26, .9)
        ) !important;

    opacity:
        0 !important;

    transform:
        translateY(8px) !important;

    transition:
        opacity .45s ease,
        transform .45s ease !important;
}


.moment:hover figcaption {
    opacity:
        1 !important;

    transform:
        none !important;
}


/* =========================================================
   7. OTHER REAL IMAGE ELEMENTS
========================================================= */

.hero-art img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;
}


.tri-art img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform 1s cubic-bezier(.2, .8, .3, 1);
}


.tri-art:hover img {
    transform:
        scale(1.04);
}


.cat-art {
    overflow:
        hidden;
}


.cat-art img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;
}


.feat-art {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;
}


.feat-art > img {
    display:
        block;

    width:
        82%;

    height:
        82%;

    object-fit:
        contain;

    object-position:
        center;

    filter:
        drop-shadow(
            0 30px 35px
            rgba(0, 0, 0, .28)
        );
}


.quotes-bg img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;
}


.q-figure img {
    display:
        block;

    width:
        100%;

    height:
        auto;

    max-height:
        540px;

    object-fit:
        contain;

    object-position:
        bottom center;
}


.post-art img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;

    transition:
        transform .7s
        cubic-bezier(.2, .8, .3, 1);
}


.post:hover .post-art img {
    transform:
        scale(1.055);
}


.shopcta-art img {
    display:
        block;

    width:
        min(100%, 430px);

    height:
        auto;

    max-height:
        470px;

    object-fit:
        contain;

    object-position:
        center;
}


/* =========================================================
   8. MOBILE NAV BURGER
========================================================= */

.burger {
    width:
        42px;

    height:
        42px;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    gap:
        5px;
}


.burger span {
    display:
        block;

    width:
        24px;

    height:
        1.5px;

    background:
        currentColor;

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


.burger[aria-expanded="true"] span:nth-child(1) {
    transform:
        translateY(6.5px)
        rotate(45deg);
}


.burger[aria-expanded="true"] span:nth-child(2) {
    opacity:
        0;
}


.burger[aria-expanded="true"] span:nth-child(3) {
    transform:
        translateY(-6.5px)
        rotate(-45deg);
}


/* =========================================================
   9. RESPONSIVE OVERRIDES
========================================================= */

@media (max-width: 920px) {

    .burger {
        display:
            flex !important;
    }

}


@media (max-width: 820px) {

    .partners {
        column-gap:
            26px !important;

        row-gap:
            28px !important;
    }


    .partners a {
        flex:
            0 1 150px !important;

        width:
            150px !important;

        min-height:
            72px !important;
    }


    .partners img {
        max-width:
            150px !important;

        max-height:
            65px !important;
    }


    .moments {
        columns:
            2 !important;

        column-gap:
            16px !important;

        grid-auto-rows:
            initial !important;
    }


    .moment,
    .moment.m-tall,
    .moment.m-wide {
        margin-bottom:
            16px !important;
    }

}


@media (max-width: 600px) {

    .partners {
        justify-content:
            space-between !important;

        column-gap:
            16px !important;

        row-gap:
            24px !important;
    }


    .partners a {
        flex:
            0 1
            calc(50% - 8px) !important;

        width:
            calc(50% - 8px) !important;

        min-width:
            0 !important;

        min-height:
            64px !important;
    }


    .partners img {
        max-width:
            135px !important;

        max-height:
            58px !important;
    }


    .moments {
        columns:
            1 !important;
    }


    .moment,
    .moment.m-tall,
    .moment.m-wide {
        margin-bottom:
            16px !important;
    }


    .moment figcaption {
        opacity:
            1 !important;

        transform:
            none !important;
    }

}


/* =========================================================
   10. REDUCED MOTION
========================================================= */

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

    .rv,
    html.reveal-enabled .rv,
    html.reveal-enabled .rv:not(.in),
    html.reveal-enabled .rv-l:not(.in),
    html.reveal-enabled .rv-r:not(.in),
    html.reveal-enabled .rv-u:not(.in),
    html.reveal-enabled .rv-s:not(.in) {
        opacity:
            1 !important;

        transform:
            none !important;

        transition:
            none !important;
    }

}





/* =========================================================
   WHY CHOOSE UBUNTU ICON FIX
   Remove duplicate large CSS-generated icons
========================================================= */

.why-item::before {
    content: none !important;
    display: none !important;
}


/* Keep the real inline SVG icons */

.why-icon {
    display: block !important;

    width: 44px !important;
    height: 44px !important;

    min-width: 44px;

    color: var(--leaf);

    flex-shrink: 0;
}








/* =========================================================
   FINAL MOBILE CATEGORY CARDS + MOBILE MENU FIX
========================================================= */


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

@media (max-width: 920px) {

    .hdr {
        z-index: 120;
    }


    .nav,
    .nav.open {
        background-color: #13231A !important;
        background-image: none !important;

        color: var(--husk) !important;

        z-index: 100;

        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;

        box-shadow:
            -18px 0 42px
            rgba(0, 0, 0, .22);
    }


    .nav.open {
        opacity: 1 !important;
        visibility: visible !important;
    }


    .nav a,
    .nav.open a {
        color: var(--husk) !important;
    }


    .burger {
        position: relative;
        z-index: 110;
    }

}



/* =========================================================
   MOBILE PRODUCT CATEGORY CARDS
========================================================= */

@media (max-width: 640px) {

    #categories .cats {
        gap: 18px;

        margin-top:
            34px;
    }


    #categories .cat {
        display: grid;

        grid-template-rows:
            auto auto;

        aspect-ratio:
            auto !important;

        min-height:
            0;

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

        border-radius:
            var(--r);

        background:
            var(--paper);

        color:
            var(--ink);

        overflow:
            hidden;

        box-shadow:
            0 12px 30px
            rgba(19, 35, 26, .08);
    }


    /*
     * Remove the dark desktop overlay.
     */
    #categories .cat::after {
        display:
            none !important;

        content:
            none !important;
    }


    /*
     * Portrait-friendly image area.
     */
    #categories .cat-art {
        position:
            relative !important;

        inset:
            auto !important;

        width:
            100%;

        height:
            auto;

        aspect-ratio:
            4 / 5;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        padding:
            14px !important;

        background:
            var(--paper);

        overflow:
            hidden;

        transform:
            none !important;
    }


    /*
     * Entire product image remains visible.
     */
    #categories .cat-art img {
        display:
            block;

        width:
            100%;

        height:
            100%;

        max-width:
            100%;

        max-height:
            100%;

        object-fit:
            contain !important;

        object-position:
            center !important;

        transform:
            none !important;

        opacity:
            1 !important;
    }


    /*
     * Disable desktop zoom on mobile.
     */
    #categories .cat:hover .cat-art,
    #categories .cat:focus-visible .cat-art,
    #categories .cat:hover .cat-art img,
    #categories .cat:focus-visible .cat-art img {
        transform:
            none !important;
    }


    /*
     * Text becomes a separate section beneath image.
     */
    #categories .cat-body {
        position:
            relative !important;

        inset:
            auto !important;

        z-index:
            2;

        padding:
            18px 18px 20px;

        background:
            var(--paper);

        color:
            var(--ink);

        transform:
            none !important;
    }


    #categories .cat-body h3 {
        margin:
            0;

        color:
            var(--ink);

        font-size:
            clamp(
                1.28rem,
                6vw,
                1.55rem
            );

        line-height:
            1.14;
    }


    /*
     * Hide long description on phones.
     */
    #categories .cat-body p {
        display:
            none !important;
    }


    /*
     * Keep only the action link.
     */
    #categories .cat-body .shoplink {
        display:
            inline-flex;

        align-items:
            center;

        margin-top:
            .75rem;

        color:
            var(--clay);

        font-size:
            .9rem;

        font-weight:
            700;

        opacity:
            1 !important;
    }


    #categories .cat-body .shoplink::after {
        content:
            "\2192";

        margin-left:
            .45rem;

        transition:
            transform .25s ease;
    }


    #categories .cat:hover .shoplink::after,
    #categories .cat:focus-visible .shoplink::after {
        transform:
            translateX(3px);
    }

}



/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 420px) {

    #categories .cat-art {
        padding:
            10px !important;
    }


    #categories .cat-body {
        padding:
            16px 16px 18px;
    }

}








/* =========================================================
   MOBILE MENU - SCROLLED HEADER FIX
========================================================= */

@media (max-width: 920px) {

    /*
     * IMPORTANT:
     * backdrop-filter on the sticky header can turn the header
     * into the containing block for the fixed mobile drawer.
     *
     * Disable it on mobile so the navigation remains fixed
     * against the viewport.
     */

    .hdr,
    .hdr.stuck {
        -webkit-backdrop-filter:
            none !important;

        backdrop-filter:
            none !important;
    }


    /*
     * The header itself can still have its dark scrolled state.
     */

    .hdr.stuck {
        background-color:
            rgba(
                19,
                35,
                26,
                .96
            ) !important;
    }


    /*
     * MOBILE DRAWER
     */

    .nav,
    .nav.open {
        position:
            fixed !important;

        top:
            0 !important;

        right:
            0 !important;

        bottom:
            0 !important;

        left:
            auto !important;

        width:
            min(
                82vw,
                340px
            ) !important;

        height:
            100vh !important;

        min-height:
            100dvh !important;

        background:
            #13231A !important;

        background-color:
            #13231A !important;

        color:
            var(--husk) !important;

        opacity:
            1 !important;

        visibility:
            visible !important;

        -webkit-backdrop-filter:
            none !important;

        backdrop-filter:
            none !important;

        z-index:
            121 !important;

        box-shadow:
            -22px 0 48px
            rgba(
                0,
                0,
                0,
                .28
            ) !important;
    }


    /*
     * CLOSED
     */

    .nav {
        transform:
            translateX(
                100%
            ) !important;
    }


    /*
     * OPEN
     */

    .nav.open {
        transform:
            translateX(
                0
            ) !important;
    }


    /*
     * NAV TEXT
     */

    .nav a,
    .nav.open a {
        color:
            var(--husk) !important;
    }


    /*
     * BURGER MUST STAY ABOVE DRAWER
     */

    .burger {
        position:
            relative;

        z-index:
            122 !important;
    }

}







/* =========================================================
   MOBILE HEADER POSITION LOCK
   Prevent hamburger drifting beyond right viewport edge
========================================================= */

@media (max-width: 920px) {

    /*
     * Do not allow anything in the hero/slider to create
     * horizontal viewport expansion.
     */
    html,
    body {
        width: 100%;
        max-width: 100%;

        overflow-x: clip;
    }


    /*
     * Lock header itself exactly to viewport.
     */
    .hdr,
    .hdr.stuck {
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        max-width: 100vw !important;

        margin: 0 !important;

        padding-left:
            max(
                16px,
                env(safe-area-inset-left)
            ) !important;

        padding-right:
            max(
                16px,
                env(safe-area-inset-right)
            ) !important;

        box-sizing: border-box !important;
    }


    /*
     * Logo is allowed to shrink if screen becomes tight.
     */
    .hdr .brand {
        flex:
            0 1 auto;

        min-width:
            0;

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


    .hdr .brand-logo,
    .hdr .custom-logo {
        max-width:
            100px;

        height:
            auto;
    }


    /*
     * Keep cart + burger anchored to the right.
     */
    .hdr-cta {
        display:
            flex;

        align-items:
            center;

        justify-content:
            flex-end;

        flex:
            0 0 auto;

        min-width:
            max-content;

        margin-left:
            auto;

        gap:
            8px;
    }


    /*
     * Hamburger gets a fixed physical footprint.
     *
     * Nothing from the hero slider can push it farther
     * toward or beyond the edge of the viewport.
     */
    .burger {
        position:
            relative !important;

        top:
            auto !important;

        right:
            auto !important;

        bottom:
            auto !important;

        left:
            auto !important;

        width:
            42px !important;

        min-width:
            42px !important;

        max-width:
            42px !important;

        height:
            42px !important;

        flex:
            0 0 42px !important;

        margin:
            0 !important;

        padding:
            8px !important;

        transform:
            none;

        box-sizing:
            border-box;

        z-index:
            122 !important;
    }


    /*
     * Hamburger lines stay centred inside the fixed button.
     */
    .burger span {
        flex:
            0 0 auto;

        margin-left:
            auto;

        margin-right:
            auto;
    }


    /*
     * Keep the hero and animated slides within viewport width.
     */
    .hero,
    .slides,
    .slide {
        width:
            100%;

        max-width:
            100%;

        min-width:
            0;
    }


    .slide h1,
    .slide h2,
    .slide p,
    .slide .acts {
        max-width:
            100%;
    }

}







/* =========================================================
   UBUNTU SHOP - ADD TO CART BUTTON
   Override WooCommerce default grey button
========================================================= */

.woocommerce .u-card-cart,
.woocommerce .u-card-cart.button,
.woocommerce a.u-card-cart.button,
.woocommerce .u-card-cart.add_to_cart_button,
.woocommerce a.u-card-cart.add_to_cart_button {
    display: inline-flex !important;

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

    width: 100%;

    min-height: 46px;

    padding: 11px 18px !important;

    background: var(--amber) !important;
    background-color: var(--amber) !important;

    border: 1px solid var(--amber) !important;

    border-radius: 10px !important;

    color: var(--bark) !important;

    font-family: var(--sans);

    font-size: .9rem;

    font-weight: 700;

    line-height: 1.2;

    text-align: center;

    text-decoration: none !important;

    box-shadow: none !important;

    cursor: pointer;

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


/* Hover */

.woocommerce .u-card-cart:hover,
.woocommerce .u-card-cart.button:hover,
.woocommerce a.u-card-cart.button:hover,
.woocommerce .u-card-cart.add_to_cart_button:hover {
    background: var(--amber-soft) !important;
    background-color: var(--amber-soft) !important;

    border-color: var(--amber-soft) !important;

    color: var(--bark) !important;

    transform: translateY(-2px);
}


/* Focus */

.woocommerce .u-card-cart:focus-visible {
    outline: 3px solid rgba(227, 166, 44, .35);

    outline-offset: 3px;
}


/* WooCommerce loading state */

.woocommerce .u-card-cart.loading {
    background: var(--amber) !important;

    color: var(--bark) !important;

    opacity: .7;
}


/* WooCommerce AJAX successfully added state */

.woocommerce .u-card-cart.added {
    background: var(--leaf) !important;
    background-color: var(--leaf) !important;

    border-color: var(--leaf) !important;

    color: #fff !important;
}


/* Out of stock should remain clearly different */

.woocommerce .u-card-cart-disabled {
    background: var(--bark-2) !important;

    border-color: var(--bark-2) !important;

    color: var(--husk) !important;

    opacity: .65;
}







/* =========================================================
   PARTNERS SECTION
========================================================= */

.u-partners-section {
    position: relative;

    padding:
        clamp(
            64px,
            8vw,
            110px
        )
        0;

    background:
        #DDE1D4;

    color:
        var(--ink);

    overflow:
        hidden;
}


/* subtle decorative mark */

.u-partners-section::before {
    content: "";

    position: absolute;

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

    width: 340px;
    height: 340px;

    border:
        1px solid
        rgba(
            19,
            35,
            26,
            .08
        );

    border-radius:
        50%;

    pointer-events:
        none;
}


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

.u-partners-heading {
    display: grid;

    grid-template-columns:
        minmax(
            180px,
            .6fr
        )
        minmax(
            0,
            1.4fr
        );

    gap:
        clamp(
            30px,
            6vw,
            90px
        );

    align-items:
        start;

    margin-bottom:
        clamp(
            42px,
            6vw,
            72px
        );

    padding-bottom:
        clamp(
            28px,
            4vw,
            42px
        );

    border-bottom:
        1px solid
        rgba(
            19,
            35,
            26,
            .15
        );
}


.u-partners-heading .kicker {
    margin-bottom:
        16px;
}


.u-partners-line {
    display:
        block;

    width:
        46px;

    height:
        2px;

    background:
        var(--amber);
}


.u-partners-heading-copy {
    max-width:
        760px;
}


.u-partners-heading-copy h2 {
    margin:
        0;

    max-width:
        15ch;

    color:
        var(--bark);

    font-size:
        clamp(
            2rem,
            4.2vw,
            3.9rem
        );

    font-weight:
        400;

    line-height:
        1.04;

    letter-spacing:
        -.025em;
}


.u-partners-heading-copy h2 em {
    color:
        var(--clay);

    font-style:
        italic;
}


.u-partners-heading-copy p {
    max-width:
        540px;

    margin:
        22px 0 0;

    color:
        var(--ink-60);

    font-size:
        .98rem;

    line-height:
        1.75;
}


/* =========================================================
   LOGO GRID
========================================================= */

.u-partners-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(
                145px,
                1fr
            )
        );

    gap:
        14px;
}


/* =========================================================
   LOGO CARD
========================================================= */

.u-partner-card {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        135px;

    padding:
        22px;

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

    border:
        1px solid
        rgba(
            19,
            35,
            26,
            .12
        );

    text-decoration:
        none;

    overflow:
        hidden;

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


.u-partner-card::after {
    content: "↗";

    position:
        absolute;

    top:
        11px;
    right:
        13px;

    color:
        var(--clay);

    font-size:
        .75rem;

    opacity:
        0;

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

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


.u-partner-card:hover {
    background:
        rgba(
            255,
            255,
            255,
            .8
        );

    border-color:
        rgba(
            19,
            35,
            26,
            .24
        );

    transform:
        translateY(-4px);

    box-shadow:
        0 16px 35px
        rgba(
            19,
            35,
            26,
            .08
        );
}


.u-partner-card:hover::after {
    opacity:
        1;

    transform:
        none;
}


/* Never crop partner logos */

.u-partner-card img {
    display:
        block;

    width:
        100%;

    height:
        72px;

    max-width:
        150px;

    object-fit:
        contain !important;

    object-position:
        center !important;

    filter:
        none !important;

    opacity:
        .9;

    transform:
        none !important;

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


.u-partner-card:hover img {
    opacity:
        1;

    transform:
        scale(1.04) !important;
}


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

.u-partners-bottom {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px 30px;

    margin-top:
        34px;

    padding-top:
        22px;

    border-top:
        1px solid
        rgba(
            19,
            35,
            26,
            .12
        );
}


.u-partners-bottom span {
    position:
        relative;

    padding-left:
        15px;

    color:
        var(--ink-60);

    font-size:
        .73rem;

    font-weight:
        700;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.u-partners-bottom span::before {
    content: "";

    position:
        absolute;

    left:
        0;
    top:
        50%;

    width:
        5px;
    height:
        5px;

    border-radius:
        50%;

    background:
        var(--amber);

    transform:
        translateY(-50%);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 760px) {

    .u-partners-heading {
        grid-template-columns:
            1fr;

        gap:
            25px;
    }


    .u-partners-heading-copy h2 {
        max-width:
            18ch;
    }


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


    .u-partner-card {
        min-height:
            115px;

        padding:
            17px;
    }


    .u-partner-card img {
        height:
            62px;

        max-width:
            125px;
    }

}


@media (max-width: 420px) {

    .u-partners-grid {
        gap:
            10px;
    }


    .u-partner-card {
        min-height:
            105px;

        padding:
            14px;
    }


    .u-partner-card img {
        height:
            54px;

        max-width:
            110px;
    }


    .u-partners-bottom {
        flex-direction:
            column;

        gap:
            10px;
    }

}






/* =========================================================
   SHOP CTA — 75 / 25 LAYOUT
========================================================= */

.shopcta-inner {
    display: grid;

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

    align-items: center;

    gap:
        clamp(
            30px,
            5vw,
            72px
        );
}


/* =========================================================
   TEXT — 75%
========================================================= */

.shopcta-copy {
    min-width: 0;
}


.shopcta-copy h2 {
    max-width: 20ch;
}


.shopcta-copy p {
    max-width: 640px;

    margin-top: 1rem;
}


.shopcta-actions {
    margin-top:
        1.8rem;
}


/* =========================================================
   IMAGE — 25%
========================================================= */

.shopcta-art {
    width: 100%;

    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: center;
}


.shopcta-art img {
    display: block;

    width: 100%;

    height: auto;

    max-width: 100%;

    object-fit: contain !important;

    object-position: center !important;
}


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

@media (max-width: 760px) {

    .shopcta-inner {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .shopcta-copy h2 {
        max-width: none;
    }


    .shopcta-art {
        max-width: 300px;

        margin-inline: auto;
    }

}






/* =========================================================
   HOMEPAGE — OUR PRODUCTS
========================================================= */

.u-home-products {
    position: relative;

    padding:
        clamp(70px, 8vw, 120px)
        0;

    background:
        var(--paper);
}


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

.u-home-products-head {
    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(260px, .65fr);

    gap:
        clamp(30px, 6vw, 90px);

    align-items:
        end;

    margin-bottom:
        clamp(38px, 5vw, 62px);
}


.u-home-products-head h2 {
    max-width:
        14ch;

    margin:
        0;

    color:
        var(--bark);

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

    font-weight:
        400;

    line-height:
        1.02;

    letter-spacing:
        -.025em;
}


.u-home-products-head h2 em {
    display: block;

    color:
        var(--clay);

    font-style:
        italic;
}


.u-home-products-intro {
    padding-bottom:
        5px;
}


.u-home-products-intro p {
    max-width:
        430px;

    margin:
        0 0 20px;

    color:
        var(--ink-60);

    line-height:
        1.7;
}


.u-home-products-all {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--bark);

    font-size:
        .82rem;

    font-weight:
        700;

    text-decoration:
        none;

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

    padding-bottom:
        4px;
}


.u-home-products-all span {
    transition:
        transform .25s ease;
}


.u-home-products-all:hover span {
    transform:
        translateX(4px);
}


/* =========================================================
   3 COLUMN PRODUCT GRID
========================================================= */

.u-home-products-grid {
    display: grid;

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

    gap:
        clamp(
            18px,
            2.4vw,
            30px
        );
}


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

.u-home-product {
    min-width:
        0;

    display:
        flex;

    flex-direction:
        column;

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

    background:
        var(--paper);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}


.u-home-product:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(
            19,
            35,
            26,
            .24
        );

    box-shadow:
        0 24px 50px
        rgba(
            19,
            35,
            26,
            .09
        );
}


/* =========================================================
   PRODUCT IMAGE
========================================================= */

.u-home-product-art {
    position:
        relative;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    aspect-ratio:
        1 / 1;

    padding:
        clamp(
            20px,
            3vw,
            36px
        );

    overflow:
        hidden;

    background:
        var(--husk);

    text-decoration:
        none;
}


.u-home-product-art img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    max-width:
        100%;

    object-fit:
        contain !important;

    object-position:
        center !important;

    transform:
        scale(.94);

    transition:
        transform .55s
        cubic-bezier(
            .2,
            .8,
            .3,
            1
        );
}


.u-home-product:hover
.u-home-product-art img {
    transform:
        scale(1);
}


/* =========================================================
   SALE BADGE
========================================================= */

.u-home-product-badge {
    position:
        absolute;

    top:
        14px;

    left:
        14px;

    padding:
        7px 10px;

    background:
        var(--clay);

    color:
        #fff;

    font-size:
        .65rem;

    font-weight:
        800;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


/* =========================================================
   PRODUCT BODY
========================================================= */

.u-home-product-body {
    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    padding:
        clamp(
            20px,
            2.5vw,
            28px
        );
}


.u-home-product-category {
    margin:
        0 0 9px;

    color:
        var(--leaf);

    font-size:
        .68rem;

    font-weight:
        800;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;
}


.u-home-product h3 {
    margin:
        0;

    font-size:
        clamp(
            1.15rem,
            2vw,
            1.45rem
        );

    font-weight:
        500;

    line-height:
        1.2;
}


.u-home-product h3 a {
    color:
        var(--bark);

    text-decoration:
        none;
}


.u-home-product h3 a:hover {
    color:
        var(--clay);
}


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

.u-home-product-desc {
    margin:
        12px 0 0;

    color:
        var(--ink-60);

    font-size:
        .86rem;

    line-height:
        1.6;
}


/* =========================================================
   PRICE
========================================================= */

.u-home-product-price {
    display:
        flex;

    align-items:
        baseline;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin:
        auto 0 18px;

    padding-top:
        22px;

    color:
        var(--bark);

    font-family:
        var(--serif);

    font-size:
        1.2rem;

    font-weight:
        700;
}


.u-home-product-price .amount {
    color:
        inherit;

    font:
        inherit;
}


.u-home-product-price del {
    color:
        var(--ink-60);

    font-family:
        var(--sans);

    font-size:
        .78rem;

    opacity:
        .6;
}


.u-home-product-price ins {
    color:
        var(--clay);

    text-decoration:
        none;
}


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

.woocommerce
.u-home-product-button,

.u-home-product-button {
    display:
        flex !important;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    width:
        100%;

    min-height:
        48px;

    padding:
        12px 16px !important;

    border:
        1px solid
        var(--bark) !important;

    border-radius:
        0 !important;

    background:
        var(--bark) !important;

    color:
        var(--husk) !important;

    font-size:
        .78rem;

    font-weight:
        700;

    letter-spacing:
        .04em;

    text-decoration:
        none !important;

    box-shadow:
        none !important;

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


.woocommerce
.u-home-product-button:hover,

.u-home-product-button:hover {
    border-color:
        var(--amber) !important;

    background:
        var(--amber) !important;

    color:
        var(--bark) !important;

    transform:
        translateY(-2px);
}


.u-home-product-button.is-disabled {
    opacity:
        .55;
}


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

@media (max-width: 900px) {

    .u-home-products-head {
        grid-template-columns:
            1fr;
    }


    .u-home-products-head h2 {
        max-width:
            18ch;
    }


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

}


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

@media (max-width: 600px) {

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


    .u-home-product-art {
        aspect-ratio:
            4 / 3;
    }


    .u-home-product-art img {
        transform:
            none;
    }


    .u-home-product:hover
    .u-home-product-art img {
        transform:
            none;
    }

}











/* =========================================================
   SHOP PAGE — HOMEPAGE PRODUCT CARD DESIGN
========================================================= */

.u-shop-products-grid {
    width: 100%;
}


/* 3 columns inside the shop results area */

.u-shop-results .u-shop-products-grid {
    display: grid;

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

    gap:
        clamp(
            18px,
            2.2vw,
            28px
        );
}


/* A little less image height inside the catalogue */

.u-shop-results
.u-home-product-art {
    aspect-ratio:
        1 / 1;
}


/* Transparent ACF product image */

.u-shop-results
.u-home-product-art img {
    width:
        88%;

    height:
        88%;

    max-width:
        360px;

    max-height:
        360px;

    object-fit:
        contain !important;

    object-position:
        center !important;
}


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

@media (max-width: 1150px) {

    .u-shop-results
    .u-shop-products-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


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

@media (max-width: 640px) {

    .u-shop-results
    .u-shop-products-grid {
        grid-template-columns:
            1fr;

        gap:
            18px;
    }


    .u-shop-results
    .u-home-product-art {
        aspect-ratio:
            4 / 3;
    }

}





/* =========================================================
   SHOP PAGE — HOMEPAGE PRODUCT CARD DESIGN
========================================================= */

.u-shop-products-grid {
    width: 100%;
}


/* 3 columns inside the shop results area */

.u-shop-results .u-shop-products-grid {
    display: grid;

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

    gap:
        clamp(
            18px,
            2.2vw,
            28px
        );
}


/* A little less image height inside the catalogue */

.u-shop-results
.u-home-product-art {
    aspect-ratio:
        1 / 1;
}


/* Transparent ACF product image */

.u-shop-results
.u-home-product-art img {
    width:
        88%;

    height:
        88%;

    max-width:
        360px;

    max-height:
        360px;

    object-fit:
        contain !important;

    object-position:
        center !important;
}


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

@media (max-width: 1150px) {

    .u-shop-results
    .u-shop-products-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


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

@media (max-width: 640px) {

    .u-shop-results
    .u-shop-products-grid {
        grid-template-columns:
            1fr;

        gap:
            18px;
    }


    .u-shop-results
    .u-home-product-art {
        aspect-ratio:
            4 / 3;
    }

}



/* =========================================================
   SHOP PAGE BACKGROUND
   White everywhere except hero + bottom CTA
========================================================= */

body.woocommerce-shop,
body.tax-product_cat,
body.tax-product_tag,
.ubuntu-shop-page {
    background: #ffffff;
}


/* Main catalogue section */

.u-shop {
    background: #ffffff !important;
}


/* Results area */

.u-shop-results {
    background: transparent !important;
    padding: 0 !important;
}


/* Filter area should sit naturally on white */

.u-filters {
    background: transparent;
}


/* Product grid parent */

.u-shop-grid {
    background: #ffffff;
}


/* Keep hero untouched */

.u-shop-hero {
    /* keep existing hero background */
}


/* Keep bottom wholesale / CTA section untouched */

.u-bulk {
    /* keep existing dark / CTA background */
}






/* =========================================================
   HEADER — SERVICES DROPDOWN
========================================================= */

.nav-services {
    position: relative;

    display: flex;
    align-items: center;
}


/* MAIN SERVICES NAV ITEM */

.nav-services-main {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-services-link {
    color: inherit;
    text-decoration: none;
}

.nav-services-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    padding: 0;

    border: 0;

    background: transparent;
    color: inherit;

    cursor: pointer;
}

.nav-services-toggle svg {
    display: block;

    width: 9px;
    height: 6px;

    transition: transform .25s ease;
}


/* =========================================================
   DROPDOWN
========================================================= */

.nav-services-dropdown {
    position: absolute;

    z-index: 100;

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

    width: 320px;

    padding: 10px;

    background: #ffffff;

    border: 1px solid rgba(19, 35, 26, .12);

    box-shadow:
        0 24px 55px
        rgba(19, 35, 26, .14);

    opacity: 0;
    visibility: hidden;

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

    pointer-events: none;

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


/* DROPDOWN BRIDGE */

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

    position: absolute;

    left: 0;
    right: 0;
    bottom: 100%;

    height: 22px;
}


/* SHOW DROPDOWN */

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

    transform:
        translate(-50%, 0);

    pointer-events: auto;
}

.nav-services:hover
.nav-services-toggle svg,
.nav-services:focus-within
.nav-services-toggle svg {
    transform: rotate(180deg);
}


/* =========================================================
   DROPDOWN HEADING
========================================================= */

.nav-services-dropdown-head {
    padding:
        9px
        12px
        11px;

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

.nav-services-dropdown-head span {
    color: var(--ink-60);

    font-size: .61rem;
    font-weight: 800;

    letter-spacing: .1em;

    text-transform: uppercase;
}


/* =========================================================
   CATEGORY LINKS
========================================================= */

.nav-service-category {
    display: grid;

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

    gap: 10px;

    align-items: center;

    padding:
        14px
        12px;

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

    color: var(--bark);

    text-decoration: none;

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

.nav-service-category:hover {
    padding-left: 17px;

    background:
        var(--husk);
}

.nav-service-number {
    color:
        var(--amber);

    font-family:
        monospace;

    font-size:
        .67rem;
}

.nav-service-name {
    font-size:
        .82rem;

    font-weight:
        700;
}

.nav-service-arrow {
    color:
        var(--clay);

    transition:
        transform .2s ease;
}

.nav-service-category:hover
.nav-service-arrow {
    transform:
        translateX(4px);
}


/* =========================================================
   VIEW ALL
========================================================= */

.nav-services-all {
    display: flex;

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

    gap: 15px;

    margin-top: 7px;

    padding:
        13px
        12px;

    background:
        var(--bark);

    color:
        var(--husk);

    font-size:
        .69rem;

    font-weight:
        800;

    letter-spacing:
        .05em;

    text-decoration:
        none;

    text-transform:
        uppercase;
}

.nav-services-all span {
    color:
        var(--amber);

    transition:
        transform .2s ease;
}

.nav-services-all:hover span {
    transform:
        translateX(4px);
}


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

@media (max-width: 900px) {

    .nav-services {
        display: block;

        width: 100%;
    }


    .nav-services-main {
        display: flex;

        width: 100%;

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


    .nav-services-link {
        flex: 1;
    }


    /*
     * On mobile the categories remain visible beneath
     * Services when the main burger menu is opened.
     * No extra JavaScript is required.
     */

    .nav-services-dropdown {
        position: static;

        width: 100%;

        margin-top: 8px;
        padding:
            0
            0
            0
            18px;

        border: 0;
        border-left:
            1px solid
            rgba(19, 35, 26, .14);

        background:
            transparent;

        box-shadow:
            none;

        opacity: 1;
        visibility: visible;

        transform: none;

        pointer-events: auto;
    }


    .nav-services-dropdown::before {
        display: none;
    }


    .nav-services-dropdown-head {
        display: none;
    }


    .nav-service-category {
        padding:
            10px
            5px;

        border-bottom:
            1px solid
            rgba(19, 35, 26, .08);

        background:
            transparent;
    }


    .nav-service-category:hover {
        padding-left:
            10px;

        background:
            transparent;
    }


    .nav-services-all {
        margin:
            7px
            0
            0;

        background:
            transparent;

        color:
            var(--bark);

        padding:
            11px
            5px;
    }


    .nav-services-all span {
        color:
            var(--clay);
    }


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

}





/* =========================================================
   VIEW ALL SERVICES
========================================================= */

.nav .nav-services-all {
    display: flex;
    align-items: center;
    justify-content: space-between;

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

    margin: 8px 0 0;
    padding: 14px 16px !important;

    box-sizing: border-box;

    background: var(--bark);
    color: var(--husk);

    font-size: .69rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: .05em;

    text-decoration: none;
    text-transform: uppercase;
}

.nav .nav-services-all span {
    color: var(--amber);

    transition: transform .2s ease;
}

.nav .nav-services-all:hover span {
    transform: translateX(4px);
}



@media (max-width: 900px) {

    .nav .nav-services-all {
        margin-top: 6px;
        padding: 12px 8px !important;

        background: transparent;
        color: var(--bark);

        border-top: 1px solid rgba(19, 35, 26, .10);
    }

    .nav .nav-services-all span {
        color: var(--clay);
    }

}






/* =========================================================
   HERO — MULTIPLE SLIDE BACKGROUNDS
========================================================= */

.hero-art {
    position: absolute;
    inset: 0;
    z-index: -2;
    overflow: hidden;
}


/* Stack every hero image on top of each other */

.hero-art .hero-art-slide {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    opacity: 0;
    visibility: hidden;

    transform: scale(1.025);

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


/* Only current slide image is visible */

.hero-art .hero-art-slide.active {
    opacity: 1;
    visibility: visible;

    transform: scale(1);
}


/* Reduced motion */

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

    .hero-art .hero-art-slide {
        transition: none;
        transform: none;
    }

}


/* =========================================================
   PARTNERS — CONTINUOUS LOGO MARQUEE
========================================================= */

.u-partners-marquee {
    position: relative;

    width: 100%;
    overflow: hidden;

    margin-top: clamp(32px, 5vw, 56px);
}


/* Soft fade at both edges */

.u-partners-marquee::before,
.u-partners-marquee::after {
    content: "";

    position: absolute;
    top: 0;
    bottom: 0;

    z-index: 3;

    width: clamp(35px, 7vw, 110px);

    pointer-events: none;
}

.u-partners-marquee::before {
    left: 0;

    background:
        linear-gradient(
            to right,
            #DDE1D4,
            transparent
        );
}

.u-partners-marquee::after {
    right: 0;

    background:
        linear-gradient(
            to left,
            #DDE1D4,
            transparent
        );
}


/* =========================================================
   MOVING TRACK
========================================================= */

.u-partners-track {
    display: flex;

    width: max-content;

    animation:
        ubuntuPartnersScroll
        42s
        linear
        infinite;

    will-change: transform;
}


/* Slow it down while user interacts */

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


/* =========================================================
   EACH REPEATED LOGO SET
========================================================= */

.u-partners-set {
    display: flex;
    align-items: center;

    gap: clamp(18px, 2.5vw, 32px);

    padding-right:
        clamp(18px, 2.5vw, 32px);
}


/* =========================================================
   LOGO CARDS
========================================================= */

.u-partner-card {
    flex: 0 0 auto;

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

    width: clamp(145px, 14vw, 205px);
    height: clamp(90px, 9vw, 125px);

    padding: 20px;

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

    border:
        1px solid
        rgba(19, 35, 26, .10);

    text-decoration: none;

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


.u-partner-card:hover {
    background: #ffffff;

    transform:
        translateY(-3px);
}


/* =========================================================
   LOGOS
========================================================= */

.u-partner-card img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: 145px;
    max-height: 66px;

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


/* =========================================================
   RIGHT → LEFT MOVEMENT
========================================================= */

@keyframes ubuntuPartnersScroll {

    from {
        transform: translateX(0);
    }

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

}


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

@media (max-width: 760px) {

    .u-partners-track {
        animation-duration: 32s;
    }

    .u-partner-card {
        width: 145px;
        height: 88px;

        padding: 16px;
    }

    .u-partner-card img {
        max-width: 115px;
        max-height: 54px;
    }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

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

    .u-partners-track {
        animation: none;
        transform: none;
    }

}






/* =========================================================
   HEADER — ALWAYS SOLID
   Prevent hero imagery from showing behind header
========================================================= */

.hdr,
.hdr.stuck {
    background: #13231A !important;
    background-color: #13231A !important;

    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}


/* Normal header state */

.hdr {
    box-shadow:
        0 1px 0
        rgba(235, 237, 228, .10);
}


/* Scrolled header state */

.hdr.stuck {
    box-shadow:
        0 1px 0
        rgba(235, 237, 228, .16),
        0 8px 30px
        rgba(0, 0, 0, .10);
}