/* ==========================================================================
   CocoSeller — Homepage
   Loaded only on the front page (see inc/enqueue.php).
   Mobile-first. Composition changes at 48em and 62em rather than simply
   shrinking; the mobile layout is designed, not squeezed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HERO
   Mobile: copy first, then media. Desktop: asymmetric split with the media
   column bleeding to the right edge, leaving negative space for the headline.
   -------------------------------------------------------------------------- */

.c-hero {
    position: relative;
    overflow: hidden;
    padding-block-start: var(--space-2xl);
    padding-block-end: var(--space-section);
    background-color: var(--color-bg);
}

/* A very soft substrate wash behind the whole hero. */
.c-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: var(--z-below);
    pointer-events: none;
    background:
        radial-gradient(60% 55% at 88% 8%, var(--coco-green-50) 0%, transparent 62%),
        radial-gradient(45% 40% at 4% 96%, var(--coco-coir-50) 0%, transparent 60%);
}

.c-hero__inner {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
}

.c-hero__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 34rem;
}

.c-hero__title {
    margin: 0;
    font-size: var(--text-5xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    text-wrap: balance;
}

.c-hero__lead {
    max-width: 42ch;
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
}

.c-hero__actions {
    --cluster-gap: var(--space-xs);
    margin-block-start: var(--space-2xs);
}

.c-hero__facts {
    --cluster-gap: var(--space-xs);
    margin: var(--space-md) 0 0;
    padding: var(--space-md) 0 0;
    list-style: none;
    border-top: var(--border-hairline);
}

.c-hero__facts li {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
}

.c-hero__facts li::before {
    content: "";
    inline-size: 0.3125rem;
    block-size: 0.3125rem;
    border-radius: var(--radius-circle);
    background-color: var(--color-brand);
    flex: none;
}

/* Media column */
.c-hero__media {
    position: relative;
    isolation: isolate;
}

.c-hero__figure {
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.c-hero__figure.l-media { --media-ratio: var(--ratio-tall); }

/*
 * Art direction. Two separately supplied photographs are switched with
 * <picture> at 62em; object-fit then settles each one into its ratio box.
 * Mobile is a 4:5 frame and holds the centre; desktop is 3:4 beside the
 * headline, so the frame sits a little high to keep the horizon off centre.
 */
.c-hero__figure { --media-position: 50% 50%; }

.c-hero__picture { display: block; inline-size: 100%; block-size: 100%; }

.c-hero__image { width: 100%; height: 100%; object-fit: cover; }

/* Decorative substrate drift — five slow-moving motes, purely ornamental. */
.c-hero__drift {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
    border-radius: var(--radius-xl);
}

.c-hero__particle {
    position: absolute;
    display: block;
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-radius: var(--radius-circle);
    background-color: var(--coco-coir-200);
    opacity: 0;
}

.js .c-hero__drift.is-active .c-hero__particle {
    animation: cocoseller-drift var(--drift-duration, 15s) var(--drift-delay, 0s) infinite linear;
}

.c-hero__particle:nth-child(1) { left: 12%; --drift-duration: 17s; --drift-delay: 0s; }
.c-hero__particle:nth-child(2) { left: 34%; --drift-duration: 21s; --drift-delay: 3s; }
.c-hero__particle:nth-child(3) { left: 56%; --drift-duration: 15s; --drift-delay: 6s; }
.c-hero__particle:nth-child(4) { left: 73%; --drift-duration: 24s; --drift-delay: 2s; }
.c-hero__particle:nth-child(5) { left: 89%; --drift-duration: 19s; --drift-delay: 8s; }

@keyframes cocoseller-drift {
    0%   { transform: translate3d(0, 108%, 0) scale(0.7); opacity: 0; }
    12%  { opacity: 0.5; }
    80%  { opacity: 0.35; }
    100% { transform: translate3d(1.5rem, -12%, 0) scale(1); opacity: 0; }
}

@media (min-width: 48em) {
    .c-hero__title { font-size: var(--text-6xl); }
}

@media (min-width: 62em) {
    .c-hero {
        padding-block-start: var(--space-3xl);
    }

    .c-hero__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: var(--space-2xl);
        min-height: 33rem;
    }

    .c-hero__copy { max-width: 38rem; }

    .c-hero__figure.l-media,
    .c-hero__figure.c-placeholder { --media-ratio: var(--ratio-portrait); --placeholder-ratio: var(--ratio-portrait); }

    .c-hero__figure { --media-position: 50% 45%; }
}

@media (min-width: 75em) {
    .c-hero__inner { gap: var(--space-3xl); }
}

/* --------------------------------------------------------------------------
   2. PRODUCT GRID
   Mobile: single column. 48em: two. 62em: three, with the first card
   spanning two columns so the grid reads editorially rather than as a matrix.
   -------------------------------------------------------------------------- */

.c-product-grid {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: minmax(0, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-product-card { display: flex; }

.c-product-card__link {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--color-surface);
    border: var(--border-hairline);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard);
}

.c-product-card__link:hover {
    transform: translateY(-3px);
    border-color: var(--color-border-brand);
    box-shadow: var(--shadow-md);
    color: inherit;
}

.c-product-card__media {
    --placeholder-ratio: var(--ratio-landscape);
    border-radius: 0;
    flex: none;
}

.c-product-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-md);
    flex: 1 1 auto;
}

