/**
 * Zamseed Home Hero Widget Styles
 *
 * @package Zamseed
 * @since 1.0.0
 */

.zs-home-hero {
    /*
     * Responsive focal point for the background image, supplied by the
     * Elementor focal controls. Consumed by both object-position and the Ken
     * Burns transform-origin so the first frame and the animated frame share
     * one focal point. These are fallbacks only.
     */
    /*
     * Explicit precedence, resolved here rather than by Elementor selector
     * order:
     *   1. --zs-hero-focal-x/y      explicit responsive focal control
     *   2. --zs-hero-legacy-position-y  saved legacy Image Position
     *   3. per-breakpoint fallback  (50% desktop / 30% tablet / 15% mobile)
     * The focal controls default to empty so Elementor omits their declaration
     * when unset, letting the chain fall through. An unset mobile value
     * inherits the tablet then desktop value through the normal cascade.
     */
    --zs-hero-image-position-x: var(--zs-hero-focal-x, var(--zs-hero-legacy-position-x, 50%));
    --zs-hero-image-position-y: var(--zs-hero-focal-y, var(--zs-hero-legacy-position-y, 50%));
    --zs-kenburns-scale: 1.07;
    --zs-kenburns-effective-scale: min(var(--zs-kenburns-scale), 1.08);
    --zs-kenburns-duration: 11s;
    --zs-kenburns-effective-duration: clamp(10s, var(--zs-kenburns-duration), 12s);
    --zs-hero-entrance-distance: 16px;
    --zs-hero-min-height: 0px;
    /* Fixed header overlays the top of the hero; the hero box itself starts
       at y=0, so the first screen is the hero minus the header band. */
    --zs-hero-header-clearance: 80px;
    --zs-hero-padding-top: 100px;
    --zs-hero-padding-right: 0px;
    --zs-hero-padding-bottom: 100px;
    --zs-hero-padding-left: 0px;
    --zs-hero-content-max: 792px;
    --zs-hero-heading-max: 589px;
    --zs-hero-content-gap: 24px;
    --zs-hero-content-align: flex-start;
    --zs-hero-vertical-align: center;
    /*
     * Overlay colour and per-stop strength are separate. A COLOR control emits
     * a hex, which cannot carry alpha, so opacity lives in its own responsive
     * controls and is applied with color-mix(). No stop reaches 100%: a fully
     * opaque layer behind the statistic cards would leave their
     * backdrop-filter nothing to sample and they would read as white panels.
     */
    --zs-hero-overlay-start-color: var(--zs-warm, #fdfcf9);
    --zs-hero-overlay-end-color: var(--zs-warm, #fdfcf9);
    --zs-hero-overlay-start-opacity: 78%;
    --zs-hero-overlay-mid-opacity: 66%;
    --zs-hero-overlay-end-opacity: 10%;
    --zs-hero-overlay-solid: 40%;
    --zs-hero-overlay-end: 62%;
    --zs-stat-columns: 3;
    --zs-stat-row-max: 540px;
    --zs-stat-column-gap: 12px;
    --zs-stat-row-gap: 12px;
    --zs-stat-min-width: 0px;
    --zs-stat-min-height: 78px;
    --zs-stat-bg-color: #ffffff;
    --zs-stat-bg-opacity: 0.3;
    --zs-stat-hover-bg-color: #ffffff;
    --zs-stat-hover-bg-opacity: 0.86;
    --zs-stat-blur: 14px;
    --zs-stat-saturate: 125%;
    --zs-stat-border: rgba(45, 90, 39, 0.12);
    --zs-stat-radius: 8px;
    --zs-stat-padding: 17px;
    --zs-stat-content-gap: 8px;
    --zs-stat-align: flex-start;
    --zs-stat-justify: flex-start;
    /* Seeded from the theme tokens rather than repeating their hex values, so
       a palette change reaches the hero stat cards too. */
    --zs-stat-value-color: var(--zs-primary, #2d5a27);
    --zs-stat-label-color: var(--zs-muted, #555555);
    --zs-stat-hover-y: -2px;
    --zs-stat-hover-scale: 1;
    --zs-stat-transition-duration: 260ms;
    --zs-stat-transition-ease: var(--zs-ease-hover, cubic-bezier(0.2, 0.8, 0.2, 1));
    --zs-hero-button-padding: 2px 18px;
    --zs-hero-button-min-height: 44px;
    --zs-hero-button-radius: 999px;
    --zs-callout-max: 520px;
    --zs-callout-padding: 19px 23px;
    --zs-callout-gap: 18px;
    --zs-callout-bg: #ffffff;
    --zs-callout-border: rgba(45, 90, 39, 0.08);
    --zs-callout-radius: 20px;
    --zs-callout-icon-box: 54px;
    --zs-callout-icon-size: 26px;

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: var(--zs-hero-vertical-align);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: var(--zs-hero-min-height);
    overflow: hidden;
    background-color: var(--zs-warm, #fdfcf9);

    /*
     * Height follows the content plus this padding — no min-height floor.
     * A 725px floor (taken from the Figma frame height) exceeded the natural
     * 614px, and justify-content:center split the surplus above and below the
     * copy, leaving ~155px of dead space under the Current Season card.
     * The Figma 725px was the *result* of content plus padding, not a minimum.
     */
    padding: var(--zs-hero-padding-top) var(--zs-hero-padding-right) var(--zs-hero-padding-bottom) var(--zs-hero-padding-left);
}

.zs-home-hero *,
.zs-home-hero *::before,
.zs-home-hero *::after {
    box-sizing: border-box;
}

/*
 * The inner wrapper owns the horizontal gutter, not the hero's padding
 * control. width:100% here previously overrode the theme's .container rule
 * (higher specificity), leaving no side padding — so content sat flush
 * against the screen edge whenever the parent column gutter was absent, and
 * any hero instance with a saved hero_padding of 0 would do the same. Using
 * the theme's own container formula makes the gutter independent of that
 * control, so existing saved widget data needs no migration.
 *
 * At 1440: min(1200px, 1400px) = 1200px — desktop composition unchanged.
 * At  320: min(1200px,  292px) =  292px — gutter restored.
 */
.zs-home-hero > .container,
.zs-home-hero__inner {
    position: relative;
    z-index: 2;
    width: min(
        var(--zs-container-max, 1200px),
        calc(100% - var(--zs-container-padding, 20px) * 2)
    );
    min-width: 0;
    max-width: 100%;
    margin-inline: auto;
}

.zs-home-hero__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
}

.zs-home-hero__slides {
    position: absolute;
    inset: 0;
}

.zs-home-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.1s ease-in-out;
}

.zs-home-hero__slide.is-active {
    opacity: 1;
}

/* Single-slide heroes have no JS driving them, so never hide the only slide. */
.zs-home-hero:not(.zs-home-hero--slider) .zs-home-hero__slide {
    opacity: 1;
}

/*
 * Scoped under the hero root deliberately. As a bare .zs-home-hero__image rule
 * the height:100% lost the cascade and the image collapsed to its intrinsic
 * aspect height — 219px inside a 1048px hero at 390px wide — so it covered
 * only the top fifth of the hero, which Ken Burns then clipped by a further
 * 13px. inset:0 plus min-height make the fill unconditional.
 */
.zs-home-hero .zs-home-hero__image {
    position: absolute;
    inset: 0;
    /*
     * The full set, not just min-height. A global img { max-width: 100% } was
     * capping this layer, and min-width:0 left the fill dependent on the
     * containing block rather than guaranteed.
     */
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    max-width: none;
    max-height: none;
    display: block;
    object-fit: cover;
    object-position:
        var(--zs-hero-image-position-x, 50%)
        var(--zs-hero-image-position-y, 50%);
    transform-origin:
        var(--zs-hero-image-position-x, 50%)
        var(--zs-hero-image-position-y, 50%);
}

.zs-home-hero__slide picture {
    position: absolute;
    inset: 0;
    display: block;
}

/* ==========================================================================
   Ken Burns
   ========================================================================== */

/*
 * Runs once and settles. A perpetual alternating zoom made the whole hero
 * look like it was drifting, which reads as the page moving rather than as
 * a subtle establishing shot. Opt into looping with the Loop Motion control.
 */
.zs-home-hero--kenburns .zs-home-hero__slide.is-active .zs-home-hero__image,
.zs-home-hero--kenburns:not(.zs-home-hero--slider) .zs-home-hero__image {
    animation-duration: var(--zs-kenburns-effective-duration);
    animation-timing-function: var(--zs-ease-standard, cubic-bezier(0.22, 1, 0.36, 1));
    animation-fill-mode: both;
    animation-iteration-count: 1;
}

.zs-home-hero--kb-active .zs-home-hero__slide.is-active .zs-home-hero__image,
.zs-home-hero--kb-active:not(.zs-home-hero--slider) .zs-home-hero__image {
    will-change: transform;
}

.zs-home-hero--kb-loop .zs-home-hero__slide.is-active .zs-home-hero__image,
.zs-home-hero--kb-loop:not(.zs-home-hero--slider) .zs-home-hero__image {
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.zs-home-hero--kb-in .zs-home-hero__slide.is-active .zs-home-hero__image,
.zs-home-hero--kb-in:not(.zs-home-hero--slider) .zs-home-hero__image {
    animation-name: zs-kenburns-in;
}

.zs-home-hero--kb-out .zs-home-hero__slide.is-active .zs-home-hero__image,
.zs-home-hero--kb-out:not(.zs-home-hero--slider) .zs-home-hero__image {
    animation-name: zs-kenburns-out;
}

.zs-home-hero--kb-in-left .zs-home-hero__slide.is-active .zs-home-hero__image,
.zs-home-hero--kb-in-left:not(.zs-home-hero--slider) .zs-home-hero__image {
    animation-name: zs-kenburns-in-left;
}

.zs-home-hero--kb-in-right .zs-home-hero__slide.is-active .zs-home-hero__image,
.zs-home-hero--kb-in-right:not(.zs-home-hero--slider) .zs-home-hero__image {
    animation-name: zs-kenburns-in-right;
}

.zs-home-hero--kb-in-up .zs-home-hero__slide.is-active .zs-home-hero__image,
.zs-home-hero--kb-in-up:not(.zs-home-hero--slider) .zs-home-hero__image {
    animation-name: zs-kenburns-in-up;
}

@keyframes zs-kenburns-in {
    from { transform: scale(1); }
    to   { transform: scale(var(--zs-kenburns-effective-scale)); }
}

@keyframes zs-kenburns-out {
    from { transform: scale(var(--zs-kenburns-effective-scale)); }
    to   { transform: scale(1); }
}

@keyframes zs-kenburns-in-left {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to   { transform: scale(var(--zs-kenburns-effective-scale)) translate3d(-1.2%, 0, 0); }
}

@keyframes zs-kenburns-in-right {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to   { transform: scale(var(--zs-kenburns-effective-scale)) translate3d(1.2%, 0, 0); }
}

@keyframes zs-kenburns-in-up {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to   { transform: scale(var(--zs-kenburns-effective-scale)) translate3d(0, -1.2%, 0); }
}

/* ==========================================================================
   Slider Controls
   ========================================================================== */

.zs-home-hero__arrow {
    position: absolute;
    /* Not vertically centred: that is exactly where the statistics row sits.
       The hero is not full-bleed — it is a container whose content column starts
       20px inside it — so there is no width at which a 48px control fits beside
       the content. Measured at 1440px: hero 150-1290, content 170-1270, stats
       row 170-710 spanning y 313-427, and a centred arrow landing at 174-222 /
       367-415, on top of the first stat card.

       The hero's bottom padding band carries no content, so the controls live
       there instead — clear of the stats, clear of the copy, and clear of the
       centred dots. */
    bottom: 24px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(45, 90, 39, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--zs-primary, #2d5a27);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.zs-home-hero__arrow svg {
    width: 22px;
    height: 22px;
}

.zs-home-hero__arrow:hover,
.zs-home-hero__arrow:focus-visible {
    background: var(--zs-primary, #2d5a27);
    color: #ffffff;
}

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

.zs-home-hero__arrow--prev {
    left: 24px;
}

.zs-home-hero__arrow--next {
    right: 24px;
}

.zs-home-hero__dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    z-index: 3;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
}

.zs-home-hero__dot {
    position: relative;
    width: 28px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: var(--zs-radius-pill, 999px);
    background: transparent;
    cursor: pointer;
}

.zs-home-hero__dot::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--zs-primary, #2d5a27);
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.7);
    transform: scaleX(0.36);
    transition:
        background-color var(--zs-motion-fast, 220ms) var(--zs-ease-hover, ease),
        transform var(--zs-motion-fast, 220ms) var(--zs-ease-hover, ease);
}

.zs-home-hero__dot.is-active {
    border-radius: var(--zs-radius-pill, 999px);
}

.zs-home-hero__dot.is-active::before {
    background: var(--zs-primary, #2d5a27);
    transform: scaleX(1);
}

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

.zs-home-hero__fade {
    /* Full-bleed layer above the image; never intercepts interaction. */
    pointer-events: none;
    position: absolute;
    inset: 0;
    /* rgba fallback for engines without color-mix(). */
    /*
     * The final stop reads --zs-hero-overlay-end, not a hard-coded 100%.
     * That token and its Elementor control (overlay_end_stop) already existed
     * but nothing consumed them, so the scrim faded across the whole frame and
     * the photograph never reached full strength — the hero read hazy end to
     * end. Figma 11096:34986 holds the wash to 39% and clears it by 59%, which
     * is what gives the crisp white-copy / full-photo split.
     */
    background: linear-gradient(
        90deg,
        rgba(253, 252, 249, 0.78) 0%,
        rgba(253, 252, 249, 0.66) var(--zs-hero-overlay-solid),
        rgba(253, 252, 249, 0.10) var(--zs-hero-overlay-end)
    );
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--zs-hero-overlay-start-color) var(--zs-hero-overlay-start-opacity), transparent) 0%,
        color-mix(in srgb, var(--zs-hero-overlay-start-color) var(--zs-hero-overlay-mid-opacity), transparent) var(--zs-hero-overlay-solid),
        color-mix(in srgb, var(--zs-hero-overlay-end-color) var(--zs-hero-overlay-end-opacity), transparent) var(--zs-hero-overlay-end)
    );
}

.zs-home-hero__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: var(--zs-header-items, var(--zs-hero-content-align));
    gap: var(--zs-hero-content-gap);
    width: 100%;
    min-width: 0;
    max-width: min(var(--zs-hero-content-max), 100%);
    margin-left: var(--zs-header-margin-left, 0);
    margin-right: var(--zs-header-margin-right, auto);
    text-align: var(--zs-header-text-align, left);
}

