:root {
    --paper: #F8F6F0;
    --paper-2: #EFEBE0;
    --paper-3: #E5DFD0;
    --ink: #22261F;
    --ink-2: #555A50;
    --ink-3: #8A8E84;
    --green: #2E5A3B;
    --green-deep: #1F3F2A;
    --green-soft: #6F8C61;
    --kraft: #C6A87A;
    --earth: #7A553A;
    --honey: #D8A64B;
    --line: rgba(34,38,31,.14);
    --line-strong: rgba(34,38,31,.28);
    --serif: "GraphikRegular",sans-serif;
    --sans: "GraphikRegular",sans-serif;
    --dev: "GraphikRegular",sans-serif;
    --max: 1160px;
    --measure: 62ch;
    --r: 6px;
    --ease: cubic-bezier(.4,0,.2,1);
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden
}

@media (prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *, *::before, *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important
    }
}

body {
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink);
    background: #fffefa;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden
}

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

a {
    color: inherit;
    text-decoration: none
}

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

ul {
    list-style: none
}

:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
    border-radius: 2px
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap
}

/* ---- Type ---- */
h1, h2, h3, .display {
    font-family: var(--serif);
    font-weight: 450;
    letter-spacing: -.015em;
    line-height: 1.08;
    font-variation-settings: "SOFT" 30,"opsz" 96
}

h1 {
    font-size: clamp(2.5rem,6.2vw,3.2rem);
    line-height: 1.02;
    letter-spacing: -.025em
}

