/* ============================================================
   TIMIZA AGRO MACHINERY - HOMEPAGE & FOOTER (v5)
   ------------------------------------------------------------
   Loaded AFTER ui-v4.css. Everything here is additive: new
   `tfm-ag-*` classes for the rebuilt homepage and footer. Drop
   this file (dequeue 'tfm-agro-home') and the previous design
   is still intact underneath.

   Direction - "the stock board".
   Timiza Agro is a yard in Naivasha with a painted signboard and
   a price list. The page borrows that: a board-green surface for
   the loud moments, stone-grey paper in between, prices set as a
   ruled list with tabular figures in an ochre that reads like
   paint, and the marked-down price in a signwriter's red.

   Deliberately unlike timizafarmmachinery.co.ke:
     Farm                        Agro
     ----                        ----
     centred section headers  -> left-aligned, rule above
     icon card grids          -> ruled index rows with counts
     full-bleed hero carousel -> static board hero + photo mosaic
     equal rounded cards      -> mixed weights, square corners
     green + gold             -> board green + ochre + signal red
     4-column footer          -> directory footer, 2 zones
   ============================================================ */

.tfm-ag {
    --ag-board: #123A34;
    --ag-board-deep: #0C2A25;
    --ag-board-line: rgba(238, 243, 238, 0.16);
    --ag-ink: #17231F;
    --ag-ink-soft: #4A5A54;
    --ag-paper: #F1F3F1;
    --ag-paper-warm: #E8EBE7;
    --ag-rule: #D3DAD5;
    --ag-ochre: #E09B12;
    --ag-ochre-deep: #B87A08;
    --ag-signal: #C2361B;
    --ag-chalk: #F4F7F3;
    --ag-wa: #1FA855;

    --ag-shell: min(1240px, 100%);
    --ag-gap: clamp(18px, 3vw, 34px);
}

/* ---------- shared shell ---------- */
.tfm-ag-shell {
    width: var(--ag-shell);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
}

.tfm-ag-band { padding: clamp(44px, 6vw, 78px) 0; background: #fff; }
.tfm-ag-band--paper { background: var(--ag-paper); }
.tfm-ag-band--board { background: var(--ag-board); color: var(--ag-chalk); }
.tfm-ag-band--tight { padding: clamp(26px, 3.5vw, 40px) 0; }

/* Section heading: rule, then heading, then one line of plain talk.
   Left aligned with a wide right gutter - the opposite of the Farm
   site's centred header block. */
.tfm-ag-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 16px;
    border-top: 2px solid var(--ag-ink);
    padding-top: 14px;
    margin-bottom: clamp(22px, 3vw, 34px);
}
.tfm-ag-band--board .tfm-ag-head { border-top-color: var(--ag-ochre); }

.tfm-ag-head h2 {
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: clamp(1.5rem, 3.4vw, 2.3rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ag-ink);
    margin: 0 0 6px;
    max-width: 22ch;
}
.tfm-ag-band--board .tfm-ag-head h2 { color: var(--ag-chalk); }

.tfm-ag-head p {
    font-size: 0.98rem;
    color: var(--ag-ink-soft);
    max-width: 58ch;
    margin: 0;
}
.tfm-ag-band--board .tfm-ag-head p { color: rgba(244, 247, 243, 0.74); }

.tfm-ag-head-link {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--ag-ink);
    border-bottom: 2px solid var(--ag-ochre);
    padding-bottom: 2px;
    white-space: nowrap;
}
.tfm-ag-head-link:hover { color: var(--ag-ochre-deep); }
.tfm-ag-band--board .tfm-ag-head-link { color: var(--ag-chalk); }

/* ---------- buttons ---------- */
.tfm-ag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--tfm-font-heading);
    font-weight: 700;
    font-size: 0.97rem;
    line-height: 1;
    padding: 15px 24px;
    border: 2px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tfm-ag-btn-solid { background: var(--ag-ochre); color: var(--ag-ink); border-color: var(--ag-ochre); }
