@font-face {
    font-family: Onest;
    src: url(../../assets/fonts/onest-cyrillic.woff2) format("woff2");
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116
}

@font-face {
    font-family: Onest;
    src: url(../../assets/fonts/onest-latin.woff2) format("woff2");
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}

@font-face {
    font-family: Monomakh;
    src: url(../../assets/fonts/monomakh.woff2) format("woff2");
    font-weight: 400;
    font-display: swap
}

:root {
    --paper: #f7f5ef;
    --white: #fffefa;
    --ink: #292921;
    --muted: #77776e;
    --sage: #485d49;
    --sage-dark: #354838;
    --line: rgba(41,41,33,.14);
    --peach: #eee0d2;
    --serif: Georgia,"Times New Roman",serif;
    --sans: "Onest",Arial,sans-serif;
    --rgid-gap: 12px
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    -webkit-font-smoothing: antialiased
}

.wrap {
    width: min(1450px,calc(100% - 88px));
    margin-inline:auto}

a {
    color: inherit;
    text-decoration: none
}

.site-header {
    height: 104px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    position: relative;
    z-index: 5
}

.brand {
    display: flex;
    align-items: center;
    gap: 13px
}

.brand img {
    width: 58px;
    height: 54px;
    object-fit: contain
}

.brand-caption {
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #727267
}

.nav-links {
    display: flex;
    gap: clamp(20px,3vw,48px);
    align-items: center
}

.nav-links a {
    font-size: 12px;
    color: #5c5c53;
    transition: color .2s
}

.nav-links a:hover,.text-link:hover {
    color: var(--sage);
    background: #fdfdfdb3;
    box-shadow: 0 2px 8px #29292236;
    transform: scale(1.05)
}

.header-contact {
    box-shadow: 0 2px 20px #29292224;
    font-size: 12px;
    background: var(--white);
    border: 1px solid var(--line);
    padding: 14px 19px;
    border-radius: 999px;
    display: flex;
    gap: 18px;
    align-items: center
}

.menu-toggle {
    display: none
}

.hero {
    min-height: 670px;
    padding: 50px 5.4% 44px 7.1%;
    background: #eeece3;
    border-radius: 0 0 31px 31px;
    display: grid;
    grid-template-columns: 1fr 1.04fr;
    align-items: center;
    gap: 6%;
    position: relative;
    overflow: hidden
}

.hero:before {
    content: "";
    position: absolute;
    left: -140px;
    top: 40%;
    width: 420px;
    height: 420px;
    border: 1px solid rgba(72,93,73,.13);
    border-radius: 50%
}

.hero-copy {
    position: relative;
    z-index: 2;
    padding-bottom: 26px
}

.eyebrow {
    font-size: 10px;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--sage);
    display: flex;
    gap: 9px;
    align-items: center;
    margin: 0 0 20px
}

.eyebrow-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #a86c51;
    border-radius: 50%
}

h1,h2,h3,p {
    margin-top: 0
}

h1 {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.055em;
    line-height: .98;
    font-size: clamp(54px,6.2vw,91px);
    margin: 0 0 25px
}

h1 em,h2 em {
    font-weight: 400;
    color: var(--sage);
    font-style: italic
}

.hero-lede {
    max-width: 460px;
    color: #65665c;
    line-height: 1.75;
    font-size: 14px;
    margin-bottom: 28px
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap
}

.button {
    display: inline-flex;
    align-items: center;
    gap: 24px;
    padding: 17px 21px;
    border-radius: 999px;
    font-size: 11px;
    transition: transform .2s,background .2s
}

.button:hover {
    transform: translateY(-2px)
}

.button-dark {
    background: #292c25;
    color: #fff
}

.button-dark:hover {
    background: var(--sage-dark)
}

.text-link {
    font-size: 11px;
    border-bottom: 1px solid var(--line);
    padding: 8px 0;
    color: #57584e
}

.hero-footnote {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 48px;
    color: #78796e;
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: .05em;
    text-transform: uppercase
}

.seal {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(72,93,73,.35);
    border-radius: 50%;
    font-size: 18px;
    color: var(--sage)
}

.hero-visual {
    height: 520px;
    position: relative;
    z-index: 1
}

.hero-topline {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #727267;
    z-index: 2
}

.hero-photo {
    position: absolute;
    inset: 32px 5% 36px 0;
    border-radius: 220px 220px 28px 28px;
    background: #d9ded1;
    overflow: hidden;
    display: grid;
    place-items: center
}

.hero-photo:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg,rgba(255,255,255,.17),transparent 48%,rgba(81,96,74,.08));
    pointer-events: none
}

.photo-glow {
    position: absolute;
    width: 74%;
    height: 74%;
    background: #eff0e5;
    border-radius: 50%;
    filter: blur(1px);
    top: 15%;
    left: 13%
}

.hero-photo img {
    width: 86%;
    height: 86%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 22px 20px rgba(70,55,35,.13))
}

.photo-stamp {
    position: absolute;
    right: 8%;
    top: 15%;
    z-index: 2;
    background: #f7f5ef;
    color: var(--sage);
    border-radius: 50%;
    width: 76px;
    height: 76px;
    display: grid;
    place-content: center;
    text-align: center;
    font-family: var(--serif);
    font-size: 12px;
    line-height: 1.15;
    transform: rotate(9deg);
    box-shadow: 0 4px 14px #3331
}

.hero-card-note {
    position: absolute;
    bottom: 0;
    left: 12%;
    right: 0;
    height: 77px;
    border-radius: 19px;
    background: #fffefaf0;
    display: flex;
    align-items: center;
    padding: 0 21px;
    gap: 13px;
    box-shadow: 0 12px 36px #34362110
}

.note-mark {
    color: #a86c51;
    font-size: 22px
}

.hero-card-note b,.hero-card-note small {
    display: block
}

.hero-card-note b {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px
}

.hero-card-note small {
    font-size: 10px;
    color: var(--muted)
}

.note-arrow {
    margin-left: auto;
    background: var(--sage);
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center
}

.hero-orbit {
    position: absolute;
    border: 1px solid rgba(72,93,73,.15);
    border-radius: 50%;
    pointer-events: none
}

.orbit-one {
    width: 510px;
    height: 510px;
    right: -90px;
    top: 10px
}

.orbit-two {
    width: 450px;
    height: 450px;
    right: -54px;
    top: 40px
}

.hero-index {
    position: absolute;
    bottom: 15px;
    left: 7.1%;
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 8px;
    letter-spacing: .15em;
    color: #808177
}

.hero-index span {
    height: 1px;
    width: 33px;
    background: #a86c51
}

.facts {
    padding: 68px 7.1% 62px;
    display: grid;
    grid-template-columns: 1.05fr 1.4fr .65fr .65fr;
    gap: 6%;
    align-items: center;
    border-bottom: 1px solid var(--line);
    position: relative
}

.facts-intro .eyebrow {
    margin-bottom: 12px
}

.facts h2,.section-heading h2,.business h2,.closing h2 {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: 1.01;
    font-size: clamp(34px,4vw,56px);
    margin-bottom: 0
}

.facts-copy {
    font-size: 12px;
    line-height: 1.8;
    color: #6d6e65;
    max-width: 390px;
    margin: 0
}

.fact strong {
    display: block;
    font-family: var(--serif);
    font-size: 45px;
    font-weight: 400;
    color: var(--sage);
    line-height: 1
}

.fact span {
    display: block;
    font-size: 10px;
    line-height: 1.5;
    color: #74756c;
    margin-top: 8px
}

.fact-source {
    position: absolute;
    bottom: 22px;
    right: 7.1%;
    font-size: 8px;
    color: #929288
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 42px
}

.section-heading .eyebrow {
    margin-bottom: 18px
}

.section-heading>p {
    max-width: 320px;
    color: #72736a;
    font-size: 12px;
    line-height: 1.8;
    margin-bottom: 5px
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px
}

.product-card {
    min-width: 0
}

.product-feature,.product-wide {
    grid-column: span 2
}

.product-image {
    height: 250px;
    border-radius: 19px;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden
}

.product-feature .product-image {
    height: 330px
}

.product-wide .product-image {
    height: 238px
}

.product-image:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,#ffffff27,transparent 55%);
    pointer-events: none
}

.product-image img {
    width: 91%;
    height: 91%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    mix-blend-mode: multiply;
    transition: transform .45s
}

.product-card:hover .product-image img {
    transform: scale(1.06)
}

.tint-sage {
    background: #e3e7db
}

.tint-peach {
    background: #eee1d6
}

.tint-lilac {
    background: #e9e5e5
}

.tint-yellow {
    background: #eeead8
}

.tint-cream {
    background: #efede5
}

.product-counter {
    position: absolute;
    left: 17px;
    top: 16px;
    z-index: 2;
    font-size: 8px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #74766b
}

.product-meta {
    padding: 15px 3px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px
}

.product-meta h3 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 5px
}

.product-meta p {
    font-size: 10px;
    color: #77786f;
    margin: 0;
    line-height: 1.5
}

.product-meta>a {
    flex: none;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    transition: all .2s
}

.product-meta>a:hover {
    background: var(--sage);
    color: #fff
}

.catalog-note {
    font-size: 9px;
    color: #83847a;
    text-align: right;
    margin-top: 20px
}

.business {
    margin-top: 108px;
    background: var(--sage);
    color: #f8f6ef;
    border-radius: 27px;
    padding: 76px 7%;
    min-height: 505px;
    display: grid;
    grid-template-columns: .86fr 1.14fr;
    gap: 10%;
    position: relative;
    overflow: hidden
}

.business:before,.business:after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 50%;
    pointer-events: none
}

.business:before {
    width: 550px;
    height: 550px;
    right: -170px;
    top: -220px
}

.business:after {
    width: 400px;
    height: 400px;
    right: -100px;
    top: -140px
}

.business .eyebrow {
    color: #d2d9c9
}

.business h2 {
    font-size: clamp(43px,5vw,68px);
    position: relative;
    z-index: 1
}

.business h2 em {
    color: #e7d4bf
}

.business-copy>p:not(.eyebrow) {
    max-width: 360px;
    font-size: 12px;
    line-height: 1.8;
    color: #e1e5da;
    margin: 20px 0 23px
}

.button-light {
    background: #f6f2e8;
    color: #313c30
}

.button-light:hover {
    background: #fff
}

.service-list {
    position: relative;
    z-index: 2;
    align-self: center
}

.service {
    padding: 20px 0;
    display: grid;
    grid-template-columns: 44px 1fr 35px;
    gap: 15px;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,.22)
}

.service:first-child {
    border-top: 1px solid rgba(255,255,255,.22)
}

.service-no {
    color: #cad1c4;
    font-size: 9px;
    letter-spacing: .1em
}

.service b,.service small {
    display: block
}

.service b {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px
}

.service small {
    font-size: 10px;
    color: #d2d9cd
}

.service-arrow {
    border: 1px solid #ffffff50;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    transition: .2s
}

.service:hover .service-arrow {
    background: #fff;
    color: var(--sage)
}

.business-decoration {
    position: absolute;
    right: 4%;
    bottom: 18px;
    font-family: var(--serif);
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: .13em;
    color: #fff2
}

.business-decoration span {
    font-size: 21px
}

.packaging .section-heading {
    margin-bottom: 34px
}

.pack-grid {
    display: grid;
    grid-template-columns: 1.5fr .75fr .75fr;
    grid-template-rows: 235px 80px;
    gap: 13px
}

.pack-main {
    grid-row: span 2;
    position: relative;
    overflow: hidden;
    border-radius: 21px;
    background: #e5e3d8;
    display: grid;
    place-items: center
}

.pack-main>img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
    mix-blend-mode: multiply;
    opacity: .85
}

.pack-main:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg,#263025bb,transparent 70%)
}

.pack-label {
    position: absolute;
    z-index: 2;
    left: 25px;
    right: 23px;
    bottom: 22px;
    color: #fff;
    display: grid;
    grid-template-columns: 1fr 42px;
    align-items: end;
    gap: 15px
}

.pack-label span {
    grid-column: 1/-1;
    font-size: 8px;
    letter-spacing: .15em
}

.pack-label b {
    font-family: var(--serif);
    font-size: 25px;
    font-weight: 400;
    line-height: 1.12
}

.pack-label a {
    width: 39px;
    height: 39px;
    background: #fff;
    color: var(--ink);
    border-radius: 50%;
    display: grid;
    place-items: center
}

.pack-small {
    border-radius: 19px;
    background: #eee9df;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center
}

.pack-small img {
    width: 80%;
    height: 79%;
    object-fit: contain;
    mix-blend-mode: multiply
}

.pack-small b {
    position: absolute;
    left: 15px;
    bottom: 12px;
    font-size: 10px;
    font-weight: 500
}

.pack-small-no {
    position: absolute;
    left: 15px;
    top: 14px;
    font-size: 8px;
    letter-spacing: .12em;
    color: #77786f
}

.pack-caption {
    grid-column: 2/-1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 5px;
    color: #77786f;
    font-size: 10px;
    line-height: 1.5
}

.pack-caption a {
    font-size: 10px;
    color: var(--sage);
    border-bottom: 1px solid #485d4950;
    padding-bottom: 5px
}

.closing {
    padding-bottom: 94px;
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 8%;
    align-items: center
}

.closing-copy {
    padding: 32px 0
}

.closing-copy .eyebrow {
    margin-bottom: 17px
}

.closing h2 {
    font-size: clamp(43px,5vw,70px)
}

.closing-copy>p:not(.eyebrow) {
    max-width: 440px;
    font-size: 12px;
    color: #72736a;
    line-height: 1.8;
    margin: 20px 0 24px
}

.closing-aside {
    height: 290px;
    border-radius: 21px;
    background: #e8e5da;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
    color: var(--sage)
}

.closing-aside:before,.closing-aside:after {
    content: "";
    position: absolute;
    border: 1px solid #485d4920;
    border-radius: 50%;
    width: 290px;
    height: 290px
}

.closing-aside:after {
    width: 230px;
    height: 230px
}

.closing-star {
    font-size: 30px;
    position: relative;
    z-index: 1;
    margin-bottom: 14px
}

.closing-aside small,.closing-aside b,.aside-bottom {
    position: relative;
    z-index: 1
}

