/* ===========================================================================
   Vantage Organic Foods — site styles
   Layered on top of Bootstrap 5.3. Bootstrap supplies grid + utilities;
   everything visual below is bespoke to the approved design.
   =========================================================================== */

:root {
    /* Surfaces, darkest to lightest */
    --vf-ink:          #0E1913;  /* admin chrome; same value as --vf-tone-dark */
    --vf-forest:       #19392A;
    --vf-forest-2:     #1E4834;
    --vf-cream:        #F4F2EC;  /* header bar */
    --vf-cream-2:      #F2F1EB;
    --vf-cream-3:      #FAF9F3;
    --vf-paper:        #FBFCF7;  /* cards and panels, never a section */

    /* Section rhythm: exactly two light tones that alternate, so no two
       adjacent bands share a background, plus one dark tone shared by every
       dark band. Card-bearing sections take tone B, the deeper of the two
       lights, so paper cards keep their edge.

       Tone B is a warmer, deeper cream than the original #F2F1EB. That tint
       sat only 3% below tone A, which made the alternation invisible; the gap
       here (~7%) matches the step the reference site uses between its two
       light bands, so the rhythm actually reads. */
    --vf-tone-a:       #FAF9F3;
    --vf-tone-b:       #EDE7DC;

    /* The single dark. Hero, the verification band, the sample CTA and the
       footer all use this — no second near-black, no green accent band. */
    --vf-tone-dark:    #0E1913;
    --vf-line:         #DFDDD4;
    --vf-line-dark:    rgba(244, 242, 236, .14);

    /* Ink */
    --vf-text:         #10231A;
    --vf-muted:        #5C6660;
    --vf-muted-dark:   #A9B4AC;

    /* Accents */
    --vf-amber:        #B6742A;
    --vf-amber-soft:   #C98A3E;
    --vf-green:        #2E6A4C;

    /* Type */
    --vf-display: "Fraunces", "Playfair Display", "Iowan Old Style", "Apple Garamond",
                  Georgia, "Times New Roman", serif;
    --vf-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
    --vf-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular,
               "SF Mono", Menlo, Consolas, monospace;

    --vf-header-h: 76px;
    --vf-radius: 14px;
    --vf-radius-lg: 20px;
}

/* --- Base ---------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
    /* Keeps anchored sections clear of the sticky header. */
    scroll-padding-top: calc(var(--vf-header-h) + 12px);
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

body {
    background: var(--vf-tone-a);
    color: var(--vf-text);
    font-family: var(--vf-sans);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--vf-amber);
    color: #fff;
}

a { color: var(--vf-text); text-decoration-color: rgba(16, 35, 26, .3); text-underline-offset: 3px; }
a:hover { color: var(--vf-amber); }

img { max-width: 100%; height: auto; }

/* Focus ring that survives both light and dark sections. */
:focus-visible {
    outline: 2px solid var(--vf-amber);
    outline-offset: 3px;
    border-radius: 4px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--vf-ink);
    color: var(--vf-cream);
    padding: .75rem 1.25rem;
    border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: var(--vf-cream); }

/* --- Typography ---------------------------------------------------------- */

.display-serif {
    font-family: var(--vf-display);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.06;
    font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 40;
}

.display-serif em {
    font-style: italic;
    color: var(--vf-amber);
    font-variation-settings: "SOFT" 8, "WONK" 1;
}

