/* =====================================================================
   FreskiFarm — main stylesheet (Section 5). Mobile first: base styles are
   for phones, @media (min-width: …) rules add the desktop layout.
   ===================================================================== */

/* ---- Fonts (self-hosted, Section 5.2) ------------------------------- */
/* font-display: optional = the web font is used if it arrives within ~100 ms
   (both are preloaded in the layout, so it usually does); otherwise this page
   view keeps the fallback below and never swaps mid-read, so the layout never
   jumps (Lighthouse CLS). The next page uses the cached font.            */
@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope-latin-wght.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: optional;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: optional;
}
/* Metric-matched fallbacks: when the web fonts are not ready in time, text is
   drawn in Arial resized to take about the same space, so the page looks
   close to the design.
   Values measured in the browser against the real fonts (Phase 2).
   Manrope is only used bold (700/800), so it maps to Arial Bold.        */
@font-face {
    font-family: "Manrope Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT");
    font-weight: 100 900;
    size-adjust: 100.2%;
    ascent-override: 106.8%;
    descent-override: 30%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("ArialMT");
    font-weight: 100 500;
    size-adjust: 106.14%;
    ascent-override: 91.39%;
    descent-override: 22.61%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "Inter Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT");
    font-weight: 600 900;
    size-adjust: 101.4%;
    ascent-override: 95.6%;
    descent-override: 23.7%;
    line-gap-override: 0%;
}

/* ---- Design tokens (Section 5.1) -------------------------------------
   Forest, Fresh and Yellow are sampled from docs/logo.jpeg (the guide's
   starting hex values are in the comments). Replace with the exact values
   from the vector logo when it arrives ([LOGO]).
   Contrast ratios are checked on /styleguide.                          */
:root {
    --color-forest:       #15480E;  /* guide start #1F4D2B — logo wordmark */
    --color-forest-deep:  #0E3309;
    --color-leaf:         #1D6816;  /* logo dark leaf: text links + icons on light bg */
    --color-fresh:        #92AF07;  /* guide start #6BA539 — logo light leaf: fills only */
    --color-fresh-tint:   #EEF3D6;
    --color-yellow:      #D2B60C;  /* guide start #F2C230 — logo "F" */
    --color-yellow-light: #E5CA2E;
    --color-chilli:       #B3261E;  /* ONLY chilli section + chilli CTAs */
    --color-chilli-deep:  #8E1D17;
    --color-bg:           #FAF8F4;
    --color-surface:      #FFFFFF;
    --color-fresh-wash:   #F5F8EA;  /* very light green card (For Buyers: Fresh Vegetables) */
    --color-ink:          #1C2520;
    --color-muted:        #4A5650;
    --color-line:         #E4E0D6;
    --color-field:        #8C877A;  /* form field borders, 3.4:1 */
    --color-error:        #9C2A6B;  /* not Chilli Red, which is reserved for chilli */

    --font-heading: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body:    "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;

    --text-sm:   0.9375rem;                              /* 15px */
    --text-base: 1.0625rem;                              /* 17px */
    --text-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.3125rem);
    --text-h4:   1.125rem;
    --text-h3:   clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-h2:   clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem);
    --text-h1:   clamp(2.125rem, 1.5rem + 3vw, 3.5rem);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-section: clamp(3rem, 2rem + 5vw, 6rem);

    --radius-sm: 8px;
    --radius:    12px;
    --shadow-sm: 0 1px 2px rgb(28 37 32 / 0.06), 0 1px 3px rgb(28 37 32 / 0.08);
    --shadow:    0 4px 12px rgb(28 37 32 / 0.08), 0 2px 4px rgb(28 37 32 / 0.06);
    --shadow-lg: 0 12px 32px rgb(28 37 32 / 0.12);

    --container: 72rem;
    --gutter:    1rem;
    --tap:       44px;   /* minimum tap target (Section 15) */
    --focus:     var(--color-forest);
}

/* ---- Reset & base --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

/* Focal point (owner, 2026-10-18): where a frame crops a photo (object-fit: cover), the part the
   editor tapped stays in view. focus_class() in media.php gives 'focus-x-30 focus-y-70';
   no class = the centre. Steps of 10 %. */
img { object-position: var(--focus-x, 50%) var(--focus-y, 50%); }
.focus-x-0 { --focus-x: 0%; }    .focus-y-0 { --focus-y: 0%; }
.focus-x-10 { --focus-x: 10%; }  .focus-y-10 { --focus-y: 10%; }
.focus-x-20 { --focus-x: 20%; }  .focus-y-20 { --focus-y: 20%; }
.focus-x-30 { --focus-x: 30%; }  .focus-y-30 { --focus-y: 30%; }
.focus-x-40 { --focus-x: 40%; }  .focus-y-40 { --focus-y: 40%; }
.focus-x-50 { --focus-x: 50%; }  .focus-y-50 { --focus-y: 50%; }
.focus-x-60 { --focus-x: 60%; }  .focus-y-60 { --focus-y: 60%; }
.focus-x-70 { --focus-x: 70%; }  .focus-y-70 { --focus-y: 70%; }
.focus-x-80 { --focus-x: 80%; }  .focus-y-80 { --focus-y: 80%; }
.focus-x-90 { --focus-x: 90%; }  .focus-y-90 { --focus-y: 90%; }
.focus-x-100 { --focus-x: 100%; } .focus-y-100 { --focus-y: 100%; }

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--font-heading);
    color: var(--color-forest);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
h1 { font-size: var(--text-h1); font-weight: 800; }
h2 { font-size: var(--text-h2); font-weight: 800; }
h3 { font-size: var(--text-h3); font-weight: 700; }
h4 { font-size: var(--text-h4); font-weight: 700; }

p { margin: 0; }

a { color: var(--color-leaf); text-underline-offset: 0.15em; }
/* Hover effects only for a real mouse, everywhere in this file: phones treat the last
   tapped link as "hovered" and keep it that way when you come back to a page.
   Hover never underlines (owner, 2026-10-11): links inside sentences are underlined all
   the time instead (WCAG 1.4.1), cards and rows get colour, shadow, tint or an arrow nudge. */
@media (hover: hover) {
    a:hover { color: var(--color-forest); }
}

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

.lead  { font-size: var(--text-lead); line-height: 1.5; }
.small { font-size: var(--text-sm); color: var(--color-muted); }

.eyebrow {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-leaf);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
}
/* Yellow line from the label to the end of the column marks where a section
   starts. Decoration only, so the text keeps its own readable colour. A label
   too long for one line (PT on phones) gets the line underneath instead of a
   short one floating beside two lines of text. */
.eyebrow::after {
    content: "";
    flex: 1 0 2rem;
    min-width: 2rem;   /* also counts in max-content below */
    height: 2px;
    background: var(--color-yellow);
}
/* From tablet width the label + line take half the column, not all of it
   (owner); a longer label keeps one line and a short line after it */
@media (min-width: 48em) {
    .eyebrow { width: 50%; min-width: max-content; }
}
/* Beside a photo the text column is already half the page: line to its end */
@media (min-width: 64em) {
    .split .eyebrow { width: auto; }
}

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

/* ---- Layout --------------------------------------------------------- */
.container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
}
.section { padding-block: var(--space-section); }
.stack > * + * { margin-top: var(--space-4); }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.stack > .button-row { margin-top: var(--space-5); }

/* Dark sections switch text and focus colours. */
.on-dark { color: #FFFFFF; --focus: var(--color-yellow); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #FFFFFF; }
.on-dark a:not(.btn) { color: #FFFFFF; }

/* ---- Skip link ------------------------------------------------------ */
.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100px;
    z-index: 100;
    padding: var(--space-3) var(--space-4);
    background: var(--color-forest);
    color: #FFFFFF;
    border-radius: var(--radius-sm);
    font-weight: 600;
}
.skip-link:focus { top: var(--space-4); color: #FFFFFF; --focus: var(--color-yellow); }

/* ---- Header (Sections 3.1 + 3.2) -----------------------------------
   Phone:   [Menu]  logo  [EN|PT]   (+ sticky action bar at the bottom)
   ≥ 64em:  row 1 logo · phone · EN|PT · GET A QUOTE   row 2 the 7 menus  */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-line);
}
.site-header__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 60px;
    transition: min-height 0.2s ease;
}
.site-header__logo { display: inline-flex; align-items: center; min-height: var(--tap); margin-right: auto; }
.site-header__logo img { width: clamp(108px, 33vw, 150px); height: auto; transition: width 0.2s ease; }
.site-header__tools { display: flex; align-items: center; gap: var(--space-3); }
/* Desktop-only tools. Two classes so the later .btn rule can't show them on phones. */
.site-header__tools .site-header__whatsapp,
.site-header__tools .site-header__quote { display: none; }

.menu-button,
.drawer__close {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: var(--tap);
    padding: 0 0.625rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-forest);
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 800;
    cursor: pointer;
}
.menu-button { margin-left: -0.625rem; }
.menu-button .icon,
.drawer__close .icon { width: 1.5rem; height: 1.5rem; color: currentColor; }
.drawer__close { margin-left: auto; }   /* stays on the right when there is no EN | PT switch */
@media (hover: hover) {
    .menu-button:hover,
    .drawer__close:hover { background: var(--color-fresh-tint); }
}

@media (min-width: 64em) {
    .menu-button { display: none; }
    .site-header__bar { min-height: 76px; }
    .site-header__logo img { width: 210px; }
    .site-header__tools { gap: var(--space-4); }
    .site-header__tools .site-header__whatsapp {
        display: inline-flex;
        align-items: center;
        gap: 0.375rem;
        min-height: var(--tap);
        color: var(--color-ink);
        font-size: var(--text-sm);
        font-weight: 600;
        text-decoration: none;
    }
    .site-header__whatsapp .icon { width: 1.125rem; height: 1.125rem; }
    @media (hover: hover) {
        .site-header__whatsapp:hover { color: var(--color-leaf); }
    }
    .site-header__tools .site-header__quote { display: inline-flex; }

    /* sticky header shrinks slightly once the page scrolls (main.js) */
    .site-header.is-scrolled .site-header__bar { min-height: 60px; }
    .site-header.is-scrolled .site-header__logo img { width: 170px; }
}

/* ---- Desktop menu + dropdowns ---------------------------------------- */
.main-nav { display: none; }

