/* Use the genuine bold face only for the hero title; keep storefront text unchanged. */
@font-face {
    font-family: 'Titillium Web Hero';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/inc/fonts/titillium-web/titillium-web-latin-700.woff2') format('woff2');
}

/* A light gallery around a single message, with more artwork on wider screens. */
.frame-hero {
    --gallery-spread: clamp(0px, calc(50vw - 720px), 560px);
    --copy-clearance: clamp(0px, calc(25vw - 360px), 160px);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #fff;
    color: #202735;
    font-family: inherit;
}

.frame-hero__inner {
    position: relative;
    min-height: 670px;
    margin: 0 auto;
    padding: 72px 24px 84px;
}

.frame-hero__copy {
    position: relative;
    z-index: 2;
    width: min(100%, 560px);
    margin: 0 auto;
    text-align: center;
}

.frame-hero__eyebrow {
    display: block;
    margin: 0 0 22px;
    color: #657084;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.frame-hero h1 {
    margin: 0;
    color: #202735;
    font-size: clamp(56px, 5.4vw, 78px);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -.025em;
}

.frame-hero__headline {
    display: block;
    font-family: 'Titillium Web Hero', 'Titillium Web', Tahoma, Arial, sans-serif;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.05;
}
.frame-hero__line { display: block; }
.frame-hero__product { color: #202735; }

.frame-hero__accent {
    display: inline-block;
    color: #526fa6;
    background: linear-gradient(115deg, #536ea6 5%, #008c61 46%, #db812d 78%, #ff4500 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.frame-hero__description {
    margin: 27px auto 26px;
    color: #657084;
    font-size: 17px;
    line-height: 1.6;
}

.frame-hero__cta {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    min-height: 54px;
    padding: 15px 28px;
    border: 1px solid #24385f;
    border-radius: 50px;
    background: #24385f;
    box-shadow: 0 8px 18px rgba(36, 56, 95, .13);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    transition: background-color .2s, box-shadow .2s;
}

.frame-hero__cta:hover {
    background: #354f7d;
    box-shadow: 0 10px 22px rgba(36, 56, 95, .2);
    color: #fff;
    text-decoration: none;
}

.frame-hero__secondary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
    width: fit-content;
    min-height: 44px;
    margin: 12px auto 0;
    color: #5d697d;
    font-size: 13px;
    line-height: 1.5;
}

.frame-hero__secondary:hover { color: #24385f; }

.frame-hero a:focus-visible {
    outline: 3px solid #526fa6;
    outline-offset: 5px;
}

.frame-hero__gallery {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.frame-hero__art {
    position: absolute;
    width: var(--art-width);
}

.frame-hero__art picture { display: block; }

.frame-hero__art img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 22px 18px rgba(33, 40, 50, .16));
}

.frame-hero__art--botanical {
    --art-width: 190px;
    --float-duration: 12s;
    --float-delay: -3s;
    top: 36px;
    right: calc(50% + 325px);
}

.frame-hero__art--abstract {
    --art-width: 135px;
    --float-duration: 14s;
    --float-delay: -8s;
    top: 348px;
    right: calc(50% + 505px);
}

.frame-hero__art--family {
    --art-width: 190px;
    --float-duration: 13s;
    --float-delay: -5s;
    top: 66px;
    left: calc(50% + 330px);
}

.frame-hero__art--memories {
    --art-width: 150px;
    --float-duration: 15s;
    --float-delay: -2s;
    top: 270px;
    left: calc(50% + 550px);
}

.frame-hero__art--ornate {
    --art-width: 230px;
    --float-duration: 14s;
    --float-delay: -6s;
    top: 394px;
    left: calc(50% + 280px);
}

.frame-hero__art--coast {
    --art-width: 180px;
    --float-duration: 13s;
    --float-delay: -9s;
    top: 379px;
    right: calc(50% + 295px);
}

.frame-hero__art--wildflowers, .frame-hero__art--architecture,
.frame-hero__art--woodland, .frame-hero__art--sea-study,
.frame-hero__art--leaf-shadow, .frame-hero__art--shore,
.frame-hero__art--meadow, .frame-hero__art--bay,
.frame-hero__art--blue-flow, .frame-hero__art--seed-study { display: none; }

/* Sixteen separate spaces surround the copy, with two beside the lower links. */
@media (min-width: 1360px) {
    .frame-hero__art { display: block; }
    .frame-hero__art--botanical { --art-width: 180px; top: 15px; right: calc(50% + 305px + var(--copy-clearance)); }
    .frame-hero__art--coast { --art-width: 145px; top: 290px; right: calc(50% + 290px + var(--copy-clearance)); }
    .frame-hero__art--wildflowers { --art-width: 125px; --float-duration: 16s; --float-delay: -4s; top: 35px; right: calc(50% + 535px + var(--gallery-spread)); }
    .frame-hero__art--abstract { top: 215px; right: calc(50% + 510px + var(--gallery-spread)); }
    .frame-hero__art--woodland { --art-width: 135px; --float-duration: 15s; --float-delay: -7s; top: 365px; right: calc(50% + 520px + var(--gallery-spread)); }
    .frame-hero__art--leaf-shadow { --art-width: 105px; --float-duration: 14s; --float-delay: -5s; top: 510px; right: calc(50% + 340px + var(--copy-clearance)); }
    .frame-hero__art--shore { --art-width: 130px; --float-duration: 17s; --float-delay: -8s; top: 520px; right: calc(50% + 555px + var(--gallery-spread)); }
    .frame-hero__art--bay { --art-width: 155px; --float-duration: 15s; --float-delay: -3s; top: 540px; right: calc(50% + 135px + var(--copy-clearance)); }
    .frame-hero__art--family { --art-width: 180px; top: 35px; left: calc(50% + 320px + var(--copy-clearance)); }
    .frame-hero__art--ornate { --art-width: 210px; top: 295px; left: calc(50% + 295px + var(--copy-clearance)); }
    .frame-hero__art--meadow { --art-width: 105px; --float-duration: 16s; --float-delay: -12s; top: 505px; left: calc(50% + 340px + var(--copy-clearance)); }
    .frame-hero__art--architecture { --art-width: 110px; --float-duration: 14s; --float-delay: -11s; top: 15px; left: calc(50% + 565px + var(--gallery-spread)); }
    .frame-hero__art--seed-study { --art-width: 110px; --float-duration: 15s; --float-delay: -6s; top: 180px; left: calc(50% + 560px + var(--gallery-spread)); }
    .frame-hero__art--memories { --art-width: 145px; top: 355px; left: calc(50% + 555px + var(--gallery-spread)); }
    .frame-hero__art--sea-study { --art-width: 110px; --float-duration: 12s; --float-delay: -10s; top: 500px; left: calc(50% + 565px + var(--gallery-spread)); }
    .frame-hero__art--blue-flow { --art-width: 105px; --float-duration: 13s; --float-delay: -9s; top: 522px; left: calc(50% + 175px + var(--copy-clearance)); }
}

@media (min-width: 1960px) {
    .frame-hero__art--bay { top: 310px; right: auto; left: calc(25% - 250px); }
    .frame-hero__art--blue-flow { top: 290px; left: calc(75% + 175px); }
    .frame-hero__art--leaf-shadow { right: auto; left: calc(25% - 220px); }
    .frame-hero__art--meadow { left: calc(75% + 175px); }
}

/* Extra clearance peaks around Laptop L and blends back into the wider layout. */
@media (min-width: 1360px) and (max-width: 1727px) {
    .frame-hero {
        --laptop-spacing: clamp(0px, min(calc(50vw - 680px), calc(216px - 12.5vw)), 40px);
        --copy-clearance: calc(clamp(0px, calc(25vw - 360px), 160px) + var(--laptop-spacing));
        --gallery-spread: calc(clamp(0px, calc(50vw - 720px), 560px) + 2 * var(--laptop-spacing));
    }
}

/* Wider desktops get a fuller, staggered gallery with deliberate edge crops. */
@media (min-width: 2200px) {
    .frame-hero__art--wildflowers { --art-width: 190px; top: -20px; left: -45px; right: auto; }
    .frame-hero__art--abstract { --art-width: 190px; top: 260px; left: calc(12.5% - 180px); right: auto; }
    .frame-hero__art--woodland { --art-width: 210px; top: 485px; left: -42px; right: auto; }
    .frame-hero__art--bay { --art-width: 220px; top: 25px; left: calc(25% - 295px); right: auto; }
    .frame-hero__art--leaf-shadow { --art-width: 150px; top: 270px; left: calc(25% - 205px); right: auto; }
    .frame-hero__art--shore { --art-width: 220px; top: 475px; left: calc(25% - 270px); right: auto; }
    .frame-hero__art--botanical { --art-width: 220px; top: -18px; right: calc(50% + 355px); }
    .frame-hero__art--coast { --art-width: 190px; top: 333px; right: calc(50% + 370px); }

    .frame-hero__art--family { --art-width: 210px; top: 25px; left: calc(50% + 365px); }
    .frame-hero__art--ornate { --art-width: 245px; top: 330px; left: calc(50% + 340px); }
    .frame-hero__art--seed-study { --art-width: 170px; top: -50px; left: calc(75% + 140px); }
    .frame-hero__art--blue-flow { --art-width: 175px; top: 225px; left: calc(75% + 105px); }
    .frame-hero__art--meadow { --art-width: 150px; top: 510px; left: calc(75% + 135px); }
    .frame-hero__art--architecture { --art-width: 180px; top: -24px; left: auto; right: -36px; }
    .frame-hero__art--memories { --art-width: 210px; top: 280px; left: auto; right: -30px; }
    .frame-hero__art--sea-study { --art-width: 125px; top: 458px; left: auto; right: 45px; }
}

/* The outermost frames gently disappear into the next section. */
.frame-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 55px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(transparent, #fff);
}

@media (min-width: 768px) and (max-width: 1199px) {
    .frame-hero__inner { min-height: 620px; padding-top: 62px; }
    .frame-hero__copy { width: 460px; }
    .frame-hero h1 { font-size: 61px; }
    .frame-hero__art--botanical { --art-width: 170px; right: calc(50% + 265px); top: 55px; }
    .frame-hero__art--family { --art-width: 165px; left: calc(50% + 265px); top: 70px; }
    .frame-hero__art--coast { --art-width: 145px; right: calc(50% + 250px); top: 364px; }
    .frame-hero__art--ornate { --art-width: 185px; left: calc(50% + 250px); top: 381px; }
    .frame-hero__art--abstract, .frame-hero__art--memories { display: none; }
}

/* A third frame on each laptop edge, clear of the existing upper/lower pair. */
@media (min-width: 1000px) and (max-width: 1199px) {
    .frame-hero__art--abstract { display: block; top: 305px; right: calc(50% + 455px); }
    .frame-hero__art--memories { display: block; top: 280px; left: calc(50% + 455px); }
}

/* Keep both shopping links above the fold in shorter browser windows. */
@media (min-width: 768px) and (max-height: 767px) {
    .frame-hero__inner { padding-top: clamp(16px, calc(16vh - 80px), 32px); }
    .frame-hero__eyebrow { margin-bottom: 14px; }
    .frame-hero h1 { font-size: clamp(54px, calc(10vh - 6px), 64px); }
    .frame-hero__description {
        margin-top: clamp(12px, calc(8vh - 36px), 20px);
        margin-bottom: clamp(14px, calc(6vh - 22px), 20px);
    }
    .frame-hero__secondary { margin-top: 8px; }
}

/* Mobile is its own gallery composition below the message and shopping links. */
@media (max-width: 767px) {
    .frame-hero__inner { min-height: 0; padding: 35px 20px 0; }
    .frame-hero__copy { max-width: 430px; }
    .frame-hero__eyebrow { margin-bottom: 17px; font-size: 9px; letter-spacing: 1.8px; }
    .frame-hero h1 { font-size: clamp(39px, 11.9vw, 60px); line-height: 1.03; }
    .frame-hero__description { max-width: 300px; margin: 20px auto 22px; font-size: 14px; line-height: 1.6; }
    .frame-hero__desktop-break { display: none; }
    .frame-hero__cta { min-height: 50px; padding: 13px 24px; font-size: 16px; }
    .frame-hero__secondary { margin-top: 6px; font-size: 12px; }
    .frame-hero__gallery { position: relative; height: 315px; max-width: 520px; margin: 14px auto 0; }
    .frame-hero__art img { filter: drop-shadow(0 14px 11px rgba(33, 40, 50, .17)); }
    .frame-hero__art--botanical { --art-width: 142px; top: 30px; right: calc(50% + 49px); }
    .frame-hero__art--family { --art-width: 142px; top: 7px; left: calc(50% - 54px); z-index: 2; }
    .frame-hero__art--ornate { --art-width: 168px; top: 63px; left: calc(50% + 77px); }
    /* The foreground pair overlaps the back row, with a clear gap between them. */
    .frame-hero__art--abstract { display: block; --art-width: 156px; top: 134px; right: calc(50% + 14px); z-index: 3; }
    .frame-hero__art--coast { display: block; --art-width: 132px; top: 121px; left: calc(50% + 14px); z-index: 4; }
    .frame-hero__art--memories { display: none; }
    .frame-hero::after { height: 43px; }
}

/* Motion stays inside each frame's reserved space: no horizontal travel or rotation. */
@keyframes frame-hero-drift {
    0%, 100% { transform: translateY(-5px); }
    50% { transform: translateY(5px); }
}

.frame-hero__motion-toggle {
    position: absolute;
    z-index: 4;
    right: 24px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #657084;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}
.frame-hero__motion-toggle[hidden] { display: none; }
.frame-hero__motion-toggle:hover { color: #24385f; background: #f6f8fb; }
.frame-hero__motion-toggle:focus-visible { outline: 3px solid #526fa6; outline-offset: 2px; }
.frame-hero__play-icon, .frame-hero[data-motion-paused] .frame-hero__pause-icon { display: none; }
.frame-hero[data-motion-paused] .frame-hero__play-icon { display: block; }

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
    .frame-hero__art img { animation: frame-hero-drift var(--float-duration, 14s) ease-in-out var(--float-delay, 0s) infinite; }
    .frame-hero[data-motion-paused] .frame-hero__art img { animation-play-state: paused; }
}

@media (prefers-reduced-motion: reduce) {
    .frame-hero__cta { transition: none; }
}

@media (forced-colors: active) {
    .frame-hero__accent { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}