.c-product-card__title {
    color: var(--color-heading);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

.c-product-card__text {
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    flex: 1 1 auto;
}

.c-product-card .c-link-arrow { margin-block-start: var(--space-2xs); }

.c-product-card__link:hover .c-link-arrow::after { transform: translateX(0.25rem); }

@media (min-width: 48em) {
    .c-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62em) {
    .c-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Lead card takes two columns and a wider crop. */
    .c-product-card:first-child { grid-column: span 2; }

    .c-product-card:first-child .c-product-card__media { --placeholder-ratio: var(--ratio-wide); }

    .c-product-card:first-child .c-product-card__title { font-size: var(--text-2xl); }
}

/* --------------------------------------------------------------------------
   3. CROP GRID
   Tall photographic cards. Mobile scrolls horizontally so the crop set reads
   as a deliberate row rather than a long stack.
   -------------------------------------------------------------------------- */

.c-crop-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 68vw;
    gap: var(--space-sm);
    margin: 0;
    padding: 0 var(--container-gutter) var(--space-2xs);
    margin-inline: calc(var(--container-gutter) * -1);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.c-crop-card { scroll-snap-align: start; }

.c-crop-card__link {
    position: relative;
    display: block;
    height: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    isolation: isolate;
    transition: transform var(--duration-base) var(--ease-out);
}

.c-crop-card__link:hover { transform: translateY(-3px); }

.c-crop-card__media {
    border-radius: 0;
    height: 100%;
    transition: transform var(--duration-slow) var(--ease-out);
}

.c-crop-card__link:hover .c-crop-card__media { transform: scale(1.04); }

.c-crop-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--color-scrim);
}

.c-crop-card__body {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: var(--space-md);
}

.c-crop-card__title {
    color: var(--coco-cream-50);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-tight);
}

.c-crop-card__note {
    color: var(--coco-green-200);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
}

@media (min-width: 48em) {
    .c-crop-grid {
        grid-auto-flow: row;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--gap-grid);
        margin-inline: 0;
        padding-inline: 0;
        overflow-x: visible;
    }
}

@media (min-width: 62em) {
    .c-crop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* Seven crops across four columns: the first spans two to close the row. */
    .c-crop-card:first-child { grid-column: span 2; }

    .c-crop-card:first-child .c-crop-card__media { --placeholder-ratio: var(--ratio-landscape); }

    .c-crop-card:first-child .c-crop-card__title { font-size: var(--text-2xl); }
}

/* --------------------------------------------------------------------------
   4. SUBSTRATE ENGINEERING
   -------------------------------------------------------------------------- */

.c-engineering__head { margin-block-end: var(--space-2xl); }

.c-engineering__grid {
    display: grid;
    gap: var(--space-2xl);
    align-items: start;
}

.c-blend__title,
.c-params__title,
.c-quality__subtitle {
    margin-block-end: var(--space-2xs);
    font-size: var(--text-xl);
}

.c-blend__intro {
    max-width: 46ch;
    margin-block-end: var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--text-base);
}