@media (min-width: 64em) {
    .main-nav { display: block; position: relative; border-top: 1px solid var(--color-line); }
    .main-nav__list {
        display: flex;
        flex-wrap: wrap;           /* never sideways scroll, even with long PT labels */
        justify-content: center;
        margin-block: 0;
        padding: 0;
        list-style: none;
    }
    .main-nav__item { position: relative; display: flex; align-items: center; }
    .main-nav__item.is-mega { position: static; }   /* mega panels span the full header */
    .main-nav__link {
        --pad-start: 0.75rem;      /* the active bar below lines up with these */
        --pad-end: 0.75rem;
        position: relative;
        display: flex;
        align-items: center;
        min-height: 48px;
        padding: 0 var(--pad-end) 0 var(--pad-start);
        color: var(--color-forest);
        font-family: var(--font-heading);
        font-size: 0.8125rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-decoration: none;
        white-space: nowrap;
    }
    .has-dropdown > .main-nav__link { --pad-end: 0.125rem; }
    /* Current page: a short rounded bar exactly as wide as the word. Hover shows a
       light green one, so it never looks like the current page. */
    .main-nav__link::after {
        content: "";
        position: absolute;
        left: var(--pad-start);
        right: var(--pad-end);
        bottom: 8px;
        height: 2px;
        border-radius: 999px;      /* round ends */
        background: var(--color-fresh);
        transform: scaleX(0);
    }
    .main-nav__link[aria-current="page"]::after { background: var(--color-forest); transform: scaleX(1); }
    @media (hover: hover) {
        .main-nav__link:hover { color: var(--color-leaf); }
        .main-nav__link:hover::after { transform: scaleX(1); }
    }
    @media (prefers-reduced-motion: no-preference) {
        .main-nav__link::after { transition: transform 0.2s ease; }
    }
    .main-nav__toggle {
        display: grid;
        place-items: center;
        width: 28px;
        height: var(--tap);
        margin-right: 0.375rem;
        padding: 0;
        border: 0;
        border-radius: var(--radius-sm);
        background: transparent;
        color: var(--color-forest);
        cursor: pointer;
    }
    @media (hover: hover) {
        .main-nav__toggle:hover { background: var(--color-fresh-tint); }
    }
    .main-nav__toggle .icon,
    .drawer__toggle .icon { width: 1rem; height: 1rem; color: currentColor; transition: transform 0.15s ease; }
    .main-nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

    .dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 60;
        min-width: 17rem;
        padding: var(--space-3);
        background: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: 0 0 var(--radius) var(--radius);
        box-shadow: var(--shadow-lg);
    }
    .is-mega > .dropdown {
        right: 0;
        padding: var(--space-5) 0;
        border-inline: 0;
        border-radius: 0;
    }
    .main-nav__item.is-open > .dropdown { display: block; }
    .main-nav__item.is-suppressed > .dropdown { display: none; }   /* closed with Esc while hovered */

    /* A panel never fills the screen: part of the page always stays visible
       below it, to move the mouse to. Taller contents scroll inside. */
    .main-nav .dropdown { max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
    /* Long lists (7+ items, e.g. vegetables) in two columns, so the panel stays short;
       slightly narrower columns so Products fits on one row from 1024 px. */
    .main-nav .is-mega .dropdown__inner { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
    .main-nav .is-mega .dropdown__group:has(> .dropdown__links > li:nth-child(7)) { grid-column: span 2; }
    .main-nav .is-mega .dropdown__group:has(> .dropdown__links > li:nth-child(7)) > .dropdown__links {
        columns: 2;
        column-gap: var(--space-4);
    }
    /* A thin line between categories, so a two-column list reads as one category. */
    .main-nav .is-mega .dropdown__group + .dropdown__group {
        padding-left: var(--space-4);
        border-left: 1px solid var(--color-line);
    }
    /* A normal dropdown with a long plain list (8+ links, e.g. Agro Services): two
       compact columns under its menu item, 15+ links: three. */
    .main-nav .has-dropdown:not(.is-mega) > .dropdown:has(.dropdown__links > li:nth-child(8)) {
        left: 50%;
        width: 34rem;
        transform: translateX(-50%);   /* centred under its menu item, so it never runs off the screen edge */
    }
    .main-nav .has-dropdown:not(.is-mega) > .dropdown:has(.dropdown__links > li:nth-child(15)) { width: 50rem; }
    .main-nav .has-dropdown:not(.is-mega) .dropdown__group:only-child .dropdown__links { columns: 14rem 3; column-gap: var(--space-2); }
}

/* 1024–1279px: tighter menu so the longer Portuguese labels fit on one row */
@media (min-width: 64em) and (max-width: 79.99em) {
    .main-nav__link { --pad-start: 0.5rem; --pad-end: 0.5rem; font-size: 0.78rem; letter-spacing: 0.04em; }
    .has-dropdown > .main-nav__link { --pad-end: 0; }
    .main-nav__toggle { width: 24px; margin-right: 0.25rem; }
}

/* Mouse users: open on hover. Touch and keyboard use the chevron button. */
@media (min-width: 64em) and (hover: hover) and (pointer: fine) {
    .has-dropdown:hover > .dropdown { display: block; }
    .has-dropdown.is-suppressed:hover > .dropdown { display: none; }

    /* Hover intent: a panel opens only when the mouse rests on the item for
       0.15 s, so crossing the menu on the way to the page doesn't pop one open;
       it closes 0.1 s after the mouse leaves. (Hidden = not clickable, not focusable.)
       Opened with the chevron button (.is-open): at once, no delay. */
    .has-dropdown > .dropdown {
        display: block;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.1s ease, visibility 0s linear 0.1s;
    }
    .has-dropdown:hover > .dropdown { visibility: visible; opacity: 1; transition-delay: 0.15s; }
    .main-nav__item.is-open > .dropdown { visibility: visible; opacity: 1; transition: none; }
    /* The arrow follows the panel: turned up while hover shows it (same 0.15 s delay),
       down again when it closes or is kept closed after a click. */
    .has-dropdown:not(.is-suppressed):hover > .main-nav__toggle .icon { transform: rotate(180deg); transition-delay: 0.15s; }

    /* A mouse needs less room than a finger: shorter links (touch screens keep 44 px). */
    .main-nav .dropdown__links a { min-height: 2rem; padding-block: 0.125rem; }
    .main-nav .dropdown__heading { min-height: 2.25rem; }
}

/* Dropdown contents (shared by the desktop menu and the mobile drawer) */
.dropdown__inner {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.dropdown__group:only-child .dropdown__links { columns: 15rem 3; column-gap: var(--space-4); }
.dropdown__heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap);
    padding: 0.25rem 0.75rem;
    color: var(--color-forest);
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
}
@media (hover: hover) {
    .dropdown__heading:hover { color: var(--color-leaf); }
}
.dropdown__links { margin: 0; padding: 0; list-style: none; }
.dropdown__links li { break-inside: avoid; }
.dropdown__links a {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    font-size: 0.9375rem;
    text-decoration: none;
}
@media (hover: hover) {
    .dropdown__links a:hover { background: var(--color-fresh-tint); color: var(--color-forest); }
}

.badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-transform: uppercase;
}
.badge--chilli { background: #FBEAE9; color: var(--color-chilli-deep); }   /* chilli only */

/* ---- Mobile full-screen menu (native <dialog>) ------------------------ */
.drawer {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0 var(--gutter) var(--space-7);
    border: 0;
    background: var(--color-surface);
    color: var(--color-ink);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.drawer::backdrop { background: rgb(28 37 32 / 0.4); }
html.menu-open { overflow: hidden; }   /* the page behind the menu does not scroll */
.drawer__top {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-line);
}
.drawer__list { margin: 0; padding: 0; list-style: none; }
.drawer__item { border-bottom: 1px solid var(--color-line); }
.drawer__row { display: flex; align-items: center; }
.drawer__link {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 56px;
    color: var(--color-forest);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-decoration: none;
}
/* Current page: the whole row, edge to edge, light green with a forest bar on the left */
.drawer__row:has(> .drawer__link[aria-current="page"]) {
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    background: var(--color-fresh-wash);
    box-shadow: inset 4px 0 0 var(--color-forest);
}
.drawer__toggle {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-right: -0.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-forest);
    cursor: pointer;
}
.drawer__toggle .icon { width: 1.25rem; height: 1.25rem; color: currentColor; transition: transform 0.15s ease; }
.drawer__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.drawer__panel { padding-bottom: var(--space-3); }
.drawer__panel .dropdown__group + .dropdown__group { margin-top: var(--space-2); }
.drawer__panel .dropdown__links { columns: auto; }
.drawer__actions { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.drawer__phone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--tap);
    color: var(--color-forest);
    font-weight: 600;
}
.drawer__phone .icon { width: 1.25rem; height: 1.25rem; }

@media (min-width: 64em) {
    .drawer { display: none !important; }
}

/* Anchor jumps land below the sticky header */
html { scroll-padding-top: 76px; }
@media (min-width: 64em) {
    html { scroll-padding-top: 140px; }
}

/* ---- Language switcher (Section 10) --------------------------------- */
.lang-switch {
    display: flex;
    align-items: center;
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 700;
}
.lang-switch .icon { width: 1.125rem; height: 1.125rem; margin-right: 0.125rem; }
/* Below 360 px the header globe would squeeze the logo; the drawer keeps it. */
@media (max-width: 22.49em) {
    .site-header .lang-switch .icon { display: none; }
}
.lang-switch__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap);
    min-height: var(--tap);
    color: var(--color-muted);
    text-decoration: none;
    letter-spacing: 0.06em;
}
@media (hover: hover) {
    .lang-switch__link:hover { color: var(--color-forest); }
}
.lang-switch__link[aria-current="true"] {
    color: var(--color-forest);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.35em;
}
.lang-switch__sep { color: var(--color-line); }

