/* ==========================================================================
   UpTrade — storefront
   Rebuilt against the UpTrade~Index-v3-r6 design. Tokens, then layout,
   then components, in the order the homepage uses them.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
    /* Brand */
    --orange:        #F26900;   /* buttons, eyebrows, stats, links   */
    --orange-card:   #E25A2A;   /* offering cards, logo, card borders */
    --orange-600:    #D95E00;
    --orange-700:    #C25400;
    --orange-100:    #FDE1CC;   /* eyebrow pill = orange at 12% on cream */
    --orange-050:    #FEF0E6;   /* icon tile = orange at 10% on white   */
    --yellow:        #FFD754;
    --yellow-600:    #EEC33A;
    --green:         #9CBE6A;

    /* Warm neutrals */
    --ink:           #17100C;
    --ink-2:         #61564D;
    --muted:         #61564D;
    --line:          #E3DDD6;
    --line-2:        #E3DDD6;
    --white:         #FFFFFF;
    --cream:         #FDFAF4;
    --cream-2:       #F7EFE4;
    --beige:         #F1E6D6;
    --tan:           #F1E6D6;
    --night:         #120C09;

    /* Status */
    --success:       #2E7D4F;
    --success-bg:    #E3F3E9;
    --warning:       #B26B00;
    --warning-bg:    #FDF1DC;
    --danger:        #C0392B;
    --danger-bg:     #FBE9E7;
    --info:          #2563EB;
    --info-bg:       #E6EEFC;

    /* Type — Plus Jakarta Sans throughout, which is what the Figma file uses
       for both the display and the body copy. */
    --display: "Plus Jakarta Sans", "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* The prototype scales the 1440 frame up to the window width, so on a wide
       monitor everything is ~30% larger than a 1:1 render. These caps follow
       that growth rather than stopping at the 1440 sizes. */
    --step--2: clamp(0.72rem, 0.69rem + 0.09vw, 0.82rem);
    --step--1: clamp(0.83rem, 0.79rem + 0.13vw, 0.97rem);
    --step-0:  clamp(0.94rem, 0.89rem + 0.18vw, 1.13rem);
    --step-1:  clamp(1.08rem, 1rem + 0.3vw, 1.4rem);
    --step-2:  clamp(1.35rem, 1.18rem + 0.66vw, 2rem);
    --step-3:  clamp(1.85rem, 1.5rem + 1.36vw, 3.1rem);
    --step-4:  clamp(2.3rem, 1.75rem + 2.5vw, 4.75rem);

    --gap:       1rem;
    --gap-lg:    1.5rem;
    --section:   clamp(3.5rem, 6vw, 5.5rem);
    --radius:    10px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --pill:      999px;

    --shadow-sm: 0 1px 2px rgba(27, 25, 23, .05), 0 1px 3px rgba(27, 25, 23, .05);
    --shadow:    0 4px 12px -2px rgba(27, 25, 23, .08);
    --shadow-lg: 0 18px 40px -12px rgba(27, 25, 23, .18);

    /* Content column grows with the window the way the scaled prototype does. */
    --container: clamp(1040px, 74vw, 1400px);
    --header-h:  80px;

    --ease-out: cubic-bezier(.16, 1, .3, 1);
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 16px);
}

/* Reduced motion is handled per-component further down: movement is dropped,
   opacity fades are kept. It is travel across the screen that causes
   discomfort, not a cross-fade — and a blanket `animation-duration: .01ms`
   here would silently strip every reveal on a machine that simply has Windows
   animations switched off. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    font-family: var(--body);
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--ink-2);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    margin: 0 0 .5em;
    font-family: var(--display);
    color: var(--ink);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.015em; }
h4 { font-size: var(--step-0); font-weight: 700; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--orange-700); text-underline-offset: 2px; }
a:hover { color: var(--orange); }

img, picture, video, svg { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1em; padding-left: 1.15rem; }
li + li { margin-top: .3em; }
/* Navigation and footer lists are laid out by their own rules; the reading-list
   spacing above must not leak into them (it was the 3px "About / Contact"
   vertical misalignment in the header). */
.nav__list > li, .footer-grid li, .featured__row li { margin-top: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--gap-lg) 0; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--orange-100); color: var(--ink); }

/* ==========================================================================
   Scroll reveals — the fade-and-travel each section plays as it comes in.

   These are TIME-based, fired once by an IntersectionObserver. A scroll-linked
   (`animation-timeline: view()`) version was tried and removed: because it is
   scrubbed against scroll position, a normal wheel flick finished the whole
   reveal while the element was still at the bottom edge of the screen, so
   nothing appeared to animate at all. A fixed duration always plays in full,
   however fast the visitor scrolls.

   Everything is gated on `.js` so the page renders fully visible when
   JavaScript is unavailable.
   ========================================================================== */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(44px);
    /* Longer than the old nudge needed — the travel is now most of the screen,
       and at .85s that read as a snap rather than a glide. */
    transition:
        opacity 1.05s var(--ease-out),
        transform 1.05s var(--ease-out);
    will-change: opacity, transform;
}
/* The two halves enter from the viewport edges rather than nudging in — at a
   1920 frame this puts them just outside the content column. The sections that
   carry these reveals clip horizontally (see .section / .impact), so the
   outswing never widens the page or raises a horizontal scrollbar. */
/* Start each half completely outside its own edge of the screen, so it enters
   from off-canvas rather than merely sliding across.
   `100%` is the element's own width, and the gutter is the gap the centred
   container leaves beside it — their sum is exactly the distance from the
   element to that edge of the viewport, at every breakpoint and for uneven
   grid columns alike. The sections clip horizontally, so none of this widens
   the page. */
:root { --reveal-gutter: max(1.25rem, (100vw - 1400px) / 2); }
.js [data-reveal="left"]  { transform: translateX(calc(-100% - var(--reveal-gutter))); }
.js [data-reveal="right"] { transform: translateX(calc(100% + var(--reveal-gutter))); }
.js [data-reveal="zoom"]  { transform: scale(.93); }
.js [data-reveal="down"]  { transform: translateY(-60px); }

/* Grids whose tiles enter from their own side. `--columns` is the three-up
   grid (left column from the left, middle from below, right from the right);
   `--sides` is the two-up grid (odd tiles from the left, even from the right).
   Both keep the group's stagger delays. */
.js .feature-grid--columns[data-reveal-group] > :nth-child(3n+1),
.js .feature-grid--sides[data-reveal-group]   > :nth-child(odd)  { transform: translateX(calc(-100% - var(--reveal-gutter))); }
.js .feature-grid--columns[data-reveal-group] > :nth-child(3n),
.js .feature-grid--sides[data-reveal-group]   > :nth-child(even) { transform: translateX(calc(100% + var(--reveal-gutter))); }
.js .feature-grid--columns[data-reveal-group].is-visible > *,
.js .feature-grid--sides[data-reveal-group].is-visible > * { transform: none; }
@media (max-width: 859px) {
    .js .feature-grid--columns[data-reveal-group] > *,
    .js .feature-grid--sides[data-reveal-group] > * { transform: translateY(100%); }
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Children of a group come in one after another. */
/* Each tile starts a full tile-height below where it lands. */
.js [data-reveal-group] > * {
    opacity: 0;
    transform: translateY(100%);
    transition:
        opacity .85s var(--ease-out),
        transform .85s var(--ease-out);
}
.js [data-reveal-group].is-visible > * { opacity: 1; transform: none; }
.js [data-reveal-group].is-visible > :nth-child(1) { transition-delay: .00s; }
.js [data-reveal-group].is-visible > :nth-child(2) { transition-delay: .10s; }
.js [data-reveal-group].is-visible > :nth-child(3) { transition-delay: .20s; }
.js [data-reveal-group].is-visible > :nth-child(4) { transition-delay: .30s; }
.js [data-reveal-group].is-visible > :nth-child(5) { transition-delay: .40s; }
.js [data-reveal-group].is-visible > :nth-child(6) { transition-delay: .50s; }
.js [data-reveal-group].is-visible > :nth-child(7) { transition-delay: .60s; }
.js [data-reveal-group].is-visible > :nth-child(8) { transition-delay: .70s; }

/* --------------------------------------------------------------- hero load */
/* The recording opens on a near-black hero that lifts to reveal the
   photograph — a dark radial veil fading out while the image settles. */
.js .hero__media > img {
    animation:
        heroIn 1.5s var(--ease-out) both,
        heroDrift 20s ease-in-out 1.5s infinite alternate;
}
.js .hero__media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: radial-gradient(circle at 28% 50%, rgba(12, 9, 7, .25) 0%, rgba(12, 9, 7, .97) 68%);
    animation: heroVeil 1.5s var(--ease-out) both;
    pointer-events: none;
}
.hero__media::after { z-index: 2; }

.js .hero__content > * { opacity: 0; animation: rise .9s var(--ease-out) both; }
.js .hero__content > :nth-child(1) { animation-delay: .30s; }
.js .hero__content > :nth-child(2) { animation-delay: .38s; }
.js .hero__content > :nth-child(3) { animation-delay: .46s; }
.js .hero__content > :nth-child(4) { animation-delay: .54s; }
.js .hero__phone { opacity: 0; animation: heroPhone 1.1s var(--ease-out) .5s both; }

@keyframes rise      { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes heroPhone { from { opacity: 0; transform: translateY(30px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes heroIn    { from { opacity: 0; transform: scale(1.14); } to { opacity: 1; transform: scale(1.03); } }
@keyframes heroVeil  { from { opacity: 1; } to { opacity: 0; } }
@keyframes heroDrift { from { transform: scale(1.03); } to { transform: scale(1.09); } }

/* Fade-only variants used when the visitor has asked for reduced motion. */
@keyframes revealFade { from { opacity: 0; } to { opacity: 1; } }

/* Travel is dropped and the fade kept when the visitor asks for reduced motion
   — unless the site owner has explicitly opted out in Settings → General
   ("Respect reduced-motion"), which puts `.force-motion` on <html>. */
@media (prefers-reduced-motion: reduce) {
    .js:not(.force-motion) [data-reveal],
    .js:not(.force-motion) [data-reveal-group] > * {
        transform: none !important;
        transition: opacity .5s ease !important;
    }
    .js:not(.force-motion) .hero__content > *,
    .js:not(.force-motion) .hero__phone {
        transform: none !important;
        animation-name: revealFade !important;
    }
    .js:not(.force-motion) .hero__media > img {
        animation: revealFade 1.1s ease both !important;
        transform: scale(1.03);
    }
    .js:not(.force-motion) .hero__media::before { animation: heroVeil 1.1s ease both !important; }
}

/* ---------------------------------------------------------------- utilities */
.container { width: min(100% - 2.5rem, var(--container)); margin-inline: auto; }
.container--narrow { width: min(100% - 2.5rem, 760px); }

/* clip, not hidden: hidden would make this a scroll container and break the
   sticky header. */
.section { padding-block: var(--section); overflow-x: clip; }
.section--cream   { background: var(--cream); }
.section--beige   { background: var(--beige); }
.section--white   { background: var(--white); }
.section--surface { background: var(--cream-2); }
.section--dark    { background: var(--night); color: #A79E95; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .stat { background: rgba(255, 255, 255, .06); }
.section--dark .stat__label { color: #A79E95; }
.section--dark .stats { background: rgba(255, 255, 255, .1); }

.center { text-align: center; }
.muted  { color: var(--muted); }
.small  { font-size: var(--step--1); }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: var(--gap); }

.visually-hidden, .hp-field {
    position: absolute !important; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: 8px; top: -60px; z-index: 200;
    background: var(--ink); color: #fff; padding: 10px 18px;
    border-radius: 0 0 8px 8px; transition: top .15s;
}
.skip-link:focus { top: 0; }

/* The small uppercase orange label above every section heading. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .3rem .7rem;
    background: var(--orange-100);
    color: var(--orange-700);
    border-radius: var(--pill);
    font-size: var(--step--2);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.eyebrow--bare { background: none; padding: 0; }
.eyebrow--light { background: rgba(242, 103, 34, .18); color: #FFC9A6; }

.lede { font-size: var(--step-1); color: var(--ink-2); max-width: 58ch; }

.grid { display: grid; gap: var(--gap-lg); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }

/* ----------------------------------------------------------------- buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: .78em 1.5em;
    border: 1px solid transparent;
    border-radius: var(--pill);
    font-family: var(--body);
    font-size: var(--step--1);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .16s, color .16s, border-color .16s, transform .08s;
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.btn .arrow { transition: transform .18s; }
.btn:hover .arrow { transform: translateX(3px); }

.btn--primary { background: var(--orange); color: #fff; }
.btn--primary:hover { background: var(--orange-600); color: #fff; }

.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #000; color: #fff; }

.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--cream-2); color: var(--ink); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--cream); border-color: var(--muted); color: var(--ink); }

.btn--sm { padding: .5em 1.05em; font-size: var(--step--2); }
.btn--lg { padding: .95em 1.9em; font-size: var(--step-0); }
.btn--block { width: 100%; }

/* A plain orange text link with a trailing arrow — used to close sections. */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--orange-700);
    font-weight: 700;
    font-size: var(--step--1);
    text-decoration: none;
}
.link-arrow:hover { color: var(--orange); }
.link-arrow:hover .arrow { transform: translateX(3px); }
.link-arrow .arrow { transition: transform .18s; }

/* ------------------------------------------------------------------ header */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid rgba(232, 224, 214, .8);
}

.site-header__bar {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: var(--header-h);
}

.logo { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; flex-shrink: 0; }
/* Supplied brand asset: mark and wordmark in one file. Height-driven so the
   184x56 source keeps its ratio at any size. */
.logo__img { display: block; height: 32px; width: auto; }
/* Retained for the placeholder mark in site/partials/logo-mark.php. */
.logo__mark { width: 30px; height: 30px; color: var(--orange); }
.logo__word {
    font-family: var(--display);
    font-size: 1.32rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--orange);
}
/* The footer lockup keeps the orange wordmark, as in the design. */
.logo--light .logo__word { color: var(--orange); }

.nav { margin-inline: auto; }
.nav__list { display: flex; align-items: center; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.nav__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .7rem;
    border-radius: var(--radius);
    color: var(--ink-2);
    font-size: var(--step--1);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.nav__link:hover { background: var(--cream); color: var(--ink); }
.nav__link.is-active { color: var(--orange-700); }
.nav__link img { width: 22px; height: 16px; object-fit: contain; }
.nav__link--brand { color: var(--green); font-weight: 700; }

.header-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.header-actions .nav__link { padding-inline: .4rem; }

.cart-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 40px; height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--pill);
    color: var(--ink);
    text-decoration: none;
}
.cart-btn:hover { background: var(--cream); color: var(--ink); }
.cart-btn__count {
    position: absolute;
    top: -3px; right: -3px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    display: grid; place-items: center;
    background: var(--ink); color: #fff;
    border: 2px solid #fff;
    border-radius: var(--pill);
    font-size: .62rem; font-weight: 800;
}

.nav-toggle {
    display: none;
    width: 42px; height: 42px;
    padding: 0;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
    display: block; width: 18px; height: 2px;
    margin-inline: auto; background: var(--ink);
    border-radius: 2px; transition: transform .2s, opacity .2s;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: relative; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 4px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 1080px) {
    .nav-toggle { display: block; }
    .nav {
        order: 5; flex-basis: 100%; margin: 0;
        display: none; padding-bottom: .75rem;
    }
    .nav.is-open { display: block; }
    .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav__link { padding: .75rem .5rem; border-bottom: 1px solid var(--line-2); border-radius: 0; }
    .site-header__bar { flex-wrap: wrap; }
    .header-actions { margin-left: auto; }
}

/* Below this the header would wrap to two rows, so the secondary actions move
   into the drop-down and only the cart and the menu button stay on the bar. */
.nav__item--mobile { display: none; }

@media (max-width: 720px) {
    .header-actions > .nav__link,
    .header-actions > .btn { display: none; }
    .nav__item--mobile { display: block; }
    .nav__item--mobile .btn { width: 100%; margin-top: .75rem; }
}

/* Mobile / tablet menu: a white drop-down panel under the sticky header with
   full-width rows (the underline used to stop at the text), bigger tap
   targets, a small arrow per row, the current page in orange, and the
   Contact row + full-width Buy From Us button at the foot. */