/* Table scrolls inside its own container, never the page. */
.c-blend__scroll {
    overflow-x: auto;
    margin-inline: calc(var(--space-sm) * -1);
    padding-inline: var(--space-sm);
}

.c-blend__table {
    width: 100%;
    min-width: 30rem;
    border-collapse: collapse;
}

.c-blend__table th,
.c-blend__table td {
    padding: var(--space-sm) var(--space-xs);
    border-bottom: var(--border-width) solid var(--color-border);
    vertical-align: middle;
    text-align: left;
}

.c-blend__table thead th {
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
}

.c-blend__ratio {
    color: var(--color-heading);
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.c-blend__whc {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    white-space: nowrap;
}

.c-blend__afp-inner {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.c-blend__bar {
    position: relative;
    display: block;
    flex: 1 1 auto;
    min-inline-size: 3rem;
    block-size: 0.375rem;
    border-radius: var(--radius-pill);
    background-color: var(--color-border-subtle);
    overflow: hidden;
}

.c-blend__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--bar, 0%);
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--coco-green-400), var(--coco-coir-400));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-slower) var(--ease-out) var(--bar-delay, 0ms);
}

/* Bars fill once the table is revealed. */
.js .c-blend__table.is-revealed .c-blend__fill,
.c-blend__table.is-metrics-ready .c-blend__fill { transform: scaleX(1); }

.c-blend__value {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    white-space: nowrap;
    min-inline-size: 3.5rem;
    text-align: right;
}

.c-blend__foot {
    margin-block-start: var(--space-md);
    max-width: 58ch;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

/* Parameter list */
.c-params__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--border-width) solid var(--color-border);
}

.c-param {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 var(--space-sm);
    padding-block: var(--space-sm);
    border-bottom: var(--border-width) solid var(--color-border);
}

.c-param__label {
    color: var(--color-text-strong);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
}

.c-param__value {
    color: var(--color-brand);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-align: right;
    white-space: nowrap;
}

.c-param__note {
    grid-column: 1 / -1;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}

.c-engineering__cta { margin-block-start: var(--space-xl); }

@media (min-width: 48em) {
    .c-params__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }

    .c-params__list .c-param:nth-child(2) { border-top: 0; }
}

@media (min-width: 62em) {
    .c-engineering__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-3xl); }

    .c-params__list { grid-template-columns: minmax(0, 1fr); }

    .c-engineering__head { max-width: 46rem; }
}

/* --------------------------------------------------------------------------
   5. MANUFACTURER + PROCESS LINE
   Mobile/tablet: vertical process with a progress line down the left.
   Desktop: horizontal track with a progress line across.
   -------------------------------------------------------------------------- */

.c-manufacture__top {
    display: grid;
    gap: var(--space-xl);
    margin-block-end: var(--space-2xl);
    align-items: center;
}

.c-manufacture__media .c-placeholder,
.c-manufacture__media .c-media-frame { width: 100%; }

.c-process { position: relative; }

.c-process__track {
    position: absolute;
    inset-block: 0.75rem auto;
    inset-inline-start: 0.5625rem;
    inline-size: 2px;
    block-size: calc(100% - 1.5rem);
}

.c-process__line,
.c-process__progress {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    border-radius: var(--radius-pill);
}

.c-process__line {
    block-size: 100%;
    background-color: var(--color-border);
}

.c-process__progress {
    block-size: 100%;
    background: linear-gradient(180deg, var(--coco-green-500), var(--coco-coir-500));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--duration-slower) var(--ease-out);
}

.js .c-process.is-running .c-process__progress { transform: scaleY(1); }

.c-process__list {
    display: grid;
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.c-process__step {
    position: relative;
    padding-inline-start: var(--space-xl);
}

.c-process__dot {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.375rem;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border-radius: var(--radius-circle);
    background-color: var(--color-bg);
    border: 2px solid var(--color-border-strong);
    transition: border-color var(--duration-base) var(--ease-standard),
                background-color var(--duration-base) var(--ease-standard);
}

.c-process__step.is-revealed .c-process__dot {
    border-color: var(--color-brand);
    background-color: var(--color-brand);
}

.c-process__index {
    display: block;
    color: var(--color-text-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-wide);
}

.c-process__label {
    display: block;
    color: var(--color-heading);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-tight);
}

