/**
 * Zamseed CTA Banner Widget
 *
 * @package Zamseed
 * @since 1.0.0
 */

/* ==========================================================================
   Section
   ========================================================================== */

/*
 * The background is painted from two custom properties rather than from the
 * properties directly, so that a preset and an Elementor control can both set
 * it and the control still wins.
 *
 * Before this, changing Background Color did nothing on either Agro Dealers
 * preset, for two different reasons: the support preset declared
 * `background-color: #ffffff !important`, which outranks Elementor's generated
 * rule outright; and the primary preset painted an opaque `background-image`
 * gradient over whatever colour the control had set. Presets now supply the
 * variables — defaults, not overrides — and the controls reassign them at
 * `.elementor-element-<id> .zs-cta`, which is (0,2,0) against the presets'
 * (0,1,0). No !important, and nothing masks the colour.
 */
.zs-cta {
    position: relative;
    display: flex;
    padding: 92px 40px;
    background-color: var(--zs-cta-bg, #f1ede5);
    background-image: var(--zs-cta-bg-image, none);
    overflow: hidden;
}

.zs-cta--mode-image {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

/* Through the variables for the same reason as the presets: the `background`
   shorthand here would otherwise reset background-color and mask the control. */
.zs-cta--mode-green-gradient {
    --zs-cta-bg: #1f5a22;
    --zs-cta-bg-image: linear-gradient(135deg, #1f5a22 0%, #255f24 52%, #1a461d 100%);
}

.zs-cta--mode-green-gradient .zs-cta__eyebrow,
.zs-cta--mode-green-gradient .zs-cta__title,
.zs-cta--mode-green-gradient .zs-cta__description {
    color: #ffffff;
}

.zs-cta--mode-green-gradient .zs-cta__description {
    color: rgba(255, 255, 255, 0.86);
}

.zs-cta--mode-green-gradient .zs-cta__btn--primary {
    background-color: var(--zs-accent, #c48c33);
    color: #ffffff;
    box-shadow: none;
}

.zs-cta--mode-green-gradient .zs-cta__btn--primary:hover {
    background-color: #ad7a2c;
}

.zs-cta--mode-green-gradient .zs-cta__btn--secondary {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--zs-primary, #2d5a27);
}

.zs-cta--mode-green-gradient .zs-cta__btn--secondary:hover {
    background-color: transparent;
    color: #ffffff;
}

/* ==========================================================================
   Radial Glow
   ========================================================================== */

.zs-cta__glow {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* ==========================================================================
   Image Overlay
   ========================================================================== */

.zs-cta__overlay {
    --zs-cta-overlay-color: rgba(20, 30, 20, 0.55);
    --zs-cta-overlay-opacity: 1;
    --zs-cta-gradient-start: rgba(10, 20, 10, 0);
    --zs-cta-gradient-end: rgba(10, 20, 10, 0);
    --zs-cta-gradient-angle: 180deg;

    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(var(--zs-cta-gradient-angle), var(--zs-cta-gradient-start), var(--zs-cta-gradient-end)),
        var(--zs-cta-overlay-color);
    opacity: var(--zs-cta-overlay-opacity);
}

/* ==========================================================================
   Inner / Content
   ========================================================================== */

.zs-cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.zs-cta__content {
    display: flex;
    flex-direction: column;
    align-items: var(--zs-header-items, center);
    gap: 28px;
    max-width: 820px;
    width: 100%;
    margin-left: var(--zs-header-margin-left, auto);
    margin-right: var(--zs-header-margin-right, auto);
    text-align: var(--zs-header-text-align, center);
}

/* ==========================================================================
   Eyebrow
   ========================================================================== */

.zs-cta__eyebrow {
    display: block;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #c48c33;
}

/* ==========================================================================
   Title
   ========================================================================== */

.zs-cta__title {
    margin: 0;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 56px;
    font-weight: 700;
    line-height: 1.071;
    color: var(--zs-primary, #2d5a27);
}

/* ==========================================================================
   Description
   ========================================================================== */

.zs-cta__description {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: #555555;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.zs-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--zs-header-justify, center);
    gap: 18px;
}

.zs-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    text-decoration: none;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--zs-radius-pill, 999px);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    cursor: pointer;
}

.zs-cta__btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9em;
    line-height: 1;
}

.zs-cta__btn-icon svg { width: 1em; height: 1em; fill: currentColor; }
.zs-cta__btn-icon img { display: block; width: 1em; height: 1em; object-fit: contain; }

/* Primary */
.zs-cta__btn--primary {
    padding: 17px 30px;
    background-color: var(--zs-primary, #2d5a27);
    color: #ffffff;
    border: 2px solid transparent;
    box-shadow: 0px 12px 28px rgba(45, 90, 39, 0.18);
}

.zs-cta__btn--primary:hover {
    background-color: #245020;
    color: #ffffff;
}

/* Secondary / Outlined */
.zs-cta__btn--secondary {
    padding: 14px 24px;
    background-color: transparent;
    color: var(--zs-primary, #2d5a27);
    border: 1.6px solid var(--zs-primary, #2d5a27);
}

.zs-cta__btn--secondary:hover {
    background-color: var(--zs-primary, #2d5a27);
    color: #ffffff;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
    .zs-cta__title {
        font-size: 42px;
    }
}

/* 767, not 768: Elementor's mobile tier is <= 767px, so a 768 bound here left
   exactly one pixel where this block's 32px title applied but Elementor's
   mobile typography did not — the title measured 20px at 767, 32px at 768 and
   42px at 769. */
@media (max-width: 767px) {
    .zs-cta--mode-image {
        background-attachment: scroll !important;
    }

    .zs-cta {
        padding: 64px 24px;
    }

    .zs-cta__title {
        font-size: 32px;
    }

    .zs-cta__description {
        font-size: 16px;
    }

    .zs-cta__buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .zs-cta__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Agro Dealers presets — applied by the widget's Design Preset control.

   Everything below is scoped to a preset class, so a stored instance that is
   not on a preset renders exactly as before.

   Where a declaration collides with one of this widget's own Elementor
   controls it carries !important. Elementor compiles control selectors as
   ".elementor-{page} .elementor-element.elementor-element-{id} .zs-cta", which
   outranks any class selector we can write here, and it emits those rules for
   control *defaults* too — so without !important the panel's 92/40 padding,
   28px content gap, 18px button gap, #f1ede5 background and #2d5a27 button
   would silently win over the Figma values. Properties with no colliding
   control (typography, borders, shadows, hidden glow) stay unweighted, which
   keeps the Style panel usable for the things the preset does not own.
   ========================================================================== */

/* The glow layer is decorative background, and neither Figma frame has it. */
.zs-cta--preset-agro-dealers-primary .zs-cta__glow,
.zs-cta--preset-agro-dealers-support .zs-cta__glow {
    display: none;
}

/* --------------------------------------------------------------------------
   Primary — "Can't Find a Dealer Near You?" (Figma node 11121:38592)
   -------------------------------------------------------------------------- */

.zs-cta--preset-agro-dealers-primary {
    padding: 92px 160px !important;
    --zs-cta-bg: #244f22;
    --zs-cta-bg-image: linear-gradient(133.37deg, #244f22 0%, var(--zs-primary, #2d5a27) 100%);
}

.zs-cta--preset-agro-dealers-primary .zs-cta__content {
    gap: 40px !important;
}

.zs-cta--preset-agro-dealers-primary .zs-cta__title {
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 43.2px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff !important;
}

.zs-cta--preset-agro-dealers-primary .zs-cta__description {
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 400;
    /* 25.6px / 16px */
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85) !important;
}

.zs-cta--preset-agro-dealers-primary .zs-cta__buttons {
    flex-wrap: wrap;
    gap: 16px !important;
}

.zs-cta--preset-agro-dealers-primary .zs-cta__btn {
    gap: 8px;
    min-height: 50px;
    padding: 16px 30px !important;
    border-radius: var(--zs-radius-pill, 999px);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 700;
    /* 16px / 16px */
    line-height: 1;
}

/* Both Figma buttons lead with an 18x18 icon; the icon itself stays an
   editor choice, this only sizes and re-orders the slot when one is set. */
.zs-cta--preset-agro-dealers-primary .zs-cta__btn-icon {
    order: -1;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.zs-cta--preset-agro-dealers-primary .zs-cta__btn-icon svg,
.zs-cta--preset-agro-dealers-primary .zs-cta__btn-icon img {
    width: 18px;
    height: 18px;
}

.zs-cta--preset-agro-dealers-primary .zs-cta__btn--primary {
    background-color: var(--zs-accent, #c48c33) !important;
    color: #ffffff !important;
    border: 2px solid transparent;
    box-shadow: none;
}

.zs-cta--preset-agro-dealers-primary .zs-cta__btn--primary:hover {
    background-color: #ad7a2c !important;
    color: #ffffff !important;
}

.zs-cta--preset-agro-dealers-primary .zs-cta__btn--secondary {
    background-color: #ffffff !important;
    color: var(--zs-primary, #2d5a27) !important;
    border: 2px solid #ffffff;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
}

.zs-cta--preset-agro-dealers-primary .zs-cta__btn--secondary:hover {
    background-color: var(--zs-warm, #fdfcf9) !important;
    color: var(--zs-primary, #2d5a27) !important;
}

/* --------------------------------------------------------------------------
   Support — "Interested in Agro Dealer Support?" (Figma node 11121:38609)
   -------------------------------------------------------------------------- */

.zs-cta--preset-agro-dealers-support {
    padding: 111.12px 40px 79.99px !important;
    --zs-cta-bg: #ffffff;
    --zs-cta-bg-image: none;
}

.zs-cta--preset-agro-dealers-support .zs-cta__content {
    max-width: 1200px !important;
    gap: 15.3px !important;
}

.zs-cta--preset-agro-dealers-support .zs-cta__title {
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 38.4px;
    font-weight: 700;
    /* 42.24px / 38.4px */
    line-height: 1.1;
    color: var(--zs-primary, #2d5a27);
}

.zs-cta--preset-agro-dealers-support .zs-cta__description {
    max-width: 600px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 18px;
    font-weight: 400;
    /* 28.8px / 18px */
    line-height: 1.6;
    color: var(--zs-muted, #555555);
}

.zs-cta--preset-agro-dealers-support .zs-cta__btn {
    gap: 8px;
    min-height: 50px;
    padding: 16px 30px !important;
    border-radius: var(--zs-radius-pill, 999px);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.zs-cta--preset-agro-dealers-support .zs-cta__btn--primary {
    background-color: var(--zs-primary, #2d5a27) !important;
    color: #ffffff !important;
    border: 2px solid transparent;
    box-shadow: 0 12px 28px rgba(45, 90, 39, 0.18);
}

.zs-cta--preset-agro-dealers-support .zs-cta__btn--primary:hover {
    background-color: #245020 !important;
    color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   Preset responsive — the buttons hold a row until 560px, so the 768px
   stacking above is undone inside preset scope and reinstated lower down.
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
    .zs-cta--preset-agro-dealers-primary {
        padding: 80px 48px !important;
    }

    .zs-cta--preset-agro-dealers-primary .zs-cta__title {
        font-size: 36px;
    }

    .zs-cta--preset-agro-dealers-support .zs-cta__title {
        font-size: 34px;
    }
}

/* 767 to stay in step with the base block above and with Elementor's mobile
   tier; at 768 the preset was going mobile one pixel before everything else. */
@media (max-width: 767px) {
    .zs-cta--preset-agro-dealers-primary {
        padding: 64px 24px !important;
    }

    .zs-cta--preset-agro-dealers-support {
        padding: 72px 24px 56px !important;
    }

    .zs-cta--preset-agro-dealers-primary .zs-cta__title {
        font-size: 32px;
    }

    .zs-cta--preset-agro-dealers-support .zs-cta__title {
        font-size: 30px;
    }

    .zs-cta--preset-agro-dealers-support .zs-cta__description {
        font-size: 16px;
    }

    .zs-cta--preset-agro-dealers-primary .zs-cta__buttons,
    .zs-cta--preset-agro-dealers-support .zs-cta__buttons {
        flex-direction: row;
        align-items: center;
    }

    .zs-cta--preset-agro-dealers-primary .zs-cta__btn,
    .zs-cta--preset-agro-dealers-support .zs-cta__btn {
        width: auto;
    }
}

@media (max-width: 560px) {
    .zs-cta--preset-agro-dealers-primary .zs-cta__buttons,
    .zs-cta--preset-agro-dealers-support .zs-cta__buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .zs-cta--preset-agro-dealers-primary .zs-cta__btn,
    .zs-cta--preset-agro-dealers-support .zs-cta__btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Image column
   ==========================================================================
   The About page's "Meet the Team" section is a two-column CTA: copy on the
   left, a photograph on the right. The image is a real column with its own
   attachment, alt text, focal point and fit — not a decorative CSS background,
   which would be invisible to Elementor and to assistive technology. */

.zs-cta__inner {
    --zs-cta-media-width: 50%;
}

.zs-cta__media {
    --zs-cta-focal-x: 50%;
    --zs-cta-focal-y: 50%;
    --zs-cta-media-fit: cover;
    position: relative;
    flex: 0 0 var(--zs-cta-media-width);
    min-width: 0;
    min-height: 420px;
    overflow: hidden;
    isolation: isolate;
    border-radius: 20px;
}

/* Qualified with the media class and the element.
   `.elementor img { height: auto; max-width: 100% }` is (0,1,1); a single-class
   rule here is (0,1,0) and loses, dropping the column to the image's intrinsic
   height. Fourth widget to need this — see CSR, Statement Cards, Legacy Split
   and Impact Stats. */
.zs-cta__media img.zs-cta__image {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--zs-cta-media-fit);
    object-position: var(--zs-cta-focal-x) var(--zs-cta-focal-y);
}

.zs-cta__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-color: transparent;
}

.zs-cta__media-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    padding: 8px 18px;
    border-radius: var(--zs-radius-pill, 999px);
    background: rgba(255, 255, 255, 0.92);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--zs-primary, #2d5a27);
}

/* ==========================================================================
   Proof points
   ========================================================================== */

.zs-cta__proof-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--zs-header-justify, center);
    gap: 0;
    width: 100%;
}

.zs-cta__proof-item {
    display: inline-flex;
    position: relative;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 0 18px;
    color: var(--zs-primary, #2d5a27);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
}

.zs-cta__proof-copy {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
}

/* Line-art marks rather than an icon font: the row renders at 20px, where a
   filled glyph turns to mush and a 1.7px stroke stays legible. An item with a
   mark drops the generic dot — the disc is the mark's own container. */
.zs-cta__proof-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--zs-radius-pill, 999px);
    background: rgba(45, 90, 39, 0.06);
    color: var(--zs-primary, #2d5a27);
}

.zs-cta__proof-mark {
    display: block;
    width: 19px;
    height: 19px;
}

.zs-cta__proof-item--has-icon::before {
    display: none;
}

.zs-cta__proof-item:first-child {
    padding-left: 0;
}

.zs-cta__proof-item:not(:last-child) {
    border-right: 1px solid rgba(45, 90, 39, 0.18);
}

.zs-cta__proof-item::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: var(--zs-radius-pill, 999px);
    background: var(--zs-accent, #c48c33);
    box-shadow: 0 0 0 4px rgba(196, 140, 51, 0.14);
}

.zs-cta__proof-value {
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1;
}

.zs-cta__proof-label {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.2;
    color: rgba(45, 90, 39, 0.72);
}

/* Home — Ready to Grow preset
   --------------------------------------------------------------------------
   Proportion notes, measured off the supplied reference (2172x724, so a 3.0
   width:height band). At 1440 the old section stood 614px tall — a 2.35 band —
   because 94px of padding sat above and below a copy column that was itself
   taller (426px) than the photograph beside it (387px). The reference inverts
   that: the photograph is the tallest thing in the row and the copy sits
   inside it. Everything below narrows the gaps and lifts the picture rather
   than growing the section. */
.zs-cta--preset-ready-to-grow {
    padding: 32px 40px !important;
    --zs-cta-bg: #f6f2e8;
    /* The reference background is a flat warm cream (247,243,233) corner to
       corner. The old gradient ended on --zs-green-soft, which read as a green
       cast down the right-hand half, against the sage block. */
    --zs-cta-bg-image:
        radial-gradient(92% 130% at 8% 0%, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0) 64%);
}

.zs-cta--preset-ready-to-grow .zs-cta__glow {
    display: none;
}

/* 1312 rather than 1280 so the three proof points below the buttons each keep
   their label on one line, as they do in the reference. The copy column lands
   on 656px and the photograph on 604px — within a few pixels of the
   reference's 654/608 once its canvas is scaled to a 1440 viewport. */
.zs-cta--preset-ready-to-grow .zs-cta__inner {
    max-width: 1312px;
    margin-inline: auto;
    gap: 52px !important;
}

/* Decorative layers.
   --------------------------------------------------------------------------
   All three hang off elements outside `.zs-cta__media`, because the media box
   has to keep `overflow: hidden` and a clip path — the photograph is scaled
   up inside it to reach the reference's framing and the card silhouette is
   what crops it. The inner is `position: relative; z-index: 1`, so it opens a
   stacking context these can be ordered inside. Every one is a pseudo-element
   with `pointer-events: none`, so none reaches assistive tech or takes a
   click.

   The sage panel sits *over* the photograph, not behind it. In the reference
   the maize reads through its upper half and it turns solid as it clears the
   picture's right edge, which is what makes the right-hand side read as three
   stacked planes rather than a picture with a tab behind it. The gradient
   carries that: translucent at the top, near-opaque by the bottom. It is
   sheared to the same 3.1deg as the card so the whole right-hand lockup
   leans together. */
.zs-cta--preset-ready-to-grow .zs-cta__inner::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -32px;
    top: 15%;
    bottom: 8%;
    width: 146px;
    border-radius: 0 60px 60px 0;
    /* Two gradients, and the horizontal one is the important one. A flat fill
       gave the panel a hard left edge running down the middle of the
       photograph, which read as a green slab parked on top of the picture. In
       the reference there is no such edge — the panel simply thickens as it
       leaves the photograph. Fading the inner edge to nothing reproduces
       that; the vertical gradient then carries the reference's translucent
       top to near-solid bottom. */
    background: linear-gradient(180deg, #93a685 0%, #b0bda2 100%);
    pointer-events: none;
}

/* A thin gold arc off the lower right, drawn as the curved right border of an
   otherwise borderless box — not a border around the photograph. */
.zs-cta--preset-ready-to-grow .zs-cta__inner::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -56px;
    top: 32%;
    height: 56%;
    width: 70px;
    border: 0 solid transparent;
    border-right-width: 1.5px;
    border-right-color: rgba(196, 140, 51, 0.6);
    border-radius: 0 84px 84px 0;
    pointer-events: none;
}

/* Botanical detail. `.zs-cta__glow` is the widget's own empty decorative
   layer — already `inset: 0` and `pointer-events: none`, and unused by this
   preset — so the mark needs no new markup.

   Line art, and sitting on the cream rather than over the photograph. The
   first version was two filled beige leaves straddling the picture's edge,
   copied from the mockup: at 2172px wide that is a soft botanical wash, but
   at the size this renders it read as a smudge on the photograph. Drawn as
   strokes and moved into the gutter beside the card, the same idea reads as
   a deliberate ornament. */
.zs-cta--preset-ready-to-grow .zs-cta__glow {
    display: block;
    z-index: 2;
}

.zs-cta--preset-ready-to-grow .zs-cta__glow::after {
    content: "";
    position: absolute;
    left: 48.8%;
    bottom: 142px;
    width: 70px;
    height: 96px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 168'%3E%3Cg fill='none' stroke='%23b8bfa6' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 128C44 82 66 40 100 22c2 46-22 88-60 106z'/%3E%3Cpath d='M40 128C60 96 80 62 100 22'/%3E%3Cpath d='M62 140c14-24 36-40 56-40-10 28-32 44-56 40z'/%3E%3Cpath d='M62 140c20-14 38-28 56-40'/%3E%3Cpath d='M40 128c3 16 9 30 16 40'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 0.85;
    pointer-events: none;
}

.zs-cta--preset-ready-to-grow .zs-cta__content {
    flex: 0 1 52%;
    min-width: 0;
    max-width: none !important;
    margin-inline: 0 !important;
    align-items: flex-start !important;
    gap: 20px !important;
    text-align: left !important;
}

.zs-cta--preset-ready-to-grow .zs-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: #9c6b20;
}

.zs-cta--preset-ready-to-grow .zs-cta__eyebrow::before {
    content: "";
    display: inline-block;
    width: 38px;
    height: 2px;
    border-radius: var(--zs-radius-pill, 999px);
    background: currentColor;
}

.zs-cta--preset-ready-to-grow .zs-cta__title {
    max-width: 10.4em;
    font-size: 62px !important;
    line-height: 0.96 !important;
    /* The reference heading is a deep forest green (21,53,27), appreciably
       darker than --zs-primary (45,90,39), and the weight difference is
       visible at 62px. --zs-primary-dark is the theme's own nearest token.
       `!important` for the same reason as the button padding: Elementor
       prints the colour control's default at (0,4,0). */
    color: var(--zs-primary-dark, #1e3d1a) !important;
}

.zs-cta--preset-ready-to-grow .zs-cta__description {
    max-width: 44ch;
    font-size: 18px !important;
    line-height: 1.48 !important;
}

.zs-cta--preset-ready-to-grow .zs-cta__proof-list,
.zs-cta--preset-ready-to-grow .zs-cta__buttons {
    justify-content: flex-start;
}

/* The reference lets each proof point size to its own text — the three are
   198/215/247px wide, not equal thirds. Holding them to `flex: 1 1 0` gave
   every item the width of the narrowest, so "A Stronger Tomorrow" and
   "From field to harvest" both wrapped and the row stood 63px tall against
   the reference's 46px. The negative right margin lets the row use part of
   the 52px column gutter, which is empty space; the reference's proof row is
   likewise the widest thing in the copy column. */
.zs-cta--preset-ready-to-grow .zs-cta__proof-list {
    margin-top: 0;
    max-width: none;
    margin-right: -24px;
}

.zs-cta--preset-ready-to-grow .zs-cta__proof-item {
    flex: 0 1 auto;
    align-items: center;
    gap: 12px;
    min-height: 46px;
    padding: 0 15px;
}

.zs-cta--preset-ready-to-grow .zs-cta__proof-item:first-child {
    padding-left: 0;
}

.zs-cta--preset-ready-to-grow .zs-cta__proof-item::before {
    width: 40px;
    height: 40px;
    box-shadow: inset 0 0 0 1px rgba(196, 140, 51, 0.16);
    /* The reference discs are a shade darker than the cream they sit on
       (240,236,220 against 247,243,233); the old white-over-cream tint made
       them lighter than the background instead. */
    background:
        radial-gradient(circle at center, transparent 0 5px, rgba(45, 90, 39, 0.44) 5px 6.6px, transparent 7.4px),
        rgba(45, 90, 39, 0.05);
}

.zs-cta--preset-ready-to-grow .zs-cta__proof-icon {
    width: 42px;
    height: 42px;
    box-shadow: inset 0 0 0 1px rgba(196, 140, 51, 0.18);
    /* The reference discs are a shade darker than the cream they sit on
       (240,236,220 against 247,243,233) and read warm, not green. */
    background: rgba(174, 148, 82, 0.13);
    color: rgba(38, 76, 33, 0.94);
}

.zs-cta--preset-ready-to-grow .zs-cta__proof-mark {
    width: 25px;
    height: 25px;
    stroke-width: 1.85;
}

.zs-cta--preset-ready-to-grow .zs-cta__proof-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.zs-cta--preset-ready-to-grow .zs-cta__proof-value {
    font-size: 11.5px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.zs-cta--preset-ready-to-grow .zs-cta__proof-label {
    font-size: 11.5px;
    line-height: 1.25;
    color: rgba(28, 28, 28, 0.58);
}

/* Warm, not green — the reference rule is a sand tone (235,224,201). */
.zs-cta--preset-ready-to-grow .zs-cta__proof-item:not(:last-child) {
    border-right-color: rgba(196, 140, 51, 0.24);
}

/* The reference buttons are wider and a shade shallower than the widget's
   defaults: 237x52 and 186x53 at 1440, against 215x54 and 164x50 here.
   `!important` is unfortunately load-bearing. Elementor prints every button
   control's *default* into post CSS at
   `.elementor-19 .elementor-element.elementor-element-<id> .zs-cta__btn--primary`,
   which is (0,4,0) and outranks any preset selector this file can write — the
   same collision the section padding, heading and media radius above already
   answer this way. The printed values are the defaults, not an editor's
   choice, so nothing deliberate is being overridden. */
.zs-cta--preset-ready-to-grow .zs-cta__buttons {
    gap: 16px !important;
}

.zs-cta--preset-ready-to-grow .zs-cta__btn--primary {
    padding: 16px 40px !important;
}

.zs-cta--preset-ready-to-grow .zs-cta__btn--secondary {
    padding: 15px 34px !important;
}

.zs-cta--preset-ready-to-grow .zs-cta__btn::after {
    content: "\2192";
    font-weight: 800;
    line-height: 1;
}

.zs-cta--preset-ready-to-grow .zs-cta__btn--secondary {
    background: rgba(255, 255, 255, 0.64);
}

/* 1.42 rather than 1.52: at 1440 that turns the box from 588x387 into
   604x425, against the reference's 608x428, and makes the photograph the
   tallest element in the row instead of the shortest.

   The silhouette is a plain rounded card again. Tracing the reference's
   outline and clipping to it was accurate and looked wrong: the traced left
   edge bows out at 64% of the height and the top-left sweeps in, and at the
   size this actually renders that reads as a broken mask, not as an organic
   card — the mockup carries the irregularity at 2172px wide, where it is
   gentle. Rendered four candidates side by side at real scale and the clean
   card won on every one. 64/24 keeps an editorial asymmetry without the
   wobble. With no clip path the shadow goes back to `box-shadow`, which is
   cheaper and crisper than the `drop-shadow` filter the clip forced. */
.zs-cta--preset-ready-to-grow .zs-cta__media {
    flex: 0 0 calc(48% - 26px);
    aspect-ratio: 1.42;
    min-height: 0 !important;
    /* Restated rather than left to the base rule: the photograph is scaled
       past the box to reach the reference's framing, and the rounded card is
       what crops it. */
    overflow: hidden;
    isolation: isolate;
    border-radius: 64px 24px 64px 24px !important;
    box-shadow: 0 18px 38px rgba(37, 79, 34, 0.16);
}

/* Framing. The source photograph is a wide field shot with the farmer well
   right of centre; the reference frames her near the middle at roughly half
   again the size. `object-position: 100%` takes the cover crop off the left,
   and the scale then zooms about the right edge and the subject's eye line,
   so her head lands near the middle at the reference's scale — the headwrap
   measures 23.5% of the frame width against the reference card's 23.6%.
   Measured, not eyeballed: the red headwrap is isolated in both images and
   its bounding box compared.

   1.12 rather than the 1.2 this started at. The source is 551x329, so every
   extra tenth of zoom is enlargement the picture cannot pay for: 1.2 put the
   box at a 1.51x blow-up, 1.12 at 1.41x, and the softness is visible at the
   size this renders. It also leaves the outermost maize cob a comfortable
   12% inside the frame instead of grazing the edge. */
.zs-cta--preset-ready-to-grow .zs-cta__media img.zs-cta__image {
    object-position: 100% 50%;
    transform: scale(1.12);
    transform-origin: 100% 16%;
}

.zs-cta--preset-ready-to-grow .zs-cta__media-badge {
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(37, 79, 34, 0.16);
}

/* About — Meet the Team preset */
.zs-cta--preset-about-team {
    padding: 0;
    background: linear-gradient(122deg, #244f22 0%, var(--zs-primary, #2d5a27) 100%);
}

.zs-cta--preset-about-team .zs-cta__inner {
    display: flex;
    align-items: center;
    gap: 80px;
    min-height: 572px;
    padding: 0 120px;
}

.zs-cta--preset-about-team .zs-cta__content {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    align-items: flex-start;
}

.zs-cta--preset-about-team .zs-cta__eyebrow {
    font-size: 12px;
    letter-spacing: 2.16px;
    text-transform: uppercase;
}

.zs-cta--preset-about-team .zs-cta__title {
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 48px;
    line-height: 54px;
    color: #ffffff;
}

.zs-cta--preset-about-team .zs-cta__description {
    font-size: 17px;
    line-height: 27.5px;
    color: rgba(255, 255, 255, 0.9);
}

.zs-cta--preset-about-team .zs-cta__btn--primary {
    min-height: 50px;
    padding: 14px 30px;
    border-radius: var(--zs-radius-pill, 999px);
    background: #ffffff;
    color: var(--zs-primary, #2d5a27);
}

/* Ready to Grow — narrow two-column band (1280-1391)
   --------------------------------------------------------------------------
   Above 1391 the inner is capped at 1312 and the copy column settles at
   656px, which is the width the one-line proof row is sized for. Below that
   the inner fills the padding box and the column shrinks with the viewport,
   so the row is retuned rather than left to break into a 2 + 1 stack. The
   decorative offsets come in as well: with the inner no longer capped, the
   section's own 40px gutter is all the room they have, and the gold arc was
   otherwise clipped away entirely at 1280. */
@media (min-width: 1280px) and (max-width: 1391px) {
    .zs-cta--preset-ready-to-grow .zs-cta__inner::before {
        right: -20px;
    }

    .zs-cta--preset-ready-to-grow .zs-cta__inner::after {
        right: -28px;
    }

    .zs-cta--preset-ready-to-grow .zs-cta__proof-item {
        gap: 10px;
        padding: 0 8px;
    }

    .zs-cta--preset-ready-to-grow .zs-cta__proof-item::before {
        width: 36px;
        height: 36px;
    }

    .zs-cta--preset-ready-to-grow .zs-cta__proof-value,
    .zs-cta--preset-ready-to-grow .zs-cta__proof-label {
        font-size: 11px;
    }
}

/* Ready to Grow — stack point
   --------------------------------------------------------------------------
   The preset stacks a breakpoint earlier than the rest of the widget. At 1024
   the two-column split leaves a 465px copy column beside a 427px picture: the
   heading falls to three lines and the proof row cannot hold its three items
   on one line at any type size still worth reading. Stacking from 1279 down
   gives the copy its full width back — two heading lines and a single proof
   row — and the photograph a full-width box. The about-team preset and the
   widget's generic media floor keep their own 1023 break below. */
@media (max-width: 1279px) {
    .zs-cta--preset-ready-to-grow .zs-cta__title {
        font-size: 46px !important;
    }

    .zs-cta--preset-ready-to-grow .zs-cta__inner {
        flex-direction: column;
        align-items: stretch;
    }

    /* Stacked, the photograph runs the full width, so a panel offset to its
       right would leave the section, the gold arc would hang off the copy and
       the leaves would land in the gap between the two blocks. All three are
       desktop-only composition. */
    .zs-cta--preset-ready-to-grow .zs-cta__inner::before,
    .zs-cta--preset-ready-to-grow .zs-cta__inner::after,
    .zs-cta--preset-ready-to-grow .zs-cta__glow::after {
        display: none;
    }

    /* Stacked, the copy and the picture share one measure. Left unbounded the
       photograph took the whole viewport: at 1279 a full-width box on the
       desktop's 1.42 ratio came out 1199x844, a 2.2x enlargement of a 551x329
       source and a 1351px-tall section. 860 holds it to a band the copy can
       sit above without the section turning into a page of its own. */
    .zs-cta--preset-ready-to-grow .zs-cta__inner {
        max-width: 860px;
    }

    /* 1.7 is within a whisker of the source's own 1.675, so `cover` has
       almost nothing to crop and the enlargement stays as low as a full-width
       box allows. The desktop crop is a two-column composition — at this size
       the photograph reads better whole, so the zoom comes off entirely. */
    .zs-cta--preset-ready-to-grow .zs-cta__media {
        aspect-ratio: 1.7;
        border-radius: 40px !important;
    }

    .zs-cta--preset-ready-to-grow .zs-cta__media img.zs-cta__image {
        object-position: 58% 50%;
        transform: none;
    }

    /* The row is no longer three equal columns, so let it wrap rather than
       press three natural-width items into a narrower copy column. */
    .zs-cta--preset-ready-to-grow .zs-cta__proof-list {
        margin-right: 0;
        gap: 4px 0;
    }

    .zs-cta--preset-ready-to-grow .zs-cta__content,
    .zs-cta--preset-ready-to-grow .zs-cta__media {
        align-self: stretch;
        width: 100%;
    }

    .zs-cta--preset-ready-to-grow .zs-cta__media {
        flex: 0 0 auto;
    }
}

@media (max-width: 1023px) {
    .zs-cta--preset-about-team .zs-cta__inner {
        gap: 40px;
        min-height: 0;
        padding: 64px 40px;
    }

    .zs-cta--preset-about-team .zs-cta__title {
        font-size: 36px;
        line-height: 42px;
    }

    .zs-cta__media {
        min-height: 340px;
    }
}

@media (max-width: 767px) {
    .zs-cta--preset-ready-to-grow {
        padding: 48px 24px !important;
    }

    .zs-cta--preset-ready-to-grow .zs-cta__inner {
        gap: 30px;
    }

    .zs-cta--preset-ready-to-grow .zs-cta__title {
        font-size: 34px !important;
    }

    .zs-cta--preset-ready-to-grow .zs-cta__description {
        font-size: 17px !important;
    }

    .zs-cta--preset-ready-to-grow .zs-cta__proof-list {
        flex-direction: column;
        gap: 10px;
        margin-right: 0;
    }

    .zs-cta--preset-ready-to-grow .zs-cta__proof-item {
        justify-content: flex-start;
        padding: 0;
        border-right: 0;
    }

    .zs-cta--preset-ready-to-grow .zs-cta__media {
        aspect-ratio: 1.33;
        border-radius: 28px !important;
    }

    /* Copy first, image second. No fixed section height — the content decides. */
    .zs-cta--preset-about-team .zs-cta__inner,
    .zs-cta__inner:has(.zs-cta__media) {
        flex-direction: column;
        align-items: stretch;
        gap: 28px;
        padding: 40px 20px;
    }

    .zs-cta__media {
        flex: 1 1 auto;
        min-height: 320px;
    }

    .zs-cta--preset-about-team .zs-cta__title {
        font-size: 30px;
        line-height: 36px;
    }

    .zs-cta--preset-about-team .zs-cta__btn--primary {
        width: 100%;
        justify-content: center;
    }
}

/* ==========================================================================
   Keyboard focus
   --------------------------------------------------------------------------
   The CTA buttons had no focus styling, so they fell back to the UA ring —
   present, but a 1px hairline against a busy photograph. This is the same
   ring the 404, blog-grid and breadcrumb widgets already use, so keyboard
   focus reads identically across the theme. `:focus-visible` keeps it off
   pointer clicks.
   ========================================================================== */

.zs-cta__btn:focus-visible {
    outline: 2px solid var(--zs-primary, #2d5a27);
    outline-offset: 3px;
}

/* On the green-gradient preset the primary ring needs to be light to be seen
   at all against the dark ground. */
.zs-cta--mode-green-gradient .zs-cta__btn:focus-visible,
.zs-cta--preset-about-team .zs-cta__btn:focus-visible {
    outline-color: #ffffff;
}

/* ==========================================================================
   Stacked columns must not collapse
   --------------------------------------------------------------------------
   Wherever a CTA with an image column stacks, the vertical-align control's
   `align-items: center` works against it. Elementor emits that control from
   its own default at (0,4,0) whether or not an editor ever set it, so it
   outranks the `align-items: stretch` the stacking rules ask for. In a column
   flex it centres items on the cross axis, and `.zs-cta__media` is an empty
   div, so its shrink-to-fit width resolves to zero and the photograph
   disappears.

   Deliberately not scoped away from the presets. The About "Meet the Team"
   CTA has been rendering a 0px-wide image on mobile since it gained its image
   column; `align-self` sits on the item, so it wins whatever the container
   was told.
   ========================================================================== */

@media (max-width: 767px) {
    .zs-cta__inner:has(.zs-cta__media) > .zs-cta__content,
    .zs-cta__inner:has(.zs-cta__media) > .zs-cta__media {
        align-self: stretch;
    }
}

/* ==========================================================================
   Editorial split — copy left, photograph right
   --------------------------------------------------------------------------
   The widget already shipped an image column, but only the *stacked* state
   was ever styled: on desktop `.zs-cta__content` kept `max-width: 820px`,
   `margin-inline: auto` and centred text, so switching the image on produced
   a centred block sitting next to a picture rather than a two-column layout.

   Everything below is gated on `:has(.zs-cta__media)`, so the centred
   text-only CTA used elsewhere on the site is untouched. Column widths still
   come from the `--zs-cta-media-width` control; this only makes the copy
   column yield the remainder instead of holding a fixed 820px.
   ========================================================================== */

.zs-cta:not([class*="zs-cta--preset-"]) .zs-cta__inner:has(.zs-cta__media) {
    gap: clamp(32px, 4vw, 64px);
}

/* The copy takes whatever the image column leaves. `flex: 1 1 0` with
   `min-width: 0` lets long words wrap instead of forcing the row wider. */
.zs-cta:not([class*="zs-cta--preset-"]) .zs-cta__inner:has(.zs-cta__media) .zs-cta__content {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    margin-inline: 0;
}

/* Buttons follow the copy. `.zs-cta__actions` centres via
   `--zs-header-justify`, which the alignment controls do not set — they write
   `align-items` and `text-align` on the content block only. */
.zs-cta:not([class*="zs-cta--preset-"]) .zs-cta__inner:has(.zs-cta__media) .zs-cta__actions {
    --zs-header-justify: flex-start;
}

/* Hold the supporting paragraph to a comfortable measure — roughly 55
   characters a line at the 18px body size. Note `ch` is the width of "0",
   which in Inter is 0.63em, appreciably wider than its average lowercase
   glyph; 44ch measures out at about 500px, not the ~44 characters the unit
   name suggests. The heading is left free to run wider so it still reads as
   the editorial anchor. */
.zs-cta:not([class*="zs-cta--preset-"]) .zs-cta__inner:has(.zs-cta__media) .zs-cta__description {
    max-width: 44ch;
}

/* A soft block set behind and below the photograph, in the theme's existing
   pale green. Purely decorative, so it is hidden from assistive tech by being
   a pseudo-element, and it never intercepts a click. */
.zs-cta:not([class*="zs-cta--preset-"]) .zs-cta__inner:has(.zs-cta__media) .zs-cta__media::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -18px;
    bottom: -18px;
    width: 62%;
    height: 62%;
    border-radius: inherit;
    background-color: var(--zs-green-soft, #eef4df);
    pointer-events: none;
}

/* The block sits outside the image, so the media box must not clip it. The
   image itself is still clipped — it carries its own radius and overflow.

   The box is sized by ratio rather than by a pixel height. A fixed height
   cannot track a fluid column: at 1440 the column happened to land on 4:3,
   but by 1280 the same height read 1.17 and at 1024 it was 1.03, cropping a
   fifth of the width off a landscape photograph. `aspect-ratio` holds 4:3 at
   every width, which is the source photograph's own ratio, so `cover` has
   nothing to crop. `min-height: 0` clears the widget's 420px floor, which
   would otherwise win over the ratio on narrow columns. */
.zs-cta:not([class*="zs-cta--preset-"]) .zs-cta__inner:has(.zs-cta__media) .zs-cta__media {
    overflow: visible;
    isolation: auto;
    aspect-ratio: 4 / 3;
    min-height: 0;
}

.zs-cta:not([class*="zs-cta--preset-"]) .zs-cta__inner:has(.zs-cta__media) .zs-cta__media img.zs-cta__image,
.zs-cta:not([class*="zs-cta--preset-"]) .zs-cta__inner:has(.zs-cta__media) .zs-cta__media::after {
    border-radius: inherit;
}

/* Stack from tablet down. Two columns technically fit at 768, but a 46/54
   split there leaves both the copy and the photograph near 316px — the
   cramped result the layout is meant to avoid — so the break happens at
   1024 rather than at the widget's own 767 mobile breakpoint.
   The DOM is copy-then-image, so the stacked order needs no reordering.

   `align-self` is doing real work here, not belt-and-braces. The vertical
   alignment control writes `align-items: center` on `.zs-cta__inner` at
   (0,4,0), which outranks any `align-items: stretch` this file can set. In
   column direction that centres the items on the cross axis, and since
   `.zs-cta__media` is an empty div its shrink-to-fit width is zero — the
   photograph disappears entirely. `align-self` is set on the item, so it
   wins regardless of what the container was told. */
@media (max-width: 1023px) {
    /* The widget's own 767px rule puts `padding: 40px 20px` on the inner.
       That exists for the about-team preset, which zeroes its section
       padding; here it lands on top of the section's `92px 40px` and insets
       the column by 60px a side, so the photograph never reaches the full
       width the stacked layout is supposed to give it. The section already
       supplies the gutter, as it does on desktop. */
    .zs-cta:not([class*="zs-cta--preset-"]) .zs-cta__inner:has(.zs-cta__media) {
        padding: 0;
    }

    .zs-cta:not([class*="zs-cta--preset-"]) .zs-cta__inner:has(.zs-cta__media) {
        flex-direction: column;
        gap: 32px;
    }

    .zs-cta:not([class*="zs-cta--preset-"]) .zs-cta__inner:has(.zs-cta__media) .zs-cta__content,
    .zs-cta:not([class*="zs-cta--preset-"]) .zs-cta__inner:has(.zs-cta__media) .zs-cta__media {
        align-self: stretch;
        width: 100%;
    }

    /* Basis would otherwise resolve against the column axis, i.e. height. */
    .zs-cta:not([class*="zs-cta--preset-"]) .zs-cta__inner:has(.zs-cta__media) .zs-cta__content {
        flex: 0 1 auto;
    }

    .zs-cta:not([class*="zs-cta--preset-"]) .zs-cta__inner:has(.zs-cta__media) .zs-cta__media {
        flex: 0 0 auto;
    }

    /* The cap stays on when stacked: at 768 the copy would otherwise run the
       full 688px, which is a 75-character line. Below ~480 the column is
       already narrower than the cap, so it stops mattering on its own. */

    /* At full width the offset block reads as a stray edge rather than a
       considered detail. */
    .zs-cta:not([class*="zs-cta--preset-"]) .zs-cta__inner:has(.zs-cta__media) .zs-cta__media::before {
        display: none;
    }
}