.zs-home-hero__eyebrow,
.zs-home-hero__title,
.zs-home-hero__stats,
.zs-home-hero__callout {
    margin-left: var(--zs-header-margin-left, 0);
    margin-right: var(--zs-header-margin-right, auto);
    text-align: var(--zs-header-text-align, left);
}

.zs-home-hero__ctas {
    justify-content: var(--zs-header-justify, flex-start);
}

.zs-home-hero__eyebrow {
    display: inline-block;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.6;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--zs-accent, #c48c33);
}

.zs-home-hero__eyebrow,
.zs-home-hero__title,
.zs-home-hero__stats,
.zs-home-hero__ctas,
.zs-home-hero__callout {
    animation: zs-hero-item-in 620ms var(--zs-ease-emphasised, cubic-bezier(0.16, 1, 0.3, 1)) both;
}

.zs-home-hero__eyebrow {
    animation-delay: 60ms;
}

.zs-home-hero__title {
    animation-delay: 130ms;
}

.zs-home-hero__stats {
    animation-delay: 220ms;
}

.zs-home-hero__ctas {
    animation-delay: 300ms;
}

.zs-home-hero__callout {
    animation-delay: 380ms;
}

.zs-home-hero__stat {
    animation: zs-hero-card-in 540ms var(--zs-ease-standard, cubic-bezier(0.22, 1, 0.36, 1)) both;
    animation-delay: var(--zs-stat-entrance-delay, 260ms);
}