@media (max-width: 1080px) {
    .site-header .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - 100%);
        overflow-y: auto;
        padding: 6px 20px 20px;
        background: #fff;
        border-top: 1px solid var(--line);
        border-radius: 0 0 22px 22px;
        box-shadow: 0 24px 40px -18px rgba(23, 16, 12, .28);
    }
    .site-header .nav.is-open { animation: menu-drop .22s ease-out both; }
    .site-header .nav__list > li { width: 100%; }
    .site-header .nav .nav__link {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 52px;
        padding: 12px 4px;
        border-bottom: 1px solid var(--line);
        font-size: 1rem;
        font-weight: 600;
        color: var(--ink);
    }
    .site-header .nav .nav__link::after {
        content: "\2192";
        margin-left: auto;
        font-size: .9rem;
        color: #C9BFB5;
        transition: transform .2s ease, color .2s ease;
    }
    .site-header .nav .nav__link:hover::after,
    .site-header .nav .nav__link.is-active::after { color: var(--orange); transform: translateX(3px); }
    .site-header .nav .nav__link.is-active { color: var(--orange); }
    .site-header .nav .nav__link--brand { color: var(--green); }
    .site-header .nav__item--mobile .btn { min-height: 52px; margin-top: 16px; border-radius: 14px; font-size: 1rem; }
}
@keyframes menu-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------------- hero */
.hero {
    position: relative;
    isolation: isolate;
    /* Contains the offering row's negative bottom margin rather than letting it
       collapse out of the section. That margin is what lets the cards hang
       half below the photograph, the way the design has them. */
    display: flow-root;
    /* Room at the bottom for the offering cards that overlap the next band. */
    padding-block: clamp(3rem, 7vw, 5.5rem) 0;
    background: var(--cream-2);
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
/* The photograph is meant to read through the headline, as in the design —
   just enough haze on the left for the dark type to stay legible. */
.hero__media::after {
    content: "";
    position: absolute; inset: 0;
    /* Sampled off the Figma hero: a pool of light over the headline peaking at
       about .47, gone well before the right edge — the boy and the goats there
       are meant to stay crisp. The old version added a flat .18 wash over the
       whole box on top of a two-stop ellipse, and the join between the two read
       as a hard rectangle cutting the banner in half. Many stops, no flat
       layer, so the falloff never bands. */
    background: radial-gradient(ellipse 42% 78% at 27% 50%,
        rgba(255, 252, 247, .47) 0%,
        rgba(255, 252, 247, .44) 22%,
        rgba(255, 252, 247, .33) 45%,
        rgba(255, 252, 247, .20) 62%,
        rgba(255, 252, 247, .08) 80%,
        rgba(255, 252, 247, 0) 100%);
}

.hero__inner {
    display: grid;
    gap: 2rem;
    align-items: center;
    grid-template-columns: minmax(0, 1fr);
    /* Sized so the whole section lands on the design's 1920x972 (1.975) frame —
       the phone is placed as a percentage of that box, so the ratio matters. */
    min-height: clamp(420px, 38.5vw, 860px);
}

/* Widths track the viewport, not `ch`: `ch` resolves against the body font
   size, which would size this column for 16px text rather than a 72px headline. */
.hero__content { max-width: clamp(430px, 46vw, 780px); }
/* The Figma headline breaks greedily — "Digitising Livestock / Trade From
   Farmer To / Global Markets." The global `text-wrap: balance` on headings
   re-flows that into a shorter second line; the column is already the width
   the design wraps at, so plain wrapping reproduces the design exactly.
   Leading is tightened to the design's, which sets the lines much closer. */
.hero__content h1 { margin-bottom: .8rem; text-wrap: wrap; line-height: 1.05; }
.hero__content h1 em { font-style: normal; color: var(--orange); }
.hero__content p { color: var(--ink); font-weight: 500; font-size: var(--step-0); max-width: clamp(360px, 33vw, 560px); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.75rem; }

/* Measured off the Figma hero frame (1920x972): the phone is 47.9% of the box
   wide and runs off both the right and the bottom edge. It sits inside
   .hero__media so that box's overflow does the clipping — .hero itself must
   stay unclipped, because the offering cards deliberately hang out of it. */
.hero__phone {
    position: absolute;
    left: 55.42%;
    top: 14.4%;
    width: 47.92%;
    z-index: 3;                     /* over the ::after veil, which is 2 */
    pointer-events: none;
}
.hero__phone img { width: 100%; height: auto; filter: drop-shadow(0 26px 46px rgba(27, 25, 23, .28)); }
@media (max-width: 899px) { .hero__phone { display: none; } }

/* ------------------------------------------------------------- offerings */
/* The offering row straddles the hero and the band beneath it. A negative
   bottom margin (rather than a transform) does the overlap, so the following
   section can reserve exactly the same distance and never collide. */
/* Half a card's height: the design sits the offering row across the bottom edge
   of the photograph, half over it and half on the cream below. */
:root { --offer-overlap: clamp(2.75rem, 4.5vw, 6rem); }

.offerings {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    margin-top: clamp(2rem, 5vw, 3.25rem);
    margin-bottom: calc(var(--offer-overlap) * -1);
    position: relative;
    /* Above .hero__phone (3), not below it: in the design the hand passes
       *behind* the offering row, so the Zakat card stays a clean rectangle and
       only the forearm to the right of it shows. At 2 the phone won the paint
       order and the wrist cut a diagonal out of the card's top-right corner. */
    z-index: 4;
}

.offering {
    display: block;
    padding: 1.15rem 1.35rem 1.25rem;
    border-radius: var(--radius-lg);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out),
                background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.offering--orange { background: var(--orange); }
.offering--yellow { background: var(--yellow); color: var(--ink); }

/* Hover turns the card white with the heading and the call to action in orange,
   as in the design — the same treatment for both tones. */
.offering:hover {
    transform: translateY(-4px);
    background: #fff;
    color: var(--ink);
    box-shadow: 0 22px 44px -14px rgba(27, 25, 23, .35);
}
.offering:hover h3,
.offering:hover .offering__cta { color: var(--orange); }

/* Icon tile sits beside the title, as in the design — not above it. */
.offering__head { display: flex; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.offering__icon {
    width: 42px; height: 42px;
    flex-shrink: 0;
    display: grid; place-items: center;
    /* Solid tiles, tone swapped against the card: yellow on the orange cards,
       orange on the yellow one. */
    background: var(--yellow);
    border-radius: 10px;
}
.offering__icon img { width: 24px; height: 24px; object-fit: contain; filter: brightness(0); }
.offering--yellow .offering__icon { background: var(--orange); }
.offering--yellow .offering__icon img { filter: brightness(0) invert(1); }
/* The hovered card is white, so every tile takes the orange-card treatment. */
.offering:hover .offering__icon { background: var(--yellow); }
.offering:hover .offering__icon img { filter: brightness(0); }

.offering h3 { color: inherit; font-size: var(--step-1); margin: 0; }
.offering p { font-size: var(--step--1); line-height: 1.45; opacity: .95; margin: 0 0 .75rem; }
.offering__cta { font-size: var(--step--2); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }

/* ----------------------------------------------------------- as featured */
.featured {
    background: var(--cream);
    /* Extra top padding clears the offering cards overlapping from the hero. */
    padding-block: calc(clamp(2.5rem, 5vw, 3.5rem) + var(--offer-overlap)) clamp(2.5rem, 5vw, 3.5rem);
}
.featured__title {
    text-align: center;
    font-family: var(--display);
    font-size: var(--step-0);
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 1.5rem;
}
.featured__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: clamp(1.5rem, 5vw, 3.5rem);
    list-style: none;
    margin: 0;
    padding: 0;
    color: var(--ink-2);
    font-family: var(--display);
    font-size: var(--step-1);
    font-weight: 600;
}
.featured__row li { margin: 0; }
.featured__row .is-italic { font-style: italic; font-weight: 700; }

/* -------------------------------------------------------------- barter */
.barter { background: var(--cream); padding-block: 0 var(--section); }
/* The video carries its own light ground, so the frame no longer paints a card
   behind it — that nested one grey box inside another and shrank the media. */
.barter__frame {
    border-radius: var(--radius-xl);
    text-align: center;
}
/* The video spans the full band, as in the Figma frame — the old 640px cap
   existed only because the source illustration was 320px wide. Controls tuck
   into the corner rather than sitting over the artwork, and the wrapper carries
   the state both icon pairs read from. */
.video { position: relative; margin-inline: auto; width: 100%; }
.video__el {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-xl);
    background: var(--ink);
}
.video__controls {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    gap: .5rem;
}
.video__btn {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(27, 25, 23, .62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--white);
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}
.video__btn:hover { background: var(--orange); transform: translateY(-1px); }
.video__btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.video__icon { display: block; width: 1.25rem; height: 1.25rem; }

.video__icon--pause,
.video__icon--unmuted { display: none; }
.video.is-playing .video__icon--play { display: none; }
.video.is-playing .video__icon--pause { display: block; }
.video:not(.is-muted) .video__icon--muted { display: none; }
.video:not(.is-muted) .video__icon--unmuted { display: block; }

@media (prefers-reduced-motion: reduce) {
    .video__btn { transition: none; }
    .video__btn:hover { transform: none; }
}

/* -------------------------------------------------------------- impact */
.impact { position: relative; isolation: isolate; background: var(--tan); padding-block: var(--section); overflow-x: clip; }
.impact__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.impact__media img { width: 100%; height: 100%; object-fit: cover; }
.impact__media::after { content: ""; position: absolute; inset: 0; background: rgba(231, 218, 199, .88); }

.impact__grid {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) { .impact__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }

.impact__photo {
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: var(--shadow-lg);
}
.impact__photo img { width: 100%; height: 100%; object-fit: cover; }

/* Separate white cards with a gap between them, as in the design. */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: .6rem;
    margin-top: 1.75rem;
}
.stat {
    background: rgba(255, 255, 255, .92);
    padding: 1.1rem 1.35rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}
.stat__value {
    font-family: var(--display);
    font-size: var(--step-2);
    font-weight: 800;
    color: var(--orange);
    line-height: 1.05;
    letter-spacing: -0.03em;
}
.stat__label { font-size: var(--step--1); color: var(--ink-2); margin-top: .1rem; }

/* --------------------------------------------------------- split section */
.split {
    display: grid;
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
    grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.split--reverse > :first-child { order: 2; }
@media (max-width: 859px) { .split--reverse > :first-child { order: 0; } }

.split__photo { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); }
.split__photo img { width: 100%; height: 100%; object-fit: cover; }