.closing-aside small {
    font-size: 8px;
    letter-spacing: .18em;
    margin-bottom: 13px
}

.closing-aside b {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.15
}

.aside-bottom {
    font-size: 7px;
    letter-spacing: .15em;
    margin-top: 17px;
    color: #85877b
}

.footer {
    padding: 36px 0 21px;
    border-top: 1px solid var(--line);
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr;
    gap: 40px
}

.footer-brand img {
    width: 54px;
    height: 49px;
    object-fit: contain
}

.footer-brand p {
    font-size: 10px;
    color: #73746b;
    line-height: 1.6;
    margin-top: 12px
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start
}

.footer-col>span {
    font-size: 8px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #929287;
    margin: 4px 0 5px
}

.footer-col a,.footer-col p {
    font-size: 11px;
    color: #55564d;
    line-height: 1.6;
    margin: 0
}

.footer-col a:hover {
    color: var(--sage)
}

.footer-bottom {
    grid-column: 1/-1;
    border-top: 1px solid var(--line);
    padding-top: 16px;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    color: #898a80;
    font-size: 8px;
    letter-spacing: .05em
}

.footer-bottom a {
    color: var(--sage)
}

@media(max-width: 950px) {
    .wrap {
        width:calc(100% - 48px)
    }

    .hero {
        padding-left: 6%;
        padding-right: 5%;
        gap: 2%;
        min-height: 590px
    }

    .hero-visual {
        height: 450px
    }

    .hero-photo {
        inset: 32px 0 36px
    }

    .hero-orbit {
        right: -140px
    }

    .facts {
        padding-inline:4%;gap: 4%;
        grid-template-columns: 1fr 1.3fr .6fr .6fr
    }

    .business {
        padding: 58px 5%;
        gap: 5%
    }

    .pack-grid {
        grid-template-rows: 205px 75px
    }
}

@media(max-width: 700px) {
    .wrap {
        width:calc(100% - 32px)
    }

    .site-header {
        height: 76px
    }

    .brand img {
        width: 47px;
        height: 44px
    }

    .brand-caption {
        font-size: 8px
    }

    .header-contact {
        margin-left: auto;
        margin-right: 10px;
        padding: 12px 14px;
        font-size: 10px
    }

    .menu-toggle {
        display: flex;
        width: 38px;
        height: 38px;
        border: 1px solid var(--line);
        background: var(--white);
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        order: 3
    }

    .menu-toggle span {
        width: 13px;
        height: 1px;
        background: var(--ink)
    }

    .nav-links {
        position: absolute;
        top: 66px;
        left: 0;
        right: 0;
        background: var(--white);
        padding: 18px;
        border-radius: 16px;
        display: none;
        box-shadow: 0 12px 28px #27271d13;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }

    .nav-links.open {
        display: flex
    }

    .hero {
        padding: 42px 7% 52px;
        grid-template-columns: 1fr;
        gap: 10px;
        min-height: 0;
        border-radius: 0 0 22px 22px
    }

    .hero-copy {
        padding: 0
    }

    .hero h1 {
        font-size: clamp(52px,14vw,74px);
        margin-bottom: 19px
    }

    .hero-lede {
        font-size: 12px
    }

    .hero-footnote {
        margin-top: 27px
    }

    .hero-visual {
        height: 390px;
        margin-top: 10px
    }

    .hero-photo {
        inset: 25px 7% 34px 0;
        border-radius: 180px 180px 22px 22px
    }

    .hero-photo img {
        width: 90%;
        height: 90%
    }

    .hero-orbit {
        width: 370px;
        height: 370px;
        right: -100px;
        top: 15px
    }

    .orbit-two {
        width: 320px;
        height: 320px;
        right: -74px;
        top: 38px
    }

    .hero-index {
        left: 7%;
        bottom: 14px;
        font-size: 7px
    }

    .facts {
        padding: 42px 5%;
        grid-template-columns: 1fr 1fr;
        gap: 23px 18px
    }

    .facts-intro {
        grid-column: 1/-1
    }

    .facts h2 {
        font-size: 38px
    }

    .facts-copy {
        grid-column: 1/-1;
        font-size: 11px
    }

    .fact strong {
        font-size: 38px
    }

    .fact-source {
        position: static;
        grid-column: 1/-1;
        margin-top: -10px
    }

    .section-space {
        padding-top: 70px
    }

    .section-heading {
        display: block;
        margin-bottom: 26px
    }

    .section-heading h2 {
        font-size: 43px
    }

    .section-heading>p {
        margin-top: 16px;
        font-size: 11px
    }

    .catalog-grid {
        grid-template-columns: 1fr 1fr;
        gap: 19px 10px
    }

    .product-feature,.product-wide {
        grid-column: span 2
    }

    .product-feature .product-image {
        height: 270px
    }

    .product-image {
        height: 175px;
        border-radius: 14px
    }

    .product-wide .product-image {
        height: 195px
    }

    .product-meta {
        padding-top: 10px;
        align-items: flex-start
    }

    .product-meta h3 {
        font-size: 11px;
        line-height: 1.4
    }

    .product-meta p {
        font-size: 9px
    }

    .product-meta>a {
        width: 28px;
        height: 28px
    }

    .catalog-note {
        text-align: left;
        font-size: 8px
    }

    .business {
        margin-top: 68px;
        padding: 42px 7%;
        grid-template-columns: 1fr;
        gap: 30px;
        border-radius: 20px
    }

    .business h2 {
        font-size: 54px
    }

    .service {
        padding: 16px 0;
        grid-template-columns: 28px 1fr 31px;
        gap: 10px
    }

    .service b {
        font-size: 12px
    }

    .service small {
        font-size: 9px;
        line-height: 1.5
    }

    .business-decoration {
        display: none
    }

    .packaging .section-heading {
        margin-bottom: 23px
    }

    .pack-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 275px 160px 62px;
        gap: 9px
    }

    .pack-main {
        grid-row: 1;
        grid-column: 1/-1
    }

    .pack-small {
        border-radius: 14px
    }

    .pack-caption {
        grid-column: 1/-1;
        font-size: 9px
    }

    .pack-label b {
        font-size: 22px
    }

    .pack-small b {
        font-size: 9px
    }

    .closing {
        padding-top: 64px;
        padding-bottom: 64px;
        grid-template-columns: 1fr;
        gap: 15px
    }

    .closing h2 {
        font-size: 54px
    }

    .closing-aside {
        height: 230px
    }

    .footer {
        grid-template-columns: 1fr 1fr;
        gap: 26px 16px
    }

    .footer-brand {
        grid-column: 1/-1
    }

    .footer-col a,.footer-col p {
        font-size: 10px
    }

    .footer-bottom {
        font-size: 7px;
        gap: 10px;
        align-items: center
    }

    .footer-bottom span:first-child {
        max-width: 45%
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    *,*:before,*:after {
        transition: none!important
    }
}

.page-section.page-section--stories {
    background: #f0f0ee
}

.stories-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 36px
}

.stories-heading .eyebrow {
    margin-bottom: 16px
}

.stories-heading h2 {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: 1.01;
    font-size: clamp(38px,4vw,58px);
    margin: 0
}

.stories-heading h2 em {
    font-weight: 400;
    color: var(--sage);
    font-style: italic
}

.stories-heading>p {
    max-width: 420px;
    color: #6d6e65;
    font-size: 13px;
    line-height: 1.8;
    margin: 0 0 4px
}

.story-carousel {
    position: relative
}

.story-stage {
    height: clamp(360px,45vw,680px);
    position: relative;
    perspective: 1400px;
    overflow: hidden;
    touch-action: pan-y;
    padding-bottom: 33px
}

.story-slide {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(78%,1060px);
    aspect-ratio: 16/9;
    margin: 0;
    overflow: hidden;
    border-radius: 24px;
    background: #e9e5dd;
    box-shadow: 0 26px 70px #272b2026;
    transform: translate(-50%,-50%) translate(var(--slide-x,0%)) scale(var(--slide-scale,1)) rotateY(var(--slide-rotate,0deg));
    opacity: 0;
    filter: grayscale(.8);
    transition: transform .7s cubic-bezier(.22,.75,.25,1),opacity .55s ease,filter .55s ease,box-shadow .55s ease;
    will-change: transform,opacity;
    backface-visibility: hidden
}

.story-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.story-slide.is-active {
    opacity: 1;
    filter: none;
    z-index: 5;
    box-shadow: 0 3px 27px 14px #272b2024
}

.story-slide.is-near {
    opacity: .72;
    filter: grayscale(.66);
    z-index: 3
}

.story-slide.is-far {
    opacity: .34;
    filter: grayscale(.9);
    z-index: 1
}

.story-controls {
    position: relative;
    z-index: 8;
    width: min(490px,88%);
    margin: -77px auto 0;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.78);
    border-radius: 999px;
    background: #f7f6f1ab;
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    box-shadow: 0 14px 15px #282b211f;
    display: flex;
    align-items: center;
    gap: 14px
}

.story-arrow {
    width: 48px;
    height: 48px;
    flex: none;
    border: 1px solid rgb(255 255 255 / 72%);
    border-radius: 50%;
    background: #ffffff8a;
    color: var(--ink);
    font: 400 22px var(--sans);
    cursor: pointer;
    transition: background .2s,color .2s,transform .2s
}

.story-arrow:hover {
    transform: scale(1.04);
    background: #ffffffe6
}

.story-arrow-next {
    background: #202b23;
    color: #fff;
    border-color: #202b23
}

.story-arrow-next:hover {
    background: var(--sage)
}

.story-control-label {
    flex: 1;
    text-align: center;
    color: #34372f;
    font-size: 12px
}

.story-count {
    font-size: 9px;
    letter-spacing: .11em;
    color: #77786f;
    white-space: nowrap
}

.story-progress {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 18px auto 0
}

.story-progress button {
    width: 15px;
    height: 2px;
    border: 0;
    border-radius: 99px;
    background: #d8d8cf;
    padding: 0;
    cursor: pointer;
    transition: width .3s,background .3s
}

.story-progress button[aria-current=true] {
    width: 34px;
    background: #a8c94f
}

.story-arrow:focus-visible,.story-progress button:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 3px
}

@media(max-width: 700px) {
    .stories-heading {
        display:block;
        margin-bottom: 24px
    }

    .stories-heading h2 {
        font-size: 43px
    }

    .stories-heading>p {
        margin-top: 14px;
        font-size: 11px
    }

    .story-stage {
        height: clamp(240px,64vw,370px)
    }

    .story-slide {
        width: 99%;
        border-radius: 16px
    }

    .story-controls {
        width: min(430px,94%);
        height: 62px;
        margin-top: -30px;
        padding: 6px 7px;
        gap: 6px
    }

    .story-arrow {
        width: 46px;
        height: 46px;
        font-size: 20px
    }

    .story-control-label {
        font-size: 10px
    }

    .story-count {
        font-size: 8px
    }

    .story-progress {
        margin-top: 14px
    }
}

@media(prefers-reduced-motion:reduce) {
    .story-slide,.story-arrow,.story-progress button {
        transition: none
    }
}

.story-slide-copy {
    position: absolute;
    z-index: 2;
    left: 5.2%;
    top: 50%;
    transform: translateY(-50%);
    width: 35%;
    color: #172b25;
    text-align: left;
    pointer-events: none
}

.story-slide-eyebrow {
    font-size: clamp(7px,.65vw,10px);
    letter-spacing: .16em;
    text-transform: uppercase;
    margin: 0 0 18px
}

.story-slide-copy h3 {
    font-family: var(--serif);
    font-size: clamp(34px,4.25vw,60px);
    font-weight: 700;
    letter-spacing: -.055em;
    line-height: .9;
    text-transform: uppercase;
    margin: 0 0 19px
}

.story-slide-copy h3 em {
    font-style: normal;
    color: #779434
}

.story-slide-description {
    max-width: 310px;
    font-size: clamp(10px,1vw,15px);
    line-height: 1.55;
    margin: 0 0 22px;
    color: #283a33
}

.story-slide-link {
    display: inline-block;
    border-bottom: 1px solid rgba(23,43,37,.6);
    padding: 5px 0 7px;
    font-size: clamp(9px,.8vw,12px);
    letter-spacing: .12em;
    text-transform: uppercase;
    pointer-events: auto
}

.story-slide-link .icon-arrow {
    width: 14px;
    height: 14px;
    margin-left: 8px
}

@media(max-width: 700px) {
    .story-slide-copy {
        left:5%;
        width: 42%
    }

    .story-slide-eyebrow {
        font-size: 6px;
        letter-spacing: .12em;
        margin-bottom: 10px
    }

    .story-slide-copy h3 {
        font-size: clamp(23px,7vw,36px);
        margin-bottom: 10px
    }

    .story-slide-description {
        font-size: clamp(8px,2.2vw,11px);
        line-height: 1.4;
        margin-bottom: 11px
    }

    .story-slide-link {
        font-size: 7px;
        letter-spacing: .08em;
        padding-bottom: 4px
    }
}

:root {
    --content-width: 1450px;
    --content-gutter: clamp(16px, 3vw, 44px);
    --paper: #f7f5f0;
    --hero-surface: #eeece4;
    --white: #fffefa;
    --ink: #292922;
    --sage: #486a46;
    --sage-dark: #354838;
    --hero-visual: #dde1d6;
    --lime: #a8c94f;
    --terracotta: #b4775e;
    --heading: "Monomakh", serif;
    --sans: "Onest", Arial, sans-serif
}

body {
    font-family: Onest,Arial,sans-serif
}

.svg-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden
}

.icon-arrow {
    display: inline-block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: middle;
    transform: rotate(-90deg);
    transition: transform .2s ease
}

.story-arrow .icon-arrow {
    width: 20px;
    height: 20px
}

.story-arrow-next .icon-arrow {
    transform: none
}

.story-arrow-prev .icon-arrow {
    transform: rotate(180deg)
}

a:hover>.icon-arrow,a:hover .icon-arrow {
    transform: rotate(-90deg) translate(1px,1px)
}

.story-arrow-next:hover .icon-arrow {
    transform: translate(1px)
}

.story-arrow-prev:hover .icon-arrow {
    transform: rotate(180deg) translate(1px)
}