.tfm-ag-btn-solid:hover { background: var(--ag-ochre-deep); border-color: var(--ag-ochre-deep); color: #fff; }
.tfm-ag-btn-dark { background: var(--ag-board); color: var(--ag-chalk); border-color: var(--ag-board); }
.tfm-ag-btn-dark:hover { background: var(--ag-board-deep); border-color: var(--ag-board-deep); }
.tfm-ag-btn-line { background: transparent; color: var(--ag-chalk); border-color: rgba(244, 247, 243, 0.5); }
.tfm-ag-btn-line:hover { background: rgba(244, 247, 243, 0.12); border-color: var(--ag-chalk); }
.tfm-ag-btn-ink { background: transparent; color: var(--ag-ink); border-color: var(--ag-ink); }
.tfm-ag-btn-ink:hover { background: var(--ag-ink); color: #fff; }
.tfm-ag-btn-wa { background: var(--ag-wa); color: #fff; border-color: var(--ag-wa); }
.tfm-ag-btn-wa:hover { background: #178543; border-color: #178543; }

/* ============================================================
   1. PRICE DROP NOTICE
   ============================================================ */
.tfm-ag-drop-strip {
    background: var(--ag-signal);
    color: #fff;
    padding: 11px 0;
}
.tfm-ag-drop-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
}
.tfm-ag-drop-pct {
    font-family: var(--tfm-font-heading);
    font-weight: 900;
    font-size: 1.28rem;
    line-height: 1;
    letter-spacing: -0.02em;
    background: #fff;
    color: var(--ag-signal);
    padding: 6px 10px;
    border-radius: 3px;
}
.tfm-ag-drop-text { font-weight: 650; font-size: 0.96rem; }
.tfm-ag-drop-text span { opacity: 0.86; font-weight: 450; }
.tfm-ag-drop-link {
    margin-left: auto;
    font-weight: 700;
    font-size: 0.88rem;
    color: #fff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.6);
    padding-bottom: 1px;
}
.tfm-ag-drop-link:hover { border-bottom-color: #fff; }

/* ============================================================
   2. HERO - the painted board
   ============================================================ */
.tfm-ag-hero {
    background: var(--ag-board);
    color: var(--ag-chalk);
    padding: clamp(38px, 5.5vw, 74px) 0 0;
    position: relative;
    overflow: hidden;
}
.tfm-ag-hero::after {
    /* faint painted grain, so the board is not a flat rectangle */
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 12% 0%, rgba(224, 155, 18, 0.13), transparent 58%),
        radial-gradient(90% 70% at 100% 100%, rgba(0, 0, 0, 0.3), transparent 60%);
    pointer-events: none;
}
.tfm-ag-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(26px, 4vw, 56px);
    align-items: center;
}

.tfm-ag-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.86rem;
    font-weight: 650;
    color: var(--ag-ochre);
    margin-bottom: 16px;
}
.tfm-ag-hero-kicker::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--ag-ochre);
}

.tfm-ag-hero h1 {
    font-family: var(--tfm-font-heading);
    font-weight: 900;
    font-size: clamp(2.15rem, 5.4vw, 3.9rem);
    line-height: 0.98;
    letter-spacing: -0.032em;
    color: var(--ag-chalk);
    margin: 0 0 18px;
    max-width: 14ch;
}
.tfm-ag-hero h1 em {
    font-style: normal;
    display: block;
    color: var(--ag-ochre);
}
.tfm-ag-hero-lede {
    font-size: clamp(1rem, 1.45vw, 1.12rem);
    line-height: 1.6;
    color: rgba(244, 247, 243, 0.8);
    max-width: 46ch;
    margin: 0 0 26px;
}

.tfm-ag-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }

/* Ruled fact row - reads like the line under a price list, not like
   four identical stat cards. */
.tfm-ag-hero-facts {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--ag-board-line);
    padding-top: 18px;
    gap: 0;
}
.tfm-ag-hero-fact {
    padding: 0 20px 0 0;
    margin-right: 20px;
    border-right: 1px solid var(--ag-board-line);
}
.tfm-ag-hero-fact:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.tfm-ag-hero-fact strong {
    display: block;
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1.1;
    color: var(--ag-chalk);
    font-variant-numeric: tabular-nums;
}
.tfm-ag-hero-fact span { font-size: 0.8rem; color: rgba(244, 247, 243, 0.62); }

/* Photo mosaic - three real yard photos, offset, no carousel. */
.tfm-ag-hero-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    align-self: stretch;
    padding-bottom: clamp(38px, 5.5vw, 74px);
    align-content: center;
}
.tfm-ag-hero-shot {
    overflow: hidden;
    border-radius: 4px;
    background: var(--ag-board-deep);
    border: 1px solid var(--ag-board-line);
}
.tfm-ag-hero-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tfm-ag-hero-shot--tall { grid-row: span 2; min-height: 300px; }
.tfm-ag-hero-shot--wide { min-height: 145px; }

.tfm-ag-hero-note {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.84rem;
    color: rgba(244, 247, 243, 0.72);
    border-left: 3px solid var(--ag-ochre);
    padding-left: 12px;
}

/* ============================================================
   3. SEARCH - one ruled line, not a floating card
   ============================================================ */