.section-heading {
    font-family: var(--vf-display);
    font-weight: 400;
    font-size: clamp(2.1rem, 4.4vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.018em;
    margin: 0;
}

.section-heading em { font-style: italic; }

.hero-heading {
    font-family: var(--vf-display);
    font-weight: 400;
    font-size: clamp(2.7rem, 6.4vw, 5.5rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    margin: 0;
}

.eyebrow {
    font-family: var(--vf-mono);
    font-size: .72rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--vf-green);
    margin: 0 0 1.4rem;
    display: block;
    font-weight: 500;
}

.eyebrow--amber { color: var(--vf-amber-soft); }
.eyebrow--muted { color: var(--vf-muted-dark); }

.lead-text {
    font-size: 1.0625rem;
    line-height: 1.72;
    color: var(--vf-muted);
    max-width: 46ch;
}

.mono {
    font-family: var(--vf-mono);
    font-size: .78rem;
    letter-spacing: .1em;
}

.mono-caps {
    font-family: var(--vf-mono);
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

/* --- Section rhythm ------------------------------------------------------ */

.section {
    padding: clamp(4.5rem, 9vw, 8.5rem) 0;
    scroll-margin-top: var(--vf-header-h);
}

.section--tight { padding: clamp(3.5rem, 6vw, 5.5rem) 0; }

/* The only two light section backgrounds. Alternate them; never repeat one
   against itself. The sequence is set in app/Views/home/index.php. */
.section--tone-a { background: var(--vf-tone-a); }
.section--tone-b { background: var(--vf-tone-b); }

.section--dark {
    background: var(--vf-tone-dark);
    color: var(--vf-cream);
}
.section--dark .section-heading { color: #F7F6F0; }
.section--dark .lead-text { color: var(--vf-muted-dark); }
.section--dark a { color: var(--vf-cream); }

/* The inline padding floor is 1.5rem because Bootstrap's `g-5` rows pull
   themselves 24px wider on each side; anything smaller lets a row spill past
   the viewport and produce a stray horizontal scrollbar. */
.container-vf {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: clamp(1.5rem, 4vw, 3.25rem);
}

.rule { height: 1px; background: var(--vf-line); border: 0; opacity: 1; margin: 0; }
.rule--dark { background: var(--vf-line-dark); }

/* --- Buttons ------------------------------------------------------------- */

.btn-vf {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--vf-sans);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1;
    padding: 1rem 1.6rem;
    border-radius: 10px;
    border: 1px solid transparent;
    text-decoration: none;
    transition: background-color .18s ease, border-color .18s ease,
                color .18s ease, transform .18s ease;
    cursor: pointer;
}

.btn-vf:hover { transform: translateY(-1px); }
.btn-vf:active { transform: translateY(0); }

.btn-vf--amber {
    background: var(--vf-amber);
    color: #fff;
}
.btn-vf--amber:hover { background: #A0651F; color: #fff; }

.btn-vf--outline-light {
    border-color: rgba(244, 242, 236, .38);
    color: #F4F2EC;
    background: transparent;
}
.btn-vf--outline-light:hover {
    background: rgba(244, 242, 236, .1);
    border-color: rgba(244, 242, 236, .7);
    color: #fff;
}

.btn-vf--outline-dark {
    border-color: rgba(16, 35, 26, .22);
    color: var(--vf-text);
    background: transparent;
}
.btn-vf--outline-dark:hover {
    background: rgba(16, 35, 26, .05);
    border-color: rgba(16, 35, 26, .45);
    color: var(--vf-text);
}

.btn-vf--ghost {
    padding-inline: 0;
    background: none;
    color: var(--vf-text);
}
.btn-vf--ghost:hover { color: var(--vf-amber); }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 500;
    font-size: .95rem;
    text-decoration: none;
    color: var(--vf-text);
}
.link-arrow .arrow { transition: transform .2s ease; }
.link-arrow:hover .arrow { transform: translateX(4px); }

/* --- Header -------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(244, 242, 236, .94);
    backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.site-header.is-stuck {
    border-bottom-color: var(--vf-line);
    box-shadow: 0 1px 20px rgba(16, 35, 26, .06);
}

.site-header__inner {
    height: var(--vf-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.brand {
    font-family: var(--vf-display);
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    text-decoration: none;
    color: var(--vf-text);
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    flex-shrink: 0;
}
.brand:hover { color: var(--vf-text); }
.brand__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vf-amber);
    display: inline-block;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.4vw, 2.25rem);
}

.site-nav__link {
    font-size: .95rem;
    color: var(--vf-text);
    text-decoration: none;
    position: relative;
    padding: .35rem 0;
    white-space: nowrap;
}

.site-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 1px;
    background: var(--vf-amber);
    transition: right .22s ease;
}

.site-nav__link:hover,
.site-nav__link.is-active { color: var(--vf-amber); }
.site-nav__link:hover::after,
.site-nav__link.is-active::after { right: 0; }

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid rgba(16, 35, 26, .2);
    border-radius: 8px;
    padding: .55rem .7rem;
    line-height: 0;
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    width: 20px;
    height: 1.5px;
    background: var(--vf-text);
    margin: 4px 0;
    transition: transform .22s ease, opacity .22s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 991.98px) {
    .nav-toggle { display: block; }
    .site-header__cta { display: none; }

    .site-nav {
        position: fixed;
        inset: var(--vf-header-h) 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--vf-cream);
        border-bottom: 1px solid var(--vf-line);
        padding: .5rem clamp(1.25rem, 4vw, 3.25rem) 1.75rem;
        max-height: calc(100vh - var(--vf-header-h));
        overflow-y: auto;
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    .site-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
    .site-nav__link {
        padding: .95rem 0;
        border-bottom: 1px solid var(--vf-line);
        font-size: 1.05rem;
    }
    .site-nav__link::after { display: none; }
    .site-nav .btn-vf { margin-top: 1.25rem; justify-content: center; }
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
    position: relative;
    background: var(--vf-tone-dark);
    color: var(--vf-cream);
    overflow: hidden;
    isolation: isolate;
    min-height: min(88vh, 900px);
    display: flex;
    align-items: center;
    padding: clamp(4rem, 8vw, 7rem) 0;
    scroll-margin-top: var(--vf-header-h);
}

.hero__media {
    position: absolute;
    inset: 0 0 0 auto;
    width: 62%;
    z-index: -2;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}

/* Fades the photograph into the dark panel the headline sits on. The rgba
   stops are --vf-tone-dark (#0E1913) so the fade lands on exactly the same
   colour as every other dark band. */
.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg,
            var(--vf-tone-dark) 0%,
            var(--vf-tone-dark) 30%,
            rgba(14, 25, 19, .92) 40%,
            rgba(14, 25, 19, .55) 50%,
            rgba(14, 25, 19, .12) 62%,
            rgba(14, 25, 19, 0) 74%),
        linear-gradient(to bottom, rgba(14, 25, 19, .5) 0%, rgba(14, 25, 19, 0) 30%);
}

