/* Self-hosted fonts (latin), so text shows without waiting on Google Fonts */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500 700; font-display: swap; src: url(../fonts/fraunces-latin.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/inter-latin.woff2) format("woff2"); }
:root {
    /* Brand palette */
    --moss-900: #24331C;
    --moss-800: #2E4124;
    --moss-700: #3A512D;
    /* Hunter green */
    --moss-600: #4D6A3C;
    --camel: #A58D67;
    /* Camel */
    --gold: #DAAB84;
    /* Sandy */
    --gold-dark: #C4916A;
    --sage-1: #C7D8BD;
    --sage-2: #CDDCC3;
    --sage-3: #D3DFC9;
    --sage-4: #D8E3CF;
    --sage-5: #DEE7D5;
    --sage-6: #E4EADC;
    --linen-1: #EAEEE2;
    --linen-2: #EFF2E8;
    --linen-3: #F5F5EE;
    --cream: #FBF9F4;
    --ink: #1F2A19;
    --muted: #5B6553;
    --line: #E2E6D9;
    --serif: "Fraunces", Georgia, serif;
    --sans: "Inter", system-ui, sans-serif;
    --radius: 18px;
    --radius-sm: 12px;
    --shadow: 0 1px 2px rgba(36, 51, 28, .06), 0 12px 32px -12px rgba(36, 51, 28, .18);
    --shadow-lg: 0 30px 60px -20px rgba(36, 51, 28, .35);
}

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

html {
    scroll-behavior: smooth;
}

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

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

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

ul {
    list-style: none;
}

button {
    font: inherit;
    cursor: pointer;
}

h1,
h2,
h3,
h4 {
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.01em;
}

.container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 104px 0;
}

.ph {
    background: linear-gradient(135deg, var(--sage-3), var(--camel));
}

.kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--camel);
}

.kicker::before {
    content: "";
    width: 26px;
    height: 1.5px;
    background: currentColor;
}

.title {
    font-size: clamp(30px, 4.2vw, 50px);
    margin-top: 10px;
    color: var(--moss-800);
}

.title-sm {
    font-size: clamp(28px, 3.4vw, 40px);
}

.lede {
    color: var(--muted);
    font-size: 17.5px;
    margin-top: 16px;
    max-width: 640px;
}

.head-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 44px;
    flex-wrap: wrap;
}

.center {
    text-align: center;
}

.center .lede {
    margin-inline: auto;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 26px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    border: 1.5px solid transparent;
    transition: background .2s, color .2s, border-color .2s, transform .2s;
    white-space: nowrap;
}

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

.btn svg {
    width: 18px;
    height: 18px;
}

.btn-gold {
    background: var(--gold);
    color: var(--moss-900);
}

.btn-gold:hover {
    background: var(--gold-dark);
}

.btn-moss {
    background: var(--moss-700);
    color: var(--cream);
}

.btn-moss:hover {
    background: var(--moss-800);
}

.btn-ghost {
    border-color: rgba(251, 249, 244, .45);
    color: var(--cream);
    background: rgba(251, 249, 244, .06);
    backdrop-filter: blur(6px);
}

.btn-ghost:hover {
    background: rgba(251, 249, 244, .16);
}

.btn-line {
    border-color: var(--moss-700);
    color: var(--moss-700);
}

.btn-line:hover {
    background: var(--moss-700);
    color: var(--cream);
}

.btn-sm {
    padding: 10px 18px;
    font-size: 14px;
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--moss-700);
    font-size: 15px;
}

.link-arrow::after {
    content: "→";
    transition: transform .2s;
}

.link-arrow:hover::after {
    transform: translateX(4px);
}

/* ---------- Top bar ---------- */
.topbar {
    background: var(--moss-900);
    color: var(--sage-3);
    font-size: 13px;
}

.topbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-block: 9px;
}

.topbar b {
    color: var(--gold);
    font-weight: 600;
}

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

/* ---------- Header ---------- */
.header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(251, 249, 244, .92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s, box-shadow .3s;
}

.header.scrolled {
    border-color: var(--line);
    box-shadow: 0 8px 24px -16px rgba(36, 51, 28, .25);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-block: 14px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--moss-700);
    display: grid;
    place-items: center;
}

.brand-mark svg {
    width: 24px;
    height: 24px;
}

.brand strong {
    display: block;
    font-family: var(--serif);
    font-size: 21px;
    color: var(--moss-800);
    line-height: 1.1;
}

.brand small {
    display: block;
    font-size: 11.5px;
    color: var(--camel);
    letter-spacing: .08em;
    text-transform: uppercase;
    font-weight: 600;
}

.menu {
    display: flex;
    align-items: center;
    gap: 4px;
}

.menu>li>a,
.menu>li>button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 500;
    color: var(--ink);
    background: none;
    border: 0;
    transition: background .2s, color .2s;
}

.menu>li>a:hover,
.menu>li>button:hover,
.menu>li>a.active {
    background: var(--sage-6);
    color: var(--moss-700);
}

.has-drop {
    position: relative;
}

.has-drop>button::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-3px);
}

.drop {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    translate: -50% 0;
    width: 460px;
    background: var(--white, #fff);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: .2s;
}

.has-drop:hover .drop,
.has-drop:focus-within .drop {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.drop a {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14.5px;
}

.drop a:hover {
    background: var(--linen-2);
    color: var(--moss-700);
}

.drop a small {
    display: block;
    color: var(--muted);
    font-size: 12.5px;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-btn {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    display: grid;
    place-items: center;
    color: var(--moss-700);
    transition: background .2s;
}

.icon-btn:hover {
    background: var(--sage-6);
}

.icon-btn svg {
    width: 19px;
    height: 19px;
}

.cart-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--moss-900);
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.burger {
    display: none;
}

/* Mobile drawer */
.drawer-bg {
    position: fixed;
    inset: 0;
    background: rgba(20, 28, 15, .5);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 80;
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 88vw);
    background: var(--cream);
    z-index: 90;
    transform: translateX(100%);
    transition: transform .35s ease;
    display: flex;
    flex-direction: column;
}

.drawer-open .drawer {
    transform: none;
}

.drawer-open .drawer-bg {
    opacity: 1;
    visibility: visible;
}

.drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.drawer nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

.drawer nav a {
    display: block;
    padding: 11px 12px;
    border-radius: 10px;
    font-weight: 500;
}

.drawer nav a:hover {
    background: var(--sage-6);
}

.drawer-foot {
    padding: 16px 20px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: calc(100vh - 110px);
    min-height: calc(100svh - 110px);
    display: flex;
    align-items: center;
    color: var(--cream);
    overflow: hidden;
    padding: 90px 0 120px;
}

.hero-bg {
    position: absolute;
    inset: 0;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.06);
    animation: slowzoom 18s ease-out forwards;
}

.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(36, 51, 28, .94) 0%, rgba(36, 51, 28, .78) 45%, rgba(36, 51, 28, .35) 100%), linear-gradient(0deg, rgba(36, 51, 28, .7), transparent 40%);
}

@keyframes slowzoom {
    to {
        transform: scale(1);
    }
}

.hero .container {
    position: relative;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid rgba(218, 171, 132, .45);
    background: rgba(251, 249, 244, .08);
    backdrop-filter: blur(6px);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .03em;
}

.pill .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(218, 171, 132, .25);
}

.hero h1 {
    font-size: clamp(42px, 6.4vw, 80px);
    line-height: 1.03;
    margin-top: 24px;
    max-width: 900px;
}

.hero h1 em {
    font-style: italic;
    color: var(--gold);
    font-weight: 500;
}

.hero p.sub {
    max-width: 600px;
    font-size: 18.5px;
    color: rgba(251, 249, 244, .85);
    margin-top: 22px;
}

.hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px 32px;
    max-width: 900px;
    margin-top: 64px;
    padding-top: 30px;
    border-top: 1px solid rgba(251, 249, 244, .16);
}

.hero-stats strong {
    display: block;
    font-family: var(--serif);
    font-size: 36px;
    font-weight: 600;
    line-height: 1;
}

.hero-stats strong sup {
    font-size: 20px;
    color: var(--gold);
}

.hero-stats span {
    display: block;
    font-size: 13px;
    color: rgba(251, 249, 244, .7);
    margin-top: 6px;
}

.scroll-cue {
    position: absolute;
    left: 50%;
    bottom: 26px;
    translate: -50% 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(251, 249, 244, .7);
}

.scroll-cue i {
    width: 22px;
    height: 34px;
    border: 1.5px solid rgba(251, 249, 244, .5);
    border-radius: 12px;
    position: relative;
}

.scroll-cue i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 6px;
    width: 3px;
    height: 7px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: var(--gold);
    animation: cue 1.8s infinite;
}

@keyframes cue {
    0% {
        opacity: 0;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(12px);
    }
}

.hero-rise {
    opacity: 0;
    transform: translateY(22px);
    animation: rise .9s cubic-bezier(.2, .7, .2, 1) forwards;
}

@keyframes rise {
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- Trust strip ---------- */
.trust {
    border-bottom: 1px solid var(--line);
    background: var(--linen-3);
}

.trust .container {
    display: flex;
    justify-content: space-between;
    gap: 18px 30px;
    flex-wrap: wrap;
    padding-block: 24px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trust-item .ic {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--sage-5);
    color: var(--moss-700);
    display: grid;
    place-items: center;
    flex: none;
}

.trust-item .ic svg {
    width: 18px;
    height: 18px;
}

.trust-item strong {
    display: block;
    font-size: 14px;
    color: var(--moss-800);
}

.trust-item span {
    font-size: 12.5px;
    color: var(--muted);
}

/* ---------- Operations ---------- */
.ops-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 52px;
}

.op {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    transition: transform .3s, box-shadow .3s;
}

.op:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.op-img {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

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

.op:hover .op-img img {
    transform: scale(1.05);
}

.op-img .tag {
    position: absolute;
    left: 20px;
    bottom: 20px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--cream);
    color: var(--moss-700);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.op-body {
    padding: 30px 32px 32px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.op-body h3 {
    font-size: 30px;
    color: var(--moss-800);
}

.op-body>p {
    color: var(--muted);
    margin-top: 4px;
}

.op-list {
    margin: 22px 0;
    display: grid;
    gap: 2px;
}

.op-list li {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 15px;
}

.op-list li b {
    color: var(--moss-700);
    font-weight: 600;
}

.op-list li span {
    color: var(--muted);
}

.op-foot {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.op-foot .chip {
    background: var(--sage-6);
    color: var(--moss-700);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

/* ---------- Story ---------- */
.story {
    background: var(--linen-2);
}

.story-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 64px;
    align-items: start;
}

.story-copy>p {
    color: var(--muted);
    font-size: 17.5px;
    margin-top: 18px;
}

.mv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 34px;
}

.mv-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 26px;
    border: 1px solid var(--line);
}

.mv-card .ic {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--moss-700);
    color: var(--gold);
    display: grid;
    place-items: center;
}

.mv-card .ic svg {
    width: 22px;
    height: 22px;
}

.mv-card h3 {
    font-size: 20px;
    margin-top: 14px;
    color: var(--moss-800);
}

.mv-card p {
    font-size: 15px;
    color: var(--muted);
    margin-top: 6px;
}

.values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 18px;
}

.value {
    padding: 20px;
    border-radius: var(--radius-sm);
    background: var(--sage-6);
}

.value .num {
    font-family: var(--serif);
    color: var(--camel);
    font-size: 15px;
    font-weight: 600;
}

.value h4 {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 700;
    margin-top: 8px;
    color: var(--moss-800);
}

.value p {
    font-size: 13.5px;
    color: var(--muted);
    margin-top: 4px;
}

.quote-card {
    margin-top: 34px;
    background: var(--moss-700);
    color: var(--cream);
    border-radius: var(--radius);
    padding: 32px;
    position: relative;
    overflow: hidden;
}

.quote-card::before {
    content: "“";
    position: absolute;
    right: 22px;
    top: -30px;
    font-family: var(--serif);
    font-size: 180px;
    color: rgba(218, 171, 132, .18);
    line-height: 1;
}

.quote-card blockquote {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
    line-height: 1.4;
    position: relative;
}

.quote-by {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}

.quote-by .av {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--moss-900);
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 700;
}

.quote-by strong {
    display: block;
}

.quote-by span {
    font-size: 13px;
    color: var(--sage-3);
}

.journey {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    padding: 34px 34px 30px;
    box-shadow: var(--shadow);
    position: sticky;
    top: 100px;
}

.journey h3 {
    font-size: 26px;
    color: var(--moss-800);
}

.timeline {
    margin-top: 24px;
    position: relative;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 9px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(var(--gold), var(--sage-2));
}

.timeline li {
    position: relative;
    padding: 0 0 26px 40px;
}

.timeline li:last-child {
    padding-bottom: 0;
}

.timeline li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--gold);
    box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px var(--moss-700);
}

.timeline .yr {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--camel);
}

.timeline h4 {
    font-size: 19px;
    color: var(--moss-800);
    margin-top: 2px;
}

.timeline p {
    font-size: 14.5px;
    color: var(--muted);
    margin-top: 4px;
}

.journey .link-arrow {
    margin-top: 26px;
}

/* ---------- Numbers ---------- */
.numbers {
    background: var(--moss-800);
    color: var(--cream);
    position: relative;
    overflow: hidden;
}

.numbers::before {
    content: "";
    position: absolute;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    right: -220px;
    top: -260px;
    background: radial-gradient(circle, rgba(218, 171, 132, .16), transparent 65%);
}

.numbers .kicker {
    color: var(--gold);
}

.numbers .title {
    color: var(--cream);
}

.num-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid rgba(251, 249, 244, .14);
    border-left: 1px solid rgba(251, 249, 244, .14);
    margin-top: 48px;
    position: relative;
}

.num-cell {
    padding: 30px 28px;
    border-right: 1px solid rgba(251, 249, 244, .14);
    border-bottom: 1px solid rgba(251, 249, 244, .14);
}

.num-cell strong {
    font-family: var(--serif);
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    display: block;
}

.num-cell strong sup {
    color: var(--gold);
    font-size: 24px;
}

.num-cell span {
    color: var(--sage-3);
    font-size: 14px;
    margin-top: 8px;
    display: block;
}

.bars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 44px;
    position: relative;
}

.bar-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.bar-top b {
    font-weight: 600;
}

.bar-top strong {
    font-family: var(--serif);
    font-size: 28px;
    color: var(--gold);
}

.track {
    height: 8px;
    border-radius: 999px;
    background: rgba(251, 249, 244, .12);
    margin-top: 10px;
    overflow: hidden;
}

.track i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--camel), var(--gold));
    transition: width 1.6s cubic-bezier(.2, .7, .2, 1);
}

.bars p {
    font-size: 13px;
    color: var(--sage-3);
    margin-top: 8px;
}

/* ---------- Location ---------- */
.loc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.facts {
    margin-top: 30px;
    display: grid;
    gap: 0;
}

.facts li {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
}

.facts .ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--sage-6);
    color: var(--moss-700);
    display: grid;
    place-items: center;
}

.facts .ic svg {
    width: 21px;
    height: 21px;
}

.facts b {
    display: block;
    color: var(--moss-800);
}

.facts p {
    color: var(--muted);
    font-size: 15px;
}

.map-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.map-card img {
    width: 100%;
    aspect-ratio: 4 / 4.6;
    object-fit: cover;
}

