:root {
    --bg: #F3EEE6;
    --ink: #16110F;
    --card: #fff;
    --mute: #6b625c;
    --line: rgba(22, 17, 15, .14);
    --red: #C8201B;
    --red2: #a51814;
    --dk: #16110F;
    --dkt: #F4EDE4
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth
}

body {
    font-family: 'Outfit', sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background .3s, color .3s
}

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

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

ul {
    list-style: none
}

h1,
h2,
h3,
.disp {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: .01em
}

.wrap {
    width: min(1240px, 92%);
    margin-inline: auto
}

section {
    padding: 96px 0
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--red)
}

.tag::before {
    content: "";
    width: 34px;
    height: 3px;
    background: var(--red)
}

h2 {
    font-size: clamp(2.4rem, 5.5vw, 4.6rem);
    margin: 14px 0 0
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 999px;
    font-weight: 600;
    font-size: .95rem;
    transition: .25s;
    border: 2px solid transparent;
    cursor: pointer
}

.btn-red {
    background: var(--red);
    color: #fff
}

.btn-red:hover {
    background: var(--red2);
    transform: translateY(-2px)
}

.btn-line {
    border-color: var(--ink)
}

.btn-line:hover {
    background: var(--ink);
    color: var(--bg)
}

/* top strip + header */
.strip {
    background: var(--dk);
    color: var(--dkt);
    font-size: .8rem;
    text-align: center;
    padding: 8px 12px;
    letter-spacing: .14em;
    text-transform: uppercase
}

.strip b {
    color: #ff6a62;
    font-weight: 600
}

header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line)
}

.hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 78px
}.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}
.logo-img {
    display: block;
    width: 145px;
    max-width: 100%;
    height: 48px;
    object-fit: contain;
    object-position: left center;
    transform: scale(2.08);
    transform-origin: left center;
}
/* Mobile */
/* Tablet */
@media (max-width: 1024px) {
    .logo-img {
        width: 175px;
        height: 46px;
        object-fit: contain;
        transform: scale(1.8);
        transform-origin: left center;
    }
}

/* Mobile View */
@media (max-width: 767px) {
    .logo-img {
        width: 120px;
        height: 42px;
        object-fit: contain;
        transform: scale(1.12);
        transform-origin: left center;
    }

    .logo {
        gap: 8px;
        flex-shrink: 0;
    }
}

/* Small Mobile View */
@media (max-width: 480px) {
    .logo-img {
        width: 105px;
        height: 38px;
        object-fit: contain;
        transform: scale(1.12);
        transform-origin: left center;
    }

    .logo {
        gap: 6px;
        flex-shrink: 0;
    }
}

/* Extra Small Mobile */
@media (max-width: 360px) {
    .logo-img {
        width: 95px;
        height: 35px;
        transform: scale(1.08);
        transform-origin: left center;
    }

    .logo {
        gap: 5px;
    }
}
nav {
    display: flex;
    gap: 6px
}

nav a {
    padding: 9px 16px;
    border-radius: 999px;
    font-weight: 500;
    font-size: .95rem;
    transition: .2s
}

nav a:hover,
nav a.active {
    background: var(--ink);
    color: var(--bg)
}

.act {
    display: flex;
    align-items: center;
    gap: 10px
}

.ib {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: .2s
}

.ib:hover,
.ib.is-active {
    background: var(--ink);
    color: var(--bg)
}

.menu-btn {
    display: none
}

.act .btn {
    padding: 11px 22px
}

/* hero */
.hero {
    padding: 56px 0 70px;
    position: relative
}

.hero .wrap {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 50px;
    align-items: center
}

.hero h1 {
    font-size: clamp(3.6rem, 10.5vw, 9rem);
    line-height: .9
}

.hero h1 .o {
    -webkit-text-stroke: 2px var(--ink);
    color: transparent
}

.hero h1 em {
    font-style: normal;
    color: var(--red)
}

.hero p {
    max-width: 480px;
    color: var(--mute);
    font-size: 1.1rem;
    margin: 26px 0 30px
}

.hero-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 14px
}

.trust {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    margin-top: 38px;
    padding-top: 26px;
    border-top: 1px solid var(--line)
}

.trust div {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.25
}

.trust i {
    color: var(--red);
    font-size: 1.3rem
}

.vis {
    position: relative;
    max-width: 480px;
    margin-inline: auto;
    width: 100%
}

.arch {
    aspect-ratio: 3/4;
    border-radius: 999px 999px 28px 28px;
    overflow: hidden;
    border: 6px solid var(--ink);
    box-shadow: 14px 14px 0 var(--red)
}

.badge {
    position: absolute;
    top: -34px;
    inset-inline-start: -40px;
    width: 136px;
    height: 136px;
    animation: spin 18s linear infinite
}

.badge svg {
    width: 100%;
    height: 100%
}

.badge-c {
    position: absolute;
    top: -34px;
    inset-inline-start: -40px;
    width: 136px;
    height: 136px;
    border-radius: 50%;
    background: var(--red);
    z-index: -1
}

.price {
    position: absolute;
    bottom: 34px;
    inset-inline-end: -26px;
    background: var(--card);
    border: 2px solid var(--ink);
    border-radius: 14px;
    padding: 12px 18px;
    display: flex;
    gap: 12px;
    align-items: center;
    transform: rotate(4deg);
    box-shadow: 6px 6px 0 var(--ink)
}

.price i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: grid;
    place-items: center
}

.price strong {
    display: block;
    font-size: .95rem;
    line-height: 1.2
}