.hero__content { max-width: 780px; }

.hero__lead {
    font-size: clamp(1rem, 1.35vw, 1.125rem);
    line-height: 1.72;
    color: #D6DBD4;
    max-width: 52ch;
    margin: 2.25rem 0 0;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .875rem;
    margin-top: 2.5rem;
}

.hero__certs {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: 1.5rem;
    border-top: 1px solid rgba(244, 242, 236, .18);
    max-width: 640px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

.hero__certs-label { color: #8D978F; }
.hero__certs-list {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .55rem;
    color: #D6DBD4;
    list-style: none;
    margin: 0;
    padding: 0;
}
.hero__certs-list li + li::before { content: "·"; margin-right: .55rem; opacity: .55; }

@media (max-width: 991.98px) {
    .hero { min-height: 0; }
    .hero__media { inset: 0; width: 100%; }
    .hero__scrim {
        background:
            linear-gradient(180deg, rgba(14, 25, 19, .93) 0%, rgba(14, 25, 19, .82) 45%, rgba(14, 25, 19, .9) 100%);
    }
}

/* --- Specimen certificate card ------------------------------------------- */

.coa-card {
    background: var(--vf-paper);
    border-radius: var(--vf-radius-lg);
    overflow: hidden;
    box-shadow: 0 24px 60px -28px rgba(16, 35, 26, .3), 0 2px 8px rgba(16, 35, 26, .05);
    border: 1px solid rgba(16, 35, 26, .07);
}

.coa-card__head {
    background: var(--vf-forest);
    color: #EFF2EC;
    padding: 1.75rem 1.85rem 1.6rem;
}

.coa-card__meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: #9DB0A4;
    flex-wrap: wrap;
}

.coa-card__title {
    font-family: var(--vf-display);
    font-style: italic;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    margin: 1rem 0 .35rem;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.coa-card__sub {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    color: #9DB0A4;
}
.coa-card__sub .origin { font-family: var(--vf-sans); font-size: .85rem; letter-spacing: 0; }

.coa-card__trace {
    padding: 1.25rem 1.85rem 1rem;
    border-bottom: 1px solid var(--vf-line);
}
.coa-card__trace-head {
    display: flex;
    justify-content: space-between;
    color: var(--vf-muted);
    margin-bottom: .5rem;
}
.coa-card__trace svg { width: 100%; height: 92px; display: block; }

.coa-card__rows { list-style: none; margin: 0; padding: 0; }

.coa-card__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.25rem;
    padding: .85rem 1.85rem;
    border-bottom: 1px solid var(--vf-line);
}
.coa-card__row dt {
    font-family: var(--vf-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--vf-muted);
    font-weight: 400;
    margin: 0;
}
.coa-card__row dd {
    margin: 0;
    text-align: right;
    font-size: .93rem;
    color: var(--vf-text);
}

.coa-card__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.85rem;
    background: rgba(16, 35, 26, .02);
}

.verified-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--vf-amber);
    font-family: var(--vf-mono);
    font-size: .78rem;
}
.verified-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vf-amber);
}

/* --- Stats --------------------------------------------------------------- */

.stat__value {
    font-family: var(--vf-display);
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--vf-text);
    margin: 0 0 .75rem;
}

.stat__label {
    font-family: var(--vf-mono);
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--vf-muted);
    margin: 0;
}

.stats__note {
    font-family: var(--vf-display);
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--vf-muted);
    max-width: 58ch;
    margin: clamp(2.5rem, 5vw, 4rem) 0 0;
}

/* --- Cards --------------------------------------------------------------- */