.text-link,.pack-caption a {
    display: inline-flex;
    align-items: center;
    gap: 8px
}

h1,h2,h3,.stories-heading h2,.facts h2,.section-heading h2,.business h2,.closing h2 {
    font-family: var(--heading)
}

.product-meta h3 {
    font-family: var(--sans);
    font-weight: 700;
    letter-spacing: -.02em
}

.pack-label b,.pack-small b {
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: -.02em
}

.pack-main>img {
    object-fit: contain;
    padding: 18px
}

.hero {
    background: var(--hero-surface)
}

.hero-photo {
    background: var(--hero-visual)
}

.hero h1 {
    font-size: clamp(48px,5.8vw,82px);
    line-height: .8;
    letter-spacing: -.065em
}

.hero h1 em {
    color: var(--sage)
}

.eyebrow-dot {
    background: var(--terracotta)
}

.button-dark {
    background: var(--ink)
}

.story-carousel {
    --story-duration: .78s;
    --story-easing: cubic-bezier(.22, .75, .25, 1);
    padding-bottom: 26px
}

.story-carousel .story-stage {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none
}

.story-carousel .story-stage:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 4px
}

.story-carousel .story-slide {
    transform: translate(-50%,-50%) translate(calc(var(--slide-x, 0%) + var(--drag-x, 0px))) scale(var(--slide-scale, 1)) rotateY(var(--slide-rotate, 0deg));
    transition: transform var(--story-duration) var(--story-easing),opacity var(--story-duration) ease,filter var(--story-duration) ease,box-shadow var(--story-duration) ease
}

.story-carousel .story-slide img {
    pointer-events: none;
    -webkit-user-drag: none
}

.story-carousel .story-slide--with-copy {
    isolation: isolate
}

.story-carousel .story-slide--with-copy:after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0 auto 0 0;
    width: 54%;
    pointer-events: none;
    background: linear-gradient(90deg,#f7f5f0,#fdfdfde3 34%,#ffffff8f 70%,#f7f7f700)
}

.story-carousel.is-dragging .story-stage {
    cursor: grabbing
}

.story-carousel.is-dragging .story-slide {
    transition: none
}

.story-controls .story-progress {
    position: absolute;
    bottom: 7px;
    left: 50%;
    width: max-content;
    margin: 0;
    transform: translate(-50%)
}

@media(max-width: 700px) {
    .story-controls .story-progress {
        bottom:5px
    }
}

@media(prefers-reduced-motion:reduce) {
    .story-carousel .story-slide {
        transition: none
    }
}

.header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px
}

.header-catalog {
    box-shadow: 0 2px 20px #29292224;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid var(--sage);
    border-radius: 999px;
    background: var(--sage);
    color: var(--white);
    font-size: 12px;
    white-space: nowrap;
    transition: background .2s
}

.header-catalog:hover {
    background: var(--sage-dark)
}

.header-catalog:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 3px
}

.site-header {
    width: 100%;
    margin-inline:0;padding-inline:max(44px,calc((100vw - 1450px)/2));height: 112px;
    gap: 15px;
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid rgb(255 255 255 / 62%);
    background: #f7f5f0b8;
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
    transition: height .28s cubic-bezier(.2,.7,.2,1),background-color .28s ease,box-shadow .28s ease
}

.site-header.is-scrolled {
    height: 70px;
    background: #f7f5f0d1;
    box-shadow: 0 8px 28px #2929220f
}

.brand {
    flex: 0 0 auto
}

.brand img {
    width: 101px;
    height: 93px;
    object-fit: contain;
    transition: width .28s ease,height .28s ease
}

.site-header.is-scrolled .brand img {
    width: 78px;
    height: 72px
}

.nav-links {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 96%;
    left: 2%;
    justify-content: center;
    gap: clamp(9px,1.1vw,22px);
    padding: 8px 9px 8px 20px;
    border-radius: 999px
}

.nav-links a,.nav-placeholder {
    position: relative;
    flex: 0 0 auto;
    font-size: 11px;
    white-space: nowrap;
    color: #44473e
}

.nav-links a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 22px 8px 16px;
    border-radius: 999px;
    background: #fdfdfd99;
    box-shadow: 0 2px 18px #29292224;
    transition: .3s
}

.nav-links a svg {
    display: block;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    fill: none;
    stroke: var(--sage);
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round
}

.nav-links a.is-current {
    font-weight: 700
}

.nav-links a.is-current:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -9px;
    left: 0;
    height: 2px;
    background: var(--sage)
}

.nav-placeholder {
    cursor: default
}

.header-search {
    position: relative;
    flex: 1 1 160px;
    max-width: 230px;
    min-width: 130px;
    height: 44px;
    display: flex;
    align-items: center;
    border-radius: 999px;
    background: #f0efe9
}

.header-search button {
    flex: 0 0 43px;
    height: 43px;
    padding: 12px;
    border: 0;
    background: none;
    color: #3c453e;
    cursor: pointer
}

.header-search svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round
}

.header-search input {
    width: 100%;
    min-width: 0;
    padding: 0 12px 0 0;
    border: 0;
    outline: 0;
    background: none;
    color: var(--ink);
    font: 11px Onest,sans-serif
}

.header-search input::placeholder {
    color: #979991
}

.header-search-status {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 10;
    width: max-content;
    max-width: 280px;
    color: var(--ink);
    font-size: 11px
}

.header-search-status:not(:empty) {
    padding: 9px 12px;
    border-radius: 10px;
    background: var(--white);
    box-shadow: 0 8px 25px #2929221a
}

.header-phone {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: var(--ink)
}

.header-phone svg {
    width: 17px;
    height: 17px;
    fill: var(--sage-dark)
}

.header-phone strong,.header-phone small {
    display: block
}

.header-phone strong {
    font-size: 12px;
    font-weight: 700
}

.header-phone small {
    margin-top: 3px;
    color: #888a7e;
    font-size: 9px
}

.header-language,.header-bag {
    flex: 0 0 auto;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background: var(--white);
    color: var(--ink)
}

.header-language {
    min-width: 59px;
    gap: 8px;
    padding: 0 12px;
    font-size: 11px;
    font-weight: 700
}

.header-language span {
    font-size: 16px;
    line-height: 1
}

.header-bag {
    width: 46px
}

.header-bag svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

@media(max-width: 1180px) {
    .site-header {
        height:96px
    }

    .brand img {
        width: 80px;
        height: 74px
    }

    .site-header.is-scrolled .brand img {
        width: 66px;
        height: 61px
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 85px;
        right: 0;
        /* left: 0; */
        z-index: 10;
        padding: 24px 30px;
        border: 1px solid rgb(255 255 255 / 70%);
        border-radius: 24px;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        background: #fdfdfdf7;
        box-shadow: 0 20px 50px #2929221f;
        -webkit-backdrop-filter: blur(20px) saturate(1.15);
        backdrop-filter: blur(20px) saturate(1.15)
    }

    .nav-links.open {
        display: flex
    }

    .nav-links a,.nav-placeholder {
        display: flex;
        align-items: center;
        gap: 16px;
        min-height: 52px;
        font-size: 16px;
    }

    .nav-links a svg {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        padding: 6px;
        border: 1px solid rgb(76 92 75 / 24%);
        border-radius: 50%;
        color: var(--sage);
        fill: none;
        stroke: currentColor;
        stroke-width: 1.45;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .nav-links a:hover svg {
        background: #4c5c4b14
    }

    .nav-links a.is-current:after {
        display: none
    }

    .header-search {
        max-width: none;
        min-height: 44px;
        flex: none
    }

    .header-phone {
        margin-left: auto
    }

    .menu-toggle {
        display: flex;
        width: 62px;
        height: 46px;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        order: 0;
        border: 0;
        border-radius: 99px;
        background: var(--white)
    }

    .menu-toggle span {
        width: 38px;
        height: 1.5px;
        background: var(--ink);
        transition: transform .26s cubic-bezier(.2,.7,.2,1),width .26s ease
    }

    .menu-toggle[aria-expanded=true] span:first-child {
        transform: translateY(3.25px) rotate(45deg)
    }

    .menu-toggle[aria-expanded=true] span:last-child {
        transform: translateY(-3.25px) rotate(-45deg)
    }
}

@media(max-width: 950px) {
    .site-header {
        padding-inline:24px
    }
}

@media(max-width: 700px) {
    .site-header {
        padding-inline:16px;
        height: auto;
        min-height: 78px;
        flex-wrap: wrap;
        gap: 8px;
        padding-block:10px}

    .site-header.is-scrolled {
        height: auto;
        min-height: 70px;
        gap: 4px;
        padding-block:4px}

    .brand {
        margin-right: auto
    }

    .header-actions {
        flex-basis: 100%
    }

    .header-actions>a {
        flex: 1;
        justify-content: center;
        margin: 0
    }

    .header-catalog {
        padding: 12px 14px;
        font-size: 11px
    }

    .brand img {
        width: 58px;
        height: 55px
    }

    .site-header.is-scrolled .brand img {
        width: 49px;
        height: 46px
    }

    .header-phone small {
        display: none
    }

    .header-phone strong {
        font-size: 10px
    }

    .header-phone svg {
        width: 14px;
        height: 14px
    }

    .header-language {
        min-width: 46px;
        height: 40px;
        padding: 0 8px
    }

    .header-bag,.menu-toggle {
        width: 62px;
        height: 40px
    }

    .nav-links {
        top: 100%;
        padding: 18px 20px;
        border-radius: 20px
    }

    .nav-links a,.nav-placeholder {
        min-height: 48px;
        font-size: 17px
    }

    .nav-links a svg {
        width: 32px;
        height: 32px;
        flex-basis: 32px
    }

    .hero h1 {
        font-size: clamp(40px,11vw,56px)
    }
}

@media(max-width: 480px) {
    .header-phone {
        display:none
    }

    .header-language {
        margin-left: auto
    }
}

.container,.wrap {
    width: min(var(--content-width),calc(100% - var(--content-gutter) - var(--content-gutter)));
    margin-inline:auto}

.page-section {
    position: relative;
    isolation: isolate;
    background-color: var(--section-bg, transparent);
    padding: 50px 0
}

.section-background {
    position: absolute;
    z-index: -1;
    inset: -10% 0;
    background-image: var(--section-image, none);
    background-position: center;
    background-size: cover;
    transform: translate3d(0,var(--parallax-offset, 0px),0);
    pointer-events: none
}

.page-section>.container,.page-section>section,.page-section>footer {
    position: relative;
    z-index: 1
}

.page-section.page-section--catalog {
    background: #fff
}

.page-section--hero {
    --section-bg: var(--hero-surface);
    padding-top: 0
}

.page-section--facts,.page-section--stories,.page-section--catalog,.page-section--packaging,.page-section--closing,.page-section--footer {
    --section-bg: var(--paper)
}

.page-section--business {
    --section-bg: #486a46;
    background-image: radial-gradient(ellipse 58% 82% at 12% 8%,rgb(151 180 122 / 19%),transparent 76%),radial-gradient(ellipse 48% 74% at 91% 88%,rgb(24 48 32 / 20%),transparent 76%),linear-gradient(122deg,#4b704c,#486a46 48%,#456747)
}

.page-section[data-parallax] .section-background {
    will-change: transform
}

.page-section--facts {
    border-bottom: 1px solid var(--line)
}

.page-section--footer {
    border-top: 1px solid var(--line)
}

.hero {
    background: transparent;
    border-radius: 0
}

.page-section--hero {
    padding-block:0}

.hero.hero--cafe {
    width: min(1800px,calc(100% - 88px));
    min-height: 0;
    padding: 30px 0 32px;
    display: block;
    overflow: visible;
    background: transparent;
    border-radius: 0
}

.hero--cafe:before {
    display: none
}

.hero-section-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 14px
}

.hero--cafe .eyebrow {
    margin: 0
}

.hero--cafe .hero-topline {
    position: static;
    display: flex;
    align-items: center;
    gap: clamp(24px,4vw,72px);
    color: #727267;
    font-size: 9px;
    letter-spacing: .13em
}

.hero-panel {
    position: relative;
    isolation: isolate;
    min-height: clamp(480px,36vw,650px);
    border-radius: 24px
}

.hero-photo--cafe {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: inherit;
    background: #e7e0d2;
    overflow: hidden
}

.hero-photo--cafe:before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg,rgb(247 245 239 / 96%) 0%,rgb(247 245 239 / 91%) 24%,rgb(247 245 239 / 69%) 38%,rgb(247 245 239 / 16%) 61%,transparent 75%);
    pointer-events: none
}

.hero-photo--cafe:after {
    z-index: 1;
    background: linear-gradient(180deg,rgb(41 41 33 / 3%),transparent 34%,rgb(41 41 33 / 7%))
}

.hero-photo--cafe img {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 66% center;
    filter: none
}

.hero--cafe .hero-copy {
    position: absolute;
    z-index: 2;
    inset: 0 auto 0 0;
    width: 58%;
    padding: clamp(32px,4.5vw,82px);
    display: flex;
    flex-direction: column;
    justify-content: center
}

.hero--cafe h1 {
    max-width: 760px;
    margin-bottom: 20px;
    font-size: clamp(46px,4.8vw,80px);
    line-height: .88;
    letter-spacing: -.065em
}

.hero--cafe .hero-lede {
    max-width: 465px;
    margin-bottom: 22px;
    color: #56574f;
    font-size: clamp(12px,1vw,15px);
    line-height: 1.65
}

.hero--cafe .hero-actions {
    gap: 22px
}

.hero--cafe .button {
    gap: 18px
}

.hero-bottom {
    display: grid;
    grid-template-columns: minmax(250px,330px) minmax(0,1fr);
    align-items: center;
    gap: 30px;
    margin-top: 18px
}

.hero--cafe .hero-footnote {
    margin: 0;
    font-size: 9px
}

.hero--cafe .hero-index {
    position: static;
    left: auto;
    bottom: auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 8px
}

.hero--cafe .hero-index:before {
    content: "";
    flex: 1;
    height: 1px;
    margin-right: 12px;
    background: var(--line)
}