@keyframes zs-hero-item-in {
    from {
        opacity: 0;
        transform: translateY(var(--zs-hero-entrance-distance));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zs-hero-card-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.zs-home-hero__title {
    margin: 0;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    max-width: min(var(--zs-hero-heading-max), 100%);
    font-size: 3.25rem;
    font-weight: 700;
    line-height: 1;
    color: var(--zs-primary, #2d5a27);
}

/* Stat cards */
.zs-home-hero__stats {
    display: grid;
    grid-template-columns: repeat(var(--zs-stat-columns), minmax(var(--zs-stat-min-width), 1fr));
    column-gap: var(--zs-stat-column-gap);
    row-gap: var(--zs-stat-row-gap);
    width: 100%;
    min-width: 0;
    max-width: min(var(--zs-stat-row-max), 100%);
}

.zs-home-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: var(--zs-stat-align);
    justify-content: var(--zs-stat-justify);
    gap: var(--zs-stat-content-gap);
    min-width: 0;
    min-height: var(--zs-stat-min-height);
    padding: var(--zs-stat-padding);
    text-decoration: none;
    background: rgba(255, 255, 255, var(--zs-stat-bg-opacity));
    background: color-mix(in srgb, var(--zs-stat-bg-color) calc(var(--zs-stat-bg-opacity) * 100%), transparent);
    backdrop-filter: saturate(var(--zs-stat-saturate)) blur(var(--zs-stat-blur));
    -webkit-backdrop-filter: saturate(var(--zs-stat-saturate)) blur(var(--zs-stat-blur));
    border: 1px solid var(--zs-stat-border);
    border-radius: var(--zs-stat-radius);
    color: inherit;
    transition:
        transform var(--zs-stat-transition-duration) var(--zs-stat-transition-ease),
        background-color var(--zs-stat-transition-duration) var(--zs-stat-transition-ease),
        border-color var(--zs-stat-transition-duration) var(--zs-stat-transition-ease),
        box-shadow var(--zs-stat-transition-duration) var(--zs-stat-transition-ease);
}

.zs-home-hero__stat:hover,
.zs-home-hero__stat:focus-visible {
    background: rgba(255, 255, 255, var(--zs-stat-hover-bg-opacity));
    background: color-mix(in srgb, var(--zs-stat-hover-bg-color) calc(var(--zs-stat-hover-bg-opacity) * 100%), transparent);
    transform: translateY(var(--zs-stat-hover-y)) scale(var(--zs-stat-hover-scale));
}

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

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .zs-home-hero__stat {
        background: rgba(255, 255, 255, 0.9);
    }
}

.zs-home-hero__stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--zs-stat-value-color);
}