.map-card .overlay {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;
    background: rgba(251, 249, 244, .96);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-sm);
    padding: 20px 22px;
}

.map-card .overlay h4, .map-card .overlay h3 {
    font-size: 19px;
    color: var(--moss-800);
}

.drive {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 14px 0 16px;
}

.drive div {
    background: var(--linen-2);
    border-radius: 10px;
    padding: 10px;
    text-align: center;
}

.drive b {
    display: block;
    font-family: var(--serif);
    font-size: 18px;
    color: var(--moss-700);
}

.drive span {
    font-size: 12px;
    color: var(--muted);
}

/* ---------- Season ---------- */
.season {
    background: var(--sage-6);
}

.season-card {
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 44px;
    align-items: center;
    box-shadow: var(--shadow);
    margin-top: 44px;
}

.month {
    display: flex;
    align-items: center;
    gap: 18px;
}

.month .cal {
    width: 86px;
    border-radius: 14px;
    overflow: hidden;
    text-align: center;
    border: 1px solid var(--line);
    flex: none;
}

.month .cal span {
    display: block;
    background: var(--moss-700);
    color: var(--gold);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    padding: 5px 0;
    text-transform: uppercase;
}

.month .cal b {
    display: block;
    font-family: var(--serif);
    font-size: 36px;
    color: var(--moss-800);
    padding: 6px 0;
}

.month h3 {
    font-size: 28px;
    color: var(--moss-800);
}

.month p {
    color: var(--muted);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chips span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--linen-2);
    border: 1px solid var(--line);
    font-size: 14.5px;
    font-weight: 500;
}

.chips span::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--moss-600);
    box-shadow: 0 0 0 3px var(--sage-4);
}

.season-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
    font-size: 14px;
    color: var(--muted);
}

/* ---------- Products ---------- */
.prod-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.prod {
    background: #fff;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .3s, transform .3s;
}

.prod:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.prod-img {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--linen-3);
}

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

.prod:hover .prod-img img {
    transform: scale(1.06);
}

.badges {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    gap: 6px;
}

.badges span {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.b-sale {
    background: #B5533C;
    color: #fff;
}

.b-feat {
    background: var(--cream);
    color: var(--moss-700);
}

.wish {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    border: 0;
    display: grid;
    place-items: center;
    color: var(--moss-700);
    transition: .2s;
}

.wish svg {
    width: 18px;
    height: 18px;
}

.wish.on {
    color: #B5533C;
}

.wish.on svg {
    fill: currentColor;
}

.prod-body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.prod-cat {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--camel);
}

.prod h3 {
    font-size: 19px;
    margin-top: 4px;
    color: var(--moss-800);
}

.stock {
    font-size: 12.5px;
    color: var(--moss-600);
    font-weight: 600;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.stock::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5C9A3E;
}

.sizes {
    display: flex;
    gap: 6px;
    margin: 14px 0;
    flex-wrap: wrap;
}

.sizes button {
    border: 1px solid var(--line);
    background: var(--linen-3);
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 12.5px;
    font-weight: 500;
    transition: .2s;
}

.sizes button.on {
    background: var(--moss-700);
    color: var(--cream);
    border-color: var(--moss-700);
}

.prod-foot {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.price {
    font-family: var(--serif);
    font-size: 21px;
    font-weight: 600;
    color: var(--moss-800);
}

.price del {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--muted);
    font-weight: 400;
    margin-left: 4px;
}

.add {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    background: var(--gold);
    color: var(--moss-900);
    display: grid;
    place-items: center;
    transition: .2s;
}

.add:hover {
    background: var(--moss-700);
    color: var(--gold);
}

.add svg {
    width: 20px;
    height: 20px;
}

/* ---------- Testimonials ---------- */
.testi {
    background: var(--linen-2);
}

.testi-box {
    max-width: 900px;
    margin: 44px auto 0;
    background: #fff;
    border-radius: 24px;
    padding: 54px 60px;
    box-shadow: var(--shadow);
    text-align: center;
    position: relative;
}

.stars {
    color: var(--gold);
    letter-spacing: 4px;
    font-size: 18px;
}

.t-slide {
    display: none;
}

.t-slide.on {
    display: block;
    animation: fadeup .6s;
}

@keyframes fadeup {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.t-slide blockquote {
    font-family: var(--serif);
    font-size: clamp(20px, 2.4vw, 26px);
    font-weight: 500;
    line-height: 1.45;
    color: var(--moss-800);
    margin-top: 18px;
}

.t-slide .who {
    margin-top: 24px;
    font-weight: 600;
}

.t-slide .who span {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--sage-6);
    color: var(--moss-700);
    font-size: 12px;
    font-weight: 600;
}

.t-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
}

.t-arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--moss-700);
    display: grid;
    place-items: center;
}

.t-arrow:hover {
    background: var(--sage-6);
}

.t-dots {
    display: flex;
    gap: 8px;
}

.t-dots button {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    border: 0;
    background: var(--sage-1);
    transition: .3s;
    padding: 0;
}

.t-dots button.on {
    width: 28px;
    background: var(--moss-700);
}

/* ---------- Gallery ---------- */
.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px;
    gap: 16px;
}

.gallery figure {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
}

.gallery figure:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery figure:nth-child(3) {
    grid-row: span 2;
}

.gallery figure:nth-child(5),
.gallery figure:nth-child(6) {
    grid-column: span 2;
}

.gallery-credit {
    margin-top: 18px;
    font-size: 12.5px;
    color: var(--muted);
}

.gallery-credit a {
    text-decoration: underline;
}

@media (hover: none) {
    .gallery figcaption {
        opacity: 1;
        transform: none;
    }
}

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

.gallery figure:hover img {
    transform: scale(1.06);
}

.gallery figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 40px 18px 16px;
    background: linear-gradient(transparent, rgba(36, 51, 28, .85));
    color: var(--cream);
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    transform: translateY(8px);
    transition: .3s;
}

.gallery figure:hover figcaption {
    opacity: 1;
    transform: none;
}

/* ---------- Prices ---------- */
.prices {
    background: var(--sage-6);
}

.prices-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 56px;
    align-items: center;
}

.price-table {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.price-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.price-table th {
    text-align: left;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--camel);
    font-weight: 700;
    padding: 16px 22px;
    background: var(--linen-3);
}

.price-table td {
    padding: 15px 22px;
    border-top: 1px solid var(--line);
}

.price-table td:first-child {
    font-weight: 600;
    color: var(--moss-800);
}

.price-table td.r {
    text-align: right;
    font-family: var(--serif);
    font-weight: 600;
    color: var(--moss-700);
}

.trend {
    font-size: 12px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
}

.up {
    background: #F6E3D9;
    color: #A2482F;
}

.down {
    background: var(--sage-5);
    color: var(--moss-700);
}

.flat {
    background: var(--linen-2);
    color: var(--muted);
}

.price-table .foot {
    padding: 14px 22px;
    font-size: 13px;
    color: var(--muted);
    border-top: 1px solid var(--line);
    background: var(--linen-3);
}

/* ---------- Journal ---------- */
.posts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.post {
    display: block;
}

.post .img {
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16 / 11;
}

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

.post:hover img {
    transform: scale(1.05);
}

.post .meta {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
    font-size: 13px;
    color: var(--muted);
}

.post .meta b {
    background: var(--sage-6);
    color: var(--moss-700);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.post h3 {
    font-size: 21px;
    margin-top: 10px;
    color: var(--moss-800);
    line-height: 1.3;
    transition: color .2s;
}

.post:hover h3 {
    color: var(--camel);
}

.post p {
    color: var(--muted);
    font-size: 15px;
    margin-top: 8px;
}

/* ---------- Partner CTA ---------- */
.partner {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    color: var(--cream);
    padding: 80px 60px;
    text-align: center;
}

.partner>img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.partner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(36, 51, 28, .86), rgba(36, 51, 28, .92));
    z-index: 1;
}

.partner>*:not(img) {
    position: relative;
    z-index: 2;
}

.partner h2 {
    font-size: clamp(30px, 4.2vw, 50px);
    max-width: 760px;
    margin: 0 auto;
}

.partner p {
    max-width: 620px;
    margin: 18px auto 0;
    color: rgba(251, 249, 244, .85);
    font-size: 17.5px;
}

.partner .hero-ctas {
    justify-content: center;
}

/* ---------- Newsletter ---------- */
.news {
    padding: 90px 0 100px;
}

.news-box {
    background: var(--gold);
    border-radius: 28px;
    padding: 54px 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.news-box::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 50px solid rgba(255, 255, 255, .14);
    right: -90px;
    top: -120px;
}

.news-box .kicker {
    color: var(--moss-800);
}

.news-box h2 {
    font-size: clamp(26px, 3.2vw, 38px);
    color: var(--moss-900);
    margin-top: 10px;
}

.news-box p {
    color: var(--moss-800);
    margin-top: 8px;
}

.news-form {
    position: relative;
    z-index: 1;
}

.news-form .row {
    display: flex;
    background: #fff;
    border-radius: 999px;
    padding: 6px;
    box-shadow: 0 10px 30px -12px rgba(36, 51, 28, .4);
}

.news-form input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    padding: 12px 18px;
    font: inherit;
    background: transparent;
}

.news-form small {
    display: block;
    margin-top: 10px;
    color: var(--moss-800);
    font-size: 13px;
    padding-left: 18px;
}

/* ---------- Footer ---------- */
.footer {
    background: var(--moss-900);
    color: var(--sage-3);
}

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

.footer-trust .container {
    display: flex;
    justify-content: space-around;
    gap: 20px;
    flex-wrap: wrap;
    padding-block: 26px;
}

.footer-trust div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--cream);
    font-weight: 500;
    font-size: 15px;
}

.footer-trust svg {
    width: 22px;
    height: 22px;
    color: var(--gold);
}

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
    gap: 48px;
    padding-block: 64px 44px;
}

.footer .brand strong {
    color: var(--cream);
}

.footer-about p {
    font-size: 14.5px;
    margin-top: 18px;
    max-width: 340px;
}

.creds {
    margin-top: 20px;
    display: grid;
    gap: 8px;
}

.creds li {
    font-size: 13.5px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.creds li::before {
    content: "✓";
    color: var(--gold);
    font-weight: 700;
}

.footer h5, .footer .fh {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(251, 249, 244, .55);
    margin-bottom: 16px;
}

.footer-links li {
    margin-bottom: 9px;
}

.footer-links a {
    font-size: 14.5px;
    transition: color .2s;
}

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

.contact-list li {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14.5px;
}

.contact-list svg {
    width: 18px;
    height: 18px;
    color: var(--gold);
    flex: none;
    margin-top: 3px;
}

.contact-list a:hover {
    color: var(--gold);
}

.areas {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-block: 26px;
    display: flex;
    gap: 12px 18px;
    flex-wrap: wrap;
    align-items: center;
}

.areas h5, .areas .fh {
    margin: 0 8px 0 0;
}

.areas a {
    font-size: 14px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    transition: .2s;
}

.areas a:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-block: 22px;
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 13.5px;
}

.pay {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.pay span {
    padding: 5px 11px;
    border-radius: 6px;
    background: rgba(255, 255, 255, .08);
    color: var(--cream);
    font-size: 12px;
    font-weight: 600;
}

/* ---------- Mission ---------- */
.mission-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 64px;
    align-items: start;
}

.mission-intro {
    position: sticky;
    top: 110px;
}

.mission-statement {
    font-family: var(--serif);
    font-size: clamp(21px, 2.2vw, 26px);
    line-height: 1.45;
    color: var(--moss-700);
    margin-top: 22px;
    padding-left: 22px;
    border-left: 3px solid var(--gold);
}

.mission-intro .lede {
    max-width: none;
}

.m-blocks {
    display: grid;
    gap: 22px;
}

.m-block {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px 32px;
    box-shadow: var(--shadow);
}

.m-block header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.m-block .n {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 18px;
    flex: none;
}

.m-block.problem .n {
    background: #F6E3D9;
    color: #A2482F;
}

.m-block.answer .n {
    background: var(--moss-700);
    color: var(--gold);
}

.m-block.promise .n {
    background: var(--gold);
    color: var(--moss-900);
}

.m-block h3 {
    font-size: 23px;
    color: var(--moss-800);
}

.m-block p {
    color: var(--muted);
    font-size: 16px;
}

.m-block p+p {
    margin-top: 12px;
}

.m-block strong {
    color: var(--moss-800);
    font-weight: 600;
}

/* ---------- Membership ---------- */
.membership {
    background: var(--linen-2);
}

.concept {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 48px;
    align-items: center;
    margin-top: 10px;
}

.concept-copy p {
    color: var(--muted);
    font-size: 17px;
    margin-top: 16px;
}

.concept-copy .core {
    font-family: var(--serif);
    font-size: 21px;
    line-height: 1.45;
    color: var(--moss-800);
    margin-top: 20px;
}

.facts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.fact {
    background: #fff;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    padding: 22px;
}

.fact strong {
    display: block;
    font-family: var(--serif);
    font-size: 34px;
    color: var(--moss-700);
    line-height: 1;
}

.fact span {
    display: block;
    font-size: 14px;
    color: var(--muted);
    margin-top: 8px;
}

.fact.dark {
    background: var(--moss-700);
    border-color: var(--moss-700);
}

.fact.dark strong {
    color: var(--gold);
}

.fact.dark span {
    color: var(--sage-3);
}

.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 64px 0;
    counter-reset: step;
}

.step {
    position: relative;
    padding: 26px 24px;
    background: var(--cream);
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.step::before {
    counter-increment: step;
    content: "0" counter(step);
    font-family: var(--serif);
    font-weight: 700;
    font-size: 15px;
    color: var(--camel);
}

.step .ic {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--sage-6);
    color: var(--moss-700);
    display: grid;
    place-items: center;
}

.step .ic svg {
    width: 20px;
    height: 20px;
}

.step h4 {
    font-size: 19px;
    color: var(--moss-800);
    margin-top: 14px;
}

.step p {
    font-size: 14.5px;
    color: var(--muted);
    margin-top: 6px;
}

.tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
    margin-top: 44px;
}

.tier {
    position: relative;
    background: #fff;
    border-radius: 22px;
    border: 1px solid var(--line);
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow);
    transition: transform .3s, box-shadow .3s;
}

.tier:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.tier .medal {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 20px;
}

.tier.silver .medal {
    background: linear-gradient(135deg, #E9ECEF, #B8BEC4);
    color: #4A5157;
}

.tier.gold .medal {
    background: linear-gradient(135deg, #F3D9A8, var(--gold-dark));
    color: var(--moss-900);
}

.tier.premium .medal {
    background: linear-gradient(135deg, var(--moss-600), var(--moss-900));
    color: var(--gold);
}

.tier h3 {
    font-size: 28px;
    color: var(--moss-800);
    margin-top: 16px;
}

.tier .amt {
    font-family: var(--serif);
    font-size: 44px;
    font-weight: 600;
    color: var(--moss-800);
    margin-top: 14px;
    line-height: 1;
}

.tier .amt small {
    font-size: 20px;
    color: var(--camel);
    margin-right: 4px;
}

.tier .note {
    font-size: 13.5px;
    color: var(--muted);
    margin-top: 8px;
}

.tier ul {
    margin: 24px 0 28px;
    display: grid;
    gap: 11px;
}

.tier li {
    display: flex;
    gap: 10px;
    font-size: 15px;
}

.tier li::before {
    content: "✓";
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--sage-5);
    color: var(--moss-700);
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
}

.tier .btn {
    margin-top: auto;
}

.tier.gold {
    background: var(--moss-700);
    border-color: var(--moss-700);
    color: var(--cream);
    transform: scale(1.03);
}

.tier.gold:hover {
    transform: scale(1.03) translateY(-6px);
}

.tier.gold h3,
.tier.gold .amt {
    color: var(--cream);
}

.tier.gold .amt small {
    color: var(--gold);
}

.tier.gold .note {
    color: var(--sage-3);
}

.tier.gold li::before {
    background: var(--gold);
    color: var(--moss-900);
}

.tier .flag {
    position: absolute;
    top: 22px;
    right: 22px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--gold);
    color: var(--moss-900);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.member-notes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 40px;
}