@media(max-width: 950px) {
    .hero.hero--cafe {
        width:calc(100% - 48px)
    }

    .hero-panel {
        min-height: 460px
    }

    .hero--cafe .hero-copy {
        width: 64%;
        padding: 34px
    }

    .hero--cafe h1 {
        font-size: clamp(42px,5.5vw,58px)
    }

    .hero--cafe .hero-actions {
        gap: 12px 18px
    }
}

@media(max-width: 700px) {
    .hero.hero--cafe {
        width:calc(100% - 32px);
        padding: 24px 0 28px
    }

    .hero-section-top {
        margin-bottom: 12px
    }

    .hero--cafe .eyebrow {
        font-size: 9px
    }

    .hero--cafe .hero-topline {
        gap: 0;
        font-size: 8px
    }

    .hero--cafe .hero-topline>span:first-child {
        display: none
    }

    .hero-panel {
        min-height: 0;
        border-radius: 18px
    }

    .hero-photo--cafe {
        position: relative;
        inset: auto;
        height: clamp(220px,61vw,280px);
        border-radius: inherit
    }

    .hero-photo--cafe img {
        object-position: 72% center
    }

    .hero-photo--cafe:before {
        background: linear-gradient(90deg,rgb(247 245 239 / 8%),transparent 65%)
    }

    .hero--cafe .hero-copy {
        position: relative;
        inset: auto;
        width: auto;
        margin: -24px 12px 0;
        padding: 22px 20px 20px;
        border: 1px solid rgb(255 255 255 / 75%);
        border-radius: 18px;
        background: #f7f5eff5;
        box-shadow: 0 12px 28px #2929211a;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px)
    }

    .hero--cafe h1 {
        margin-bottom: 13px;
        font-size: clamp(37px,10vw,48px);
        line-height: .93;
        letter-spacing: -.06em
    }

    .hero--cafe .hero-lede {
        margin-bottom: 16px;
        font-size: 12px;
        line-height: 1.55
    }

    .hero--cafe .hero-actions {
        gap: 10px 16px
    }

    .hero--cafe .button {
        width: 100%;
        min-height: 48px;
        justify-content: space-between;
        padding: 13px 16px;
        font-size: 11px
    }

    .hero--cafe .text-link {
        margin-left: 3px
    }

    .hero-bottom {
        grid-template-columns: 1fr;
        gap: 14px;
        margin: 18px 8px 0
    }

    .hero--cafe .hero-footnote {
        font-size: 8px
    }

    .hero--cafe .hero-index {
        gap: 8px;
        font-size: 7px;
        letter-spacing: .1em
    }

    .hero--cafe .hero-index:before {
        margin-right: 4px
    }
}

.facts {
    border-bottom: 0
}

.business {
    margin-top: 0;
    border-radius: 0;
    background: transparent
}

.footer {
    border-top: 0
}

@media(prefers-reduced-motion:reduce) {
    .section-background {
        transform: none!important
    }
}