.tfm-ag-find { background: var(--ag-board-deep); padding: 0 0 clamp(22px, 3vw, 30px); }
.tfm-ag-find-form {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}
.tfm-ag-find-field { display: flex; align-items: center; flex: 1; gap: 10px; padding: 0 16px; min-width: 0; }
.tfm-ag-find-field i { color: var(--ag-ink-soft); font-size: 0.95rem; }
.tfm-ag-find-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 1rem;
    color: var(--ag-ink);
    padding: 16px 0;
}
.tfm-ag-find-form button { border-radius: 0; padding: 15px 26px; }

.tfm-ag-find-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 12px;
    font-size: 0.84rem;
    color: rgba(244, 247, 243, 0.6);
}
.tfm-ag-find-hint {
    color: rgba(244, 247, 243, 0.88);
    border: 1px solid var(--ag-board-line);
    border-radius: 999px;
    padding: 5px 12px;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.tfm-ag-find-hint:hover { border-color: var(--ag-ochre); color: var(--ag-ochre); }

/* ============================================================
   4. PRICE TICKETS - the marked-down board
   ============================================================ */
.tfm-ag-rail-wrap { position: relative; }
.tfm-ag-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(212px, 1fr);
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;
    padding-bottom: 8px;
    scrollbar-width: thin;
}
/* Hidden by the rail script when everything already fits on screen. */
.tfm-ag-rail-nav[hidden] { display: none; }
.tfm-ag-rail > * { scroll-snap-align: start; }
.tfm-ag-rail::-webkit-scrollbar { height: 6px; }
.tfm-ag-rail::-webkit-scrollbar-thumb { background: var(--ag-rule); border-radius: 999px; }

.tfm-ag-rail-nav {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.tfm-ag-rail-btn {
    width: 42px;
    height: 42px;
    border: 2px solid var(--ag-ink);
    background: transparent;
    border-radius: 3px;
    color: var(--ag-ink);
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.tfm-ag-rail-btn:hover { background: var(--ag-ink); color: #fff; }
.tfm-ag-band--board .tfm-ag-rail-btn { border-color: rgba(244, 247, 243, 0.45); color: var(--ag-chalk); }
.tfm-ag-band--board .tfm-ag-rail-btn:hover { background: var(--ag-chalk); color: var(--ag-board); }

/* The ticket itself: a price tag, priced like a market board. */
.tfm-ag-ticket {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--ag-rule);
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.tfm-ag-ticket:hover { border-color: var(--ag-ink); }
.tfm-ag-ticket-img { position: relative; aspect-ratio: 4 / 3; background: var(--ag-paper-warm); }
.tfm-ag-ticket-img img { width: 100%; height: 100%; object-fit: cover; }
.tfm-ag-ticket-off {
    position: absolute;
    top: 8px;
    left: 8px;
    background: var(--ag-signal);
    color: #fff;
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: 0.78rem;
    padding: 4px 8px;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
}
.tfm-ag-ticket-body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tfm-ag-ticket-cat { font-size: 0.72rem; color: var(--ag-ink-soft); }
.tfm-ag-ticket-name {
    font-family: var(--tfm-font-heading);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.28;
    color: var(--ag-ink);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tfm-ag-ticket-prices { margin-top: auto; padding-top: 8px; }
.tfm-ag-ticket-was {
    font-size: 0.82rem;
    color: var(--ag-ink-soft);
    text-decoration: line-through;
    font-variant-numeric: tabular-nums;
}
.tfm-ag-ticket-now {
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: 1.16rem;
    color: var(--ag-signal);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

/* ============================================================
   5. THE TWO COUNTERS - full-width rows, not twin cards
   ============================================================ */
.tfm-ag-counter {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, 3.5vw, 48px);
    align-items: center;
    padding: clamp(26px, 3.5vw, 40px) 0;
    border-bottom: 1px solid var(--ag-rule);
}
.tfm-ag-counter:last-child { border-bottom: 0; }
.tfm-ag-counter--flip .tfm-ag-counter-media { order: -1; }

.tfm-ag-counter-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 4px;
    background: var(--ag-paper-warm);
}
.tfm-ag-counter-media img { width: 100%; height: 100%; object-fit: cover; }

.tfm-ag-counter h3 {
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: clamp(1.35rem, 2.6vw, 1.95rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
    color: var(--ag-ink);
}
.tfm-ag-counter p { color: var(--ag-ink-soft); max-width: 48ch; margin: 0 0 16px; }

.tfm-ag-counter-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.tfm-ag-counter-tag {
    font-size: 0.8rem;
    color: var(--ag-ink);
    background: var(--ag-paper-warm);
    border-radius: 3px;
    padding: 5px 10px;
}
.tfm-ag-counter-tag:hover { background: var(--ag-ochre); }

.tfm-ag-counter-count {
    font-variant-numeric: tabular-nums;
    font-size: 0.86rem;
    color: var(--ag-ink-soft);
    margin-bottom: 16px;
}
.tfm-ag-counter-count b { color: var(--ag-ink); font-size: 1.05rem; }

/* ============================================================
   6. STOCK INDEX - a price list, not an icon grid
   ============================================================ */
.tfm-ag-index-group + .tfm-ag-index-group { margin-top: 34px; }
.tfm-ag-index-title {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: 1.08rem;
    color: var(--ag-ink);
    margin: 0 0 4px;
}
.tfm-ag-index-title span { font-weight: 450; font-size: 0.85rem; color: var(--ag-ink-soft); font-variant-numeric: tabular-nums; }

.tfm-ag-index {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    column-gap: clamp(20px, 3vw, 44px);
}
.tfm-ag-index-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ag-rule);
    color: var(--ag-ink);
    transition: color 0.15s ease;
}
.tfm-ag-index-row:hover { color: var(--ag-ochre-deep); }
.tfm-ag-index-row i { color: var(--ag-ink-soft); font-size: 0.88rem; width: 18px; text-align: center; }
.tfm-ag-index-row:hover i { color: var(--ag-ochre-deep); }
.tfm-ag-index-name { font-weight: 650; font-size: 0.94rem; }
.tfm-ag-index-dots { flex: 1; border-bottom: 1px dotted var(--ag-rule); min-width: 12px; margin-bottom: 4px; }
.tfm-ag-index-count { font-size: 0.82rem; color: var(--ag-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================================================
   7. HOW PAYING WORKS - a ledger (a real sequence, so numbered)
   ============================================================ */
.tfm-ag-pay {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: clamp(24px, 4vw, 52px);
    align-items: start;
}
.tfm-ag-ledger { border-top: 1px solid var(--ag-board-line); }
.tfm-ag-ledger-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--ag-board-line);
}
.tfm-ag-ledger-n {
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--ag-ochre);
    font-variant-numeric: tabular-nums;
    padding-top: 2px;
}
.tfm-ag-ledger-row h4 {
    font-family: var(--tfm-font-heading);
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--ag-chalk);
    margin: 0 0 4px;
}
.tfm-ag-ledger-row p { font-size: 0.92rem; color: rgba(244, 247, 243, 0.72); margin: 0; max-width: 54ch; }