.member-note {
    display: flex;
    gap: 16px;
    background: #fff;
    border-radius: var(--radius);
    border: 1px dashed var(--camel);
    padding: 24px;
}

.member-note .ic {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--gold);
    color: var(--moss-900);
    display: grid;
    place-items: center;
    flex: none;
}

.member-note .ic svg {
    width: 22px;
    height: 22px;
}

.member-note h4 {
    font-size: 18px;
    color: var(--moss-800);
}

.member-note p {
    font-size: 14.5px;
    color: var(--muted);
    margin-top: 4px;
}

.seats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 40px;
    flex-wrap: wrap;
    text-align: center;
    color: var(--muted);
    font-size: 15px;
}

.seats .dots {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: center;
}

.seats .dots i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--moss-600);
}

@media (max-width: 1100px) {
    .steps {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {

    .mission-grid,
    .concept,
    .member-notes {
        grid-template-columns: 1fr;
    }

    .mission-intro {
        position: static;
    }

    .tiers {
        grid-template-columns: 1fr;
        max-width: 460px;
        margin-inline: auto;
    }

    .tier.gold,
    .tier.gold:hover {
        transform: none;
    }
}

@media (max-width: 600px) {
    .steps {
        grid-template-columns: 1fr;
    }

    .m-block {
        padding: 24px 22px;
    }
}

/* Floating WhatsApp + toast */
.wa {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .4);
    z-index: 70;
    transition: transform .2s;
}

.wa:hover {
    transform: scale(1.08);
}

.wa svg {
    width: 30px;
    height: 30px;
    fill: currentColor;
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    translate: -50% 0;
    background: var(--moss-800);
    color: var(--cream);
    padding: 13px 22px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(20px);
    transition: .3s;
    z-index: 100;
    pointer-events: none;
}

.toast.show {
    opacity: 1;
    transform: none;
}

/* Reveal */
.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}

.reveal.in {
    opacity: 1;
    transform: none;
}

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

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

    .reveal,
    .hero-rise {
        opacity: 1;
        transform: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .menu {
        display: none;
    }

    .burger {
        display: grid;
    }

    .nav-actions .btn {
        display: none;
    }

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

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

    .footer-main {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 900px) {
    .section {
        padding: 80px 0;
    }

    .hero-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .ops-grid,
    .story-grid,
    .loc-grid,
    .prices-grid,
    .season-card,
    .news-box {
        grid-template-columns: 1fr;
    }

    .journey {
        position: static;
    }

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

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

    .gallery {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 180px;
    }

    .gallery figure:nth-child(5),
    .gallery figure:nth-child(6) {
        grid-column: 1 / -1;
    }

    .topbar .hide-sm {
        display: none;
    }
}

@media (max-width: 600px) {
    .topbar .container {
        justify-content: center;
    }

    .topbar .hide-xs {
        display: none;
    }

    .hero {
        padding: 70px 0 110px;
    }

    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-stats div:last-child {
        grid-column: span 2;
    }

    .hero-ctas .btn {
        flex: 1 1 100%;
    }

    .trust .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .op-body {
        padding: 24px 22px;
    }

    .op-list li {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .mv,
    .values,
    .posts,
    .prod-grid {
        grid-template-columns: 1fr;
    }

    .num-cell {
        padding: 22px 18px;
    }

    .num-cell strong {
        font-size: 38px;
    }

    .season-card,
    .testi-box {
        padding: 30px 22px;
    }

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

    .partner {
        padding: 56px 24px;
        border-radius: 20px;
    }

    .news-box {
        padding: 36px 24px;
        border-radius: 20px;
    }

    .news-form .row {
        flex-direction: column;
        border-radius: 18px;
        gap: 6px;
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .price-table th,
    .price-table td {
        padding-inline: 14px;
    }
}

/* ---------- Tier details ---------- */
.tier .pos {
    font-size: 14px;
    font-weight: 600;
    color: var(--camel);
    margin-top: 4px;
}

.tier.gold .pos {
    color: var(--gold);
}

.tier .amt em {
    font-family: var(--sans);
    font-style: normal;
    font-size: 15px;
    font-weight: 500;
    color: var(--muted);
    margin-left: 4px;
}

.tier.gold .amt em {
    color: var(--sage-3);
}

.spec {
    margin-top: 18px;
    border-top: 1px solid var(--line);
}

.spec div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14.5px;
}

.spec dt {
    color: var(--muted);
}

.spec dd {
    font-weight: 600;
    color: var(--moss-800);
    text-align: right;
}

.tier.gold .spec,
.tier.gold .spec div {
    border-color: rgba(251, 249, 244, .16);
}

.tier.gold .spec dt {
    color: var(--sage-3);
}

.tier.gold .spec dd {
    color: var(--cream);
}

.member-note .link-arrow {
    font-size: 14px;
    margin-left: 4px;
}

/* ---------- Produce ---------- */
.cats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 48px;
}

.cat {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 16px;
    text-align: center;
    transition: transform .25s, box-shadow .25s, border-color .25s;
}

.cat:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--sage-1);
}

.cat .em {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--sage-6);
    font-size: 30px;
}

.cat b {
    font-size: 15.5px;
    color: var(--moss-800);
    font-weight: 600;
}

.cat.soon {
    border-style: dashed;
    border-color: var(--camel);
}

.cat.soon .em {
    background: var(--linen-2);
}

.soon-tag {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--gold);
    color: var(--moss-900);
    padding: 3px 8px;
    border-radius: 999px;
}

.dist-note {
    max-width: 760px;
    margin: 26px auto 0;
    text-align: center;
    font-size: 14.5px;
    color: var(--muted);
    padding: 14px 20px;
    background: var(--linen-2);
    border-radius: var(--radius-sm);
}

.harvest {
    margin-top: 56px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 34px;
    box-shadow: var(--shadow);
}

.tabs {
    display: inline-flex;
    gap: 6px;
    padding: 6px;
    background: var(--linen-2);
    border-radius: 999px;
    margin-bottom: 28px;
}

.tab {
    border: 0;
    background: none;
    padding: 10px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    color: var(--moss-700);
    transition: .2s;
}

.tab.on {
    background: var(--moss-700);
    color: var(--cream);
}

.panel[hidden] {
    display: none;
}

.panel.on {
    animation: fadeup .5s;
}

.crop-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.crop-list {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px;
}

.crop-list li {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border-radius: 12px;
    background: var(--linen-3);
    border: 1px solid var(--linen-1);
    transition: border-color .2s, box-shadow .2s;
    min-width: 0;
}

.crop-list li:hover {
    border-color: var(--sage-1);
    box-shadow: var(--shadow);
}

.crop-list img,
.crop-list .no-img {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 9px;
    object-fit: cover;
    background: var(--sage-6);
}

.crop-list .no-img {
    display: grid;
    place-items: center;
    font-size: 22px;
}

.crop-list li>div {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.crop-list b {
    color: var(--moss-800);
    font-weight: 600;
    font-size: 14.5px;
}

.crop-list span {
    color: var(--muted);
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crop-list li.soon img {
    filter: grayscale(.5);
    opacity: .75;
}

.crop-list li.soon {
    border-style: dashed;
    border-color: var(--camel);
}

.crop-list li.soon span {
    color: var(--camel);
    font-weight: 600;
}

.comp {
    margin-top: 26px;
    padding: 22px;
    border-radius: var(--radius);
    background: #FBF1E7;
    border: 1px solid #F0DCC6;
}

.comp h4 {
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--moss-800);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.comp h4 span {
    color: var(--gold-dark);
    font-size: 16px;
}

.comp .crop-list li {
    background: #fff;
    border-color: #F0DCC6;
}

.share-model {
    margin-top: 40px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 30px;
    align-items: center;
    background: var(--moss-700);
    color: var(--cream);
    border-radius: 24px;
    padding: 38px 40px;
}

.sm-icon {
    width: 84px;
    height: 84px;
    border-radius: 22px;
    background: var(--gold);
    display: grid;
    place-items: center;
    font-size: 42px;
}

.share-model .kicker {
    color: var(--gold);
}

.share-model h3 {
    font-size: 26px;
    margin-top: 8px;
}

.share-model p {
    color: var(--sage-3);
    margin-top: 8px;
    max-width: 560px;
}

.sm-points {
    display: grid;
    gap: 10px;
}

.sm-points div {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    white-space: nowrap;
}

.sm-points b {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--gold);
    color: var(--gold);
    display: grid;
    place-items: center;
    font-size: 13px;
    flex: none;
}

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

    .crop-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .comp .crop-list {
        grid-template-columns: repeat(3, 1fr);
    }

    .share-model {
        grid-template-columns: auto 1fr;
    }

    .sm-points {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, auto);
        justify-content: start;
        gap: 24px;
    }
}