/* "Ver este site em Português?" bar, revealed by main.js */
.lang-suggest {
    background: var(--color-fresh-tint);
    border-bottom: 1px solid var(--color-line);
    font-size: var(--text-sm);
}
.lang-suggest__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding-block: var(--space-2);
}
.lang-suggest__text { margin: 0; color: var(--color-forest); font-weight: 600; }
/* phone: both buttons side by side, half the width each; from 40rem: next to the text */
.lang-suggest__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); width: 100%; }
@media (min-width: 40rem) {
    .lang-suggest__actions { display: flex; width: auto; }
}
.lang-suggest__switch,
.lang-suggest__stay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    padding: var(--space-1) var(--space-3);
    line-height: 1.25;
    text-align: center;
    border: 2px solid var(--color-forest);
    border-radius: var(--radius-sm);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.lang-suggest__switch { background: var(--color-forest); color: #FFFFFF; }
.lang-suggest__stay { background: transparent; color: var(--color-forest); }
@media (hover: hover) {
    .lang-suggest__switch:hover { background: var(--color-forest-deep); border-color: var(--color-forest-deep); color: #FFFFFF; }
    .lang-suggest__stay:hover { background: rgb(21 72 14 / 0.08); }
}

/* ---- Buttons (Section 5.3) ------------------------------------------
   primary   = Forest on Yellow (the GET A QUOTE style)
   secondary = outline
   chilli    = Chilli Red, ONLY for chilli CTAs                         */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: var(--space-3) var(--space-5);
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn .icon { width: 1.25em; height: 1.25em; }

.btn--primary { background: var(--color-yellow); color: var(--color-forest); }
.btn--secondary { background: transparent; color: var(--color-forest); border-color: var(--color-forest); }
.btn--chilli { background: var(--color-chilli); color: #FFFFFF; }
.on-dark .btn--secondary { color: #FFFFFF; border-color: #FFFFFF; }
/* white button inside the Chilli Red banner */
.btn--on-chilli { background: #FFFFFF; color: var(--color-chilli-deep); }

@media (hover: hover) {
    .btn--primary:hover { background: var(--color-yellow-light); color: var(--color-forest); box-shadow: var(--shadow); }
    .btn--secondary:hover { background: var(--color-forest); color: #FFFFFF; }
    .btn--chilli:hover { background: var(--color-chilli-deep); color: #FFFFFF; }
    .on-dark .btn--secondary:hover { background: #FFFFFF; color: var(--color-forest); }
    .btn--on-chilli:hover { background: var(--color-bg); color: var(--color-chilli-deep); box-shadow: var(--shadow); }
}

/* ---- Cards ---------------------------------------------------------- */
.card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}

.icon { width: 2rem; height: 2rem; color: var(--color-leaf); flex: none; }

/* Pillar card: the whole card is clickable through the stretched link. */
.card-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.pillar-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-top: 4px solid var(--color-fresh);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
@media (hover: hover) {
    .pillar-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
}
.pillar-card__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--color-fresh-tint);
}
.pillar-card__title {
    font-size: var(--text-h4);
    font-weight: 800;
    letter-spacing: 0.06em;
}
/* Inline (not flex) so the arrow follows the last word when the text wraps. */
.pillar-card__link {
    display: block;
    color: var(--color-ink);
    font-weight: 600;
    text-decoration: none;
}
.pillar-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.pillar-card__link .icon { display: inline-block; width: 1.25rem; height: 1.25rem; vertical-align: -0.25em; }
.pillar-card:has(.pillar-card__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.pillar-card__link:focus-visible { outline: none; }

/* ---- CTA banner (default green / chilli red variant) ---------------- */
.cta-banner {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius);
    background: var(--color-forest);
    color: #FFFFFF;
    --focus: var(--color-yellow);
}
.cta-banner h2, .cta-banner h3 { color: #FFFFFF; }
.cta-banner .eyebrow { color: var(--color-yellow); justify-self: stretch; }   /* full width for the line */
.cta-banner--chilli { background: var(--color-chilli); --focus: #FFFFFF; }
/* Outline buttons and icons inside a banner switch to white so they stay visible */
.cta-banner .btn--secondary { color: #FFFFFF; border-color: #FFFFFF; }
@media (hover: hover) {
    .cta-banner .btn--secondary:hover { background: #FFFFFF; color: var(--color-forest); }
}
.cta-banner .btn .icon { color: currentColor; }
.cta-banner--chilli .eyebrow { color: #FFFFFF; }
.cta-banner--chilli .eyebrow::after { background: rgb(255 255 255 / 0.6); }   /* no yellow on chilli */

@media (min-width: 48em) {
    .cta-banner { padding: var(--space-7); }
}

/* ---- Forms ---------------------------------------------------------- */
.field { display: grid; gap: var(--space-2); }
.field__label { font-weight: 600; }
.field__hint { font-size: var(--text-sm); color: var(--color-muted); font-weight: 400; }

.input, .select, .textarea {
    width: 100%;
    min-height: var(--tap);   /* 44 px: compact, still a comfortable tap target */
    padding: var(--space-2) var(--space-3);
    border: 1.5px solid var(--color-field);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink);
    font: inherit;
    font-size: 1rem;   /* 16px+ stops iPhones zooming into fields */
    line-height: 1.4;
}
.textarea { min-height: 8rem; resize: vertical; }
/* Focus: one stronger border (border + a 1px shadow ring), not border + outline,
   which looked like a double line. The transparent outline still shows in
   Windows high-contrast mode, where shadows are hidden. */
.input:focus-visible, .select:focus-visible, .textarea:focus-visible {
    outline: 2px solid transparent;
    border-color: var(--focus);
    box-shadow: 0 0 0 1px var(--focus);
}
[aria-invalid="true"] { border-color: var(--color-error); border-width: 2px; }
[aria-invalid="true"]:focus-visible { border-color: var(--color-error); box-shadow: 0 0 0 1px var(--color-error); }
.field__error { color: var(--color-error); font-size: var(--text-sm); font-weight: 600; }

.check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: var(--tap);
    cursor: pointer;
}
.check input {
    width: 1.375rem;
    height: 1.375rem;
    margin: 0.15rem 0 0;
    accent-color: var(--color-forest);
    flex: none;
}

/* GET A QUOTE: Yellow on Forest, the strongest element in the header (Section 3.1) */
.btn--quote { background: var(--color-forest); color: var(--color-yellow); }
@media (hover: hover) {
    .btn--quote:hover { background: var(--color-forest-deep); color: var(--color-yellow-light); box-shadow: var(--shadow); }
}

/* ---- Pages (Phase 1 starters) ---------------------------------------- */
.page-header {
    padding-block: var(--space-7) var(--space-5);
    background: linear-gradient(var(--color-fresh-tint), var(--color-bg));
}
h1, h2 { overflow-wrap: break-word; }
.section--tight { padding-block: var(--space-6); }
.section--cta { padding-top: var(--space-6); }

.link-grid,
.type-picker {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}
.link-card,
.type-picker__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 56px;
    padding: var(--space-4) var(--space-5);
    color: var(--color-forest);
    font-family: var(--font-heading);
    font-weight: 700;
    text-decoration: none;
    transition: box-shadow 0.15s ease;
}
@media (hover: hover) {
    .link-card:hover,
    .type-picker__option:hover { box-shadow: var(--shadow); color: var(--color-forest); }
}
.link-card .icon,
.type-picker__option .icon { width: 1.25rem; height: 1.25rem; }
.type-picker__option[aria-current="true"] { outline: 3px solid var(--color-forest); outline-offset: -3px; }
.type-picker__option--chilli { border-left: 4px solid var(--color-chilli); }
.stack > * + .type-picker, .stack > * + .link-grid { margin-top: var(--space-4); }   /* the list reset above removed it */

/* ---- Contact details list (footer + Contact page) --------------------- */
.contact-list { display: grid; gap: var(--space-3); }
.contact-list li { display: flex; align-items: flex-start; gap: var(--space-3); }
.contact-list .icon { width: 1.25rem; height: 1.25rem; margin-top: 0.2rem; }
.contact-list__label { display: block; color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; }
.contact-list a { overflow-wrap: anywhere; }

/* ---- Footer (Section 3.4) ---------------------------------------------- */
.site-footer {
    padding-top: var(--space-section);
    background: var(--color-forest);
    color: #FFFFFF;
}
.site-footer__grid { display: grid; gap: var(--space-6); }
.site-footer__brand { display: grid; gap: var(--space-4); align-content: start; }
.site-footer__logo {
    display: inline-block;
    justify-self: start;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    background: #FFFFFF;    /* the supplied logo has a white background */
}
.site-footer__logo img { width: 180px; }
.site-footer__heading {
    margin-bottom: var(--space-3);
    color: var(--color-yellow);
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.on-dark .site-footer__heading { color: var(--color-yellow); }
.site-footer__links,
.site-footer__legal,
.social { margin: 0; padding: 0; list-style: none; }
.site-footer__links a,
.site-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
}
.on-dark .icon { color: var(--color-fresh); }   /* 4.25:1 on Forest: fine for icons */
.on-dark .contact-list__label { color: rgb(255 255 255 / 0.8); }
.social { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.social__link {
    display: grid;
    place-items: center;
    width: var(--tap);
    height: var(--tap);
    border: 1px solid rgb(255 255 255 / 0.5);
    border-radius: 50%;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.social__link .icon { width: 1.25rem; height: 1.25rem; color: #FFFFFF; transition: color 0.15s ease; }
/* Hover (owner, 2026-10-18): the circle fills light green, the icon turns forest
   (on dark footer/banner and on the light Contact page alike). */
@media (hover: hover) {
    .social__link:hover { background: var(--color-fresh-tint); border-color: var(--color-fresh-tint); }
    .social__link:hover .icon { color: var(--color-forest); }
}
.site-footer__bottom {
    margin-top: var(--space-7);
    padding-block: var(--space-4);
    border-top: 1px solid rgb(255 255 255 / 0.2);
    font-size: var(--text-sm);
}
.site-footer__bottom-inner { display: grid; gap: var(--space-3); }
.site-footer__legal { display: flex; flex-wrap: wrap; column-gap: var(--space-5); }
.site-footer__company { color: rgb(255 255 255 / 0.85); }

@media (min-width: 48em) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64em) {
    .site-footer__grid { grid-template-columns: 1.3fr 1fr 1.4fr 1fr; }
    .site-footer__bottom-inner { grid-template-columns: auto 1fr; align-items: center; }
    .site-footer__company { text-align: right; }
}

/* ---- Sticky mobile action bar: Get a Quote + WhatsApp (Section 3.2) -- */
.action-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: 1fr auto;   /* WhatsApp hugs its label, the quote button gets the rest (fits "PEDIR ORÇAMENTO" on one line) */
    gap: var(--space-2);
    padding: var(--space-2) var(--gutter) calc(var(--space-2) + env(safe-area-inset-bottom));
    background: var(--color-surface);
    border-top: 1px solid var(--color-line);
    box-shadow: 0 -4px 16px rgb(28 37 32 / 0.08);
    transition: transform 0.2s ease, visibility 0.2s;
}
/* typing in a form (main.js): out of the way of the keyboard, and out of the Tab order */
.action-bar.is-hidden {
    transform: translateY(100%);
    visibility: hidden;
}
/* compact: 44 px is the tap-target minimum, so the bar covers less of the page */
.action-bar .btn {
    min-height: var(--tap);
    padding: var(--space-1) var(--space-4);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}
body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }   /* room for the bar */
html { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); }   /* keyboard focus never hides behind it */
/* pages without the bar (quote sent): no room kept for it */
.no-action-bar body { padding-bottom: 0; }
html.no-action-bar { scroll-padding-bottom: 0; }

@media (min-width: 64em) {
    .action-bar { display: none; }
    body { padding-bottom: 0; }
    html { scroll-padding-bottom: 0; }
}

/* =====================================================================
   Homepage (Phase 2, Section 6) and the components it introduces
   ===================================================================== */
/* ---- Shared section backgrounds --------------------------------------- */
.section--surface { background: var(--color-surface); }
.section--tint    { background: var(--color-fresh-tint); }
.section--forest  { background: var(--color-forest); }
.section--flush   { padding-block: 0 var(--space-section); }
.on-dark .eyebrow { color: var(--color-yellow); }   /* 5.31:1 on Forest */

/* Lists that are laid out as grids or rows. :where() keeps this reset at
   zero specificity, so .stack spacing still applies to them. */
:where(.path-grid, .pillar-grid, .category-grid, .reason-grid, .option-grid,
.chip-list, .topic-list, .service-list, .contact-list, .department-list) { margin: 0; padding: 0; list-style: none; }

.text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap);
    font-weight: 700;
}
.text-link .icon { width: 1.25rem; height: 1.25rem; color: currentColor; }
/* "&nbsp;→" after a link label: keeps the arrow on the line of the last word. */
.link-arrow { white-space: nowrap; }
/* Hovering a card or panel item nudges its arrow to the right (no underline) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .link-arrow .icon,
    .category-card__link .icon { transition: transform 0.15s ease; }
    .path-card:hover .link-arrow .icon,
    .pillar-card:hover .link-arrow .icon,
    .pillar-panel__item:hover .link-arrow .icon,
    .category-card:hover .category-card__link .icon { transform: translateX(3px); }
}

/* ---- Hero (Section 5.4): photo or video, headline, 1–2 buttons ----------
   The media fills the section behind the text, under ONE even shade of
   near-black Forest at 45%, the same everywhere and at every width (owner
   2026-10-15: the earlier 78–90% tinted the video too much; darker patches
   behind the text made visible bright/dark borders). A text shadow carries
   the rest: with the current video white text measures at least 5.7:1
   behind the tagline and description (4.7:1 behind the title); only very
   bright footage behind the text (white sky) would bring the small
   description below AA, so the editor's Help says to pick a clip whose
   lower/left part is not bright white.
   Phones: the hero is most of the screen tall with all the text at the
   bottom and a smaller title, so the upper part of the scene stays clear. */
.hero {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    min-height: min(75svh, 42rem);
    padding-block: var(--space-6) var(--space-7);
    background: var(--color-forest);
}
.hero__media { position: absolute; inset: 0; z-index: -1; background: var(--color-forest-deep); }
.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(8 32 6 / 0.45);
}
.hero__image,
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* No photo yet: brand gradient (Fresh and Yellow glows on Forest) */
.hero--placeholder .hero__media {
    background:
        radial-gradient(circle at 85% 15%, rgb(146 175 7 / 0.35), transparent 55%),
        radial-gradient(circle at 10% 100%, rgb(210 182 12 / 0.18), transparent 45%),
        var(--color-forest);
}
.hero--placeholder .hero__media::after { content: none; }
.hero__token {
    position: absolute;
    top: var(--space-3);
    right: var(--gutter);
    padding: 0.125rem 0.5rem;
    border: 1px dashed rgb(255 255 255 / 0.6);
    border-radius: var(--radius-sm);
    color: rgb(255 255 255 / 0.9);
    font-family: ui-monospace, Consolas, monospace;
    font-size: 0.75rem;
}
.hero__content { text-shadow: 0 1px 3px rgb(0 0 0 / 0.5), 0 2px 24px rgb(0 0 0 / 0.4); }
/* The text block: as wide as its widest line (the description stops at 34rem) */
.hero__copy {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    width: fit-content;
    max-width: 40rem;
}
.hero__title {
    font-size: clamp(2rem, 1rem + 5vw, 2.5rem);   /* phones: smaller, so the video shows more */
    letter-spacing: 0.02em;
    line-height: 1;
}
/* Tagline: one sentence per line, behind a yellow bar */
.hero__lead {
    display: grid;
    gap: 0.15em;
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-yellow);
    font-family: var(--font-heading);
    font-size: clamp(1.125rem, 0.75rem + 1.6vw, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
}
.hero__lead-line { display: block; }
.hero__text {
    max-width: 34rem;
    color: rgb(255 255 255 / 0.92);
    font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem);
    line-height: 1.55;
}
.hero .button-row { margin-top: var(--space-2); }

/* Entrance: the text rises in, one part after the other. Off with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    .hero__title,
    .hero__lead-line,
    .hero__text,
    .hero .button-row { animation: hero-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
    .hero__lead-line:nth-child(1) { animation-delay: 0.15s; }
    .hero__lead-line:nth-child(2) { animation-delay: 0.27s; }
    .hero__lead-line:nth-child(3) { animation-delay: 0.39s; }
    .hero__text { animation-delay: 0.5s; }
    .hero .button-row { animation-delay: 0.6s; }
}
@keyframes hero-rise {
    from { opacity: 0; transform: translateY(0.75rem); }
    to   { opacity: 1; transform: none; }
}

/* Tablets: same layout as phones (text at the bottom), bigger type */
@media (min-width: 48em) {
    .hero__copy { gap: var(--space-4); }
    .hero__title { font-size: clamp(2.5rem, 1.2rem + 4vw, 4rem); }   /* owner 2026-10-15: was up to 5.25rem */
}
/* Desktop: the text sits left, centred in height */
@media (min-width: 64em) {
    .hero { align-items: center; min-height: min(80vh, 46rem); padding-block: var(--space-8); }
}
@media (prefers-reduced-motion: reduce) {
    .hero__video { display: none; }   /* the poster <img> underneath stays */
}

/* ---- 2 Customer paths + four pillars ------------------------------------ */
.home-paths { padding-top: var(--space-6); }
.home-paths__title { margin-bottom: var(--space-4); font-size: var(--text-h3); }
.path-grid { display: grid; gap: var(--space-3); }
.path-card {
    --path-accent: var(--color-fresh);
    position: relative;
    display: flex;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5) var(--space-3);
    border-left: 5px solid var(--path-accent);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease;
}
.path-card--buyer   { --path-accent: var(--color-yellow); }
.path-card--shopper { --path-accent: var(--color-leaf); }
@media (hover: hover) {
    .path-card:hover { box-shadow: var(--shadow-lg); }
}
.path-card__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--color-fresh-tint);
}
.path-card__icon .icon { width: 1.75rem; height: 1.75rem; }
/* Fills the card so every link sits at the bottom, level with its neighbours. */
.path-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-1); }
.path-card__audience {
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-leaf);
}
.path-card__need { color: var(--color-muted); font-size: var(--text-sm); line-height: 1.45; }
/* Block, not flex, so the arrow follows the last word when a long label wraps (PT, phones). */
.path-card__link {
    display: block;
    margin-top: auto;
    min-height: var(--tap);
    padding-block: var(--space-2);
    color: var(--color-forest);
    font-family: var(--font-heading);
    font-weight: 800;
    letter-spacing: 0.03em;
    text-decoration: none;
}
.path-card__link .icon { display: inline-block; width: 1.25rem; height: 1.25rem; margin-left: 0.125rem; vertical-align: -0.25em; color: currentColor; }
.path-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.path-card:has(.path-card__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.path-card__link:focus-visible { outline: none; }

.pillar-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: var(--space-6);
}
.pillar-grid .pillar-card { padding: var(--space-4); }
.pillar-grid .pillar-card__link { font-size: var(--text-sm); }