.tfm-ag-pay-aside { display: flex; flex-direction: column; gap: 14px; }
.tfm-ag-pay-terms {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--ag-board-line);
    border-radius: 4px;
    overflow: hidden;
    background: var(--ag-board-deep);
    cursor: zoom-in;
    position: relative;
}
.tfm-ag-pay-terms img { width: 100%; display: block; }
.tfm-ag-pay-terms span {
    display: block;
    padding: 10px 12px;
    font-size: 0.82rem;
    color: rgba(244, 247, 243, 0.78);
    text-align: left;
}
.tfm-ag-pay-note {
    font-size: 0.88rem;
    color: rgba(244, 247, 243, 0.7);
    border-left: 3px solid var(--ag-ochre);
    padding-left: 12px;
}

/* ============================================================
   8. THE YARD - asymmetric mosaic, captions underneath
   ============================================================ */
.tfm-ag-yard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.tfm-ag-yard-shot {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: zoom-in;
    width: 100%;
}
.tfm-ag-yard-shot:first-child { grid-column: span 2; grid-row: span 2; }
.tfm-ag-yard-frame {
    overflow: hidden;
    border-radius: 4px;
    background: var(--ag-paper-warm);
    aspect-ratio: 4 / 3;
    margin-bottom: 8px;
}
.tfm-ag-yard-shot:first-child .tfm-ag-yard-frame { aspect-ratio: 1 / 1; }
.tfm-ag-yard-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.tfm-ag-yard-shot:hover .tfm-ag-yard-frame img { transform: scale(1.03); }
.tfm-ag-yard-cap { font-weight: 700; font-size: 0.88rem; color: var(--ag-ink); display: block; }
.tfm-ag-yard-sub { font-size: 0.8rem; color: var(--ag-ink-soft); display: block; }

.tfm-ag-yard-visit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--ag-rule);
    font-size: 0.94rem;
    color: var(--ag-ink-soft);
}
.tfm-ag-yard-visit strong { color: var(--ag-ink); }