.vf-card {
    background: var(--vf-paper);
    border: 1px solid rgba(16, 35, 26, .09);
    border-radius: var(--vf-radius);
    padding: 1.9rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.vf-card:hover {
    transform: translateY(-3px);
    border-color: rgba(16, 35, 26, .16);
    box-shadow: 0 18px 40px -26px rgba(16, 35, 26, .38);
}

.vf-card__num {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--vf-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    color: var(--vf-muted);
    margin-bottom: 1.5rem;
}

.vf-card__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vf-amber);
}

.vf-card__title {
    font-family: var(--vf-display);
    font-size: 1.45rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 .9rem;
}
.vf-card__title em { font-style: italic; }

.vf-card__body {
    color: var(--vf-muted);
    font-size: .95rem;
    line-height: 1.68;
    margin: 0;
}

/* --- Product cards ------------------------------------------------------- */

.product-card {
    background: var(--vf-paper);
    border: 1px solid rgba(16, 35, 26, .09);
    border-radius: var(--vf-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .22s ease, box-shadow .22s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 46px -26px rgba(16, 35, 26, .42);
}

.product-card__media {
    position: relative;
    background: linear-gradient(135deg, #16321F 0%, #0F2417 55%, #0C1C12 100%);
    aspect-ratio: 16 / 10;
    padding: 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #C9D3CA;
    overflow: hidden;
}

.product-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .85;
}

.product-card__wave {
    position: absolute;
    inset: auto 0 0 0;
    width: 100%;
    height: 62%;
    opacity: .5;
    pointer-events: none;
}

.product-card__topline {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 1;
}

.product-card__ring {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(201, 138, 62, .65);
}

.product-card__tags {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tag-pill {
    font-family: var(--vf-mono);
    font-size: .68rem;
    letter-spacing: .06em;
    padding: .3rem .65rem;
    border: 1px solid rgba(244, 242, 236, .32);
    border-radius: 999px;
    color: #DDE3DB;
    white-space: nowrap;
}

.product-card__body {
    padding: 1.6rem 1.65rem 1.8rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.product-card__title {
    font-family: var(--vf-display);
    font-size: 1.6rem;
    letter-spacing: -0.012em;
    margin: 0 0 .8rem;
}

.product-card__excerpt {
    color: var(--vf-muted);
    font-size: .95rem;
    line-height: 1.68;
    margin: 0 0 1.6rem;
}

.product-card__body .link-arrow { margin-top: auto; }

/* --- Verification steps grid --------------------------------------------- */

.steps-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--vf-line-dark);
    border-radius: var(--vf-radius);
    overflow: hidden;
    margin-top: clamp(2.5rem, 5vw, 4rem);
}

.step {
    padding: clamp(1.75rem, 3vw, 2.5rem);
    border-right: 1px solid var(--vf-line-dark);
    border-bottom: 1px solid var(--vf-line-dark);
    display: flex;
    gap: 1.1rem;
}

.step:nth-child(2n) { border-right: 0; }
.steps-grid .step:nth-last-child(-n+2):nth-child(2n+1),
.steps-grid .step:last-child { border-bottom: 0; }

.step__num {
    font-family: var(--vf-mono);
    font-size: .78rem;
    color: var(--vf-amber-soft);
    padding-top: .45rem;
    flex-shrink: 0;
}

.step__title {
    font-family: var(--vf-display);
    font-size: 1.3rem;
    line-height: 1.25;
    color: #F4F2EC;
    margin: 0 0 .7rem;
    letter-spacing: -0.01em;
}

.step__body {
    color: var(--vf-muted-dark);
    font-size: .95rem;
    line-height: 1.68;
    margin: 0;
    max-width: 52ch;
}

@media (max-width: 767.98px) {
    .steps-grid { grid-template-columns: 1fr; }
    .step { border-right: 0; }
    .step:last-child { border-bottom: 0; }
}

/* --- Industry cards ------------------------------------------------------ */

.industry-card { padding: 1.75rem 1.6rem; }

.industry-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.75rem;
}

.industry-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(46, 106, 76, .09);
    border: 1px solid rgba(46, 106, 76, .16);
    display: grid;
    place-items: center;
    color: var(--vf-green);
}
.industry-card__icon svg { width: 20px; height: 20px; }