.story-carousel .story-slide--transition {
    isolation: isolate;
    background: radial-gradient(ellipse at 78% 46%,rgb(220 227 212 / 78%),transparent 46%),linear-gradient(135deg,#f7f5f0 8%,#e9ece3)
}

.story-carousel .story-slide--transition:before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0 auto 0 0;
    width: 58%;
    pointer-events: none;
    background: linear-gradient(90deg,#f7f5f0f0,#f7f5f0c7 58%,#f7f5f000)
}

.story-carousel .story-transition-art {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .88;
    pointer-events: none
}

.story-carousel .story-transition-copy {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 7%;
    width: 49%;
    max-width: 560px;
    transform: translateY(-50%);
    color: var(--ink);
    text-align: left;
    pointer-events: none
}

.story-carousel .story-transition-copy .story-slide-eyebrow {
    margin-bottom: 18px
}

.story-carousel .story-transition-copy h3 {
    margin: 0 0 18px;
    font-family: var(--heading);
    font-size: clamp(38px,4.6vw,66px);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: .94;
    text-transform: none
}

.story-carousel .story-transition-copy h3 em {
    color: var(--sage);
    font-style: normal
}

.story-carousel .story-transition-more {
    margin: 0;
    color: var(--sage);
    font-size: clamp(13px,1.25vw,18px);
    font-weight: 600;
    letter-spacing: .02em
}

.story-carousel .story-progress {
    gap: 6px
}

.story-carousel .story-progress button {
    width: 12px
}

.story-carousel .story-progress button[aria-current=true] {
    width: 26px
}

@media(max-width: 700px) {
    .story-carousel .story-slide--transition:before {
        width:66%
    }

    .story-carousel .story-transition-art {
        opacity: .78
    }

    .story-carousel .story-transition-copy {
        left: 6%;
        width: 58%
    }

    .story-carousel .story-transition-copy .story-slide-eyebrow {
        margin-bottom: 10px;
        font-size: 6px
    }

    .story-carousel .story-transition-copy h3 {
        font-size: clamp(28px,7.8vw,42px);
        margin-bottom: 10px
    }

    .story-carousel .story-transition-more {
        font-size: clamp(10px,2.7vw,13px)
    }
}

.page-section--global-reach {
    --section-bg: #f1f0e8;
    padding-block:clamp(44px,5vw,74px);overflow: hidden
}

.page-section--global-reach:before,.page-section--global-reach:after {
    position: absolute;
    z-index: 0;
    width: min(50vw,700px);
    aspect-ratio: 1;
    border: 1px solid rgb(76 92 75 / 9%);
    border-radius: 50%;
    content: "";
    pointer-events: none
}

.page-section--global-reach:before {
    top: -58%;
    right: -7%
}

.page-section--global-reach:after {
    top: -52%;
    right: -3%;
    width: min(42vw,590px)
}

.global-reach {
    display: grid;
    gap: clamp(26px,3vw,42px)
}

.global-reach__top {
    display: grid;
    grid-template-columns: minmax(0,1.05fr) minmax(0,1.2fr);
    align-items: center;
    gap: clamp(26px,4vw,58px)
}

.global-reach__copy {
    max-width: 620px
}

.global-reach__copy .eyebrow {
    margin: 0 0 15px;
    color: var(--sage);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase
}

.global-reach__copy h2 {
    margin: 0 0 18px;
    font-family: var(--heading, "Monomakh", Georgia, serif);
    font-size: clamp(40px,3.8vw,58px);
    font-weight: 500;
    letter-spacing: -.045em;
    line-height: 1.02
}

.global-reach__copy h2 em {
    color: var(--sage);
    font-style: normal
}

.global-reach__copy>p:last-child {
    max-width: 480px;
    margin: 0;
    color: var(--muted, #77776e);
    font-size: clamp(14px,1.1vw,17px);
    line-height: 1.65
}

.global-reach__map-wrap {
    min-width: 0;
    padding: 0
}

.global-reach__map {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible
}

.global-reach__orbits ellipse {
    stroke: #4c5c4b1f;
    stroke-width: 1;
    stroke-dasharray: 2 6;
    vector-effect: non-scaling-stroke
}

.global-reach__routes path {
    stroke: #75856b;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke
}

.global-reach__marker {
    --pulse-delay: 0s
}

.global-reach__marker:nth-child(2) {
    --pulse-delay: .32s
}

.global-reach__marker:nth-child(3) {
    --pulse-delay: .64s
}

.global-reach__marker:nth-child(4) {
    --pulse-delay: .96s
}

.global-reach__marker:nth-child(5) {
    --pulse-delay: 1.28s
}

.global-reach__marker:nth-child(6) {
    --pulse-delay: 1.6s
}

.global-reach__marker:nth-child(7) {
    --pulse-delay: 1.92s
}

.global-reach__marker:nth-child(8) {
    --pulse-delay: 2.24s
}

.global-reach__pulse {
    fill: none;
    stroke: #63765e;
    stroke-width: 1.35;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: global-reach-wave 2.8s ease-out var(--pulse-delay) infinite;
    vector-effect: non-scaling-stroke
}

.global-reach__dot {
    fill: var(--sage-dark, #354838);
    stroke: #b2c791;
    stroke-width: 2.6px;
    transform-box: fill-box;
    transform-origin: center;
    animation: global-reach-blink 2.8s ease-in-out var(--pulse-delay) infinite;
    vector-effect: non-scaling-stroke
}

@keyframes global-reach-wave {
    0% {
        opacity: .46;
        transform: scale(.55)
    }

    76%,to {
        opacity: 0;
        transform: scale(3.2)
    }
}

@keyframes global-reach-blink {
    0%,to {
        opacity: .66;
        transform: scale(.84)
    }

    8% {
        opacity: 1;
        transform: scale(1.18)
    }

    20% {
        opacity: .8;
        transform: scale(1)
    }
}

.global-reach__map-labels {
    fill: var(--sage-dark, #354838);
    font-family: var(--sans, Arial, sans-serif);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px
}

.global-reach__countries {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none
}

.global-reach__countries li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px;
    border-radius: 10px;
    background: #fffefaa8;
    box-shadow: 0 2px 20px #2929221a;
    color: var(--sage-dark, #354838);
    font-size: 11px;
    font-weight: 600
}

.country-flag {
    display: block;
    width: 23px;
    height: 15px;
    flex: 0 0 23px;
    overflow: hidden;
    border: 1px solid rgb(41 41 33 / 10%);
    border-radius: 3px;
    box-shadow: 0 1px 2px #29292114
}

.global-reach__stats {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    padding-top: clamp(20px,2.3vw,32px);
    border-top: 1px solid rgb(76 92 75 / 19%)
}

.global-reach__stat {
    display: flex;
    align-items: center;
    gap: clamp(10px,1.5vw,20px);
    min-height: 72px;
    padding-inline:clamp(12px,2vw,28px);border-left: 1px solid rgb(76 92 75 / 15%)
}

.global-reach__stat:first-child {
    padding-left: 0;
    border-left: 0
}

.global-reach__stat strong {
    color: var(--sage);
    font-family: Georgia,Times New Roman,serif;
    font-size: clamp(40px,3.8vw,58px);
    font-weight: 400;
    letter-spacing: -.065em;
    line-height: 1
}

.global-reach__stat span {
    color: var(--muted, #77776e);
    font-size: clamp(11px,.95vw,14px);
    line-height: 1.5
}

.global-reach__source {
    justify-self: end;
    margin-top: -30px;
    color: #8a8a80;
    font-size: 10px
}

.global-reach__quality-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px 28px;
    padding-top: 12px;
    border-top: 1px solid rgb(76 92 75 / 12%)
}

.global-reach__qualities {
    display: flex;
    flex-wrap: wrap;
    gap: 10px clamp(18px,3vw,42px);
    margin: 0;
    padding: 0;
    list-style: none
}

.global-reach__qualities li {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--muted, #77776e);
    font-size: 11px;
    line-height: 1.5
}

.global-reach__qualities li:before {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: #98a58a;
    content: ""
}

.global-reach__quality-row .global-reach__source {
    flex: 0 0 auto;
    margin: 0
}

@media(max-width: 900px) {
    .global-reach__top {
        grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);
        gap: 20px
    }

    .global-reach__stat {
        gap: 8px;
        padding-inline:12px}

    .global-reach__stat strong {
        font-size: clamp(34px,5vw,46px)
    }
}

@media(max-width: 650px) {
    .page-section--global-reach {
        padding-block:52px 46px
    }

    .page-section--global-reach:before {
        top: -10%;
        right: -46%;
        width: 100vw
    }

    .page-section--global-reach:after {
        display: none
    }

    .global-reach {
        gap: 26px
    }

    .global-reach__top {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .global-reach__copy h2 {
        margin-bottom: 18px;
        font-size: clamp(42px,11vw,58px)
    }

    .global-reach__copy>p:last-child {
        font-size: 14px;
        line-height: 1.65
    }

    .global-reach__map-wrap {
        margin-inline:-5px;padding-top: 0
    }

    .global-reach__map-labels {
        font-size: 15px
    }

    .global-reach__countries {
        gap: 7px;
        margin-top: 10px
    }

    .global-reach__countries li {
        padding: 7px 10px;
        font-size: 11px
    }

    .global-reach__stats {
        grid-template-columns: repeat(2,minmax(0,1fr));
        row-gap: 22px;
        padding-top: 20px
    }

    .global-reach__stat {
        min-height: 0;
        padding: 0 12px
    }

    .global-reach__stat:nth-child(odd) {
        padding-left: 0;
        border-left: 0
    }

    .global-reach__stat strong {
        font-size: 52px
    }

    .global-reach__source {
        justify-self: start;
        margin-top: -18px
    }

    .global-reach__quality-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
        padding-top: 16px
    }

    .global-reach__qualities {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 14px
    }

    .global-reach__qualities li {
        font-size: 10px
    }
}

@media(prefers-reduced-motion:reduce) {
    .global-reach__pulse {
        animation: none;
        opacity: .3;
        transform: scale(1.8)
    }

    .global-reach__dot {
        animation: none
    }
}

.page-section--footer {
    --section-bg: #f4f2eb;
    overflow: hidden;
    border-top: 0;
    background: radial-gradient(ellipse at 83% 0%,rgb(207 216 196 / 58%),transparent 34%),radial-gradient(ellipse at 4% 100%,rgb(234 217 199 / 48%),transparent 36%),linear-gradient(125deg,#f8f6f0,#f0efe7 52%,#f7f4ec);
    color: #292922
}

.page-section--footer:before,.page-section--footer:after {
    position: absolute;
    z-index: 0;
    top: -145%;
    right: -5%;
    width: min(60vw,860px);
    aspect-ratio: 1;
    border: 1px solid rgb(76 92 75 / 10%);
    border-radius: 50%;
    content: "";
    pointer-events: none
}

.page-section--footer:after {
    top: -128%;
    right: -2%;
    width: min(48vw,690px)
}

.footer {
    display: grid;
    grid-template-columns: minmax(230px,1.25fr) repeat(3,minmax(150px,.8fr));
    align-items: start;
    gap: 44px clamp(24px,4vw,64px);
    padding: clamp(48px,5.2vw,76px) 0 22px;
    border-top: 0;
    color: inherit
}

.footer-brand img {
    width: 72px;
    height: 65px;
    object-fit: contain;
    filter: none;
    opacity: 1
}

.footer-brand p {
    margin: 18px 0 0;
    color: #292922;
    font-family: var(--heading, "Monomakh", Georgia, serif);
    font-size: clamp(22px,2vw,30px);
    line-height: 1.14
}

.footer-label,.footer-col>span {
    display: block;
    margin: 4px 0 17px;
    color: #778073;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .16em;
    line-height: 1.4;
    text-transform: uppercase
}

.footer-col {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 11px
}

.footer-col>span {
    margin-bottom: 9px
}

.footer-col a,.footer-col p {
    margin: 0;
    color: #42473f;
    font-size: 13px;
    line-height: 1.65;
    overflow-wrap: anywhere
}

.footer-col a {
    transition: color .2s ease,opacity .2s ease
}

.footer-col a:hover {
    color: var(--sage, #485d49)
}

.footer-col .footer-phone {
    font-size: clamp(17px,1.4vw,21px);
    font-weight: 600;
    letter-spacing: -.02em;
    white-space: nowrap
}

.footer-col .footer-note {
    max-width: 220px;
    margin-top: 3px;
    color: #77776e;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.5;
    text-transform: none
}

.footer-social {
    margin-top: 27px
}

.footer-social .footer-label {
    margin: 0 0 12px
}

.footer-social__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.footer-social__links a {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border: 1px solid rgb(76 92 75 / 22%);
    border-radius: 50%;
    color: #485d49;
    transition: color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease
}

.footer-social__links a:hover {
    transform: translateY(-2px);
    border-color: #485d49;
    background: linear-gradient(145deg,#e3e8d9,#f7f5ef);
    color: #354838
}

.footer-social__links a:focus-visible {
    outline: 2px solid #e7c0a8;
    outline-offset: 3px
}

.footer-social__links svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round
}

.footer-social__links .social-icon__filled,.footer-social__links .social-icon__dot {
    fill: currentColor;
    stroke: none
}

.footer-bottom {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid rgb(76 92 75 / 18%);
    color: #77776e;
    font-size: 10px;
    letter-spacing: .04em
}

.footer-bottom a {
    color: var(--sage, #485d49)
}

@media(max-width: 950px) {
    .footer {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap: 34px 28px
    }

    .footer-brand {
        grid-column: 1 / -1
    }

    .footer-social {
        margin-top: 20px
    }
}

@media(max-width: 600px) {
    .page-section--footer:before,.page-section--footer:after {
        display:none
    }

    .footer {
        grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
        gap: 30px 20px;
        padding-block:34px 18px}

    .footer-brand,.footer-bottom {
        grid-column: 1
    }

    .footer-brand {
        grid-column: 1 / -1
    }

    .footer-brand img {
        display: none
    }

    .footer-brand p {
        max-width: 21ch;
        margin: 0;
        font-size: 25px;
        line-height: 1.14
    }

    .footer-social {
        margin-top: 24px
    }

    .footer-social .footer-label {
        margin-bottom: 12px
    }

    .footer-social__links {
        gap: 8px
    }

    .footer-social__links a {
        width: 38px;
        height: 38px
    }

    .footer-col--contact {
        grid-column: 1;
        grid-row: 2
    }

    .footer-col--nav {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
        gap: 13px;
        margin: -4px 0 0 -8px;
        padding: 4px 8px 10px;
        background: transparent
    }

    .footer-col--production {
        grid-column: 1;
        grid-row: 3;
        margin: -2px 0 0 -8px;
        padding: 4px 8px 10px;
        background: #ebe5d83d
    }

    .footer-col>span {
        margin-bottom: 9px
    }

    .footer-col .footer-phone {
        font-size: 19px
    }

    .footer-col a,.footer-col p {
        font-size: 13px;
        line-height: 1.6
    }

    .footer-col .footer-note {
        font-size: 11px
    }

    .footer-bottom {
        grid-column: 1 / -1;
        grid-row: 4;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 6px 10px;
        margin-top: 2px;
        padding-top: 16px;
        font-size: clamp(6px,1.7vw,8px);
        letter-spacing: .02em;
        white-space: nowrap
    }
}

@media(prefers-reduced-motion:reduce) {
    .footer-col a,.footer-social__links a {
        transition: none
    }
}

.page-section.page-section--gifts {
    padding: 0;
    background: var(--paper)
}

.gift-showcase {
    container-type: inline-size;
    position: relative;
    max-width: 2050px;
    margin-inline:auto;overflow: hidden;
    color: var(--ink);
    font-family: var(--sans);
    scroll-margin-top: 90px
}

.gift-showcase__scene {
    display: block;
    width: 100%;
    height: auto
}

.gift-showcase__heading {
    position: absolute;
    top: 10.4%;
    left: 9.3%;
    z-index: 1
}

.gift-showcase__eyebrow {
    display: flex;
    align-items: center;
    gap: .72cqw;
    margin: 0 0 1.05cqw;
    color: #7e8477;
    font-size: .6cqw;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .18em;
    text-transform: uppercase
}

.gift-showcase__eyebrow>span {
    width: .49cqw;
    height: .49cqw;
    flex: none;
    border-radius: 50%;
    background: var(--terracotta)
}

.gift-showcase h2 {
    margin: 0;
    400 clamp(44px,5.3vw,78px)/.98
    Monomakh,serif: clamp(38px, 4vw, 58px);
    letter-spacing: -.035em;
    font: 400 clamp(44px,5.3vw,78px)/.98 Monomakh,serif;
}

.gift-showcase h2>span,.gift-showcase h2>em {
    display: block
}

.gift-showcase h2>em {
    color: var(--sage);
    font-style: italic
}

.gift-showcase__index {
    position: absolute;
    top: 10.8%;
    right: 3.4%;
    display: flex;
    align-items: center;
    gap: .8cqw;
    color: #818579;
    font-size: .62cqw;
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums
}

.gift-showcase__index:after {
    content: "";
    width: 2.5cqw;
    height: 1px;
    background: var(--terracotta)
}

.gift-showcase__options {
    position: absolute;
    right: 10.5%;
    bottom: 9.7%;
    left: 6.4%;
    display: grid;
    grid-template-columns: 1.05fr .98fr 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none
}

.gift-showcase__label {
    display: flex;
    align-items: center;
    gap: .8cqw;
    font-size: .96cqw;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap
}

.gift-showcase__number {
    color: #818579;
    font-size: .66cqw;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums
}

.gift-showcase__rule {
    position: relative;
    width: 2.65cqw;
    height: 1.25cqw;
    flex: none;
    border-right: 1px solid var(--terracotta)
}

.gift-showcase__rule:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1.8cqw;
    height: 1px;
    background: var(--terracotta)
}

.gift-showcase__item-art {
    display: none
}

.gift-showcase__contact {
    position: absolute;
    right: 5.9%;
    bottom: 8.65%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: .8cqw;
    padding-bottom: .42cqw;
    border-bottom: 1px solid currentColor;
    color: var(--sage);
    font-size: .63cqw;
    line-height: 1.5;
    transition: color .2s ease
}

.gift-showcase__contact svg {
    width: 1.05cqw;
    height: 1.05cqw;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease
}

.gift-showcase__contact:hover {
    color: var(--terracotta)
}

.gift-showcase__contact:hover svg {
    transform: translate(2px,-2px)
}

.gift-showcase__contact:focus-visible {
    outline: 2px solid var(--sage);
    outline-offset: 6px
}

@media(min-width: 701px)and (max-width:1100px) {
    .gift-showcase__eyebrow,.gift-showcase__index,.gift-showcase__number {
        font-size:9px
    }

    .gift-showcase__contact {
        font-size: 10px
    }

    .gift-showcase__contact svg {
        width: 15px;
        height: 15px
    }

    .gift-showcase__label {
        font-size: 11px
    }
}

@media(max-width: 700px) {
    .gift-showcase {
        padding:38px 24px 44px
    }

    .gift-showcase__scene,.gift-showcase__index {
        display: none
    }

    .gift-showcase__heading {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: 18px
    }

    .gift-showcase__eyebrow {
        gap: 10px;
        margin-bottom: 18px;
        font-size: 9px
    }

    .gift-showcase__eyebrow>span {
        width: 6px;
        height: 6px
    }

    .gift-showcase h2 {
        font-size: clamp(30px,9.3vw,65px);
        line-height: 1
    }

    .gift-showcase__options {
        position: static;
        grid-template-columns: minmax(0,1fr);
        gap: 24px
    }

    .gift-showcase__item-art {
        display: block;
        position: relative;
        overflow: hidden;
        aspect-ratio: 1.36;
        margin: 0 -12px 10px
    }

    .gift-showcase__item-art img {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 300%;
        max-width: none;
        height: auto
    }

    .gift-showcase__option--box .gift-showcase__item-art img {
        left: 49%;
        transform: translate(-49%)
    }

    .gift-showcase__option--basket .gift-showcase__item-art {
        aspect-ratio: 1.13
    }

    .gift-showcase__option--basket .gift-showcase__item-art img {
        width: 250%;
        left: 100%;
        transform: translate(-100%)
    }

    .gift-showcase__label {
        gap: 12px;
        font-size: 16px
    }

    .gift-showcase__number {
        font-size: 11px
    }

    .gift-showcase__rule {
        width: 42px;
        height: 20px
    }

    .gift-showcase__rule:before {
        width: 28px
    }

    .gift-showcase__contact {
        position: relative;
        right: auto;
        bottom: auto;
        gap: 18px;
        min-height: 44px;
        margin-top: 32px;
        padding-bottom: 2px;
        font-size: 13px
    }

    .gift-showcase__contact svg {
        width: 20px;
        height: 20px
    }
}

@media(prefers-reduced-motion:reduce) {
    .gift-showcase__contact,.gift-showcase__contact svg {
        transition: none
    }
}

.showcase-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    align-items: start;
    gap: var(--catalog-gap, 14px)
}

.showcase-column {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    align-content: start;
    gap: var(--catalog-gap, 14px);
    min-width: 0
}

.showcase-card {
    position: relative;
    min-width: 0;
    overflow: hidden;
    isolation: isolate;
    aspect-ratio: .8;
    border-radius: 18px;
    background: var(--showcase-tone, #ecebdb)
}

.showcase-card:before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 72% 18%,rgb(255 255 255 / 65%),transparent 45%);
    pointer-events: none
}

.showcase-card--large {
    grid-column: span 2;
    aspect-ratio: .827
}

.showcase-card--wide {
    grid-column: span 2;
    aspect-ratio: 2.12
}

.showcase-link {
    position: absolute;
    inset: 0;
    display: block
}

.showcase-link:focus-visible {
    outline: 3px solid var(--sage);
    outline-offset: -4px;
    border-radius: inherit
}

.showcase-image {
    position: absolute;
    top: 4%;
    left: 0;
    width: 100%;
    height: 79%;
    object-fit: contain;
    transition: transform .45s cubic-bezier(.2,.7,.2,1)
}

.showcase-card--scene .showcase-image {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.showcase-card--wide .showcase-image {
    object-position: 50% 46%
}

.showcase-link:hover .showcase-image {
    transform: scale(1.04)
}

.showcase-caption {
    position: absolute;
    right: 7px;
    bottom: 7px;
    left: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 50px;
    padding: 9px 9px 9px 12px;
    border: 1px solid rgb(255 255 255 / 37%);
    border-radius: 13px;
    background: #f7f6f185;
    box-shadow: 0 14px 36px #282b211a;
    color: #374b3b;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px)
}

.showcase-caption h3 {
    margin: 0;
    font-family: var(--sans);
    font-size: clamp(12px,1.05vw,16px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em
}

.showcase-card--large .showcase-caption {
    min-height: 60px;
    padding: 12px 14px
}

.showcase-card--large .showcase-caption h3 {
    font-size: clamp(18px,1.6vw,25px)
}

.showcase-arrow {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eaf1d5;
    color: #456246
}

.showcase-arrow .icon-arrow {
    width: 18px;
    height: 18px
}

.showcase-link:hover .icon-arrow {
    transform: rotate(-90deg) translate(1px,1px)
}

.showcase-tone-apple {
    --showcase-tone: #e8ecdf
}

.showcase-tone-cranberry {
    --showcase-tone: #f4e5e5
}

.showcase-tone-apple-meringue {
    --showcase-tone: #e9ebd5
}

.showcase-tone-raspberry {
    --showcase-tone: #f5e5e8
}

.showcase-tone-blueberry {
    --showcase-tone: #eee8f0
}

.showcase-tone-hero {
    --showcase-tone: #ecebdb
}

.showcase-tone-sugarfree {
    --showcase-tone: #e9ecde
}

.showcase-tone-cherry {
    --showcase-tone: #f4e4e2
}

.showcase-tone-gift {
    --showcase-tone: #f0e8da
}

.showcase-tone-rusks {
    --showcase-tone: #f3e9dd
}

.showcase-tone-chocolate {
    --showcase-tone: #ede5e1
}

.showcase-tone-marmalade {
    --showcase-tone: #f6e9dc
}

.showcase-tone-strawberry {
    --showcase-tone: #f4e2e5
}

.showcase-tone-berry-rusks {
    --showcase-tone: #efe6ee
}

.showcase-tone-zephyr {
    --showcase-tone: #efeee5
}

.page-section--catalog {
    --catalog-gap: clamp(8px, 1vw, 15px);
    padding-block:clamp(50px,7vh,88px);background: #f7f5f0
}

.product-showcase {
    display: flex;
    flex-direction: column
}

.product-showcase__heading {
    display: flex;
    flex: 0 0 auto;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(16px,2.4vh,28px)
}

.product-showcase__heading .eyebrow {
    margin-bottom: 10px
}

.product-showcase__heading h2 {
    margin: 0;
    color: #292922;
    font-family: var(--heading);
    font-size: clamp(32px,3.6vw,52px);
    font-weight: 400;
    letter-spacing: -.045em;
    line-height: .98
}

.product-showcase__heading h2 em {
    color: var(--sage);
    font-weight: 400
}

.product-showcase__all {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 13px;
    padding: 12px 16px;
    border: 1px solid rgb(72 106 70 / 24%);
    border-radius: 999px;
    color: var(--sage-dark);
    font-size: 12px;
    font-weight: 600;
    transition: background .2s,color .2s
}

.product-showcase__all:hover {
    background: var(--sage-dark);
    color: #fff
}

.product-showcase__all .icon-arrow {
    width: 17px;
    height: 17px
}

.product-showcase__tiles {
    padding: 2px 2px 0
}

.showcase-grid {
    align-items: start
}

.product-showcase__note {
    display: grid;
    grid-template-columns: 32px minmax(0,1fr) auto;
    align-items: center;
    gap: 14px;
    margin-top: 23px;
    padding-top: 17px;
    border-top: 1px solid rgb(72 106 70 / 18%);
    color: #77796f
}

.product-showcase__note-mark {
    color: #8eaa61;
    font-size: 19px;
    line-height: 1
}

.product-showcase__note p {
    margin: 0;
    font-size: 11px;
    line-height: 1.6;
    letter-spacing: .015em
}

.product-showcase__note-index {
    color: #9a9a8c;
    font-size: 8px;
    font-weight: 600;
    letter-spacing: .16em;
    white-space: nowrap
}

.catalog-orbits {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none
}

.catalog-orbits__lines {
    stroke: #4c5c4b21;
    stroke-width: 1.1;
    vector-effect: non-scaling-stroke
}

.catalog-orbits__diamond {
    fill: #f7f5f0;
    stroke: #4c5c4b7a;
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke
}

.catalog-orbits__diamond--accent {
    fill: #b4775e;
    stroke: #b4775e;
    stroke-width: 1
}

.showcase-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 24px
}

.showcase-footer .catalog-note {
    margin: 0;
    text-align: left
}

.showcase-footer .button {
    flex-shrink: 0
}

@media(max-width: 1000px) {
    .showcase-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

@media(max-width: 700px) {
    .page-section--catalog {
        padding-block:42px
    }

    .product-showcase__heading {
        align-items: end;
        gap: 12px
    }

    .product-showcase__heading h2 {
        font-size: clamp(30px,8vw,42px)
    }

    .product-showcase__all {
        padding: 10px 12px;
        font-size: 11px
    }

    .product-showcase__note {
        grid-template-columns: 24px minmax(0,1fr);
        gap: 10px;
        margin-top: 18px;
        padding-top: 14px
    }

    .product-showcase__note-index {
        grid-column: 2
    }

    .catalog-orbits {
        display: none
    }

    .showcase-grid {
        grid-template-columns: minmax(0,1fr)
    }

    .showcase-caption h3 {
        font-size: 14px
    }

    .showcase-card--large .showcase-caption h3 {
        font-size: 18px
    }

    .showcase-footer {
        flex-direction: column;
        align-items: flex-start
    }
}

@media(prefers-reduced-motion:reduce) {
    .showcase-image {
        transition: none
    }
}

.product-modal {
    --modal-ink: #292922;
    --modal-sage: #4c5c4b;
    --modal-paper: #f7f5f0;
    position: fixed;
    inset: 50% auto auto 50%;
    width: min(1100px,calc(100vw - 48px));
    max-width: none;
    height: auto;
    max-height: min(780px,calc(100dvh - 32px));
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid rgb(76 92 75 / 10%);
    border-radius: 28px;
    transform: translate(-50%,-50%);
    background: var(--modal-paper);
    color: var(--modal-ink);
    box-shadow: 0 28px 100px #1d221a47;
    font-family: var(--sans, "Onest", Arial, sans-serif)
}

.product-modal:not([open]) {
    display: none
}

.product-modal[open] {
    display: block;
    animation: product-modal-in .24s ease both
}

.product-modal::backdrop {
    background: #22261e8c;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
}

@keyframes product-modal-in {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.product-modal__toolbar {
    position: sticky;
    z-index: 5;
    top: 0;
    height: 0;
    pointer-events: none
}

.product-modal__close-form {
    position: absolute;
    inset: 0;
    pointer-events: none
}

.product-modal__close {
    position: absolute;
    top: 15px;
    right: 15px;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid rgb(76 92 75 / 12%);
    border-radius: 50%;
    background: #fffefaf0;
    color: #354838;
    font: 300 28px/1 var(--sans, Arial, sans-serif);
    pointer-events: auto;
    cursor: pointer;
    transition: background .18s,transform .18s
}

.product-modal__close:hover {
    transform: rotate(90deg);
    background: #e9ecdf
}

.product-modal__handle {
    position: absolute;
    top: 4px;
    left: 50%;
    display: grid;
    width: 76px;
    height: 24px;
    padding: 0;
    place-items: center;
    transform: translate(-50%);
    border: 0;
    border-radius: 999px;
    background: transparent;
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    -webkit-tap-highlight-color: transparent
}

.product-modal__handle span {
    width: 42px;
    height: 6px;
    border-radius: 999px;
    background: #c9cdc6;
    transition: width .2s,height .2s,background .2s
}

.product-modal__handle:hover span,.product-modal__handle:focus-visible span {
    width: 62px;
    height: 8px;
    background: #aeb6a8
}

.product-modal.is-dragging,.product-modal.is-dragging * {
    cursor: grabbing!important;
    -webkit-user-select: none;
    user-select: none
}

.product-modal__layout {
    display: grid;
    grid-template-columns: minmax(0,1.06fr) minmax(0,.94fr);
    min-height: 620px
}

.product-modal__gallery {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 30px 22px 19px;
    background: #eeece4
}

.product-modal__stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 380px;
    overflow: hidden;
    border-radius: 20px;
    background: #e8ecdf;
    touch-action: pan-y
}

.product-modal__stage:before {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 45%,rgb(255 254 250 / 75%),transparent 63%);
    content: "";
    pointer-events: none
}

.product-modal__stage:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 66%;
    aspect-ratio: 1;
    transform: translate(-50%,-50%);
    border: 1px solid rgb(76 92 75 / 12%);
    border-radius: 50%;
    box-shadow: 0 0 0 24px #4c5c4b0a,0 0 0 48px #4c5c4b08;
    content: "";
    pointer-events: none
}

.product-modal__stage img {
    position: absolute;
    z-index: 1;
    inset: 6% 5%;
    width: 90%;
    height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 18px 18px rgb(54 52 41 / 12%));
    transition: opacity .16s,transform .3s;
    pointer-events: none
}

.product-modal__stage.is-changing img {
    opacity: .25;
    transform: scale(.98)
}

.product-modal__kicker {
    position: absolute;
    z-index: 2;
    top: 20px;
    left: 22px;
    color: #6d7d68;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em
}

.product-modal__arrow {
    position: absolute;
    z-index: 2;
    top: 50%;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    transform: translateY(-50%);
    border: 1px solid rgb(76 92 75 / 10%);
    border-radius: 50%;
    background: #fffefae0;
    color: #53664f;
    font: 20px/1 var(--sans, Arial, sans-serif);
    cursor: pointer
}

.product-modal__arrow--prev {
    left: 10px
}

.product-modal__arrow--next {
    right: 10px
}

.product-modal__arrow[hidden] {
    display: none
}

.product-modal__count {
    position: absolute;
    z-index: 2;
    right: 20px;
    bottom: 17px;
    color: #6d7867;
    font-size: 11px;
    letter-spacing: .08em
}

.product-modal__thumbs {
    display: flex;
    flex: 0 0 auto;
    gap: 9px;
    padding: 12px 1px 2px;
    overflow-x: auto;
    overflow-y: hidden
}

.product-modal__thumb {
    flex: 0 0 62px;
    width: 62px;
    height: 60px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 13px;
    background: #fffefa9e;
    cursor: pointer
}

.product-modal__thumb.is-active {
    border-color: #829374;
    background: #fffefa
}

.product-modal__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.product-modal__caption {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    color: #788174;
    font-size: 10px
}

.product-modal__details {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 40px 42px 22px;
    background: #fffefa
}

.product-modal__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-right: 28px;
    color: #8b9084;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em
}

.product-modal__stock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #536a51;
    letter-spacing: 0
}