.price small {
    color: var(--mute);
    font-size: .78rem
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

/* marquee */
.mq {
    background: var(--red);
    color: #fff;
    overflow: hidden;
    padding: 18px 0;
    margin: 10px 0;
    white-space: nowrap
}

.mq div {
    display: inline-flex;
    gap: 34px;
    animation: mq 26s linear infinite;
    font-family: 'Anton';
    font-size: 1.8rem;
    letter-spacing: .06em;
    text-transform: uppercase
}

.mq span::after {
    content: "✦";
    margin-inline-start: 34px;
    opacity: .6
}

@keyframes mq {
    to {
        transform: translateX(-50%)
    }
}

/* categories */
.sh {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    flex-wrap: wrap;
    margin-bottom: 46px
}

.sh p {
    max-width: 380px;
    color: var(--mute)
}

.cats {
    display: flex;
    gap: 14px;
    height: 520px
}

.cat {
    position: relative;
    flex: 1;
    border-radius: 22px;
    overflow: hidden;
    color: #fff;
    transition: flex .5s cubic-bezier(.2, .8, .2, 1)
}

.cat:hover {
    flex: 2.6
}

.cat img {
    position: absolute;
    inset: 0;
    transition: transform .6s
}

.cat:hover img {
    transform: scale(1.07)
}

.cat::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 6, 5, .88), rgba(10, 6, 5, .1) 60%)
}

.cat>*:not(img) {
    position: absolute;
    z-index: 2
}

.cat .n {
    top: 20px;
    inset-inline-start: 22px;
    font-family: 'Anton';
    font-size: 1.3rem;
    opacity: .85
}

.cat .go {
    top: 18px;
    inset-inline-end: 18px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    color: var(--dk);
    display: grid;
    place-items: center;
    transition: .3s
}

.cat:hover .go {
    background: var(--red);
    color: #fff;
    transform: rotate(45deg)
}

.cat .tx {
    bottom: 24px;
    inset-inline: 24px
}

.cat h3 {
    font-size: 2.1rem
}

.cat p {
    font-size: .92rem;
    opacity: .85;
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s, margin .4s
}

.cat:hover p {
    max-height: 60px;
    margin-top: 8px
}

/* cuts bento */
.cuts {
    background: var(--card)
}

.bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 250px;
    gap: 16px
}

.cut {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    color: #fff;
    display: block
}

.cut.big {
    grid-column: span 2;
    grid-row: span 2
}

.cut img {
    position: absolute;
    inset: 0;
    transition: transform .6s
}

.cut:hover img {
    transform: scale(1.06)
}

.cut::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 6, 5, .85), transparent 62%)
}

.cut>div {
    position: absolute;
    z-index: 2;
    inset-inline: 22px;
    bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px
}

.cut .pill {
    position: absolute;
    z-index: 2;
    top: 18px;
    inset-inline-start: 18px;
    background: #fff;
    color: var(--dk);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    padding: 5px 12px;
    border-radius: 999px;
    text-transform: uppercase
}

.cut h3 {
    font-size: 1.7rem
}

.cut.big h3 {
    font-size: 2.8rem
}

.cut p {
    font-size: .9rem;
    opacity: .85;
    margin-top: 6px
}

.cut .ar {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--red);
    display: grid;
    place-items: center;
    transition: .3s
}

.cut:hover .ar {
    transform: rotate(45deg)
}

.more {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 34px
}

/* steps */
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px
}

.step .im {
    aspect-ratio: 4/3;
    border-radius: 22px;
    overflow: hidden;
    position: relative
}

.step .im span {
    position: absolute;
    top: 14px;
    inset-inline-start: 18px;
    font-family: 'Anton';
    font-size: 4.4rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px #fff
}

.step small {
    display: block;
    margin-top: 18px;
    color: var(--red);
    font-weight: 700;
    letter-spacing: .16em;
    font-size: .74rem
}

.step h3 {
    font-size: 1.9rem;
    margin-top: 6px
}

.step:nth-child(2) {
    margin-top: 46px
}

/* sourcing */
.src {
    background: var(--dk);
    color: var(--dkt);
    position: relative;
    overflow: hidden
}

.src::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url(../images/pexels-sora-k-617967805-30759957.jpg) center/cover;
    opacity: .14
}

.src .wrap {
    position: relative;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 60px;
    align-items: start
}

.src h2 em {
    font-style: normal;
    color: #ff6a62
}

.src .lead {
    color: #b8aca3;
    margin: 22px 0 28px;
    max-width: 440px
}

.note {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #ff6a62
}

.sl {
    display: grid;
    gap: 14px
}

.sl li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 22px 24px;
    border: 1px solid rgba(244, 237, 228, .16);
    border-radius: 18px;
    background: rgba(255, 255, 255, .04);
    transition: .3s
}

.sl li:hover {
    background: var(--red);
    border-color: var(--red);
    transform: translateX(8px)
}

.sl .ic {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .1);
    display: grid;
    place-items: center;
    font-size: 1.3rem
}

.sl small {
    font-size: .7rem;
    letter-spacing: .16em;
    color: #ff8a83
}

.sl li:hover small {
    color: #fff
}

.sl h3 {
    font-family: 'Outfit';
    font-weight: 600;
    font-size: 1.15rem;
    text-transform: none;
    margin: 2px 0 4px;
    letter-spacing: 0
}

.sl p {
    font-size: .9rem;
    color: #b8aca3
}

.sl li:hover p {
    color: #ffe9e7
}

.sl .n {
    font-family: 'Anton';
    font-size: 2rem;
    opacity: .35
}

/* why tabs */
.tabs {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 30px;
    align-items: stretch
}

.tl {
    display: grid;
    gap: 10px;
    align-content: start
}

.tl button {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: start;
    padding: 20px 22px;
    border-radius: 18px;
    border: 1.5px solid var(--line);
    background: transparent;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    transition: .25s
}

.tl button b {
    font-family: 'Anton';
    font-weight: 400;
    font-size: 1.5rem;
    opacity: .35
}

.tl button span {
    font-family: 'Anton';
    text-transform: uppercase;
    font-size: 1.35rem;
    letter-spacing: .02em
}

.tl button:hover {
    border-color: var(--ink)
}

.tl button.on {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink)
}

.tl button.on b {
    color: #ff6a62;
    opacity: 1
}

.tp {
    background: var(--red);
    color: #fff;
    border-radius: 26px;
    padding: 48px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    min-height: 360px;
    position: relative;
    overflow: hidden
}

.tp.on {
    display: flex;
    animation: fi .5s
}