.industry-card__title {
    font-family: var(--vf-display);
    font-size: 1.35rem;
    margin: 0 0 .7rem;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* --- Story --------------------------------------------------------------- */

.story__body p {
    color: var(--vf-muted);
    font-size: 1.0125rem;
    line-height: 1.75;
}
.story__body p + p { margin-top: 1.5rem; }

.story-card {
    background: var(--vf-forest);
    color: #E7ECE5;
    border-radius: var(--vf-radius-lg);
    padding: clamp(2rem, 3.4vw, 3rem);
}

.story-card__heading {
    font-family: var(--vf-display);
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    line-height: 1.12;
    letter-spacing: -0.018em;
    margin: 1rem 0 1.75rem;
    color: #F4F2EC;
}
.story-card__heading em { font-style: italic; color: #F4F2EC; }

.story-card p {
    color: #C6D1C7;
    font-size: .98rem;
    line-height: 1.72;
    margin: 0;
}
.story-card p + p { margin-top: 1.35rem; }

.story-card__foot {
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(244, 242, 236, .16);
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #9DB0A4;
}
.story-card__foot::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--vf-amber);
    flex-shrink: 0;
}

/* --- Sample CTA band ----------------------------------------------------- */

.cta-band {
    position: relative;
    background: var(--vf-tone-dark);
    color: #F4F2EC;
    padding: clamp(5rem, 9vw, 8rem) 0 clamp(6rem, 10vw, 9rem);
    overflow: hidden;
    scroll-margin-top: var(--vf-header-h);
}

.cta-band__wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(1.5rem, 4vw, 3.5rem);
    width: 100%;
    height: 80px;
    pointer-events: none;
}

.cta-band .section-heading { color: #F7F6F0; max-width: 20ch; }

/* --- Enquiry form -------------------------------------------------------- */

.enquiry-panel {
    background: var(--vf-paper);
    border: 1px solid rgba(16, 35, 26, .09);
    border-radius: var(--vf-radius-lg);
    padding: clamp(1.75rem, 3.5vw, 3rem);
    box-shadow: 0 24px 60px -34px rgba(16, 35, 26, .28);
}

.form-label-vf {
    font-family: var(--vf-mono);
    font-size: .68rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--vf-muted);
    margin-bottom: .5rem;
    display: block;
}
.form-label-vf .req { color: var(--vf-amber); }

.form-control-vf {
    width: 100%;
    background: #fff;
    border: 1px solid var(--vf-line);
    border-radius: 9px;
    padding: .8rem 1rem;
    font-size: .95rem;
    font-family: var(--vf-sans);
    color: var(--vf-text);
    transition: border-color .18s ease, box-shadow .18s ease;
}

.form-control-vf::placeholder { color: #A6ADA6; }

.form-control-vf:focus {
    outline: none;
    border-color: var(--vf-green);
    box-shadow: 0 0 0 3px rgba(46, 106, 76, .12);
}

.form-control-vf.is-invalid {
    border-color: #B4432F;
    box-shadow: 0 0 0 3px rgba(180, 67, 47, .1);
}

select.form-control-vf {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%235C6660'%3E%3Cpath d='M4.5 6.5 8 10l3.5-3.5'  stroke='%235C6660' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
    background-size: 16px;
    padding-right: 2.4rem;
}

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

.field-error {
    display: block;
    color: #B4432F;
    font-size: .82rem;
    margin-top: .4rem;
}

.form-consent {
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    font-size: .88rem;
    color: var(--vf-muted);
    line-height: 1.6;
}
.form-consent input {
    margin-top: .28rem;
    width: 16px;
    height: 16px;
    accent-color: var(--vf-green);
    flex-shrink: 0;
}

/* Honeypot — off-screen but not display:none, so bots still fill it. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.alert-vf {
    border-radius: 10px;
    padding: .95rem 1.15rem;
    font-size: .92rem;
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
}
.alert-vf--error   { background: #FBEDEA; border-color: #E8C4BB; color: #8C3421; }
.alert-vf--success { background: #EAF3ED; border-color: #BCD8C6; color: #1F5238; }

/* --- FAQ accordion ------------------------------------------------------- */

.faq-list { border-top: 1px solid var(--vf-line); }

.faq-item { border-bottom: 1px solid var(--vf-line); }

.faq-item__trigger {
    width: 100%;
    background: none;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.6rem 0;
    text-align: left;
    cursor: pointer;
    font-family: var(--vf-display);
    font-size: clamp(1.1rem, 1.7vw, 1.35rem);
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--vf-text);
}
.faq-item__trigger:hover { color: var(--vf-amber); }

.faq-item__icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--vf-line);
    display: grid;
    place-items: center;
    color: var(--vf-muted);
    transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
    font-size: 1rem;
    line-height: 1;
}
.faq-item__trigger[aria-expanded="true"] .faq-item__icon {
    transform: rotate(45deg);
    border-color: var(--vf-amber);
    color: var(--vf-amber);
}

.faq-item__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s ease;
}
.faq-item__panel > div { overflow: hidden; }
.faq-item__panel.is-open { grid-template-rows: 1fr; }