.zs-home-hero__stat-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.zs-home-hero__stat-icon img {
    display: block;
    width: 1em;
    height: 1em;
    object-fit: contain;
}

.zs-home-hero__stat-number {
    display: block;
    font-family: var(--zs-font-serif, 'Cormorant Garamond', serif);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--zs-stat-value-color);
}

.zs-home-hero__stat-label {
    display: block;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--zs-stat-label-color);
    white-space: pre-line;
}

/* CTAs */
.zs-home-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.zs-home-hero__button {
    gap: 8px;
    min-height: var(--zs-hero-button-min-height);
    padding: var(--zs-hero-button-padding);
    border-radius: var(--zs-hero-button-radius);
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition:
        transform var(--zs-motion-fast, 220ms) var(--zs-ease-hover, ease),
        box-shadow var(--zs-motion-fast, 220ms) var(--zs-ease-hover, ease),
        background-color var(--zs-motion-fast, 220ms) var(--zs-ease-hover, ease),
        color var(--zs-motion-fast, 220ms) var(--zs-ease-hover, ease),
        border-color var(--zs-motion-fast, 220ms) var(--zs-ease-hover, ease);
}

.zs-home-hero__button:hover,
.zs-home-hero__button:focus-visible {
    transform: translateY(-2px);
}