@media (min-width: 48em) {
    .path-grid { grid-template-columns: repeat(3, 1fr); }
    .path-card { flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-left: 0; border-top: 5px solid var(--path-accent); }
}
@media (min-width: 64em) {
    .pillar-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
    .pillar-grid .pillar-card { padding: var(--space-5); }
    .pillar-grid .pillar-card__link { font-size: var(--text-base); }
}

/* Homepage "What We Do": the four pillars in a white panel that overlaps the bottom
   of the hero (owner's choice 2026-10-11, option D), above "Find Your Path".
   The overlap stays inside the hero's bottom padding, so it never covers the buttons.
   Icon circles use the path-card accents: buyers yellow, farmers fresh, shoppers leaf. */
.pillar-panel { position: relative; z-index: 2; margin-top: -2rem; }
/* Phones: the hero ends with its text (no buttons on Home), so keep clear of the overlap */
.hero:has(+ .pillar-panel) { padding-bottom: calc(var(--space-7) + 1rem); }
.pillar-panel__box {
    padding: var(--space-4);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}
.pillar-panel__title { margin-bottom: var(--space-3); font-size: var(--text-h4); }
.pillar-panel__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4) var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.pillar-panel__item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    align-content: start;
    gap: var(--space-1) var(--space-2);
}
.pillar-panel__icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
}
.pillar-panel__icon .icon { width: 1.25rem; height: 1.25rem; }
/* Icon contrast: white on Forest 10.7:1, on Leaf 6.9:1; Forest Deep on Yellow 7.0:1, on Fresh 5.6:1 */
.pillar-panel__icon--grow   { background: var(--color-forest); }
.pillar-panel__icon--supply { background: var(--color-yellow); }
.pillar-panel__icon--serve  { background: var(--color-fresh); }
.pillar-panel__icon--sell   { background: var(--color-leaf); }
.pillar-panel__icon--grow .icon,
.pillar-panel__icon--sell .icon { color: #FFFFFF; }
.pillar-panel__icon--supply .icon,
.pillar-panel__icon--serve .icon { color: var(--color-forest-deep); }
.pillar-panel__name { font-size: 0.875rem; font-weight: 800; letter-spacing: 0.08em; color: var(--color-leaf); }
.pillar-panel__link {
    grid-column: 1 / -1;
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}
.pillar-panel__link .icon { display: inline-block; width: 1.125rem; height: 1.125rem; vertical-align: -0.2em; color: currentColor; }
.pillar-panel__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-sm); }
@media (hover: hover) {
    .pillar-panel__item:hover .pillar-panel__link { color: var(--color-forest); }
}
.pillar-panel__item:has(.pillar-panel__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.pillar-panel__link:focus-visible { outline: none; }
@media (min-width: 64em) {
    .pillar-panel { margin-top: -3.5rem; }
    .pillar-panel__box {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: var(--space-6);
        padding: var(--space-5) var(--space-6);
    }
    .pillar-panel__title { margin: 0; padding-right: var(--space-5); border-right: 1px solid var(--color-line); }
    .pillar-panel__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
    .pillar-panel__item { column-gap: var(--space-3); }
    .pillar-panel__icon { grid-row: span 2; width: 3rem; height: 3rem; }
    .pillar-panel__icon .icon { width: 1.5rem; height: 1.5rem; }
    .pillar-panel__link { grid-column: 2; }
    .home-paths { padding-top: var(--space-7); }
}

/* ---- Photo + text split (Our Farm, Market, agro category) ---------------
   Markup order is head, photo, body: on a phone the label and heading come
   first, then the photo, then the details and buttons (also the screen-reader
   order). From 64em the photo takes one column and head + body sit beside it,
   centred: the empty 1fr rows above and below share the leftover height. */
.split { display: grid; gap: var(--space-6); }
@media (min-width: 64em) {
    .split {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr auto auto 1fr;
        grid-template-areas: "media ." "media head" "media body" "media .";
        gap: 0 var(--space-8);
    }
    .split--reverse { grid-template-areas: ". media" "head media" "body media" ". media"; }
    .split__media { grid-area: media; align-self: center; }
    .split__head  { grid-area: head; }
    .split__body  { grid-area: body; }
    .split__head ~ .split__body { margin-top: var(--space-4); }   /* same gap as .stack */
}
.photo { margin: 0; }
.photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.photo--placeholder {
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--space-3);
    aspect-ratio: 4 / 3;
    border: 2px dashed var(--color-fresh);
    border-radius: var(--radius);
    background: var(--color-fresh-tint);
}
.photo--placeholder .icon { width: 3.5rem; height: 3.5rem; }
.photo__token { color: var(--color-muted); font-family: ui-monospace, Consolas, monospace; font-size: var(--text-sm); }
/* No photo yet, but nothing that looks unfinished: the leaf mark on a white disc */
.photo--blank {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    background: var(--color-fresh-tint);
}
.photo--blank img {
    width: 34%;
    max-width: 7.5rem;
    height: auto;
    aspect-ratio: 1;
    padding: 6%;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: none;
    object-fit: contain;
}