.tp::after {
    content: "";
    position: absolute;
    inset-inline-end: -60px;
    bottom: -60px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    border: 34px solid rgba(255, 255, 255, .12)
}

.tp>i {
    font-size: 3rem
}

.tp h3 {
    font-size: clamp(2rem, 4vw, 3.2rem);
    margin-bottom: 14px
}

.tp p {
    max-width: 420px;
    font-size: 1.1rem;
    opacity: .92
}

.tp small {
    letter-spacing: .2em;
    font-weight: 700;
    font-size: .76rem;
    opacity: .8;
    position: relative;
    z-index: 1
}

@keyframes fi {
    from {
        opacity: 0;
        transform: translateY(14px)
    }
}

/* craft */
.craft .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center
}

.cv {
    position: relative
}

.cv .ph {
    aspect-ratio: 1/1.05;
    border-radius: 28px;
    overflow: hidden
}

.cv::before {
    content: "";
    position: absolute;
    inset: 22px -22px -22px 22px;
    border: 3px solid var(--red);
    border-radius: 28px;
    z-index: -1
}

.stamp {
    position: absolute;
    bottom: -26px;
    inset-inline-start: -26px;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--bg);
    display: grid;
    place-content: center;
    text-align: center;
    font-size: .68rem;
    letter-spacing: .18em;
    font-weight: 700;
    transform: rotate(-10deg);
    border: 4px solid var(--bg)
}

.stamp i {
    font-size: 1.7rem;
    color: #ff6a62;
    margin-bottom: 6px
}

.cd p.l {
    color: var(--mute);
    margin: 22px 0 10px;
    max-width: 480px
}

.dt {
    border-top: 1px solid var(--line)
}

.dt div {
    display: flex;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line)
}

.dt b {
    font-family: 'Anton';
    font-weight: 400;
    font-size: 1.8rem;
    color: var(--red);
    line-height: 1.1
}

.dt h3 {
    font-family: 'Outfit';
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 2px
}

.dt p {
    color: var(--mute);
    font-size: .94rem
}

.cd .btn {
    margin-top: 30px
}

/* cta */
.cta {
    padding: 60 0 96px
}

.cta .box {
    background: var(--dk);
    color: var(--dkt);
    border-radius: 34px;
    padding: 70px 56px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden
}

.cta .box::before {
    content: "CUT";
    position: absolute;
    inset-inline-end: -10px;
    bottom: -60px;
    font-family: 'Anton';
    font-size: 15rem;
    line-height: 1;
    color: rgba(255, 255, 255, .05)
}

.cta small {
    letter-spacing: .2em;
    font-size: .76rem;
    font-weight: 600;
    color: #ff8a83
}

.cta h2 {
    margin-top: 10px;
    max-width: 640px
}

.cta h2 span {
    color: #ff6a62
}

/* footer */
footer {
    background: var(--dk);
    color: var(--dkt);
    padding: 76px 0 0
}

.fg {
    display: grid;
    grid-template-columns: 1.4fr .8fr .8fr 1.2fr;
    gap: 44px
}

footer .logo small {
    color: #a99e96
}

footer p.d {
    margin: 20px 0;
    color: #a99e96;
    max-width: 330px;
    font-size: .95rem
}

.so {
    display: flex;
    gap: 10px
}

.so a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(244, 237, 228, .25);
    display: grid;
    place-items: center;
    transition: .2s
}

.so a:hover {
    background: var(--red);
    border-color: var(--red)
}

footer h3 {
    font-family: 'Outfit';
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .2em;
    color: #ff8a83;
    margin-bottom: 18px
}

footer li {
    margin-bottom: 10px;
    color: #cfc4bb;
    font-size: .95rem
}

footer li a:hover,
.fc a:hover {
    color: #ff6a62
}

.fc p {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    color: #cfc4bb;
    font-size: .95rem
}

.fc i {
    color: #ff6a62;
    margin-top: 5px
}

.fc .btn {
    margin-top: 10px;
    padding: 12px 22px
}

.word {
    font-family: 'Anton';
    text-transform: uppercase;
    text-align: center;
    font-size: clamp(3rem, 13.5vw, 12rem);
    line-height: .9;
    color: rgba(255, 255, 255, .06);
    margin-top: 50px;
    white-space: nowrap;
    overflow: hidden
}

.fb {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 22px 0;
    border-top: 1px solid rgba(244, 237, 228, .14);
    font-size: .88rem;
    color: #a99e96
}

.rv {
    transition: opacity .8s, transform .8s
}

html.js .rv {
    opacity: 0;
    transform: translateY(30px)
}

html.js .rv.in {
    opacity: 1;
    transform: none
}

@media(max-width:1000px) {

    .hero .wrap,
    .src .wrap,
    .craft .wrap,
    .tabs {
        grid-template-columns: 1fr
    }

    .vis {
        max-width: 400px
    }

    .fg {
        grid-template-columns: 1fr 1fr
    }

    .steps {
        grid-template-columns: 1fr
    }

    .step:nth-child(2) {
        margin-top: 0
    }

    .cats {
        flex-direction: column;
        height: auto
    }

    .cat {
        flex: none;
        height: 230px
    }

    .cat:hover {
        flex: none
    }

    .cat p {
        max-height: 60px;
        margin-top: 8px
    }

    .bento {
        grid-template-columns: 1fr 1fr
    }

    .cut.big {
        grid-column: span 2
    }
}

@media(max-width:850px) {
    .strip {
        display: none
    }

    .menu-btn {
        display: grid
    }

    .act .btn {
        display: none
    }

    nav {
        position: fixed;
        inset: calc(78px + 34px) 0 auto 0;
        background: var(--bg);
        flex-direction: column;
        padding: 20px 4%;
        border-bottom: 1px solid var(--line);
        transform: translateY(-130%);
        transition: transform .35s;
        z-index: 40;
        gap: 4px
    }

    nav {
        visibility: hidden;
        pointer-events: none;
        transition: transform .35s, visibility 0s linear .35s
    }

    nav.is-open {
        transform: none;
        visibility: visible;
        pointer-events: auto;
        transition: transform .35s, visibility 0s
    }

    nav a {
        padding: 14px 16px;
        font-size: 1.05rem
    }
}