.c-process__note {
    display: block;
    margin-block-start: 0.125rem;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}

.c-manufacture__cta { margin-block-start: var(--space-xl); }

@media (min-width: 48em) {
    .c-process__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
}

@media (min-width: 62em) {
    .c-manufacture__top { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--space-2xl); }
}

/* Ten steps only go horizontal once there is genuine room for them; below
   this the vertical two-column list is the better composition. */
@media (min-width: 82em) {

    /* Horizontal track */
    .c-process__track {
        inset-block-start: 0.375rem;
        inset-inline: 0;
        inline-size: 100%;
        block-size: 2px;
    }

    .c-process__line,
    .c-process__progress { block-size: 2px; inline-size: 100%; }

    .c-process__progress {
        transform: scaleX(0);
        transform-origin: left;
    }

    .js .c-process.is-running .c-process__progress { transform: scaleX(1); }

    .c-process__list {
        grid-template-columns: repeat(10, minmax(0, 1fr));
        gap: var(--space-sm);
        padding-block-start: var(--space-lg);
    }

    .c-process__step { padding-inline-start: 0; }

    .c-process__dot { inset-block-start: -1.5rem; }

    .c-process__label { font-size: var(--text-base); }

    .c-process__note { font-size: 0.6875rem; }
}

/* --------------------------------------------------------------------------
   6. QUALITY
   -------------------------------------------------------------------------- */

.c-quality__grid {
    display: grid;
    gap: var(--space-2xl);
    align-items: start;
}

.c-test-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--border-hairline);
}

.c-test {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding-block: var(--space-xs);
    border-bottom: var(--border-hairline);
    font-size: var(--text-base);
}

.c-test__mark {
    position: relative;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    flex: none;
    border-radius: var(--radius-circle);
    border: var(--border-width) solid var(--color-border-brand);
}

.c-test__mark::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    inline-size: 0.375rem;
    block-size: 0.375rem;
    border-radius: var(--radius-circle);
    background-color: var(--color-brand);
    transform: translate(-50%, -50%) scale(0);
    transition: transform var(--duration-base) var(--ease-out);
}

.c-test.is-revealed .c-test__mark::after { transform: translate(-50%, -50%) scale(1); }

.c-quality__note {
    margin-block-start: var(--space-md);
    max-width: 56ch;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.c-quality__plain {
    padding: var(--space-lg);
    background-color: var(--color-surface);
    border: var(--border-hairline);
    border-radius: var(--radius-lg);
}

.c-quality__plain-title {
    margin-block-end: var(--space-sm);
    font-family: var(--font-eyebrow);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-brand);
}

.c-quality__plain-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-quality__plain-list li {
    padding-inline-start: var(--space-md);
    position: relative;
    color: var(--color-text);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

.c-quality__plain-list li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.6em;
    inline-size: var(--space-2xs);
    block-size: var(--border-width);
    background-color: var(--color-brand);
}

.c-quality__plain-foot { margin-block-start: var(--space-lg); }

@media (min-width: 48em) {
    .c-test-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }

    .c-test-grid .c-test:nth-child(2) { border-top: 0; }
}

@media (min-width: 62em) {
    .c-quality__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-3xl); }

    .c-test-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-lg); }

    .c-quality__plain { position: sticky; top: calc(var(--header-height) + var(--space-md)); }
}

/* --------------------------------------------------------------------------
   7. CUSTOM MANUFACTURING
   -------------------------------------------------------------------------- */

.c-custom__layout {
    display: grid;
    gap: var(--space-2xl);
    align-items: start;
}

.c-custom__cta { margin-block-start: var(--space-lg); }

.c-custom__list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--border-hairline);
}

.c-custom__item {
    display: grid;
    gap: 0.125rem;
    padding-block: var(--space-sm);
    border-bottom: var(--border-hairline);
}

.c-custom__label {
    color: var(--color-heading);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-tight);
}

.c-custom__note {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

@media (min-width: 48em) {
    .c-custom__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }

    .c-custom__list .c-custom__item:nth-child(2) { border-top: 0; }
}

@media (min-width: 62em) {
    .c-custom__layout { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-3xl); }

    .c-custom__intro { position: sticky; top: calc(var(--header-height) + var(--space-lg)); }
}