.topic-list { display: grid; }
.topic-list a {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    border-bottom: 1px solid var(--color-line);
    font-weight: 600;
    text-decoration: none;
}
/* Hover: a pale tint that reaches a little past the text (box-shadow, so nothing moves) */
@media (hover: hover) {
    .topic-list a:hover {
        background: var(--color-fresh-tint);
        box-shadow: -0.5rem 0 0 var(--color-fresh-tint), 0.5rem 0 0 var(--color-fresh-tint);
        color: var(--color-forest);
    }
}
@media (min-width: 30em) {
    .topic-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-5); }
}

/* ---- 4 Product categories ---------------------------------------------- */
.category-grid { display: grid; gap: var(--space-4); }
@media (min-width: 48em) {
    .category-grid { grid-template-columns: repeat(3, 1fr); }
}
.category-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    border-top: 4px solid var(--color-fresh);
    transition: box-shadow 0.15s ease;
}
.category-card--chilli { border-top-color: var(--color-chilli); }   /* chilli only */
@media (hover: hover) {
    .category-card:hover { box-shadow: var(--shadow-lg); }
}
.category-card__items { color: var(--color-muted); font-size: var(--text-sm); }
.category-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap);
    margin-top: auto;
    font-weight: 700;
    text-decoration: none;
}
.category-card__link .icon { width: 1.25rem; height: 1.25rem; color: currentColor; }
.category-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
.category-card:has(.category-card__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.category-card__link:focus-visible { outline: none; }

/* ---- Chilli band: homepage, /products, /buyers (owner 2026-10-15) ---------
   partials/chilli-band.php. Full width, edge to edge, so it breaks the page rhythm of cards; under the text
   a strip of the chilli varieties scrolls slowly. White on Chilli Red 6.5:1,
   on Chilli Deep 9:1. */
.chilli-band {
    margin-block-end: var(--space-section);
    background: linear-gradient(120deg, var(--color-chilli) 45%, var(--color-chilli-deep));
    color: #FFFFFF;
    --focus: #FFFFFF;
}
.chilli-band--flush { margin-block-end: 0; }   /* /products, /buyers: the next section's padding is enough */
.chilli-band__inner {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
    padding-block: var(--space-7);
}
.chilli-band__copy { display: grid; gap: var(--space-4); }
.chilli-band h2 { color: #FFFFFF; font-size: clamp(1.875rem, 1.4rem + 2.4vw, 3rem); }
.chilli-band .eyebrow { color: #FFFFFF; }
.chilli-band .eyebrow::after { background: rgb(255 255 255 / 0.6); }   /* no yellow on chilli */
.chilli-band .btn .icon { color: currentColor; }
@media (min-width: 64em) {
    .chilli-band__inner {
        grid-template-columns: 1fr auto;
        align-items: center;
        column-gap: var(--space-7);
        padding-block: var(--space-8);
    }
}

/* Varieties ticker: names only, four copies of the list, moved left by one copy per
   loop, never stopping and with no pause button (owner 2026-10-15; WCAG 2.2.2 would
   want one). Reduced motion gets a still list. The strip is a barely darker shade of
   the band (owner), with soft edges. */
.ticker {
    background: rgb(0 0 0 / 0.06);
    border-top: 1px solid rgb(255 255 255 / 0.08);
}
.ticker__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}
.ticker__track { display: flex; width: max-content; }
.ticker__group { display: flex; margin: 0; padding: 0; list-style: none; }
.ticker__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap);
    padding: var(--space-3) var(--space-5);
    color: var(--color-yellow);   /* owner 2026-10-15; 3.2:1 on Chilli Red, so large text only: */
    font-family: var(--font-heading);
    font-size: 1.25rem;           /* 20 px bold counts as large text (AA 3:1) */
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.ticker__item .icon { width: 1.25rem; height: 1.25rem; color: #FFFFFF; opacity: 0.75; }

@media (prefers-reduced-motion: no-preference) {
    .ticker__track { animation: ticker 40s linear infinite; }
}
@keyframes ticker {
    to { transform: translateX(-25%); }
}
/* Reduced motion: one still list that wraps, no copies */
@media (prefers-reduced-motion: reduce) {
    .ticker__viewport { -webkit-mask-image: none; mask-image: none; }
    .ticker__track { width: auto; justify-content: center; }
    .ticker__group { flex-wrap: wrap; justify-content: center; }
    .ticker__group[aria-hidden="true"] { display: none; }
}

/* ---- 6 Agro Services: the 11 categories, numbered ----------------------- */
.service-list {
    display: grid;
    counter-reset: service;
    border-top: 1px solid rgb(255 255 255 / 0.2);
}
.service-list li { counter-increment: service; border-bottom: 1px solid rgb(255 255 255 / 0.2); }
.service-list a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 52px;
    font-family: var(--font-heading);
    font-weight: 700;
    text-decoration: none;
}
.service-list a::before {
    content: counter(service, decimal-leading-zero);
    min-width: 1.75rem;
    color: var(--color-yellow);
    font-size: var(--text-sm);
    font-weight: 800;
}
/* On the Forest section: a light overlay instead of the pale green tint */
@media (hover: hover) {
    .service-list a:hover {
        background: rgb(255 255 255 / 0.1);
        box-shadow: -0.5rem 0 0 rgb(255 255 255 / 0.1), 0.5rem 0 0 rgb(255 255 255 / 0.1);
    }
}
@media (min-width: 40em) {
    .service-list { grid-template-columns: 1fr 1fr; column-gap: var(--space-6); }
}
@media (min-width: 64em) {
    .service-list { grid-template-columns: repeat(3, 1fr); }
}

/* ---- 7 Market departments ------------------------------------------------ */
/* The products are the main text here (body size, ink); the department names are
   row links with an arrow instead of an underline, like the cards. */
.department-list { display: grid; gap: var(--space-3); }
.department-list dt a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap);
    color: var(--color-forest);
    font-family: var(--font-heading);
    font-weight: 800;
    text-decoration: none;
}
.department-list dt .icon { width: 1.25rem; height: 1.25rem; }
.department-list dd { margin: 0; text-wrap: pretty; }
@media (hover: hover) {
    .department-list dt a:hover { color: var(--color-leaf); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .department-list dt .icon { transition: transform 0.15s ease; }
    .department-list dt a:hover .icon { transform: translateX(3px); }
}
/* Market address + hours under the departments: quieter, side by side when they fit
   (each as wide as its text, so the address keeps "10 C" on its line), else stacked. */
.contact-list--compact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-8);
    color: var(--color-muted);
    font-size: var(--text-sm);
    text-wrap: pretty;
}
.contact-list--compact .contact-list__label { color: var(--color-ink); }

/* ---- 8 Why FreskiFarm ------------------------------------------------------ */
.reason-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}
.reason { display: grid; gap: var(--space-2); align-content: start; }
.reason__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: var(--space-2);
    border-radius: 50%;
    background: var(--color-surface);
}
.reason__title { font-size: var(--text-h4); letter-spacing: 0.04em; text-transform: uppercase; }
.reason__text { color: var(--color-muted); }

/* ---- 9 For Buyers: topic chips ------------------------------------------- */
.chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 var(--space-4);
    border: 1.5px solid var(--color-line);
    border-radius: 999px;
    color: var(--color-forest);
    font-weight: 600;
    text-decoration: none;
}
@media (hover: hover) {
    .chip:hover { border-color: var(--color-forest); background: var(--color-fresh-tint); color: var(--color-forest); }
}
/* ---- 10 Contact options (Section 4.7) ------------------------------------ */
.option-grid { display: grid; gap: var(--space-4); }
@media (min-width: 48em) {
    .option-grid { grid-template-columns: repeat(3, 1fr); }
}
.option-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-3) var(--space-4);
    padding: var(--space-4);
}
.option-card .btn { grid-column: 1 / -1; }
@media (min-width: 48em) {
    .option-card { display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-5); }
    .option-card .btn { margin-top: auto; }
}
.option-card__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--color-fresh-tint);
}
.option-card__title { font-size: var(--text-h4); letter-spacing: 0.04em; }

/* =====================================================================
   Products (Phase 3, Section 4.3)
   ===================================================================== */
.h4 { font-size: var(--text-h4); }

/* Owner content still missing, e.g. [PRODUCT_DATA] (Section 16) */
.placeholder-token {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border: 1px dashed var(--color-field);
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    font-family: ui-monospace, Consolas, monospace;
    font-size: var(--text-sm);
}

/* ---- Breadcrumb ---------------------------------------------------------- */
.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
}
.breadcrumb__list li { display: inline-flex; align-items: center; }
.breadcrumb__list li + li::before { content: "/"; padding-inline: var(--space-2); color: var(--color-muted); }
.breadcrumb__list a { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }
.breadcrumb__list [aria-current] { color: var(--color-muted); }
.page-header .stack > .breadcrumb + * { margin-top: var(--space-2); }