@media(max-width:600px) {
    section {
        padding: 70px 0
    }

    .bento {
        grid-template-columns: 1fr;
        grid-auto-rows: 240px
    }

    .cut.big {
        grid-column: auto;
        grid-row: span 2
    }

    .fg {
        grid-template-columns: 1fr
    }

    .tp {
        padding: 30px
    }

    .cta .box {
        padding: 44px 26px
    }

    .badge,
    .badge-c {
        width: 104px;
        height: 104px;
        inset-inline-start: -14px
    }

    .price {
        inset-inline-end: -8px
    }

    .sl li {
        grid-template-columns: auto 1fr
    }

    .sl .n {
        display: none
    }
}

@media(prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important
    }
}

/* ===== HOME BANNER ===== */
.ban {
    position: relative;
    min-height: calc(100vh - 112px);
    display: grid;
    place-items: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
    padding: 90px 0 70px
}

.ban>img {
    position: absolute;
    inset: 0;
    transform: scale(1.15);
    animation: kb 14s ease-out forwards
}

@keyframes kb {
    to {
        transform: scale(1)
    }
}

.ban::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 40%, rgba(10, 6, 5, .45), rgba(10, 6, 5, .88))
}

.ban .wrap {
    position: relative;
    z-index: 2
}

.ban h1 {
    font-size: clamp(3.8rem, 13vw, 11.5rem);
    line-height: .88;
    margin: 18px 0 22px
}

.ban h1 em {
    font-style: normal;
    color: #ff4a42
}

.ban p {
    max-width: 540px;
    margin: 0 auto 30px;
    font-size: 1.12rem;
    opacity: .9
}

.btn-wh {
    border-color: #fff;
    color: #fff
}

.btn-wh:hover {
    background: #fff;
    color: #16110F
}

.bi {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 860px;
    margin: 54px auto 0;
    padding: 18px 22px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .1);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .2);
    text-align: start
}

.bi div {
    display: flex;
    align-items: center;
    gap: 12px
}

.bi i {
    font-size: 1.5rem;
    color: #ff6a62
}

.bi b {
    display: block;
    font-size: .95rem
}

.bi small {
    opacity: .75;
    font-size: .8rem
}

/* ===== PAGE BANNER ===== */
.pb {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: flex-end;
    color: #fff;
    overflow: hidden;
    padding: 70px 0 54px
}

.pb>img {
    position: absolute;
    inset: 0;
    transform: scale(1.12);
    animation: kb 12s ease-out forwards
}

.pb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 6, 5, .92), rgba(10, 6, 5, .35))
}

.pb .wrap {
    position: relative;
    z-index: 2
}

.pb h1 {
    font-size: clamp(3.2rem, 9vw, 7.5rem);
    margin: 10px 0 12px
}

.pb p {
    max-width: 520px;
    opacity: .88;
    font-size: 1.1rem
}

.cr {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .82rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600
}

.cr i {
    font-size: .6rem;
    opacity: .6
}

.cr span {
    color: #ff6a62
}

/* ===== ENTRANCE ANIMATION ===== */
.ld {
    position: fixed;
    inset: 0;
    z-index: 300;
    pointer-events: none;
    display: none
}

html.js .ld {
    display: block
}

.ld i {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50.5%;
    background: #16110F;
    transition: transform .9s cubic-bezier(.77, 0, .18, 1) .55s
}

.ld .l {
    left: 0
}

.ld .r {
    right: 0
}

.ld .lg {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: 'Anton';
    font-size: clamp(2rem, 6vw, 4rem);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    animation: lg 1.2s ease both;
    transition: opacity .3s .4s
}

.ld .lg::after {
    content: "";
    position: absolute;
    margin-top: 92px;
    width: 120px;
    height: 3px;
    background: #C8201B;
    animation: bar 1s ease both
}

@keyframes lg {
    from {
        opacity: 0;
        letter-spacing: .3em
    }
}

@keyframes bar {
    from {
        width: 0
    }
}

html.ready .ld .l {
    transform: translateX(-101%)
}

html.ready .ld .r {
    transform: translateX(101%)
}

html.ready .ld .lg {
    opacity: 0
}

html:not(.ready).js body {
    overflow: hidden
}

html.js .ea {
    opacity: 0;
    transform: translateY(46px)
}

html.ready .ea {
    animation: up .9s cubic-bezier(.2, .8, .2, 1) forwards;
    animation-delay: calc(var(--d, 0)*.13s + .85s)
}

@keyframes up {
    to {
        opacity: 1;
        transform: none
    }
}

/* ===== SHARED INNER-PAGE COMPONENTS ===== */
.gr {
    display: grid;
    gap: 18px
}

.g3 {
    grid-template-columns: repeat(3, 1fr)
}

.g4 {
    grid-template-columns: repeat(4, 1fr)
}

.cd2 {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 30px;
    transition: .3s
}

.cd2:hover {
    transform: translateY(-6px);
    border-color: var(--red);
    box-shadow: 0 18px 40px -22px var(--red)
}

.cd2 .ci {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--red);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    margin-bottom: 18px;
    transform: rotate(-6deg)
}

.cd2 h3 {
    font-size: 1.5rem;
    margin-bottom: 8px
}

.cd2 p {
    color: var(--mute);
    font-size: .95rem
}

.cuts .cd2 {
    background: var(--bg)
}

.st b {
    font-family: 'Anton';
    font-weight: 400;
    font-size: 3.4rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--red);
    display: block;
    margin-bottom: 12px
}

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

.ft button {
    padding: 10px 22px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: transparent;
    color: var(--ink);
    font: 600 .92rem 'Outfit';
    cursor: pointer;
    transition: .2s
}

.ft button:hover {
    border-color: var(--ink)
}

.ft button.on {
    background: var(--red);
    border-color: var(--red);
    color: #fff
}

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