.product-modal__stock i {
    flex: 0 0 7px;
    height: 7px;
    border-radius: 50%;
    background: #8ab267
}

.product-modal__eyebrow {
    margin: 30px 0 8px;
    color: #8a9a7b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em
}

.product-modal__details h2 {
    margin: 0;
    color: #354838;
    font-family: var(--heading, Georgia, serif);
    font-size: clamp(34px,4vw,52px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.035em;
    overflow-wrap: anywhere
}

.product-modal__lead {
    margin: 17px 0 18px;
    color: #788174;
    font-size: 13px;
    line-height: 1.7
}

.product-modal__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.product-modal__chips span {
    padding: 8px 11px;
    border: 1px solid #e7e9df;
    border-radius: 999px;
    background: #f7f7f2;
    color: #62735d;
    font-size: 10px
}

.product-modal__divider {
    flex-shrink: 0;
    height: 1px;
    margin: 22px 0 17px;
    background: #e9e9e1
}

.product-modal__facts {
    display: grid;
    gap: 15px
}

.product-modal__facts>div {
    display: flex;
    align-items: center;
    gap: 12px
}

.product-modal__fact-icon {
    display: grid;
    flex: 0 0 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #e3e7d8;
    border-radius: 13px;
    background: #f0f2e8;
    color: #728565;
    font-size: 17px
}

.product-modal__facts strong,.product-modal__facts small {
    display: block
}

.product-modal__facts strong {
    color: #4a5947;
    font-size: 11px
}

.product-modal__facts small {
    margin-top: 4px;
    color: #92958b;
    font-size: 10px;
    line-height: 1.45
}

.product-modal__offer {
    display: grid;
    gap: 5px;
    margin-top: 15px;
    padding: 12px 15px;
    border-radius: 14px;
    background: #f4f3ed
}

.product-modal__offer span {
    color: #8c9285;
    font-size: 9px;
    letter-spacing: .08em;
    text-transform: uppercase
}

.product-modal__offer strong {
    color: #4d5d49;
    font-size: 11px;
    font-weight: 600
}

.product-modal__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 12px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #354838;
    box-shadow: 0 8px 20px #394e3424;
    color: #fffefa;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none
}

.product-modal__note {
    margin: 10px 3px 0;
    color: #989b90;
    font-size: 9px;
    line-height: 1.5;
    text-align: center
}

.product-modal__related {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 22px;
    color: #a0a195;
    font-size: 9px
}

.product-modal__related a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #62765b;
    font-size: 10px;
    text-decoration: none
}

.product-modal__more {
    min-width: 0;
    padding: 18px 22px;
    border-top: 1px solid #eeece5;
    background: #fffefa
}

.product-modal__more-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px
}

.product-modal__more-heading>div:first-child>span {
    color: #969b8d;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em
}

.product-modal__more-heading h3 {
    margin: 4px 0 0;
    color: #354838;
    font: 24px/1.15 var(--heading, Georgia, serif)
}

.product-modal__more-controls {
    display: flex;
    flex-shrink: 0;
    gap: 6px
}

.product-modal__more-controls button {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    border: 1px solid rgb(76 92 75 / 15%);
    border-radius: 50%;
    background: #fffefa;
    color: #586b54;
    font: 20px/1 var(--sans, Arial, sans-serif);
    cursor: pointer
}

.product-modal__more-controls button:disabled {
    opacity: .35;
    cursor: default
}

.product-modal__more-viewport {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain
}

.product-modal__more-track {
    display: flex;
    width: max-content;
    gap: 10px;
    padding: 2px 1px 8px
}

.product-modal__more-card {
    position: relative;
    display: flex;
    flex: 0 0 142px;
    width: 142px;
    min-width: 0;
    flex-direction: column;
    padding: 8px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: var(--related-tone, #e9ecdf);
    color: #3c503e;
    text-align: left;
    cursor: pointer
}

.product-modal__more-card img {
    width: 100%;
    height: 80px;
    object-fit: contain
}

.product-modal__more-card strong {
    display: -webkit-box;
    overflow: hidden;
    min-height: 32px;
    margin: 6px 2px 4px;
    font-size: 12px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2
}

.product-modal__more-card small {
    display: block;
    margin: auto 2px 3px;
    color: #7e8978;
    font-size: 10px
}

.product-modal__more-card-arrow {
    position: absolute;
    top: 7px;
    right: 7px;
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    background: #fffefae0;
    color: #536950
}

.product-modal__cta .icon-arrow {
    flex: 0 0 20px;
    width: 20px;
    height: 20px
}

.product-modal__related .icon-arrow {
    width: 14px;
    height: 14px;
    margin-left: 5px
}

.product-modal__more-card-arrow .icon-arrow {
    width: 14px;
    height: 14px
}

.product-modal__more-empty {
    max-width: 260px;
    margin: 0;
    color: #899182;
    font-size: 13px
}

.product-modal :focus-visible {
    outline: 2px solid #6d835d;
    outline-offset: 3px
}

.product-modal,.product-modal__thumbs,.product-modal__more-viewport {
    scrollbar-width: none;
    -ms-overflow-style: none
}

.product-modal::-webkit-scrollbar,.product-modal__thumbs::-webkit-scrollbar,.product-modal__more-viewport::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0
}