/* ============================================================
   9. VOICES - quotes side by side, no carousel
   ============================================================ */
.tfm-ag-voices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(18px, 2.6vw, 32px);
}
.tfm-ag-voice {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-top: 3px solid var(--ag-ochre);
    padding-top: 16px;
}
.tfm-ag-voice--staff { border-top-color: var(--ag-board); }
.tfm-ag-voice blockquote {
    margin: 0;
    font-size: 0.99rem;
    line-height: 1.6;
    color: var(--ag-ink);
}
.tfm-ag-voice-who { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.tfm-ag-voice-who img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.tfm-ag-voice-name { font-weight: 700; font-size: 0.92rem; color: var(--ag-ink); display: block; }
.tfm-ag-voice-role { font-size: 0.8rem; color: var(--ag-ink-soft); display: block; }
.tfm-ag-voice-role a { color: var(--ag-ochre-deep); font-weight: 650; }

/* ============================================================
   10. CLOSING BAND
   ============================================================ */
.tfm-ag-close {
    background: var(--ag-board);
    color: var(--ag-chalk);
    padding: clamp(44px, 6vw, 80px) 0;
}
.tfm-ag-close-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}
.tfm-ag-close h2 {
    font-family: var(--tfm-font-heading);
    font-weight: 900;
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.02;
    letter-spacing: -0.03em;
    color: var(--ag-chalk);
    margin: 0 0 14px;
    max-width: 16ch;
}
.tfm-ag-close p { color: rgba(244, 247, 243, 0.76); max-width: 46ch; margin: 0 0 22px; }
.tfm-ag-close-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.tfm-ag-close-lines { display: grid; gap: 0; border-top: 1px solid var(--ag-board-line); }
.tfm-ag-close-line {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 0;
    border-bottom: 1px solid var(--ag-board-line);
    color: var(--ag-chalk);
}
.tfm-ag-close-line i { color: var(--ag-ochre); width: 20px; text-align: center; }
.tfm-ag-close-line span { font-size: 0.8rem; color: rgba(244, 247, 243, 0.6); display: block; }
.tfm-ag-close-line strong { font-weight: 700; font-size: 1rem; font-variant-numeric: tabular-nums; }

/* ============================================================
   FOOTER - a contact directory, not four equal columns
   ============================================================ */
.tfm-ag-footer {
    background: var(--ag-board-deep);
    color: var(--ag-chalk);
    /* the footer renders on every page, so it carries its own tokens */
    --ag-board: #123A34;
    --ag-board-deep: #0C2A25;
    --ag-board-line: rgba(238, 243, 238, 0.16);
    --ag-chalk: #F4F7F3;
    --ag-ochre: #E09B12;
    --ag-ochre-deep: #B87A08;
    --ag-signal: #C2361B;
    --ag-wa: #1FA855;
    --ag-shell: min(1240px, 100%);
}

/* Top band: one instruction and three ways to act on it. */
.tfm-ag-footer-help {
    background: var(--ag-board);
    border-bottom: 1px solid var(--ag-board-line);
    padding: clamp(26px, 3.5vw, 42px) 0;
}
.tfm-ag-footer-help-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: clamp(20px, 3vw, 44px);
    align-items: center;
}
.tfm-ag-footer-help h2 {
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: clamp(1.3rem, 2.6vw, 1.85rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--ag-chalk);
    margin: 0 0 6px;
    max-width: 20ch;
}
.tfm-ag-footer-help p { color: rgba(244, 247, 243, 0.7); font-size: 0.94rem; margin: 0; max-width: 44ch; }

.tfm-ag-footer-acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tfm-ag-footer-act {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 15px 16px;
    border: 1px solid var(--ag-board-line);
    border-radius: 4px;
    color: var(--ag-chalk);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.tfm-ag-footer-act:hover { border-color: var(--ag-ochre); background: rgba(224, 155, 18, 0.08); }
.tfm-ag-footer-act i { color: var(--ag-ochre); font-size: 1.05rem; }
.tfm-ag-footer-act strong { font-weight: 700; font-size: 0.95rem; }
.tfm-ag-footer-act span { font-size: 0.8rem; color: rgba(244, 247, 243, 0.62); }

/* Main body: brand at the width it deserves, contacts as a directory. */
.tfm-ag-footer-main { padding: clamp(32px, 4.5vw, 56px) 0; }
.tfm-ag-footer-zones {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(28px, 4vw, 64px);
}

.tfm-ag-footer-mark { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.tfm-ag-footer-mark img { height: 52px; width: auto; }
.tfm-ag-footer-word {
    font-family: var(--tfm-font-heading);
    font-weight: 900;
    letter-spacing: 0.04em;
    font-size: 1.25rem;
    color: var(--ag-chalk);
}
.tfm-ag-footer-blurb { color: rgba(244, 247, 243, 0.72); font-size: 0.92rem; line-height: 1.65; max-width: 46ch; margin: 0 0 18px; }

.tfm-ag-footer-promise {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--ag-signal);
    border-radius: 3px;
    padding: 9px 13px;
    font-size: 0.86rem;
    color: var(--ag-chalk);
    margin-bottom: 20px;
}
.tfm-ag-footer-promise b { color: var(--ag-ochre); font-variant-numeric: tabular-nums; }

.tfm-ag-footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tfm-ag-footer-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid var(--ag-board-line);
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--ag-chalk);
    transition: border-color 0.15s ease, color 0.15s ease;
}
.tfm-ag-footer-pill:hover { border-color: var(--ag-ochre); color: var(--ag-ochre); }
.tfm-ag-footer-pill--wa:hover { border-color: var(--ag-wa); color: var(--ag-wa); }