@media (max-width: 600px) {

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

    .harvest {
        padding: 22px 16px;
    }

    .share-model {
        grid-template-columns: 1fr;
        padding: 30px 22px;
    }

    .sm-points {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    .crop-list {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 760px) {
    .crop-list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 380px) {
    .crop-list {
        grid-template-columns: 1fr !important;
    }
}

.comp {
    margin-top: 18px !important;
    padding: 16px !important;
}

.credit {
    font-size: 12px;
    color: var(--muted);
    text-align: right;
    margin-top: 10px;
}

.footer .brand-mark {
    width: 72px !important;
    height: 72px !important;
}

@media (max-width: 600px) {
    .header .brand-mark {
        width: 48px !important;
        height: 48px !important;
    }
}

.tier .medal {
    width: 84px !important;
    height: 105px !important;
    border-radius: 0 !important;
    background: none !important;
    display: block;
    filter: drop-shadow(0 8px 14px rgba(36, 51, 28, .22));
    transition: transform .35s;
}

.tier:hover .medal {
    transform: rotate(-6deg) scale(1.05);
}

.tier .flag {
    z-index: 1;
}

.brand-mark {
    width: 54px !important;
    height: 54px !important;
    border-radius: 50% !important;
    flex: none;
    background-color: #fff !important;
    background-image: url("../images/SMS%20LOGO.webp") !important;
    background-repeat: no-repeat;
    background-size: 156.75% auto;
    background-position: 53.2% 19.2%;
    box-shadow: 0 0 0 2px #fff, 0 4px 14px rgba(36, 51, 28, .18);
}

.brand-mark svg,
.brand-mark img {
    display: none;
}


/* ---------- Harvest wheel calendar (spinning dial) ---------- */
.hw { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--linen-2), var(--cream)); }
.hw-wrap { display: grid; grid-template-columns: minmax(300px, 480px) 1fr; gap: 64px; align-items: center; margin-top: 52px; }
.hw-dial-col { min-width: 0; }
.hw-dial { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1; margin: 0 auto; isolation: isolate; }
.hw-glow { position: absolute; inset: 8%; border-radius: 50%; background: var(--glow, #ECE3D3); filter: blur(46px); opacity: .9; transform: scale(1.18); transition: background-color .8s ease; z-index: -1; }
.hw-dial svg { width: 100%; height: 100%; overflow: visible; display: block; cursor: grab; touch-action: pan-y; filter: drop-shadow(0 24px 40px rgba(36, 51, 28, .16)); }
.hw-dial.dragging svg { cursor: grabbing; }
.hw-dial svg:focus { outline: none; }
.hw-dial svg:focus-visible .hw-pointer { fill: var(--gold-dark); }
.hw-band { stroke: var(--cream); stroke-width: 1.5; }
.hw-seg { cursor: pointer; }
.hw-seg .hw-fill { stroke: var(--cream); stroke-width: 3; transition: fill .35s, opacity .2s; }
.hw-seg:hover .hw-fill { opacity: .82; }
.hw-seg.on .hw-fill { fill: var(--moss-700) !important; opacity: 1; }
.hw-seg text { font-family: var(--serif); font-size: 15px; font-weight: 600; fill: var(--moss-800); pointer-events: none; transition: fill .3s; }
.hw-seg.on text { fill: var(--cream); }
.hw-hit { fill: transparent; pointer-events: none; transition: fill .3s; }
.hw-seg.hit .hw-hit { fill: var(--gold); animation: hwHit 1.6s ease-in-out infinite; }
.hw-seg.on.hit .hw-hit { fill: #F3D58A; }
.hw-now-dot { fill: var(--gold-dark); }
.hw-seg.on .hw-now-dot { fill: #F3D58A; }
.hw-pointer { fill: var(--moss-800); filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
.hw-orbit { position: absolute; inset: 0; pointer-events: none; }
.hw-orbit img { position: absolute; left: var(--x); top: var(--y); width: 8.6%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 6px 14px -6px rgba(36, 51, 28, .5); transform: translate(-50%, -50%) scale(0); animation: hwOrb .55s cubic-bezier(.3, 1.5, .5, 1) forwards; animation-delay: calc(var(--i) * 45ms + .12s); }
.hw-center { position: absolute; inset: 31%; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px -12px rgba(36, 51, 28, .3); pointer-events: none; }
.hw-center i { font-style: normal; font-size: clamp(18px, 2.4vw, 24px); line-height: 1; }
.hw-center span { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--camel); margin-top: 4px; }
.hw-center b { font-family: var(--serif); font-size: clamp(30px, 4.4vw, 46px); font-weight: 600; color: var(--moss-800); line-height: 1.05; }
.hw-center small { font-size: 12.5px; color: var(--muted); }
.hw-center.flip i, .hw-center.flip b { animation: hwPop .45s cubic-bezier(.3, 1.5, .5, 1); }
.hw-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 26px; }
.hw-arrow { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--moss-700); font-size: 18px; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.hw-arrow:hover { background: var(--moss-700); color: var(--cream); border-color: var(--moss-700); transform: translateY(-2px); }
.hw-pill { height: 46px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--moss-800); font-weight: 600; font-size: 14px; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.hw-pill:hover { border-color: var(--moss-700); transform: translateY(-2px); }
.hw-pill.on { background: var(--moss-700); border-color: var(--moss-700); color: var(--cream); }
.hw-hint { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 12px; }
.hw-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hw-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--moss-800); transition: background-color .5s; }
.hw-step { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.hw-swap.in { animation: hwSwap .5s cubic-bezier(.2, .7, .2, 1); }
.hw-detail h3 { font-size: clamp(30px, 3.4vw, 42px); color: var(--moss-800); margin-top: 16px; }
.hw-detail h3 em { font-style: italic; color: var(--camel); font-weight: 500; }
.hw-swap > p { color: var(--muted); font-size: 16.5px; margin-top: 10px; max-width: 520px; }
.hw-detail h4 { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--camel); margin: 26px 0 12px; }
.hw-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-top: 24px; max-width: 520px; }
.hw-bars button { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 74px; padding: 0; border: 0; background: none; cursor: pointer; }
.hw-bars i { display: block; width: 100%; max-width: 24px; height: calc(var(--h) * 52px); border-radius: 7px 7px 3px 3px; background: var(--sage-2); transform-origin: bottom; transition: background .3s, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: 0s, calc(var(--i) * 40ms); }
.hw-bars button:hover i { background: var(--sage-1); }
.hw-bars span { font-size: 11px; font-weight: 700; color: var(--muted); }
.hw-bars .hit i { background: var(--gold); }
.hw-bars .on i { background: var(--moss-700); }
.hw-bars .on span { color: var(--moss-800); }
.hw-wrap:not(.in) .hw-bars i { transform: scaleY(0); }
.hw-list { display: flex; flex-wrap: wrap; gap: 10px; }
.hw-list li { display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px; background: #fff; border: 1px solid var(--line); cursor: pointer; animation: hwIn .45s both; transition: border-color .2s, box-shadow .2s, transform .2s, background .2s; }
.hw-list li:hover { border-color: var(--sage-1); box-shadow: 0 8px 20px -12px rgba(36, 51, 28, .35); transform: translateY(-2px); }
.hw-list li:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hw-list li.sel { border-color: var(--gold); background: #FFF8EE; box-shadow: 0 0 0 2px var(--gold); }
.hw-list img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.hw-list b { font-size: 14.5px; font-weight: 600; color: var(--moss-800); }
.hw-list small { font-size: 12.5px; color: var(--muted); margin-left: 2px; }
.hw-list .none { padding: 10px 16px; color: var(--muted); font-size: 14px; cursor: default; }
.hw-crop { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 10px 10px 10px 10px; border-radius: 18px; background: #FFF8EE; border: 1px solid #F0DCC4; animation: hwIn .35s both; }
.hw-crop[hidden] { display: none; }
.hw-crop img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.hw-crop p { font-size: 14px; color: var(--muted); line-height: 1.45; }
.hw-crop p b { color: var(--moss-800); }
.hw-crop button { margin-left: auto; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--moss-700); }
.hw-eggs { margin-top: 24px; font-size: 14px; color: var(--muted); }
.hw-eggs span { display: block; margin-top: 4px; font-size: 13px; color: var(--camel); }
@keyframes hwIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes hwSwap { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes hwPop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes hwOrb { to { transform: translate(-50%, -50%) scale(1); } }
@keyframes hwHit { 50% { opacity: .55; } }
@media (max-width: 900px) {
    .hw-wrap { grid-template-columns: 1fr; gap: 40px; }
    .hw-dial { max-width: 400px; }
    .hw-bars { max-width: none; }
}
@media (max-width: 600px) {
    .hw-list small { display: none; }
    .hw-pill { padding: 0 14px; height: 42px; font-size: 13.5px; }
    .hw-arrow { width: 42px; height: 42px; }
    .hw-controls { gap: 8px; }
    .hw-bars { gap: 4px; }
}

/* ---------- Dream Farm promo ---------- */
#game { margin-bottom: 104px; }
.ninja { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; border-radius: 28px; overflow: hidden; padding: 56px; color: var(--cream); background: radial-gradient(circle at 75% 40%, #3E5A30, var(--moss-900) 70%); }
.ninja h2 { font-size: clamp(38px, 5vw, 60px); margin: 10px 0 14px; }
.ninja h2 em { color: var(--gold); font-style: italic; }
.ninja p { color: var(--sage-3); font-size: 17px; max-width: 460px; margin-bottom: 26px; }
.dream-art { display: block; }
.dream-art img { display: block; width: 100%; max-width: 580px; margin: 0 auto; border-radius: 22px; border: 4px solid rgba(251, 249, 244, .9); box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .55); transform: rotate(-2deg); animation: dreamFloat 6s ease-in-out infinite; transition: transform .4s; }
.dream-art:hover img { transform: rotate(0) scale(1.02); }
.dream-prizes { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 26px; padding: 0; }
.dream-prizes li { padding: 7px 13px; border-radius: 999px; background: rgba(251, 249, 244, .1); border: 1px solid rgba(251, 249, 244, .22); font-size: 13.5px; font-weight: 600; color: var(--cream); }
.ninja p strong { color: var(--gold); }
@keyframes dreamFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@media (max-width: 900px) { .ninja { grid-template-columns: 1fr; padding: 40px 26px; } .dream-art img { max-width: 440px; } #game { margin-bottom: 80px; } }
    
/* ---------- 3D farm tour promo ---------- */
#farm-3d { margin-bottom: 28px; }
.tour3d { display: grid; grid-template-columns: 1.05fr .95fr; gap: 30px; align-items: center; border-radius: 28px; overflow: hidden; background: linear-gradient(180deg, #DCEBF4, var(--linen-2)); border: 1px solid var(--line); padding: 50px 0 0 56px; text-decoration: none; color: inherit; transition: box-shadow .3s, transform .3s; }
.tour3d:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.tour3d h2 { font-size: clamp(32px, 4.2vw, 50px); color: var(--moss-800); margin: 10px 0 14px; }
.tour3d h2 em { color: var(--camel); font-style: italic; }
.tour3d p { color: var(--muted); font-size: 17px; max-width: 470px; margin-bottom: 26px; }
.tour3d-copy { padding-bottom: 50px; }
.tour3d-art { position: relative; height: 320px; align-self: end; }
.t3-sun { position: absolute; right: 18%; top: 8%; width: 64px; height: 64px; border-radius: 50%; background: #F6D58A; box-shadow: 0 0 40px #F6D58A; }
.t3-hill { position: absolute; bottom: 60px; border-radius: 50% 50% 0 0; background: #8DB65C; }
.t3-hill.a { left: -10%; width: 70%; height: 150px; background: #7EA35C; }
.t3-hill.b { right: -10%; width: 80%; height: 120px; }
.t3-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: #93BA60; }
.t3-ground::before { content: ""; position: absolute; left: 44%; bottom: 0; width: 12%; height: 100%; background: #CDB081; clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%); }
.t3-tree { position: absolute; left: var(--x); bottom: 66px; width: calc(70px * var(--s)); height: calc(70px * var(--s)); border-radius: 50%; background: #4E7F35; box-shadow: inset -10px -8px 0 rgba(0, 0, 0, .12); }
.t3-house { position: absolute; left: 52%; bottom: 66px; width: 110px; height: 66px; background: #EFE4CC; }
.t3-house::before { content: ""; position: absolute; left: -12px; right: -12px; top: -46px; height: 48px; background: #8E3B2E; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.t3-pin { position: absolute; left: var(--x); top: var(--y); width: 52px; height: 52px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--moss-700); display: grid; place-items: center; font-size: 22px; box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .4); animation: pinBob 2.4s ease-in-out var(--d) infinite; }
@keyframes pinBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.t3-pin { line-height: 1; }
@media (max-width: 900px) { .tour3d { grid-template-columns: 1fr; padding: 36px 26px 0; } .tour3d-copy { padding-bottom: 0; } .tour3d-art { height: 220px; } }
    
/* ---------- Branded scrollbar ---------- */
html { scrollbar-width: thin; scrollbar-color: var(--moss-700) var(--linen-2); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--linen-2); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--moss-600), var(--moss-800)); border-radius: 999px; border: 3px solid var(--linen-2); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--gold), var(--gold-dark)); }
::-webkit-scrollbar-corner { background: var(--linen-2); }
::selection { background: var(--gold); color: var(--moss-900); }
.read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; pointer-events: none; }
.read-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--camel), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform .1s linear; border-radius: 0 3px 3px 0; }

/* ---------- Hamburger ---------- */
.burger { display: none; position: relative; width: 48px; height: 44px; border: 0; border-radius: 14px; background: var(--moss-700); cursor: pointer; transition: background .25s, transform .2s; flex: none; }
.burger:hover { background: var(--moss-800); }
.burger:active { transform: scale(.95); }
.burger span { position: absolute; left: 13px; height: 2.5px; border-radius: 3px; background: var(--cream); transition: transform .35s cubic-bezier(.6, .05, .3, 1.2), opacity .2s, width .3s, top .3s; }
.burger span:nth-child(1) { top: 14px; width: 22px; }
.burger span:nth-child(2) { top: 21px; width: 15px; background: var(--gold); }
.burger span:nth-child(3) { top: 28px; width: 22px; }
.burger:hover span:nth-child(2) { width: 22px; }
.drawer-open .burger { background: var(--gold); }
.drawer-open .burger span { background: var(--moss-900); }
.drawer-open .burger span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.drawer-open .burger span:nth-child(2) { opacity: 0; transform: translateX(-8px); }
.drawer-open .burger span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
@media (max-width: 1100px) { .burger { display: block; } }

/* ---------- Mobile menu ---------- */
.drawer-bg { background: rgba(20, 28, 15, .55) !important; backdrop-filter: blur(4px); z-index: 80 !important; }
.drawer-open { overflow: hidden; }
.mnav { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(400px, 100%); display: flex; flex-direction: column; color: var(--cream); background: radial-gradient(120% 60% at 100% 0%, rgba(218, 171, 132, .16), transparent 60%), var(--moss-900); transform: translateX(105%); transition: transform .5s cubic-bezier(.7, 0, .2, 1); box-shadow: -30px 0 60px -20px rgba(0, 0, 0, .5); }
.drawer-open .mnav { transform: none; }
.mnav-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid rgba(251, 249, 244, .08); }
.mnav .brand strong { color: var(--cream); }
.mnav .brand small { color: var(--gold); }
.mnav-close { position: relative; width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(251, 249, 244, .18); background: rgba(251, 249, 244, .06); cursor: pointer; transition: background .2s, transform .3s; }
.mnav-close:hover { background: var(--gold); transform: rotate(90deg); }
.mnav-close span { position: absolute; left: 12px; top: 20.5px; width: 20px; height: 2.5px; border-radius: 3px; background: var(--cream); }
.mnav-close:hover span { background: var(--moss-900); }
.mnav-close span:first-child { transform: rotate(45deg); }
.mnav-close span:last-child { transform: rotate(-45deg); }
.mnav-body { flex: 1; overflow-y: auto; padding: 8px 22px 20px; scrollbar-color: var(--moss-600) transparent; }
.mnav-body::-webkit-scrollbar-track { background: transparent; }
.mnav-body::-webkit-scrollbar-thumb { border-color: var(--moss-900); }
.mnav-label { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 20px 4px 8px; }
.mnav nav { display: grid; gap: 2px; }
.mnav nav a { display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 14px; font-family: var(--serif); font-size: 19px; font-weight: 500; color: var(--cream); transition: background .2s, padding .25s; }
.mnav nav a i { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(251, 249, 244, .07); font-style: normal; font-size: 16px; }
.mnav nav a span { flex: 1; }
.mnav nav a b { color: var(--gold); opacity: 0; transform: translateX(-6px); transition: .25s; font-family: var(--sans); }
.mnav nav a:hover, .mnav nav a:focus-visible { background: rgba(251, 249, 244, .07); padding-left: 16px; outline: none; }
.mnav nav a:hover b, .mnav nav a:focus-visible b { opacity: 1; transform: none; }
.mnav-play { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mnav-play a { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 16px; background: linear-gradient(150deg, rgba(218, 171, 132, .22), rgba(251, 249, 244, .04)); border: 1px solid rgba(218, 171, 132, .3); transition: transform .2s, border-color .2s; }
.mnav-play a:hover { transform: translateY(-3px); border-color: var(--gold); }
.mnav-play span { font-size: 24px; }
.mnav-play b { font-size: 15px; color: var(--cream); margin-top: 6px; }
.mnav-play small { font-size: 12.5px; color: var(--sage-3); }
.mnav-foot { padding: 16px 22px 22px; border-top: 1px solid rgba(251, 249, 244, .08); display: grid; gap: 10px; }
.mnav-foot .btn-gold { width: 100%; }
.mnav-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mnav-contact .btn { width: 100%; }
.mnav .btn-ghost { border-color: rgba(251, 249, 244, .25); }
/* staggered entrance */
.mnav-body > * { opacity: 0; transform: translateX(24px); transition: opacity .4s, transform .5s cubic-bezier(.2, .7, .2, 1); }
.drawer-open .mnav-body > * { opacity: 1; transform: none; }
.drawer-open .mnav-body > *:nth-child(1) { transition-delay: 0.12s; }
.drawer-open .mnav-body > *:nth-child(2) { transition-delay: 0.17s; }
.drawer-open .mnav-body > *:nth-child(3) { transition-delay: 0.22s; }
.drawer-open .mnav-body > *:nth-child(4) { transition-delay: 0.27s; }
.drawer-open .mnav-body > *:nth-child(5) { transition-delay: 0.32s; }
.drawer-open .mnav-body > *:nth-child(6) { transition-delay: 0.37s; }
@media (prefers-reduced-motion: reduce) { .mnav, .mnav-body > * { transition: none; } }
    
/* ---------- New logo in navbar ---------- */
.brand { position: relative; }
.brand-logo { display: block; height: 48px; width: auto; }
.header .brand-logo { height: 50px; }
.brand-pill { display: inline-flex; background: #fff; border-radius: 14px; padding: 8px 14px; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .4); }
.brand-pill .brand-logo { height: 40px; }
.footer .brand-pill .brand-logo { height: 52px; }
.header .brand { margin-right: 24px; flex: none; }
@media (max-width: 600px) {
    .header .brand-logo { height: 38px; }
}
/* Light logo on dark backgrounds (footer, phone menu) */
.brand-light .brand-logo { height: 44px; }
.footer .brand-light .brand-logo { height: 62px; }
.footer .brand-light { display: inline-block; padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid rgba(218, 171, 132, .3); }
    
/* ---------- Back to top ---------- */
.to-top { position: fixed; right: 24px; bottom: 100px; z-index: 70; width: 52px; height: 52px; border: 0; padding: 0; border-radius: 50%; background: var(--moss-700); color: var(--cream); cursor: pointer; display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(36, 51, 28, .55); opacity: 0; visibility: hidden; transform: translateY(16px) scale(.9); transition: opacity .3s, visibility .3s, transform .35s cubic-bezier(.2, .7, .2, 1.3), background .25s; }
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--moss-900); }
.to-top:hover .to-top-arrow { transform: translateY(-3px); }
.to-top:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.to-top-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.to-top-ring circle { fill: none; stroke: rgba(251, 249, 244, .18); stroke-width: 3; }
.to-top-ring .to-top-fill { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 144.5; stroke-dashoffset: 144.5; transition: stroke-dashoffset .15s linear; }
.to-top-arrow { position: relative; width: 20px; height: 20px; transition: transform .25s; }
.drawer-open .to-top { opacity: 0; visibility: hidden; }

/* ---------- Branded chat button (opens Tawk.to) ---------- */
.chat-fab { position: fixed; right: 24px; bottom: 24px; z-index: 65; display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 24px 0 8px; border: 0; border-radius: 999px; background: var(--moss-700); color: var(--cream); font-family: var(--sans); text-align: left; cursor: pointer; box-shadow: 0 16px 34px -12px rgba(36, 51, 28, .6), inset 0 0 0 1px rgba(218, 171, 132, .35); transition: transform .3s cubic-bezier(.2, .7, .2, 1.3), box-shadow .3s, opacity .3s, visibility .3s, background .25s; animation: chatIn .6s 1.2s cubic-bezier(.2, .7, .2, 1.3) backwards; }
.chat-fab:hover { transform: translateY(-3px); background: var(--moss-800); box-shadow: 0 20px 40px -12px rgba(36, 51, 28, .7), inset 0 0 0 1px rgba(218, 171, 132, .6); }
.chat-fab:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.chat-fab .ic { position: relative; width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--moss-900); }
.chat-fab .ic::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; animation: chatPulse 2.8s 2s ease-out infinite; }
.chat-fab .ic svg { width: 22px; height: 22px; }
.chat-fab b { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; }
.chat-fab small { display: block; font-size: 12px; color: var(--sage-1); }
.chat-fab em { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #C9573E; color: #fff; font: 700 12px/22px var(--sans); font-style: normal; text-align: center; border: 2px solid var(--cream); }
.chat-fab em[hidden] { display: none; }
.chat-fab.away { opacity: 0; visibility: hidden; transform: translateY(20px) scale(.9); }
.drawer-open .chat-fab { opacity: 0; visibility: hidden; }
.chat-fab .ic .i-close { display: none; }
.chat-fab.open .ic .i-chat { display: none; }
.chat-fab.open .ic .i-close { display: block; }
.chat-fab.open .ic::after { animation: none; }
.chat-open .to-top { opacity: 0; visibility: hidden; }

/* ---------- Branded chat panel ---------- */
.chat-panel { position: fixed; right: 24px; bottom: 98px; z-index: 66; width: 384px; max-height: min(640px, calc(100vh - 130px)); display: flex; flex-direction: column; border-radius: 26px; overflow: hidden; background: var(--cream); box-shadow: 0 34px 80px -24px rgba(36, 51, 28, .6), 0 0 0 1px rgba(36, 51, 28, .08); transform-origin: bottom right; animation: cpIn .38s cubic-bezier(.2, .7, .2, 1.15); font-family: var(--sans); }
.chat-panel[hidden] { display: none; }
.cp-head { position: relative; display: flex; align-items: center; gap: 12px; padding: 18px 18px 20px; color: var(--cream); background: radial-gradient(circle at 88% -10%, #5F7F4A, var(--moss-700) 45%, var(--moss-800)); }
.cp-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--gold), var(--camel), var(--gold)); }
.cp-logo { width: 46px; height: 46px; flex: none; border-radius: 50%; background: #fff url("../images/logo-a-emblem.png") center / cover no-repeat; box-shadow: 0 0 0 2px var(--gold); }
.cp-head b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 600; line-height: 1.2; }
.cp-head small { display: flex; align-items: center; gap: 7px; margin-top: 3px; font-size: 12.5px; color: var(--sage-1); }
.cp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage-1); flex: none; }
.cp-dot.online { background: #8FD18A; box-shadow: 0 0 0 3px rgba(143, 209, 138, .25); }
.cp-dot.away { background: var(--gold); }
.cp-x { margin-left: auto; width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(251, 249, 244, .3); background: rgba(251, 249, 244, .08); color: var(--cream); cursor: pointer; transition: background .2s; }
.cp-x:hover { background: rgba(251, 249, 244, .2); }
.cp-x svg { width: 16px; height: 16px; }
.cp-body { flex: 1; min-height: 180px; overflow-y: auto; padding: 18px 16px 10px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(180deg, var(--linen-2), var(--cream)); scrollbar-width: thin; }
.cp-msg { display: flex; align-items: flex-end; gap: 8px; max-width: 94%; animation: cpMsg .35s cubic-bezier(.2, .7, .2, 1) backwards; }
.cp-msg.bot::before { content: ""; width: 28px; height: 28px; flex: none; border-radius: 50%; background: #fff url("../images/logo-a-emblem.png") center / cover no-repeat; box-shadow: 0 0 0 1.5px var(--gold); }
.cp-msg.me { align-self: flex-end; }
.cp-bub { padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: #fff; border: 1px solid var(--line); color: var(--ink); font-size: 14px; line-height: 1.5; box-shadow: 0 6px 16px -12px rgba(36, 51, 28, .35); }
.cp-msg.me .cp-bub { background: var(--moss-700); border-color: transparent; color: var(--cream); border-radius: 18px 18px 6px 18px; }
.cp-bub b { color: var(--moss-800); }
.cp-bub a { display: inline-block; margin-top: 8px; font-weight: 600; color: var(--moss-700); text-decoration: underline; text-underline-offset: 3px; }
.cp-pk { display: grid; gap: 6px; margin-top: 8px; }
.cp-pk div { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 8px 10px; border-radius: 12px; background: var(--linen-2); }
.cp-pk strong { font-family: var(--serif); font-size: 15px; color: var(--moss-800); }
.cp-pk span { font-weight: 700; color: var(--moss-700); font-size: 13.5px; }
.cp-pk small { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.cp-crops { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.cp-crops span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 3px; border-radius: 999px; background: var(--linen-2); font-size: 12.5px; font-weight: 600; color: var(--moss-800); }
.cp-crops img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.cp-typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.cp-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--camel); animation: cpDot 1s ease-in-out infinite; }
.cp-typing i:nth-child(2) { animation-delay: .15s; }
.cp-typing i:nth-child(3) { animation-delay: .3s; }
.cp-head, .cp-topics, .cp-foot { flex: none; }
.cp-topics { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 16px; background: var(--cream); border-top: 1px solid var(--line); }
.cp-topics button { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--sage-1); background: #fff; color: var(--moss-800); font: 600 12.5px var(--sans); cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
.cp-topics button:hover { background: var(--sage-6); border-color: var(--moss-600); transform: translateY(-1px); }
.cp-topics button.used { opacity: .6; }
.cp-foot { padding: 12px 16px 14px; background: #fff; border-top: 1px solid var(--line); }
.cp-live { width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; background: var(--gold); color: var(--moss-900); font: 700 15px var(--sans); cursor: pointer; transition: background .2s, transform .2s; }
.cp-live:hover { background: var(--gold-dark); transform: translateY(-1px); }
.cp-live svg { width: 19px; height: 19px; }
.cp-alt { display: flex; justify-content: center; gap: 20px; margin-top: 10px; font-size: 13px; }
.cp-alt a { color: var(--moss-700); font-weight: 600; }
.cp-alt a:hover { text-decoration: underline; }
.drawer-open .chat-panel { display: none; }
@keyframes cpIn { from { opacity: 0; transform: translateY(18px) scale(.94); } }
@keyframes cpMsg { from { opacity: 0; transform: translateY(10px); } }
@keyframes cpDot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }
@media (max-width: 600px) {
    .cp-topics { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 10px 12px; }
    .cp-topics::-webkit-scrollbar { display: none; }
    .cp-topics button { flex: none; }
    .chat-panel { left: 10px; right: 10px; bottom: 84px; width: auto; max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); border-radius: 22px; }
}
@keyframes chatIn { from { opacity: 0; transform: translateY(24px) scale(.9); } }
@keyframes chatPulse { 0% { opacity: .8; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.5); } }
@media (max-width: 600px) {
    .chat-fab { right: 16px; bottom: 16px; width: 58px; height: 58px; padding: 0; justify-content: center; }
    .chat-fab .txt { display: none; }
}
@media (max-width: 600px) { .to-top { right: 16px; bottom: 92px; width: 46px; height: 46px; } }
    
/* ---------- Responsive refinements (all screen sizes) ---------- */
.num-cell strong, .hero-stats strong { white-space: nowrap; }
.trend { display: inline-block; white-space: nowrap; }
.tiers > *, .ops-grid > *, .posts > *, .footer-main > * { min-width: 0; }
img, svg, video { max-width: 100%; }
@media (max-width: 900px) {
}
@media (min-width: 601px) and (max-width: 900px) {
    .tiers { grid-template-columns: 1fr 1fr; max-width: none; }
    .tiers > .tier:last-child { grid-column: 1 / -1; justify-self: center; width: 100%; max-width: 440px; }
}
@media (max-width: 600px) {
    .footer-main { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
    .footer-about, .footer-main > div:last-child { grid-column: 1 / -1; }
    .price-table table { font-size: 14px; }
    .price-table th, .price-table td { padding-inline: 10px; }
    .price-table th { font-size: 11px; letter-spacing: .06em; }
}
@media (max-width: 380px) {
    .container { padding: 0 16px; }
    .hero h1 { font-size: 36px; }
    .hero p.sub { font-size: 16.5px; }
    .title { font-size: 28px; }
    .tier { padding: 28px 20px; }
    .tier .amt { font-size: 36px; }
    .spec div { font-size: 13px; gap: 8px; }
    .tier li { font-size: 14px; }
    .hw-detail h3 { font-size: 28px; }
    .partner { padding: 46px 18px; }
    .news-box { padding: 30px 18px; }
    .footer-main { grid-template-columns: 1fr; }
}
    @media (max-width: 1100px) {
    .sm-points { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .sm-points div { white-space: normal; align-items: flex-start; }
}
@media (max-width: 600px) { .sm-points { grid-template-columns: 1fr !important; } }
    .unit-sm { display: none; }
@media (max-width: 420px) {
    .price-table th:nth-child(2), .price-table td:nth-child(2) { display: none; }
    .unit-sm { display: block; font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 2px; }
    .price-table th, .price-table td { padding-inline: 12px; }
}

/* ---------- Motion & animations ---------- */
section, footer { overflow-x: clip; }
/* reveal directions (assigned by script) */
.reveal.from-left { transform: translateX(-46px); }
.reveal.from-right { transform: translateX(46px); }
.reveal.zoom-in { transform: scale(.94); }
.reveal.in.from-left, .reveal.in.from-right, .reveal.in.zoom-in { transform: none; }
/* kicker line draws in */
.reveal .kicker::before { transform: scaleX(0); transform-origin: left; transition: transform .8s .25s cubic-bezier(.2, .7, .2, 1); }
.reveal.in .kicker::before { transform: none; }
/* headings rise word by word */
.title .w, .hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .12em; margin: 0 -.04em -.12em; }
.title .w > span { display: inline-block; transform: translateY(112%); transition: transform .9s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i) * 45ms + .1s); }
.title.words-in .w > span { transform: none; }
.hero h1 .w > span { display: inline-block; animation: wordUp .85s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(.25s + var(--i) * 55ms); }
@keyframes wordUp { from { transform: translateY(112%); } }
/* hero: drifting leaves + parallax target */
.hero > .container { position: relative; z-index: 2; will-change: transform, opacity; }
.hero-bg { will-change: transform; }
.leaves { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.leaves i { position: absolute; top: -40px; left: var(--x); width: 16px; height: 16px; background: var(--c); border-radius: 0 75% 0 75%; opacity: .5; animation: leafFall var(--d) linear var(--delay) infinite; }
@keyframes leafFall {
    0% { transform: translate(0, -40px) rotate(0deg) scale(var(--s)); }
    25% { transform: translate(34px, 26vh) rotate(100deg) scale(var(--s)); }
    50% { transform: translate(-22px, 54vh) rotate(190deg) scale(var(--s)); }
    75% { transform: translate(28px, 80vh) rotate(280deg) scale(var(--s)); }
    100% { transform: translate(0, 115vh) rotate(380deg) scale(var(--s)); }
}
/* trust strip */
.js-motion .trust:not(.in) .trust-item { opacity: 0; }
.trust.in .trust-item { animation: mUp .7s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * 90ms); }
.trust.in .trust-item .ic { animation: mPop .7s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(var(--i) * 90ms + .15s); }
/* produce categories */
.js-motion .cats.reveal:not(.in) .cat { opacity: 0; }
.cats.in .cat { animation: mUp .65s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * 60ms); }
.cat:hover .em { animation: wiggle .6s ease-in-out; }
/* membership seats fill one by one */
.seats.in .dots i { animation: mPop .45s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(.2s + var(--i) * 35ms); }
/* gallery wipes open */
.gallery.in figure { animation: wipeIn 1.1s cubic-bezier(.7, 0, .2, 1) backwards; animation-delay: calc(var(--i) * 110ms); }
.gallery.in figure img { animation: settle 1.6s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(var(--i) * 110ms); }
/* price rows slide in */
.price-table.in tbody tr { animation: rowIn .55s ease-out backwards; animation-delay: calc(.25s + var(--i) * 45ms); }
/* shine sweep on solid buttons */
.btn { position: relative; isolation: isolate; overflow: hidden; }
.btn-gold::after, .btn-moss::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%); transform: translateX(-130%); transition: transform .75s ease; pointer-events: none; }
.btn-gold:hover::after, .btn-moss:hover::after { transform: translateX(130%); }
/* cards tilt toward the cursor (set by script) */
.tilt { transition: transform .15s ease-out, box-shadow .25s !important; }
/* produce marquee */
.marquee { overflow: hidden; background: var(--moss-800); padding: 14px 0; }
.marquee-track { display: flex; width: max-content; animation: marquee 55s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { display: inline-flex; align-items: center; gap: 10px; margin-right: 26px; color: var(--cream); font-family: var(--serif); font-size: 18px; white-space: nowrap; }
.marquee span::after { content: "✦"; margin-left: 16px; color: var(--gold); font-size: 12px; }
.marquee img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(251, 249, 244, .55); }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes mUp { from { opacity: 0; transform: translateY(22px); } }
@keyframes mPop { from { opacity: 0; transform: scale(0); } }
@keyframes wipeIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes settle { from { transform: scale(1.25); } }
@keyframes rowIn { from { opacity: 0; transform: translateX(-16px); } }
@keyframes wiggle { 25% { transform: rotate(-12deg) scale(1.1); } 75% { transform: rotate(10deg) scale(1.1); } }
@media (max-width: 600px) { .marquee span { font-size: 16px; } .marquee img { width: 30px; height: 30px; } .leaves i:nth-child(n+8) { display: none; } }