@media(max-width: 900px) {
    .product-modal {
        width:min(560px,calc(100vw - 16px));
        max-height: calc(100dvh - 16px);
        border-radius: 24px
    }

    .product-modal__toolbar {
        height: 48px;
        background: #eeece4
    }

    .product-modal__close {
        top: 3px;
        right: 8px
    }

    .product-modal__handle {
        top: 10px;
        cursor: default
    }

    .product-modal__handle:disabled {
        opacity: 1
    }

    .product-modal__layout {
        grid-template-columns: minmax(0,1fr);
        min-height: 0
    }

    .product-modal__gallery {
        padding: 0 12px 16px
    }

    .product-modal__stage {
        flex: none;
        width: 100%;
        min-height: 0;
        aspect-ratio: 1.1;
        border-radius: 18px
    }

    .product-modal__stage img {
        inset: 10% 7%;
        width: 86%;
        height: 80%
    }

    .product-modal__kicker {
        top: 15px;
        left: 16px;
        font-size: 9px
    }

    .product-modal__count {
        bottom: 12px;
        right: 14px;
        font-size: 11px
    }

    .product-modal__thumbs {
        gap: 8px;
        padding-top: 10px
    }

    .product-modal__thumb {
        flex-basis: 56px;
        width: 56px;
        height: 56px
    }

    .product-modal__caption {
        display: none
    }

    .product-modal__details {
        padding: 24px 20px 12px
    }

    .product-modal__topline {
        align-items: flex-start;
        gap: 10px;
        padding: 0;
        font-size: 9px;
        line-height: 1.5
    }

    .product-modal__topline>[data-modal-category] {
        max-width: 44%;
        text-align: right
    }

    .product-modal__eyebrow {
        margin: 22px 0 10px;
        font-size: 9px;
        line-height: 1.5
    }

    .product-modal__details h2 {
        font-size: clamp(32px,8vw,42px);
        line-height: 1.1
    }

    .product-modal__lead {
        margin: 14px 0 18px;
        font-size: 14px;
        line-height: 1.6
    }

    .product-modal__chips {
        gap: 6px
    }

    .product-modal__chips span {
        padding: 8px 10px;
        font-size: 11px
    }

    .product-modal__divider {
        margin: 22px 0 20px
    }

    .product-modal__facts {
        gap: 18px
    }

    .product-modal__fact-icon {
        flex-basis: 42px;
        height: 42px;
        font-size: 18px
    }

    .product-modal__facts strong {
        font-size: 14px
    }

    .product-modal__facts small {
        font-size: 12px;
        line-height: 1.5
    }

    .product-modal__offer {
        margin-top: 22px;
        padding: 16px
    }

    .product-modal__offer span {
        font-size: 10px
    }

    .product-modal__offer strong {
        font-size: 13px;
        line-height: 1.5
    }

    .product-modal__cta {
        min-height: 56px;
        margin-top: 16px;
        padding: 16px 18px;
        font-size: 15px
    }

    .product-modal__note {
        margin-top: 12px;
        font-size: 11px
    }

    .product-modal__related {
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
        padding-top: 8px;
        font-size: 11px
    }

    .product-modal__related a {
        font-size: 13px
    }

    .product-modal__more {
        padding: 20px 16px max(20px,env(safe-area-inset-bottom))
    }

    .product-modal__more-heading h3 {
        font-size: 25px
    }

    .product-modal__more-heading>div:first-child>span {
        font-size: 9px
    }

    .product-modal__more-card {
        flex-basis: 152px;
        width: 152px;
        padding: 10px
    }

    .product-modal__more-card img {
        height: 100px
    }

    .product-modal__more-card strong {
        min-height: 36px;
        font-size: 13px
    }

    .product-modal__more-card small {
        font-size: 11px
    }
}

@media(prefers-reduced-motion:reduce) {
    .product-modal,.product-modal * {
        animation-duration: .01ms!important;
        transition-duration: .01ms!important
    }
}

.history-demo {
    margin: 0;
    background: #f7f5f0
}

.bpm-history {
    --hist-paper: #f7f5f0;
    --hist-ink: #292922;
    --hist-sage: #4c5c4b;
    --hist-lime: #a8c94f;
    --hist-line: #d9dbd0;
    --hist-muted: #72766a;
    --hist-motion: .65s;
    box-sizing: border-box;
    position: relative;
    max-width: 1618px;
    margin: auto;
    padding: 52px clamp(24px,5.1vw,84px) 30px;
    scroll-margin-top: 96px;
    color: var(--hist-ink);
    background: var(--hist-paper);
    font: 400 14px/1.6 Onest,Arial,sans-serif;
    -webkit-font-smoothing: antialiased
}

.bpm-history *,.bpm-history *:before,.bpm-history *:after {
    box-sizing: border-box
}

.bpm-history [hidden] {
    display: none!important
}

.bpm-history button {
    font: inherit;
    color: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent
}

.bpm-history button:focus-visible,.bpm-history [tabindex]:focus-visible,.bpm-history a:focus-visible {
    outline: 2px solid var(--hist-sage);
    outline-offset: 5px
}

.bpm-history svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round
}

.bpm-history__heading {
    display: grid;
    grid-template-columns: minmax(0,1fr) 265px;
    align-items: end;
    gap: 48px;
    margin: 0 0 48px -12px
}

.bpm-history__eyebrow {
    margin: 0 0 18px;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--hist-sage)
}

.bpm-history__title {
    margin: 0;
    font: 400 clamp(44px,5.3vw,78px)/.98 Monomakh,serif;
    letter-spacing: -.048em;
    text-transform: none
}

.bpm-history__title em {
    font-style: normal;
    color: var(--hist-sage)
}

.bpm-history__intro {
    margin: 0 0 2px;
    font-size: 13px;
    line-height: 1.9;
    color: var(--hist-muted)
}

.bpm-history__intro small {
    display: block;
    margin-bottom: 12px;
    font-size: 8px;
    line-height: 1.6;
    letter-spacing: .12em;
    text-transform: uppercase
}

.bpm-history__timeline-wrap {
    margin: 0 -10px 36px;
    padding: 28px 10px 3px;
    overflow-x: auto;
    scrollbar-width: none
}

.bpm-history__timeline-wrap::-webkit-scrollbar {
    display: none
}

.bpm-history__timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--history-steps,5),1fr);
    min-width: 670px
}

.bpm-history__rail {
    position: absolute;
    top: 7px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--hist-line);
    pointer-events: none
}

.bpm-history__rail span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--hist-sage);
    transition: width var(--hist-motion) cubic-bezier(.22,.7,.2,1)
}

.bpm-history__milestone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 12px 3px 0;
    border: 0;
    background: none;
    text-align: left
}

.bpm-history__milestone-year {
    position: absolute;
    top: -20px;
    left: 0;
    color: #858a7c;
    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap
}

.bpm-history__point {
    position: absolute;
    top: 2px;
    left: 0;
    width: 11px;
    height: 11px;
    background: var(--hist-paper);
    border: 1px solid #a7ac9e;
    border-radius: 50%;
    transition: background .3s,box-shadow .3s,border-color .3s
}

.bpm-history__milestone strong {
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -.025em;
    color: #6c7366;
    transition: color .3s
}

.bpm-history__milestone small {
    margin-top: 2px;
    font-size: 11px;
    color: var(--hist-muted)
}

.bpm-history__milestone[aria-selected=true] .bpm-history__point {
    border-color: var(--hist-lime);
    background: var(--hist-lime);
    box-shadow: 0 0 0 5px #a8c94f22
}

.bpm-history__milestone[aria-selected=true] strong {
    color: var(--hist-sage);
    font-weight: 650
}

.bpm-history__milestone.is-past .bpm-history__point {
    border-color: var(--hist-sage);
    background: var(--hist-sage)
}

.bpm-history__milestone:hover strong {
    color: var(--hist-ink)
}

.bpm-history__stage {
    display: grid;
    grid-template-columns: 1.85fr 1fr;
    gap: clamp(30px,4vw,64px);
    align-items: start;
    touch-action: pan-y;
    --hist-drag: 0px
}

.bpm-history__visual {
    position: relative;
    isolation: isolate;
    min-width: 0;
    aspect-ratio: 1.72;
    overflow: hidden;
    border-radius: 23px;
    background: #dde1d6;
    transform: translate(var(--hist-drag));
    transition: transform .45s ease;
    cursor: grab
}

.bpm-history__media {
    position: absolute;
    inset: 0
}

.bpm-history__media img,.bpm-history__media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    animation: hist-photo-in var(--hist-motion) cubic-bezier(.2,.7,.2,1) both
}

.bpm-history__visual:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,#11251e19,transparent 30%,#11251e00 47%,#11251eac)
}

.bpm-history__visual[data-video=true]:after {
    background: none
}

.bpm-history__visual[data-video=true] .bpm-history__image-bottom {
    bottom: 64px;
    pointer-events: none
}

.bpm-history__image-top {
    position: absolute;
    z-index: 1;
    top: 23px;
    left: 25px;
    right: 25px;
    display: flex;
    color: #fffefa;
    font-size: 8px;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-shadow: 0 1px 10px #11251e99
}

.bpm-history__image-top>span {
    padding: 7px 10px;
    border: 1px solid #fffefa66;
    border-radius: 6px;
    background: #233c2933;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px)
}

.bpm-history__image-bottom {
    position: absolute;
    z-index: 1;
    bottom: 29px;
    left: 29px;
    right: 25px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    color: #fffefa;
    gap: 10px;
    pointer-events: none
}

.bpm-history__image-year {
    display: block;
    font: 400 clamp(64px,7.6vw,110px)/1 Monomakh,serif;
    letter-spacing: -.055em
}

.bpm-history__image-caption {
    display: block;
    margin-top: 5px;
    font-size: 13px;
    letter-spacing: .005em
}

.bpm-history__expand {
    pointer-events: auto;
    display: grid;
    place-items: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1px solid #fffefa6b;
    background: #fffefa26;
    color: #fffefa!important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    transition: background .2s
}

.bpm-history__expand:hover {
    background: #fffefa4d
}

.bpm-history__story {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    min-width: 0;
    padding: 36px 0 0
}

.bpm-history__chapter {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    color: var(--hist-sage);
    font-size: 9px;
    letter-spacing: .11em;
    text-transform: uppercase
}

.bpm-history__chapter>span:first-child:after {
    content: " ·";
    margin-left: 8px
}

.bpm-history__story-title {
    margin: 0 0 22px;
    font: 400 clamp(32px,3.3vw,52px)/1.03 Monomakh,serif;
    letter-spacing: -.045em;
    text-transform: none
}

.bpm-history__story-title span:last-child {
    color: var(--hist-sage)
}

.bpm-history__copy p {
    max-width: 430px;
    margin: 0 0 14px;
    color: #676c61;
    font-size: 14px;
    line-height: 1.85
}

.bpm-history__copy p:last-of-type {
    margin-bottom: 0
}

.bpm-history__details {
    display: flex;
    gap: 24px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--hist-line)
}

.bpm-history__details>div {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0
}

.bpm-history__details>div+div {
    border-left: 1px solid var(--hist-line);
    padding-left: 22px
}

.bpm-history__details svg {
    flex: 0 0 32px;
    width: 32px;
    height: 36px;
    color: var(--hist-ink)
}

.bpm-history__details svg path:last-child {
    stroke: #8eae3e
}

.bpm-history__details strong {
    display: block;
    color: var(--hist-sage);
    font-size: 13px;
    line-height: 1.6;
    font-weight: 500
}

.bpm-history__details span {
    display: block;
    color: var(--hist-muted);
    font-size: 11px;
    margin-top: 2px
}

.bpm-history__story-footer {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    align-items: center;
    gap: 16px;
    padding-top: 36px;
    margin-top: auto
}

.bpm-history__next-story {
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left
}

.bpm-history__next-story b {
    font-size: 12px;
    line-height: 1.6;
    font-weight: 500
}

.bpm-history__next-story:hover b {
    color: var(--hist-sage)
}

.bpm-history__controls {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: none;
    border: 1px solid #b1ab9f;
    background: #fdfdfd2b;
    color: var(--hist-ink);
    border-radius: 50px;
    position: absolute;
    padding: 5px;
    box-shadow: 0 5px 22px #29292216;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    pointer-events: auto;
    bottom: 0;
    right: 80px
}

.bpm-history__controls button {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--hist-line);
    border-radius: 50%;
    background: transparent;
    transition: background .2s,opacity .2s
}

.bpm-history__controls button[data-next] {
    border-color: #202b23;
    background: #202b23;
    color: #fffefa
}

.bpm-history__controls button:hover:enabled {
    background: #e3e8d8;
    color: var(--hist-sage);
    border-color: #d1dac1
}

.bpm-history__controls button:disabled {
    opacity: .28;
    cursor: default
}

.bpm-history__counter {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #fff;
    font-variant-numeric: tabular-nums
}

.bpm-history__counter b {
    color: #e5b561;
    font-weight: 600
}

.bpm-history__counter>span:first-of-type {
    color: #c1c4b8
}

.bpm-history__footer {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto auto;
    align-items: center;
    column-gap: 48px;
    padding-top: 27px;
    margin-top: 30px;
    border-top: 1px solid var(--hist-line)
}

.bpm-history__hint {
    margin: 0;
    color: var(--hist-muted);
    font-size: 9px;
    display: flex;
    align-items: center;
    gap: 11px
}

.bpm-history__hint>span:first-child {
    font-size: 23px;
    line-height: 1;
    color: var(--hist-sage)
}

.bpm-history__production-note {
    grid-column: 2;
    margin: 0;
    color: var(--hist-muted);
    font-size: 9px
}

.bpm-history__signature {
    grid-column: 3;
    justify-self: end;
    color: var(--hist-muted);
    font-size: 9px
}

.bpm-history .bpm-history__business-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 46px;
    margin-top: 23px;
    padding: 12px 19px;
    border: 1px solid var(--hist-sage);
    border-radius: 999px;
    background: var(--hist-sage);
    color: #fffefa;
    font-size: 12px;
    line-height: 1.5;
    text-decoration: none;
    transition: background .2s
}

.bpm-history .bpm-history__business-cta:hover {
    background: #354838
}

.bpm-history__business-cta svg {
    flex: 0 0 20px;
    width: 20px;
    height: 20px
}

.bpm-history__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap
}

.bpm-history.is-dragging .bpm-history__visual {
    transition: none;
    cursor: grabbing
}

.bpm-history.is-dragging .bpm-history__stage {
    -webkit-user-select: none;
    user-select: none
}

.bpm-history.is-changing .bpm-history__copy {
    animation: hist-copy-in var(--hist-motion) cubic-bezier(.2,.7,.2,1) both
}

.bpm-history__dialog {
    position: relative;
    width: min(1320px,94vw);
    max-height: 94vh;
    padding: 16px;
    border: 0;
    border-radius: 20px;
    background: var(--hist-paper);
    color: var(--hist-ink)
}

.bpm-history__dialog::backdrop {
    background: #17251de0;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px)
}

.bpm-history__dialog img {
    display: block;
    width: 100%;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 9px
}

.bpm-history__dialog p {
    margin: 12px 8px 0;
    font-size: 12px
}

.bpm-history__dialog-close {
    position: absolute;
    z-index: 2;
    right: 25px;
    top: 25px;
    width: 42px;
    height: 42px;
    border: 1px solid #ffffff70;
    background: #fffefae6;
    border-radius: 50%;
    font-size: 26px!important;
    line-height: 1
}