.pc {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 22px;
    overflow: hidden;
    transition: .3s
}

.pc:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -24px #000
}

.pc.hide {
    display: none
}

.pi {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden
}

.pi img {
    transition: transform .6s
}

.pc:hover .pi img {
    transform: scale(1.08)
}

.pi .pill {
    position: absolute;
    top: 14px;
    inset-inline-start: 14px;
    background: #fff;
    color: #16110F;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .14em;
    padding: 5px 12px;
    border-radius: 999px;
    text-transform: uppercase
}

.pt {
    padding: 22px
}

.pt h3 {
    font-size: 1.45rem
}

.pt p {
    color: var(--mute);
    font-size: .92rem;
    margin: 6px 0 14px
}

.pt a {
    font-weight: 600;
    color: var(--red);
    display: inline-flex;
    gap: 8px;
    align-items: center
}

.pt a:hover {
    gap: 14px
}

.sp {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center
}

.sp.rev .ph2 {
    order: 2
}

.ph2 {
    aspect-ratio: 1/1;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 16px 16px 0 var(--red)
}

.sp.rev .ph2 {
    box-shadow: -16px 16px 0 var(--red)
}

.lead2 {
    color: var(--mute);
    margin: 18px 0 20px;
    max-width: 480px
}

.ck {
    margin-bottom: 28px;
    display: grid;
    gap: 10px
}

.ck li {
    display: flex;
    gap: 12px;
    align-items: center;
    font-weight: 500
}

.ck i {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .7rem
}

.faq {
    max-width: 860px;
    margin: auto;
    display: grid;
    gap: 12px
}

.faq details {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 0 24px;
    transition: .3s
}

.faq details[open] {
    border-color: var(--red)
}

.faq summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 22px 0;
    font-weight: 600;
    font-size: 1.05rem
}

.faq summary::-webkit-details-marker {
    display: none
}

.faq summary i {
    color: var(--red);
    transition: .3s
}

.faq details[open] summary i {
    transform: rotate(45deg)
}

.faq p {
    color: var(--mute);
    padding-bottom: 22px
}

.fm {
    display: grid;
    gap: 16px;
    margin-top: 26px
}

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

.fm label {
    display: grid;
    gap: 8px;
    font-weight: 600;
    font-size: .9rem
}

.fm input,
.fm select,
.fm textarea {
    font: inherit;
    padding: 15px 18px;
    border-radius: 14px;
    border: 1.5px solid var(--line);
    background: var(--card);
    color: var(--ink);
    outline: none;
    transition: .2s;
    width: 100%
}

.fm input:focus,
.fm select:focus,
.fm textarea:focus {
    border-color: var(--red);
    box-shadow: 0 0 0 4px rgba(200, 32, 27, .15)
}

.fm .btn {
    justify-self: start
}

.ok {
    display: none;
    color: var(--red);
    font-weight: 600
}

.ok.show {
    display: block
}

.map {
    min-height: 340px;
    border-radius: 26px;
    border: 2px dashed var(--line);
    display: grid;
    place-content: center;
    text-align: center;
    gap: 8px;
    color: var(--mute)
}

.map i {
    font-size: 2.6rem;
    color: var(--red)
}

.map b {
    color: var(--ink);
    font-size: 1.2rem
}

@media(max-width:1000px) {

    .g4,
    .pg {
        grid-template-columns: 1fr 1fr
    }

    .g3 {
        grid-template-columns: 1fr 1fr
    }

    .sp {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .sp.rev .ph2 {
        order: 0
    }

    .ph2 {
        max-width: 480px
    }

    #order-enquiry .ph2 {
        width: 100%;
        max-width: none
    }

    .custom-cuts-feature .ph2 {
        width: 100%;
        max-width: none
    }

    .sp.custom-cuts-feature .ph2 {
        order: 2
    }

    .sp.custom-cuts-feature>.rv:not(.ph2) {
        order: 1
    }

    .h2-quality>div:not(.ph2) {
        order: 1
    }

    .h2-quality>.ph2 {
        order: 2;
        width: 100%;
        max-width: none
    }

    .source-feature>div:not(.ph2) {
        order: 1
    }

    .source-feature>.ph2 {
        order: 2;
        width: 100%;
        max-width: none
    }
}

@media(max-width:600px) {

    .g3,
    .g4,
    .pg,
    .fr,
    .bi {
        grid-template-columns: 1fr
    }

    .pb {
        min-height: 340px
    }

    .ban {
        padding-top: 60px
    }
}

/* ===== V2 INNER PAGES ===== */
.rows {
    border-top: 1px solid var(--line)
}

.row {
    display: grid;
    grid-template-columns: 70px 1fr 280px 52px;
    align-items: center;
    gap: 26px;
    padding: 24px 8px;
    border-bottom: 1px solid var(--line);
    transition: .3s
}

.row:hover {
    background: var(--bg);
    padding-inline: 24px
}

.row>b {
    font-family: 'Anton';
    font-weight: 400;
    font-size: 2rem;
    color: var(--red)
}

.row h3 {
    font-size: clamp(2rem, 4.2vw, 3.5rem)
}

.row p {
    color: var(--mute);
    margin-top: 4px
}

.rp {
    height: 130px;
    border-radius: 999px;
    overflow: hidden;
    transition: .5s
}

.row:hover .rp {
    border-radius: 22px
}

.row .go {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1.5px solid var(--ink);
    display: grid;
    place-items: center;
    transition: .3s
}

.row:hover .go {
    background: var(--red);
    border-color: var(--red);
    color: #fff
}

.trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.trio .cut {
    height: 440px
}

.cl {
    margin-top: 26px
}

.cl li {
    display: flex;
    gap: 22px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(244, 237, 228, .16)
}

.cl b {
    font-family: 'Anton';
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 1;
    color: #ff6a62
}

.cl small {
    font-size: .7rem;
    letter-spacing: .16em;
    color: #ff8a83
}