/* =====================================================================
   Multi-page additions: page banners, explore cards, next-page link, contact cards
   ===================================================================== */
.page-hero { position: relative; overflow: hidden; color: var(--cream); padding: 86px 0 74px; isolation: isolate; }
.page-hero-bg { position: absolute; inset: 0; z-index: -1; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); animation: slowzoom 18s ease-out forwards; }
.page-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(36, 51, 28, .95) 0%, rgba(36, 51, 28, .82) 48%, rgba(36, 51, 28, .45) 100%), linear-gradient(0deg, rgba(36, 51, 28, .55), transparent 45%); }
.crumbs { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--sage-1); animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.crumbs a { color: var(--sage-1); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:hover { color: var(--gold); }
.crumbs [aria-current] { color: var(--gold); font-weight: 600; }
.page-hero h1 { font-size: clamp(42px, 6.4vw, 76px); line-height: 1.02; margin: 16px 0 14px; color: var(--cream); max-width: 820px; }
.page-hero h1 em { font-style: italic; color: var(--gold); font-weight: 500; }
.page-hero p { max-width: 600px; font-size: 18px; color: var(--sage-3); animation: rise .9s .25s cubic-bezier(.2, .7, .2, 1) both; }
.page-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; animation: rise .9s .4s cubic-bezier(.2, .7, .2, 1) both; }
.page-jump a { padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(251, 249, 244, .35); background: rgba(251, 249, 244, .08); backdrop-filter: blur(6px); color: var(--cream); font-size: 14px; font-weight: 600; transition: background .2s, border-color .2s, transform .2s; }
.page-jump a:hover { background: var(--gold); border-color: var(--gold); color: var(--moss-900); transform: translateY(-2px); }
.page-hero h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .12em; margin: 0 -.04em -.12em; }
.page-hero h1 .w > span { display: inline-block; animation: wordUp .85s cubic-bezier(.2, .7, .2, 1) backwards; animation-delay: calc(.1s + var(--i) * 70ms); }
.explore { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.ex-card { display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid var(--line); color: inherit; transition: transform .3s, box-shadow .3s, border-color .3s; }
.ex-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--sage-1); }
.ex-img { display: block; height: 190px; overflow: hidden; }
.ex-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.ex-card:hover .ex-img img { transform: scale(1.08); }
.ex-body { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 24px; flex: 1; }
.ex-body small { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--camel); }
.ex-body b { font-family: var(--serif); font-size: 26px; font-weight: 600; color: var(--moss-800); line-height: 1.15; }
.ex-body > span { color: var(--muted); font-size: 15px; flex: 1; }
.ex-body em { font-style: normal; font-weight: 600; color: var(--moss-700); margin-top: 8px; }
.next-sec { margin-top: 20px; margin-bottom: 96px; }
.next-page { display: flex; align-items: center; gap: 26px; padding: 16px 30px 16px 16px; border-radius: 26px; background: var(--moss-800); color: var(--cream); transition: transform .3s, box-shadow .3s; }
.next-page:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.next-page img { width: 150px; height: 110px; flex: none; border-radius: 18px; object-fit: cover; }
.next-copy { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.next-copy small { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.next-copy b { font-family: var(--serif); font-size: clamp(26px, 3vw, 36px); font-weight: 600; line-height: 1.1; }
.next-copy span { color: var(--sage-3); font-size: 15px; }
.next-arrow { width: 58px; height: 58px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--moss-900); font-size: 24px; transition: transform .3s; }
.next-page:hover .next-arrow { transform: translateX(6px); }
.contact-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.cc { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 26px 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); color: inherit; text-align: left; font: inherit; cursor: pointer; transition: transform .25s, box-shadow .25s, border-color .25s; }
.cc:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--sage-1); }
.cc-ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--sage-6); font-size: 24px; margin-bottom: 8px; }
.cc b { font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--moss-800); }
.cc span:last-child { color: var(--muted); font-size: 14.5px; }
.share-sec { padding-top: 0; }
.page-contact #location { padding-top: 40px; }
.page-contact #partner { margin-bottom: 96px; }
.mnav nav a.on { background: rgba(218, 171, 132, .16); }
.mnav nav a.on b { opacity: 1; transform: none; }
@media (max-width: 1100px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .explore { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
    .page-hero { padding: 60px 0 54px; }
    .page-hero p { font-size: 16.5px; }
    .page-jump a { padding: 8px 14px; font-size: 13px; }
    .explore { grid-template-columns: 1fr; }
    .ex-img { height: 170px; }
    .next-page { padding: 14px; gap: 14px; }
    .next-page img { width: 84px; height: 84px; }
    .next-copy span { display: none; }
    .next-arrow { width: 46px; height: 46px; font-size: 20px; }
    .contact-cards { grid-template-columns: 1fr; }
    .next-sec { margin-bottom: 72px; }
}
@media (prefers-reduced-motion: reduce) { .crumbs, .page-hero p, .page-jump { opacity: 1; transform: none; } }

/* ---------- Home page (revised content) ---------- */
.steps-3 { grid-template-columns: repeat(3, 1fr); margin: 48px 0 0; }
.step h3 { font-size: 21px; color: var(--moss-800); margin-top: 14px; padding-right: 50px; }
.h-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; }
.h-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.h-link { font-weight: 600; color: var(--moss-700); border-bottom: 2px solid var(--gold); padding-bottom: 2px; transition: color .2s, border-color .2s; }
.h-link:hover { color: var(--moss-900); border-color: var(--moss-700); }
.h-produce { background: var(--linen-3); }
.h-grow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.h-grow li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line); font-weight: 600; color: var(--moss-800); transition: transform .25s, box-shadow .25s; }
.h-grow li:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.h-grow li span { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--sage-6); font-size: 21px; }
.h-grow li.soon { background: transparent; border-style: dashed; border-color: var(--camel); color: var(--muted); }
.h-grow li em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--camel); white-space: nowrap; }
.h-pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.h-pack { text-align: center; padding: 36px 26px 32px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); transition: transform .3s, box-shadow .3s; }
.h-pack:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.h-pack img { height: 80px; width: auto; margin: 0 auto 14px; }
.h-pack h3 { font-size: 28px; color: var(--moss-800); }
.h-pack p { color: var(--muted); margin-top: 6px; font-size: 16px; }
.h-pack.gold { background: var(--moss-800); border-color: var(--moss-800); }
.h-pack.gold h3 { color: var(--cream); }
.h-pack.gold p { color: var(--sage-3); }
.h-photo { border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 3.2; box-shadow: var(--shadow-lg); }
.h-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
.h-photo:hover img { transform: scale(1.04); }
.h-stay { grid-template-columns: 1fr 1.05fr; }
.h-deliver { display: flex; align-items: center; gap: 30px; padding: 40px 48px; border-radius: 26px; background: var(--sage-5); }
.h-deliver-ic { width: 84px; height: 84px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--moss-700); color: var(--gold); }
.h-deliver-ic svg { width: 38px; height: 38px; }
.h-deliver h2 { font-size: clamp(26px, 3vw, 36px); color: var(--moss-800); }
.h-deliver p { color: var(--muted); font-size: 16.5px; margin: 8px 0 14px; max-width: 720px; }
#receive .h-deliver p { max-width: none; margin-bottom: 0; }
.h-locs { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 22px; margin-top: 48px; align-items: stretch; }
.h-loc { padding: 30px 28px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.h-loc-ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--sage-6); font-size: 24px; }
.h-loc h3 { font-size: 24px; color: var(--moss-800); margin-top: 16px; }
.h-loc p { color: var(--muted); font-size: 15px; margin-top: 8px; }
.h-loc .h-addr { color: var(--moss-700); font-weight: 600; font-size: 16px; }
.h-loc .h-phone a { color: var(--moss-700); font-weight: 600; white-space: nowrap; }
.h-loc-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.h-map { border-radius: var(--radius); overflow: hidden; min-height: 340px; background: var(--sage-5); border: 1px solid var(--line); }
.h-map iframe { display: block; width: 100%; height: 100%; min-height: 340px; border: 0; }
.page-home #visit { margin-bottom: 96px; }
@media (max-width: 1100px) { .h-locs { grid-template-columns: 1fr 1fr; } .h-map { grid-column: 1 / -1; } }
@media (max-width: 900px) {
    .h-split, .h-stay { grid-template-columns: 1fr; gap: 40px; }
    .steps-3, .h-pack-grid { grid-template-columns: 1fr; }
    .h-pack { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 20px; text-align: left; padding: 22px 24px; }
    .h-pack img { grid-row: span 2; height: 64px; margin: 0; }
    .h-pack p { margin-top: 0; }
}
@media (max-width: 600px) {
    .h-grow { grid-template-columns: 1fr; }
    .h-deliver { flex-direction: column; align-items: flex-start; gap: 20px; padding: 30px 24px; }
    .h-deliver-ic { width: 64px; height: 64px; }
    .h-locs { grid-template-columns: 1fr; }
    .h-map, .h-map iframe { min-height: 280px; }
    .page-home #visit { margin-bottom: 72px; }
}
#farm-stay { padding-top: 0; }