.faq-item__answer {
    color: var(--vf-muted);
    font-size: .98rem;
    line-height: 1.72;
    max-width: 62ch;
    margin: 0;
    padding-bottom: 1.6rem;
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
    background: var(--vf-tone-dark);
    color: #C6D1C7;
    padding: clamp(3.5rem, 7vw, 6rem) 0 2.25rem;
}

.site-footer .brand { color: #F4F2EC; }
.site-footer .brand:hover { color: #F4F2EC; }

.site-footer__tagline {
    color: #97A29A;
    font-size: .92rem;
    line-height: 1.7;
    margin: 1.25rem 0 1.75rem;
    max-width: 34ch;
}

.footer-heading {
    font-family: var(--vf-mono);
    font-size: .68rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #7C877F;
    margin: 0 0 1.4rem;
}

.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li + li { margin-top: .85rem; }
.footer-links a {
    color: #C6D1C7;
    text-decoration: none;
    font-size: .95rem;
    transition: color .18s ease;
}
.footer-links a:hover { color: var(--vf-amber-soft); }

.cert-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.cert-pills li {
    font-family: var(--vf-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    border: 1px solid rgba(244, 242, 236, .2);
    border-radius: 999px;
    padding: .35rem .75rem;
    color: #B4BFB6;
}

.site-footer__bottom {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    padding-top: 1.75rem;
    border-top: 1px solid rgba(244, 242, 236, .13);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .75rem;
    color: #7C877F;
}

/* --- Reveal on scroll ---------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; }
}

/* --- Product landing pages ----------------------------------------------- */

.breadcrumb-bar {
    background: var(--vf-tone-a);
    border-bottom: 1px solid var(--vf-line);
    padding: .9rem 0;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--vf-muted);
}
.breadcrumb-list li + li::before {
    content: "/";
    margin-right: .5rem;
    opacity: .5;
}
.breadcrumb-list a { color: var(--vf-muted); text-decoration: none; }
.breadcrumb-list a:hover { color: var(--vf-amber); }
.breadcrumb-list [aria-current] { color: var(--vf-text); }

.product-hero { scroll-margin-top: var(--vf-header-h); }
.product-hero .section-heading { max-width: 16ch; }

.product-hero__image {
    width: 100%;
    border-radius: var(--vf-radius-lg);
    border: 1px solid rgba(244, 242, 236, .12);
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

/* Stand-in mark when a product has no photograph yet. */
.product-hero__mark {
    position: relative;
    border-radius: var(--vf-radius-lg);
    border: 1px solid rgba(244, 242, 236, .14);
    background: linear-gradient(150deg, #16321F 0%, #0F2417 55%, #0C1C12 100%);
    aspect-ratio: 4 / 5;
    padding: 1.5rem;
    overflow: hidden;
    display: block;
    color: #9DB0A4;
}
.product-hero__mark svg {
    position: absolute;
    inset: auto 0 12% 0;
    width: 100%;
    height: 45%;
}
.product-hero__ring {
    position: absolute;
    right: 1.5rem;
    top: 1.35rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(201, 138, 62, .6);
}

.prose-lg p {
    font-size: 1.0625rem;
    line-height: 1.78;
    color: var(--vf-muted);
    margin: 0;
    max-width: 62ch;
}
.prose-lg p + p { margin-top: 1.35rem; }

.explainer-card {
    background: var(--vf-forest);
    color: #C6D1C7;
    border-radius: var(--vf-radius-lg);
    padding: clamp(1.6rem, 3vw, 2.25rem);
}
.explainer-card__title {
    font-family: var(--vf-display);
    font-size: 1.4rem;
    line-height: 1.2;
    letter-spacing: -0.012em;
    color: #F4F2EC;
    margin: 0 0 1.1rem;
}
.explainer-card p {
    font-size: .95rem;
    line-height: 1.72;
    margin: 0;
    color: #C6D1C7;
}
.explainer-card p + p { margin-top: 1rem; }

/* Hairlines come from each item's own 1px ring rather than a coloured grid
   background, so a part-filled last row leaves no empty tinted cell. */
.catalogue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1px;
    list-style: none;
    margin: clamp(2.25rem, 4vw, 3.25rem) 0 0;
    padding: 1px;
}

.catalogue-item {
    background: var(--vf-paper);
    box-shadow: 0 0 0 1px var(--vf-line);
    padding: 1.4rem 1.5rem;
    transition: background-color .18s ease;
}
.catalogue-item:hover { background: #fff; }

.catalogue-item__name {
    font-family: var(--vf-display);
    font-size: 1.2rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 .35rem;
}
.catalogue-item__botanical {
    font-size: .88rem;
    color: var(--vf-muted);
    margin: 0;
}
.catalogue-item__note {
    font-size: .85rem;
    color: var(--vf-muted);
    margin: .5rem 0 0;
}

.application-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--vf-line);
}
.application-list li {
    display: flex;
    align-items: baseline;
    gap: .85rem;
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--vf-line);
    font-size: 1.0125rem;
    color: var(--vf-text);
}
.application-list li::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--vf-amber);
    transform: translateY(-2px);
}

