/**
 * Zamseed Page Hero Widget Styles
 *
 * Inner page hero section based on the Next.js PageHero component.
 * Uses theme CSS variables from style.css.
 *
 * @package Zamseed
 * @since 1.0.0
 */

/* Widget Root */
.zs-page-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 560px;
    padding: 132px 0 76px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Overlay - Gradient (Default) */
.zs-page-hero__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.zs-page-hero__overlay--gradient {
    background:
        linear-gradient(90deg,
            rgba(250, 249, 246, 1) 0%,
            rgba(250, 249, 246, 0.92) 38%,
            rgba(250, 249, 246, 0.45) 66%,
            rgba(250, 249, 246, 0.08) 100%
        ),
        linear-gradient(0deg,
            rgba(250, 249, 246, 0.34),
            rgba(250, 249, 246, 0)
        );
}

/* Overlay - Solid */
.zs-page-hero__overlay--solid {
    background-color: rgba(250, 249, 246, 0.95);
}

.zs-page-hero__overlay--dark-gradient {
    background:
        linear-gradient(90deg,
            rgba(15, 36, 24, 0.82) 0%,
            rgba(15, 36, 24, 0.68) 46%,
            rgba(15, 36, 24, 0.48) 100%
        ),
        linear-gradient(0deg,
            rgba(15, 36, 24, 0.58) 0%,
            rgba(15, 36, 24, 0) 60%
        );
}