.zs-home-hero__button--primary {
    border: 2px solid transparent;
    background: var(--zs-primary, #2d5a27);
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(45, 90, 39, 0.18);
}

.zs-home-hero__button--secondary {
    border: 2px solid var(--zs-primary, #2d5a27);
    background: transparent;
    color: var(--zs-primary, #2d5a27);
    box-shadow: none;
}

.zs-home-hero__button-icon,
.zs-home-hero__button-icon svg,
.zs-home-hero__button-icon img {
    width: 1em;
    height: 1em;
}

.zs-home-hero__button-icon img {
    display: block;
    object-fit: contain;
}

/* Season callout card */
.zs-home-hero__callout {
    display: flex;
    align-items: center;
    gap: var(--zs-callout-gap);
    width: 100%;
    max-width: min(var(--zs-callout-max), 100%);
    min-width: 0;
    padding: var(--zs-callout-padding);
    background: var(--zs-callout-bg);
    border: 1px solid var(--zs-callout-border);
    border-radius: var(--zs-callout-radius);
    color: inherit;
    text-decoration: none;
}

.zs-home-hero__callout-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--zs-callout-icon-box);
    height: var(--zs-callout-icon-box);
    border-radius: 27px;
    background: rgba(45, 90, 39, 0.1);
    color: var(--zs-primary, #2d5a27);
    font-size: var(--zs-callout-icon-size);
}

.zs-home-hero__callout-icon svg,
.zs-home-hero__callout-icon img {
    display: block;
    width: var(--zs-callout-icon-size);
    height: var(--zs-callout-icon-size);
    fill: currentColor;
}

/* Keep non-square uploads from being squeezed into the square icon slot */
.zs-home-hero__callout-icon img {
    object-fit: contain;
}

.zs-home-hero__callout-body {
    min-width: 0;
}

.zs-home-hero__callout-title {
    display: block;
    margin-bottom: 4px;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.6;
    color: var(--zs-primary, #2d5a27);
}

.zs-home-hero__callout-description {
    margin: 0;
    font-family: var(--zs-font-sans, 'Inter', sans-serif);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--zs-muted, #555555);
}

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

@media (max-width: 1024px) {
    .zs-home-hero {
        --zs-hero-image-position-y: var(--zs-hero-focal-y, var(--zs-hero-legacy-position-y, 30%));
    }
}

/* 767, not 768: Elementor's mobile tier is <= 767px, and this widget's own
   mobile art direction already uses <source media="(max-width: 767px)">. At
   768 the hero layout changed one pixel before the mobile control values and
   the mobile image swap did. */
@media (max-width: 767px) {
    /*
     * Fallback only, overridden by the Elementor statistic typography control.
     * At 2.5rem the value alone was 40px of a 114px card, so the card read as
     * mostly empty space on mobile.
     */
    .zs-home-hero .zs-home-hero__stat-number {
        font-size: 2rem;
        line-height: 1;
    }

    .zs-home-hero {
        --zs-hero-image-position-y: var(--zs-hero-focal-y, var(--zs-hero-legacy-position-y, 15%));
        --zs-kenburns-scale: 1.035;
        --zs-kenburns-effective-scale: min(var(--zs-kenburns-scale), 1.035);
        --zs-kenburns-duration: 10s;
        --zs-kenburns-effective-duration: 10s;
        --zs-hero-entrance-distance: 12px;
    }

    .zs-home-hero--kenburns .zs-home-hero__slide.is-active .zs-home-hero__image,
    .zs-home-hero--kenburns:not(.zs-home-hero--slider) .zs-home-hero__image {
        animation-duration: 10s;
    }
}

@media (max-width: 1024px) {
    .zs-home-hero__fade {
    /* rgba fallback for engines without color-mix(). */
        background: linear-gradient(
            90deg,
            rgba(253, 252, 249, 0.78) 0%,
            rgba(253, 252, 249, 0.66) 55%,
            rgba(253, 252, 249, 0.10) 100%
        );
        background: linear-gradient(
            90deg,
            color-mix(in srgb, var(--zs-hero-overlay-start-color) var(--zs-hero-overlay-start-opacity), transparent) 0%,
            color-mix(in srgb, var(--zs-hero-overlay-start-color) var(--zs-hero-overlay-mid-opacity), transparent) 55%,
            color-mix(in srgb, var(--zs-hero-overlay-end-color) var(--zs-hero-overlay-end-opacity), transparent) 100%
        );
    }
}

@media (max-width: 1024px) {
    .zs-home-hero {
        /*
         * .site-header is position:fixed at 80px tall and the hero starts at
         * top 0 underneath it, so this padding is the only thing holding hero
         * content clear of it. At 80 the eyebrow sat flush against the header's
         * bottom edge with no breathing room; at the mobile tier it was 56,
         * which put the eyebrow 24px BEHIND the header - invisible on every
         * phone. Both tiers now clear the header by 16.
         */
        --zs-hero-padding-top: 96px;
        --zs-hero-padding-bottom: 80px;
    }

    .zs-home-hero__arrow--prev {
        left: 12px;
    }

    .zs-home-hero__arrow--next {
        right: 12px;
    }
}

@media (max-width: 767px) {
    .zs-home-hero {
        --zs-hero-padding-top: 96px;
        --zs-hero-padding-bottom: 56px;
        --zs-stat-columns: 1;
    }

    /* Arrows would sit on top of the stacked copy — dots are enough here. */
    .zs-home-hero__arrow {
        display: none;
    }

    .zs-home-hero__dots {
        bottom: 16px;
    }

    .zs-home-hero__fade {
    /* rgba fallback for engines without color-mix(). */
        background: linear-gradient(
            180deg,
            rgba(253, 252, 249, 0.78) 0%,
            rgba(253, 252, 249, 0.66) 55%,
            rgba(253, 252, 249, 0.10) 100%
        );
        background: linear-gradient(
            180deg,
            color-mix(in srgb, var(--zs-hero-overlay-start-color) var(--zs-hero-overlay-start-opacity), transparent) 0%,
            color-mix(in srgb, var(--zs-hero-overlay-start-color) var(--zs-hero-overlay-mid-opacity), transparent) 55%,
            color-mix(in srgb, var(--zs-hero-overlay-end-color) var(--zs-hero-overlay-end-opacity), transparent) 100%
        );
    }

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

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

    .zs-home-hero__ctas .btn {
        width: 100%;
        justify-content: center;
    }

    .zs-home-hero__stat {
        animation-delay: var(--zs-stat-mobile-entrance-delay, var(--zs-stat-entrance-delay, 245ms));
    }
}

@media (max-width: 480px) {
    .zs-home-hero__callout {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .zs-home-hero__image {
        animation: none !important;
        transform: none !important;
    }

    .zs-home-hero__eyebrow,
    .zs-home-hero__title,
    .zs-home-hero__stats,
    .zs-home-hero__ctas,
    .zs-home-hero__callout,
    .zs-home-hero__stat {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .zs-home-hero__slide {
        transition: none;
    }
}

/* ------------------------------------------------------------------
   Near-full-screen first view (desktop and laptop).

   The hero box starts at y=0 and the 80px site header is fixed on top of
   it, so "the viewport below the header" is 100svh minus that band — at a
   900px viewport that is 820px, which is also the ~90vh first screen the
   brief asks for.

   Deliberately a FLOOR, not a height:
     - content taller than the floor (short laptops, tablet, phone) simply
       keeps its natural height, so nothing is ever clipped;
     - `max()` keeps an explicit Minimum Height control value winning when
       it is larger, so the widget control still governs.

   svh rather than vh so mobile browser chrome collapsing does not resize
   the hero mid-scroll; the vh rule above it is the fallback for engines
   without svh.
   ------------------------------------------------------------------ */
@media (min-width: 1025px) {
    .zs-home-hero {
        min-height: max(
            var(--zs-hero-min-height, 0px),
            calc(100vh - var(--zs-hero-header-clearance, 80px))
        );
    }
}

@supports (height: 100svh) {
    @media (min-width: 1025px) {
        .zs-home-hero {
            min-height: max(
                var(--zs-hero-min-height, 0px),
                calc(100svh - var(--zs-hero-header-clearance, 80px))
            );
        }
    }
}