.cl h3 {
    font-family: 'Outfit';
    font-weight: 600;
    font-size: 1.25rem;
    text-transform: none;
    letter-spacing: 0;
    margin: 2px 0 4px
}

.cl p {
    color: #b8aca3;
    font-size: .94rem
}

.tm {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
    text-align: center
}

.tm::before {
    content: "";
    position: absolute;
    top: 92px;
    inset-inline: 12%;
    border-top: 2px dashed var(--line)
}

.tm>div {
    position: relative
}

.tm>div>b {
    font-family: 'Anton';
    font-weight: 400;
    font-size: 1.6rem;
    color: var(--red);
    display: block;
    margin-bottom: 8px
}

.tm .c {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 20px;
    border: 5px solid var(--bg);
    outline: 3px solid var(--red);
    position: relative
}

.tm h3 {
    font-size: 1.6rem;
    margin-bottom: 6px
}

.tm p {
    color: var(--mute);
    font-size: .94rem;
    max-width: 230px;
    margin: auto
}

.tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px
}

.tile {
    position: relative;
    aspect-ratio: 1;
    border-radius: 22px;
    overflow: hidden;
    color: #fff
}

.tile img {
    position: absolute;
    inset: 0;
    transition: transform .6s
}

.tile:hover img {
    transform: scale(1.08)
}

.tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 6, 5, .85), transparent 60%)
}

.tile span {
    position: absolute;
    z-index: 2;
    bottom: 20px;
    inset-inline: 22px;
    font-family: 'Anton';
    text-transform: uppercase;
    font-size: 1.7rem;
    letter-spacing: .02em
}

.tile small {
    display: block;
    font-family: 'Outfit';
    font-size: .85rem;
    opacity: .85;
    text-transform: none;
    letter-spacing: 0
}

.szs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: end
}

.sz .im {
    border-radius: 24px;
    overflow: hidden;
    border-bottom: 6px solid var(--red)
}

.sz h3 {
    font-size: 2.4rem;
    margin: 16px 0 4px
}

.sz p {
    color: var(--mute)
}

.tsplit {
    display: grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 60px;
    align-items: start
}

.tsticky {
    position: sticky;
    top: 110px
}

.tr {
    display: grid;
    grid-template-columns: 80px 1fr 200px;
    gap: 26px;
    align-items: center;
    padding: 26px 0;
    border-bottom: 1px solid var(--line)
}

.tr:first-child {
    border-top: 1px solid var(--line)
}

.tr>b {
    font-family: 'Anton';
    font-weight: 400;
    font-size: 3.2rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 2px var(--red)
}

.tr h3 {
    font-size: 2rem
}

.tr p {
    color: var(--mute)
}

.tr .rp {
    height: 120px;
    border-radius: 18px
}

.chs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 2px solid var(--ink)
}

.chs>div {
    padding: 30px 24px 12px;
    border-inline-end: 1px solid var(--line)
}

.chs>div:last-child {
    border: 0
}

.chs small {
    color: var(--red);
    font-weight: 700;
    letter-spacing: .18em;
    font-size: .74rem
}

.chs b {
    display: block;
    font-family: 'Anton';
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.8rem;
    line-height: 1.1;
    margin: 10px 0 8px;
    word-break: break-word
}

.chs span {
    color: var(--mute);
    font-size: .94rem
}

.vs {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    min-height: 460px
}

.vs>img {
    position: absolute;
    inset: 0
}

.vs::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(10, 6, 5, .35)
}

.vc {
    position: absolute;
    z-index: 2;
    bottom: 30px;
    inset-inline-start: 30px;
    background: var(--card);
    padding: 32px;
    border-radius: 22px;
    max-width: 360px;
    width: calc(100% - 60px)
}

.vc h3 {
    font-size: 2.4rem;
    margin: 8px 0 10px
}

.vc p {
    color: var(--mute);
    margin-bottom: 6px
}

.vc .btn {
    margin-top: 16px
}

@media(max-width:1000px) {

    .trio,
    .tiles {
        grid-template-columns: 1fr 1fr
    }

    .tm,
    .chs {
        grid-template-columns: 1fr 1fr
    }

    .tm::before {
        display: none
    }

    .tsplit {
        grid-template-columns: 1fr;
        gap: 30px
    }

    .tsticky {
        position: static
    }

    .szs {
        grid-template-columns: 1fr 1fr
    }

    .chs>div:nth-child(2) {
        border: 0
    }
}

@media(max-width:700px) {
    .row {
        grid-template-columns: 44px 1fr 44px
    }

    .row .rp {
        display: none
    }

    .trio,
    .tiles,
    .tm,
    .szs,
    .chs {
        grid-template-columns: 1fr
    }

    .tr {
        grid-template-columns: 50px 1fr
    }

    .tr .rp {
        grid-column: 1/-1
    }

    .trio .cut {
        height: 340px
    }

    .chs>div {
        border: 0;
        border-bottom: 1px solid var(--line)
    }
}

/* ===== HEADER DROPDOWN ===== */
.dd {
    position: relative
}

.dda {
    display: inline-flex;
    align-items: center;
    gap: 8px
}

.dda i {
    font-size: .62rem;
    transition: transform .25s
}

.dd:hover .dda i,
.dd:focus-within .dda i {
    transform: rotate(180deg)
}

.dd:hover .dda,
.dd:focus-within .dda {
    background: var(--ink);
    color: var(--bg)
}

.dm {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 180px;
    padding: 8px;
    margin-top: 6px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 22px 40px -20px rgba(0, 0, 0, .35);
    display: grid;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .25s;
    z-index: 60
}

.dd::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px
}

.dd:hover .dm,
.dd:focus-within .dm {
    opacity: 1;
    visibility: visible;
    transform: none
}

.dm a {
    border-radius: 10px;
    padding: 11px 16px
}

/* ===== HOME 2 ===== */
.h2h {
    padding: 60px 0 80px
}

.h2h .wrap {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 60px;
    align-items: center
}

.h2h h1 {
    font-size: clamp(3.2rem, 8vw, 6.8rem);
    line-height: .95;
    margin: 16px 0 22px
}