/* Content Container */
.zs-page-hero .container {
    position: relative;
    z-index: 1;
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

.zs-page-hero__content {
    max-width: 100%;
}

.zs-page-hero--content-center .zs-page-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 820px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.zs-page-hero--content-center .zs-page-hero__title,
.zs-page-hero--content-center .zs-page-hero__subtitle {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

/* Eyebrow */
.zs-page-hero__eyebrow {
    display: block;
    margin-bottom: 14px;
    color: var(--zs-secondary, #d35400);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* Title */
.zs-page-hero__title {
    margin: 0 0 18px;
    max-width: 720px;
    color: var(--zs-primary, #2d5a27);
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(2.6rem, 5vw, 4.1rem);
    font-weight: 700;
    line-height: 1.06;
}

/* Subtitle */
.zs-page-hero__subtitle {
    margin: 0;
    max-width: 560px;
    color: var(--zs-muted, #555555);
    font-size: 20px;
    line-height: 1.5;
}

/* Breadcrumbs */
.zs-page-hero__breadcrumbs {
    margin-bottom: 20px;
}

.zs-page-hero__breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.8125rem;
}

.zs-page-hero__breadcrumb-item a {
    color: inherit;
    text-decoration: none;
}

.zs-page-hero__breadcrumb-item a:hover {
    text-decoration: underline;
}

.zs-page-hero__breadcrumb-current {
    font-weight: 600;
}

.zs-page-hero__breadcrumb-sep {
    opacity: 0.5;
}

/* Button */
.zs-page-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
    padding: 16px 32px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 999px;
    border: 1.5px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.zs-page-hero__button.btn--primary {
    background-color: var(--zs-primary, #2d5a27);
    border-color: var(--zs-primary, #2d5a27);
    color: #ffffff;
}

.zs-page-hero__button.btn--primary:hover {
    background-color: #245020;
}

.zs-page-hero__button.btn--secondary {
    background-color: transparent;
    border-color: var(--zs-primary, #2d5a27);
    color: var(--zs-primary, #2d5a27);
}

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

.zs-page-hero__button.btn--light {
    background-color: #ffffff;
    border-color: #ffffff;
    color: var(--zs-primary, #2d5a27);
}

.zs-page-hero__button.btn--light:hover {
    background-color: transparent;
    color: #ffffff;
}

/* Image Banner layout mode: image only, no overlay/text — breadcrumb
   trail renders in its own bar below rather than overlaid on the image. */
.zs-page-hero--image-banner {
    min-height: 468px;
    padding: 0;
}

.zs-page-hero__breadcrumbs-bar {
    background-color: var(--zs-warm, #fdfcf9);
    border-bottom: 1px solid var(--zs-border, rgba(0, 0, 0, 0.06));
}

.zs-page-hero__breadcrumbs-bar .zs-page-hero__breadcrumbs {
    margin-bottom: 0;
    padding: 21px 0;
}

/* ==========================================================================
   Blog Post Header mode: back link, centred title, optional category/
   reading-time meta, optional explicit CTA, large featured image below.
   ========================================================================== */

.zs-page-hero--blog-post {
    display: block;
    min-height: 0;
    padding: 48px 0;
    background-image: none;
    background-color: rgba(241, 237, 229, 0.5);
}

.zs-page-hero--blog-post .container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.zs-page-hero__blog-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 48px;
}

.zs-page-hero__back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--zs-text, #1c1c1c);
    text-decoration: none;
}

.zs-page-hero__back-link:hover {
    color: var(--zs-primary, #2d5a27);
}

.zs-page-hero__title--centered {
    width: 100%;
    max-width: 100%;
    text-align: center;
}

.zs-page-hero__blog-meta {
    align-self: center;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.9375rem;
    color: var(--zs-muted, #555555);
}

.zs-page-hero__blog-category {
    font-weight: 700;
    color: var(--zs-primary, #2d5a27);
}

.zs-page-hero--blog-post .zs-page-hero__button {
    align-self: center;
}

.zs-page-hero__blog-image {
    width: 100%;
    height: 582px;
    border-radius: 16px;
    overflow: hidden;
    background-color: var(--zs-border, rgba(0, 0, 0, 0.06));
}

.zs-page-hero__blog-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==========================================================================
   Agronomy Article Header mode: back link, centred title, optional
   category/description/supporting image — no forced full-width banner.
   ========================================================================== */

.zs-page-hero--agronomy-article {
    display: block;
    min-height: 0;
    padding: 64px 0;
    background-image: none;
    background-color: rgba(241, 237, 229, 0.5);
}

.zs-page-hero__agronomy-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.zs-page-hero__agronomy-category {
    align-self: center;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--zs-accent-text, #9a6c1f);
}

.zs-page-hero__agronomy-description {
    align-self: center;
    max-width: 700px;
    margin: 0;
    text-align: center;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--zs-muted, #555555);
}

.zs-page-hero__agronomy-image {
    align-self: center;
    width: 100%;
    max-width: 631px;
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--zs-border, rgba(0, 0, 0, 0.06));
}

.zs-page-hero__agronomy-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ==========================================================================
   Legal Page Header mode: title + organisation subtitle on the same dark
   gradient treatment as Standard, with no eyebrow/breadcrumb/button.
   ========================================================================== */

.zs-page-hero__legal-content {
    max-width: 720px;
}

/* !important for the same reason the Agro Dealers preset below needs it: this
   mode puts the copy on a dark scrim, but title_color (#2d5a27),
   subtitle_color (#555555), content_max_width (720px) and subtitle_max_width
   (560px) all ship non-empty defaults, so Elementor emits per-element CSS for
   them on every legal hero — at a specificity no class selector here can
   reach. Unweighted, the title renders dark green on the scrim. */
.zs-page-hero__title--legal {
    max-width: 100% !important;
    color: #ffffff !important;
}

.zs-page-hero__subtitle--legal {
    max-width: 100% !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Responsive: Tablet */
@media (max-width: 1080px) {
    .zs-page-hero {
        min-height: 480px;
        padding: 112px 0 60px;
    }

    .zs-page-hero--image-banner {
        min-height: 360px;
        padding: 0;
    }

    .zs-page-hero__title {
        font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    }

    .zs-page-hero__subtitle {
        font-size: 18px;
    }

    .zs-page-hero__blog-image {
        height: 420px;
    }

    .zs-page-hero--agronomy-article {
        padding: 48px 0;
    }
}

/* Responsive: Mobile */
@media (max-width: 760px) {
    .zs-page-hero {
        min-height: 400px;
        padding: 100px 0 50px;
    }

    .zs-page-hero--image-banner {
        min-height: 240px;
        padding: 0;
    }

    .zs-page-hero__overlay--gradient {
        background:
            linear-gradient(180deg,
                rgba(250, 249, 246, 0.95) 0%,
                rgba(250, 249, 246, 0.85) 60%,
                rgba(250, 249, 246, 0.7) 100%
            );
    }

    .zs-page-hero__overlay--dark-gradient {
        background:
            linear-gradient(180deg,
                rgba(15, 36, 24, 0.84) 0%,
                rgba(15, 36, 24, 0.72) 62%,
                rgba(15, 36, 24, 0.58) 100%
            );
    }

    .zs-page-hero__eyebrow {
        font-size: 11px;
        margin-bottom: 12px;
    }

    .zs-page-hero__title {
        font-size: clamp(1.8rem, 6vw, 2.6rem);
        margin-bottom: 14px;
        max-width: 100%;
    }

    .zs-page-hero__subtitle {
        font-size: 16px;
        max-width: 100%;
    }

    .zs-page-hero__blog-image {
        height: 260px;
        border-radius: 12px;
    }

    .zs-page-hero--blog-post,
    .zs-page-hero--agronomy-article {
        padding: 32px 0;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .zs-page-hero,
    .zs-page-hero__overlay {
        transition: none;
    }
}

/* Editor Preview Styles */
.elementor-editor-active .zs-page-hero {
    min-height: 400px;
}

/* Empty State Placeholder in Editor */
.zs-page-hero__placeholder {
    padding: 40px;
    text-align: center;
    color: var(--zs-muted, #555555);
    font-style: italic;
    border: 2px dashed var(--zs-border, rgba(45, 90, 39, 0.12));
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Agro Dealers preset — applied by the widget's Design Preset control on
   Standard heroes only (Figma node 11121:38418). Full-bleed band with a dark
   green scrim, an 820px content column, and a 64px serif title.

   Scoped entirely to .zs-page-hero--preset-agro-dealers: a hero that has not
   opted in renders exactly as it did before this block existed.

   Several declarations below carry !important, which the rest of this file
   does not need. The widget's own colour and size controls (title_color,
   subtitle_color, eyebrow_color, min_height, content_max_width,
   subtitle_max_width) ship with NON-EMPTY defaults and `selectors`, so
   Elementor generates per-element CSS for them — at a specificity no
   stylesheet class can reach — even on heroes where nobody ever touched
   those controls. Without !important the preset's white title would lose to
   the generated #2d5a27 and render dark green on a dark photograph. Editors
   who want these driven from the panel should switch the preset to Custom.
   ========================================================================== */

.zs-page-hero--preset-agro-dealers {
    /* A minimum, never a fixed height, so a long title extends the band
       instead of clipping. */
    min-height: 512.8px !important;
    padding: 160px 0;
}

/* Full-bleed section, 160px desktop inset; the 820px column below governs
   the measure. Capped at 1440px so the copy cannot drift away from the
   photograph's subject on ultra-wide displays. */
.zs-page-hero--preset-agro-dealers .container {
    width: min(1440px, 100%);
    padding-right: clamp(20px, 11.11vw, 160px);
    padding-left: clamp(20px, 11.11vw, 160px);
}

.zs-page-hero--preset-agro-dealers .zs-page-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 17.4px;
    max-width: 820px;
}

/* The stacked margins below are what separates these elements outside the
   preset; zeroing them lets the 17.4px flex gap be the only spacing. */
.zs-page-hero--preset-agro-dealers .zs-page-hero__eyebrow,
.zs-page-hero--preset-agro-dealers .zs-page-hero__title,
.zs-page-hero--preset-agro-dealers .zs-page-hero__subtitle {
    margin: 0;
}

/* Two stacked scrims: a left-to-right wash for the copy, then a bottom-up
   fade that seats the band on whatever follows it. Keyed on the gradient
   modifiers only — an editor who deliberately picks the Solid overlay keeps
   their solid colour. */
.zs-page-hero--preset-agro-dealers .zs-page-hero__overlay--gradient,
.zs-page-hero--preset-agro-dealers .zs-page-hero__overlay--dark-gradient {
    background:
        linear-gradient(90deg,
            rgba(15, 36, 24, 0.774) 0%,
            rgba(15, 36, 24, 0.594) 46%,
            rgba(15, 36, 24, 0.378) 100%
        ),
        linear-gradient(0deg,
            rgba(15, 36, 24, 0.55) 0%,
            rgba(15, 36, 24, 0) 60%
        );
}

/* #f3c98a is the Figma tint of --zs-accent, lightened to stay legible on the
   dark scrim; the token itself is too dark against it to pass at 13px. */
.zs-page-hero--preset-agro-dealers .zs-page-hero__eyebrow {
    color: #f3c98a !important;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 2.6px;
    text-transform: uppercase;
}

.zs-page-hero--preset-agro-dealers .zs-page-hero__title {
    max-width: 100% !important;
    color: #ffffff !important;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    /* 64px at the 1440 frame, easing down to 40px on small screens. */
    font-size: clamp(2.5rem, 4.44vw, 4rem);
    font-weight: 700;
    line-height: 1.194;
}

.zs-page-hero--preset-agro-dealers .zs-page-hero__subtitle {
    max-width: 100% !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5;
}

/* Not in the Figma frame, but the preset guarantees a dark scrim and the
   breadcrumb controls default to near-black — leaving them would make the
   trail unreadable the moment an editor turns it on. */
.zs-page-hero--preset-agro-dealers .zs-page-hero__breadcrumbs,
.zs-page-hero--preset-agro-dealers .zs-page-hero__breadcrumbs a {
    color: rgba(255, 255, 255, 0.78) !important;
}

.zs-page-hero--preset-agro-dealers .zs-page-hero__breadcrumbs .zs-page-hero__breadcrumb-current {
    color: #ffffff !important;
}

/* ==========================================================================
   Our Team preset — same standard hero architecture as Agro Dealers, tuned to
   Figma node 11133:10712: 600px dark photo band, 820px left content measure,
   Cormorant 64px title and Inter 20px supporting copy.
   ========================================================================== */

.zs-page-hero--preset-our-team {
    min-height: 600px !important;
    padding: 190.55px 0 130.55px;
}

.zs-page-hero--preset-our-team .container,
.zs-page-hero--preset-about-us .container,
.zs-page-hero--preset-agronomy-hub .container {
    width: min(1440px, 100%);
    padding-right: clamp(20px, 20.83vw, 300px);
    padding-left: clamp(20px, 20.83vw, 300px);
}

.zs-page-hero--preset-our-team .zs-page-hero__content,
.zs-page-hero--preset-about-us .zs-page-hero__content,
.zs-page-hero--preset-agronomy-hub .zs-page-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    max-width: 820px;
}

.zs-page-hero--preset-our-team .zs-page-hero__eyebrow,
.zs-page-hero--preset-our-team .zs-page-hero__title,
.zs-page-hero--preset-our-team .zs-page-hero__subtitle,
.zs-page-hero--preset-about-us .zs-page-hero__eyebrow,
.zs-page-hero--preset-about-us .zs-page-hero__title,
.zs-page-hero--preset-about-us .zs-page-hero__subtitle,
.zs-page-hero--preset-agronomy-hub .zs-page-hero__eyebrow,
.zs-page-hero--preset-agronomy-hub .zs-page-hero__title,
.zs-page-hero--preset-agronomy-hub .zs-page-hero__subtitle {
    margin: 0;
}

/* About reuses the Our Team scrim verbatim: its stops are already the approved
   About values (0.86 / 0.66 @46% / 0.42, over 0.55 -> 0 @60%). Restating them
   under a second class would create two copies to keep in step. */
.zs-page-hero--preset-our-team .zs-page-hero__overlay--gradient,
.zs-page-hero--preset-our-team .zs-page-hero__overlay--dark-gradient,
.zs-page-hero--preset-about-us .zs-page-hero__overlay--gradient,
.zs-page-hero--preset-about-us .zs-page-hero__overlay--dark-gradient,
.zs-page-hero--preset-agronomy-hub .zs-page-hero__overlay--gradient,
.zs-page-hero--preset-agronomy-hub .zs-page-hero__overlay--dark-gradient {
    background:
        linear-gradient(90deg,
            rgba(15, 36, 24, 0.86) 0%,
            rgba(15, 36, 24, 0.66) 46%,
            rgba(15, 36, 24, 0.42) 100%
        ),
        linear-gradient(0deg,
            rgba(15, 36, 24, 0.55) 0%,
            rgba(15, 36, 24, 0) 60%
        );
}

.zs-page-hero--preset-our-team .zs-page-hero__eyebrow,
.zs-page-hero--preset-about-us .zs-page-hero__eyebrow {
    color: #f3c98a !important;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 2.6px;
    text-transform: uppercase;
}

.zs-page-hero--preset-our-team .zs-page-hero__title {
    max-width: 100% !important;
    color: #ffffff !important;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: clamp(2.5rem, 4.44vw, 4rem);
    font-weight: 700;
    line-height: 1.08;
}

.zs-page-hero--preset-our-team .zs-page-hero__subtitle,
.zs-page-hero--preset-about-us .zs-page-hero__subtitle,
.zs-page-hero--preset-agronomy-hub .zs-page-hero__subtitle {
    max-width: 100% !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
}

.zs-page-hero--preset-our-team .zs-page-hero__breadcrumbs,
.zs-page-hero--preset-our-team .zs-page-hero__breadcrumbs a,
.zs-page-hero--preset-about-us .zs-page-hero__breadcrumbs,
.zs-page-hero--preset-about-us .zs-page-hero__breadcrumbs a {
    color: rgba(255, 255, 255, 0.78) !important;
}

.zs-page-hero--preset-our-team .zs-page-hero__breadcrumbs .zs-page-hero__breadcrumb-current,
.zs-page-hero--preset-about-us .zs-page-hero__breadcrumbs .zs-page-hero__breadcrumb-current {
    color: #ffffff !important;
}

/* ==========================================================================
   About Us preset — Figma node 11096:34407. Same architecture as Our Team;
   only the frame geometry and the title scale differ, so everything identical
   is shared with the rules above rather than restated.

   669px band = 200px padding + 269px content (20.8 eyebrow + 24 + 140 title +
   24 + 60 description) + 200px padding.
   ========================================================================== */

.zs-page-hero--preset-about-us {
    min-height: 669px !important;
    padding: 200px 0;
    /* The photograph is exported at 1440x977 and is cropped from the top in the
       approved frame, so it anchors top-left rather than centre. Both are
       !important because Elementor prints background-position from the
       background_position control at .elementor-element-<id> specificity. */
    background-color: #0f2418;
    background-position: top left !important;
}

.zs-page-hero--preset-about-us .zs-page-hero__content {
    gap: 24px;
}

.zs-page-hero--preset-about-us .zs-page-hero__title {
    max-width: 100% !important;
    color: #ffffff !important;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    /* 4.5rem = 72px at the approved 1440px width. The shared base rule caps at
       4.1rem, which is what rendered the title at 65.6px; this raises the
       ceiling for the About preset only and leaves the global one alone. */
    font-size: clamp(2.6rem, 5vw, 4.5rem);
    font-weight: 700;
    /* 70px over 72px. */
    line-height: 0.9722;
}

/* ==========================================================================
   Agronomy Hub preset — Figma node 11147:11942, inside frame 11147:11840
   ("new agronomy. hub"). Same architecture as Our Team and About Us, so the
   container inset, content flex, margin reset, scrim and subtitle rules are
   shared with those selectors above rather than restated here. Only what the
   Agronomy frame states differently lives below.

   600px band = 150px padding + 300px content box + 150px padding, with the
   copy centred in the content box exactly as the frame's items-center does.
   ========================================================================== */

.zs-page-hero--preset-agronomy-hub {
    min-height: 600px !important;
    padding: 150px 0;
    /* The frame draws the photograph at 1440x977 anchored top-left over a flat
       #0f2418 — it is taller than the 600px band and is cropped from the top,
       not centred. `cover` resolves to those exact numbers here because the
       band is the wider ratio, and it keeps the crop sane once the viewport
       narrows. Both are !important because Elementor prints background-size
       and background-position from its own controls at
       .elementor-element-<id> specificity, which no stylesheet class reaches. */
    background-color: #0f2418;
    background-size: cover !important;
    background-position: top left !important;
}

/* The frame's item spacing is 17.4px, not the 20px Our Team and About Us use. */
.zs-page-hero--preset-agronomy-hub .zs-page-hero__content {
    gap: 17.4px;
    /* The frame's content container carries this above the eyebrow. Without it
       the stack centres 3.5px high against the frame, since the padding is
       inside the box being centred. */
    padding-top: 7.1px;
    /* 1440 - 300 - 300. The shared rule caps at 820px, which would reflow the
       title a word early against the frame. */
    max-width: 840px;
}

/* #fdefd8 is this frame's own eyebrow tint (color/casablanca-lighter) — paler
   than the #f3c98a the other two presets carry, so it is stated rather than
   shared. */
.zs-page-hero--preset-agronomy-hub .zs-page-hero__eyebrow {
    color: #fdefd8 !important;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 2.6px;
    text-transform: uppercase;
}

.zs-page-hero--preset-agronomy-hub .zs-page-hero__title {
    max-width: 100% !important;
    color: #ffffff !important;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    /* 64px at the 1440 frame. */
    font-size: clamp(2.5rem, 4.44vw, 4rem);
    font-weight: 700;
    /* 76.38px over 64px. */
    line-height: 1.1934;
    /* -1.28px over 64px, stated as em so it tracks the clamp. */
    letter-spacing: -0.02em;
}

.zs-page-hero--preset-agronomy-hub .zs-page-hero__breadcrumbs,
.zs-page-hero--preset-agronomy-hub .zs-page-hero__breadcrumbs a {
    color: rgba(255, 255, 255, 0.78) !important;
}

.zs-page-hero--preset-agronomy-hub .zs-page-hero__breadcrumbs .zs-page-hero__breadcrumb-current {
    color: #ffffff !important;
}

/* Responsive: Tablet */
@media (max-width: 1080px) {
    .zs-page-hero--preset-agro-dealers {
        min-height: 440px !important;
        padding: 96px 0;
    }

    .zs-page-hero--preset-our-team {
        min-height: 500px !important;
        padding: 124px 0 88px;
    }

    .zs-page-hero--preset-our-team .container,
    .zs-page-hero--preset-about-us .container,
    .zs-page-hero--preset-agronomy-hub .container {
        padding-right: clamp(24px, 8vw, 96px);
        padding-left: clamp(24px, 8vw, 96px);
    }

    /* The 300px desktop inset leaves too little measure here, so it relaxes
       with the shared container rule above and the band sheds the vertical
       padding it only needs at 1440. */
    .zs-page-hero--preset-agronomy-hub {
        min-height: 500px !important;
        padding: 124px 0 88px;
    }

    /* The 300px desktop inset would leave a ~470px measure at this width, so
       the padding relaxes with the container rule above and the band loses the
       200px vertical padding it only needs at 1440px. */
    .zs-page-hero--preset-about-us {
        min-height: 520px !important;
        padding: 128px 0 96px;
    }
}

/* Responsive: Mobile */
@media (max-width: 768px) {
    .zs-page-hero--preset-agro-dealers {
        min-height: 380px !important;
        padding: 64px 0;
    }

    .zs-page-hero--preset-agro-dealers .zs-page-hero__content {
        gap: 14px;
    }

    /* The copy sits over the middle of the photograph once the band narrows,
       so the horizontal wash is replaced by a top-down one. */
    .zs-page-hero--preset-agro-dealers .zs-page-hero__overlay--gradient,
    .zs-page-hero--preset-agro-dealers .zs-page-hero__overlay--dark-gradient {
        background:
            linear-gradient(180deg,
                rgba(15, 36, 24, 0.8) 0%,
                rgba(15, 36, 24, 0.68) 62%,
                rgba(15, 36, 24, 0.56) 100%
            );
    }

    .zs-page-hero--preset-agro-dealers .zs-page-hero__eyebrow {
        font-size: 11px;
        letter-spacing: 2.2px;
    }

    .zs-page-hero--preset-agro-dealers .zs-page-hero__title {
        font-size: clamp(1.9rem, 7vw, 2.5rem);
    }

    .zs-page-hero--preset-agro-dealers .zs-page-hero__subtitle {
        font-size: 17px;
    }

    .zs-page-hero--preset-our-team {
        min-height: 420px !important;
        padding: 92px 0 68px;
    }

    .zs-page-hero--preset-our-team .container {
        padding-right: 20px;
        padding-left: 20px;
    }

    .zs-page-hero--preset-our-team .zs-page-hero__content {
        gap: 14px;
    }

    .zs-page-hero--preset-our-team .zs-page-hero__overlay--gradient,
    .zs-page-hero--preset-our-team .zs-page-hero__overlay--dark-gradient {
        background:
            linear-gradient(180deg,
                rgba(15, 36, 24, 0.82) 0%,
                rgba(15, 36, 24, 0.72) 62%,
                rgba(15, 36, 24, 0.58) 100%
            );
    }

    .zs-page-hero--preset-our-team .zs-page-hero__eyebrow {
        font-size: 11px;
        letter-spacing: 2.2px;
    }

    .zs-page-hero--preset-our-team .zs-page-hero__title {
        font-size: clamp(2rem, 8vw, 2.7rem);
    }

    .zs-page-hero--preset-our-team .zs-page-hero__subtitle {
        font-size: 16px;
    }

    .zs-page-hero--preset-agronomy-hub {
        min-height: 420px !important;
        padding: 92px 0 68px;
    }

    .zs-page-hero--preset-agronomy-hub .container {
        padding-right: 20px;
        padding-left: 20px;
    }

    .zs-page-hero--preset-agronomy-hub .zs-page-hero__content {
        gap: 14px;
    }

    /* As with the other presets, the copy sits over the middle of the
       photograph once the band narrows, so the left-to-right wash is replaced
       by a top-down one. */
    .zs-page-hero--preset-agronomy-hub .zs-page-hero__overlay--gradient,
    .zs-page-hero--preset-agronomy-hub .zs-page-hero__overlay--dark-gradient {
        background:
            linear-gradient(180deg,
                rgba(15, 36, 24, 0.82) 0%,
                rgba(15, 36, 24, 0.72) 62%,
                rgba(15, 36, 24, 0.58) 100%
            );
    }

    /* Centred rather than top-left below this width: `cover` starts scaling by
       height once the band is narrower than the photograph's ratio, and the
       left edge is the group of people rather than the crop the section is
       about. */
    .zs-page-hero--preset-agronomy-hub {
        background-position: top center !important;
    }

    .zs-page-hero--preset-agronomy-hub .zs-page-hero__eyebrow {
        font-size: 11px;
        letter-spacing: 2.2px;
    }

    .zs-page-hero--preset-agronomy-hub .zs-page-hero__title {
        font-size: clamp(2rem, 8vw, 2.7rem);
    }

    .zs-page-hero--preset-agronomy-hub .zs-page-hero__subtitle {
        font-size: 16px;
    }

    .zs-page-hero--preset-about-us {
        min-height: 440px !important;
        padding: 96px 0 72px;
    }

    .zs-page-hero--preset-about-us .container {
        padding-right: 20px;
        padding-left: 20px;
    }

    .zs-page-hero--preset-about-us .zs-page-hero__content {
        gap: 16px;
    }

    /* As with the other two presets, the copy sits over the middle of the
       photograph once the band narrows, so the left-to-right wash is replaced
       by a top-down one. */
    .zs-page-hero--preset-about-us .zs-page-hero__overlay--gradient,
    .zs-page-hero--preset-about-us .zs-page-hero__overlay--dark-gradient {
        background:
            linear-gradient(180deg,
                rgba(15, 36, 24, 0.82) 0%,
                rgba(15, 36, 24, 0.72) 62%,
                rgba(15, 36, 24, 0.58) 100%
            );
    }

    .zs-page-hero--preset-about-us .zs-page-hero__eyebrow {
        font-size: 11px;
        letter-spacing: 2.2px;
    }

    .zs-page-hero--preset-about-us .zs-page-hero__title {
        font-size: clamp(2rem, 8vw, 2.7rem);
        line-height: 1.08;
    }

    .zs-page-hero--preset-about-us .zs-page-hero__subtitle {
        font-size: 16px;
    }
}