.hero-carousel {
    --hero-inset: max(0px, calc((100vw - 1200px) / 2));
    --control-ink: #fff;
    --control-bg: #ffffff12;
    --control-line: #ffffff40;
    --selected-bg: #fff;
    --selected-ink: #00658e;
    position: relative;
}
.hero-carousel[data-active-slide="1"] {
    --control-ink: #00658e;
    --control-bg: #ffffffb8;
    --control-line: #bedbe8;
    --selected-bg: #0076a3;
    --selected-ink: #fff;
}
.hero-carousel__viewport { overflow: hidden; touch-action: pan-y pinch-zoom; }
.hero-carousel__track { display: flex; align-items: stretch; }
.is-enhanced .hero-carousel__track { transition: transform 650ms cubic-bezier(.22,.61,.36,1); }
.hero-carousel__controls {
    position: absolute;
    z-index: 3;
    left: max(6%, var(--hero-inset));
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--control-line);
    border-radius: 999px;
    background: var(--control-bg);
    color: var(--control-ink);
}
.hero-carousel__controls button {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: inherit;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}
.hero-carousel__previous span, .hero-carousel__next span { font-size: 22px; font-weight: 400; }
.hero-carousel__controls button:hover { background: var(--control-line); }
.hero-carousel__controls button[aria-pressed="true"] { background: var(--selected-bg); color: var(--selected-ink); }
.hero-carousel__controls button:focus-visible { outline: 2px solid var(--control-ink); outline-offset: 2px; }
.hero-carousel__rotation svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.hero-carousel__rotation .hero-carousel__play { display: none; fill: currentColor; stroke: none; }
.hero-carousel.is-paused .hero-carousel__pause { display: none; }
.hero-carousel.is-paused .hero-carousel__play { display: block; }
.hero-carousel__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; }
.hero-carousel.has-reduced-motion .hero-carousel__track { transition: none; }
.hero-banner {
    /* Reserve the header, top line and ribbon so the first view ends at the strip. */
    --hero-chrome-height: 241.8px;
    --hero-height: max(420px, calc(100vh - var(--hero-chrome-height)));
    --hero-height: max(420px, calc(100svh - var(--hero-chrome-height)));
    --hero-inset: max(0px, calc((100vw - 1200px) / 2));
    flex: 0 0 100%;
    min-width: 0;
    position: relative;
    isolation: isolate;
    display: flex;
    min-height: var(--hero-height);
    width: 100%;
    overflow: hidden;
    background: linear-gradient(90deg, #ffffff 40%, #edf9fe);
    color: var(--ink);
}
.hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -3;
    background: url('hero/dolphins-water-blue-banner.webp') left center / 200% auto no-repeat;
    filter: blur(24px);
    mask-image: linear-gradient(90deg, #000 45%, transparent 67%);
    pointer-events: none;
}
.hero-banner__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: calc(100% - var(--hero-inset));
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: right center;
    mask-image: linear-gradient(90deg, transparent calc(100% - var(--hero-height) * 2), #000 calc(100% - var(--hero-height) * 1.4), #000 calc(100% - 70px), transparent);
}
/* When a tall window leaves room above and below the image, fill it by
   trimming only the empty space at the left of the wide artwork. */
@media (min-width: 1201px) and (min-height: calc(25vw + 542px)),
       (min-width: 1001px) and (max-width: 1200px) and (min-height: calc(50vw + 223px)) {
    .hero-banner__image { object-fit: cover; }
}
.hero-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, #ffffff80, transparent 58%);
    pointer-events: none;
}
.hero-banner__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: calc(var(--hero-inset) + 620px);
    max-width: 65%;
    padding: 24px 0 80px max(6%, var(--hero-inset));
}
.hero-banner__eyebrow {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 0 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    line-height: 1.5;
}
.hero-banner__eyebrow > span { opacity: .5; font-weight: 400; }
.hero-banner__title {
    margin: 0 0 22px;
    font-size: clamp(38px, 3.8vw, 62px);
    font-weight: 400;
    letter-spacing: -.055em;
    line-height: 1.08;
    text-wrap: initial;
}
.hero-banner__title > span { display: block; font-weight: 700; color: var(--accent); }
.hero-banner__description {
    margin: 0 0 22px;
    font-size: clamp(14px, 1vw, 16px);
    font-weight: 400;
    line-height: 1.7;
    color: var(--muted);
}
.hero-banner__link { min-height: 54px; padding: 15px 27px; gap: 30px; }
@media (max-width: 1200px) {
    .hero-banner { --hero-chrome-height: 222.8px; }
}
@media (max-width: 1000px) and (min-width: 701px) {
    .hero-banner__image { object-fit: cover; object-position: 62% center; mask-image: none; }
    .hero-banner::before { display: none; }
    .hero-banner__content { width: 57%; padding-left: 5%; }
    .hero-banner__eyebrow { gap: 10px; font-size: 9px; }
    .hero-banner__title { font-size: clamp(39px, 4.9vw, 49px); }
}
@media (max-width: 700px) {
    .hero-banner {
        --hero-chrome-height: 206.8px;
        --hero-height: max(600px, calc(100vh - var(--hero-chrome-height)));
        --hero-height: max(600px, calc(100svh - var(--hero-chrome-height)));
        min-height: var(--hero-height);
        color: var(--ink);
    }
    .hero-banner::before { display: none; }
    .hero-banner__image { object-fit: cover; object-position: center top; mask-image: none; }
    .hero-banner::after {
        background: linear-gradient(0deg, #ffffff 0%, #fffffff5 28%, #ffffffb8 42%, #ffffff00 64%);
    }
    .hero-banner__content {
        justify-content: flex-end;
        width: 100%;
        max-width: none;
        padding: clamp(220px, 30vh, 350px) 6% 80px;
        padding: clamp(220px, 30svh, 350px) 6% 80px;
    }
    .hero-banner__eyebrow { margin-bottom: 18px; gap: 12px; font-size: 10px; }
    .hero-banner__title { margin-bottom: 18px; font-size: clamp(36px, 8.8vw, 54px); line-height: 1.1; }
    .hero-banner__description { color: var(--muted); margin-bottom: 24px; font-size: 14px; }
    .hero-banner__link { color: #ffffff; background: var(--accent); border-color: var(--accent); }
    .hero-banner__link:hover { background: #00658e; border-color: #00658e; }
    .hero-banner__link:focus-visible { outline-color: var(--accent); }
}
@media (max-width: 520px) {
    .hero-banner { --hero-chrome-height: 201.5px; }
}
@media (max-width: 380px) {
    .hero-banner__content { padding-top: clamp(210px, 30vh, 330px); padding-top: clamp(210px, 30svh, 330px); padding-bottom: 80px; }
    .hero-banner__title { font-size: 34px; }
}
/* Keep the banner usable on shorter screens while allowing the strip to fit. */
@media (min-width: 701px) and (max-height: 650px) {
    .hero-banner {
        --hero-height: max(340px, calc(100vh - var(--hero-chrome-height)));
        --hero-height: max(340px, calc(100svh - var(--hero-chrome-height)));
    }
    .hero-banner__content { padding-top: 16px; padding-bottom: 72px; }
    .hero-banner__eyebrow { margin-bottom: 10px; }
    .hero-banner__title { font-size: clamp(32px, 3.4vw, 54px); margin-bottom: 12px; }
    .hero-banner__description { font-size: 14px; line-height: 1.5; margin-bottom: 12px; }
    .hero-banner__link { min-height: 46px; padding: 10px 20px; }
}
@media (max-width: 700px) and (max-height: 800px) {
    .hero-banner {
        --hero-height: max(440px, calc(100vh - var(--hero-chrome-height)));
        --hero-height: max(440px, calc(100svh - var(--hero-chrome-height)));
    }
    .hero-banner__content { padding: clamp(120px, 25vh, 200px) 6% 72px; padding: clamp(120px, 25svh, 200px) 6% 72px; }
    .hero-banner__image { object-fit: contain; object-position: center top; }
    .hero-banner__eyebrow { font-size: 9px; margin-bottom: 9px; }
    .hero-banner__title { font-size: clamp(28px, 7vw, 36px); line-height: 1.08; margin-bottom: 10px; }
    .hero-banner__description { font-size: 13px; line-height: 1.4; margin-bottom: 14px; }
    .hero-banner__link { min-height: 46px; padding: 10px 20px; }
}
@media (max-width: 520px) and (max-height: 640px) {
    .hero-banner {
        --hero-height: max(330px, calc(100vh - var(--hero-chrome-height)));
        --hero-height: max(330px, calc(100svh - var(--hero-chrome-height)));
    }
    .hero-banner__image {
        left: auto;
        right: 0;
        width: 53%;
        height: calc(100% - 70px);
        mask-image: linear-gradient(90deg, transparent, #000 20%);
    }
    .hero-banner__content { padding: clamp(75px, 18vh, 100px) 6% 70px; padding: clamp(75px, 18svh, 100px) 6% 70px; }
    .hero-banner__eyebrow { font-size: 8px; margin-bottom: 6px; }
    .hero-banner__title { font-size: clamp(25px, 7vw, 30px); line-height: 1.05; margin-bottom: 6px; }
    .hero-banner__description { font-size: 12px; line-height: 1.3; margin-bottom: 10px; }
    .hero-banner__link { min-height: 44px; padding: 9px 16px; gap: 14px; font-size: 12px; }
}

.hero-banner--water { background: #041c35; color: #fff; }
.hero-banner--water::before { background-image: url('hero/dolphins-water-desktop.webp'); }
.hero-banner--water::after { background: linear-gradient(90deg, #03172f55, transparent 65%); }
.hero-banner--water .hero-banner__title > span { color: #bdeaff; }
.hero-banner--water .hero-banner__description { color: #deedf7; }
.hero-banner--water .hero-banner__link { color: #00658e; background: #fff; border-color: #fff; }
.hero-banner--water .hero-banner__link:hover { background: #dff5ff; border-color: #dff5ff; }
.hero-banner--water .hero-banner__link:focus-visible { outline-color: #fff; }
@media (min-width: 860px) and (max-width: 1000px) {
    .hero-banner--water .hero-banner__image {
        object-fit: contain;
        object-position: right center;
        mask-image: linear-gradient(90deg, transparent calc(100% - var(--hero-height) * 2), #000 calc(100% - var(--hero-height) * 1.65));
    }
}
@media (min-width: 860px) and (max-width: 1000px) and (min-height: 724px) {
    .hero-banner--water .hero-banner__image { object-fit: cover; object-position: 62% center; mask-image: none; }
}
@media (min-width: 701px) and (max-width: 1000px) and (orientation: portrait) {
    .hero-banner::before { display: block; }
    .hero-banner--citrus::after {
        background: linear-gradient(90deg, #fff 0%, #fffffff5 30%, #ffffffcc 37%, transparent 49%);
    }
    .hero-banner--water::after {
        background: linear-gradient(90deg, #041c35 0%, #041c35f5 30%, #041c35cc 37%, transparent 49%);
    }
    .hero-banner--water .hero-banner__image,
    .hero-banner--citrus .hero-banner__image {
        width: 100%;
        object-fit: contain;
        object-position: right center;
        mask-image: linear-gradient(90deg, transparent 10%, #000 35%);
    }
}
@media (max-width: 700px) {
    .hero-banner--water::after { background: linear-gradient(0deg, #041c35 0%, #041c35f5 20%, #041c3580 42%, transparent 60%); }
    .hero-carousel__controls { left: 6%; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .is-enhanced .hero-carousel__track { transition: none; }
}

/* Full-bleed product scenes carry their own colour throughout the banner. */
.hero-banner--product { color: #fff; }
.hero-banner--apple { background: #75000c; }
.hero-banner--jeera { background: #404d1d; }
.hero-banner--product::before { display: none; }
.hero-banner--product::after { background: linear-gradient(90deg, #0008 0%, #0004 38%, transparent 68%); }
.hero-banner--product .hero-banner__image {
    left: 0;
    width: 100%;
    object-fit: cover;
    object-position: center;
    mask-image: none;
}
.hero-banner--product .hero-banner__title > span { color: #d8efff; }
.hero-banner--product .hero-banner__description { color: #fff; }
.hero-banner--product .hero-banner__link { background: #fff; border-color: #fff; color: #123c50; }
.hero-banner--product .hero-banner__link:hover { background: #e4f5fc; border-color: #e4f5fc; }
@media (max-width: 700px) {
    .hero-banner--product .hero-banner__image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }
    .hero-banner--apple::after { background: linear-gradient(0deg, #59000d 4%, #59000df2 25%, #59000d70 48%, transparent 72%); }
    .hero-banner--jeera::after { background: linear-gradient(0deg, #27340f 4%, #27340ff2 25%, #27340f70 48%, transparent 72%); }
    .hero-banner--product .hero-banner__content { position: relative; }
}