/* ---- /products: chilli band first (right under the header), then the catalogue */
.chip--chilli { border-color: var(--color-chilli); color: var(--color-chilli-deep); }   /* chilli only */
@media (hover: hover) {
    .chip--chilli:hover { border-color: var(--color-chilli-deep); background: #FBEAE9; color: var(--color-chilli-deep); }
}

.catalogue__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 3px solid var(--color-fresh);
}
.catalogue--chilli .catalogue__head { border-bottom-color: var(--color-chilli); }
.catalogue__title { font-size: var(--text-h3); }
.catalogue__all { margin-left: auto; }

/* ---- Product card (Section 5.4): photo, name, availability ------------------
   Two columns already on a phone, so a category fits in a short scroll.    */
.product-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 48em) {
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
}
@media (min-width: 64em) {
    .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease;
}
@media (hover: hover) {
    .product-card:hover { box-shadow: var(--shadow-lg); }
}
.product-card .photo img { border-radius: 0; box-shadow: none; }
.product-card .photo--blank { border-radius: 0; }
.product-card .photo--blank img { border-radius: 50%; }
.product-card .photo--placeholder { border: 0; border-bottom: 2px dashed var(--color-fresh); border-radius: 0; }
.product-card .photo--placeholder .icon { width: 2.25rem; height: 2.25rem; }
.product-card .photo__token { font-size: 0.75rem; overflow-wrap: anywhere; text-align: center; padding-inline: var(--space-2); }
.product-card--chilli .photo--placeholder { border-bottom-color: var(--color-chilli); }   /* chilli only */
.product-card__body {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
    padding: var(--space-3) var(--space-3) var(--space-4);
}
.product-card__title { font-size: 1rem; line-height: 1.3; }
@media (min-width: 48em) {
    .product-card__body { padding: var(--space-4); }
    .product-card__title { font-size: var(--text-h4); }
}
.product-card__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    color: var(--color-forest);
    text-decoration: none;
}
.product-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
@media (hover: hover) {
    .product-card:hover .product-card__link { color: var(--color-leaf); }
}
.product-card:has(.product-card__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.product-card__link:focus-visible { outline: none; }

/* ---- Availability label (in season / limited / on request) --------------- */
.status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.5;
}
.status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.status--in-season  { background: var(--color-fresh-tint); color: var(--color-forest); }
.status--limited    { background: #FBF3CF; color: #5C4A00; }
.status--on-request { background: var(--color-line); color: var(--color-ink); }

/* ---- Product page: Photo → Description → Season → Packaging → Availability -- */
.product { display: grid; gap: var(--space-6); align-items: start; }
@media (min-width: 64em) {
    .product { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
    .product__media { position: sticky; top: 150px; }
}
.product__facts { display: grid; gap: var(--space-5); margin: 0; }
.product__fact { display: grid; gap: var(--space-2); }
.product__fact + .product__fact { padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
.product__fact dt {
    font-family: var(--font-heading);
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-leaf);
}
.product__fact dd { margin: 0; }
.product__fact--description dd { font-size: var(--text-lead); line-height: 1.55; }

/* ---- Season: text + 12-month strip --------------------------------------- */
.season__text { font-weight: 600; }
.season {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2px;
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}
.season__month {
    padding-block: var(--space-2);
    border-radius: 4px;
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-line);
    color: var(--color-muted);
    font-size: 0.6875rem;
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;
}
.season__month.is-on { background: var(--color-leaf); box-shadow: none; color: #FFFFFF; }   /* 6.9:1 */
@media (min-width: 30em) {
    .season__month { font-size: 0.75rem; }
}

/* =====================================================================
   Phase 4 — For Buyers, Get a Quote, enquiry forms (Sections 4.6, 3.3, 7)
   ===================================================================== */

/* ---- Enquiry forms ------------------------------------------------------ */
.form-card { padding: var(--space-5) var(--space-4); border-top: 4px solid var(--color-forest); }
.form-card--chilli { border-top-color: var(--color-chilli); }   /* chilli enquiries only */
@media (min-width: 48em) {
    .form-card { padding: var(--space-7); }
}

/* The form's heading on top, the fields below it (owner, 2026-10-18; was a
   heading column on the left from 64em). A one-column card (service form)
   stops at 52rem so its boxes don't stretch across the screen; the buyer
   form (--wide) uses the full width with boxes sized to their content. */
.form-card { display: grid; gap: var(--space-5); align-items: start; max-width: 52rem; }
.form-card--wide { max-width: none; }
.form-card__intro > * + * { margin-top: var(--space-3); }
.enquiry-form { display: grid; gap: var(--space-5); }
.form-grid { display: grid; gap: var(--space-5); }

/* ---- Buyer form: numbered steps (owner, 2026-10-18) ---------------------
   1 Your details · 2 What you need · 3 Delivery & contact, then the send
   part. Phones: badge + title above one column of boxes. From 48em the boxes
   sit on a 12-column grid, two per row; from 64em each takes the width set
   in the markup (field--lg-*). From 75em the step titles move into a rail on
   the left, joined by a thin line. */
.form-steps { display: grid; gap: var(--space-6); }
.form-step { position: relative; display: grid; gap: var(--space-4); }
.form-step__title {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--color-forest);
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}
.form-step__text { padding-top: calc((2rem - 1.3em) / 2); }   /* first line centred on the badge */
.form-step__num {
    display: grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--color-yellow);
    color: var(--color-forest);   /* 5.3:1 */
    font-size: 1rem;
    line-height: 1;
}
.form-step--send { gap: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-line); }
.form-fields { display: grid; gap: var(--space-5); }

/* Each box on the grid is a subgrid of four rows (label, hint, error, box),
   so the boxes of one row stay level when only one of them has a hint or an
   error. Margins replace the gaps, because an empty row would still get one. */
@media (min-width: 48em) {
    .form-fields { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-4); align-items: end; }
    .form-fields > .field { grid-column: span 6; }
    @supports (grid-template-rows: subgrid) {
        .form-fields { row-gap: 0; align-items: stretch; margin-bottom: calc(-1 * var(--space-5)); }
        .form-fields > .field { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; margin-bottom: var(--space-5); }
        .form-fields > .field > .field__label { grid-row: 1; margin-bottom: var(--space-2); }
        .form-fields > .field > .field__hint { grid-row: 2; margin-bottom: var(--space-2); }
        .form-fields > .field > .field__error { grid-row: 3; margin-bottom: var(--space-2); }
        .form-fields > .field > :last-child { grid-row: 4; align-self: end; }
    }
}
@media (min-width: 64em) {
    .form-fields > .field--lg-4 { grid-column: span 4; }
    .form-fields > .field--lg-5 { grid-column: span 5; }
    .form-fields > .field--lg-7 { grid-column: span 7; }
}
@media (min-width: 75em) {
    .form-step { grid-template-columns: 12rem minmax(0, 1fr); column-gap: var(--space-6); align-items: start; }
    .form-step:has(+ .form-step > .form-step__title)::before {   /* rail line down to the next badge */
        content: "";
        position: absolute;
        top: 2.5rem;
        bottom: calc(0.5rem - var(--space-6));
        left: calc(1rem - 1px);
        width: 2px;
        border-radius: 1px;
        background: var(--color-line);
    }
    .form-step--send { grid-template-columns: minmax(0, 1fr); margin-left: calc(12rem + var(--space-6)); }
}

/* A fieldset that looks like a normal field (services) */
.field--group { margin: 0; padding: 0; border: 0; min-width: 0; }
.field--group > legend { padding: 0; margin-bottom: var(--space-2); }

/* Number + unit side by side */
.input-group { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
.input-group .select { width: auto; min-width: 6.5rem; }

.input--file { padding: var(--space-2); min-height: var(--tap); }
.input--file::file-selector-button {
    min-height: 36px;
    margin-right: var(--space-3);
    padding: var(--space-1) var(--space-4);
    border: 1.5px solid var(--color-forest);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-forest);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.check-list {
    display: grid;
    gap: 0 var(--space-5);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}
.check a { color: var(--color-leaf); }

/* Error summary: plum (--color-error), never Chilli Red */
.form-errors {
    padding: var(--space-4) var(--space-5);
    border: 2px solid var(--color-error);
    border-left-width: 6px;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}
.form-errors:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.form-errors__title { font-size: var(--text-h4); color: var(--color-error); }
.form-errors__list { margin: var(--space-2) 0 0; padding-left: 1.25rem; }
.form-errors__list li + li { margin-top: var(--space-1); }
.form-errors__list a { color: var(--color-error); font-weight: 600; }

/* Honeypot: off-screen for people, still in the HTML for robots */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- /buyers topic cards (pillar-card family, Section 5.4) ---------------- */
.buyer-topics {
    display: grid;
    gap: var(--space-4);
}
/* Chilli and Fresh Vegetables take full rows; the three service cards share one row
   on computers (narrower screens: one card per row). */
@media (min-width: 64em) {
    .buyer-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.buyer-topic {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-top: 4px solid var(--color-fresh);
}
.buyer-topic > p { margin: 0; }
.buyer-topic--chilli { grid-column: 1 / -1; border-top-color: var(--color-chilli); }   /* flagship: full row */
/* Fresh Vegetables: a full row too, so its many product chips wrap across. */
.buyer-topic--wide { grid-column: 1 / -1; }
/* Fresh Vegetables on a very light green (green, leafy produce), so it stands out from the
   white cards; its chips and icon circle are white so they stay crisp. */
.buyer-topic--wide { background: var(--color-fresh-wash); }
.buyer-topic--wide .buyer-topic__icon { background: var(--color-surface); }
:where(.buyer-topic--wide) .chip { background: var(--color-surface); }   /* :where keeps the hover tint */.buyer-topic__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--color-fresh-tint);
}
.buyer-topic--chilli .buyer-topic__icon { background: #FBEAE9; }
.buyer-topic--chilli .buyer-topic__icon .icon { color: var(--color-chilli-deep); }
.buyer-topic__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    font-size: var(--text-h3);
}
.buyer-topic__cta { align-self: flex-start; margin-top: auto; }
.buyer-topic__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap);
    margin-top: auto;
    color: var(--color-leaf);
    font-weight: 700;
}
.buyer-topic__link .icon { width: 1.25rem; height: 1.25rem; color: currentColor; }
.buyer-topic__route {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-weight: 800;
    color: var(--color-forest);
}
.buyer-topic__route .icon { width: 1.25rem; height: 1.25rem; }
.buyer-topic__steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.buyer-topic__steps li {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-fresh-tint);
    color: var(--color-forest);
    font-weight: 600;
}