/* --- Standalone page shells (thank-you, verified, 404) ------------------- */

.notice-page {
    min-height: 68vh;
    display: flex;
    align-items: center;
    padding: clamp(4rem, 8vw, 7rem) 0;
}

.notice-card {
    max-width: 640px;
    background: var(--vf-paper);
    border: 1px solid rgba(16, 35, 26, .09);
    border-radius: var(--vf-radius-lg);
    padding: clamp(2rem, 4vw, 3.25rem);
    box-shadow: 0 24px 60px -34px rgba(16, 35, 26, .26);
}

.notice-card__icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(46, 106, 76, .1);
    color: var(--vf-green);
    margin-bottom: 1.75rem;
}
.notice-card__icon--amber { background: rgba(182, 116, 42, .12); color: var(--vf-amber); }

.ref-chip {
    display: inline-block;
    font-family: var(--vf-mono);
    font-size: .85rem;
    letter-spacing: .1em;
    background: rgba(16, 35, 26, .05);
    border: 1px solid var(--vf-line);
    border-radius: 8px;
    padding: .45rem .8rem;
}

/* ===========================================================================
   Journal — listing, cards, article
   =========================================================================== */

.blog-hero .section-heading,
.article-hero .section-heading { max-width: 20ch; }
.article-hero .section-heading { max-width: 24ch; }

.article-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    align-items: center;
    color: #8D978F;
    margin: 2rem 0 0;
}

/* --- Category filter bar -------------------------------------------------- */

.category-bar {
    background: var(--vf-tone-a);
    border-bottom: 1px solid var(--vf-line);
    padding: 1rem 0;
    position: sticky;
    top: var(--vf-header-h);
    z-index: 20;
}

.category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.category-chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--vf-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .5rem .9rem;
    border: 1px solid var(--vf-line);
    border-radius: 999px;
    background: var(--vf-paper);
    color: var(--vf-muted);
    text-decoration: none;
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
    white-space: nowrap;
}
.category-chip:hover {
    border-color: rgba(16, 35, 26, .35);
    color: var(--vf-text);
}
.category-chip.is-active {
    background: var(--vf-tone-dark);
    border-color: var(--vf-tone-dark);
    color: #F4F2EC;
}
.category-chip__count { opacity: .6; font-size: .68rem; }

/* --- Featured article ----------------------------------------------------- */

.featured-post {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(1.5rem, 4vw, 3.25rem);
    align-items: center;
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.featured-post__media {
    display: block;
    border-radius: var(--vf-radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--vf-tone-dark);
    border: 1px solid rgba(16, 35, 26, .08);
}
.featured-post__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.featured-post:hover .featured-post__media img { transform: scale(1.03); }

.featured-post__title {
    font-family: var(--vf-display);
    font-size: clamp(1.8rem, 3.4vw, 2.85rem);
    line-height: 1.1;
    letter-spacing: -0.018em;
    margin: .9rem 0 1.1rem;
}
.featured-post__title a { text-decoration: none; color: var(--vf-text); }
.featured-post__title a:hover { color: var(--vf-amber); }

.featured-post__excerpt {
    color: var(--vf-muted);
    font-size: 1.0125rem;
    line-height: 1.72;
    margin: 0 0 1.6rem;
    max-width: 52ch;
}

@media (max-width: 767.98px) {
    .featured-post { grid-template-columns: 1fr; }
}

/* --- Post cards ----------------------------------------------------------- */

.post-card {
    background: var(--vf-paper);
    border: 1px solid rgba(16, 35, 26, .09);
    border-radius: var(--vf-radius);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .22s ease, box-shadow .22s ease;
}
.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 46px -26px rgba(16, 35, 26, .42);
}

.post-card__media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--vf-tone-dark);
}
.post-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.2, .7, .3, 1);
}
.post-card:hover .post-card__media img { transform: scale(1.04); }

.post-card__body {
    padding: 1.35rem 1.45rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.post-card__title {
    font-family: var(--vf-display);
    font-size: 1.28rem;
    line-height: 1.24;
    letter-spacing: -0.012em;
    margin: .6rem 0 .7rem;
}
.post-card--compact .post-card__title { font-size: 1.12rem; }
.post-card__title a { text-decoration: none; color: var(--vf-text); }
.post-card__title a:hover { color: var(--vf-amber); }

.post-card__excerpt {
    color: var(--vf-muted);
    font-size: .93rem;
    line-height: 1.66;
    margin: 0 0 1.1rem;
}

.post-card__foot { color: var(--vf-muted); margin-top: auto; }

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
    color: var(--vf-muted);
    margin: 0;
}
.post-meta a { color: var(--vf-green); text-decoration: none; }
.post-meta a:hover { color: var(--vf-amber); }

