:root {
        --green: #2C4A2C;
        --green-mid: #3D6B3A;
        --green-lt: #EAF1EA;
        --gold: #C8903A;
        --gold-lt: #F0D99A;
        --cream: #FAF7F2;
        --white: #FFFFFF;
        --text: #1A2A1A;
        --text-mid: #4A5E4A;
        --text-lt: #7A907A;
        --border: #D6E4D6;
    }

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

    html {
        scroll-behavior: smooth
    }

    body {
        background: var(--cream);
        color: var(--text);
        font-family: 'Nunito Sans', sans-serif;
        font-weight: 400;
        line-height: 1.7;
        overflow-x: hidden
    }

    /* NAV */
    nav {
        position: sticky;
        top: 0;
        z-index: 200;
        background: var(--white);
        border-bottom: 1px solid var(--border);
        padding: 0 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 68px;
        box-shadow: 0 2px 14px rgba(44, 74, 44, .07)
    }

    .logo-txt {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--green);
        letter-spacing: .05em
    }

    .logo-txt span {
        color: var(--gold)
    }

    .nav-links {
        display: flex;
        gap: 1.8rem;
        list-style: none;
        align-items: center
    }

    .nav-links a {
        font-size: .75rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--text-mid);
        text-decoration: none;
        transition: color .2s
    }

    .nav-links a:hover,
    .nav-links a.active {
        color: var(--green)
    }

    .nav-links a.active {
        border-bottom: 2px solid var(--gold);
        padding-bottom: 2px
    }

    .nav-cta {
        background: var(--green);
        color: #fff !important;
        padding: .5rem 1.2rem;
        font-size: .72rem !important;
        transition: background .2s !important
    }

    .nav-cta:hover {
        background: var(--green-mid) !important
    }

    /* UTILS */
    .wrap {
        max-width: 1160px;
        margin: 0 auto;
        padding: 0 1.5rem
    }

    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--gold);
        margin-bottom: .8rem
    }

    .eyebrow::before {
        content: '';
        display: block;
        width: 26px;
        height: 2px;
        background: var(--gold)
    }

    h2.stitle {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(1.9rem, 3.8vw, 3rem);
        font-weight: 700;
        color: var(--text);
        line-height: 1.12;
        margin-bottom: 1.3rem
    }

    h2.stitle em {
        font-style: italic;
        color: var(--green)
    }

    .gold-bar {
        width: 46px;
        height: 3px;
        background: var(--gold);
        margin-bottom: 1.8rem
    }

    .body-p {
        color: var(--text-mid);
        font-size: .97rem;
        line-height: 1.9;
        font-weight: 300
    }

    .body-p+.body-p {
        margin-top: 1rem
    }

    .body-p strong {
        color: var(--green);
        font-weight: 700
    }

    /* HERO */
    .hero {
        background: linear-gradient(160deg, rgba(30, 52, 30, .82) 0%, rgba(44, 74, 44, .72) 100%), url('https://kilonge.com/wp-content/uploads/2024/07/cacao-et-terroir.png') center/cover no-repeat;
        min-height: 90vh;
        display: flex;
        align-items: center;
        padding: 5rem 2rem 4rem;
        position: relative;
        overflow: hidden
    }

    .hero::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient(to bottom, transparent, var(--gold), transparent)
    }

    .hero-grid {
        display: grid;
        grid-template-columns: 1fr 400px;
        gap: 4rem;
        align-items: center;
        max-width: 1160px;
        margin: 0 auto
    }

    .badge {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        background: rgba(200, 144, 58, .18);
        border: 1px solid rgba(200, 144, 58, .5);
        color: var(--gold-lt);
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .18em;
        text-transform: uppercase;
        padding: .38rem 1rem;
        margin-bottom: 1.4rem
    }

    .dot {
        display: block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--gold);
        animation: blink 2s infinite
    }

    @keyframes blink {

        0%,
        100% {
            opacity: 1
        }

        50% {
            opacity: .25
        }
    }

    .hero h1 {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(2.8rem, 6vw, 5.2rem);
        font-weight: 700;
        line-height: 1.02;
        color: #fff;
        margin-bottom: 1.3rem
    }

    .hero h1 em {
        display: block;
        font-style: italic;
        color: var(--gold-lt)
    }

    .hero-intro {
        color: rgba(255, 255, 255, .85);
        font-size: 1rem;
        line-height: 1.85;
        font-weight: 300;
        max-width: 510px;
        margin-bottom: 2rem
    }

    .hero-intro strong {
        color: var(--gold-lt);
        font-weight: 600
    }

    .hctas {
        display: flex;
        gap: .9rem;
        flex-wrap: wrap
    }

    .btn-p {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        background: var(--gold);
        color: var(--text);
        font-weight: 700;
        font-size: .76rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        text-decoration: none;
        padding: .82rem 1.7rem;
        transition: background .2s, transform .2s
    }

    .btn-p:hover {
        background: var(--gold-lt);
        transform: translateY(-2px)
    }

    .btn-s {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        border: 1.5px solid rgba(255, 255, 255, .55);
        color: #fff;
        font-weight: 600;
        font-size: .76rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        text-decoration: none;
        padding: .82rem 1.7rem;
        transition: all .2s
    }

    .btn-s:hover {
        background: rgba(255, 255, 255, .1);
        border-color: #fff
    }

    /* Stats card */
    .stat-card {
        background: rgba(255, 255, 255, .11);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, .18);
        padding: 2rem
    }

    .stat-card h3 {
        font-family: 'Cormorant Garamond', serif;
        font-size: .85rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--gold-lt);
        margin-bottom: 1.3rem;
        padding-bottom: .8rem;
        border-bottom: 1px solid rgba(200, 144, 58, .3)
    }

    .sgrid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem
    }

    .sitem {
        text-align: center
    }

    .snum {
        font-family: 'Cormorant Garamond', serif;
        font-size: 2.4rem;
        font-weight: 700;
        color: var(--gold-lt);
        display: block;
        line-height: 1
    }

    .slabel {
        font-size: .67rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .65);
        display: block;
        margin-top: .3rem
    }

    /* DOMAINS BAR */
    .domains {
        background: var(--green);
        padding: 2.8rem 2rem
    }

    .domains-wrap {
        max-width: 1160px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center
    }

    .dom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .45rem;
        padding: .9rem 2rem;
        border-right: 1px solid rgba(255, 255, 255, .14);
        color: rgba(255, 255, 255, .82);
        text-align: center
    }

    .dom:last-child {
        border-right: none
    }

    .dom-icon {
        font-size: 1.5rem
    }

    .dom-lbl {
        font-size: .67rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase
    }

    /* POLE */
    .pole {
        padding: 5rem 2rem;
        background: var(--white);
        border-bottom: 1px solid var(--border)
    }

    .pole-grid {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: 5rem;
        align-items: start
    }

    .cards {
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        padding-top: .3rem
    }

    .pcard {
        display: flex;
        gap: 1.1rem;
        align-items: flex-start;
        padding: 1.4rem;
        border-left: 3px solid var(--gold);
        background: var(--green-lt);
        transition: background .25s
    }

    .pcard:hover {
        background: #dde9dd
    }

    .picon {
        font-size: 1.7rem;
        flex-shrink: 0;
        margin-top: .1rem
    }

    .pcard h3 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--green);
        margin-bottom: .3rem
    }

    .pcard p {
        color: var(--text-mid);
        font-size: .87rem;
        line-height: 1.6
    }

    /* PROCESS */
    .process {
        padding: 5rem 2rem;
        background: var(--cream)
    }

    .steps {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        margin-top: 3rem;
        position: relative
    }

    .steps::before {
        content: '';
        position: absolute;
        top: 37px;
        left: 13%;
        right: 13%;
        height: 2px;
        background: repeating-linear-gradient(to right, var(--gold) 0, var(--gold) 8px, transparent 8px, transparent 16px)
    }

    .step {
        text-align: center;
        padding: 0 .8rem;
        position: relative
    }

    .scircle {
        width: 74px;
        height: 74px;
        border-radius: 50%;
        background: var(--white);
        border: 2.5px solid var(--gold);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.1rem;
        font-size: 1.4rem;
        position: relative;
        z-index: 2;
        transition: background .25s
    }

    .step:hover .scircle {
        background: var(--gold-lt)
    }

    .sn {
        position: absolute;
        top: -5px;
        right: -5px;
        width: 21px;
        height: 21px;
        background: var(--green);
        color: #fff;
        font-size: .62rem;
        font-weight: 700;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .step h3 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1rem;
        font-weight: 700;
        color: var(--text);
        margin-bottom: .4rem
    }

    .step p {
        font-size: .83rem;
        color: var(--text-lt);
        line-height: 1.6
    }

    /* COUVERTURES */
    .couv {
        padding: 5rem 2rem;
        background: var(--white)
    }

    .couv-top {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1.5rem;
        margin-bottom: 1.5rem
    }

    .couv-quote {
        font-size: .97rem;
        color: var(--text-mid);
        font-style: italic;
        line-height: 1.75;
        border-left: 3px solid var(--gold);
        padding-left: 1rem;
        max-width: 600px;
        margin-bottom: 2rem
    }

    .yt-btn {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        background: #FF0000;
        color: #fff;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        text-decoration: none;
        padding: .6rem 1.3rem;
        white-space: nowrap;
        transition: background .2s
    }

    .yt-btn:hover {
        background: #cc0000
    }

    .yt-btn svg {
        fill: #fff;
        width: 15px;
        height: 11px
    }

    /* Filters */
    .frow {
        display: flex;
        flex-wrap: wrap;
        gap: .45rem;
        align-items: center;
        margin-bottom: 2.3rem
    }

    .flabel {
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--text-lt);
        margin-right: .3rem
    }

    .fbtn {
        padding: .4rem .95rem;
        border: 1.5px solid var(--border);
        background: transparent;
        color: var(--text-mid);
        font-family: 'Nunito Sans', sans-serif;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        cursor: pointer;
        transition: all .2s
    }

    .fbtn:hover {
        border-color: var(--green);
        color: var(--green)
    }

    .fbtn.active {
        background: var(--green);
        border-color: var(--green);
        color: #fff
    }

    /* Grid */
    .vgrid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 1.8rem
    }

    .vcard {
        background: var(--cream);
        border: 1px solid var(--border);
        overflow: hidden;
        cursor: pointer;
        transition: box-shadow .3s, transform .3s
    }

    .vcard:hover {
        transform: translateY(-5px);
        box-shadow: 0 18px 45px rgba(44, 74, 44, .13)
    }

    .vthumb {
        position: relative;
        overflow: hidden;
        aspect-ratio: 16/9;
        background: var(--green-lt)
    }

    .vthumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .5s
    }

    .vcard:hover .vthumb img {
        transform: scale(1.06)
    }

    .vplay {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(44, 74, 44, .38);
        opacity: 0;
        transition: opacity .3s
    }

    .vcard:hover .vplay {
        opacity: 1
    }

    .pcircle {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: var(--gold);
        display: flex;
        align-items: center;
        justify-content: center
    }

    .pcircle svg {
        fill: var(--text);
        width: 18px;
        height: 18px;
        margin-left: 3px
    }

    .vtag {
        position: absolute;
        top: .7rem;
        left: .7rem;
        background: var(--green);
        color: #fff;
        font-size: .6rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        padding: .25rem .65rem
    }

    .vbody {
        padding: 1.25rem 1.35rem 1.4rem
    }

    .vmeta {
        display: flex;
        align-items: center;
        gap: .6rem;
        margin-bottom: .55rem;
        flex-wrap: wrap
    }

    .vloc {
        display: flex;
        align-items: center;
        gap: .2rem;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .07em;
        text-transform: uppercase;
        color: var(--gold)
    }

    .vloc svg {
        width: 9px;
        height: 9px
    }

    .vyr {
        font-size: .68rem;
        color: var(--text-lt);
        margin-left: auto
    }

    .vtitle {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.18rem;
        font-weight: 700;
        color: var(--text);
        margin-bottom: .5rem;
        line-height: 1.22
    }

    .vdesc {
        font-size: .85rem;
        color: var(--text-mid);
        line-height: 1.65;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 1rem
    }

    .vlink {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        font-size: .73rem;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--green);
        text-decoration: none;
        transition: gap .2s, color .2s
    }

    .vlink:hover {
        color: var(--green-mid);
        gap: .7rem
    }

    .vlink svg {
        width: 12px;
        height: 12px
    }

    .no-r {
        grid-column: 1/-1;
        text-align: center;
        padding: 3rem;
        color: var(--text-lt);
        font-style: italic
    }

    /* MODAL */
    .mbg {
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(20, 38, 20, .92);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s;
        backdrop-filter: blur(5px)
    }

    .mbg.open {
        opacity: 1;
        pointer-events: all
    }

    .mbox {
        width: 100%;
        max-width: 840px;
        background: #fff;
        transform: scale(.96);
        transition: transform .3s
    }

    .mbg.open .mbox {
        transform: scale(1)
    }

    .mtop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .9rem 1.3rem;
        background: var(--green)
    }

    .mtitle {
        font-family: 'Cormorant Garamond', serif;
        font-size: .95rem;
        font-weight: 700;
        color: #fff;
        letter-spacing: .04em
    }

    .mclose {
        background: none;
        border: none;
        cursor: pointer;
        color: rgba(255, 255, 255, .75);
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: .3rem
    }

    .mclose:hover {
        color: var(--gold-lt)
    }

    .membed {
        position: relative;
        aspect-ratio: 16/9;
        background: #000
    }

    .membed iframe {
        width: 100%;
        height: 100%;
        border: none
    }

    .mfoot {
        padding: .9rem 1.3rem;
        background: var(--green-lt)
    }

    .mfoot p {
        font-size: .87rem;
        color: var(--text-mid);
        line-height: 1.6
    }

    /* TESTIMONIAL */
    .testsec {
        padding: 4.5rem 2rem;
        background: var(--green-lt);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border)
    }

    .testinner {
        max-width: 720px;
        margin: 0 auto;
        text-align: center
    }

    .qmark {
        font-family: 'Cormorant Garamond', serif;
        font-size: 5rem;
        line-height: .55;
        color: var(--gold);
        display: block;
        margin-bottom: .6rem
    }

    blockquote {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(1.1rem, 2.4vw, 1.4rem);
        font-style: italic;
        font-weight: 600;
        color: var(--text);
        line-height: 1.65;
        margin-bottom: 1.3rem
    }

    .qauth {
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--green)
    }

    .qrole {
        font-size: .78rem;
        color: var(--text-lt)
    }

    /* NEWSLETTER */
    .newsec {
        padding: 3.2rem 2rem;
        background: var(--white);
        border-bottom: 1px solid var(--border)
    }

    .newin {
        max-width: 1160px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
        flex-wrap: wrap
    }

    .newtxt h3 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text);
        margin-bottom: .35rem
    }

    .newtxt p {
        font-size: .87rem;
        color: var(--text-mid)
    }

    .socrow {
        display: flex;
        align-items: center;
        gap: .65rem;
        margin-top: .9rem
    }

    .soclbl {
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--text-lt)
    }

    .socico {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: 1.5px solid var(--border);
        color: var(--text-mid);
        text-decoration: none;
        font-size: .78rem;
        font-weight: 700;
        transition: all .2s
    }

    .socico:hover {
        background: var(--green);
        border-color: var(--green);
        color: #fff
    }

    .newform {
        display: flex;
        gap: 0;
        flex-shrink: 0
    }

    .newform input {
        padding: .72rem 1.1rem;
        border: 1.5px solid var(--border);
        border-right: none;
        font-family: 'Nunito Sans', sans-serif;
        font-size: .88rem;
        color: var(--text);
        background: var(--cream);
        width: 250px;
        outline: none
    }

    .newform input:focus {
        border-color: var(--green)
    }

    .newform button {
        padding: .72rem 1.3rem;
        background: var(--green);
        color: #fff;
        border: none;
        cursor: pointer;
        font-family: 'Nunito Sans', sans-serif;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        transition: background .2s
    }

    .newform button:hover {
        background: var(--green-mid)
    }

    /* CTA */
    .ctasec {
        padding: 6rem 2rem;
        background: linear-gradient(140deg, rgba(36, 62, 36, .96) 0%, rgba(56, 96, 54, .9) 100%), url('https://kilonge.com/wp-content/uploads/2024/07/Terroir-et-artisanat.png') center/cover no-repeat;
        text-align: center;
        position: relative;
        overflow: hidden
    }

    .ctasec::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(45deg, transparent 0, transparent 40px, rgba(255, 255, 255, .018) 40px, rgba(255, 255, 255, .018) 42px)
    }

    .ctainner {
        max-width: 660px;
        margin: 0 auto;
        position: relative
    }

    .ctaey {
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .22em;
        text-transform: uppercase;
        color: var(--gold-lt);
        margin-bottom: 1.1rem
    }

    .ctasec h2 {
        font-family: 'Cormorant Garamond', serif;
        font-size: clamp(1.8rem, 3.8vw, 2.8rem);
        font-weight: 700;
        font-style: italic;
        color: #fff;
        line-height: 1.2;
        margin-bottom: 1.2rem
    }

    .ctasec p {
        color: rgba(255, 255, 255, .8);
        font-size: .97rem;
        line-height: 1.85;
        font-weight: 300;
        margin-bottom: 2.5rem
    }

    .btn-cta {
        display: inline-flex;
        align-items: center;
        gap: .6rem;
        background: var(--gold);
        color: var(--text);
        font-weight: 700;
        font-size: .8rem;
        letter-spacing: .1em;
        text-transform: uppercase;
        text-decoration: none;
        padding: .95rem 2.2rem;
        transition: background .2s, transform .2s
    }

    .btn-cta:hover {
        background: var(--gold-lt);
        transform: translateY(-2px)
    }

    /* FOOTER */
    footer {
        background: var(--text);
        padding: 1.8rem 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 1rem
    }

    .fltxt {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--gold-lt);
        letter-spacing: .05em
    }

    .fltag {
        font-size: .72rem;
        color: rgba(255, 255, 255, .35);
        font-style: italic;
        margin-top: .15rem
    }

    footer nav a {
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, .45);
        text-decoration: none;
        margin-left: 1.4rem;
        transition: color .2s
    }

    footer nav a:hover {
        color: var(--gold-lt)
    }

    .fcopy {
        font-size: .7rem;
        color: rgba(255, 255, 255, .28)
    }

    /* RESPONSIVE */
    @media(max-width:960px) {
        .hero-grid {
            grid-template-columns: 1fr
        }

        .stat-card {
            display: none
        }

        .pole-grid {
            grid-template-columns: 1fr;
            gap: 2.5rem
        }

        .steps {
            grid-template-columns: 1fr 1fr;
            gap: 2rem
        }

        .steps::before {
            display: none
        }

        .couv-top {
            flex-direction: column;
            align-items: flex-start
        }
    }

    @media(max-width:640px) {
        nav .nav-links {
            display: none
        }

        .steps {
            grid-template-columns: 1fr
        }

        .domains-wrap {
            flex-direction: column;
            align-items: stretch
        }

        .dom {
            border-right: none;
            border-bottom: 1px solid rgba(255, 255, 255, .1);
            padding: .8rem 1rem
        }

        .dom:last-child {
            border-bottom: none
        }

        .newin {
            flex-direction: column
        }

        .newform {
            width: 100%
        }

        .newform input {
            flex: 1;
            width: auto
        }

        footer {
            flex-direction: column;
            text-align: center
        }

        footer nav a {
            margin: 0 .4rem
        }

        .vgrid {
            grid-template-columns: 1fr
        }
    }

    .km-author-box {
        display: flex;
        gap: 1.5rem;
        align-items: flex-start;
        margin: 3rem 0 1.5rem;
        padding: 2rem;
        background: var(--white);
        border: 1px solid var(--border);
        border-top: 4px solid var(--green);
        border-radius: 6px;
    }

    .km-author-box__avatar img {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
    }

    .km-author-box__label {
        display: block;
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--text-lt);
        margin-bottom: .35rem;
    }

    .km-author-box__name {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text);
        margin-bottom: .6rem;
    }

    .km-author-box__bio {
        font-family: 'Nunito Sans', sans-serif;
        font-size: .95rem;
        line-height: 1.7;
        color: var(--text-mid);
    }

    @media (max-width: 600px) {
        .km-author-box {
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
    }