/* ---------- About page (revised content) ---------- */
.ab-do { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ab-do li { display: flex; align-items: flex-start; gap: 16px; padding: 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); font-weight: 500; font-size: 16.5px; color: var(--moss-800); line-height: 1.5; transition: transform .25s, box-shadow .25s; }
.ab-do li:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.ab-do li span { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--sage-6); font-size: 23px; }
.ab-do li a { color: var(--moss-700); font-weight: 600; border-bottom: 2px solid var(--gold); }
.ab-locs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.ab-loc { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--line); transition: transform .3s, box-shadow .3s; }
.ab-loc:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.ab-loc-img { height: 240px; background: var(--sage-5); }
.ab-loc-img img, .ab-loc-img iframe { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.ab-loc-body { position: relative; padding: 40px 30px 32px; }
.ab-loc-body .h-loc-ic { position: absolute; top: -28px; left: 30px; width: 56px; height: 56px; background: var(--cream); box-shadow: var(--shadow); }
.ab-loc-body h3 { font-size: 25px; color: var(--moss-800); }
.ab-loc-body p { color: var(--muted); margin-top: 10px; font-size: 16px; }
.ab-work { margin: 48px 0 0; }
.ab-work .step h3 { font-size: 20px; }
.ab-owner { display: flex; align-items: center; gap: 34px; max-width: 860px; margin: 0 auto; padding: 44px 48px; border-radius: 26px; background: var(--moss-800); color: var(--cream); }
.ab-owner-av { width: 104px; height: 104px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--moss-900); font-family: var(--serif); font-size: 48px; font-weight: 600; box-shadow: 0 0 0 6px rgba(218, 171, 132, .25); }
.ab-owner .kicker { color: var(--gold); }
.ab-owner h2 { font-size: clamp(28px, 3.2vw, 38px); margin-top: 6px; }
.ab-owner p { font-size: 18px; color: var(--sage-3); margin: 8px 0 16px; }
.ab-owner .h-link { color: var(--cream); }
.ab-meet { list-style: none; padding: 0; margin: 26px auto 0; display: grid; gap: 8px; max-width: 640px; color: rgba(251, 249, 244, .9); font-size: 16.5px; }
.ab-meet b { color: var(--gold); font-weight: 600; }
.ab-meet a { color: var(--cream); border-bottom: 1px solid var(--gold); white-space: nowrap; }
#ownership { padding-top: 0; }
#meet { margin-bottom: 30px; }
@media (max-width: 1100px) { .ab-work { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .ab-do { grid-template-columns: 1fr 1fr; } .ab-locs { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
    .ab-do, .ab-work { grid-template-columns: 1fr; }
    .ab-do li { padding: 18px; }
    .ab-loc-img { height: 200px; }
    .ab-loc-body { padding: 38px 22px 26px; }
    .ab-owner { flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px 24px; }
    .ab-owner-av { width: 76px; height: 76px; font-size: 36px; }
}

/* ---------- Our Mission page ---------- */
.mi-toward { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: start; }
.mi-toward-head { position: sticky; top: 110px; }
.mi-toward-head img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 24px; margin-top: 30px; box-shadow: var(--shadow-lg); }
.mi-goals { list-style: none; margin: 0; padding: 0; counter-reset: goal; display: grid; gap: 14px; }
.mi-goals li { position: relative; counter-increment: goal; padding: 22px 26px 22px 84px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); color: var(--muted); font-size: 16px; line-height: 1.6; transition: transform .25s, box-shadow .25s, border-color .25s; }
.mi-goals li:hover { transform: translateX(6px); box-shadow: var(--shadow); border-color: var(--sage-1); }
.mi-goals li::before { content: "0" counter(goal); position: absolute; left: 22px; top: 20px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--sage-6); color: var(--moss-700); font-family: var(--serif); font-weight: 700; font-size: 16px; }
.mi-goals li b { display: block; color: var(--moss-800); font-family: var(--serif); font-size: 19px; font-weight: 600; margin-bottom: 2px; }
.mi-why { background: var(--linen-3); }
.mi-practice { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }
.mi-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 28px 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); color: inherit; transition: transform .25s, box-shadow .25s, border-color .25s; }
.mi-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--sage-1); }
.mi-card b { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.35; color: var(--moss-800); flex: 1; }
.mi-card em { font-style: normal; font-weight: 600; font-size: 14.5px; color: var(--moss-700); margin-top: 10px; border-bottom: 2px solid var(--gold); }
.page-mission #join { margin-bottom: 30px; }
@media (max-width: 1100px) { .mi-practice { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .mi-toward { grid-template-columns: 1fr; gap: 36px; } .mi-toward-head { position: static; } .mi-toward-head img { display: none; } }
@media (max-width: 600px) {
    .mi-practice { grid-template-columns: 1fr; }
    .mi-goals li { padding: 18px 18px 18px 72px; }
    .mi-goals li::before { left: 16px; top: 18px; width: 40px; height: 40px; }
}

/* ---------- Membership page (revised content) ---------- */
.mb-hero-cta { margin-top: 26px; }
.mb-photo { margin-top: 30px; aspect-ratio: 16 / 10; }
.mb-incl { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mb-incl li { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); font-size: 16.5px; font-weight: 500; color: var(--moss-800); line-height: 1.5; transition: transform .25s, box-shadow .25s; }
.mb-incl li:hover { transform: translateX(6px); box-shadow: var(--shadow); }
.mb-incl li > span { width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--sage-6); font-size: 24px; }
.mb-incl li a { color: var(--moss-700); font-weight: 600; border-bottom: 2px solid var(--gold); }
.mb-table-wrap { max-width: 1000px; margin: 48px auto 0; }
.mb-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow); }
.mb-table th, .mb-table td { padding: 20px 24px; text-align: left; border-bottom: 1px solid var(--line); font-size: 16px; }
.mb-table thead th { background: var(--moss-800); color: var(--cream); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.mb-table tbody tr:last-child > * { border-bottom: 0; }
.mb-table tbody th { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--moss-800); white-space: nowrap; }
.mb-table tbody th img { display: inline-block; vertical-align: middle; height: 42px; width: auto; margin-right: 14px; }
.mb-table td { color: var(--muted); }
.mb-table td b { color: var(--moss-800); font-size: 18px; }
.mb-table tr.gold > * { background: var(--sage-6); }
.mb-table tbody tr { transition: background .2s; }
.mb-table tbody tr:hover > * { background: var(--linen-2); }
.mb-note { margin-top: 18px; padding: 18px 22px; border-radius: 14px; background: #fff; border-left: 4px solid var(--gold); color: var(--muted); font-size: 15px; line-height: 1.65; }
.mb-note b { color: var(--moss-800); }
.mb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.mb-card { padding: 34px 32px; border-radius: 22px; background: #fff; border: 1px solid var(--line); }
.mb-card h2 { font-size: clamp(24px, 2.6vw, 30px); color: var(--moss-800); margin-top: 18px; }
.mb-card > p { color: var(--muted); margin-top: 10px; font-size: 16px; line-height: 1.65; }
.mb-costs { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mb-costs li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--linen-3); font-size: 14.5px; font-weight: 500; color: var(--moss-800); }
.mb-costs li span { font-size: 19px; }
.mb-steps { list-style: none; margin: 56px 0 0; padding: 0; counter-reset: mbs; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; position: relative; }
.mb-steps::before { content: ""; position: absolute; top: 27px; left: 10%; right: 10%; height: 2px; background: repeating-linear-gradient(90deg, var(--camel) 0 8px, transparent 8px 16px); }
.mb-steps li { position: relative; counter-increment: mbs; text-align: center; color: var(--muted); font-size: 15px; line-height: 1.6; }
.mb-steps li::before { content: counter(mbs); display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; background: var(--moss-700); color: var(--cream); font-family: var(--serif); font-size: 22px; font-weight: 700; box-shadow: 0 0 0 8px var(--cream); position: relative; }
.mb-steps li b { display: block; color: var(--moss-800); }
.mb-steps li a { color: var(--moss-700); font-weight: 600; white-space: nowrap; border-bottom: 2px solid var(--gold); }
.mb-faq { display: inline-block; margin-top: 22px; color: var(--cream); }
#start { margin-bottom: 30px; }
@media (max-width: 900px) {
    .mb-two { grid-template-columns: 1fr; }
    .mb-photo { display: none; }
    .mb-steps { grid-template-columns: 1fr; gap: 0; max-width: 560px; margin-left: auto; margin-right: auto; }
    .mb-steps::before { top: 28px; bottom: 28px; left: 27px; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, var(--camel) 0 8px, transparent 8px 16px); }
    .mb-steps li { text-align: left; padding: 0 0 26px 78px; min-height: 56px; }
    .mb-steps li::before { position: absolute; left: 0; top: -4px; margin: 0; }
}
@media (max-width: 700px) {
    .mb-table, .mb-table tbody, .mb-table tr, .mb-table th, .mb-table td { display: block; }
    .mb-table { background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
    .mb-table thead { display: none; }
    .mb-table tbody tr { background: #fff; border: 1px solid var(--line); border-radius: 18px; margin-bottom: 14px; overflow: hidden; }
    .mb-table tbody th { padding: 18px 20px; border-bottom: 1px solid var(--line); }
    .mb-table td { display: flex; justify-content: space-between; gap: 16px; padding: 12px 20px; border-bottom: 1px solid var(--line); font-size: 15px; }
    .mb-table td { white-space: nowrap; align-items: center; }
    .mb-table td::before { content: attr(data-label); font-weight: 600; color: var(--moss-800); white-space: normal; }
    .mb-table tr.gold { border-color: var(--sage-1); }
    .mb-costs { grid-template-columns: 1fr; }
    .mb-card { padding: 28px 22px; }
}

/* ---------- Operations page (revised content) ---------- */
.op-num { display: inline-block; font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--camel); letter-spacing: .04em; }
.op-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; margin-top: 64px; }
.op-row.flip > :first-child { order: 2; }
.op-row h3 { font-size: clamp(26px, 3vw, 34px); color: var(--moss-800); margin-top: 6px; }
.op-row p { color: var(--muted); font-size: 16.5px; line-height: 1.7; margin: 12px 0 18px; }
.op-crops { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.op-crops span { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; color: var(--moss-800); }
.op-crops img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.op-animals { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.op-animals li { padding: 8px 14px; border-radius: 999px; background: var(--sage-6); font-size: 14px; font-weight: 600; color: var(--moss-800); }
.op-animals li.soon { background: transparent; border: 1px dashed var(--camel); color: var(--muted); }
.op-cal .center h3 { margin-top: 6px; }
.op-cal-link { margin-top: 30px; }
#seasons { margin-top: 0; }
#seasons .h-deliver h3 { font-size: clamp(24px, 2.8vw, 32px); color: var(--moss-800); margin-top: 2px; }
.op-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.op-roles > div { padding: 26px 24px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); transition: transform .25s, box-shadow .25s; }
.op-roles > div:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.op-roles span { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; background: var(--sage-6); font-size: 23px; margin-bottom: 14px; }
.op-roles b { display: block; font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--moss-800); }
.op-roles p { color: var(--muted); font-size: 15px; margin-top: 4px; }
.op-flow { display: flex; align-items: stretch; justify-content: center; gap: 14px; margin: 44px auto 40px; max-width: 900px; }
.op-flow > div { flex: 1; text-align: center; padding: 22px 16px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.op-flow > div.mid { background: var(--moss-800); border-color: var(--moss-800); }
.op-flow > div.mid b { color: var(--cream); }
.op-flow > div.mid small { color: var(--sage-3); }
.op-flow span { font-size: 32px; display: block; }
.op-flow b { display: block; font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--moss-800); margin-top: 6px; }
.op-flow small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.op-flow i { align-self: center; font-style: normal; font-size: 26px; color: var(--camel); animation: opPulse 2.4s ease-in-out infinite; }
@keyframes opPulse { 50% { transform: scale(1.25); color: var(--moss-700); } }
.op-two .mb-card h3 { font-size: clamp(22px, 2.4vw, 27px); color: var(--moss-800); margin-top: 18px; }
.op-share { list-style: none; margin: 14px 0 6px; padding: 0; display: grid; gap: 8px; }
.op-share li { position: relative; padding: 10px 14px 10px 42px; border-radius: 12px; background: var(--linen-3); font-size: 15px; font-weight: 500; color: var(--moss-800); }
.op-share li::before { content: "✓"; position: absolute; left: 14px; top: 9px; color: var(--moss-600); font-weight: 700; }
.op-tel { color: var(--gold); font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--gold); }
#visit-farm { margin-bottom: 30px; }
.photo-credit { font-size: 12px; color: var(--sage-3); opacity: .75; margin: 0 0 14px; line-height: 1.5; }
.photo-credit a { color: inherit; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .op-flow i { animation: none; } }
@media (max-width: 900px) {
    .op-row { grid-template-columns: 1fr; gap: 26px; margin-top: 48px; }
    .op-row.flip > :first-child { order: 0; }
    .op-roles { grid-template-columns: 1fr 1fr; }
    .op-flow { flex-direction: column; max-width: 420px; }
    .op-flow i { transform: rotate(90deg); }
    @keyframes opPulse { 50% { transform: rotate(90deg) scale(1.25); color: var(--moss-700); } }
}
@media (max-width: 600px) { .op-roles { grid-template-columns: 1fr; } }