/* Stand-in artwork when a post has no featured image. */
.post-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(120% 120% at 30% 0%, #1B3B29 0%, #12271B 55%, #0E1913 100%);
}
.post-placeholder__mark {
    font-family: var(--vf-display);
    font-size: 2.4rem;
    color: rgba(201, 138, 62, .5);
}

/* --- Pagination ----------------------------------------------------------- */

.pagination-journal {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: 2rem;
    border-top: 1px solid var(--vf-line);
}
.pagination-journal__pages {
    display: flex;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pagination-journal__pages a,
.pagination-journal__pages span {
    min-width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    font-family: var(--vf-mono);
    font-size: .82rem;
    text-decoration: none;
    color: var(--vf-text);
    border: 1px solid transparent;
}
.pagination-journal__pages a:hover { background: rgba(16, 35, 26, .05); }
.pagination-journal__pages .is-current {
    background: var(--vf-tone-dark);
    color: #F4F2EC;
}

.empty-journal { padding: clamp(2rem, 5vw, 4rem) 0; max-width: 52ch; }

/* --- Article -------------------------------------------------------------- */

.article-figure {
    margin: 0;
    padding: 0;
    background: linear-gradient(to bottom, var(--vf-tone-dark) 0%, var(--vf-tone-dark) 50%, var(--vf-tone-a) 50%, var(--vf-tone-a) 100%);
}
.article-figure img {
    width: 100%;
    max-height: 560px;
    object-fit: cover;
    border-radius: var(--vf-radius-lg);
    display: block;
}

.article-body-band { padding-top: clamp(3rem, 6vw, 5rem); }

.article-prose {
    font-size: 1.075rem;
    line-height: 1.78;
    color: #26332C;
    max-width: 68ch;
}
.article-prose > *:first-child { margin-top: 0; }
.article-prose p { margin: 0 0 1.5rem; }

.article-prose h2 {
    font-family: var(--vf-display);
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    line-height: 1.18;
    letter-spacing: -0.015em;
    color: var(--vf-text);
    margin: 3rem 0 1.1rem;
}
.article-prose h3 {
    font-family: var(--vf-display);
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    line-height: 1.25;
    color: var(--vf-text);
    margin: 2.25rem 0 .9rem;
}

.article-prose ul,
.article-prose ol { margin: 0 0 1.5rem; padding-left: 1.35rem; }
.article-prose li { margin-bottom: .6rem; }
.article-prose li::marker { color: var(--vf-amber); }

.article-prose blockquote {
    margin: 2rem 0;
    padding: .35rem 0 .35rem 1.5rem;
    border-left: 2px solid var(--vf-amber);
}
.article-prose blockquote p {
    font-family: var(--vf-display);
    font-style: italic;
    font-size: 1.25rem;
    line-height: 1.5;
    color: var(--vf-text);
    margin: 0;
}

.article-prose hr {
    border: 0;
    border-top: 1px solid var(--vf-line);
    margin: 2.75rem 0;
    opacity: 1;
}

.article-prose a { color: var(--vf-green); text-underline-offset: 3px; }
.article-prose a:hover { color: var(--vf-amber); }
.article-prose strong { font-weight: 600; color: var(--vf-text); }

.article-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.5rem;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-top: 1.75rem;
    border-top: 1px solid var(--vf-line);
}

.article-aside {
    position: sticky;
    top: calc(var(--vf-header-h) + 1.5rem);
}
.article-aside__label { color: var(--vf-muted); margin: 0 0 1rem; }
.article-aside__list { list-style: none; margin: 0 0 2rem; padding: 0; border-top: 1px solid var(--vf-line); }
.article-aside__list li { border-bottom: 1px solid var(--vf-line); }
.article-aside__list a {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 0;
    text-decoration: none;
    color: var(--vf-text);
    font-size: .93rem;
}
.article-aside__list a:hover { color: var(--vf-amber); }
.article-aside__list span { color: var(--vf-muted); font-family: var(--vf-mono); font-size: .75rem; }

.article-aside__cta {
    background: var(--vf-paper);
    border: 1px solid rgba(16, 35, 26, .09);
    border-radius: var(--vf-radius);
    padding: 1.35rem;
    font-size: .93rem;
    color: var(--vf-muted);
}

@media (max-width: 991.98px) {
    .article-aside { position: static; }
    .category-bar { position: static; }
}