.ticklist { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.ticklist li {
    position: relative;
    padding-left: 1.75rem;
    margin-top: .6rem;
    font-size: var(--step--1);
    color: var(--ink-2);
}
.ticklist li::before {
    content: "";
    position: absolute;
    left: 0; top: .1em;
    width: 18px; height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23F26722' stroke-width='1.5'/%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' stroke='%23F26722' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ------------------------------------------------- photo-backed sections */
.photoband { position: relative; isolation: isolate; padding-block: var(--section); overflow: hidden; }
.photoband__media { position: absolute; inset: 0; z-index: -2; }
.photoband__media img { width: 100%; height: 100%; object-fit: cover; }
.photoband__media::after { content: ""; position: absolute; inset: 0; }

.photoband--wash .photoband__media img { filter: blur(1px); }
.photoband--wash .photoband__media::after { background: rgba(253, 248, 240, .9); }
.photoband--tint .photoband__media::after { background: rgba(247, 239, 228, .82); }

/* ------------------------------------------------------------ feature card */
.feature-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }

/* Fixed column counts where the design specifies them, so a wide viewport
   cannot reflow six cards into a single four-up row. */
@media (min-width: 860px) {
    .feature-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .feature-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
    .feature-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.feature {
    background: rgba(255, 255, 255, .95);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feature__icon {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    background: var(--orange-050);
    border-radius: 12px;
    margin-bottom: 1.1rem;
}
.feature__icon img { width: 26px; height: 26px; object-fit: contain; }
.feature h3 { font-size: var(--step-1); margin: 0 0 .3rem; }
.feature p { font-size: var(--step--1); color: var(--muted); line-height: 1.55; margin: 0; }

/* The solution band uses a plain white card on beige. */
.feature--plain { background: #fff; border-color: var(--line-2); }

/* Services: outlined cards with the icon set beside the copy and no tile. */
.feature--outline {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    background: rgba(255, 252, 247, .82);
    border: 1px solid var(--orange);
    padding: 1.6rem;
}
.feature--outline .feature__icon {
    width: 44px; height: 44px;
    background: none;
    border-radius: 0;
    margin: 0;
    flex-shrink: 0;
}
.feature--outline .feature__icon img { width: 44px; height: 44px; }
.feature--outline p { color: var(--ink-2); }

/* --------------------------------------------------------------- closing */
.closing { position: relative; isolation: isolate; padding-block: clamp(4rem, 8vw, 6.5rem); text-align: center; overflow: hidden; }
.closing__media { position: absolute; inset: 0; z-index: -2; }
.closing__media img { width: 100%; height: 100%; object-fit: cover; }
.closing__media::after { content: ""; position: absolute; inset: 0; background: rgba(250, 238, 222, .78); }
.closing h2 { max-width: 640px; margin-inline: auto; }
.closing p { max-width: 480px; margin-inline: auto; color: var(--ink-2); }
.closing__actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.75rem; }

/* ----------------------------------------------------------------- footer */
.site-footer { background: var(--night); color: #A79E95; padding-block: clamp(3rem, 6vw, 4.5rem) 1.75rem; }
.site-footer h4 {
    color: #fff;
    font-size: var(--step--2);
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}
.site-footer a { color: #A79E95; text-decoration: none; font-size: var(--step--1); }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li + li { margin-top: .55rem; }

.footer-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
@media (min-width: 900px) { .footer-grid { grid-template-columns: 2.2fr 1fr 1fr 1.2fr; } }

.footer-about { font-size: var(--step--1); line-height: 1.6; max-width: 34ch; margin: 1rem 0 1.25rem; }

.newsletter { display: flex; align-items: center; gap: .4rem; max-width: 300px; padding: .3rem .3rem .3rem 1rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--pill); }
.newsletter input {
    flex: 1; min-width: 0;
    background: none; border: 0; outline: none;
    color: #fff; font: inherit; font-size: var(--step--1);
}
.newsletter input::placeholder { color: #7C736B; }

.footer-contact li { display: flex; align-items: center; gap: .5rem; }
.footer-contact svg { color: var(--orange); flex-shrink: 0; }

.social { display: flex; gap: .5rem; margin-top: 1rem; }
.social a {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    color: #A79E95;
    transition: background-color .16s, color .16s, border-color .16s;
}
.social a:hover { background: var(--orange); border-color: var(--orange); color: #fff; }

.footer-bottom {
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
    margin-top: 2.5rem; padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .09);
    font-size: var(--step--1);
}



/* ==========================================================================
   Figma alignment pass — 2026-09-20
   Measured against page "UpTrade~Index-v3-r6-For Development-Shazad" of the
   Figma file, at its 1920px frame (content column 250–1670 = 1420px). Values
   are the design's own; anything that must scale with the window uses the
   same vw-driven clamps the rest of the sheet does.
   ========================================================================== */

/* ----------------------------------------------------------------- header */
.site-header { background: #fff; border-bottom: 0; backdrop-filter: none; }
.site-header__bar { gap: 1rem; }
/* Brand lockup is 175x51 on the 1920 frame. */
.logo__img { height: clamp(36px, 2.66vw, 51px); width: auto; }
.nav__list { gap: 0; }
.nav__link {
    padding: .45rem clamp(.55rem, .8vw, .95rem);
    color: var(--ink-2);
    font-size: clamp(.875rem, .84vw, 1rem);
    font-weight: 500;
    border-radius: 0;
    background: none;
    transition: color .16s;
}
/* Hover is a colour change, no pill behind the label. */
.nav__link:hover, .nav__link:focus-visible { background: none; color: var(--orange); }
.nav__link.is-active { color: var(--orange); }
.nav__link--brand { color: var(--green); font-weight: 600; gap: .4rem; }
.nav__link--brand:hover { color: var(--orange); }
.nav__link--brand img { width: 29px; height: 20px; object-fit: contain; }
/* Figma header "Icon-Good Meat": 37.5px white disc, 3px green ring, logo inside. */
.nav__gm-badge { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 37.5px; height: 37.5px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px #9EC06B; }
.nav__link--brand { gap: 3px; }
.header-actions { gap: .75rem; }
.header-actions .nav__link { padding-inline: .25rem; }
/* Items never shrink into each other; below the 1920 frame the bar tightens
   instead, so the whole row still fits the 74vw content column. */
.nav__list > li { flex-shrink: 0; }
@media (max-width: 1520px) {
    .site-header__bar { gap: .75rem; }
    .logo__img { height: 34px; }
    .nav__link { padding-inline: .45rem; font-size: .8125rem; }
    .nav__link--brand img { width: 24px; height: 17px; }
    .nav__gm-badge { width: 31px; height: 31px; box-shadow: inset 0 0 0 2.5px #9EC06B; }
    .header-actions { gap: .6rem; }
    .btn--sm { padding: .55em 1.05em; font-size: .78rem; }
    .cart-btn { width: 38px; }
    .cart-btn svg { width: 36px; height: 32px; }
}
.btn--sm { padding: .6em 1.25em; font-size: .8125rem; }
/* Orange outline cart, 41x37, count in a black disc on its top-right. */
.cart-btn { width: 44px; height: 40px; border: 0; color: var(--orange); border-radius: 0; }
.cart-btn:hover { background: none; color: var(--orange-700); }
.cart-btn svg { width: 41px; height: 37px; }
.cart-btn__count {
    top: -4px; right: -2px;
    min-width: 20px; height: 20px;
    background: #17100C; color: #fff;
    border: 0;
    font-size: .68rem; font-weight: 800;
}

/* ------------------------------------------------------------------ eyebrow */
/* 31px pill: orange at 12% behind 12px orange caps. */
.eyebrow {
    padding: .6em 1.25em;
    background: rgba(242, 105, 0, .12);
    color: var(--orange);
    font-size: .75rem;
    letter-spacing: .1em;
    font-weight: 700;
    margin-bottom: 1.75rem;
}
.eyebrow img, .eyebrow svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------- buttons */
.btn--lg { padding: .9em 2.1em; font-size: clamp(1rem, 1.04vw, 1.25rem); font-weight: 600; line-height: 1.2; }
.btn--primary { background: var(--orange); }
.btn--primary:hover { background: var(--orange-600); }
.btn--dark { background: #1B1B1B; }
.link-arrow { font-size: clamp(1rem, 1.1vw, 1.3125rem); font-weight: 600; color: var(--orange); }
.link-arrow:hover { color: var(--orange-700); }

/* ------------------------------------------------------------------- hero */
.hero { background: var(--cream); }
/* The design's veil: a single white radial pool centred on the headline
   (Figma: translate(500 462), radii 580x527 on the 1920x971 frame), full
   white at its centre, linear falloff to nothing. */
.hero__media::after {
    background: radial-gradient(ellipse 33% 57% at 26% 47.5%,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, .78) 24%,
        rgba(255, 255, 255, .5) 50%,
        rgba(255, 255, 255, .22) 76%,
        rgba(255, 255, 255, 0) 100%);
}
/* Yellow badge, orange caps, sparkle at the left. */
.hero .eyebrow {
    background: rgba(255, 215, 84, .2);
    color: var(--orange-card);
    font-size: .8125rem;
    letter-spacing: .06em;
    padding: .7em 1.65em;
    margin-bottom: 1.6rem;
}
.hero__content h1 { color: #1B1B1B; line-height: 1; margin-bottom: 1.4rem; text-shadow: 0 0 14px rgba(0, 0, 0, .12); }
.hero__content h1 em { color: var(--orange-card); }
.hero__content p {
    color: #1B1B1B;
    /* Figma p.mt-6: Inter Semi Bold 24px / 32.5px on the 1920 frame. */
    font-family: "Inter", var(--body);
    font-weight: 600;
    font-size: clamp(1rem, 1.25vw, 1.5rem);
    line-height: 1.354;
    max-width: clamp(360px, 36.5vw, 700px);
    text-shadow: 0 0 14px rgba(0, 0, 0, .10);
}
.hero__actions { margin-top: 2.1rem; gap: .75rem; }
.hero__actions .btn--primary { box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .45); }

/* -------------------------------------------------------------- offerings */
:root { --offer-overlap: clamp(3rem, 3.85vw, 74px); }
.offerings { gap: clamp(.75rem, 1.05vw, 20px); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
/* 460x148 cards, icon tile down the left, copy to its right. Everything scales
   with the viewport from the 1920 frame (Figma Quick Links 1695:24357), so the
   cards shrink on smaller desktops instead of growing taller. */
.offering {
    display: flex;
    align-items: flex-start;
    gap: clamp(10px, .68vw, 13px);
    min-height: clamp(104px, 7.71vw, 148px);
    padding: clamp(14px, 1.09vw, 21px) clamp(16px, 1.25vw, 24px) clamp(14px, 1.04vw, 20px) clamp(11px, .78vw, 15px);
    border-radius: 15px;
    box-shadow: 0 24px 40px -22px rgba(27, 25, 23, .35);
}
/* Client review (3): the cards take the nav bar's orange (the Buy From Us
   button), and the yellow is deepened to a golden yellow to sit beside it —
   the softer #E25A2A / #FFD754 pair read as washed out. */
:root { --offer-yellow: #FFC20E; }
.offering--orange { background: var(--orange); }
.offering--yellow { background: var(--offer-yellow); color: #000; }
.offering__icon {
    width: clamp(42px, 3.125vw, 60px); height: clamp(41px, 3.07vw, 59px);
    border-radius: clamp(13px, .94vw, 18px);
    background: var(--offer-yellow);
    margin-top: 0;
}
.offering__icon img { width: clamp(27px, 1.98vw, 38px); height: clamp(28px, 2.03vw, 39px); filter: none; }
.offering--yellow .offering__icon { background: var(--orange); }
.offering--yellow .offering__icon img { filter: none; }
.offering:hover .offering__icon { background: var(--offer-yellow); }
.offering:hover .offering__icon img { filter: none; }
.offering__body { display: block; min-width: 0; }
/* Figma: title Black 30/35, copy Book 17/20, CTA Black 15 caps (Circular Std in
   the file; set in the site's Plus Jakarta Sans). */
.offering h3 { font-size: clamp(1.25rem, 1.5625vw, 1.875rem); font-weight: 800; line-height: 1.167; margin: 0 0 clamp(1px, .1vw, 2px); letter-spacing: 0; }
.offering p { font-size: clamp(.8125rem, .885vw, 1.0625rem); font-weight: 400; line-height: 1.176; margin: 0 0 clamp(7px, .52vw, 10px); opacity: 1; }
.offering__cta { display: block; font-size: clamp(.6875rem, .78vw, .9375rem); font-weight: 800; line-height: 1; letter-spacing: 0; }

/* --------------------------------------------------------------- featured */
.featured { padding-block: calc(var(--offer-overlap) + clamp(2.25rem, 2.9vw, 3.5rem)) clamp(2.5rem, 3.1vw, 3.75rem); }
.featured__title { color: var(--ink-2); font-size: clamp(1.1rem, 1.15vw, 1.375rem); letter-spacing: .04em; font-weight: 700; margin-bottom: 1.75rem; }
.featured__row { gap: clamp(1.5rem, 4.2vw, 5rem); font-size: clamp(1.1rem, 1.15vw, 1.375rem); font-weight: 600; color: var(--ink-2); }

/* ------------------------------------------------------------------ video */
/* 1280-wide frame on a faint (10%) photograph that fades into the cream. */
.barter { position: relative; isolation: isolate; padding-block: clamp(3rem, 4.7vw, 90px) clamp(3.5rem, 5.6vw, 108px); }
.barter__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.barter__media img { width: 100%; height: 100%; object-fit: cover; opacity: .1; }
.barter__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(253, 250, 244, 0), var(--cream)); }
.video { max-width: 1280px; }
.video__el { border-radius: 25px; }

/* ----------------------------------------------------------------- impact */
.impact { background: var(--beige); padding-block: clamp(3.5rem, 5.8vw, 112px); }
.impact__media img { object-position: 50% 50%; } /* impact-bg-zoom.webp is the Figma 1920x768 framing */
.impact__media::after { background: rgba(241, 230, 214, .93); }
@media (min-width: 860px) { .impact__grid { grid-template-columns: minmax(0, 544fr) minmax(0, 828fr); gap: clamp(1.5rem, 2.5vw, 48px); } }
.impact__photo { aspect-ratio: 1 / 1; border-radius: 26px; box-shadow: 0 30px 60px -12px rgba(0, 0, 0, .28); }
.impact h2 { max-width: 16em; }
.impact p { font-size: clamp(1rem, .94vw, 1.125rem); line-height: 1.6; max-width: 46em; }
/* Three 117px cards 5px apart, figure and label set left. */
.stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin-top: 2.85rem; text-align: left; }
.stat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px 23px 22px;
    box-shadow: none;
    min-height: 117px;
}
.stat__value { font-size: clamp(1.75rem, 2.1vw, 2.5rem); line-height: 1; letter-spacing: -0.02em; }
.stat__label { font-size: .8125rem; margin-top: .55rem; }
/* Figma r7 stat tiles: 22px corners, 20px padding; figures PJS Bold 40 (-1.4px),
   labels Inter 18/29.25. The outer tiles fade toward the page edges — the left
   one is set right, the middle centred, the right one set left. */
.impact .stat { border-radius: 22px; padding: 20px; }
.impact .stat__value { font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; }
.impact .stat__label { font-family: "Inter", var(--body); font-size: clamp(.875rem, .9375vw, 1.125rem); line-height: 1.625; margin-top: 4px; }
/* Only while the three sit in a row; stacked on phones they stay plain white. */
@media (min-width: 561px) {
    .impact .stat:nth-child(1) { background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff); text-align: right; }
    .impact .stat:nth-child(2) { text-align: center; }
    .impact .stat:nth-child(3) { background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)); text-align: left; }
}
.impact .link-arrow { display: inline-block; margin-top: .6rem; }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- livestock */
@media (min-width: 860px) { .split { grid-template-columns: minmax(0, 781fr) minmax(0, 540fr); gap: clamp(2rem, 5.1vw, 98px); } }
.split h2 { max-width: 14em; }
.split p { font-size: clamp(1rem, .94vw, 1.125rem); line-height: 1.6; }
.split__photo { position: relative; aspect-ratio: 1 / 1; border-radius: 26px; box-shadow: 0 30px 60px -12px rgba(0, 0, 0, .25); }
/* Orange glow tucked behind the photo's top-left corner. */
.split__photo::before {
    content: ""; position: absolute; inset: -16px auto auto -16px; width: 105%; height: 105%;
    border-radius: 32px; z-index: -1;
    background: linear-gradient(135deg, rgba(242, 105, 0, .3), rgba(242, 105, 0, 0) 50%);
    filter: blur(20px);
}
.ticklist { margin-top: 1.6rem; }
.ticklist li { padding-left: 34px; margin-top: 1.1rem; font-size: clamp(.95rem, .89vw, 1.0625rem); color: var(--ink); line-height: 1.5; }
.ticklist li:first-child { margin-top: 0; }
.ticklist li::before {
    top: .15em; width: 20px; height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='8.33' stroke='%23F26900' stroke-width='1.67'/%3E%3Cpath d='M7.5 10l1.67 1.67L12.5 8.33' stroke='%23F26900' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* -------------------------------------------------------- feature cards */
.photoband { padding-block: clamp(3.5rem, 5.8vw, 112px); }
.photoband .eyebrow { margin-bottom: 1.75rem; }
/* Why UpTrade: the container-ship photograph at 10%, no blur, no wash. */
.photoband--wash { background: var(--cream); }
.photoband--wash .photoband__media img { filter: none; opacity: .1; }
.photoband--wash .photoband__media::after { background: none; }
/* Services: camels behind an 85% cream wash. */
.photoband--tint .photoband__media::after { background: rgba(253, 250, 244, .85); }

.feature-grid { gap: 18px; }
@media (min-width: 860px) { .feature-grid--2 { gap: 22px; } }
.feature {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 26px 26px 26px;
    box-shadow: none;
}
.feature:hover { box-shadow: 0 18px 40px -18px rgba(27, 25, 23, .25); }
.feature__icon {
    width: 70px; height: 70px;
    background: rgba(242, 105, 0, .1);
    border-radius: 18px;
    margin-bottom: 22px;
    color: var(--orange);
}
.feature__icon img, .feature__icon svg { width: 34px; height: 34px; }
/* Why UpTrade: these icon files carry the whole 70px Figma tile in their viewBox
   (glyph 40px centred), so they render at the tile size, not 34px. */
.photoband--wash .feature__icon img { width: 70px; height: 70px; }
.feature h3 { font-size: clamp(1.125rem, 1.15vw, 1.375rem); line-height: 1.15; margin: 0 0 8px; color: var(--ink); }
.feature p { font-size: .9375rem; line-height: 1.45; color: var(--ink-2); }
.feature--plain { border-color: var(--line); }

/* Services: 700x220 outlined cards, 63px icon beside the copy. */
.feature--outline {
    gap: 34px;
    align-items: flex-start;
    background: rgba(255, 255, 255, .72);
    border: 1px solid var(--orange-card);
    border-radius: 20px;
    padding: clamp(2rem, 3.1vw, 58px) clamp(1.5rem, 2.1vw, 40px) clamp(2rem, 3.2vw, 60px);
}
.feature--outline .feature__icon { width: 63px; height: 61px; margin: 6px 0 0; background: none; border-radius: 0; }
.feature--outline .feature__icon img, .feature--outline .feature__icon svg { width: 63px; height: 61px; }
.feature--outline h3 { font-size: clamp(1.25rem, 1.35vw, 1.625rem); color: #1B1B1B; margin-bottom: 10px; }
.feature--outline p { font-size: clamp(1rem, .94vw, 1.125rem); line-height: 1.55; color: var(--ink); }

/* The solution: heading on the left, paragraph on the right, both top-set to
   the heading's own top edge (the eyebrow sits above that line). */
.solution__head { align-items: start; gap: clamp(1.5rem, 2.9vw, 55px); }
@media (min-width: 860px) { .solution__head { grid-template-columns: minmax(0, 680fr) minmax(0, 680fr); } }
.solution__head h2 { max-width: 14em; }
.solution__lede { font-size: clamp(1rem, .94vw, 1.125rem); line-height: 1.6; color: var(--ink-2); padding-top: 0; margin: 0; }
@media (min-width: 860px) { .solution__lede { padding-top: calc(31px + 1.75rem + .65em); } }
.feature-grid--5 { margin-top: clamp(2rem, 2.7vw, 52px); }
/* Solution cards: same size as now at 1920, but padding, icon tile and type scale
   down with the viewport so the five cards shrink on smaller desktops instead of
   growing taller. The icon files carry the whole 70px Figma tile in their
   viewBox (40px glyph centred), so the image fills the tile. */
@media (min-width: 860px) {
    .feature-grid--5 { gap: clamp(10px, .94vw, 18px); }
    .feature-grid--5 .feature { padding: clamp(14px, 1.354vw, 26px); border-radius: clamp(14px, 1.04vw, 20px); }
    .feature-grid--5 .feature__icon { width: clamp(46px, 3.646vw, 70px); height: clamp(46px, 3.646vw, 70px); border-radius: clamp(12px, .9375vw, 18px); margin-bottom: clamp(12px, 1.146vw, 22px); }
    .feature-grid--5 .feature h3 { font-size: clamp(.9375rem, 1.146vw, 1.375rem); margin-bottom: clamp(4px, .42vw, 8px); }
    .feature-grid--5 .feature p { font-size: clamp(.75rem, .78vw, .9375rem); }
}
.feature-grid--5 .feature__icon img { width: 100%; height: 100%; }

/* ---------------------------------------------------------------- closing */
.closing { background: var(--cream); padding-block: clamp(5rem, 8.6vw, 165px) clamp(4rem, 5.6vw, 107px); }
/* Figma: photograph at 20% over the cream, then a white-to-orange(30%) diagonal at 60%. */
.closing__media img { opacity: .2; }
.closing__media::after { background: linear-gradient(143deg, rgba(255, 255, 255, .6) 0%, rgba(242, 105, 0, .18) 100%); }
.closing h2 { max-width: 16em; color: #1B1B1B; }
.closing p { max-width: 42em; font-size: clamp(1rem, 1.04vw, 1.25rem); line-height: 1.4; color: var(--ink); margin-top: 1.4rem; }
.closing__actions { margin-top: 2.4rem; gap: 12px; }
.closing__actions .btn--lg { padding: .85em 2.2em; }

/* ----------------------------------------------------------------- footer */
.site-footer { background: var(--night); color: var(--cream); padding-block: clamp(4rem, 6.25vw, 120px) clamp(3rem, 4vw, 78px); }
.site-footer h4 { color: rgba(253, 250, 244, .55); font-size: .875rem; letter-spacing: .06em; margin-bottom: 1.6rem; }
.site-footer a { color: var(--cream); font-size: 1rem; }
.site-footer a:hover { color: var(--orange); }
.site-footer li + li { margin-top: 1.55rem; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 2.5fr 1fr 1fr 1.3fr; gap: 2rem; } }
.footer-about { font-size: 1rem; line-height: 1.5; color: rgba(253, 250, 244, .82); max-width: 29em; margin: 1.7rem 0 2.25rem; }
.newsletter { max-width: 384px; padding: .8rem .8rem .8rem 1.1rem; background: rgba(255, 255, 255, .03); border-color: rgba(253, 250, 244, .22); }
.newsletter input { font-size: 1rem; }
.newsletter input::placeholder { color: rgba(253, 250, 244, .5); }
.newsletter .btn--sm { padding: .55em 1.15em; font-size: .8125rem; }
.footer-contact li { gap: .7rem; }
.footer-contact svg { width: 16px; height: 16px; color: var(--orange); }
.social { gap: .55rem; margin-top: 1.6rem; }
.social a { width: 36px; height: 36px; border-color: rgba(253, 250, 244, .55); color: var(--cream); }
.social a svg { width: 14px; height: 14px; }
.social a:hover { color: #fff; }
.footer-bottom { margin-top: clamp(3rem, 3.85vw, 74px); padding-top: clamp(2.5rem, 3.1vw, 60px); border-top: 1px solid rgba(253, 250, 244, .18); font-size: .9375rem; color: rgba(253, 250, 244, .6); }

/* ------------------------------------------------- hover-revealed sections */
/* In the prototype the Impact, Why UpTrade and Services blocks show only their
   background until the pointer enters, then their content springs in
   (Smart animate, spring: mass 1, stiffness 64, damping 12) and springs back
   out on leave. The spring is sampled into linear() below. Devices without a
   hovering pointer keep the ordinary scroll reveal (site.js gates the hover
   handlers), so nothing is ever stranded invisible. */
:root { --spring: linear(0.000, 0.047, 0.158, 0.298, 0.444 17%, 0.581, 0.700, 0.798, 0.875 33%, 0.933, 0.974, 1.001, 1.017 50%, 1.025, 1.028, 1.028, 1.025 67%, 1.021, 1.017, 1.013, 1.009 83%, 1.006, 1.004, 1.002, 1.001); }
@media (hover: hover) and (pointer: fine) {
    .js [data-reveal-hover] [data-reveal],
    .js [data-reveal-hover] [data-reveal-group] > * {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity .9s var(--spring), transform .9s var(--spring);
    }
    .js [data-reveal-hover] [data-reveal].is-visible,
    .js [data-reveal-hover] [data-reveal-group].is-visible > * { opacity: 1; transform: none; }
    .js [data-reveal-hover] [data-reveal-group].is-visible > :nth-child(n) { transition-delay: 0s; }
}
/* Impact: the photo travels in from off the left edge and the copy from off the
   right edge (Figma Default -> Variant2), not the short rise the other hover
   blocks use. The section clips horizontally, so nothing widens the page. */
@media (hover: hover) and (pointer: fine) {
    .js .impact[data-reveal-hover] [data-reveal="left"]  { transform: translateX(calc(-100% - var(--reveal-gutter))); }
    .js .impact[data-reveal-hover] [data-reveal="right"] { transform: translateX(calc(100% + var(--reveal-gutter))); }
    .js .impact[data-reveal-hover] [data-reveal].is-visible { transform: none; }
}

/* ==========================================================================
   Shop, product, cart and checkout — same design language as the homepage
   ========================================================================== */

.page-head { background: var(--cream); padding-block: 2.25rem 2rem; }
.page-head h1 { margin-bottom: .35rem; }
.page-head p { color: var(--muted); max-width: 62ch; }

.breadcrumbs { font-size: var(--step--1); color: var(--muted); padding-block: 1rem 0; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--line); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--orange-700); text-decoration: underline; }

.product-card {
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow .18s, transform .18s;
}
.product-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.product-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--cream-2); overflow: hidden; }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.product-card:hover .product-card__media img { transform: scale(1.04); }
.product-card__body { display: flex; flex-direction: column; gap: .4rem; padding: 1rem; flex: 1; }
.product-card__cat { font-size: var(--step--2); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.product-card__title { font-size: var(--step-0); margin: 0; }
.product-card__title a { color: var(--ink); text-decoration: none; }
.product-card__title a:hover { color: var(--orange-700); }
.product-card__foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: auto; padding-top: .7rem; }

.price { font-family: var(--display); font-weight: 800; color: var(--ink); font-size: var(--step-1); letter-spacing: -0.02em; }
.price__was { font-size: var(--step--1); font-weight: 500; color: var(--muted); text-decoration: line-through; margin-right: .35rem; }

.tag {
    position: absolute; top: .7rem; left: .7rem;
    padding: .22rem .6rem;
    background: var(--orange); color: #fff;
    font-size: var(--step--2); font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
    border-radius: var(--pill);
}
.tag--out { background: var(--ink); }

.rating { display: inline-flex; align-items: center; gap: .1rem; color: #E9A200; font-size: .9rem; }
.rating__count { color: var(--muted); font-size: var(--step--1); margin-left: .3rem; }

/* ------------------------------------------------------------------ forms */
.field { margin-bottom: 1rem; }
.field > label, .field__label {
    display: block; margin-bottom: .3rem;
    font-size: var(--step--1); font-weight: 700; color: var(--ink);
}
.field__hint { display: block; margin-top: .3rem; font-size: var(--step--1); color: var(--muted); }
.field__error { display: block; margin-top: .3rem; font-size: var(--step--1); color: var(--danger); font-weight: 600; }

.input, .select, .textarea {
    width: 100%;
    padding: .7rem .9rem;
    font: inherit; font-size: var(--step-0);
    color: var(--ink); background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color .15s, box-shadow .15s;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted); }
.input:focus, .select:focus, .textarea:focus {
    outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-100);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); }

/* Image captcha (captcha_field(), assets/js/captcha.js): the code image, a
   new-code button and the answer box on one row, wrapping on narrow forms. */
.captcha { margin-bottom: 1rem; }
.captcha__label { display: block; margin-bottom: .3rem; font-size: var(--step--1); font-weight: 700; color: var(--ink); }
.captcha__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.captcha__img { flex: none; width: 160px; height: 54px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream); }
.captcha__refresh {
    flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
    background: #fff; border: 1px solid var(--line); border-radius: 50%;
    font: inherit; font-size: 1.25rem; line-height: 1; color: var(--ink); cursor: pointer;
    transition: border-color .15s, color .15s;
}
.captcha__refresh:hover, .captcha__refresh:focus-visible { border-color: var(--orange); color: var(--orange); }
.captcha .captcha__input { flex: 1 1 150px; width: auto; min-width: 0; max-width: 240px; text-transform: uppercase; letter-spacing: .18em; font-weight: 700; }
.captcha .captcha__input::placeholder { text-transform: none; letter-spacing: normal; font-weight: 400; }
.captcha__error[hidden] { display: none; }
.captcha--flush { margin-bottom: 0; }
/* /businesses shows labels as placeholders, so the captcha label goes off-screen too. */
.captcha--bare .captcha__label, .captcha--wizard .captcha__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* Buy From Us wizard: matches the .w-field boxes above it. */
.captcha--wizard { margin-bottom: 15px; }
.captcha--wizard .captcha__img, .captcha--wizard .captcha__refresh { border-color: #F4BF95; }
.captcha--wizard .captcha__input { max-width: none; height: 54px; padding: 0 16px; border-color: #F4BF95; border-radius: 10px; font-size: 14px; }
.captcha--wizard .captcha__input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242, 105, 0, .15); }
/* Footer newsletter: dark, and closed until the visitor starts on the form. */
.newsletter-form { max-width: 384px; }
[data-captcha-reveal] .captcha { display: none; }
[data-captcha-reveal]:focus-within .captcha, [data-captcha-reveal].is-engaged .captcha, [data-captcha-reveal] .captcha--error { display: block; }
.captcha--dark { margin: .75rem 0 0; }
.captcha--dark .captcha__label { color: rgba(253, 250, 244, .75); font-weight: 600; }
.captcha--dark .captcha__img { border-color: rgba(253, 250, 244, .22); }
.captcha--dark .captcha__refresh { background: transparent; border-color: rgba(253, 250, 244, .3); color: var(--cream); }
.captcha--dark .captcha__input { background: rgba(255, 255, 255, .06); border-color: rgba(253, 250, 244, .22); color: var(--cream); }
.captcha--dark .captcha__input::placeholder { color: rgba(253, 250, 244, .5); }
.captcha--dark .captcha__error { color: #FFB4A8; }
.textarea { min-height: 130px; resize: vertical; }
.select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23857D75' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .9rem center; background-size: 11px;
    padding-right: 2.4rem;
}
.checkbox { display: flex; align-items: flex-start; gap: .55rem; font-size: var(--step--1); }
.checkbox input { margin-top: .2rem; width: 16px; height: 16px; accent-color: var(--orange); flex-shrink: 0; }
.form-row { display: grid; gap: 0 var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }

/* ----------------------------------------------------------------- alerts */
.alert {
    display: flex; gap: .6rem;
    padding: .85rem 1.05rem; margin-bottom: var(--gap);
    border: 1px solid; border-radius: var(--radius);
    font-size: var(--step--1);
}
.alert--success { background: var(--success-bg); border-color: #BEE3CD; color: #14532D; }
.alert--error   { background: var(--danger-bg);  border-color: #F3C6C1; color: #7F1D1D; }
.alert--warning { background: var(--warning-bg); border-color: #EFD7A8; color: #78350F; }
.alert--info    { background: var(--info-bg);    border-color: #C6D8F7; color: #1E3A8A; }

.badge { display: inline-block; padding: .18rem .55rem; border-radius: var(--pill); font-size: var(--step--2); font-weight: 800; }
.badge--success { background: var(--success-bg); color: #14532D; }
.badge--warning { background: var(--warning-bg); color: #78350F; }
.badge--danger  { background: var(--danger-bg);  color: #7F1D1D; }
.badge--info    { background: var(--info-bg);    color: #1E3A8A; }
.badge--neutral { background: var(--line-2);     color: var(--ink-2); }

/* ------------------------------------------------------------------ table */
.table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.table th, .table td { padding: .75rem .85rem; text-align: left; border-bottom: 1px solid var(--line); }
.table th { font-weight: 700; color: var(--muted); font-size: var(--step--2); text-transform: uppercase; letter-spacing: .07em; }
.table tbody tr:last-child td { border-bottom: 0; }
.table--scroll { overflow-x: auto; }

/* ------------------------------------------------------------- pagination */
.pagination { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; margin-top: var(--gap-lg); list-style: none; padding: 0; }
.pagination a, .pagination span {
    display: grid; place-items: center;
    min-width: 38px; height: 38px; padding: 0 .55rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    color: var(--ink-2); text-decoration: none;
    font-size: var(--step--1); font-weight: 700;
}
.pagination a:hover { background: var(--cream); border-color: var(--muted); }
.pagination .is-current { background: var(--ink); border-color: var(--ink); color: #fff; }
.pagination .is-disabled { opacity: .4; }

/* -------------------------------------------------------------------- cart */
.cart-layout { display: grid; gap: var(--gap-lg); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .cart-layout { grid-template-columns: minmax(0, 1fr) 340px; } }

.cart-item { display: grid; grid-template-columns: 84px 1fr auto; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); align-items: center; }
.cart-item__media { width: 84px; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--cream-2); }
.cart-item__media img { width: 100%; height: 100%; object-fit: cover; }
.cart-item__title { font-weight: 700; color: var(--ink); text-decoration: none; }
.cart-item__title:hover { color: var(--orange-700); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--pill); overflow: hidden; }
.qty button { width: 32px; height: 34px; border: 0; background: var(--cream); font-size: 1rem; line-height: 1; cursor: pointer; color: var(--ink); }
.qty button:hover { background: var(--cream-2); }
.qty input { width: 42px; height: 34px; border: 0; text-align: center; font: inherit; font-weight: 700; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.25rem; }
.card--cream { background: var(--cream); border-color: transparent; }
.card--flat  { background: var(--cream); border-color: transparent; }

.summary { position: sticky; top: calc(var(--header-h) + 16px); }
.summary__row { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; font-size: var(--step--1); }
.summary__row--total { border-top: 1px solid var(--line); margin-top: .45rem; padding-top: .85rem; font-size: var(--step-1); font-weight: 800; color: var(--ink); font-family: var(--display); }

.checkout-layout { display: grid; gap: var(--gap-lg); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .checkout-layout { grid-template-columns: minmax(0, 1fr) 360px; } }

.payment-option {
    display: flex; gap: .75rem;
    padding: 1rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    cursor: pointer; transition: border-color .15s, background-color .15s;
}
.payment-option:hover { border-color: var(--muted); }
.payment-option input { margin-top: .25rem; accent-color: var(--orange); }
.payment-option:has(input:checked) { border-color: var(--orange); background: var(--orange-050); }
.payment-option--disabled { opacity: .55; cursor: not-allowed; }

/* ------------------------------------------------------------------- misc */
.toolbar {
    display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
    padding: .9rem 1rem; background: var(--cream);
    border-radius: var(--radius); margin-bottom: var(--gap-lg);
}
.toolbar__spacer { margin-left: auto; }

.chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .85rem;
    background: #fff; border: 1px solid var(--line);
    border-radius: var(--pill);
    font-size: var(--step--1); font-weight: 600;
    color: var(--ink-2); text-decoration: none;
}
.chip:hover { border-color: var(--muted); color: var(--ink); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.empty-state { text-align: center; padding: clamp(2.5rem, 6vw, 4.5rem) 1rem; }
.empty-state__icon { font-size: 2.25rem; margin-bottom: .6rem; }

.prose { max-width: 70ch; }
.prose h2 { margin-top: 1.7em; }
.prose h3 { margin-top: 1.3em; }
.prose img { border-radius: var(--radius); margin-block: 1.4em; }
.prose blockquote { margin: 1.4em 0; padding: .2em 0 .2em 1.15em; border-left: 3px solid var(--orange); color: var(--ink); font-size: var(--step-1); }
.prose table { width: 100%; border-collapse: collapse; margin-block: 1.4em; }
.prose th, .prose td { padding: .65rem .8rem; border: 1px solid var(--line); text-align: left; }
.prose th { background: var(--cream); }

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 1.1rem 0; cursor: pointer; font-weight: 700; color: var(--ink); list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.35rem; color: var(--orange); line-height: 1; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item__body { padding-bottom: 1.1rem; color: var(--muted); }

@media print {
    .site-header, .site-footer, .no-print { display: none !important; }
    body { background: #fff; color: #000; }
}

/* ==========================================================================
   FOR BUSINESSES — Figma frame 1695:7209
   Everything below is scoped to blocks this page introduces, so the homepage
   and the other audience pages are untouched.
   ========================================================================== */

/* ---------------------------------------------------------------- pagehero */
/* The inner-page banner: one full-bleed photograph with the copy set left over
   a pool of light. The homepage `.hero` cannot be reused — it is sized around
   the phone cut-out that lives inside it and carries the offering-card overlap. */
.pagehero {
    position: relative;
    isolation: isolate;
    display: grid;
    align-content: center;
    min-height: clamp(420px, 34.2vw, 760px);   /* = the banner's own 2.92:1, so cover never crops it */
    /* Kept tight so the copy block plus its padding stays inside the
       aspect-derived min-height: any taller and `cover` starts trimming the
       sides, which costs the goat at one end and the boys at the other. */
    padding-block: clamp(2.25rem, 4.4vw, 4.25rem);
    background: var(--cream-2);
    overflow-x: clip;
}
.pagehero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.pagehero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* A left-to-right wash rather than the homepage's ellipse. This column runs
   most of the way across the banner, so a pool of light centred on a headline
   leaves the last lines of the lede sitting on bare photograph; the design
   fades from the left edge and is gone by about two thirds across, which keeps
   dark type readable over its whole width and leaves the subject on the right
   untouched. Many stops so the falloff never bands. */
.pagehero__media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(97deg,
        rgba(255, 252, 247, .72) 0%,
        rgba(255, 252, 247, .63) 18%,
        rgba(255, 252, 247, .49) 34%,
        rgba(255, 252, 247, .33) 48%,
        rgba(255, 252, 247, .18) 60%,
        rgba(255, 252, 247, .06) 72%,
        rgba(255, 252, 247, 0) 84%);
}

.pagehero__content { max-width: clamp(480px, 58vw, 880px); }
.pagehero__content h1 { margin-bottom: .85rem; text-wrap: wrap; line-height: 1.05; }
/* The lede is a step up from body copy here, as the design has it, and the
   column is capped so it breaks over three lines the way the frame does. */
.pagehero__content > p {
    color: var(--ink);
    font-weight: 500;
    font-size: var(--step-1);
    max-width: clamp(440px, 42vw, 800px);
}
.pagehero__actions { margin-top: 1.75rem; }

/* --------------------------------------------------------- solid eyebrow */
/* "Built for Scale" sits on beige in the design, where the usual pale peach
   pill would disappear — so that one fills with the brand orange instead. */
.eyebrow--solid { background: var(--orange); color: var(--ink); }

/* ------------------------------------------------------- business cards */
/* The six procurement cards. Same `.feature` card as the homepage, but the
   design gives this row a larger icon tile and a wider gutter. */
.biz-cards { gap: 1.6rem; }
.biz-cards .feature { padding: 1.6rem; }
.biz-cards .feature__icon {
    width: 64px; height: 64px;
    border-radius: 14px;
    margin-bottom: 1.15rem;
}
.biz-cards .glyph { width: 30px; height: 30px; color: var(--orange); }

/* ------------------------------------------------------------ split photo */
/* The Good Meat still is square in the design, not the 4:3 the homepage uses. */
.split__photo--square { aspect-ratio: 1 / 1; }

/* The promise list is set at body size here rather than the homepage's small
   copy, and the tick grows with it. */
.ticklist--lg li { font-size: var(--step-0); color: var(--ink); padding-left: 2.2rem; margin-top: 1.05rem; }
.ticklist--lg li::before { width: 22px; height: 22px; top: .05em; }

/* ------------------------------------------------------------- inquiry form */
/* Centred column, labels carried by the placeholder, and a submit that fills
   the column — the design's treatment, not the site's default two-column form. */
.inquiry__head { text-align: center; max-width: 700px; margin-inline: auto; }
.inquiry__head h2 { margin-bottom: .8rem; }
.inquiry__head p { color: var(--ink-2); font-size: var(--step-0); max-width: 60ch; margin-inline: auto; }

.inquiry__form { max-width: 685px; margin: clamp(2rem, 4vw, 3.25rem) auto 0; }
.inquiry__form .field { margin-bottom: .9rem; }
.inquiry__form .input,
.inquiry__form .select,
.inquiry__form .textarea {
    padding: 1.05rem 1.2rem;
    border-radius: 14px;
}
/* A select has no placeholder to carry its label, so it keeps the muted look
   of an unanswered field until the visitor picks something. */
.inquiry__form .select { color: var(--muted); }
.inquiry__form .textarea { min-height: 130px; resize: vertical; }
.inquiry__form .input::placeholder,
.inquiry__form .textarea::placeholder { color: var(--muted); }
.inquiry__form .btn { margin-top: .4rem; padding-block: 1.05rem; font-weight: 800; }

/* A square-cornered button, for the block submit the design draws. */
.btn--squared { border-radius: 14px; }

@media (max-width: 859px) {
    .pagehero { min-height: 0; }
    .pagehero__content { max-width: none; }
}

/* ==========================================================================
   Businesses — Figma alignment pass 2026-09-20 (frame 1496:5541, page
   "UpTrade~Index-v3-r6-For Development-Shazad"). Overrides the rules above.
   ========================================================================== */
.pagehero { background: var(--cream); min-height: clamp(420px, 34.2vw, 657px); padding-block: clamp(2.5rem, 5.2vw, 100px); }
/* Same treatment as the homepage: one white radial pool over the copy
   (Figma: centre 536,424 of the 1920x657 banner, radii ~582x455). */
.pagehero__media::after {
    background: radial-gradient(ellipse 33% 72% at 28% 52%,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, .78) 24%,
        rgba(255, 255, 255, .5) 50%,
        rgba(255, 255, 255, .22) 76%,
        rgba(255, 255, 255, 0) 100%);
}
.pagehero .eyebrow {
    background: rgba(255, 215, 84, .2);
    color: var(--orange-card);
    font-size: .8125rem;
    letter-spacing: .06em;
    padding: .7em 1.65em;
    margin-bottom: 1.6rem;
}
.pagehero__content h1 { color: #1B1B1B; font-size: clamp(2.4rem, 3.75vw, 4.5rem); line-height: 1; max-width: 9.6em; /* breaks after "Grade" like the frame */ margin-bottom: 1.3rem; text-shadow: 0 0 14px rgba(0, 0, 0, .12); }
/* Every hero heading (home + inner pages), Figma: Plus Jakarta Sans Bold 72 / 73.4,
   letter-spacing -2.52px. Home keeps its own fluid size below 1920, capped at 72. */
.hero__content h1,
.pagehero__content h1 { font-weight: 700; line-height: 1.02; letter-spacing: -0.035em; }
.hero__content h1 { font-size: min(var(--step-4), 4.5rem); }
.pagehero__content > p {
    color: #1B1B1B;
    font-weight: 600;
    font-size: clamp(1rem, 1.04vw, 1.25rem);
    line-height: 1.5;
    max-width: clamp(440px, 42.2vw, 810px);
    text-shadow: 0 0 14px rgba(0, 0, 0, .10);
}
.pagehero__actions { margin-top: 2.1rem; }
.pagehero__actions .btn--primary { box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .45); }

/* Six cards: 459x225 on the frame, 22px gutters, the homepage tile. */
.biz-cards { gap: 22px; }
.biz-cards .feature { padding: 26px; }
.biz-cards .feature__icon { width: 70px; height: 70px; border-radius: 18px; margin-bottom: 22px; }
/* The SVGs are the whole 70x70 Figma tile (glyph centred, padding baked in),
   so they fill the tile; shrinking them to 34px left a ~10px glyph. */
.biz-cards .feature__icon img { width: 100%; height: 100%; }

/* Photo and copy share the column equally here (686 / 686, 48 between). */
@media (min-width: 860px) { .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 2.5vw, 48px); } }
.split--even .split__photo::before { display: none; }
.ticklist--lg li { font-size: clamp(.95rem, .89vw, 1.0625rem); padding-left: 34px; margin-top: 1.25rem; }
.ticklist--lg li::before { width: 20px; height: 20px; top: .15em; }

/* Inquiry: 686-wide column, 59px fields 12px apart, dark placeholders,
   an 18px-radius block button. */
.inquiry .eyebrow { margin-bottom: 1.75rem; }
.inquiry__head p { font-size: clamp(1rem, .94vw, 1.125rem); line-height: 1.6; max-width: 38em; }
.inquiry__form { max-width: 686px; margin-top: clamp(1.5rem, 1.9vw, 36px); }
.inquiry__form .field { margin-bottom: 12px; }
.inquiry__form .input,
.inquiry__form .select,
.inquiry__form .textarea {
    padding: 1.1rem 1.1rem;
    min-height: 61px;
    border-color: var(--line);
    border-radius: 14px;
    font-size: 1rem;
    color: var(--ink);
}
.inquiry__form .textarea { min-height: 119px; }
.inquiry__form .input::placeholder,
.inquiry__form .textarea::placeholder { color: var(--ink); opacity: 1; }
/* Businesses form (Figma 1695:7220) and Goat waitlist (1695:12559): placeholders #17100C at 50%. */
#inquiry .inquiry__form .input::placeholder,
#inquiry .inquiry__form .textarea::placeholder,
#waitlist .inquiry__form .input::placeholder,
#waitlist .inquiry__form .textarea::placeholder { color: rgba(23, 16, 12, .5); }
.inquiry__form .select { color: var(--ink); }
.inquiry__form .btn { margin-top: 8px; min-height: 58px; padding-block: .8em; font-size: clamp(1rem, 1.04vw, 1.25rem); font-weight: 600; border-radius: 18px; }

/* ==========================================================================
   Farmers — rebuilt 2026-09-20 from Figma frame 1496:5814 (page
   "UpTrade~Index-v3-r6-For Development-Shazad"): banner, "what you get"
   split, four-card band, closing. Hero wording from the client's own
   Farmers frame; layout, colours and assets from the Shazad frame.
   ========================================================================== */
/* Two-line headline over 917px on the frame; the Businesses cap would break it early. */
.pagehero--farmers .pagehero__content { max-width: clamp(480px, 50vw, 960px); }
.pagehero--farmers .pagehero__content h1 { max-width: 13.2em; }
.pagehero--farmers .pagehero__content > p { max-width: clamp(440px, 46vw, 880px); }
/* Farmers hero type (Figma 1695:7595): badge Inter Bold 17 caps, copy Inter
   Semi Bold 24 / 32.5 in a 900px column, button Plus Jakarta Sans Bold 24. */
.pagehero--farmers .eyebrow { font-family: "Inter", var(--body); font-size: clamp(.8125rem, .885vw, 1.0625rem); font-weight: 700; line-height: 1.1; letter-spacing: .029em; padding: .65em 1.24em; }
.pagehero--farmers .pagehero__content > p:not(.pagehero__actions) { font-family: "Inter", var(--body); font-weight: 600; font-size: clamp(1rem, 1.25vw, 1.5rem); line-height: 1.354; max-width: clamp(440px, 46.9vw, 900px); }
.pagehero--farmers .pagehero__actions .btn--lg { font-weight: 700; font-size: clamp(1rem, 1.25vw, 1.5rem); line-height: 1.333; padding: .583em 1.833em; color: #FCFCFC; }

/* EN / URDU pill in the banner's bottom-right corner: 122x34, #F5F5F5 on a
   yellow hairline, the active language a 50x29 orange chip. Sits on the
   content column's right edge, 42px up from the banner's foot. */
.lang-toggle {
    position: absolute;
    right: calc((100% - min(100% - 2.5rem, var(--container))) / 2);
    bottom: clamp(1rem, 2.2vw, 42px);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 34px;
    padding: 2px;
    background: #F5F5F5;
    border: 1px solid var(--yellow);
    border-radius: var(--pill);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #313131;
}
.lang-toggle span, .lang-toggle a {
    display: inline-grid; place-items: center;
    min-width: 50px; height: 28px;
    padding-inline: .8em;
    border-radius: var(--pill);
    color: inherit; text-decoration: none;
}
.lang-toggle .is-active { background: var(--orange-card); color: #fff; }
.lang-toggle [aria-disabled="true"] { cursor: default; }

/* "What you get": four ticked points, 75px apart, beside the square photo. */
.farm-points { list-style: none; margin: 0; padding: 0; }
.farm-points li { position: relative; padding-left: 36px; margin: 0; }
.farm-points li + li { margin-top: clamp(1.25rem, 1.6vw, 30px); }
.farm-points li::before {
    content: "";
    position: absolute; left: 2px; top: .25em;
    width: 20px; height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='8.33' stroke='%23F26900' stroke-width='1.67'/%3E%3Cpath d='M7.5 10l1.67 1.67L12.5 8.33' stroke='%23F26900' stroke-width='1.67' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.farm-points h3 { font-size: clamp(1.05rem, 1.05vw, 1.25rem); line-height: 1.2; margin: 0 0 .3rem; color: var(--ink); }
.farm-points p { font-size: .9375rem; line-height: 1.45; color: var(--ink-2); margin: 0; }
.split--farm h2 { margin-bottom: 1.6rem; }

/* Four 342x206 cards on the beige band: bare orange icon, no tile. */
.farm-steps { gap: 18px; }
@media (min-width: 860px) { .farm-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.farm-steps .feature { padding: 30px 26px 28px; }
.farm-steps .feature__icon { width: 48px; height: 48px; background: none; border-radius: 0; margin: 0 0 24px; }
.farm-steps .feature__icon img { width: 48px; height: 48px; }
/* ==========================================================================
   Goat Entrepreneurs — rebuilt 2026-09-20 from Figma frame 1496:10818 (page
   "UpTrade~Index-v3-r6-For Development-Shazad"). Shares the Farmers banner
   and card rules; adds the step label and the waitlist band.
   ========================================================================== */
.goat-steps { padding-block: clamp(3.75rem, 6.35vw, 122px) clamp(3.5rem, 5.8vw, 111px); }
.goat-steps h2 { margin-bottom: clamp(1.75rem, 2.1vw, 41px); }
/* 342x226 cards: "STEP n" in 12px orange caps, an ink icon, title, copy. */
.goat-steps__grid .feature { padding: 28px 26px 26px; }
.goat-steps__label {
    display: block;
    margin-bottom: 14px;
    color: var(--orange);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.goat-steps__grid .feature__icon { margin-bottom: 22px; color: var(--ink); }
/* Waitlist: the inquiry column on beige, fields on white. */
.inquiry.section--beige .inquiry__form .input,
.inquiry.section--beige .inquiry__form .textarea { border-color: var(--line); }
.inquiry__head h2 { margin-bottom: .7rem; }
/* ==========================================================================
   Technology — rebuilt 2026-09-20 from Figma frame 1496:6037 (page
   "UpTrade~Index-v3-r6-For Development-Shazad"): banner, six capability
   cards, dark sample-profile band.
   ========================================================================== */
.tech-cards { padding-block: clamp(3.5rem, 5.8vw, 111px) clamp(3.75rem, 6.45vw, 124px); }
/* 459x222 cards, bare orange icon set 37px in, title 115px down. */
.tech-cards__grid { gap: 22px; }
.tech-cards__grid .feature { padding: 35px 37px 32px; }
.tech-cards__grid .feature__icon { width: 48px; height: 48px; background: none; border-radius: 0; margin: 0 0 32px; }
.tech-cards__grid .feature__icon img { width: 48px; height: 48px; }

/* Sample profile: charcoal band, photo left, eight data tiles right. */
.profile { background: var(--night); color: var(--cream); padding-block: clamp(3.5rem, 5.8vw, 112px); }
.profile h2 { color: var(--cream); max-width: 10em; margin-bottom: clamp(1.5rem, 1.7vw, 33px); }
.profile .eyebrow--light { background: rgba(242, 105, 0, .18); color: var(--orange); }
.profile__photo { box-shadow: 0 30px 60px -12px rgba(0, 0, 0, .6); }
.profile__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 15px;
    margin: 0;
}
.profile__tile {
    padding: 14px 16px 15px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(253, 250, 244, .12);
    border-radius: 12px;
}
.profile__tile dt {
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(253, 250, 244, .55);
}
.profile__tile dd {
    margin: 4px 0 0;
    font-family: var(--display);
    font-size: clamp(1.125rem, 1.25vw, 1.5rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--cream);
    line-height: 1.2;
}
@media (max-width: 480px) { .profile__grid { grid-template-columns: 1fr; } }
/* ==========================================================================
   Impact — rebuilt 2026-09-20 from Figma frame 1496:6298 and its component
   sets (page "UpTrade~Index-v3-r6-For Development-Shazad"): hover-revealed
   banner, six stat cards, eight SDG cards that dissolve into their data face
   on hover / press (the card component's "While pressing → Variant2,
   Dissolve, ease-out 300ms"), closing band.
   ========================================================================== */
.pagehero--impact .pagehero__content h1 { max-width: 12em; }
.pagehero--impact .pagehero__content > p { max-width: clamp(440px, 40vw, 770px); }

/* Six 460x170 cards, 20px apart: 57px icon, figure, label. */
.impact-stats { padding-block: clamp(3.5rem, 5.8vw, 112px) clamp(3.75rem, 6.25vw, 120px); }
.impact-stats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.impact-stat {
    display: flex; align-items: center; gap: 27px;
    min-height: 170px;
    padding: 30px 35px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
}
.impact-stat__icon { width: 57px; height: 57px; flex-shrink: 0; }
.impact-stat__value { font-family: var(--display); font-size: clamp(1.5rem, 1.7vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
.impact-stat__label { margin-top: 6px; font-size: .875rem; color: var(--ink-2); }
@media (max-width: 1100px) { .impact-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .impact-stats__grid { grid-template-columns: 1fr; } .impact-stat { min-height: 0; padding: 24px; } }

/* SDG band: heading left, lede right (shares the Solution header rules),
   then four columns of 340x408 cards. Everything inside a card is sized in
   container-query units so the 340px design scales with the column. */
.sdg { padding-block: clamp(4rem, 8.6vw, 165px) clamp(3.5rem, 5.8vw, 112px); }
.sdg__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: clamp(1.75rem, 1.9vw, 36px); }
@media (max-width: 1100px) { .sdg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .sdg__grid { grid-template-columns: 1fr; } }

.sdg-card {
    position: relative;
    display: block;
    aspect-ratio: 340 / 408;
    border-radius: 22px;
    border: 1px solid var(--line);
    overflow: hidden;
    background: #fff;
    color: var(--ink);
    text-decoration: none;
    container-type: inline-size;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
}
.sdg-card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sdg-card__front, .sdg-card__back {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    padding: 5cqw;
    transition: opacity .3s ease-out;
}
/* Resting face: white rising from the foot of the card. */
.sdg-card__front {
    justify-content: flex-end;
    background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0) 65%);
}
.sdg-card__num {
    display: inline-flex; align-items: center; gap: 1.8cqw;
    margin: 0 0 -2cqw 0;
    position: relative; z-index: 1;
    font-size: 3.5cqw; font-weight: 700; color: var(--ink);
}
.sdg-card__num b {
    display: inline-grid; place-items: center;
    width: 10cqw; height: 10cqw; border-radius: 50%;
    background: var(--ink); color: #fff;
    font-size: 4.4cqw; font-weight: 700;
}
.sdg-card__row { display: flex; align-items: flex-start; gap: 3.2cqw; }
.sdg-card__tile {
    flex-shrink: 0;
    display: grid; place-items: center;
    width: 24cqw; height: 24cqw; border-radius: 5.3cqw;
    background: rgba(242, 105, 0, .12);
}
.sdg-card__tile img { width: 17.6cqw; height: 17.6cqw; }
.sdg-card__text { display: block; padding-top: 2cqw; min-width: 0; }
.sdg-card__title { display: block; font-family: var(--display); font-size: 4.7cqw; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.sdg-card__copy { display: block; margin-top: 1.2cqw; font-size: 3.8cqw; line-height: 1.35; color: var(--ink-2); }

/* Pressed face: orange wash, white pictogram, four figures, "More Info". */
.sdg-card__back {
    justify-content: flex-start;
    padding-top: 11.5cqw;
    background: linear-gradient(to bottom, #E25A2A 0%, rgba(226, 90, 42, .8) 100%);
    color: #fff;
    opacity: 0;
}
.sdg-card__num--light { color: #fff; margin-bottom: -2cqw; }
.sdg-card__num--light b { background: #fff; color: var(--orange-card); }
.sdg-card__tile--dark { background: rgba(0, 0, 0, .2); }
.sdg-card__tile--dark img { filter: brightness(0) invert(1); }
.sdg-card__back .sdg-card__title { color: #fff; }
.sdg-card__back .sdg-card__copy { color: var(--cream); }
.sdg-card__figures {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4.1cqw 3.8cqw;
    margin-top: 4.4cqw;
}
.sdg-card__figure {
    display: flex; flex-direction: column;
    height: 22.4cqw;
    padding: 4.5cqw 0 0 6.5cqw;
    border-radius: 3.4cqw;
    background: rgba(0, 0, 0, .1);
    border: 1px solid var(--yellow);
    font-size: 3.8cqw; color: var(--cream); line-height: 1.2;
}
.sdg-card__figure b { display: block; font-family: var(--display); font-size: 7cqw; font-weight: 700; color: var(--yellow); line-height: 1; margin-bottom: 1.8cqw; }
.sdg-card__more {
    align-self: center;
    margin-top: 3.2cqw;
    display: inline-grid; place-items: center;
    width: 36.8cqw; height: 14cqw; border-radius: 99px;
    background: #17100C; color: var(--cream);
    font-size: 4.1cqw; font-weight: 600;
}
.sdg-card:hover .sdg-card__back, .sdg-card:active .sdg-card__back, .sdg-card:focus-visible .sdg-card__back { opacity: 1; }
.sdg-card:hover .sdg-card__front, .sdg-card:active .sdg-card__front, .sdg-card:focus-visible .sdg-card__front { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .sdg-card__front, .sdg-card__back { transition: none; } }
/* ==========================================================================
   About — rebuilt 2026-09-20 from Figma frame 1766:10921 (page
   "UpTrade~Index-v3-r6-For Development-Shazad"): banner, mission split,
   leadership cards. No closing band on this page.
   ========================================================================== */
/* Two lines over 1043px on the frame: the column and the headline need more room than the other banners. */
.pagehero--about .pagehero__content { max-width: clamp(480px, 58vw, 1100px); }
.pagehero--about .pagehero__content h1 { max-width: 15.2em; }
.pagehero--about .pagehero__content > p { max-width: clamp(440px, 41.5vw, 800px); }
/* Figma About banner (1695:9950): the copy block is top-aligned 127.5px down the
   657px banner (it has no button, so centring pushed it low), 22.9px between
   badge, headline and lede, and the lede runs 812px. Desktop only. */
@media (min-width: 860px) {
    .pagehero--about { align-content: start; padding-top: clamp(2.5rem, 6.64vw, 127.5px); }
    .pagehero--about .eyebrow,
    .pagehero--about .pagehero__content h1 { margin-bottom: clamp(1rem, 1.19vw, 22.9px); }
}
.pagehero--about .pagehero__content > p:not(.pagehero__actions) { max-width: clamp(440px, 42.3vw, 812px); }

/* Mission: 384px band, heading left, five-line paragraph right, both
   starting on the eyebrow's own line. */
.mission { padding-block: clamp(3.5rem, 5.8vw, 112px) clamp(3.75rem, 6.1vw, 118px); }
.mission__head { align-items: start; gap: clamp(1.5rem, 6.7vw, 128px); }
@media (min-width: 860px) { .mission__head { grid-template-columns: minmax(0, 590fr) minmax(0, 580fr); } }
.mission__head h2 { max-width: 13em; }
.mission__lede { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--ink-2); }
@media (min-width: 860px) { .mission__lede { padding-top: .4rem; } }

/* Leadership: two 700px cards per row, 22px apart, 26px between rows.
   194px portrait with the initials disc on its corner, copy beside it. */
.leadership { padding-block: clamp(3.5rem, 5.8vw, 112px) clamp(3.5rem, 4.7vw, 91px); }
.leadership h2 { margin-bottom: clamp(1.5rem, 2.7vw, 52px); }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 22px; }
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr; } }
.person {
    display: flex; align-items: flex-start; gap: 26px;
    padding: 42px 42px 42px 42px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
}
.person__photo {
    position: relative; flex-shrink: 0;
    width: clamp(120px, 10.1vw, 194px); height: clamp(120px, 10.1vw, 194px);
    border-radius: 22px;
    border: 1px solid #FED6B7;
    overflow: visible;
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 21px; }
.person__initials {
    position: absolute; right: 0; bottom: 0;
    display: grid; place-items: center;
    width: 48px; height: 48px; border-radius: 50%;
    background: linear-gradient(135deg, #F26900, #CC2A1B);
    color: #FCFCFC; font-family: var(--display); font-size: 1rem; font-weight: 700; letter-spacing: .02em;
}
.person__body { min-width: 0; padding-top: 6px; }
.person h3 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; color: var(--ink); letter-spacing: -0.01em; }
.person__role { margin: 0 0 14px; font-size: .8125rem; font-weight: 700; color: var(--orange); }
.person__bio { margin: 0; font-size: .875rem; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 560px) { .person { flex-direction: column; padding: 28px; } }
/* ==========================================================================
   BUY FROM US — Figma frame 1496:8561 "UpTrade-Buy-From-UpTrade-Sadqa"
   (page "UpTrade~Index-v3-r6-For Development-Shazad") plus its prototype
   states for Zakaat, Aqeeqah and Gratitude.
   Geometry at 1920: content column 250–1670; eyebrow y112; h1 cap 50;
   four 340×172 tabs (gap 20, r18); white panel 1420 wide r22 pad 24 holding
   a 489-wide options card and an 862-wide about card (1px #E3DDD6, r16);
   option rows 439×110 #FFF8F3 r18 with an 87×86 white icon tile; photo
   398×529 r22; bundle cards ~126 wide that grow orange on hover with the
   copy and a black "Add To Cart" pill; then a 569px faded photo band.
   ========================================================================== */
.buy {
    background: var(--beige);
    padding-block: clamp(3.5rem, 5.8vw, 112px) clamp(5rem, 10vw, 200px);
    color: var(--ink);
    overflow-x: clip; /* directional reveals translate off-screen; never widen the page */
}
.buy__head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem clamp(1.5rem, 3vw, 4rem);
    align-items: end;
    margin-bottom: clamp(1.5rem, 1.35vw, 26px);
}
.buy__head .eyebrow { margin-bottom: clamp(1rem, 1.35vw, 26px); }
.buy__head h1 {
    margin: 0;
    font-size: clamp(2.5rem, 3.34vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.buy__lede {
    margin: 0;
    max-width: 34em;
    font-size: clamp(1rem, .94vw, 18px);
    line-height: 1.5;
    color: var(--ink-2);
    padding-bottom: .55em;
}
@media (min-width: 860px) {
    .buy__head { grid-template-columns: 1fr 1fr; }
}

/* ---- purpose tabs */
.buy__tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    gap: 20px;
    margin: 0;
}
.buy-tab {
    position: relative;
    display: block;
    text-align: left;
    padding: 25px 25px 24px;
    min-height: 172px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    transition: background-color .5s var(--spring), color .35s ease, border-color .35s ease, transform .5s var(--spring), box-shadow .5s ease;
}
.buy-tab:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(23, 16, 12, .35); }
.buy-tab:focus-visible { outline: 3px solid rgba(242, 105, 0, .45); outline-offset: 2px; }
.buy-tab__icon {
    display: grid;
    place-items: center;
    width: 60px;
    height: 59px;
    border-radius: 18px;
    background: rgba(242, 105, 0, .1);
    transition: background-color .5s var(--spring);
}
.buy-tab__icon img { width: 38px; height: 39px; object-fit: contain; image-rendering: auto; }
.buy-tab__title {
    position: absolute;
    top: 25px;
    left: 96px;
    right: 25px;
    height: 59px;
    display: flex;
    align-items: center;
    font-family: var(--display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
}
.buy-tab__desc {
    display: block;
    margin-top: 13px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
    transition: color .35s ease;
}
.buy-tab.is-active {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
}
.buy-tab.is-active .buy-tab__icon { background: #fff; }
.buy-tab.is-active .buy-tab__desc { color: rgba(255, 255, 255, .92); }
/* Phones: the four purposes as a compact 2x2 (icon + name, no blurb) so the
   panel that changes on tap sits right under them, in view. */
@media (max-width: 760px) {
    .buy__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .buy-tab { display: flex; align-items: center; gap: 10px; min-height: 0; padding: 10px 12px; border-radius: 14px; }
    .buy-tab__icon { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; }
    .buy-tab__icon img { width: 24px; height: 25px; }
    .buy-tab__title { position: static; height: auto; font-size: 16px; line-height: 1.2; }
    .buy-tab__desc { display: none; }
    .buy-tab:hover { transform: none; }
}
/* Purpose cards: 340x172 on the 1920 frame (Figma 1695:13458). Padding, tile,
   title and copy scale with the viewport so the cards shrink on smaller
   desktops instead of staying 172px tall. Unchanged at 1920. */
@media (min-width: 861px) {
    .buy__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.04vw, 20px); }
    .buy-tab { --pad: clamp(14px, 1.3vw, 25px); --tile: clamp(40px, 3.125vw, 60px); padding: var(--pad) var(--pad) calc(var(--pad) - 1px); min-height: clamp(100px, 8.96vw, 172px); border-radius: clamp(12px, .94vw, 18px); }
    .buy-tab__icon { width: var(--tile); height: calc(var(--tile) - 1px); border-radius: clamp(12px, .94vw, 18px); }
    .buy-tab__icon img { width: calc(var(--tile) * .633); height: calc(var(--tile) * .65); }
    .buy-tab__title { top: var(--pad); left: calc(var(--pad) + var(--tile) + clamp(6px, .57vw, 11px)); right: var(--pad); height: calc(var(--tile) - 1px); font-size: clamp(1rem, 1.25vw, 1.5rem); }
    .buy-tab__desc { margin-top: clamp(8px, .68vw, 13px); font-size: clamp(.75rem, .73vw, .875rem); }
}

/* ---- panel */
.buy__panels {
    margin-top: 10px;
    background: #fff;
    border-radius: 22px;
    padding: 24px;
}
.buy-panel[hidden] { display: none; }
.buy-panel.is-entering { animation: buy-enter .7s var(--spring) both; }
@keyframes buy-enter {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
.buy-panel__grid {
    display: grid;
    gap: 20px;
    align-items: start;
}
@media (min-width: 960px) {
    .buy-panel__grid--subtypes { grid-template-columns: minmax(0, 489fr) minmax(0, 862fr); }
    .buy-panel__grid--bundles  { grid-template-columns: minmax(0, 489fr) minmax(0, 862fr); }
}
.buy-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 25px;
}
.buy-card__title {
    margin: 0;
    font-family: var(--display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--orange);
}
.buy-card__intro {
    margin: 7px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
}
.buy-card__copy { margin-top: 26px; }
.buy-card__copy p, .buy-card__text p {
    margin: 0 0 1.15em;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-2);
}
.buy-card__copy p:last-child, .buy-card__text p:last-child { margin-bottom: 0; }
.buy-card__note { font-weight: 600; color: var(--ink) !important; }
.buy-card__note strong { color: var(--orange); font-weight: 700; }

/* sub-type options */
.buy-options { display: grid; gap: 8px; margin-top: 20px; }
.buy-option {
    display: grid;
    grid-template-columns: 87px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    text-align: left;
    padding: 10px;
    min-height: 110px;
    background: #FFF8F3;
    border: 0;
    border-radius: 18px;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    transition: background-color .55s var(--spring), color .35s ease, transform .55s var(--spring);
}
.buy-option__icon {
    display: grid;
    place-items: center;
    width: 87px;
    height: 86px;
    border-radius: 18px;
    background: #fff;
    transition: background-color .55s var(--spring);
}
.buy-option__icon img { width: 55px; height: 57px; object-fit: contain; }
.buy-option__body { display: grid; gap: 4px; padding-right: 10px; }
.buy-option__body strong {
    font-family: var(--display);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
    transition: color .35s ease;
}
.buy-option__body span { font-size: 14px; line-height: 1.55; color: var(--ink-2); transition: color .35s ease; }
.buy-option:hover, .buy-option:focus-visible, .buy-option.is-selected {
    background: var(--night);
    color: #fff;
}
.buy-option:hover .buy-option__icon, .buy-option:focus-visible .buy-option__icon, .buy-option.is-selected .buy-option__icon { background: var(--orange); }
/* On the orange tile Figma lifts the orange line icon to white (image exposure +1), otherwise it vanishes. */
.buy-option:hover .buy-option__icon img, .buy-option:focus-visible .buy-option__icon img, .buy-option.is-selected .buy-option__icon img { filter: brightness(0) invert(1); }
.buy-option:hover strong, .buy-option:focus-visible strong, .buy-option.is-selected strong { color: var(--orange); }
.buy-option:hover span, .buy-option:focus-visible span, .buy-option.is-selected span { color: rgba(255, 255, 255, .9); }
.buy-option:focus-visible { outline: 3px solid rgba(242, 105, 0, .45); outline-offset: 2px; }

/* about card: photo left, copy right */
.buy-card--about { display: grid; gap: 17px; align-items: start; }
@media (min-width: 760px) { .buy-card--about:not(.buy-card--about-text) { grid-template-columns: minmax(0, 398fr) minmax(0, 415fr); } }
.buy-card__photo {
    width: 100%;
    aspect-ratio: 398 / 529;
    height: auto;
    object-fit: cover;
    border-radius: 22px;
    display: block;
}
.buy-card--about-text .buy-card__text { max-width: 24em; margin-inline: auto; padding-block: clamp(0px, 2vw, 40px); }
.buy-card__heading { display: flex; align-items: center; gap: 11px; margin: 20px 0 25px; }
.buy-card--about-text .buy-card__heading { margin-top: 0; }
.buy-card__heading h2 {
    margin: 0;
    font-family: var(--display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
}

/* bundles */
.buy-card--bundles { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; }
@media (min-width: 960px) { .buy-panel__grid--bundles .buy-card--bundles { min-height: 589px; } }
.buy-card--after { margin-top: 20px; }
.buy-card--after[hidden] { display: none; }
.buy-card--after.is-entering { animation: buy-enter .7s var(--spring) both; }
.buy-card__intro--bundles { margin: 0 0 18px; font-size: 15px; color: var(--ink); }
.buy-card__intro--bundles strong { color: var(--orange); font-weight: 600; }
.bundles {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
}
.bundle {
    position: relative;
    flex: 1 1 104px;
    min-width: 104px;
    max-width: 150px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    color: var(--ink);
    transition: background-color .45s var(--spring), border-color .45s ease, transform .45s var(--spring), box-shadow .45s ease;
}
.bundle[hidden] { display: none; }
.bundle form { display: grid; gap: 0; padding: 9px 9px 12px; text-align: center; }
.bundle__img {
    display: block;
    height: 80px;
    border-radius: 12px;
    background: #FFF8F3;
    overflow: hidden;
    transition: background-color .45s var(--spring);
}
.bundle__img img { width: 100%; height: 100%; object-fit: cover; }
/* Figma tile: 68×65 line icon centred on the 132×88 tile; the white twin shows on the black hover tile. */
.bundle__img { display: grid; place-items: center; }
.bundle__img .bundle__icon { width: auto; height: auto; max-width: 82%; max-height: 74%; object-fit: contain; grid-area: 1 / 1; }
.bundle__icon--hover { opacity: 0; transition: opacity .3s ease; }
.bundle__icon--rest  { opacity: 1; transition: opacity .3s ease; }
.bundle:hover .bundle__icon--hover, .bundle:focus-within .bundle__icon--hover, .bundle.is-open .bundle__icon--hover { opacity: 1; }
.bundle:hover .bundle__icon--rest,  .bundle:focus-within .bundle__icon--rest,  .bundle.is-open .bundle__icon--rest  { opacity: 0; }
.bundle__name {
    margin: 16px 0 0;
    font-family: var(--display);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    transition: color .35s ease;
}
.bundle__price {
    margin: 4px 0 0;
    font-family: var(--display);
    font-size: 16px;
    font-weight: 600;
    color: var(--orange);
    transition: color .35s ease;
}
.bundle__more {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .55s var(--spring), opacity .35s ease;
}
.bundle__more-inner { overflow: hidden; min-height: 0; }
.bundle__more p {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: #fff;
}
.bundle__btn {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    margin-top: 14px;
    padding: .55em .9em;
    background: var(--night);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .3s var(--spring), background-color .3s ease;
}
.bundle__btn:hover { transform: translateY(-1px); background: #000; }
.bundle:hover, .bundle:focus-within, .bundle.is-open {
    background: var(--orange);
    border-color: var(--orange);
    color: #fff;
    box-shadow: 0 22px 40px -20px rgba(242, 105, 0, .6);
    z-index: 1;
}
.bundle:hover .bundle__img, .bundle:focus-within .bundle__img, .bundle.is-open .bundle__img { background: var(--night); }
.bundle:hover .bundle__price, .bundle:focus-within .bundle__price, .bundle.is-open .bundle__price { color: var(--night); }
.bundle:hover .bundle__more, .bundle:focus-within .bundle__more, .bundle.is-open .bundle__more { grid-template-rows: 1fr; opacity: 1; }
.bundle:focus-visible { outline: 3px solid rgba(242, 105, 0, .45); outline-offset: 2px; }

/* ---- faded photo band under the panel (design: 1920×569, white → orange 30% wash) */
.buy-band {
    height: clamp(180px, 29.6vw, 569px);
    background:
        linear-gradient(230deg, rgba(242, 105, 0, .18) 0%, rgba(255, 255, 255, 0) 60%),
        linear-gradient(rgba(253, 250, 244, .62), rgba(253, 250, 244, .62)),
        url("../img/site/buy-band.webp") center / cover no-repeat,
        var(--cream);
}

@media (max-width: 760px) {
    .buy__panels { padding: 12px; }
    .buy-card { padding: 18px; }
    .buy-tab { min-height: 0; }
    .bundle { flex-basis: calc(50% - 6px); }
}
@media (prefers-reduced-motion: reduce) {
    .buy-panel.is-entering, .buy-card--after.is-entering { animation: none; }
}


/* ==========================================================================
   BUY FROM US — r7 flow (client prototype 1695:10229; component sets Sadqa
   1695:18958, Tabs-Karachi 1695:13024, Main Content 1695:28120).
   Panel 1420 = options card 489 | gap 21 | stage card 862 (padding 25).
   Stage: heading 24/600 + 14px copy beside a 398-wide photo (243 tall for
   Gift, 192 banner for Sacrifice, 321 portrait for Contribute); bundle rows
   of 152-wide cards (5-up, gap 12) or 264-wide cards (3-up, gap 10) with
   132×88 / 242×88 tiles r15; Karachi/Thar toggle 390×85 r18 with a 72×63
   r15 icon tile and a 36px radio; wizard on #F8EEE6 with 559-wide rows r10,
   #F4BF95 hairlines and a 71px orange CONTINUE.
   ========================================================================== */
@media (min-width: 960px) {
    .buy-panel__grid--flow { grid-template-columns: minmax(0, 489fr) minmax(0, 862fr); gap: 21px; }
}
.buy-panel--flow .buy-option[role="tab"] { cursor: pointer; }
.buy-card--stage { position: relative; min-height: 560px; transition: background-color .5s var(--spring), border-color .4s ease; }
.stage[hidden] { display: none; }
.stage.is-entering { animation: buy-enter .65s var(--spring) both; }

/* intro (purpose default) — same as the first build's about card */
.stage--intro { display: grid; gap: 17px; align-items: start; }
@media (min-width: 760px) { .stage--intro { grid-template-columns: minmax(0, 398fr) minmax(0, 415fr); } }
.stage__photo { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 22px; }
.stage__photo--tall     { aspect-ratio: 398 / 529; }
.stage__photo--wide     { aspect-ratio: 398 / 243; }
.stage__photo--banner   { aspect-ratio: 398 / 192; }
.stage__photo--portrait { aspect-ratio: 398 / 321; }
.stage__photo--hero     { aspect-ratio: 815 / 270; margin-bottom: 19px; }
.buy-card--hero-stage { min-height: 0; }
.stage--hero .bundles { justify-content: flex-start; }
.wizard__title--plain .wizard__dash, .wizard__title--plain [data-w-title] { display: none; }
.stage__text p { margin: 0 0 1.05em; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.stage__text p:last-child { margin-bottom: 0; }
.stage__title {
    margin: 0 0 10px;
    font-family: var(--display);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--ink);
}

/* sub-type heads */
.stage__head { display: grid; gap: 20px 32px; align-items: start; margin-bottom: 28px; }
@media (min-width: 760px) {
    .stage__head { grid-template-columns: minmax(0, 1fr) 398px; }
    .stage__head--photo-left { grid-template-columns: 398px minmax(0, 1fr); }
    .stage__head--photo-left .stage__photo { order: -1; }
}
.stage__head .stage__text { max-width: 30em; }
.stage__head--amount { margin-bottom: 0; }
.stage--bundles .stage__head--photo-left .stage__text, .stage--banner .stage__head--photo-left .stage__text { max-width: none; }
.stage--banner .stage__head { margin-bottom: 24px; }
/* Gift-a-goat style heads (Figma "Sadqa Main" 1695:10404): copy and photo share
   the panel in two equal columns 17px apart, so on narrower desktops the copy
   is not squeezed into a thin column beside a fixed 398px photo. */
@media (min-width: 760px) {
    .stage--bundles .stage__head:not(.stage__head--photo-left) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 17px; }
    .stage--bundles .stage__head:not(.stage__head--photo-left) .stage__text { max-width: none; }
}
/* Contribute panel (Figma 1695:10863): same equal halves 17px apart, so the copy,
   amount field and button keep a usable width beside the photo. */
@media (min-width: 760px) {
    .stage__head--amount { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 17px; }
    .stage__head--amount .stage__text { max-width: none; }
}

/* bundle rows in the stage */
.stage .bundles--five .bundle { flex: 1 1 118px; max-width: 152px; min-width: 116px; }
.stage .bundles--five .bundle__name, .stage .bundles--five .bundle__price { font-size: clamp(14px, 1.9cqw, 16px); }
.stage .bundles { container-type: inline-size; }
.stage .bundles--three { gap: 10px; }
.stage .bundles--three .bundle { flex: 1 1 200px; max-width: 264px; min-width: 180px; }
.stage .bundles--three .bundle form { padding: 11px 11px 14px; }
.stage .bundles--three .bundle__img { height: 88px; }
.stage .bundles--three .bundle__name { margin-top: 18px; }
.stage .bundle__more p { font-size: 13px; }

/* Karachi / Thar toggle */
.loc-toggle { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 21px; margin: 0 0 22px; }
.loc-toggle__btn {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 10px;
    padding: 11px;
    min-height: 85px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .35s ease, box-shadow .35s ease;
}
.loc-toggle__icon { position: relative; display: grid; place-items: center; width: 72px; height: 63px; border-radius: 15px; background: #FFF8F3; transition: background-color .45s var(--spring); }
.loc-toggle__icon img { grid-area: 1 / 1; width: 48px; height: 49px; object-fit: contain; transition: opacity .3s ease; }
.loc-toggle__icon-on { opacity: 0; }
.loc-toggle__label { font-family: var(--display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; transition: color .3s ease; }
.loc-toggle__radio { position: relative; width: 36px; height: 36px; border-radius: 50%; background: #FDEBDF; }
.loc-toggle__radio::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--orange); transform: scale(0); transition: transform .35s var(--spring); }
.loc-toggle__btn.is-active { border-color: var(--orange); box-shadow: 0 0 0 1px var(--orange) inset; }
.loc-toggle__btn.is-active .loc-toggle__icon { background: var(--orange); }
.loc-toggle__btn.is-active .loc-toggle__icon-on { opacity: 1; }
.loc-toggle__btn.is-active .loc-toggle__icon-rest { opacity: 0; }
.loc-toggle__btn.is-active .loc-toggle__label { color: var(--orange); }
.loc-toggle__btn.is-active .loc-toggle__radio::after { transform: scale(1); }
.loc-toggle__btn:focus-visible { outline: 3px solid rgba(242, 105, 0, .45); outline-offset: 2px; }
.loc[hidden] { display: none; }
.loc.is-entering { animation: buy-enter .55s var(--spring) both; }
.loc__intro { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 20px; }
.loc__photo { width: 256px; height: 142px; object-fit: cover; border-radius: 15px; display: block; }
.loc__text h3 { margin: 6px 0 8px; font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.loc__text p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 640px) { .loc__intro { grid-template-columns: 1fr; } .loc__photo { width: 100%; height: auto; aspect-ratio: 256 / 142; } }

/* contribution amount */
.amount-form { display: grid; gap: 12px; margin-top: 22px; max-width: 398px; }
.amount-form__input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
}
.amount-form__input::placeholder { color: #9A918A; }
.amount-form__input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242, 105, 0, .15); }
.amount-form__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    height: 48px;
    padding: 0 1.5em;
    background: var(--night);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .3s var(--spring), background-color .3s ease;
}
.amount-form__btn:hover { transform: translateY(-1px); background: #000; }

/* ---- wizard (Main Content) */
.buy-card--wizard { background: #F8EEE6; border-color: #F8EEE6; }
.wizard__form { display: grid; gap: 0; max-width: 560px; margin-inline: auto; }
.wizard__head { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 15px; align-items: start; margin-bottom: 40px; }
.wizard__icon { display: grid; place-items: center; width: 74px; height: 73px; border-radius: 18px; background: #fff; }
.wizard__icon img { width: 51px; height: 52px; object-fit: contain; }
.wizard__title { margin: 8px 0 6px; font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: #000; line-height: 1.2; }
.wizard__purpose { color: var(--orange); font-size: 21px; font-weight: 700; }
.wizard__lede { margin: 0; font-size: 14px; line-height: 1.4; color: #000; }
.wizard__step[hidden] { display: none; }
.wizard__step.is-entering { animation: buy-enter .55s var(--spring) both; }
.wizard__label { margin: 0 0 8px; font-family: var(--display); font-size: 18px; font-weight: 600; color: #000; }

.w-select { position: relative; margin-bottom: 22px; }
.w-select__btn {
    display: grid;
    grid-template-columns: 67px minmax(0, 1fr) auto 27px;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 90px;
    padding: 16px 0 16px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.w-select__tile { display: grid; place-items: center; width: 67px; height: 58px; border-radius: 15px; background: #FFF8F3; overflow: hidden; }
.w-select__tile img { width: 49px; height: 47px; object-fit: contain; }
.w-select__tile img[hidden] { display: none; }
.w-select__name { font-family: var(--display); font-size: 16px; font-weight: 600; color: var(--ink); }
.w-select__price { font-family: var(--display); font-size: 14px; font-weight: 700; color: var(--orange); white-space: nowrap; }
.w-select__chev { display: grid; place-items: center; width: 27px; height: 58px; border-radius: 13.5px 0 0 13.5px; background: #F8EEE6; color: var(--orange); font-size: 14px; justify-self: end; transition: transform .3s var(--spring); }
.w-select.is-open .w-select__chev { transform: rotate(180deg); border-radius: 0 13.5px 13.5px 0; }
.w-select__list {
    position: absolute;
    z-index: 5;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 10px;
    list-style: none;
    background: #FCF4EC;
    border: 1px solid #F4BF95;
    border-radius: 12px;
    box-shadow: 0 24px 50px -20px rgba(23, 16, 12, .35);
    display: grid;
    gap: 8px;
}
.w-select__list[hidden] { display: none; }
.w-select__list li {
    display: grid;
    grid-template-columns: 22px 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 14px 8px 12px;
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--ink);
}
.w-select__list li .w-select__tile { width: 48px; height: 42px; border-radius: 10px; }
.w-select__list li .w-select__tile img { width: 34px; height: 33px; }
.w-select__list li .w-select__name { font-size: 14px; font-weight: 500; }
.w-select__list li .w-select__price { font-size: 13px; font-weight: 600; color: #9A918A; }
.w-select__list li[aria-selected="true"] .w-select__price, .w-select__list li:hover .w-select__price { color: var(--orange); }
.w-select__radio { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #E3DDD6; position: relative; }
.w-select__list li[aria-selected="true"] .w-select__radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--orange); }

.w-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 10px; }
.w-presets[hidden] { display: none; }
.w-presets__btn, .w-presets__other input {
    width: 100%;
    height: 68px;
    background: #fff;
    border: 1px solid #F4BF95;
    border-radius: 10px;
    font: inherit;
    font-size: 15px;
    color: #484545;
    text-align: center;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.w-presets__btn.is-active { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 600; }
.w-presets__other { grid-column: 1 / -1; }
.w-presets__other input { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; cursor: text; }
.w-presets__other input::placeholder { color: #484545; }
.w-presets__other input:focus { outline: none; border-color: var(--orange); }

.w-freq { display: grid; grid-template-columns: 139px minmax(0, 1fr); gap: 12px; margin: 12px 0 30px; }
.w-freq__once, .w-freq__monthly {
    height: 68px;
    background: #fff;
    border: 1px solid #F4BF95;
    border-radius: 10px;
}
.w-freq__once, .w-freq__monthly-btn {
    font: inherit;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #484545;
    cursor: pointer;
    transition: color .3s ease, background-color .3s ease;
}
.w-freq__once { transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.w-freq__once.is-active { background: var(--orange); border-color: var(--orange); color: #fff; font-weight: 700; }
.w-freq__monthly { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 84px); gap: 6px; align-items: center; padding: 9px 9px 9px 0; }
.w-freq__monthly-btn { height: 100%; background: none; border: 0; padding: 0 0 0 26px; text-align: left; }
.w-freq__monthly-btn.is-active { color: var(--orange); font-weight: 700; }
.w-freq__chip {
    height: 48px;
    background: #F8EEE6;
    border: 1px solid #F4BF95;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    color: #1F1F1F;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
}
.w-freq__chip strong { font-weight: 700; }
.w-freq__chip.is-active { background: var(--orange); border-color: var(--orange); color: #fff; }
@media (max-width: 560px) {
    .w-freq { grid-template-columns: 1fr; }
    .w-freq__monthly { grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1fr)); }
    .w-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.wizard__continue {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    width: 100%;
    height: 71px;
    background: var(--orange);
    border: 1px solid #F4BF95;
    border-radius: 10px;
    color: #fff;
    font-family: var(--display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .3s var(--spring), filter .3s ease;
}
.wizard__continue:hover { transform: translateY(-1px); filter: brightness(1.05); }
.wizard__back { margin: 14px auto 0; background: none; border: 0; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.wizard__back:hover { color: var(--orange); }

/* Wizard to the updated Figma (Main Content 1695:28121). Title Plus Jakarta Sans
   Bold 22/28 with the purpose in orange, lede Inter 16/22, Select Type box in
   bold 20/15, Give Now | Give Monthly as two equal 69px buttons 14px apart (the
   selected one takes Figma's yellow-glow hover look), CTA 72px / 18px. Picking
   Give Monthly reveals the 3 / 6 / 12 month choice underneath, kept so monthly
   orders still record a term. */
.wizard__title { font-size: 22px; font-weight: 700; line-height: 28px; letter-spacing: 0; }
.wizard__purpose { font-size: 22px; }
.wizard__lede { font-family: "Inter", var(--body); font-size: 16px; line-height: 22px; }
.wizard__label { font-weight: 700; line-height: 28px; }
.w-select__btn { border-radius: 15px; }
.w-select__btn .w-select__name { font-size: 20px; font-weight: 700; letter-spacing: -0.45px; }
.w-select__btn .w-select__price { font-size: 15px; letter-spacing: -0.32px; }
@media (max-width: 560px) { .w-select__btn .w-select__name { font-size: 16px; } }
.w-freq { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.w-freq__monthly { display: contents; }
.w-freq__once, .w-freq__monthly-btn {
    grid-column: span 3;
    height: 69px;
    padding: 0 8px;
    background: #fff;
    border: 1px solid #F4BF95;
    border-radius: 10px;
    text-align: center;
    font-family: var(--display);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    color: #484545;
    transition: color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.w-freq__once:hover, .w-freq__monthly-btn:hover,
.w-freq__once.is-active, .w-freq__monthly-btn.is-active { background: #fff; border-color: #FFD754; box-shadow: 0 0 13px rgba(255, 215, 84, .5); color: var(--orange); font-weight: 700; }
.w-freq__chip { grid-column: span 2; display: none; }
.w-freq:has(.w-freq__monthly-btn.is-active) .w-freq__chip { display: block; }
/* Monthly giving switched off (store.monthly_giving): Give Monthly is hidden
   and Give Now takes the whole row. */
.w-freq__monthly[hidden] { display: none; }
.w-freq--once-only .w-freq__once { grid-column: 1 / -1; }
.wizard__continue { height: 72px; font-size: 18px; letter-spacing: 0; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.wizard__continue:hover { transform: none; filter: none; background: #EB7316; color: #FFD754; box-shadow: 0 0 13px rgba(255, 215, 84, .5); }
.wizard__error { margin: 0 0 12px; font-size: 13px; color: #B3261E; }
.wizard__error[hidden] { display: none; }

.wizard__step-title { margin: 30px 0 6px; text-align: center; font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; color: #000; }
.wizard__step-sub { margin: 0 0 22px; text-align: center; font-size: 14px; color: #000; }
.w-field { position: relative; display: block; margin-bottom: 15px; }
.w-field input, .w-field select {
    width: 100%;
    height: 68px;
    padding: 0 18px;
    background: #fff;
    border: 1px solid #F4BF95;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    color: var(--ink);
    appearance: none;
}
.w-field input::placeholder { color: #484545; }
.w-field select:invalid { color: #484545; }
.w-field input:focus, .w-field select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(242, 105, 0, .15); }
.w-field__chev { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--orange); pointer-events: none; }
.w-field--select select { padding-right: 44px; }

/* closing band on this page: the frame's hut photo instead of the home CTA image */
.closing--buy .closing__media img { object-position: center 40%; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


/* ==========================================================================
   CONTACT — Figma frame 1695:10059
   ========================================================================== */

.contact-grid {
    display: grid;
    gap: clamp(1.5rem, 3vw, 2.6rem);
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}
@media (min-width: 900px) {
    /* 31.7% of the container, as the design has it — and it leaves the four
       tabs enough room to stay on one line down to about 1360px. */
    .contact-grid { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); }
}

.contact-aside { display: grid; gap: 1rem; }

.info-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.75rem;
}
.info-card h2 { font-size: var(--step-1); margin: 0 0 1rem; }
.info-card__note { margin: 0; color: var(--ink-2); font-size: var(--step-0); }

.info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem; }
.info-list li { display: flex; align-items: center; gap: .7rem; }
.info-list svg { color: var(--orange); flex-shrink: 0; }
.info-list a { color: var(--ink-2); text-decoration: none; font-size: var(--step-0); }
.info-list a:hover { color: var(--orange); }

/* The tab row: the chosen audience fills with ink, the rest stay outlined. */
.contact-tabs { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.4rem; }
.contact-tab {
    font: inherit;
    font-size: var(--step--1);
    font-weight: 600;
    padding: .7em 1.05em;
    border: 1px solid var(--line);
    border-radius: var(--pill);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    transition: background-color .18s var(--ease-out), color .18s var(--ease-out),
                border-color .18s var(--ease-out);
}
.contact-tab:hover { border-color: var(--muted); }
.contact-tab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.contact-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.4rem, 3vw, 2.1rem);
}
.contact-panel + .contact-panel { margin-top: 1rem; }
.contact-panel__title { font-size: var(--step-1); margin: 0 0 1.2rem; }

/* Without JavaScript every panel is on the page and each needs its own
   heading; with it, the tabs do the choosing and the heading is redundant
   beside the tab that is already lit. The first panel carries `is-active` from
   the server, so a failure to run this leaves one form showing, never none. */
.js .contact-panel { display: none; margin-top: 0; }
.js .contact-panel.is-active { display: block; }
.js .contact-panel__title { display: none; }

.contact-panel .field { margin-bottom: .85rem; }
.contact-panel .input,
.contact-panel .select,
.contact-panel .textarea {
    padding: .95rem 1.1rem;
    border-radius: 12px;
    background: var(--cream);
}
.contact-panel .textarea { min-height: 120px; resize: vertical; }
.contact-panel .btn { margin-top: .5rem; font-weight: 800; }

/* Digital animal profile on a listing (product page): the same charcoal tiles
   as the Technology sample profile, four across on wide screens. */
.profile__grid--wide { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 15px; }
.profile__grid--wide .profile__tile dd { font-size: clamp(1rem, 1.1vw, 1.3rem); overflow-wrap: anywhere; }
@media (max-width: 960px) { .profile__grid--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .profile__grid--wide { grid-template-columns: 1fr; } }

/* Phones: a 2.9:1 banner behind a tall stack of copy was cropped to a thin,
   zoomed slice and then washed white for legibility, so the photo read as
   milky. Instead the copy sits on the plain cream at the top, and the photo
   shows as a clear band underneath it, fading into the cream along its top
   edge. Each page keeps its subject in frame with its own focus point. */
@media (max-width: 720px) {
    /* the button may overlap the faded top of the photo; plain copy may not */
    .pagehero { padding-bottom: 60vw; }
    .pagehero:not(:has(.pagehero__actions)) { padding-bottom: 74vw; }
    .pagehero .pagehero__media {
        top: auto;
        height: 76vw;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 28%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 28%);
    }
    .pagehero .pagehero__media::after { background: none; }
    .pagehero__media img[src*="businesses-hero"] { object-position: 90% 50%; }
    .pagehero__media img[src*="farmers-hero"]    { object-position: 75% 50%; }
    .pagehero__media img[src*="goat-hero"]       { object-position: 50% 50%; }
    .pagehero__media img[src*="tech-hero"]       { object-position: 85% 50%; }
    .pagehero__media img[src*="impact-hero"]     { object-position: 70% 50%; }
    .pagehero__media img[src*="about-hero"]      { object-position: 35% 50%; }
}

/* CTA band buttons on phones and tablets: "Get in touch" and "Request investor
   deck" at the same width — stacked on phones, side by side on tablets. */
@media (max-width: 1024px) {
    .closing__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: min(100%, 340px); margin-left: auto; margin-right: auto; }
    .closing__actions .btn { width: 100%; justify-content: center; }
}
@media (min-width: 600px) and (max-width: 1024px) {
    .closing__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 620px); }
}

/* The hero phone deliberately bleeds past the right edge; clip it sideways so
   it no longer widens the page (horizontal scrollbar). Only the x axis is
   clipped, so the offering cards hanging off the bottom stay visible. */
.hero { overflow-x: clip; }

/* Buy From Us wizard as Figma's overlay (frame 1695:21583, 862x808 over the
   stage card): a 600-wide #F8EEE6 box (r22, padding 24/20) pinned to the
   card's left edge, opening from the left, while the sub-type panel stays in
   place under a 30% black + blur scrim that fills the rest. Clicking the scrim
   (or Esc) closes it. */
.buy-card--stage > .stage--wizard {
    position: absolute;
    z-index: 5;
    top: -1px; left: -1px;
    /* Card height, but never shorter than its own content (the JS grows the card to match). */
    min-height: calc(100% + 2px);
    width: calc((100% + 2px) * 600 / 862);
    padding: 24px 20px;
    background: #F8EEE6;
    border-radius: 22px;
}
.buy-card--stage > .stage--wizard .wizard__form { max-width: none; margin: 0; }
/* Figma rows: label 28 + 3, Select Type box 90, Give Now / Monthly 24 below, CTA 28 below. */
.stage--wizard .wizard__label { margin-bottom: 3px; }
.stage--wizard .w-select { margin-bottom: 24px; }
.stage--wizard .w-select__btn { padding-top: 15px; padding-bottom: 15px; }
.stage--wizard .w-freq { margin-bottom: 28px; }
.stage-scrim {
    position: absolute;
    z-index: 4;
    inset: -1px;
    border-radius: inherit;
    background: rgba(0, 0, 0, .3);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s cubic-bezier(.33, 1, .68, 1), visibility 0s linear .3s;
}
.buy-card--stage.is-wizard-open .stage-scrim { opacity: 1; visibility: visible; transition: opacity .3s cubic-bezier(.33, 1, .68, 1); }
.stage--wizard.is-opening { animation: wizard-in .5s cubic-bezier(.22, 1, .36, 1) backwards; }
.stage--wizard.is-closing { animation: wizard-out .3s cubic-bezier(.55, 0, .68, .53) forwards; }
@keyframes wizard-in {
    from { opacity: .4; transform: translateX(-28px); clip-path: inset(0 100% 0 0 round 22px); }
    to   { opacity: 1;  transform: none;              clip-path: inset(0 0 0 0 round 22px); }
}
@keyframes wizard-out {
    from { opacity: 1; transform: none;              clip-path: inset(0 0 0 0 round 22px); }
    to   { opacity: 0; transform: translateX(-28px); clip-path: inset(0 100% 0 0 round 22px); }
}
@media (max-width: 760px) {
    /* Phones: the box takes nearly the whole card, leaving a strip of scrim to tap. */
    .buy-card--stage > .stage--wizard { width: calc(100% + 2px - 36px); padding: 20px 16px; }
}
@media (max-width: 560px) {
    /* The narrower phone box: price drops under the name in the Select Type
       row and in its dropdown, so "Half Goat" no longer wraps into the price. */
    .stage--wizard .w-select__btn { grid-template-columns: 52px minmax(0, 1fr) 24px; column-gap: 10px; row-gap: 2px; padding-left: 10px; }
    .stage--wizard .w-select__btn .w-select__tile { grid-row: 1 / 3; width: 52px; height: 48px; }
    .stage--wizard .w-select__btn .w-select__tile img { width: 40px; height: 38px; }
    .stage--wizard .w-select__btn .w-select__name { grid-column: 2; align-self: end; }
    .stage--wizard .w-select__btn .w-select__price { grid-column: 2; grid-row: 2; align-self: start; }
    .stage--wizard .w-select__btn .w-select__chev { grid-column: 3; grid-row: 1 / 3; width: 24px; height: 48px; }
    .stage--wizard .w-select__list li { grid-template-columns: 20px 40px minmax(0, 1fr); column-gap: 10px; row-gap: 0; padding: 8px 10px; }
    .stage--wizard .w-select__list li .w-select__radio { grid-row: 1 / 3; }
    .stage--wizard .w-select__list li .w-select__tile { grid-row: 1 / 3; width: 40px; height: 36px; }
    .stage--wizard .w-select__list li .w-select__name { grid-column: 3; align-self: end; }
    .stage--wizard .w-select__list li .w-select__price { grid-column: 3; grid-row: 2; align-self: start; }
}

/* Impact banner: "View Survey Insights" (the client's survey deck, PDF) sits in
   the banner's bottom-right corner, on the container's right edge. Out of the
   copy column, so the phone hero keeps its no-button spacing and the button
   lands on the photo band. */
.pagehero__corner { position: absolute; right: max(1.25rem, (100% - var(--container)) / 2); bottom: clamp(1.5rem, 2.6vw, 50px); margin: 0; z-index: 1; }
.pagehero__corner .btn--lg { font-weight: 700; font-size: clamp(1rem, 1.25vw, 1.5rem); line-height: 1.333; padding: .583em 1.833em; color: #FCFCFC; box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .45); }
@media (max-width: 720px) {
    .pagehero__corner { bottom: 1.25rem; }
    .pagehero__corner .btn--lg { font-size: .9375rem; padding: .75em 1.4em; }
}

/* Cookie consent (UK / EU visitors, Google Consent Mode v2): a dark card pinned
   bottom-left; Accept and Reject carry equal weight. */
.consent { position: fixed; left: 16px; bottom: 16px; z-index: 400; width: min(420px, calc(100% - 32px)); padding: 18px 20px; border-radius: 14px; background: #1B1917; color: #fff; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .45); font-size: 14px; line-height: 1.5; }
.consent[hidden] { display: none; }
.consent__text { margin: 0 0 14px; color: rgba(255, 255, 255, .88); }
.consent__text a { color: #fff; text-decoration: underline; }
.consent__actions { display: flex; gap: 10px; }
.consent__actions .btn { flex: 1; justify-content: center; }
.consent .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .45); }
.consent .btn--ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.footer-bottom [data-consent-open] { color: inherit; }

/* Urdu (Farmers and Goat Entrepreneurs, ?lang=ur): the client's copy set in
   Noto Nastaliq Urdu, right to left. Nastaliq's tall ascenders and long
   descenders need far more line height than the Latin type these sizes were
   set for, so the scale is relaxed inside [lang="ur"] only. */
[lang="ur"], [lang="ur"] * { font-family: "Noto Nastaliq Urdu", "Plus Jakarta Sans", serif !important; letter-spacing: 0 !important; }
[lang="ur"] :is(h1, h2, h3) { line-height: 1.85 !important; font-weight: 700; }
[lang="ur"] :is(p, li, label, input, textarea, .btn) { line-height: 2.1 !important; }
[lang="ur"] .eyebrow { line-height: 1.9 !important; padding-block: .35em !important; }
/* Hero: sized so the Urdu banner matches the English one — the same column,
   type that reads at the English size, and Nastaliq line spacing kept as tight
   as its stacked letters allow, so the banner keeps its English height. */
.pagehero__content[lang="ur"] h1 { font-size: clamp(1.85rem, 2.75vw, 3.3rem) !important; line-height: 1.5 !important; margin-bottom: .35rem; }
.pagehero__content[lang="ur"] > p:not(.pagehero__actions) { font-size: clamp(.95rem, 1.08vw, 1.3rem) !important; line-height: 1.85 !important; font-weight: 400 !important; }
.pagehero__content[lang="ur"] .eyebrow { line-height: 1.7 !important; padding: .35em 1.24em !important; }
.pagehero__content[lang="ur"] .pagehero__actions { margin-top: 1.4rem; }
.pagehero__content[lang="ur"] .pagehero__actions .btn--lg { font-size: clamp(1rem, 1.12vw, 1.35rem) !important; line-height: 1.6 !important; padding: .45em 1.6em !important; }
[lang="ur"] h2 { font-size: clamp(1.6rem, 2.4vw, 2.6rem); }
[lang="ur"] .farm-points h3, [lang="ur"] .feature h3 { font-size: clamp(1.15rem, 1.45vw, 1.6rem); }
[lang="ur"] .farm-points p, [lang="ur"] .feature p, [lang="ur"] .inquiry__head p, [lang="ur"].closing p { font-size: clamp(1.05rem, 1.2vw, 1.3rem); }
/* Hero: Urdu sets right-aligned, so the column is narrowed to keep every line
   inside the banner's white pool, with a soft glow over the busier photos. */
.pagehero__content[lang="ur"] :is(h1, p:not(.pagehero__actions)) { text-shadow: 0 0 18px rgba(255, 255, 255, .95), 0 0 3px rgba(255, 255, 255, .9) !important; }
/* The Urdu hero mirrors the English one: heading and copy on the right, the
   EN / URDU pill on the left, and the photo and its white pool flipped to
   match, so the text keeps its light background. */
@media (min-width: 860px) {
    .pagehero__content[lang="ur"] { margin-left: auto; }
}
@media (min-width: 721px) {
    .pagehero:has(.pagehero__content[lang="ur"]) .pagehero__media::after {
        background: radial-gradient(ellipse 33% 72% at 72% 52%,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, .78) 24%,
            rgba(255, 255, 255, .5) 50%,
            rgba(255, 255, 255, .22) 76%,
            rgba(255, 255, 255, 0) 100%);
    }
}
.pagehero:has(.pagehero__content[lang="ur"]) .pagehero__media img { transform: scaleX(-1); }
.pagehero:has(.pagehero__content[lang="ur"]) .lang-toggle { right: auto; left: calc((100% - min(100% - 2.5rem, var(--container))) / 2); }
/* "What you get" ticks sit on the reading side. */
[dir="rtl"] .farm-points li { padding-left: 0; padding-right: 36px; }
[dir="rtl"] .farm-points li::before { left: auto; right: 2px; top: .85em; }
/* Phone numbers are typed left to right, but the field lines up with the others. */
[dir="rtl"] input[type="tel"] { text-align: right; }
[dir="rtl"] .btn:hover .arrow { transform: translateX(-3px); }
.lang-toggle a:not(.is-active):hover, .lang-toggle a:not(.is-active):focus-visible { color: var(--orange-card); }