/* ---- Availability calendar: product × month timeline (Section 4.6) -------- */
/* Phones: name above a full-width 12-month track, month initials. From 48em:
   name left, track right, month abbreviations. Never scrolls sideways. */
.availability,
.availability__legend {
    --track: color-mix(in srgb, var(--color-line) 60%, var(--color-surface));     /* empty months */
    --now-off: color-mix(in srgb, var(--color-yellow) 35%, var(--color-surface)); /* this month, not in season */
}
.availability {
    padding: var(--space-3) var(--space-2);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.availability__group + .availability__group { margin-top: var(--space-5); }
.availability__head,
.availability__row { padding-inline: var(--space-2); }
.availability__category {
    margin: 0;
    color: var(--color-forest);
    font-size: var(--text-h4);
}
.availability__months,
.availability__track {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 4px;   /* the space between month boxes; labels use the same, so they line up */
    margin: 0;
    padding: 0;
    list-style: none;
}
.availability__months {
    display: none;   /* phones: the initials in the boxes label the months */
    margin-top: var(--space-2);
    color: var(--color-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    text-transform: capitalize;   /* pt-PT abbreviations are lowercase */
}
.availability__months .is-now { color: var(--color-forest); font-weight: 800; }
.availability__abbr { display: none; }
.availability__list { margin: 0; padding: 0; list-style: none; }
.availability__row {
    position: relative;   /* holds the stretched link */
    padding-block: var(--space-3);
    border-top: 1px solid var(--color-line);
    transition: background-color 0.15s;
}
.availability__group .availability__row:first-child { border-top-color: transparent; }
.availability__name { display: flex; flex-direction: column; margin: 0; }
.availability__name a {
    color: var(--color-leaf);
    font-weight: 600;
    text-decoration: none;
}
.availability__name a::after { content: ""; position: absolute; inset: 0; }   /* the whole row is the link */
.availability__name a:focus-visible { outline: none; }
.availability__row:focus-within { outline: 3px solid var(--focus); outline-offset: -3px; }
@media (hover: hover) {
    .availability__row:hover { background: var(--color-fresh-wash); }
    .availability__row:hover a { text-decoration: underline; text-underline-offset: 0.2em; }
}
.availability__season { color: var(--color-muted); font-size: 0.875rem; }
.availability__season .placeholder-token { padding: 0; border: 0; font-size: 0.8125rem; }
.availability__track { height: 1.25rem; margin-top: var(--space-2); }
.availability__month {   /* one box per month, with the month's initial */
    display: grid;
    place-items: center;
    border-radius: 3px;
    background: var(--track);
    color: var(--color-muted);   /* 6.9:1 on the track */
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}
.availability__month.is-on { background: var(--color-leaf); color: #FFFFFF; }   /* 6.5:1 */
/* This month is a light box: Fresh Green when in season (dark letter 5.6:1, never white on
   Fresh Green), light yellow when not (forest letter), so it reads as one column down the page. */
.availability__month.is-now.is-on { background: var(--color-fresh); color: var(--color-forest-deep); }
.availability__month.is-now:not(.is-on) { background: var(--now-off); color: var(--color-forest); }
.availability__track--missing {
    display: block;
    border: 1px dashed var(--color-line);
    border-radius: 3px;
}
.availability__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
}
.availability__key-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.availability__key {
    display: inline-block;
    width: 1.5rem;
    height: 1.25rem;
    border-radius: 3px;
    background: var(--color-leaf);
}
.availability__key--now { background: var(--color-fresh); }
.availability__key--now-off { background: var(--now-off); }
@media (min-width: 48em) {
    .availability { padding: var(--space-4); }
    .availability__head,
    .availability__row {
        display: grid;
        grid-template-columns: 13rem 1fr;
        column-gap: var(--space-5);
        align-items: center;
    }
    .availability__months { display: grid; }
    .availability__months,
    .availability__track { margin-top: 0; }
    .availability__abbr { display: inline; }
    .availability__initial { display: none; }
    .availability__months,
    .availability__track { gap: 6px; }
    .availability__track { height: 1.375rem; }
    .availability__month { font-size: 0.75rem; }
}

/* =====================================================================
   Agro Services for Farmers (Phase 5, Section 4.5)
   ===================================================================== */
.h3 { font-size: var(--text-h3); }

/* Overview: the 11 category cards. The whole card is clickable through
   the stretched title link (as the product card). */
.service-grid {
    display: grid;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 40em) {
    .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
    .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
}
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-top: 4px solid var(--color-fresh);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.15s ease;
}
@media (hover: hover) {
    .service-card:hover { box-shadow: var(--shadow-lg); }
}
.service-card .photo img { border-radius: 0; box-shadow: none; }
.service-card__body {
    display: grid;
    grid-template-columns: auto 1fr;
    align-content: start;
    gap: var(--space-2) var(--space-3);
    flex: 1;
    padding: var(--space-4) var(--space-5) var(--space-5);
}
.service-card__number {
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: 800;
    line-height: 1.3;
    color: var(--color-leaf);
}
.service-card__title { font-size: var(--text-h4); line-height: 1.3; }
.service-card__link {
    color: var(--color-forest);
    text-decoration: none;
}
.service-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); }
@media (hover: hover) {
    .service-card:hover .service-card__link { color: var(--color-leaf); }
}
.service-card:has(.service-card__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.service-card__link:focus-visible { outline: none; }
.service-card__items {
    grid-column: 2;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}
.service-card__items li { display: inline; }
.service-card__items li + li::before { content: " · "; }
.service-card__more { grid-column: 2; align-self: end; margin-top: var(--space-2); }
.service-card__more .icon { width: 1.5rem; height: 1.5rem; }

/* Category page: photo first on a phone (the H1 is just above), intro + list of
   services beside it on wide screens, both aligned to the top */
@media (min-width: 64em) {
    .split--top { grid-template-rows: 0 auto auto 1fr; }
    .split--top .split__media { align-self: start; }
}
.agro-intro > h2 { margin-top: var(--space-6); }
.agro-intro > h2 + .tick-list { margin-top: var(--space-3); }
.tick-list {
    display: grid;
    gap: 0 var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--color-line);
}
@media (min-width: 40em) {
    .tick-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tick-list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 3rem;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-line);
    font-weight: 600;
    color: var(--color-forest);
}
.tick-list .icon { width: 1.5rem; height: 1.5rem; }

/* ---- Freski Farm Market (/market) --------------------------------------- */
.page-shortcuts { padding-top: var(--space-6); }   /* chips to the page's sections (Market, Our Farm) */

/* Fresh Produce · Meat · Grocery: stacked on phones, side by side from 768 px */
.department-grid { display: grid; gap: var(--space-4); }
@media (min-width: 48em) {
    .department-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
.department-card { border-top: 4px solid var(--color-fresh); }
.department-card > * + * { margin-top: var(--space-3); }
.department-card__icon .icon { width: 2.25rem; height: 2.25rem; }
.department-card__items { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line); }
.department-card__items li {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-line);
    font-weight: 600;
    color: var(--color-forest);
}

/* Visit Our Market: one column of contact details (buttons are in the closing CTA) */
/* Visit Our Market (#visit) is the closing banner: details, then the buttons (owner, 2026-10-18).
   One column on phones, two from 768 px. Phone + WhatsApp links get a 44 px tap height. */
.cta-banner--visit .contact-list { justify-self: stretch; max-width: 52rem; gap: var(--space-4); text-wrap: pretty; }
.cta-banner--visit .contact-list a:not(.social__link) {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    font-weight: 600;
}
@media (min-width: 48em) {
    .cta-banner--visit .contact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
}
.cta-banner--visit .button-row { margin-top: var(--space-2); }
.gallery-empty { max-width: 36rem; }   /* the placeholder while a gallery is empty */

/* ---- Our Farm (/our-farm) ------------------------------------------------ */
/* Header: "From Our Farm to Your Table" is the page's main message (Phase 7) */
.page-header--feature {
    padding-block: var(--space-8) var(--space-7);
    background: var(--color-forest);
}
.page-header--feature h1 {
    max-width: 18ch;
    font-size: clamp(2.5rem, 1.4rem + 5.2vw, 4.75rem);
    line-height: 1.05;
}
.page-header--feature .lead { color: rgb(255 255 255 / 0.92); font-weight: 600; }

.stack > .farm-gallery-title { margin-top: var(--space-6); }

/* Galleries (Farm, Market, Agro Services photos): one large photo on a stage + a
   filmstrip of thumbnails (owner, 2026-10-17 / 18). Without JavaScript the stage is a swipeable row with a scroll bar;
   main.js adds .is-ready, the arrows, the counter and the filmstrip. */