/* --------------------------------------------------------------------------
   8. EXPORT
   -------------------------------------------------------------------------- */

.c-export__layout {
    display: grid;
    gap: var(--space-2xl);
    align-items: start;
}

.c-export__ports {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2xs) var(--space-md);
    margin: var(--space-xl) 0 0;
    padding-block-start: var(--space-md);
    border-top: var(--border-width) solid var(--color-border);
}

.c-export__ports dt {
    color: var(--color-text-muted);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    padding-block-start: 0.2em;
}

.c-export__ports dd {
    margin: 0;
    color: var(--color-text-strong);
    font-size: var(--text-base);
}

.c-export__cta { margin-block-start: var(--space-xl); }

.c-export__side {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.c-export__markets-title {
    margin-block-end: var(--space-sm);
    font-family: var(--font-eyebrow);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-brand);
}

.c-export__market-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.c-export__market-list li {
    padding: 0.375rem var(--space-xs);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
}

.c-export__markets-note {
    margin-block-start: var(--space-md);
    max-width: 46ch;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

@media (min-width: 62em) {
    .c-export__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); }
}

/* --------------------------------------------------------------------------
   9. TECHNICAL GUIDES
   A numbered reference shelf, not a card grid.
   -------------------------------------------------------------------------- */

.c-guide-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: var(--border-hairline);
}

.c-guide { border-bottom: var(--border-hairline); }

.c-guide__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-sm) var(--space-md);
    align-items: start;
    padding-block: var(--space-lg);
    text-decoration: none;
    color: inherit;
    transition: var(--transition-colors);
}

.c-guide__link:hover { color: inherit; }

.c-guide__index {
    color: var(--color-text-subtle);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    padding-block-start: 0.45em;
    transition: color var(--duration-base) var(--ease-standard);
}

.c-guide__link:hover .c-guide__index { color: var(--color-brand); }

.c-guide__body { display: grid; gap: 0.25rem; }

.c-guide__kicker {
    color: var(--color-brand);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
}

.c-guide__title {
    color: var(--color-heading);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-tight);
}

.c-guide__text {
    max-width: 62ch;
    color: var(--color-text-muted);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

.c-guide__arrow {
    position: relative;
    inline-size: 1.5rem;
    block-size: var(--border-width);
    margin-block-start: 0.9em;
    background-color: var(--color-border-strong);
    transition: transform var(--duration-base) var(--ease-out),
                background-color var(--duration-base) var(--ease-standard);
}

.c-guide__link:hover .c-guide__arrow {
    transform: translateX(0.375rem);
    background-color: var(--color-brand);
}

@media (max-width: 47.99em) {
    .c-guide__link { grid-template-columns: auto minmax(0, 1fr); }

    .c-guide__arrow { display: none; }
}

/* --------------------------------------------------------------------------
   10. CLOSING CTA
   -------------------------------------------------------------------------- */

.c-closing { text-align: center; }

.c-closing__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.c-closing__title {
    max-width: 20ch;
    margin: 0;
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
}

.c-closing__lead {
    max-width: 58ch;
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
}

.c-closing__actions {
    --cluster-gap: var(--space-xs);
    justify-content: center;
    margin-block-start: var(--space-sm);
}

.c-closing__form {
    width: 100%;
    max-width: 40rem;
    margin-block-start: var(--space-xl);
    text-align: left;
}

.c-closing__meta {
    margin-block-start: var(--space-lg);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.c-closing__meta a { color: var(--color-text-inverse); }

@media (min-width: 48em) {
    .c-closing__title { font-size: var(--text-5xl); }
}

/* --------------------------------------------------------------------------
   11. Reduced motion — neutralise every homepage-specific animation
   -------------------------------------------------------------------------- */

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

    .c-hero__drift { display: none; }

    .c-blend__fill,
    .c-process__progress {
        transform: none !important;
        transition: none !important;
    }

    .c-test__mark::after { transform: translate(-50%, -50%) scale(1) !important; }

    .c-process__dot {
        border-color: var(--color-brand);
        background-color: var(--color-brand);
    }

    .c-product-card__link:hover,
    .c-crop-card__link:hover { transform: none; }

    .c-crop-card__link:hover .c-crop-card__media { transform: none; }
}