.page-section--history {
    --section-bg: var(--paper,#f7f5f0)
}

.page-section--history>.bpm-history.container {
    max-width: none;
    padding: 0;
    background: transparent
}

@keyframes hist-copy-in {
    0% {
        opacity: 0;
        transform: translate(calc(var(--hist-direction,1) * 22px))
    }

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

@keyframes hist-photo-in {
    0% {
        opacity: .2;
        transform: scale(1.04) translate(calc(var(--hist-direction,1) * 12px))
    }

    to {
        opacity: 1;
        transform: scale(1) translate(0)
    }
}

@media(max-width: 1200px) {
    .bpm-history__heading {
        grid-template-columns:minmax(0,1fr) 265px;
        gap: 24px 32px;
        margin-left: 0
    }

    .bpm-history__heading>div:first-child {
        grid-column: 1 / -1
    }

    .bpm-history__intro {
        grid-column: 2;
        grid-row: 2;
        max-width: 330px
    }
}

@media(max-width: 1000px) {
    .bpm-history__title {
        font-size:59px
    }

    .bpm-history__stage {
        grid-template-columns: 1.25fr 1fr;
        gap: 30px
    }

    .bpm-history__visual {
        aspect-ratio: auto;
        min-height: 420px;
        align-self: stretch
    }

    .bpm-history__story {
        padding-top: 15px
    }

    .bpm-history__story-title {
        font-size: 36px
    }

    .bpm-history__copy p {
        font-size: 13px
    }

    .bpm-history__details {
        gap: 12px
    }

    .bpm-history__details>div {
        gap: 8px
    }

    .bpm-history__details>div+div {
        padding-left: 12px
    }

    .bpm-history__details svg {
        width: 25px;
        flex-basis: 25px
    }

    .bpm-history__details strong {
        font-size: 11px
    }

    .bpm-history__details span {
        font-size: 9px
    }

    .bpm-history__story-footer {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-top: 22px
    }

    .bpm-history__footer {
        column-gap: 24px
    }
}

@media(max-width: 700px) {
    .bpm-history {
        padding:32px 22px 25px
    }

    .page-section--history>.bpm-history.container {
        padding: 32px 0 25px
    }

    .bpm-history__heading {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin: 0 0 31px
    }

    .bpm-history__intro {
        order: 1;
        font-size: 11px;
        line-height: 1.7
    }

    .bpm-history__eyebrow {
        font-size: 8px;
        margin-bottom: 15px
    }

    .bpm-history__title {
        font-size: clamp(38px,9.5vw,61px);
        line-height: 1.02
    }

    .bpm-history__intro br {
        display: none
    }

    .bpm-history__timeline-wrap {
        margin-right: 0;
        margin-bottom: 25px;
        padding-top: 25px;
        scroll-padding-inline: 10px
    }

    .bpm-history__timeline {
        min-width: calc(var(--history-steps,5) * 152px);
        grid-template-columns: repeat(var(--history-steps,5),152px)
    }

    .bpm-history__milestone {
        min-height: 78px
    }

    .bpm-history__milestone strong {
        font-size: 13px
    }

    .bpm-history__milestone small {
        font-size: 10px
    }

    .bpm-history__stage {
        grid-template-columns: minmax(0,1fr);
        gap: 25px
    }

    .bpm-history__visual {
        min-height: 0;
        aspect-ratio: 1.3;
        border-radius: 18px
    }

    .bpm-history__image-top {
        top: 18px;
        left: 19px;
        right: 19px;
        font-size: 7px
    }

    .bpm-history__image-bottom {
        left: 18px;
        bottom: 16px;
        right: 16px;
        gap: 7px
    }

    .bpm-history__image-year {
        font-size: clamp(44px,12vw,62px)
    }

    .bpm-history__image-caption {
        font-size: 9px;
        max-width: 170px
    }

    .bpm-history__expand {
        width: 38px;
        height: 38px
    }

    .bpm-history__dialog {
        width: 96vw;
        padding: 9px;
        border-radius: 14px
    }

    .bpm-history__dialog img {
        max-height: 78vh
    }

    .bpm-history__dialog-close {
        right: 16px;
        top: 16px;
        width: 36px;
        height: 36px
    }

    .bpm-history__story {
        padding: 0
    }

    .bpm-history__chapter {
        font-size: 8px
    }

    .bpm-history__story-title {
        font-size: clamp(33px,9vw,43px);
        margin-bottom: 18px
    }

    .bpm-history__details {
        gap: 18px;
        margin-top: 22px
    }

    .bpm-history__details strong {
        font-size: 12px
    }

    .bpm-history__details span {
        font-size: 10px
    }

    .bpm-history__story-footer {
        grid-template-columns: minmax(0,1fr) auto;
        gap: 12px;
        padding-top: 22px
    }

    .bpm-history__controls {
        gap: 6px;
        padding: 3px
    }

    .bpm-history__controls button {
        width: 34px;
        height: 34px
    }

    .bpm-history__controls svg {
        width: 18px;
        height: 18px
    }

    .bpm-history__counter {
        gap: 5px;
        font-size: 8px
    }

    .bpm-history__next-story {
        min-height: 44px
    }

    .bpm-history__next-story b {
        font-size: 10px
    }

    .bpm-history__footer {
        grid-template-columns: 1fr auto;
        gap: 12px;
        padding-top: 20px;
        margin-top: 26px
    }

    .bpm-history__hint {
        font-size: 8px;
        gap: 8px
    }

    .bpm-history__production-note {
        grid-column: 1;
        grid-row: 2;
        font-size: 8px
    }

    .bpm-history__signature {
        grid-column: 2;
        grid-row: 2;
        font-size: 8px
    }

    .bpm-history .bpm-history__business-cta {
        max-width: 100%;
        font-size: 11px;
        padding-inline:16px}
}

@media(prefers-reduced-motion:reduce) {
    .bpm-history {
        --hist-motion: 0ms
    }

    .bpm-history * {
        animation: none!important;
        transition: none!important;
        scroll-behavior: auto!important
    }
}

.hero-photo--cafe[data-shader-slider] {
    touch-action: pan-y
}

.shader-slider__canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease-out
}

[data-shader-slider].shader-slider--webgl>img {
    opacity: 0!important
}

[data-shader-slider].shader-slider--webgl>.shader-slider__canvas {
    opacity: 1
}

.shader-slider__controls[hidden] {
    display: none!important
}

.hero-topline__counter,.shader-demo__counter {
    display: flex;
    align-items: center;
    gap: 10px
}

.shader-slider__progress {
    display: flex;
    width: clamp(56px,7vw,96px);
    align-items: center;
    gap: 4px;
    flex: 0 1 auto
}

.shader-slider__progress-segment {
    position: relative;
    display: block;
    height: 2px;
    min-width: 2px;
    flex: 1 1 0;
    overflow: hidden;
    border-radius: 2px;
    background: #496d4c2e
}

.shader-slider__progress-fill {
    position: absolute;
    inset: 0;
    display: block;
    transform: scaleX(0);
    transform-origin: left center;
    border-radius: inherit;
    background: #496d4c
}

.shader-slider__progress-segment.is-complete .shader-slider__progress-fill {
    transform: scaleX(1)
}

.shader-slider__progress-segment.is-active .shader-slider__progress-fill {
    transform: scaleX(.28)
}

.shader-slider__progress.is-running .shader-slider__progress-segment.is-active .shader-slider__progress-fill {
    animation: shader-slider-progress var(--slider-delay, 6s) linear forwards
}

@keyframes shader-slider-progress {
    0% {
        transform: scaleX(.28)
    }

    to {
        transform: scaleX(1)
    }
}

.shader-slider__controls {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px;
    /* border:1px solid rgb(255 255 255 / 58%); */
    border-radius: 999px;
    /* background:#f7f5efe0; */
    color: #292921;
    box-shadow: 0 7px 22px #2929211f;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px)
}

.shader-slider__button {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ffffff96;
    color: #4d4e4d;
    font: 20px/1 Arial,sans-serif;
    cursor: pointer;
    transition: background-color .16s ease,color .16s ease,transform .16s ease
}

.shader-slider__button:hover {
    transform: translateY(-1px);
    background: #3f6846;
    color: #fffefa
}

.shader-slider__button:focus-visible,.shader-slider__effect:focus-visible {
    outline: 2px solid #3f6846;
    outline-offset: 3px
}

.shader-slider__settings-trigger svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6
}

.shader-slider__settings[hidden],.shader-slider__setting[hidden] {
    display: none!important
}

.shader-slider__settings {
    position: fixed;
    right: auto;
    bottom: auto;
    z-index: 8;
    display: grid;
    width: min(270px,calc(100vw - 40px));
    gap: 13px;
    padding: 14px;
    border: 1px solid rgb(73 109 76 / 16%);
    border-radius: 15px;
    background: #faf9f4f7;
    color: #292921;
    box-shadow: 0 12px 34px #2929212e;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    text-align: left
}

.shader-slider__settings-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 2px;
    color: #3f6846;
    font: 600 12px/1.2 Arial,sans-serif
}

.shader-slider__settings-close {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #eeefe5;
    color: #496d4c;
    font: 18px/1 Arial,sans-serif;
    cursor: pointer
}

.shader-slider__setting {
    display: grid;
    gap: 7px;
    color: #66675e;
    font: 10px/1.3 Arial,sans-serif;
    letter-spacing: .015em
}

.shader-slider__setting .shader-slider__effect {
    width: 100%;
    max-width: none;
    padding: 7px 9px;
    border: 1px solid rgb(41 41 33 / 12%);
    border-radius: 8px;
    background: #fffefa;
    font-size: 12px
}

.shader-slider__range-row {
    display: flex;
    align-items: center;
    gap: 10px
}

.shader-slider__range-row input {
    width: 100%;
    min-width: 0;
    margin: 0;
    accent-color: #496d4c
}

.shader-slider__range-row output {
    min-width: 36px;
    color: #3f6846;
    font: 600 10px/1 Arial,sans-serif;
    text-align: right
}

.shader-slider__setting--toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.shader-slider__setting--toggle input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #496d4c
}

.shader-slider__effect-label {
    display: grid;
    gap: 2px;
    padding: 0 6px;
    color: #77776d;
    font: 8px/1.1 Arial,sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase
}

.shader-slider__effect {
    max-width: 110px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #292921;
    font: 11px/1.25 Arial,sans-serif;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer
}

.shader-demo {
    min-height: 100vh;
    margin: 0;
    background: #eeede6;
    color: #292921;
    font-family: Arial,sans-serif
}

.shader-demo * {
    box-sizing: border-box
}

.shader-demo__header {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px clamp(20px,4vw,64px);
    border-bottom: 1px solid rgb(41 41 33 / 9%);
    color: #77776d;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase
}

.shader-demo__back {
    color: #3f6846;
    text-decoration: none
}

.shader-demo__main {
    width: min(1440px,calc(100% - 48px));
    margin: 0 auto;
    padding: clamp(42px,7vh,86px) 0 32px
}

.shader-demo__eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #71816b;
    font-size: 10px;
    letter-spacing: .15em;
    text-transform: uppercase
}

.shader-demo__eyebrow span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #bc8268
}

.shader-demo__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
    margin: 22px 0 28px
}

.shader-demo__heading h1 {
    margin: 0;
    font-family: Georgia,serif;
    font-size: clamp(40px,6vw,76px);
    font-weight: 600;
    line-height: .92;
    letter-spacing: -.065em
}

.shader-demo__heading h1 em {
    color: #496d4c
}

.shader-demo__heading p {
    max-width: 360px;
    margin: 0 0 4px;
    color: #686960;
    font-size: 13px;
    line-height: 1.65
}

.shader-demo__heading code,.shader-demo__footer code {
    color: #3f6846;
    font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size: .9em
}

.shader-demo__slider {
    position: relative;
    isolation: isolate;
    min-height: clamp(320px,48vw,620px);
    overflow: hidden;
    border-radius: 24px;
    background: #e7e0d2;
    touch-action: pan-y
}

.shader-demo__slider>img {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 66% center;
    transition: opacity .18s ease-out
}

.shader-demo__shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(90deg,rgb(247 245 239 / 94%),rgb(247 245 239 / 55%) 34%,transparent 70%),linear-gradient(0deg,rgb(41 41 33 / 35%),transparent 24%);
    pointer-events: none
}

.shader-demo__caption {
    position: absolute;
    right: 22px;
    bottom: 22px;
    left: 22px;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #fffefa;
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-shadow: 0 1px 8px rgb(0 0 0 / 25%);
    pointer-events: none
}

.shader-demo__counter {
    min-width: 44px
}

.shader-demo__counter .shader-slider__progress {
    width: clamp(58px,8vw,96px)
}

.shader-demo__footer {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 2px;
    color: #77776d;
    font-size: 10px;
    letter-spacing: .03em
}

@media(max-width: 700px) {
    .shader-slider__controls {
        right:10px;
        bottom: 10px;
        gap: 4px;
        padding: 5px
    }

    .shader-slider__button {
        width: 30px;
        height: 30px;
        font-size: 18px
    }

    .shader-slider__settings {
        right: -1px;
        padding: 13px
    }

    .hero-topline__counter {
        gap: 7px
    }

    .hero-topline__counter .shader-slider__progress {
        width: 58px;
        gap: 3px
    }

    .shader-demo__header {
        min-height: 64px;
        font-size: 8px
    }

    .shader-demo__main {
        width: calc(100% - 32px);
        padding-top: 36px
    }

    .shader-demo__heading {
        display: block;
        margin-bottom: 20px
    }

    .shader-demo__heading h1 {
        font-size: clamp(38px,11vw,60px)
    }

    .shader-demo__heading p {
        margin-top: 18px;
        font-size: 12px
    }

    .shader-demo__slider {
        min-height: 400px;
        border-radius: 18px
    }

    .shader-demo__shade {
        background: linear-gradient(90deg,rgb(247 245 239 / 66%),transparent 80%),linear-gradient(0deg,rgb(41 41 33 / 40%),transparent 26%)
    }

    .shader-demo__footer {
        display: grid;
        gap: 7px;
        line-height: 1.5
    }
}

@media(prefers-reduced-motion:reduce) {
    .shader-slider__canvas,.shader-demo__slider>img,.shader-slider__button,.shader-slider__progress-fill {
        transition-duration: 1ms;
        animation-duration: 1ms!important
    }
}