.stack > * + .stage { margin-top: var(--space-4); }
.stage__viewport { position: relative; }
.stage__track {
    display: flex;
    align-items: start;
    margin: 0;
    padding: 0;
    list-style: none;
    /* Sideways only. With the default (auto) the hidden "(enlarge photo)" labels made it
       1 px scrollable up/down, and phones then gave straight up/down swipes on the photo
       to the stage instead of the page: the page didn't scroll. */
    overflow: auto hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    border-radius: var(--radius);
    background: var(--color-forest-deep);
    box-shadow: var(--shadow);
}
.stage.is-ready .stage__track { scrollbar-width: none; }
.stage.is-ready .stage__track::-webkit-scrollbar { display: none; }
.stage__slide {
    position: relative;
    flex: 0 0 100%;
    aspect-ratio: 4 / 5;
    max-height: 75vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
@media (min-width: 40em) {
    .stage__slide { aspect-ratio: 3 / 2; }
}
@media (min-width: 64em) {
    .stage__slide { aspect-ratio: 16 / 9; max-height: min(75vh, 42rem); }
}
.stage__figure { height: 100%; margin: 0; }
.stage__link { display: block; height: 100%; cursor: zoom-in; }
.stage__media { display: block; width: 100%; height: 100%; object-fit: cover; }
.stage__slide--video .stage__media { object-fit: contain; }   /* keep the player controls whole */
.stage__caption {
    position: absolute;
    inset: auto 0 0;
    padding: var(--space-7) var(--space-4) var(--space-4);
    background: linear-gradient(to top, rgb(14 20 16 / 0.8), transparent);
    color: #FFFFFF;
    font-weight: 600;
    pointer-events: none;
}
.stage__slide--video .stage__caption {   /* at the top, clear of the player controls */
    inset: 0 0 auto;
    padding: var(--space-4) var(--space-4) var(--space-7);
    background: linear-gradient(to bottom, rgb(14 20 16 / 0.8), transparent);
}
.stage__arrow {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.92);
    color: var(--color-forest);
    box-shadow: var(--shadow);
    transform: translateY(-50%);
    cursor: pointer;
}
.stage__arrow--prev { left: var(--space-3); }
.stage__arrow--next { right: var(--space-3); }
.stage__arrow .icon { width: 1.5rem; height: 1.5rem; color: currentColor; }
.stage__arrow--prev .icon { transform: rotate(180deg); }
@media (hover: hover) {
    .stage__arrow:hover { background: var(--color-yellow); color: var(--color-forest-deep); }
}
.stage__counter {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    margin: 0;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: rgb(14 20 16 / 0.72);
    color: #FFFFFF;
    font-size: var(--text-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.stage__arrow[hidden], .stage__counter[hidden], .filmstrip[hidden] { display: none; }

.filmstrip {
    position: relative;   /* offsetParent of the thumbnails: main.js centres the current one */
    display: flex;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: 4px;         /* room for the focus outline inside the scroll area */
    list-style: none;
    overflow: auto hidden;   /* sideways only, so up/down swipes scroll the page (see .stage__track) */
    scrollbar-width: thin;
}
.filmstrip > li { flex: none; }
.filmstrip > li:first-child { margin-left: auto; }   /* centred while it fits, still scrolls from */
.filmstrip > li:last-child { margin-right: auto; }   /* the first one when it doesn't */
.filmstrip__thumb {
    position: relative;
    display: block;
    width: 5.5rem;
    aspect-ratio: 4 / 3;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-forest-deep);
    opacity: 0.6;
    cursor: pointer;
    transition: opacity 0.2s ease;
}
@media (min-width: 64em) {
    .filmstrip__thumb { width: 7rem; }
}
.filmstrip__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.filmstrip__thumb::after {   /* the frame of the photo on the stage */
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid transparent;
    border-radius: inherit;
}
.filmstrip__thumb[aria-current="true"] { opacity: 1; }
.filmstrip__thumb[aria-current="true"]::after { border-color: var(--color-yellow); }
@media (hover: hover) {
    .filmstrip__thumb:hover { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .filmstrip__thumb { transition: none; }
}
.filmstrip__badge {
    position: absolute;
    right: 4px;
    bottom: 4px;
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: rgb(14 20 16 / 0.75);
    color: #FFFFFF;
}
.filmstrip__badge .icon { width: 0.875rem; height: 0.875rem; color: currentColor; }

/* Desktop (owner, 2026-10-17): the stage at three-fifths of the width (its 16:9 shape
   sets the height), the thumbnails in three columns beside it, as tall as the photo
   (scrolls when there are more). */
@media (min-width: 64em) {
    .stage.is-ready {
        display: grid;
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: var(--space-4);
        align-items: start;
    }
    .stage.is-ready .filmstrip {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-content: start;
        align-self: stretch;
        height: 0;            /* the photo sets the row height, */
        min-height: 100%;     /* the column fills it and scrolls */
        margin: 0;
        overflow: hidden auto;
    }
    .stage.is-ready .filmstrip > li { margin: 0; }
    .stage.is-ready .filmstrip__thumb { width: 100%; }
}

/* Farm to Market: a vertical line on phones, a row of five from 768 px */
.timeline {
    display: grid;
    gap: var(--space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}
.stack > * + .timeline { margin-top: var(--space-6); }
.timeline__step { position: relative; display: flex; align-items: center; gap: var(--space-4); }
.timeline__step:not(:last-child)::after {   /* the line to the next step */
    content: "";
    position: absolute;
    left: calc(2rem - 1.5px);
    top: 4rem;
    height: var(--space-5);
    width: 3px;
    background: var(--color-fresh);
}
.timeline__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 4rem;
    height: 4rem;
    border: 3px solid var(--color-fresh);
    border-radius: 50%;
    background: var(--color-surface);
}
.timeline__icon .icon { width: 1.875rem; height: 1.875rem; }
.timeline__step:last-child .timeline__icon { border-color: var(--color-forest); background: var(--color-forest); }
.timeline__step:last-child .timeline__icon .icon { color: var(--color-yellow); }
.timeline__body { display: grid; gap: var(--space-1); }
.timeline__title {
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-forest);
}
.timeline__text { color: var(--color-muted); font-size: var(--text-sm); }
@media (min-width: 48em) {
    .timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }
    .timeline__step { flex-direction: column; text-align: center; }
    .timeline__step:not(:last-child)::after {
        left: calc(50% + 2rem);
        top: calc(2rem - 1.5px);
        width: calc(100% + var(--space-4) - 4rem);
        height: 3px;
    }
}

/* Sustainability & Quality */
.quality-grid { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.stack > * + .quality-grid,
.stack > * + .team-grid { margin-top: var(--space-5); }
@media (min-width: 48em) {
    .quality-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.quality-card { display: grid; gap: var(--space-3); align-content: start; border-top: 4px solid var(--color-fresh); }
.quality-card__icon {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--color-fresh-tint);
}
.quality-card__title { font-size: var(--text-h4); }

/* Our Team: two per row on phones */
.team-grid {
    display: grid;
    gap: var(--space-5) var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}
.team-card { display: grid; gap: var(--space-1); align-content: start; }
.team-card .photo img,
.team-card .photo--placeholder { aspect-ratio: 4 / 5; }
.team-card .photo--placeholder .icon { width: 2.5rem; height: 2.5rem; }
.team-card__name { margin-top: var(--space-2); font-size: var(--text-h4); }
.team-card__role { color: var(--color-muted); font-size: var(--text-sm); }

/* ---- Gallery lightbox (all galleries) ------------------------------------ */
html.dialog-open { overflow: hidden; }
.lightbox {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
    border: 0;
    background: rgb(14 20 16);   /* solid near-black (owner, 2026-10-18): nothing of the page shows through */
    color: #FFFFFF;
    --focus: var(--color-yellow);
}
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-3); }
.lightbox::backdrop { background: rgb(14 20 16 / 0.6); }
.lightbox__figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--space-3); min-height: 0; margin: 0; }
.lightbox__image { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.lightbox__caption { text-align: center; color: rgb(255 255 255 / 0.9); font-size: var(--text-sm); }
.lightbox__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-4); }
.lightbox__nav[hidden] { display: none; }
.lightbox__counter { min-width: 9rem; text-align: center; font-variant-numeric: tabular-nums; }
.lightbox__button {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1.5px solid rgb(255 255 255 / 0.6);
    border-radius: 50%;
    background: transparent;
    color: #FFFFFF;
    cursor: pointer;
}
@media (hover: hover) {
    .lightbox__button:hover { background: rgb(255 255 255 / 0.14); }
}
.lightbox__button .icon { width: 1.5rem; height: 1.5rem; color: currentColor; }
/* Close: a solid white circle, so it is easy to find in its corner (owner, 2026-10-18) */
.lightbox__close { justify-self: end; border-color: #FFFFFF; background: #FFFFFF; color: var(--color-forest-deep); }
@media (hover: hover) {
    .lightbox__close:hover { border-color: var(--color-yellow); background: var(--color-yellow); color: var(--color-forest-deep); }
}
.lightbox__prev .icon { transform: rotate(180deg); }

/* ---- Contact (/contact, Phase 8) ---------------------------------------- */
/* FreskiFarm and Freski Farm Market, each its own card with its own details
   (owner, 2026-10-18): stacked on phones, side by side from tablet up, both
   cards the same height (owner, 2026-10-18). Links are tap targets (≥ 44 px). */
.contact-places { display: grid; gap: var(--space-4); }
@media (min-width: 48em) {
    .contact-places { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
}
.contact-place {
    display: grid;
    align-content: start;   /* the shorter card's extra height goes below its details */
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    text-wrap: pretty;   /* so "10 C" doesn't break off alone, as in Visit Our Market */
}
.contact-place__title {
    font-size: var(--text-h3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-line);
}
.contact-list--page a:not(.social__link) {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    font-weight: 600;
}
.social--light .social__link { border-color: var(--color-field); }
.social--light .social__link .icon { color: var(--color-leaf); }
/* On a light green section the light green fill would not show: fill leaf, white icon */
@media (hover: hover) {
    .social--light .social__link:hover { background: var(--color-leaf); border-color: var(--color-leaf); }
    .social--light .social__link:hover .icon { color: #FFFFFF; }
}

/* ---- Privacy, Cookie Policy, Terms (Phase 11) ---------------------------- */
.legal { max-width: 46rem; }
.legal h2 { font-size: var(--text-h3); }
.legal .lead { color: var(--color-muted); }
.stack > .legal__section { margin-top: var(--space-6); }
.legal__section > * + * { margin-top: var(--space-3); }
.legal__list { padding-left: 1.25em; }
.legal__list li + li { margin-top: var(--space-2); }
/* Cookie table: on phones each cookie is a block (name, then "What it does: …",
   "How long: …", labels from data-label); a real table from 40em. */
.legal__table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.legal__table th, .legal__table td { text-align: left; vertical-align: top; }
.legal__table code { font-size: 0.95em; font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 39.99em) {
    .legal__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .legal__table tr { display: block; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); }
    .legal__table th, .legal__table td { display: block; }
    .legal__table td { margin-top: var(--space-1); }
    .legal__table td::before { content: attr(data-label) ": "; color: var(--color-muted); font-weight: 600; }
}
@media (min-width: 40em) {
    .legal__table th, .legal__table td { padding: var(--space-2) var(--space-3) var(--space-2) 0; border-bottom: 1px solid var(--color-line); }
    .legal__table thead th { color: var(--color-muted); }
}

/* ---- Cookie notice (Phase 11) ----------------------------------------------
   Shown once (main.js remembers "OK"). Only necessary cookies are used, so there
   is nothing to accept or refuse: it informs. Fixed in place, so the page never
   jumps when it appears; on phones it sits above the action bar.             */
.cookie-notice {
    position: fixed;
    right: var(--gutter);
    bottom: calc(72px + env(safe-area-inset-bottom));
    left: var(--gutter);
    z-index: 45;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
    font-size: var(--text-sm);
}
.no-action-bar .cookie-notice { bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }   /* nothing below it to clear */
.cookie-notice[hidden] { display: none; }
.cookie-notice p { flex: 1 1 14rem; margin: 0; }
.cookie-notice a { color: var(--color-leaf); font-weight: 600; }
.cookie-notice__ok { min-width: 6rem; }
@media (min-width: 64em) {
    .cookie-notice { right: auto; bottom: var(--space-4); left: var(--space-4); max-width: 30rem; }
}

/* ---- Motion preferences (Section 15) -------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .pillar-card:hover { transform: none; }
}
body.minimal { padding-bottom: 0; }