.h2h h1 em {
    font-style: normal;
    color: var(--red)
}

.col {
    position: relative;
    aspect-ratio: 1/1.05;
    max-width: 540px;
    margin-inline: auto;
    width: 100%
}

.col .a {
    position: absolute;
    inset: 0 16% 12% 0;
    border-radius: 30px;
    overflow: hidden
}

.col .b {
    position: absolute;
    inset-inline-end: 0;
    bottom: 0;
    width: 50%;
    aspect-ratio: 1;
    border-radius: 26px;
    overflow: hidden;
    border: 8px solid var(--bg)
}

.col .q {
    position: absolute;
    top: 26px;
    inset-inline-end: 0;
    background: var(--red);
    color: #fff;
    border-radius: 16px;
    padding: 14px 20px;
    box-shadow: 0 14px 30px -14px var(--red)
}

.col .q b {
    display: block;
    font-weight: 600
}

.col .q small {
    opacity: .85
}

.qsw {
    padding: 0
}

.qs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-block: 2px solid var(--ink)
}

.qs>div {
    padding: 28px 24px;
    border-inline-end: 1px solid var(--line)
}

.qs>div:last-child {
    border: 0
}

.qs b {
    display: block;
    font-family: 'Anton';
    font-weight: 400;
    text-transform: uppercase;
    font-size: 1.6rem
}

.qs span {
    color: var(--mute);
    font-size: .92rem
}

.sel {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 30px;
    align-items: stretch
}

.sl2 {
    display: grid;
    gap: 10px;
    align-content: start
}

.sl2 button {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    border-radius: 18px;
    border: 1.5px solid var(--line);
    background: transparent;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    text-align: start;
    transition: .25s
}

.sl2 button b {
    font-family: 'Anton';
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--red)
}

.sl2 button span {
    flex: 1;
    font-family: 'Anton';
    text-transform: uppercase;
    font-size: 1.5rem
}

.sl2 button i {
    opacity: 0;
    transform: translateX(-8px);
    transition: .25s
}

.sl2 button:hover {
    border-color: var(--ink)
}

.sl2 button.on {
    background: var(--red);
    border-color: var(--red);
    color: #fff
}

.sl2 button.on b {
    color: #fff
}

.sl2 button.on i {
    opacity: 1;
    transform: none
}

.prev {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    min-height: 520px
}

.prev>img {
    position: absolute;
    inset: 0;
    transition: opacity .35s
}

.prev>img.fade {
    opacity: 0
}

.prev::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 6, 5, .55), transparent 50%)
}

.pcard {
    position: absolute;
    z-index: 2;
    inset-inline-start: 24px;
    bottom: 24px;
    max-width: 340px;
    background: var(--card);
    padding: 26px;
    border-radius: 20px
}

.pcard small {
    color: var(--red);
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: .72rem
}

.pcard h3 {
    font-size: 2rem;
    margin: 6px 0 8px
}

.pcard p {
    color: var(--mute);
    margin-bottom: 16px
}

.sb {
    position: relative;
    padding: 110px 0;
    overflow: hidden;
    color: #F4EDE4
}

.sb>img {
    position: absolute;
    inset: 0
}

.sb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 6, 5, .2), rgba(10, 6, 5, .75))
}

[dir=rtl] .sb::after {
    transform: scaleX(-1)
}

.sb .wrap {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: flex-start
}

.sc {
    max-width: 560px;
    background: #16110F;
    border-radius: 28px;
    padding: 44px
}

.sc h2 {
    font-size: clamp(2.2rem, 4.5vw, 3.6rem)
}

.sc h2 em {
    font-style: normal;
    color: #ff6a62
}

.ccs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    text-align: center
}

.cc1 .c {
    width: min(220px, 100%);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto 18px;
    outline: 3px solid transparent;
    outline-offset: 6px;
    transition: .4s
}

.cc1:hover .c {
    outline-color: var(--red);
    transform: scale(1.04)
}

.cc1 h3 {
    font-size: 1.9rem
}

.cc1 span {
    color: var(--mute);
    font-size: .92rem;
    display: inline-flex;
    gap: 8px;
    align-items: center
}

.cc1:hover span {
    color: var(--red)
}

.pr {
    background: var(--red);
    color: #fff;
    text-align: center;
    padding: 90px 0
}

.pr small {
    letter-spacing: .24em;
    font-weight: 700;
    opacity: .85
}

.pr h2 {
    margin: 16px 0 30px;
    font-size: clamp(2.6rem, 7vw, 6rem)
}

@media(max-width:1000px) {

    .h2h .wrap,
    .sel {
        grid-template-columns: 1fr
    }

    .qs,
    .ccs {
        grid-template-columns: 1fr 1fr
    }

    .qs>div:nth-child(2) {
        border: 0
    }

    .prev {
        min-height: 420px
    }
}

@media(max-width:850px) {
    .dd {
        display: grid
    }

    .dda i {
        display: none
    }

    .dda i {
        display: inline-block
    }

    .dm {
        position: static;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: 0;
        background: transparent;
        margin: 0;
        padding: 0 0 0 18px;
        min-width: 0
    }

    .dd.is-open .dm {
        display: grid
    }

    .dd.is-open .dda i {
        transform: rotate(180deg)
    }

    [dir=rtl] .dm {
        padding: 0 18px 0 0
    }

    .dd::after {
        display: none
    }

    .dm a {
        font-size: .98rem;
        padding: 10px 16px
    }
}