.tfm-ag-footer-sub { font-size: 0.78rem; color: rgba(244, 247, 243, 0.5); margin: 0 0 8px; }
.tfm-ag-footer-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tfm-ag-footer-tag {
    font-size: 0.8rem;
    color: rgba(244, 247, 243, 0.8);
    border: 1px solid var(--ag-board-line);
    border-radius: 3px;
    padding: 5px 9px;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.tfm-ag-footer-tag:hover { border-color: var(--ag-ochre); color: var(--ag-ochre); }
.tfm-ag-footer-tag--all { border-color: var(--ag-ochre); color: var(--ag-ochre); font-weight: 700; }

/* Directory: label on the left, number on the right, ruled between. */
.tfm-ag-dir-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 2px solid var(--ag-ochre);
    padding-bottom: 8px;
    margin-bottom: 2px;
}
.tfm-ag-dir-head h3 {
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--ag-chalk);
    margin: 0;
}
.tfm-ag-dir-head span { font-size: 0.8rem; color: rgba(244, 247, 243, 0.55); }

.tfm-ag-dir-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ag-board-line);
}
.tfm-ag-dir-label { font-size: 0.86rem; color: rgba(244, 247, 243, 0.66); }
.tfm-ag-dir-label b { display: block; color: var(--ag-chalk); font-weight: 650; font-size: 0.9rem; }
.tfm-ag-dir-value {
    font-weight: 700;
    font-size: 0.94rem;
    color: var(--ag-chalk);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}
.tfm-ag-dir-value:hover { color: var(--ag-ochre); }
.tfm-ag-dir-value--wrap { white-space: normal; word-break: break-word; }

.tfm-ag-dir-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; }
.tfm-ag-dir-links a { font-size: 0.88rem; font-weight: 650; color: rgba(244, 247, 243, 0.82); }
.tfm-ag-dir-links a:hover { color: var(--ag-ochre); }

/* Bottom bar in three parts. */
.tfm-ag-footer-base { border-top: 1px solid var(--ag-board-line); padding: 18px 0 26px; }
.tfm-ag-footer-base-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 22px;
}
.tfm-ag-footer-base p { font-size: 0.82rem; color: rgba(244, 247, 243, 0.55); margin: 0; }
.tfm-ag-footer-legal { display: flex; gap: 18px; }
.tfm-ag-footer-legal a { font-size: 0.82rem; color: rgba(244, 247, 243, 0.68); }
.tfm-ag-footer-legal a:hover { color: var(--ag-ochre); }
.tfm-ag-footer-top {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 650;
    color: rgba(244, 247, 243, 0.68);
    border: 1px solid var(--ag-board-line);
    border-radius: 999px;
    padding: 7px 14px;
    background: transparent;
}
.tfm-ag-footer-top:hover { border-color: var(--ag-ochre); color: var(--ag-ochre); }

/* ============================================================
   Card additions - the price drop on the standard product card
   ============================================================ */