.intro h1, .head h2, .closing h2 {
    background: linear-gradient(120deg,var(--ink) 0%,var(--green) 70%,var(--green-soft) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

h2 {
    font-size: clamp(1.85rem,3.6vw,2.2rem);
    letter-spacing: -.02em
}

h3 {
    font-size: clamp(1.25rem,1.9vw,1.2rem);
    font-variation-settings: "SOFT" 30,"opsz" 24;
    line-height: 1.25
}

p {
    max-width: var(--measure)
}

.lede {
    font-size: clamp(1.1rem,1.5vw,1.3rem);
    line-height: 1.5;
    color: var(--ink-2)
}

.small {
    font-size: .9rem;
    color: var(--ink-2)
}

.wordmark {
    font-family: var(--serif);
    font-weight: 500;
    letter-spacing: -.02em;
    font-variation-settings: "SOFT" 60,"opsz" 40;
    line-height: 1
}

    .wordmark .dev {
        font-family: var(--dev);
        font-weight: 600;
        letter-spacing: 0;
        background: linear-gradient(120deg,#D8A64B 0%,#6F8C61 45%,#2E5A3B 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent
    }

.dev {
    font-family: var(--dev)
}

.farmras-logo {
    display: flex;
    align-items: center;
    gap: .55rem
}

.farmras-logo-mark {
    width: 38px;
    height: 38px;
    flex: none
}

.farmras-logo > span {
    display: inline-block
}

/* ---- Layout ---- */
.wrap {
    width: min(var(--max),100% - 2.5rem);
    margin-inline: auto
}

.section {
    padding-block: 40px 35px;
}

    .section + .section {
        padding-top: 0
    }

    .section.tint {
        background: linear-gradient(135deg,#F3EEDF 0%,#E9E4CF 50%,#DDE3CF 100%);
        padding: 29px 35px;
    }

        .section.tint + .section {
            padding: 28px 35px;
        }

    .section.dark {
        background: linear-gradient(120deg,#16331F 0%,#2E5A3B 55%,#4E7A4A 100%);
        color: var(--paper);
        padding: 40px 35px;
    }

        .section.dark + .section {
            padding: 40px 35px;
        }

        .section.dark .lede, .section.dark .small {
            color: rgba(248,246,240,.72)
        }

        .section.dark .head h2 {
            background: linear-gradient(120deg,#F8F6F0,#F0CB7A);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent
        }

.grid {
    display: grid;
    gap: clamp(1.5rem,3vw,3rem)
}

.g-2 {
    grid-template-columns: repeat(2,1fr)
}

.g-3 {
    grid-template-columns: repeat(3,1fr)
}

.g-5 {
    grid-template-columns: repeat(5,1fr)
}

.g-side {
    grid-template-columns: minmax(0,5fr) minmax(0,7fr);
    align-items: center
}

    .g-side.rev {
        grid-template-columns: minmax(0,7fr) minmax(0,5fr)
    }

.stack > * + * {
    margin-top: 1rem
}

.stack-lg > * + * {
    margin-top: 1.75rem
}

.head {
    margin-bottom: 20px;
    max-width: 44rem;
}

    .head h2 + p {
        margin-top: 1rem
    }

@media (max-width:900px) {
    .g-3, .g-5 {
        grid-template-columns: repeat(2,1fr)
    }

    .g-side, .g-side.rev {
        grid-template-columns: 1fr
    }
}

@media (max-width:600px) {
    .g-2, .g-3, .g-5 {
        grid-template-columns: 1fr
    }
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.4rem;
    border-radius: 999px;
    font-weight: 500;
    font-size: .98rem;
    line-height: 1;
    border: 1.5px solid var(--ink);
    transition: background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)
}

    .btn.primary {
        background: linear-gradient(135deg,#4E7A4A 0%,#2E5A3B 55%,#1F3F2A 100%);
        width: fit-content;
        border-radius: 40px;
        border-color: transparent;
        color: #fff;
        box-shadow: 0 6px 18px -8px rgba(31,63,42,.55)
    }

        .btn.primary:hover {
            background: linear-gradient(135deg,#5E8C58 0%,#356A45 55%,#244A31 100%);
            border-color: transparent
        }

    .btn.ghost {
        background: transparent;
        color: var(--ink)
    }

        .btn.ghost:hover {
            background: var(--ink);
            color: var(--paper)
        }

.dark .btn.ghost {
    border-color: rgba(248,246,240,.6);
    color: var(--paper)
}

    .dark .btn.ghost:hover {
        background: var(--paper);
        color: var(--ink)
    }

.dark .btn.primary {
    background: linear-gradient(135deg,#F0CB7A 0%,#D8A64B 60%,#C48A2E 100%);
    border-color: transparent;
    color: var(--ink)
}

    .dark .btn.primary:hover {
        background: linear-gradient(135deg,#F6D68C 0%,#E3B35A 60%,#CF963A 100%)
    }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem
}

.link {
    font-weight: 500;
    border-bottom: 1.5px solid var(--line-strong);
    padding-bottom: 1px;
    transition: border-color .2s
}

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

/* ---- Header ---- */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgb(249 246 238 / 88%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line)
}

    .header .wrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: auto;
        gap: 1rem
    }

.brand {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    font-size: 1.65rem
}

    .brand .tag {
        font-family: var(--sans);
        font-size: .72rem;
        color: var(--ink-3);
        letter-spacing: .02em;
        font-weight: 500;
        display: none
    }

@media (min-width:1100px) {
    .brand .tag {
        display: inline
    }
}

.nav {
    display: flex;
    gap: clamp(.25rem,1.4vw,1.4rem);
    align-items: center
}

    .nav a {
        padding: .45rem .55rem;
        font-size: .95rem;
        font-weight: 500;
        color: #3a3c38;
        border-radius: var(--r);
        position: relative;
        transition: color .2s
    }

        .nav a:hover {
            color: var(--ink)
        }

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

            .nav a.active::after {
                content: "";
                position: absolute;
                left: .55rem;
                right: .55rem;
                bottom: .1rem;
                height: 1.5px;
                background: var(--green)
            }

    .nav .cta {
        background: linear-gradient(135deg,#4E7A4A,#1F3F2A);
        color: white !important;
        border-color: transparent;
        border-radius: 999px;
        padding: .5rem 1rem;
        margin-left: .4rem
    }

        .nav .cta:hover {
        }

        .nav .cta.active::after {
            display: none
        }

.menu-btn {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: var(--r);
    position: relative
}

    .menu-btn span {
        position: absolute;
        left: 10px;
        right: 10px;
        height: 1.5px;
        background: var(--ink);
        transition: transform .25s var(--ease),opacity .2s
    }

        .menu-btn span:nth-child(1) {
            top: 15px
        }

        .menu-btn span:nth-child(2) {
            top: 22px
        }

        .menu-btn span:nth-child(3) {
            top: 29px
        }

.menu-open .menu-btn span:nth-child(1) {
    transform: translateY(7px) rotate(45deg)
}

.menu-open .menu-btn span:nth-child(2) {
    opacity: 0
}

.menu-open .menu-btn span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg)
}

@media (max-width:980px) {
    .menu-btn {
        display: block
    }

    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: calc(100vh - 68px);
        height: calc(100dvh - 68px);
        background: var(--paper);
        flex-direction: column;
        align-items: stretch;
        padding: 1.25rem;
        gap: .15rem;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity .25s var(--ease),transform .25s var(--ease),visibility 0s .25s;
        overflow: auto;
        border-top: 1px solid var(--line)
    }

    .menu-open .nav {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: 0s
    }

    .nav a {
        font-size: 1.35rem;
        font-family: var(--serif);
        font-weight: 450;
        padding: .85rem .5rem;
        border-bottom: 1px solid var(--line);
        border-radius: 0;
        color: var(--ink)
    }

        .nav a.active::after {
            display: none
        }

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

    .nav .cta {
        margin: 1rem 0 0;
        text-align: center;
        border-radius: 999px;
        border-bottom: 1.5px solid var(--green)
    }

    .menu-open {
        overflow: hidden
    }
}

/* ---- Pages ---- */
.page {
    display: block;
    animation: pageIn .5s var(--ease)
}

    .page.active {
        display: block;
        animation: pageIn .5s var(--ease)
    }

@keyframes pageIn {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

/* ---- Image slots (documentary photo placeholders) ---- */
.ph {
    position: relative;
    overflow: hidden;
    border-radius: var(--r);
    background: var(--paper-3);
    color: rgba(34,38,31,.45);
    isolation: isolate
}

    .ph::before {
        content: "";
        position: absolute;
        inset: 0;
        background: var(--ph-bg,linear-gradient(160deg,#C8CFB2 0%,#8FA37C 55%,#4E6B45 100%));
        z-index: -1
    }

    .ph::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
        mix-blend-mode: soft-light;
        opacity: .7;
        pointer-events: none
    }

    .ph .motif {
        position: absolute;
        inset: 0;
        margin: auto;
        width: min(46%,220px);
        height: auto;
        color: rgba(248,246,240,.55);
        stroke: currentColor;
        fill: none;
        stroke-width: 1.25;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .ph img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
        filter: saturate(.92) contrast(1.02)
    }

    .ph:has(img)::after {
        background: linear-gradient(180deg,rgba(31,63,42,0) 55%,rgba(22,51,31,.35) 100%);
        mix-blend-mode: normal;
        opacity: 1
    }

    .ph .cap {
        position: absolute;
        left: .9rem;
        bottom: .8rem;
        right: .9rem;
        font-size: .72rem;
        letter-spacing: .01em;
        color: rgba(248,246,240,.85);
        display: flex;
        gap: .45rem;
        align-items: center
    }

        .ph .cap::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: currentColor;
            flex: none
        }

    .ph.field {
        --ph-bg: linear-gradient(160deg,#E8E4C4 0%,#A8C48C 35%,#4F8A5A 70%,#1F3F2A 100%)
    }

    .ph.dawn {
        --ph-bg: linear-gradient(165deg,#F6DDB0 0%,#E0C48A 25%,#9FB37E 55%,#3E6A48 85%,#1F3F2A 100%)
    }

    .ph.honey {
        --ph-bg: linear-gradient(160deg,#FCE9BF 0%,#F0C56A 35%,#D8A64B 60%,#A65E22 100%)
    }

    .ph.kraft {
        --ph-bg: linear-gradient(160deg,#F0DFC5 0%,#D8B98B 40%,#B07D52 70%,#6A3F28 100%)
    }

    .ph.lemon {
        --ph-bg: linear-gradient(160deg,#FBF3B8 0%,#E7DD7A 35%,#A9C46A 65%,#4C7E48 100%)
    }

    .ph.earth {
        --ph-bg: linear-gradient(160deg,#EAD6C0 0%,#C89A78 40%,#94623F 70%,#4B2E1F 100%)
    }

    .ph.soil {
        --ph-bg: linear-gradient(160deg,#D9CFC0 0%,#A69078 40%,#6B5240 70%,#2E211A 100%)
    }

    .ph.water {
        --ph-bg: linear-gradient(160deg,#E6F0E4 0%,#A9D1BE 35%,#5E9E8E 70%,#245A55 100%)
    }

    .ph.r-4-3 {
        aspect-ratio: 4/3;
        margin-top: -45px;
    }

    .ph.r-3-4 {
        aspect-ratio: 3/4
    }

    .ph.r-1-1 {
        aspect-ratio: 1/1
    }

    .ph.r-16-9 {
        aspect-ratio: 16/9
    }

    .ph.r-5-4 {
        aspect-ratio: 5/4
    }

    .ph.r-6-4 {
        aspect-ratio: 6 / 4;
    }

/* ---- Hero ---- */
.hero {
    position: relative;
    min-height: min(92vh,860px);
    display: flex;
    align-items: flex-end;
    color: var(--paper);
    isolation: isolate
}

    .hero .ph {
        position: absolute;
        inset: 0;
        border-radius: 0;
        z-index: -1
    }

        .hero .ph img {
            filter: saturate(.95)
        }

    .hero:not(.compact) {
        min-height: 500px
    }

        .hero:not(.compact) .ph img {
            object-position: center 60%
        }

.slides img {
    opacity: 0;
    transition: opacity 1.6s var(--ease)
}

    .slides img.on {
        opacity: 1
    }

.hero .ph .motif {
    width: min(52vw,640px);
    opacity: .45;
    margin-right: 4%;
    margin-bottom: 6%
}

.hero .ph .cap {
    left: auto;
    right: 1.25rem;
    bottom: 1.1rem;
    color: rgba(248,246,240,.7)
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg,rgba(22,51,31,.05) 0%,rgba(22,51,31,0) 35%,rgba(16,40,24,.85) 100%),linear-gradient(90deg,rgba(16,40,24,.30),transparent 55%)
}

.hero .wrap {
    padding-block: clamp(3rem,7vw,6rem);
    width: min(var(--max),100% - 2.5rem)
}
/*.hero h1{max-width:12ch}*/
.hero .lede {
    color: rgba(248,246,240,.85);
    margin-top: 1.25rem; /*max-width:34c*/
}

.hero .tagline {
    margin-top: 1.1rem;
    font-family: var(--serif);
    font-size: 1.15rem;
    font-style: italic;
    font-variation-settings: "SOFT" 100,"opsz" 24;
    color: rgba(248,246,240,.9)
}

.hero .btn.ghost {
    border-color: rgba(248,246,240,.7);
    color: var(--paper)
}

    .hero .btn.ghost:hover {
        background: var(--paper);
        color: var(--ink)
    }

.hero .btn.primary {
    background: var(--paper);
    border-color: var(--paper);
    color: var(--ink)
}

    .hero .btn.primary:hover {
        background: #fff;
        border-color: #fff
    }

.hero.compact {
    min-height: 500px
}

    .hero.compact::after {
        background: linear-gradient(180deg,rgba(16,40,24,.08) 0%,rgba(16,40,24,.02) 40%,rgba(16,40,24,.86) 100%),linear-gradient(90deg,rgba(16,40,24,.28),transparent 60%)
    }

    .hero.compact .ph img {
        object-position: center 45%
    }

.hero h1, .hero .lede, .hero .tagline {
    text-shadow: 0 1px 18px rgba(0,0,0,.25)
}

.hero.compact h1 {
    max-width: 16ch;
    font-size: clamp(2.4rem,5.6vw,3.2rem)
}

.hero.compact .lede {
    max-width: 44ch
}

@media (max-width:640px) {
    .hero {
        min-height: min(78vh,640px)
    }

        .hero.compact {
            min-height: min(72vh,600px)
        }
}
/* Page intro (no image) */
.intro {
    padding-block: clamp(3.5rem,8vw,6.5rem) clamp(2.5rem,5vw,4rem)
}

    .intro h1 {
        max-width: 16ch;
        font-size: clamp(2.3rem,5.4vw,3.2rem)
    }

    .intro .lede {
        margin-top: 1.25rem
    }

    .intro .crumb {
        font-size: .85rem;
        color: var(--ink-3);
        margin-bottom: 1.25rem
    }

        .intro .crumb a:hover {
            color: var(--ink)
        }

.hero .crumb {
    font-size: .85rem;
    color: rgba(248,246,240,.7);
    margin-bottom: 1rem
}

    .hero .crumb a:hover {
        color: var(--paper)
    }

/* ---- Category cards ---- */
.cats {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 1.25rem
}

.cat {
    display: block;
    border-radius: var(--r)
}

    .cat .ph img, .tile .ph img {
        transition: transform .6s var(--ease)
    }

    .cat:hover .ph img, .tile:hover .ph img {
        transform: scale(1.04)
    }

    .cat h3 {
        margin-top: 1rem;
        font-size: 1.2rem
    }

    .cat p {
        margin-top: .4rem;
        font-size: .93rem;
        color: var(--ink-2)
    }

    .cat .cta {
        display: inline-block;
        margin-top: .7rem;
        font-size: .9rem;
        font-weight: 500;
        color: var(--green);
        border-bottom: 1.5px solid transparent;
        transition: border-color .2s
    }

    .cat:hover .cta {
        border-color: var(--green)
    }

@media (max-width:1000px) {
    .cats {
        grid-template-columns: repeat(3,1fr)
    }
}

@media (max-width:640px) {
    .cats {
        grid-template-columns: 1fr;
        gap: 1.5rem
    }

    .cat {
        display: grid;
        grid-template-columns: 38% 1fr;
        gap: 1.1rem;
        align-items: center
    }

        .cat .ph {
            aspect-ratio: 1/1
        }

        .cat h3 {
            margin-top: 0
        }

        .cat p {
            font-size: .9rem
        }

        .cat .ph .cap {
            display: none
        }
}

/* Tiles (product landing) */
.tiles {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1.5rem
}

.tile {
    display: flex;
    flex-direction: column;
    gap: .9rem
}

    .tile p {
        color: var(--ink-2)
    }

@media (max-width:900px) {
    .tiles {
        grid-template-columns: repeat(2,1fr)
    }
}

@media (max-width:560px) {
    .tiles {
        grid-template-columns: 1fr
    }
}

/* ---- Feature list / definition rows ---- */
.rows {
    border-top: 1px solid var(--line)
}

.row {
    display: grid;
    grid-template-columns: minmax(0,4fr) minmax(0,8fr);
    gap: 1rem 2.5rem;
    padding: 1.4rem 0;
    border-bottom: 1px solid var(--line)
}

    .row h3 {
        font-size: 1.2rem;
        background: linear-gradient(120deg,var(--ink),var(--green));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent
    }

    .row p {
        color: var(--ink-2)
    }

@media (max-width:700px) {
    .row {
        grid-template-columns: 1fr;
        gap: .4rem
    }
}

/* Plain list with leaf marks */
.marks {
    display: grid;
    gap: .6rem;
    max-width: var(--measure)
}

    .marks li {
        position: relative;
        padding-left: 1.5rem;
        color: var(--ink-2)
    }

        .marks li::before {
            content: "";
            position: absolute;
            left: 0;
            top: .62em;
            width: .65rem;
            height: .65rem;
            border-radius: 50% 0;
            background: var(--green-soft);
            transform: rotate(-15deg)
        }

.dark .marks li {
    color: rgba(248,246,240,.8)
}

    .dark .marks li::before {
        background: var(--honey)
    }

.marks.cols {
    max-width: none;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: .6rem 2.5rem
}

@media (max-width:640px) {
    .marks.cols {
        grid-template-columns: 1fr
    }
}

/* Statement */
.statement {
    font-family: var(--serif);
    font-size: clamp(1.6rem,3.2vw,2.5rem);
    line-height: 1.2;
    letter-spacing: -.015em;
    max-width: 24ch;
    font-variation-settings: "SOFT" 40,"opsz" 60
}

    .statement em {
        font-style: italic;
        font-variation-settings: "SOFT" 100,"opsz" 60;
        background: linear-gradient(120deg,#2E5A3B,#6F8C61 60%,#C48A2E);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent
    }

/* Note box (from deck's green notes) */
.note {
    border-left: 3px solid var(--green);
    padding: 1rem 1.25rem;
    background: linear-gradient(90deg,rgba(111,140,97,.18),rgba(216,166,75,.10));
    border-radius: 0 var(--r) var(--r) 0;
    max-width: var(--measure)
}

    .note strong {
        display: block;
        font-weight: 600;
        margin-bottom: .25rem
    }

    .note p {
        font-size: .95rem;
        color: var(--ink-2)
    }

/* ---- Farm layout diagram ---- */
.layout {
    display: grid;
    grid-template-columns: minmax(0,6fr) minmax(0,5fr);
    gap: clamp(1.5rem,4vw,4rem);
    align-items: start
}

.plan {
    position: sticky;
    top: 90px
}

    .plan svg {
        width: 100%;
        height: auto;
        font-family: var(--sans)
    }

    .plan .zone {
        cursor: pointer;
        transition: opacity .25s
    }

    .plan.has-focus .zone:not(.on) {
        opacity: .32
    }

    .plan .zone text {
        font-size: 11px;
        fill: var(--ink);
        pointer-events: none
    }

.zones {
    border-top: 1px solid var(--line)
}

.zone-item {
    border-bottom: 1px solid var(--line)
}

    .zone-item button {
        width: 100%;
        text-align: left;
        padding: 1.2rem 0;
        display: grid;
        grid-template-columns: 1.6rem 1fr;
        gap: .9rem;
        align-items: start
    }

    .zone-item .sw {
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 3px;
        margin-top: .25rem
    }

    .zone-item h3 {
        font-size: 1.15rem
    }

    .zone-item p {
        margin-top: .4rem;
        color: var(--ink-2);
        font-size: .98rem;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height .4s var(--ease),opacity .3s,margin .3s
    }

    .zone-item.on p {
        max-height: 14rem;
        opacity: 1
    }

    .zone-item.on h3 {
        color: var(--green)
    }

@media (max-width:860px) {
    .layout {
        grid-template-columns: 1fr
    }

    .plan {
        position: static
    }
}

/* ---- Why (values) ---- */
.why {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 2rem 1.5rem;
    counter-reset: none
}

    .why h3 {
        font-size: 1.25rem;
        font-style: italic;
        font-variation-settings: "SOFT" 100,"opsz" 32
    }

    .why p {
        margin-top: .6rem;
        color: rgba(248,246,240,.78);
        font-size: .95rem
    }

@media (max-width:1000px) {
    .why {
        grid-template-columns: repeat(3,1fr)
    }
}

@media (max-width:640px) {
    .why {
        grid-template-columns: 1fr;
        gap: 1.5rem
    }
}

/* Teasers */
.teasers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem
}

.teaser {
    display: grid;
    grid-template-columns: 42% 1fr;
    gap: 1.25rem;
    align-items: center;
    padding: 1.25rem;
    border: 1px solid rgba(46,90,59,.18);
    border-radius: var(--r);
    background: white;
    box-shadow: 0 12px 30px -20px rgba(31,63,42,.35)
}

    .teaser h3 {
        font-size: 1.35rem
    }

    .teaser p {
        margin-top: .5rem;
        color: var(--ink-2);
        font-size: .95rem
    }

    .teaser .link {
        display: inline-block;
        margin-top: .9rem
    }

@media (max-width:820px) {
    .teasers {
        grid-template-columns: 1fr
    }
}

@media (max-width:480px) {
    .teaser {
        grid-template-columns: 1fr
    }
}

.banner {
    position: relative;
    min-height: min(70vh,600px);
    display: flex;
    align-items: flex-end;
    color: var(--paper);
    isolation: isolate;
    margin-bottom: 15px;
}

    .banner .ph {
        position: absolute;
        inset: 0;
        border-radius: 0;
        z-index: -1
    }

        .banner .ph img {
            filter: saturate(1)
        }

    .banner::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(180deg,rgba(16,40,24,.05) 0%,rgba(16,40,24,.15) 45%,rgba(16,40,24,.8) 100%),linear-gradient(90deg,rgba(16,40,24,.35),transparent 55%)
    }

    .banner .wrap {
        padding-block: clamp(3rem,6vw,5rem)
    }

    .banner .statement {
        color: var(--paper);
        max-width: 22ch;
        text-shadow: 0 1px 18px rgba(0,0,0,.3)
    }

        .banner .statement em {
            background: white;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent
        }
/* Closing CTA */
.closing {
    text-align: left;
    background: linear-gradient(115deg, #F5E7C4 0%, #E8D9A6 35%, #eacc9e 70%, #f0cb7a 100%);
}

    .closing h2 {
        font-size: clamp(2.2rem,5vw,2.2rem);
        background: linear-gradient(120deg,#16331F,#2E5A3B 60%,#7A553A);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent
    }

    .closing .lede {
        margin-top: 1.25rem
    }

/* ---- FAQ ---- */
.faq {
    border-top: 1px solid var(--line);
    max-width: 52rem
}

    .faq details {
        border-bottom: 1px solid var(--line)
    }

    .faq summary {
        cursor: pointer;
        list-style: none;
        padding: 1.25rem 3rem 1.25rem 0;
        font-family: var(--serif);
        font-size: 1.25rem;
        font-weight: 450;
        position: relative;
        letter-spacing: -.01em
    }

        .faq summary::-webkit-details-marker {
            display: none
        }

        .faq summary::after {
            content: "";
            position: absolute;
            right: .4rem;
            top: 50%;
            width: .7rem;
            height: .7rem;
            border-right: 1.5px solid var(--ink);
            border-bottom: 1.5px solid var(--ink);
            transform: translateY(-70%) rotate(45deg);
            transition: transform .3s var(--ease)
        }

    .faq details[open] summary::after {
        transform: translateY(-30%) rotate(225deg)
    }

    .faq details p {
        padding: 0 0 1.4rem;
        color: var(--ink-2)
    }

/* ---- Forms ---- */
.form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem 1.25rem;
    max-width: 56rem;
    border: 1px solid #28262844;
    padding: 15px;
    border-radius: 10px;
}

    .form .full {
        grid-column: 1/-1
    }

    .form label {
        display: block;
        font-size: .88rem;
        font-weight: 500;
        margin-bottom: .4rem;
        color: var(--ink-2)
    }

    .form input, .form select, .form textarea {
        width: 100%;
        font: inherit;
        font-size: 1rem;
        padding: .8rem .95rem;
        border: 1.5px solid var(--line-strong);
        border-radius: var(--r);
        background: #fff;
        color: var(--ink);
        transition: border-color .2s
    }

        .form input:focus, .form select:focus, .form textarea:focus {
            outline: none;
            border-color: var(--green);
            box-shadow: 0 0 0 3px rgba(46,90,59,.15)
        }

    .form textarea {
        min-height: 130px;
        resize: vertical
    }

    .form .consent {
        display: flex;
        gap: .7rem;
        align-items: flex-start;
        font-size: .9rem;
        color: var(--ink-2)
    }

        .form .consent input {
            width: 1.1rem;
            height: 1.1rem;
            margin-top: .2rem;
            flex: none;
            accent-color: var(--green)
        }

.form-ok {
    display: none;
    padding: 1.5rem;
    border: 1.5px solid var(--green);
    border-radius: var(--r);
    background: rgba(46,90,59,.06);
    max-width: 56rem
}

    .form-ok h3 {
        color: var(--green)
    }

.form.sent {
    display: none
}

    .form.sent + .form-ok {
        display: block
    }

@media (max-width:640px) {
    .form {
        grid-template-columns: 1fr
    }
}

/* Contact details */
.details {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1.5rem 2rem
}

    .details dt {
        font-size: .85rem;
        color: var(--ink-3);
        margin-bottom: .2rem
    }

    .details dd {
        font-weight: 500
    }

    .details a:hover {
        color: var(--green)
    }

/* Paths (partner) */
.paths {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1.5rem
}

.path {
    padding: 1.75rem;
    border: 1px solid rgba(46,90,59,.18);
    border-radius: var(--r);
    display: flex;
    flex-direction: column;
    gap: .8rem;
    background: white;
    box-shadow: 0 12px 30px -20px rgba(31,63,42,.35)
}

    .path p {
        color: var(--ink-2);
        flex: 1
    }

    .path .btn {
        align-self: flex-start;
        margin-top: .5rem
    }

@media (max-width:760px) {
    .paths {
        grid-template-columns: 1fr
    }
}

/* Legal outlines */
.legal ol {
    padding-left: 1.4rem;
    max-width: var(--measure);
    display: grid;
    gap: .5rem;
    color: var(--ink-2)
}

/* ---- Footer ---- */
.footer {
    background: linear-gradient(160deg,#22261F 0%,#1B2E22 55%,#16331F 100%);
    color: rgba(248,246,240,.75);
    padding: clamp(3rem,6vw,5rem) 0 2rem
}

    .footer .top {
        display: grid;
        grid-template-columns: minmax(0,1.4fr) repeat(3,minmax(0,1fr));
        gap: 2rem
    }

    .footer .brand {
        color: var(--paper);
        font-size: 2rem
    }

        .footer .brand .dev {
            color: var(--honey)
        }

    .footer .bl {
        margin-top: .75rem;
        font-size: .9rem;
        color: rgba(248,246,240,.6)
    }

    .footer .tl {
        font-family: var(--serif);
        font-style: italic;
        color: var(--paper);
        margin-top: 1.25rem;
        font-variation-settings: "SOFT" 100,"opsz" 24
    }

    .footer h4 {
        font-family: var(--sans);
        font-size: .85rem;
        font-weight: 600;
        color: var(--paper);
        margin-bottom: .9rem
    }

    .footer li {
        margin-bottom: .5rem;
        font-size: .93rem
    }

    .footer a:hover {
        color: var(--paper)
    }

    .footer .bottom {
        margin-top: 3rem;
        padding-top: 1.5rem;
        border-top: 1px solid rgba(248,246,240,.14);
        display: flex;
        flex-wrap: wrap;
        gap: .75rem 2rem;
        justify-content: space-between;
        font-size: .82rem;
        color: rgba(248,246,240,.5)
    }

@media (max-width:820px) {
    .footer .top {
        grid-template-columns: 1fr 1fr
    }
}

@media (max-width:480px) {
    .footer .top {
        grid-template-columns: 1fr
    }
}

.farmras-logo {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.farmras-logo-img {
    width: 100px;
    height: fit-content;
    flex: none;
    margin: 8px 0;
}

.text-danger {
    color: red;
    font-size: 12px;
}