@media(max-width:600px) {

    .qs,
    .ccs {
        grid-template-columns: 1fr
    }

    .qs>div {
        border: 0;
        border-bottom: 1px solid var(--line)
    }

    .sc {
        padding: 30px
    }
}
/* ===== V4 NEW SECTIONS ===== */
/* carousel (Home 1) */
.car-nav{display:flex;gap:10px}
.trk{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 14px;scrollbar-width:none;outline:none}
.trk::-webkit-scrollbar{display:none}
.cp{flex:0 0 min(340px,82%);scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:24px;overflow:hidden;transition:.3s}
.cp:hover{transform:translateY(-6px);box-shadow:0 22px 40px -26px #000}
.cp .im{position:relative;aspect-ratio:4/5;overflow:hidden}
.cp .im img{transition:transform .6s}.cp:hover .im img{transform:scale(1.07)}
.cp .pill{position:absolute;top:16px;inset-inline-start:16px;background:#fff;color:#16110F;font-size:.7rem;font-weight:700;letter-spacing:.14em;padding:5px 12px;border-radius:999px;text-transform:uppercase}
.cb{padding:22px}.cb h3{font-size:1.6rem}.cb p{color:var(--mute);font-size:.93rem;margin:6px 0 14px}
.cb a{font-weight:600;color:var(--red);display:inline-flex;gap:8px;align-items:center}.cb a:hover{gap:14px}
/* comparison (Home 1) */
.cmpw{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.cmpimg{margin-top:26px;aspect-ratio:16/10;border-radius:24px;overflow:hidden}
.cmp{background:var(--bg);border:1px solid var(--line);border-radius:26px;overflow:hidden}
.cmp .r{display:grid;grid-template-columns:1.6fr 1fr 1fr;align-items:center;gap:10px;padding:20px 26px;border-bottom:1px solid var(--line);font-weight:500}
.cmp .r:last-child{border:0}
.cmp .r span:nth-child(n+2){text-align:center;font-size:1.3rem}
.cmp .y{color:var(--red)}.cmp .n{color:var(--mute);opacity:.55}
.cmp .h{background:#16110F;color:#F4EDE4;font-family:'Anton';text-transform:uppercase;letter-spacing:.03em}
.cmp .h span:nth-child(n+2){font-size:.95rem}
.cmp .h span:nth-child(2){color:#ff6a62}
/* faq (Home 1) */
.fq{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.fqs{position:sticky;top:110px}
.fqi{margin-top:28px;aspect-ratio:4/3;border-radius:999px 999px 26px 26px;overflow:hidden;border:5px solid var(--ink)}
.fq .faq{max-width:none;margin:0}
/* mosaic (Home 2) */
.mos{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:210px;gap:14px}
.m{position:relative;border-radius:20px;overflow:hidden;display:block;color:#fff}
.m1{grid-column:span 2;grid-row:span 2}.m3{grid-row:span 2}.m5{grid-column:span 2}
.m img{position:absolute;inset:0;transition:transform .7s}.m:hover img{transform:scale(1.08)}
.m::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,6,5,.75),transparent 55%);opacity:0;transition:.4s}
.m:hover::after{opacity:1}
.m span{position:absolute;z-index:2;inset-inline:18px;bottom:16px;font-family:'Anton';text-transform:uppercase;font-size:1.4rem;letter-spacing:.02em;opacity:0;transform:translateY(12px);transition:.4s}
.m:hover span{opacity:1;transform:none}
/* journey zigzag (Home 2) */
.zz{position:relative;display:grid;gap:40px}
.zz::before{content:"";position:absolute;top:0;bottom:0;left:50%;border-inline-start:2px dashed var(--line)}
.zi{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.zi::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:var(--red);border:4px solid var(--bg)}
.cuts .zi::after{border-color:var(--card)}
.zi:nth-child(even) .zt{order:2}
.zt{text-align:end}.zi:nth-child(even) .zt{text-align:start}
.zt b{font-family:'Anton';font-weight:400;font-size:4.4rem;line-height:1;color:transparent;-webkit-text-stroke:2px var(--red);display:block}
.zt small{display:block;color:var(--red);font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.74rem;margin:6px 0}
.zt h3{font-size:2.1rem;margin-bottom:8px}.zt p{color:var(--mute);max-width:380px;display:inline-block}
.zp{aspect-ratio:16/10;border-radius:24px;overflow:hidden}
/* hotline (Home 2) */
.hot .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.hot h2{margin-bottom:22px}
.hot .ph{display:block;font-family:'Anton';font-size:clamp(2.4rem,6.4vw,5.2rem);line-height:1;color:var(--red);margin-bottom:30px;letter-spacing:.01em;transition:.3s}
.hot .ph:hover{letter-spacing:.04em}
.hl{border-top:1px solid var(--line);max-width:480px}
.hl a{display:flex;justify-content:space-between;align-items:center;padding:18px 4px;border-bottom:1px solid var(--line);font-weight:600;transition:.25s}
.hl a:hover{color:var(--red);padding-inline:14px}
.pols{position:relative;min-height:440px}
.pol{position:absolute;width:58%;background:#fff;padding:12px 12px 14px;box-shadow:0 24px 44px -22px rgba(0,0,0,.5);transition:.4s}
.pol img{height:auto;aspect-ratio:1;border-radius:4px}
.pol figcaption{font-family:'Anton';text-transform:uppercase;letter-spacing:.06em;color:#16110F;text-align:center;padding-top:10px;font-size:1.1rem}
.pol.a{top:0;inset-inline-start:0;transform:rotate(-5deg)}
.pol.b{bottom:0;inset-inline-end:0;transform:rotate(4deg)}
.pols:hover .pol.a{transform:rotate(-2deg) translateY(-6px)}.pols:hover .pol.b{transform:rotate(2deg) translateY(6px)}
@media(max-width:1000px){
.cmpw,.fq,.hot .wrap{grid-template-columns:1fr;gap:36px}.fqs{position:static}
.mos{grid-template-columns:1fr 1fr}.m::after,.m span{opacity:1;transform:none}
.zz::before,.zi::after{display:none}.zi{grid-template-columns:1fr;gap:20px}.zi:nth-child(even) .zt{order:0}.zt,.zi:nth-child(even) .zt{text-align:start}.zi .zp{order:-1}
.pols{max-width:480px;min-height:420px}
}
@media(max-width:600px){.mos{grid-auto-rows:170px}.cmp .r{padding:16px 16px;grid-template-columns:1.4fr .8fr .8fr;font-size:.9rem}.cmp .h span:nth-child(n+2){font-size:.78rem}}