.tfm-badge-drop {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #C2361B;
    color: #fff;
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
    padding: 4px 7px;
    border-radius: 3px;
    font-variant-numeric: tabular-nums;
    z-index: 2;
}
.tfm-product-was {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin-top: -2px;
}
.tfm-product-was s { font-size: 0.84rem; color: #7A8891; font-variant-numeric: tabular-nums; }
.tfm-product-save { font-size: 0.76rem; font-weight: 700; color: #C2361B; }

.tfm-qv-price-was { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-top: 4px; }
.tfm-qv-price-was s { color: #7A8891; font-variant-numeric: tabular-nums; }
.tfm-qv-price-off {
    background: #C2361B;
    color: #fff;
    font-weight: 800;
    font-size: 0.76rem;
    padding: 3px 7px;
    border-radius: 3px;
}
.tfm-qv-price-save { font-size: 0.82rem; font-weight: 700; color: #C2361B; }

/* ============================================================
   7b. CROSS-BORDER LIVESTOCK DELIVERY
   ------------------------------------------------------------
   Sits on a board band directly after the two counters, where
   the reader has just met the livestock side of the yard. Two
   halves: the offer (three country plates, priced "Free" the
   way the tickets are priced) and the clearance checklist,
   numbered like the Lipa ledger because it is a real sequence.
   ============================================================ */
.tfm-ag-ship-map {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
    gap: 12px;
    list-style: none;
    margin: 0 0 clamp(26px, 3.5vw, 42px);
    padding: 0;
}
.tfm-ag-ship-place {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 18px;
    background: var(--ag-board-deep);
    border: 1px solid var(--ag-board-line);
    border-left: 3px solid var(--ag-ochre);
    border-radius: 4px;
}
.tfm-ag-ship-plate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.tfm-ag-ship-code {
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: 1.28rem;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--ag-ochre);
    font-variant-numeric: tabular-nums;
}
.tfm-ag-ship-free {
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: var(--ag-wa);
    border-radius: 3px;
    padding: 4px 9px;
    line-height: 1;
}
.tfm-ag-ship-country {
    font-family: var(--tfm-font-heading);
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--ag-chalk);
}
.tfm-ag-ship-note {
    font-size: 0.83rem;
    line-height: 1.45;
    color: rgba(244, 247, 243, 0.64);
}

/* Sub-heading inside the band: the same rule-then-heading idiom
   as .tfm-ag-head, one step quieter. */
.tfm-ag-ship-rule {
    border-top: 1px solid var(--ag-ochre);
    padding-top: 14px;
    margin-bottom: 8px;
}
.tfm-ag-ship-sub {
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: clamp(1.12rem, 2.2vw, 1.5rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--ag-chalk);
    margin: 0 0 6px;
}
.tfm-ag-ship-lede {
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(244, 247, 243, 0.74);
    max-width: 66ch;
    margin: 0;
}

/* The checklist. Two ruled columns on wide screens, one below. */
.tfm-ag-ship-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    column-gap: clamp(22px, 3.5vw, 52px);
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: tfm-ship;
}
.tfm-ag-ship-item {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
    padding: 15px 0;
    border-bottom: 1px solid var(--ag-board-line);
}
.tfm-ag-ship-item::before {
    counter-increment: tfm-ship;
    content: counter(tfm-ship, decimal-leading-zero);
    font-family: var(--tfm-font-heading);
    font-weight: 800;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--ag-ochre);
    font-variant-numeric: tabular-nums;
}
.tfm-ag-ship-item h4 {
    font-family: var(--tfm-font-heading);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.28;
    color: var(--ag-chalk);
    margin: 0 0 4px;
}
.tfm-ag-ship-item p {
    font-size: 0.89rem;
    line-height: 1.5;
    color: rgba(244, 247, 243, 0.7);
    margin: 0;
    max-width: 52ch;
}

.tfm-ag-ship-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: clamp(22px, 3vw, 32px);
}
.tfm-ag-ship-foot p {
    flex: 1 1 340px;
    font-size: 0.89rem;
    line-height: 1.5;
    color: rgba(244, 247, 243, 0.72);
    border-left: 3px solid var(--ag-ochre);
    padding-left: 12px;
    margin: 0;
}

/* The counter's jump link down to the band above. */
.tfm-ag-counter-jump {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    margin-top: 14px;
    font-size: 0.87rem;
    font-weight: 650;
    line-height: 1.4;
    color: var(--ag-ink);
    border-bottom: 2px solid var(--ag-ochre);
    padding-bottom: 3px;
}
.tfm-ag-counter-jump i { color: var(--ag-ochre-deep); font-size: 0.82rem; }
.tfm-ag-counter-jump:hover { color: var(--ag-ochre-deep); }