/* ---------- Produce page: product cards ---------- */
.pc-sec { padding: 80px 0; }
.pc-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 18px; margin-bottom: 32px; }
.pc-head .kicker { flex-basis: 100%; }
.pc-head .title { margin-top: 4px; }
.pc-count { margin-left: auto; padding: 6px 14px; border-radius: 999px; background: var(--sage-6); color: var(--moss-700); font-size: 13.5px; font-weight: 600; }
.pc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.pc { position: relative; display: flex; flex-direction: column; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid var(--line); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .3s; }
.pc:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--sage-1); }
.pc-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sage-6); }
.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.pc:hover .pc-img img { transform: scale(1.08); }
.pc-emoji { display: grid; place-items: center; font-size: 56px; background: radial-gradient(circle at 50% 40%, var(--linen-3), var(--sage-4)); transition: font-size .3s; }
.pc:hover .pc-emoji { font-size: 64px; }
.pc-name { display: flex; flex-direction: column; padding: 14px 16px 16px; line-height: 1.3; }
.pc-name b { font-family: var(--serif); font-size: 17.5px; font-weight: 600; color: var(--moss-800); }
.pc-name small { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.pc-soon { position: absolute; top: 10px; right: 10px; padding: 5px 11px; border-radius: 999px; background: var(--gold); color: var(--moss-900); font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; box-shadow: 0 6px 14px -6px rgba(36, 51, 28, .5); }
.pc.soon { border: 1.5px dashed var(--camel); }
.pc.soon .pc-img img, .pc.soon .pc-emoji { filter: grayscale(.45); opacity: .8; }
.pc-grid-meat { grid-template-columns: repeat(4, 1fr); }
.pc-sec + .hw { padding-top: 90px; }
#receive { margin-top: 0; }
#growing-now { margin-top: 90px; margin-bottom: 30px; }
@media (max-width: 1100px) { .pc-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { .pc-grid, .pc-grid-meat { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) {
    .pc-sec { padding: 60px 0; }
    .pc-grid, .pc-grid-meat { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .pc-name { padding: 10px 12px 12px; }
    .pc-name b { font-size: 15.5px; }
    .pc-emoji { font-size: 44px; }
    .pc-count { margin-left: 0; }
    #growing-now { margin-top: 64px; }
}
.pc-grid-meat .pc-img { aspect-ratio: 16 / 9; }

/* ---------- Calendar page: whole-year chart ---------- */
.yc { margin-top: 64px; padding: 34px; border-radius: 28px; background: linear-gradient(180deg, #fff 0%, #FBFAF4 100%); border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.yc::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: linear-gradient(90deg, #9DB8CF 0 16.6%, #E7A9BE 16.6% 33.3%, #E9B949 33.3% 50%, #6FA58A 50% 75%, #D08A55 75% 91.6%, #9DB8CF 91.6%); }
.yc-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 22px; }
.yc-head h3 { font-size: clamp(22px, 2.4vw, 28px); color: var(--moss-800); }
.yc-legend { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--moss-800); }
.yc-legend span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px; background: var(--linen-3); border: 1px solid var(--line); }
.yc-legend i { width: 22px; height: 12px; border-radius: 3px; }
.yc-legend i.veg { background: linear-gradient(90deg, #6E9257, var(--moss-600)); }
.yc-legend i.fruit { background: linear-gradient(90deg, #F2C48D, #E39A5B); }
.yc-legend i.now { width: 12px; height: 18px; border-radius: 4px; background: rgba(77, 106, 60, .16); box-shadow: inset 0 0 0 1.5px var(--moss-600); }
.yc-scroll { overflow-x: auto; border-radius: 18px; scrollbar-width: thin; }
.yc-table { width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.yc-table col.yc-c1 { width: 230px; }
@media (max-width: 600px) { .yc-table { min-width: 720px; } .yc-table col.yc-c1 { width: 168px; } .yc-name b { font-size: 13px; } .yc-ico { width: 28px; height: 28px; font-size: 14px; } }
.yc-table th, .yc-table td { font-size: 13px; }
/* season band */
.yc-seasons th { padding: 9px 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .03em; text-align: center; color: #2D3B2A; border-radius: 12px 12px 0 0; }
.yc-seasons th span { margin-right: 2px; }
.yc-table .w { --tint: rgba(157, 184, 207, .13); } .yc-seasons th.w { background: #E4EDF4; }
.yc-table .sp { --tint: rgba(231, 169, 190, .12); } .yc-seasons th.sp { background: #F8E4EB; }
.yc-table .su { --tint: rgba(233, 185, 73, .12); } .yc-seasons th.su { background: #FBEDC6; }
.yc-table .mo { --tint: rgba(111, 165, 138, .12); } .yc-seasons th.mo { background: #DDEDE4; }
.yc-table .au { --tint: rgba(208, 138, 85, .12); } .yc-seasons th.au { background: #F6E3D1; }
/* month header */
.yc-months th { padding: 9px 4px; background: var(--tint, transparent); color: var(--moss-700); font-weight: 700; text-align: center; letter-spacing: .02em; }
.yc-months th:first-child { text-align: left; padding-left: 12px; background: transparent; color: var(--muted); font-weight: 600; text-transform: uppercase; font-size: 11.5px; letter-spacing: .08em; }
.yc-months th.now { position: relative; color: #fff; background: var(--moss-700); border-radius: 0 0 10px 10px; }
.yc-months th.now::after { content: "Now"; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); padding: 1px 7px; border-radius: 999px; background: var(--gold); color: var(--moss-900); font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; z-index: 2; }
/* group rows */
.yc-table .yc-group th { padding: 22px 12px 8px; font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--moss-800); text-align: left; background: transparent; }
.yc-table .yc-group small { margin-left: 8px; padding: 2px 9px; border-radius: 999px; font-family: var(--sans, inherit); font-size: 11.5px; font-weight: 600; color: var(--camel-text, var(--camel)); background: var(--linen-3); vertical-align: middle; }
/* crop label */
.yc-table tbody th { text-align: left; padding: 5px 14px 5px 8px; white-space: nowrap; font-weight: 400; border-radius: 14px 0 0 14px; }
.yc-crop { display: flex; align-items: center; gap: 10px; }
.yc-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 17px; line-height: 1; background: #EEF3E8; box-shadow: inset 0 0 0 1px rgba(77, 106, 60, .12); transition: transform .3s; }
.yc-row.fruit .yc-ico { background: #FBEEDF; box-shadow: inset 0 0 0 1px rgba(227, 154, 91, .2); }
.yc-name b { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--moss-800); }
.yc-name small { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.yc-fresh { font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; border-radius: 999px; background: var(--moss-600); color: #fff; }
.yc-row.fruit .yc-fresh { background: #C9733A; }
/* month cells: a faint track with the season bar on top */
.yc-table td { position: relative; height: 46px; padding: 0; background: var(--tint, transparent); }
.yc-table td::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dotted rgba(58, 81, 45, .14); }
.yc-table td.now { background: rgba(77, 106, 60, .12); box-shadow: inset 1.5px 0 0 rgba(77, 106, 60, .35), inset -1.5px 0 0 rgba(77, 106, 60, .35); }
.yc-table td.on::before { top: 8px; bottom: 8px; border: 0; transform-origin: left center; transform: scaleX(0); transition: transform .5s cubic-bezier(.2, .8, .2, 1) calc(var(--i, 0) * 18ms + 150ms), filter .2s; }
.yc.in td.on::before { transform: none; }
.yc-table td.veg::before { background: linear-gradient(180deg, #6E9257, var(--moss-600)); box-shadow: inset 0 -3px 0 rgba(36, 51, 28, .18), inset 0 2px 0 rgba(255, 255, 255, .12); }
.yc-table td.fruit::before { background: linear-gradient(180deg, #F2C48D, #E39A5B); box-shadow: inset 0 -3px 0 rgba(160, 86, 36, .16), inset 0 2px 0 rgba(255, 255, 255, .25); }
.yc-table td.on:not(.start)::before { left: -1px; }
.yc-table td.start::before { left: 4px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.yc-table td.end::before { right: 4px; border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
.yc-table td.on.now::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
/* row hover */
.yc-row:hover th, .yc-row:hover td { background-color: #F1F5EC; }
.yc-row.fruit:hover th, .yc-row.fruit:hover td { background-color: #FCF3E9; }
.yc-row:hover td.on::before { filter: brightness(1.08) saturate(1.1); }
.yc-row:hover .yc-ico { transform: scale(1.12) rotate(-8deg); }
.yc-row:hover td:last-child { border-radius: 0 14px 14px 0; }
.yc-table .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.yc .hw-eggs { margin-top: 18px; }
#season-visit { margin-bottom: 30px; }
@media (max-width: 600px) { .yc { padding: 24px 12px 18px; margin-top: 44px; border-radius: 22px; } .yc-legend { font-size: 12px; } }
.yc-table tbody th, .yc-months th:first-child, .yc-seasons td { position: sticky; left: 0; z-index: 1; background: #FDFCF8; }
.yc-table .yc-group th { position: static; }
@media (prefers-reduced-motion: reduce) { .yc-table td.on::before { transition: none; transform: none; } }

/* ---------- Services page ---------- */
.sv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.sv { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 32px 30px 30px; border-radius: 24px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .3s; }
.sv:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--sage-1); }
.sv-ic { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; background: var(--sage-6); font-size: 28px; transition: transform .4s cubic-bezier(.2, .7, .2, 1.4); }
.sv:hover .sv-ic { transform: rotate(-8deg) scale(1.1); }
.sv-n { position: absolute; top: 22px; right: 26px; font-family: var(--serif); font-size: 44px; font-weight: 700; line-height: 1; color: var(--linen-1); }
.sv h2 { font-size: clamp(22px, 2.2vw, 26px); color: var(--moss-800); margin-top: 22px; line-height: 1.2; }
.sv p { color: var(--muted); font-size: 15.5px; line-height: 1.65; margin: 10px 0 20px; flex: 1; }
.sv-link { font-weight: 600; color: var(--moss-700); border-bottom: 2px solid var(--gold); padding-bottom: 2px; transition: color .2s, padding .2s; }
.sv-link:hover { color: var(--moss-900); padding-right: 6px; }
.sv-feature { grid-column: span 2; background: var(--moss-800); border-color: var(--moss-800); color: var(--cream); padding: 40px 40px 36px; }
.sv-feature::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(218, 171, 132, .28), transparent 70%); }
.sv-feature .sv-ic { background: var(--gold); }
.sv-feature .sv-n { color: rgba(251, 249, 244, .12); }
.sv-feature h2 { color: var(--cream); font-size: clamp(26px, 3vw, 34px); }
.sv-feature p { color: var(--sage-3); font-size: 17px; max-width: 560px; }
.sv-feature .sv-link { color: var(--cream); }
.sv-wide { grid-column: span 2; background: var(--sage-5); border-color: var(--sage-4); }
.sv-wide .sv-ic { background: #fff; }
.sv-wide .sv-n { color: rgba(58, 81, 45, .12); }
.page-services #services { padding-top: 80px; }
#start-visit { margin-bottom: 30px; }
@media (max-width: 900px) { .sv-grid { grid-template-columns: 1fr 1fr; } .sv-feature, .sv-wide { grid-column: 1 / -1; } }
@media (max-width: 600px) { .sv-grid { grid-template-columns: 1fr; } .sv, .sv-feature { padding: 28px 24px; } .page-services #services { padding-top: 56px; } }

/* ---------- Delivery page ---------- */
.dl-route { display: flex; align-items: center; gap: 0; padding: 40px 30px; border-radius: 26px; background: linear-gradient(135deg, var(--sage-5), var(--linen-2)); }
.dl-stop { flex: none; width: 140px; text-align: center; }
.dl-stop span { width: 84px; height: 84px; margin: 0 auto 10px; display: grid; place-items: center; border-radius: 50%; background: #fff; font-size: 38px; box-shadow: var(--shadow); }
.dl-stop b { display: block; font-family: var(--serif); font-size: 19px; color: var(--moss-800); }
.dl-stop small { color: var(--muted); font-size: 13.5px; }
.dl-road { position: relative; flex: 1; height: 6px; margin-bottom: 44px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--camel) 0 12px, transparent 12px 22px); }
.dl-truck { position: absolute; top: -34px; left: 0; font-style: normal; font-size: 34px; animation: dlDrive 4.5s ease-in-out infinite; }
@keyframes dlDrive { 0% { left: -6%; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { left: 82%; opacity: 0; } }
.dl-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.dl-tiers > div { padding: 16px 18px; border-radius: 14px; background: var(--linen-3); border: 1px solid var(--line); }
.dl-tiers b { display: block; font-size: 14px; color: var(--muted); font-weight: 600; }
.dl-tiers span { display: block; margin-top: 2px; font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--moss-800); line-height: 1.2; }
.dl-tiers .free { background: var(--moss-700); border-color: var(--moss-700); }
.dl-tiers .free b { color: var(--sage-3); }
.dl-tiers .free span { color: var(--gold); font-size: 28px; }
.dl-check { background: var(--moss-800); border-color: var(--moss-800); }
.dl-check h2 { color: var(--cream) !important; }
.dl-check > p { color: var(--sage-3) !important; }
.dl-check .h-loc-ic { background: var(--gold); }
#complimentary .h-deliver-ic { font-size: 38px; }
#complimentary .h-deliver h2 { font-size: clamp(24px, 2.8vw, 32px); color: var(--moss-800); }
#delivery-questions { margin-bottom: 30px; }
@media (prefers-reduced-motion: reduce) { .dl-truck { animation: none; left: 40%; } }
@media (max-width: 600px) {
    .dl-route { padding: 30px 14px; }
    .dl-stop { width: 96px; }
    .dl-stop span { width: 64px; height: 64px; font-size: 28px; }
    .dl-stop b { font-size: 16px; }
    .dl-tiers { grid-template-columns: 1fr; }
}
.dl-truck { transform: scaleX(-1); }

/* ---------- Pricing page ---------- */
.tier h2 { font-size: 30px; color: var(--moss-800); margin-top: 16px; }
.tier.gold h2 { color: var(--cream); }
.pr-tiers { margin-top: 0; align-items: stretch; }
.pr-tiers .tier { display: flex; flex-direction: column; }
.pr-tiers .spec { margin-bottom: 26px; }
.pr-tiers .btn { margin-top: auto; }
.pr-tiers .spec dt { max-width: 60%; }
.pr-note { max-width: 1000px; margin: 30px auto 0; }
.pr-incl { list-style: none; margin: 44px auto 0; padding: 0; max-width: 1080px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pr-incl li { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 26px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); font-size: 16px; font-weight: 500; color: var(--moss-800); line-height: 1.55; transition: transform .25s, box-shadow .25s; }
.pr-incl li:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pr-incl li span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--sage-6); font-size: 25px; }
.pr-qty { max-width: 640px; margin: 28px auto 0; color: var(--muted); font-size: 16px; padding: 14px 20px; border-radius: 14px; background: var(--linen-3); }
.page-pricing #plans { padding-top: 80px; }
#which-package { margin-bottom: 30px; }
@media (max-width: 900px) { .pr-incl { grid-template-columns: 1fr; max-width: 560px; } .pr-incl li { flex-direction: row; align-items: center; } .pr-incl li span { flex: none; } }

/* ---------- Journal page ---------- */
.jr-sec { padding-top: 70px; }
.jr-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.jr-filter button { padding: 10px 20px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--moss-800); font: 600 14.5px var(--sans); cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.jr-filter button:hover { border-color: var(--moss-600); transform: translateY(-2px); }
.jr-filter button.on { background: var(--moss-700); border-color: var(--moss-700); color: var(--cream); }
.jr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.jr-post { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #fff; border: 1px solid var(--line); transition: transform .3s, box-shadow .3s; animation: fadeup .5s; }
.jr-post[hidden] { display: none; }
.jr-post:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.jr-img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sage-5); }
.jr-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.jr-post:hover .jr-img img { transform: scale(1.06); }
.jr-body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 22px 24px 26px; }
.jr-meta { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--muted); }
.jr-meta b { padding: 3px 10px; border-radius: 999px; background: var(--sage-6); color: var(--moss-700); font-weight: 600; }
.jr-body h2 { font-size: 21px; line-height: 1.3; color: var(--moss-800); margin-top: 12px; }
.jr-body h2 a:hover { color: var(--moss-600); }
.jr-body p { color: var(--muted); font-size: 15px; margin: 8px 0 16px; flex: 1; }
.jr-empty { text-align: center; color: var(--muted); padding: 30px 0; }
.page-journal #see-farm { margin-top: 90px; margin-bottom: 30px; }
.page-journal .jr-sec:not([hidden]) + #see-farm { margin-top: 0; }
@media (max-width: 900px) { .jr-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .jr-grid { grid-template-columns: 1fr; } .page-journal #see-farm { margin-top: 60px; } }

/* ---------- Our Story page ---------- */
.page-hero p.st-q { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.45; max-width: 680px; }
.st-pull { margin-top: 24px; padding: 18px 24px; border-left: 4px solid var(--gold); border-radius: 0 14px 14px 0; background: var(--linen-3); font-family: var(--serif); font-size: 21px; line-height: 1.45; color: var(--moss-800); }
.st-photo { aspect-ratio: 4 / 4.6; }
#why-membership .op-flow { margin-bottom: 0; }
.st-ahead-box { max-width: 860px; margin: 0 auto; text-align: center; padding: 56px 48px; border-radius: 28px; background: var(--moss-800); color: var(--cream); position: relative; overflow: hidden; }
.st-ahead-box::before { content: "“"; position: absolute; top: -30px; left: 30px; font-family: var(--serif); font-size: 220px; line-height: 1; color: rgba(218, 171, 132, .16); }
.st-ahead-box .kicker { color: var(--gold); }
.st-ahead-box .title { color: var(--cream); }
.st-ahead-box p { margin-top: 18px; font-size: 18px; line-height: 1.7; color: var(--sage-3); }
#ahead { padding-top: 0; }
#join-story { margin-bottom: 30px; }
@media (max-width: 900px) { .st-photo { aspect-ratio: 4 / 3; } }
@media (max-width: 600px) { .st-ahead-box { padding: 40px 24px; } .st-pull { font-size: 18px; } }

/* ---------- FAQ page ---------- */
.fq-sec { padding: 56px 0 0; }
.fq-sec:first-of-type { padding-top: 80px; }
.fq-wrap { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
.fq-head { position: sticky; top: 110px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.fq-head h2 { font-size: clamp(24px, 2.6vw, 30px); color: var(--moss-800); line-height: 1.2; }
.fq-list { display: grid; gap: 12px; }
.fq { border-radius: 18px; background: #fff; border: 1px solid var(--line); transition: border-color .25s, box-shadow .25s; }
.fq:hover { border-color: var(--sage-1); }
.fq[open] { border-color: var(--sage-1); box-shadow: var(--shadow); }
.fq summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; cursor: pointer; list-style: none; }
.fq summary::-webkit-details-marker { display: none; }
.fq summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 18px; }
.fq summary h3 { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--moss-800); line-height: 1.35; }
.fq summary i { position: relative; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--sage-6); transition: background .25s, transform .3s; }
.fq summary i::before, .fq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--moss-700); transition: transform .3s; }
.fq summary i::after { transform: rotate(90deg); }
.fq[open] summary i { background: var(--moss-700); transform: rotate(180deg); }
.fq[open] summary i::before, .fq[open] summary i::after { background: var(--cream); }
.fq[open] summary i::after { transform: rotate(0deg); }
.fq-a { padding: 0 24px 22px; color: var(--muted); font-size: 16px; line-height: 1.7; animation: fadeup .35s; }
.fq-a a { color: var(--moss-700); font-weight: 600; border-bottom: 2px solid var(--gold); white-space: nowrap; }
.fq-a .mb-note { margin-top: 14px; background: var(--linen-3); }
.fq-cta { text-align: center; margin-top: 56px; margin-bottom: 96px; }
@media (max-width: 900px) { .fq-wrap { grid-template-columns: 1fr; gap: 20px; } .fq-head { position: static; flex-direction: row; align-items: center; } }
@media (max-width: 600px) { .fq summary { padding: 16px 18px; } .fq summary h3 { font-size: 17px; } .fq-a { padding: 0 18px 18px; font-size: 15px; } .fq-cta { margin-bottom: 72px; } }

/* ---------- Speed: let the browser skip rendering sections that are off-screen ---------- */
main > section ~ section, main > div ~ section, .footer { content-visibility: auto; contain-intrinsic-size: auto 700px; }

/* Closed drawer: hide from screen readers and keyboard (shown again when opened) */
.mnav { visibility: hidden; transition: transform .5s cubic-bezier(.7, 0, .2, 1), visibility 0s .5s; }
.drawer-open .mnav { visibility: visible; transition: transform .5s cubic-bezier(.7, 0, .2, 1), visibility 0s; }
.footer .fh { font-family: var(--sans); line-height: 1.4; color: rgba(251, 249, 244, .72); }

/* Readable small gold-brown text (same hue as camel, darker for contrast) */
:root { --camel-text: #7A6545; }
.kicker, .tier .pos, .tier .amt small, .tier .amt em, .op-num, .pc-name small, .yc-table .yc-group th { color: var(--camel-text); }
.kicker::before { background: var(--camel); }
.tier.gold .pos, .tier.gold .amt small, .tier.gold .amt em { color: var(--gold); }
.footer { content-visibility: visible; }
/* Animal photos: use the same 4:3 photo shape as the other produce cards */
.pc-grid-meat .pc-img { aspect-ratio: 4 / 3; }
.pc-chicken, .pc-quail { object-position: 50% 35%; }
.pc-honey { object-position: 50% 60%; }
.footer-cta { margin-top: 22px; }

/* ---------- Top bar: scrolling marquee on mobile ---------- */
.tb-track { display: contents; }
.tb-dup { display: none; }

@media (max-width: 900px) {
    .topbar { overflow: hidden; font-size: 12px; letter-spacing: .02em; }
    .topbar .tb-track { padding-block: 7px; }
    .topbar .container { padding-block: 0; }
    .topbar .container { display: block; max-width: none; padding-inline: 0; }
    .topbar .tb-track { display: flex; width: max-content; animation: tbMarquee 24s linear infinite; }
    .topbar .tb-track > * { display: block; flex: none; white-space: nowrap; padding-right: 28px; }
    .topbar .tb-track > *::after { content: "\2726"; margin-left: 28px; font-size: 9px; vertical-align: 2px; color: var(--gold); opacity: .6; }
    .topbar:hover .tb-track, .topbar:active .tb-track { animation-play-state: paused; }
}

@keyframes tbMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
    .topbar .tb-track { animation: none; }
    .topbar .container { overflow-x: auto; }
}

/* ---------- Seasonal themes ----------
   The season is set on <html data-season="..."> by a small script in each page's <head>.
   Autumn uses the default palette above. Preview any season with ?season=winter (or spring, summer, monsoon). */
html[data-season="winter"] {
    --gold: #A9C4D6; --gold-dark: #86A7BF; --camel: #8C9BA7;
    --sage-1: #C3D5CF; --sage-2: #C9DAD4; --sage-3: #CFDED9; --sage-4: #D5E2DE; --sage-5: #DCE7E3; --sage-6: #E2ECE8;
    --linen-1: #E8EFEC; --linen-2: #EEF3F1; --linen-3: #F3F6F5; --cream: #F9FBFA; --line: #DDE5E2;
}
html[data-season="spring"] {
    --gold: #E9A9A1; --gold-dark: #D4877F; --camel: #B08A86;
    --sage-1: #C6DDB6; --sage-2: #CCE1BD; --sage-3: #D2E5C4; --sage-4: #D8E8CC; --sage-5: #DFECD5; --sage-6: #E6F0DE;
    --linen-1: #ECF2E4; --linen-2: #F1F5EA; --linen-3: #F6F8F0; --cream: #FCFAF6; --line: #E1E8D6;
}
html[data-season="summer"] {
    --gold: #F0B652; --gold-dark: #DA9C34; --camel: #B39556;
    --sage-1: #D6DCB2; --sage-2: #DBE0BA; --sage-3: #E0E4C1; --sage-4: #E4E7C9; --sage-5: #E9EBD2; --sage-6: #EEEFDB;
    --linen-1: #F1F1E1; --linen-2: #F5F4E8; --linen-3: #F8F7EF; --cream: #FDFBF3; --line: #E8E6D3;
}
html[data-season="monsoon"] {
    --gold: #8EC3B4; --gold-dark: #6FA897; --camel: #7E9A8E;
    --sage-1: #BFD8CB; --sage-2: #C6DCD1; --sage-3: #CCE0D6; --sage-4: #D3E4DC; --sage-5: #DAE9E2; --sage-6: #E1EDE7;
    --linen-1: #E7F0EB; --linen-2: #EDF4F0; --linen-3: #F3F7F5; --cream: #F8FBF9; --line: #DCE6E0;
}