/* An in-page jump should not land the heading under the sticky
   header, and should not fly on reduced-motion machines. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.tfm-ag [id] { scroll-margin-top: 90px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
    .tfm-ag-hero-grid,
    .tfm-ag-pay,
    .tfm-ag-close-grid,
    .tfm-ag-footer-help-grid,
    .tfm-ag-footer-zones { grid-template-columns: minmax(0, 1fr); }

    .tfm-ag-hero-mosaic { padding-bottom: clamp(30px, 5vw, 56px); }
    .tfm-ag-counter { grid-template-columns: minmax(0, 1fr); }
    .tfm-ag-counter--flip .tfm-ag-counter-media { order: 0; }
    .tfm-ag-counter-media { order: -1; }
    .tfm-ag-yard { grid-template-columns: repeat(2, 1fr); }
    .tfm-ag-yard-shot:first-child { grid-column: span 2; grid-row: auto; }
    .tfm-ag-yard-shot:first-child .tfm-ag-yard-frame { aspect-ratio: 16 / 10; }
}

@media (max-width: 640px) {
    .tfm-ag-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
    .tfm-ag-ship-list { grid-template-columns: minmax(0, 1fr); }
    .tfm-ag-ship-foot .tfm-ag-btn { flex: 1 1 100%; }
    .tfm-ag-head-link { justify-self: start; }

    .tfm-ag-hero h1 { max-width: none; }
    .tfm-ag-hero-actions .tfm-ag-btn { flex: 1 1 100%; }
    .tfm-ag-hero-fact { padding-right: 14px; margin-right: 14px; }
    .tfm-ag-hero-fact strong { font-size: 1.25rem; }
    .tfm-ag-hero-shot--tall { min-height: 200px; }
    .tfm-ag-hero-shot--wide { min-height: 95px; }

    .tfm-ag-find-form { flex-wrap: wrap; }
    .tfm-ag-find-field { flex: 1 1 100%; }
    .tfm-ag-find-form button { flex: 1 1 100%; }

    .tfm-ag-rail { grid-auto-columns: minmax(168px, 1fr); }
    .tfm-ag-index { grid-template-columns: minmax(0, 1fr); }
    .tfm-ag-footer-acts { grid-template-columns: minmax(0, 1fr); }
    .tfm-ag-footer-base-grid { justify-content: flex-start; }
}

/* The plugin pins a mobile bottom nav to the viewport - keep the last
   band clear of it. */
@media (max-width: 768px) {
    .tfm-ag-footer-base { padding-bottom: 86px; }
}

@media (prefers-reduced-motion: reduce) {
    .tfm-ag-yard-shot:hover .tfm-ag-yard-frame img { transform: none; }
    .tfm-ag *, .tfm-ag-footer * { transition-duration: 0.01ms !important; }
}

/* Visible keyboard focus everywhere in the new sections. */
.tfm-ag a:focus-visible,
.tfm-ag button:focus-visible,
.tfm-ag input:focus-visible,
.tfm-ag-footer a:focus-visible,
.tfm-ag-footer button:focus-visible {
    outline: 3px solid var(--ag-ochre);
    outline-offset: 2px;
}

/* ------------------------------------------------------------
   Layout hooks and inline-element corrections.
   The ticket and directory markup uses <span> inside <a> (a link
   may not contain block-level children), so the spans that need
   to stack are given block display here.
   ------------------------------------------------------------ */
.tfm-ag-hero-words,
.tfm-ag-counter-words,
.tfm-ag-footer-brand,
.tfm-ag-footer-dir { min-width: 0; }

.tfm-ag-ticket-img { display: block; }
.tfm-ag-ticket-cat,
.tfm-ag-ticket-prices,
.tfm-ag-ticket-was,
.tfm-ag-ticket-now { display: block; }

.tfm-ag-close-line > span { flex: 1; min-width: 0; }
.tfm-ag-close-line strong { color: var(--ag-chalk); display: block; }

/* The multi-number directory row wraps instead of forcing one line. */
.tfm-ag-dir-values {
    text-align: right;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 2px 6px;
    min-width: 0;
}
.tfm-ag-dir-values a {
    font-weight: 700;
    font-size: 0.94rem;
    color: var(--ag-chalk);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tfm-ag-dir-values a:hover { color: var(--ag-ochre); }

/* ------------------------------------------------------------
   Cash-discount scope notes.
   The drop applies to outright purchase only, so anywhere a
   reduced price sits next to an instalment plan, the plan says
   which price it is written against.
   ------------------------------------------------------------ */
.tfm-product-finance-note {
    font-size: 0.72rem;
    color: #7A8891;
    margin-top: 2px;
    line-height: 1.3;
}
.tfm-qv-chip-note {
    background: #FBEDE9;
    color: #8E2814;
    border-color: #E8C5BC;
    font-weight: 600;
}
.tfm-lipa-cash-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px dashed #D3DAD5;
}
.tfm-lipa-cash-note i { color: #C2361B; margin-top: 2px; }
.tfm-lipa-cash-note strong { color: #C2361B; font-variant-numeric: tabular-nums; }