/* ==========================================================================
   Bfriend — style.css
   Design tokens, reset, typography, layout, header/footer, page sections.
   Components (dialogs, quiz wizard, sliders, accordion) → components.css
   Breakpoints: mobile < 768px · tablet 768–1024px · desktop > 1024px
   ========================================================================== */
/* ---------- Fonts (local WOFF2, subset by unicode-range) ---------- */
@font-face {
    font-family: "Rubik Moonrocks";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/rubik-moonrocks-hebrew.woff2) format("woff2");
    unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F
}

/* Latin letters/digits only (no space!) so it downloads only when a heading contains e.g. "Bfriend" */
@font-face {
    font-family: "Rubik Moonrocks";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/rubik-moonrocks-latin.woff2) format("woff2");
    unicode-range: U+0021-0029,U+002C-002E,U+0030-003A,U+003F,U+0041-005A,U+0061-007A
}

@font-face {
    font-family: "Noto Sans Hebrew";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/noto-sans-hebrew-400.woff2) format("woff2");
    unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F
}

@font-face {
    font-family: "Noto Sans Hebrew";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/noto-sans-hebrew-700.woff2) format("woff2");
    unicode-range: U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F
}

@font-face {
    font-family: "Noto Sans Hebrew";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/noto-sans-latin-400.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212
}

@font-face {
    font-family: "Noto Sans Hebrew";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/noto-sans-latin-700.woff2) format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212
}

/* ==========================================================================
   Bfriend — style.css
   Geometry mirrors the original theme (main.css): desktop sizes in vw of a 1900px
   design, mobile (≤991px) in vw of a 360px design – so the page scales exactly
   like the live site. Physical left/right properties are intentional (RTL-only site).
   ========================================================================== */
/* ---------- Tokens ---------- */
:root {
    --brown: #c7915c;
    --brown-btn: #cc9662;
    --brown-dark: #b57f4a;
    --brown-text: #604032;
    --brown-night: #311d16;
    --green: #7bb64c;
    --green-dark: #477424;
    --green-deep: #699b41;
    --cream: #fff2df;
    --sand: #d5d1b4;
    --plum: #360623;
    --primary: var(--brown);
    --accent: var(--green);
    --text: var(--brown-text);
    --font-body: "Noto Sans Hebrew","Noto Sans",Arial,sans-serif;
    --font-display: "Rubik Moonrocks",Arial,sans-serif;
    --t: .3s;
    --ease: cubic-bezier(.2,.7,.2,1);
    --header-h: 5.7158vw;
    --shadow-shift: .2105vw;
}

@media (max-width: 991px) {
    :root {
        --header-h:16.2222vw;
        --shadow-shift: .8333vw
    }
}

/* Tokens used by the quiz / forms (components.css) – restored */
:root {
    --c-brown-700: #604032;
    --c-brown-550: #A06A37;
    --c-brown-500: #B57F4A;
    --c-cream-200: #FFEDE5;
    --c-cream-100: #FFF2DF;
    --c-cream-50: #FFF6F2;
    --c-blush: #FAEFEA;
    --c-green-700: #477424;
    --c-green-650: #4A8226;
    --c-green-600: #5E9A32;
    --c-error: #C8402A;
    --fs-300: clamp(.8125rem,.78rem + .1vw,.875rem);
    --fs-400: clamp(1rem,.95rem + .2vw,1.125rem);
    --fs-500: clamp(1.0625rem,.98rem + .35vw,1.3125rem);
    --fs-600: clamp(1.25rem,1.05rem + .8vw,2rem);
    --fs-700: clamp(1.75rem,1.2rem + 2.2vw,3.25rem);
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;
    --r-sm: .5rem;
    --r-md: .9rem;
    --r-lg: clamp(1.25rem,.8rem + 1.6vw,3.1rem);
    --r-pill: 999px;
    --shadow-card: 4px 4px 15px rgba(158,158,158,.3);
}

/* ---------- Reset ---------- */
*,*::before,*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: var(--header-h)
}

body {
    position: relative;
    min-height: 100vh;
    font-family: var(--font-body);
    color: var(--text);
    background: #fff;
    font-size: .9375vw;
    line-height: 1.5;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased
}

@media (max-width: 991px) {
    body {
        font-size:4.1026vw;
        line-height: 1.13
    }
}

img,svg,video,picture,iframe {
    display: block;
    max-width: 100%
}

img {
    height: auto
}

ul,ol {
    list-style: none
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--t)
}

button,input,select,textarea {
    font: inherit;
    color: inherit
}

button {
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none
}

a[href^="tel"] {
    white-space: nowrap
}

[hidden] {
    display: none!important
}

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px
}

body.is-locked {
    overflow: hidden
}

.visually-hidden {
    position: absolute!important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0
}

.skip-link {
    position: fixed;
    right: 1rem;
    top: -4rem;
    z-index: 1000;
    background: var(--brown-text);
    color: #fff;
    padding: .6rem 1rem;
    border-radius: .5rem;
    transition: top var(--t)
}

.skip-link:focus {
    top: 1rem
}

.only-mobile {
    display: none
}

@media (max-width: 991px) {
    .only-mobile {
        display:revert
    }

    .only-desktop {
        display: none!important
    }
}

.icon {
    width: 1.5em;
    height: 1.5em;
    fill: currentColor;
    flex: none
}

/* ---------- Layout ---------- */
.container {
    width: 100%;
    padding: 0 4.1667vw;
    margin: 0 auto 100px
}

@media (min-width: 992px) {
    .container {
        max-width:78.7368vw;
        padding: 0
    }
}

main {
    padding-top: var(--header-h);
    overflow-x: clip
}

/* ---------- Typography ---------- */
.page-caption {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 5.0526vw;
    line-height: 1.0416;
    margin-bottom: .7895vw;
    color: #fff
}

.page-caption strong {
    font-weight: 400;
    color: var(--brown-btn)
}

@media (max-width: 991px) {
    .page-caption {
        font-size:10.6111vw;
        line-height: 1.15;
        margin-bottom: 3.3333vw
    }

    .page-caption strong {
        display: block
    }
}

.section-caption {
    margin-bottom: 1.8421vw
}

.section-caption--center {
    text-align: center
}

.sc-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 3.7895vw;
    line-height: 1;
    color: var(--primary);
}

.sc-title--white {
    color: #fff;
}

.sc-subtitle {
    font-size: .9375vw;
    line-height: 1.67;
    letter-spacing: -.02em;
    margin-top: 1.6667vw
}

@media (max-width: 991px) {
    .sc-title {
        font-size:9.4444vw;
        line-height: 1.2
    }

    .sc-subtitle {
        font-size: 4.1026vw;
        line-height: 1.13
    }
}

.tick-list {
    display: grid;
    gap: 1.0526vw
}

.tick-list li {
    position: relative;
    padding-right: 4.8421vw;
    padding-top: .6316vw;
    min-height: 2.6316vw;
    font-size: 1.0526vw;
    line-height: 1.6
}

.tick-list li::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 2.6316vw;
    height: 2.6316vw;
    background: url(../images/icons/tick-badge.svg) no-repeat center/contain
}

@media (max-width: 991px) {
    .tick-list {
        gap:5vw
    }

    .tick-list li {
        display: flex;
        align-items: center;
        padding-right: 12.7778vw;
        padding-top: 0;
        min-height: 9.7222vw;
        font-size: 4.4444vw;
        line-height: 1.5
    }

    .tick-list li::before {
        width: 9.7222vw;
        height: 9.7222vw;
        top: 50%;
        translate: 0 -50%
    }
}

/* paw "hi" wave used on button icons (original: animation:hi 1s linear infinite) */
@keyframes hi {
    0%,40%,100% {
        transform: rotate(0)
    }

    10% {
        transform: rotate(-14deg)
    }

    20% {
        transform: rotate(10deg)
    }

    30% {
        transform: rotate(-6deg)
    }
}

@media (prefers-reduced-motion:no-preference) {
    .btn__paw,.quiz-opener::before,.contacts-form__submit::after {
        animation: hi 1s linear infinite
    }
}

/* ---------- Buttons ---------- */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5263vw;
    min-height: 4vw;
    padding: .8421vw 2.3684vw;
    border: 0;
    border-radius: .4211vw;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-body);
    font-size: 1.0526vw;
    line-height: 1.35;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    box-shadow: var(--shadow-shift) var(--shadow-shift) 0 rgba(123,182,76,.77);
    transition: background var(--t),box-shadow var(--t),translate var(--t);
    will-change: transform
}

.btn:hover {
    background: var(--brown-btn);
    box-shadow: calc(var(--shadow-shift)*-1) calc(var(--shadow-shift)*-1) 0 rgba(204,150,98,.77)
}

.btn:active {
    translate: 1px 1px
}

.btn__icon {
    width: 1.5789vw;
    height: 1.5789vw;
    fill: currentColor;
    flex: none
}

/* paw icon as a box with a background → its wave animation is composited (an inline <svg> is not) */
.btn__paw {
    flex: none;
    display: block;
    width: 1.5789vw;
    height: 1.5789vw;
    background: url(../images/icons/paw-white.svg) no-repeat center/contain;
    transform-origin: 50% 80%;
    will-change: transform
}

.btn__icon--big {
    width: 2.5263vw;
    height: 2.5263vw
}

.btn--primary {
    background: var(--brown-btn);
    box-shadow: var(--shadow-shift) var(--shadow-shift) 0 rgba(204,150,98,.77)
}

.btn--primary:hover {
    background: var(--accent);
    box-shadow: calc(var(--shadow-shift)*-1) calc(var(--shadow-shift)*-1) 0 rgba(123,182,76,.77)
}

.btn--stroke {
    background: transparent;
    border: 1px solid var(--brown-btn);
    padding: .5263vw 1.1579vw;
    box-shadow: none!important
}

.btn--stroke:hover {
    background: var(--brown-btn)
}

.btn[disabled],.btn.is-loading {
    opacity: .6;
    pointer-events: none
}

@media (max-width: 991px) {
    .btn {
        padding:3.3333vw 4.4444vw;
        border-radius: 1.6667vw;
        min-height: 12.5vw;
        gap: 2.2222vw;
        font-size: 3.8889vw
    }

    .btn__icon,.btn__paw {
        width: 5.8333vw;
        height: 5.8333vw
    }

    .btn__icon--big {
        width: 8.6111vw;
        height: 8.6111vw
    }

    .btn--stroke {
        padding: 2.2222vw 3.6111vw
    }
}

/* legacy aliases used by inner pages + quiz */
.btn .icon {
    width: 1.5789vw;
    height: 1.5789vw
}

.btn--brown {
    background: var(--brown-btn);
    box-shadow: var(--shadow-shift) var(--shadow-shift) 0 rgba(204,150,98,.77)
}

.btn--brown:hover {
    background: var(--accent);
    box-shadow: calc(var(--shadow-shift)*-1) calc(var(--shadow-shift)*-1) 0 rgba(123,182,76,.77)
}

@media (max-width: 991px) {
    .btn .icon {
        width:5.8333vw;
        height: 5.8333vw
    }
}

/* slick-style square paw arrows */
.slider-arrow {
    position: absolute;
    z-index: 20;
    top: 50%;
    translate: 0 -50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.9474vw;
    height: 3.9474vw;
    border-radius: .4211vw;
    background: var(--brown-btn);
    box-shadow: var(--shadow-shift) var(--shadow-shift) 0 rgba(204,150,98,.77);
    transition: background var(--t),box-shadow var(--t),opacity var(--t),visibility var(--t)
}

.slider-arrow svg {
    width: 1.5263vw;
    height: 1.7368vw;
    fill: #fff
}

.slider-arrow:hover {
    background: var(--accent);
    box-shadow: calc(var(--shadow-shift)*-1) calc(var(--shadow-shift)*-1) 0 rgba(123,182,76,.77)
}

.slider-arrow--prev {
    right: -5.5789vw
}

.slider-arrow--next {
    left: -5.5789vw
}

.slider-arrow[disabled] {
    opacity: 0;
    visibility: hidden
}

.slider-arrow--dark:hover {
    background: var(--brown-text);
    box-shadow: calc(var(--shadow-shift)*-1) calc(var(--shadow-shift)*-1) 0 rgba(36,22,9,.77)
}

@media (max-width: 991px) {
    .slider-arrow {
        width:10.2778vw;
        height: 10.2778vw;
        border-radius: 1.6667vw
    }

    .slider-arrow svg {
        width: 5.8333vw;
        height: 5.8333vw
    }

    .slider-arrow--prev {
        right: -2.5vw
    }

    .slider-arrow--next {
        left: -2.5vw
    }
}

/* scroll-snap slider (replaces Slick); --per = slides per view, --rows = rows */
.slider {
    position: relative;
    --per: 2;
    --rows: 1;
    --gap: 1.5789vw
}

.slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--rows),auto);
    grid-auto-columns: calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
    gap: var(--gap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding: .7895vw;
    margin: -.7895vw;
    /* = padding, so the first/last slide snap exactly to the track edge */
    scroll-padding-inline: .7895vw
}

.slider__track::-webkit-scrollbar {
    display: none
}

.slider__track>* {
    scroll-snap-align: start
}

/* ---------- Header ---------- */
.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    background: #fff;
    transition: box-shadow var(--t)
}

.site-header.is-scrolled {
    box-shadow: 0 1px 0 #e7e7e7
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.1053vw
}

.site-header__start {
    display: flex;
    align-items: center;
    gap: 2.5263vw;
    padding: 1.1579vw 0
}

.site-header__logo {
    display: block;
    padding: 1.5789vw 0 1.5789vw 0;
    padding-right: 2.5263vw;
    border-right: 1px solid #e7e7e7
}

.site-header__logo img {
    height: 3.1579vw;
    width: auto;
    max-width: none;
    object-fit: contain
}

/* partner / distributor logo next to the logo (page field logo_lm) */
.site-header__logos {
    display: flex;
    flex: none;
    align-items: center;
    align-self: stretch
}

/* never let the flex row squeeze the logos (img max-width:100% would squash them) */
.site-header__logo,.site-header__partner {
    flex: none
}

.site-header__start {
    min-width: 0
}

.site-header__partner {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding: 0 2.5263vw;
    border-right: 1px solid #e7e7e7
}

.site-header__partner img {
    height: 3.1579vw;
    width: auto;
    max-width: none;
    object-fit: contain
}

@media (max-width: 991px) {
    .site-header__inner {
        padding:0 5vw
    }

    .site-header__partner {
        padding: 0 4vw
    }

    .site-header__partner img {
        height: 8.0556vw;
        max-width: none
    }

    .site-header__start {
        gap: 5.8333vw;
        padding: 4.1667vw 0
    }

    .site-header__logo {
        padding: 4.4444vw 0 4.4444vw 0;
        padding-right: 5vw
    }

    .site-header__logo img {
        height: 8.0556vw
    }
}

.quiz-opener {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.9474vw;
    height: 3.9474vw;
    border-radius: .4211vw;
    background: var(--brown-btn);
    box-shadow: .2105vw .2105vw 0 rgba(204,150,98,.77);
    transition: background var(--t),box-shadow var(--t)
}

.quiz-opener::before {
    content: "";
    width: 1.5789vw;
    height: 1.5789vw;
    background: url(../images/icons/paw-white.svg) no-repeat center/contain;
    transform-origin: 50% 80%;
    will-change: transform
}

.quiz-opener:hover {
    background: var(--accent);
    box-shadow: -.2105vw -.2105vw 0 rgba(123,182,76,.77)
}

@media (max-width: 991px) {
    .quiz-opener {
        width:8.0556vw;
        height: 8.0556vw;
        border-radius: 1.1111vw;
        box-shadow: 1px 1px 0 rgba(204,150,98,.77)
    }

    .quiz-opener::before {
        width: 3.3333vw;
        height: 3.3333vw
    }

    .quiz-opener:hover {
        box-shadow: -1px -1px 0 rgba(123,182,76,.77)
    }
}

.top-nav>ul {
    display: flex;
    align-items: center;
    gap: 1vw;
}

.top-nav a,.top-nav .sub-toggle {
    font-size: .9474vw;
    line-height: 1.4;
    color: var(--plum);
    white-space: nowrap
}

.top-nav a:hover,.top-nav a:focus-visible,.top-nav .sub-toggle:hover {
    color: var(--accent)
}

.has-sub {
    position: relative
}

.sub-toggle {
    display: flex;
    align-items: center;
    gap: .2632vw;
    padding: 0
}

.sub-toggle::after {
    content: "";
    width: .5789vw;
    height: .3684vw;
    background: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='m1 1 4.5 5L10 1' stroke='%23360623'/%3E%3C/svg%3E") no-repeat center/contain;
    transition: rotate var(--t)
}

.has-sub:hover .sub-toggle,.sub-toggle[aria-expanded="true"] {
    color: var(--accent)
}

.has-sub:hover .sub-toggle::after,.sub-toggle[aria-expanded="true"]::after {
    rotate: 180deg;
    background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='m1 1 4.5 5L10 1' stroke='%237BB64C'/%3E%3C/svg%3E")
}

.sub-menu {
    position: absolute;
    right: 0;
    top: calc(100% + .4737vw);
    width: 19.6316vw;
    background: #edded7;
    border-radius: 0 0 .7895vw .7895vw;
    opacity: 0;
    visibility: hidden;
    translate: 0 1.5789vw;
    pointer-events: none;
    transition: opacity var(--t),visibility var(--t),translate var(--t)
}

.sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 100%;
    width: 100%;
    height: .4737vw
}

.has-sub:hover .sub-menu,.has-sub:focus-within .sub-menu,.sub-toggle[aria-expanded="true"]+.sub-menu {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    pointer-events: auto
}

.sub-menu li:not(:last-child) {
    border-bottom: .1053vw solid #faefea
}

.sub-menu a {
    display: flex;
    align-items: center;
    gap: .5263vw;
    padding: .5263vw .9474vw;
    font-size: 1.0526vw;
    line-height: 1.2;
    color: var(--brown-text)
}

.sub-menu--downloads a::before {
    content: "";
    flex: none;
    width: .7368vw;
    height: 1vw;
    background: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 19'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14 6.5h-4v-6H4v6H0l7 7 7-7Zm-14 9v2h14v-2H0Z' fill='%23604032'/%3E%3C/svg%3E") no-repeat center/contain
}

.top-nav .nav-extra {
    display: revert
}

/* Priority+ "עוד" dropdown (main.js): items that don't fit next to the logos */
.nav-more[hidden] {
    display: none
}

.nav-more>.sub-menu {
    right: auto;
    left: 0;
    width: max-content;
    min-width: 14vw;
    max-width: 22vw;
    padding: .3158vw 0
}

.nav-more__menu>li>a {
    font-size: .9474vw
}

/* a moved dropdown item (e.g. "תנאי הפוליסה") is shown open inside "עוד": title + its links */
.nav-more__menu .has-sub>.sub-toggle {
    width: 100%;
    padding: .5263vw .9474vw .2105vw;
    font-weight: 700;
    color: var(--brown-text);
    pointer-events: none
}

.nav-more__menu .has-sub>.sub-toggle::after {
    display: none
}

.nav-more__menu .sub-menu,.nav-more__menu .sub-contacts {
    position: static;
    width: auto;
    padding: 0 .9474vw .3158vw;
    background: transparent;
    border-radius: 0;
    opacity: 1;
    visibility: inherit;
    translate: none;
    pointer-events: inherit
}

.nav-more__menu .sub-menu a {
    padding-inline: 0
}

/* "צור קשר" panel (original .top-nav-contacts) */
.sub-contacts {
    left: 50%;
    right: auto;
    width: 17.0526vw;
    padding: 1.4737vw 1.9474vw 1.1579vw;
    background: #faefea;
    translate: -50% 1.5789vw
}

.has-sub:hover .sub-contacts,.has-sub:focus-within .sub-contacts,.sub-toggle[aria-expanded="true"]+.sub-contacts {
    translate: -50% 0
}

.sub-contacts__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 1.3684vw;
    font-size: 1.0526vw;
    line-height: 1.2;
    color: var(--brown-text);
    text-align: center
}

.sub-contacts__item:hover {
    color: var(--accent)
}

.sub-contacts__icon {
    display: block;
    width: 1.9474vw;
    height: 1.9474vw;
    margin-bottom: .3158vw;
    border-radius: 50%
}

.sub-contacts__socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .7895vw;
    margin-top: 1.6316vw;
    padding-top: 1.2105vw;
    border-top: .1053vw solid #dfcac0
}

.sub-contacts__socials a {
    display: block;
    transition: scale var(--t)
}

.sub-contacts__socials a:hover,.sub-contacts__socials a:focus-visible {
    scale: 1.1
}

.sub-contacts__socials svg {
    display: block;
    width: 1.9474vw;
    height: 1.9474vw;
    border-radius: 50%
}

.sub-contacts li:not(:last-child) {
    border-bottom: 0
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 1px;
    width: 7.2222vw
}

.menu-toggle span {
    position: relative;
    display: block;
    width: 7.2222vw;
    height: 2.7778vw;
    background: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M24 5.1a2.6 2.6 0 0 0 2-2.51 2.58 2.58 0 0 0-5.14-.3H5.16a2.28 2.28 0 1 0-3.19 2.08 2.58 2.58 0 1 0 3.17 2.8h15.72a2.28 2.28 0 1 0 4.55 0 2.3 2.3 0 0 0-1.4-2.07Z' fill='%23CE9863'/%3E%3Cpath d='M23.11 8.14a2.28 2.28 0 0 1-2.27-2.28H5.12a2.57 2.57 0 0 1-5.05.35c-.05.21-.07.45-.07.66a2.58 2.58 0 0 0 5.14.3h15.72a2.28 2.28 0 1 0 4.46-.66 2.33 2.33 0 0 1-2.2 1.63Z' fill='%23B8824D'/%3E%3C/svg%3E") no-repeat center/contain;
    transition: translate var(--t),rotate var(--t),opacity var(--t)
}

.menu-toggle span:nth-child(2)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    opacity: 0;
    transition: rotate var(--t),opacity var(--t)
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
    translate: 0 -4.1667vw;
    opacity: 0
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
    rotate: -45deg
}

.menu-toggle[aria-expanded="true"] span:nth-child(2)::after {
    rotate: 90deg;
    opacity: 1
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
    translate: 0 4.1667vw;
    opacity: 0
}

.mobile-nav {
    position: fixed;
    left: 0;
    top: var(--header-h);
    z-index: 99;
    width: 100%;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    background: var(--brown-night);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--t),visibility var(--t)
}

.mobile-nav.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

.mobile-nav__inner,.mobile-nav>ul {
    position: relative
}

.mobile-nav {
    padding: 7.2222vw 4.1667vw 45.8333vw
}

.mobile-nav::after {
    content: "";
    position: absolute;
    left: 50%;
    translate: -50% 0;
    bottom: 0;
    width: 19.4444vw;
    height: 38.6111vw;
    background: url(../images/icons/nav-trees.svg) no-repeat center bottom/contain;
    pointer-events: none
}

.mobile-nav>ul>li {
    border-bottom: 1px solid var(--brown-text)
}

.mobile-nav>ul>li>a,.mobile-nav .sub-toggle {
    display: block;
    width: 100%;
    padding: 3.8889vw 0;
    font-size: 5vw;
    line-height: 1.38;
    color: #fff;
    text-align: right
}

.mobile-nav .sub-toggle {
    display: flex;
    justify-content: space-between
}

.mobile-nav .sub-toggle::after {
    width: 3.0556vw;
    height: 1.9444vw;
    background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 7'%3E%3Cpath d='m1 1 4.5 5L10 1' stroke='%23fff'/%3E%3C/svg%3E")
}

.mobile-nav .sub-menu {
    position: static;
    display: none;
    width: auto;
    opacity: 1;
    visibility: inherit;
    translate: none;
    pointer-events: auto;
    background: none;
    border-radius: 0;
    padding-bottom: 5px
}

.mobile-nav .sub-menu::before {
    display: none
}

.mobile-nav .sub-toggle[aria-expanded="true"]+.sub-menu {
    display: block
}

.mobile-nav .sub-menu li:not(:last-child) {
    border-bottom: 1px solid #dfcac0
}

.mobile-nav .sub-menu a {
    gap: 2.7778vw;
    padding: 4.1667vw 0;
    font-size: 4.4444vw;
    line-height: 5.2778vw;
    color: #fff
}

.mobile-nav .sub-menu--downloads a::before {
    width: 3.8889vw;
    height: 5.2778vw;
    filter: brightness(0) invert(1)
}

.mobile-nav>.btn {
    display: none
}

.mobile-nav .sub-contacts,.mobile-nav .has-sub:hover .sub-contacts,.mobile-nav .has-sub:focus-within .sub-contacts,.mobile-nav .sub-toggle[aria-expanded="true"]+.sub-contacts {
    width: auto;
    padding: 0 0 5.5556vw;
    background: none;
    translate: none
}

.mobile-nav .sub-contacts .sub-contacts__item {
    padding: 0;
    flex-direction: row;
    justify-content: flex-start;
    gap: 1.9444vw;
    margin-bottom: 4.1667vw;
    font-size: 4.4444vw;
    line-height: 1.5;
    color: #fff
}

.mobile-nav .sub-contacts__icon {
    width: 8.3333vw;
    height: 8.3333vw;
    margin-bottom: 0
}

.mobile-nav .sub-contacts__socials li {
    border-bottom: 0!important
}

.mobile-nav .sub-contacts__socials {
    justify-content: flex-start;
    gap: 2.2222vw;
    margin-top: 0;
    padding-top: 0;
    border-top: 0
}

.mobile-nav .sub-contacts__socials svg {
    width: 8.3333vw;
    height: 8.3333vw;
    background: #fff
}

@media (max-width: 991px) {
    .top-nav {
        display:none
    }

    .menu-toggle {
        display: flex
    }
}

@media (min-width: 992px) {
    .mobile-nav {
        display:none
    }
}

/* countdown (hidden by default, as on the live site) */
.promo-timer {
    position: fixed;
    z-index: 300;
    top: var(--header-h);
    right: 10.6316vw;
    display: flex;
    align-items: center;
    gap: .5208vw;
    padding: 1.25vw 1.7708vw 1.25vw 1.0417vw;
    border-radius: .4167vw;
    background: #cb9662;
    box-shadow: -2px 2px 0 #d7ae87;
    color: #fff;
    font-size: 1.6667vw;
    line-height: 1;
    pointer-events: none
}

.promo-timer__clock {
    display: flex;
    direction: ltr;
    font-variant-numeric: tabular-nums
}

.promo-timer__clock span+span::before {
    content: ":"
}

@media (max-width: 991px) {
    .promo-timer {
        right:4.1667vw;
        padding: 2.799vw 2.5445vw 2.29vw;
        border-radius: 2.0356vw;
        font-size: 4.0712vw;
        gap: 1.2723vw
    }
}

/* ==========================================================================
   HOMEPAGE
   ========================================================================== */
/* ---------- First screen ---------- */
.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: #301d14
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1
}

/* Lottie layers: base scenery as background, moving pieces as transform-animated <img> (GPU compositor) */
.lstage {
    overflow: hidden
}

.lstage__set {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    container-type: inline-size;
    background: no-repeat 0 0/100% 100%
}

.lstage--hero {
    top: .3vw;
    aspect-ratio: 1900/882;
    background-image: url(../images/anim/hero-base.svg)
}

.lstage--herom {
    top: .3vw;
    aspect-ratio: 360/496;
    background-image: url(../images/anim/herom-base.svg)
}

.lstage--cov {
    aspect-ratio: 1900/1006;
    background-image: url(../images/anim/cov-base.svg)
}

.lstage--covm {
    aspect-ratio: 360/516;
    background-image: url(../images/anim/covm-base.svg)
}

.ll {
    position: absolute;
    left: 0;
    top: 0;
    max-width: none;
    transform-origin: 0 0;
    will-change: transform;
    pointer-events: none
}

.lstage__set--mob {
    display: none
}

@media (max-width: 991px) {
    .lstage__set--desk {
        display:none
    }

    .lstage__set--mob {
        display: block
    }
}

.hero__container {
    position: relative;
    z-index: 2;
    margin-bottom: 0
}

.hero__inner {
    display: grid;
    grid-template-columns: 30.4211vw 45.0526vw;
    gap: 1.3684vw;
    width: calc(100% + 3.2632vw);
    margin-left: -3.2632vw;
    height: 46.4211vw;
    padding: 4.9474vw 5.1579vw 0 0
}

.hero__content {
    padding-top: 5.6316vw
}

.hero__text {
    margin-bottom: 2.1579vw;
    font-size: 1.6842vw;
    line-height: 1.375;
    color: #fff
}

.hero__text b {
    font-weight: 700
}

.hero__actions {
    display: flex;
    gap: 1.5789vw
}

.hero__media {
    align-self: end
}

.hero__media img {
    max-width: 100%;
    height: auto;
    margin-bottom: -3px
}

@media (max-width: 991px) {
    .hero__inner {
        grid-template-columns:1fr;
        gap: 6.3889vw;
        width: 100%;
        margin: 0;
        height: 137.7778vw;
        padding: 15.0889vw 0 0
    }

    .hero__content {
        padding: 0
    }

    .hero__text {
        font-size: 5.27vw;
        line-height: 1.4;
        margin-bottom: 5.8333vw
    }

    .hero__actions {
        gap: 1.9444vw
    }

    .hero__media {
        width: 72.2222vw;
        margin-inline:auto;translate: 10px 5px
    }
}

/* hero entrance (one orchestrated moment; transform/opacity only → no layout shift) */
@media (prefers-reduced-motion:no-preference) {
    .hero__anim {
        animation: hero-in .8s var(--ease) both
    }

    .hero__content>.hero__anim:nth-child(1) {
        animation-delay: .05s
    }

    .hero__content>.hero__anim:nth-child(2) {
        animation-delay: .18s
    }

    .hero__content>.hero__anim:nth-child(3) {
        animation-delay: .31s
    }

    .hero__media.hero__anim {
        animation: hero-img-in .9s var(--ease) both;
        transform-origin: 50% 100%
    }
}

@keyframes hero-in {
    from {
        opacity: 0;
        translate: 0 2.5vw
    }

    to {
        opacity: 1;
        translate: 0 0
    }
}

/* image: transform only (no opacity) so it is painted on the first frame and LCP is not delayed */
@keyframes hero-img-in {
    from {
        scale: .94;
        translate: 0 4vw
    }

    to {
        scale: 1;
        translate: 0 0
    }
}

@media (max-width: 991px) {
    @keyframes hero-img-in {
        from {
            scale:.94;
            translate: 10px 10vw
        }

        to {
            scale: 1;
            translate: 10px 5px
        }
    }
}

/* ---------- About ---------- */
.about {
    padding-top: 7.0526vw
}

.about-block {
    position: relative;
    padding: 3.1053vw 2.5789vw 28.6316vw;
    border-radius: 2.6316vw;
    background: var(--accent);
    color: #fff
}

.about-block__bg {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden
}

.about-block__bg::before {
    content: "";
    position: absolute;
    right: 2.1053vw;
    top: 3.1053vw;
    width: 36.8421vw;
    height: 36.8421vw;
    background: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 700'%3E%3Ccircle cx='350' cy='350' r='250' fill='%2389C957'/%3E%3Ccircle cx='350' cy='350' r='349.5' fill='%2387CB51' fill-opacity='.3' stroke='%2397DE5F'/%3E%3C/svg%3E") no-repeat center/contain
}

.about-block__bg img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center bottom
}

.about-block__top,.about-block__body {
    position: relative;
    z-index: 2
}

.about-block__top .section-caption {
    position: relative;
    margin-bottom: 0;
    padding-bottom: 1.7895vw
}

.about-block__top .section-caption::after,.recommend-block .section-caption::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    translate: -50% 0;
    width: 21.0526vw;
    height: .5789vw;
    background: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 11'%3E%3Cellipse cx='200' cy='5.5' rx='200' ry='5.5' fill='%23000' fill-opacity='.15'/%3E%3C/svg%3E") no-repeat center/contain
}

.about-block__body {
    display: grid;
    grid-template-columns: 25.1579vw 1fr;
    align-items: start;
    gap: 4.2105vw;
    padding-right: 5.6316vw
}

.about-block__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.8421vw 3.6842vw
}

.about-block__features li {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 1.0526vw;
    line-height: 1.35
}

.about-block__features li::before {
    content: "";
    width: 1.7895vw;
    height: 1.7895vw;
    margin-bottom: .6316vw;
    background: url(../images/icons/feature-tick.svg) no-repeat center/contain
}

.about-block__text-wrap {
    margin-top: 4.8947vw;
    max-height: 16.8421vw;
    overflow-y: auto;
    direction: ltr;
    scrollbar-color: #9bda6a #699b41;
    scrollbar-width: thin
}

.about-block__text-wrap::-webkit-scrollbar {
    width: .4211vw
}

.about-block__text-wrap::-webkit-scrollbar-track {
    border-radius: .2105vw;
    background: #699b41
}

.about-block__text-wrap::-webkit-scrollbar-thumb {
    background: #9bda6a;
    border-radius: .1053vw;
    border: 2px solid #699b41
}

.about-block__text {
    direction: rtl;
    padding-right: 1.0526vw;
    font-size: 1.0526vw;
    line-height: 1.6
}

@media (max-width: 991px) {
    .about {
        padding-top:19.4444vw
    }

    .about-block {
        padding: 16.9444vw 4.7222vw 56.9444vw;
        border-radius: 4.1667vw
    }

    .about-block__bg::before {
        right: auto;
        top: auto;
        left: 50%;
        translate: -50% 0;
        bottom: 26.3889vw;
        width: 134.1667vw;
        height: 134.1667vw;
        background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 483 483'%3E%3Ccircle cx='241.5' cy='241.5' r='197.5' fill='%2389C957'/%3E%3Ccircle cx='241.5' cy='241.5' r='241' fill='%2387CB51' fill-opacity='.3' stroke='%2397DE5F'/%3E%3C/svg%3E")
    }

    .about-block__bg img {
        height: 49.3333vw;
        object-fit: cover;
        object-position: 33% top
    }

    .about-block__top {
        margin-bottom: 9.7222vw
    }

    .about-block__top .section-caption {
        padding-bottom: 5vw
    }

    .about-block__top .section-caption::after,.recommend-block .section-caption::after {
        width: 72.2222vw;
        height: 1.9444vw
    }

    .about-block__body {
        grid-template-columns: 1fr;
        gap: 34.7222vw;
        padding-right: 0
    }

    .about-block__features {
        order: 2;
        grid-template-columns: 1fr;
        gap: 6.6667vw;
        padding-right: 7.2222vw
    }

    .about-block__features li {
        flex-direction: row;
        gap: 3.0556vw;
        max-width: 63.8889vw;
        text-align: start;
        font-size: 4.4444vw;
        line-height: 1.5
    }

    .about-block__features li::before {
        flex: none;
        width: 9.4444vw;
        height: 9.4444vw;
        margin-bottom: 0
    }

    .about-block__text-wrap {
        margin-top: 0;
        max-height: 162.7778vw
    }

    .about-block__text-wrap::-webkit-scrollbar {
        width: 2.2222vw
    }

    .about-block__text {
        padding-right: 5.5556vw;
        font-size: 4.4444vw
    }
}

/* ---------- Why insurance matters ---------- */
.advantages {
    position: relative;
    padding: 8.1579vw 0 9.1579vw
}

.advantages__bg {
    position: absolute;
    z-index: 2;
    left: 0;
    top: -4vw;
    width: 45.5789vw;
    height: 53.6842vw;
    pointer-events: none
}

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

.advantages__content {
    padding-right: 4.8421vw
}

.advantages .tick-list:not(:last-child) {
    margin-bottom: 1.0526vw
}

.advantages__more .tick-list {
    margin-bottom: 1.0526vw
}

.advantages__more.is-open {
    animation: reveal-down .3s var(--ease)
}

.advantages__footer {
    margin-top: 1.6842vw
}

@keyframes reveal-down {
    from {
        opacity: 0;
        translate: 0 -1vw
    }
}

@media (max-width: 991px) {
    .advantages {
        padding:16.9444vw 0 93.0556vw
    }

    .advantages .section-caption {
        margin-bottom: 5.8333vw
    }

    .advantages__bg {
        top: auto;
        bottom: 19.4444vw;
        width: 78.8889vw;
        height: 93.3333vw
    }

    .advantages .tick-list:not(:last-child),.advantages__more .tick-list {
        margin-bottom: 5vw
    }

    .advantages .tick-list li {
        max-width: 72.2222vw
    }

    .advantages__content {
        padding-right: 0
    }

    .advantages__footer {
        margin-top: 8.3333vw
    }

    .advantages__footer .btn {
        min-width: 41.6667vw
    }
}

/* ---------- Why Bfriend ---------- */
.why {
    position: relative;
    min-height: 52.7895vw;
    padding: 4.8421vw 0;
    background: linear-gradient(270deg,#fff 0,#ffede5 100%);
}

.why .container {
    position: relative;
    z-index: 2
}

.why__bg {
    position: absolute;
    left: 34.6316vw;
    top: 0;
    width: 78.5263vw;
    height: 52.7895vw;
    top: auto;
    bottom: 0;
}

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

.why__content {
    width: 33.3684vw;
    margin-right: auto
}

.why .section-caption {
    margin-bottom: 6.1579vw
}

.why-slider {
    --per: 2;
    --rows: 2;
    --gap: 1.5789vw
}

.why-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 13.5789vw;
    padding: .7895vw;
    border-radius: .4211vw;
    background: #fff;
    box-shadow: .2105vw .2105vw .7895vw rgba(158,158,158,.3);
    text-align: center;
    transition: background var(--t)
}

.why-card::before {
    content: "";
    position: absolute;
    left: 1.7895vw;
    top: 2.2105vw;
    width: 11.3684vw;
    height: 9.7895vw;
    background: url(../images/icons/paw-soft.svg) no-repeat center/contain;
    transition: background var(--t)
}

.why-card p {
    position: relative;
    z-index: 2;
    font-size: 1.0526vw;
    line-height: 1.3;
    transition: color var(--t)
}

.why-card .why-card__price {
    margin-top: .3684vw;
    font-size: 1.7684vw;
    line-height: .88;
    font-weight: 700;
    color: var(--brown-dark)
}

.why-card:hover {
    background: var(--accent)
}

.why-card:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 216 186'%3E%3Cpath d='M177.84 49.58a22.33 22.33 0 1 0 31.58 31.58 22.33 22.33 0 0 0-31.58-31.58Z' fill='%23699B41'/%3E%3Cpath d='M117.84 8.53a26.8 26.8 0 1 0 37.89 37.9 26.8 26.8 0 0 0-37.9-37.9Z' fill='%23699B41'/%3E%3Cpath d='M54.68 21.16a26.8 26.8 0 1 0 37.9 37.9 26.8 26.8 0 0 0-37.9-37.9Z' fill='%23699B41'/%3E%3Cpath d='M7.3 68.53A22.33 22.33 0 1 0 38.9 100.1 22.33 22.33 0 0 0 7.3 68.53Z' fill='%23699B41'/%3E%3Cpath d='M171.52 93.79c31.58 31.58 18.95 75.8-3.16 85.27-22.1 3.15-27.15-9.48-34.73-22.11-9.48-15.79-25.27-6.32-28.42 3.16-3.16 9.47-12.64 25.26-25.27 25.26-12.63 0-22.1-3.16-34.74-28.42-12.63-25.26 0-56.84 25.27-75.8 25.26-18.94 69.47-18.94 101.05 12.64Z' fill='%23699B41'/%3E%3C/svg%3E")
}

.why-card:hover p,.why-card:hover .why-card__price {
    color: #fff
}

@media (max-width: 991px) {
    .why {
        min-height:0;
        padding: 16.9444vw 0 79.1667vw;
        background: linear-gradient(270deg,#fff -100.28%,#ffede5 100%)
    }

    .why__bg {
        top: auto;
        bottom: 0;
        left: 50%;
        translate: -50% 0;
        width: 100%;
        height: 76.3889vw
    }

    .why__bg img {
        object-fit: cover
    }

    .why__content {
        width: 100%
    }

    .why .section-caption {
        margin-bottom: 7.2222vw
    }

    .why-slider {
        --gap: 2.7778vw
    }

    .why-slider .slider__track {
        padding: 1.3889vw;
        margin: -1.3889vw;
        scroll-padding-inline: 1.3889vw
    }

    .why-card {
        height: 37.7778vw;
        padding: 2.7778vw;
        border-radius: 2.2222vw;
        box-shadow: 0 0 2.1111vw rgba(158,158,158,.3)
    }

    .why-card::before {
        left: 50%;
        top: 50%;
        translate: -50% -50%;
        width: 34.1667vw;
        height: 29.1667vw
    }

    .why-card p {
        max-width: 34.1667vw;
        font-size: 4.4444vw;
        line-height: 1.5
    }

    .why-card .why-card__price {
        margin-top: 0;
        font-size: 4.8667vw;
        line-height: 1.67
    }
}

/* ---------- Contact ("איך מצטרפים?") ---------- */
.contacts {
    position: relative;
    height: 38.0526vw;
    padding: 7.2105vw 0 10.8421vw;
    overflow: hidden
}

.contacts__bg {
    position: absolute;
    inset: 0
}

.contacts__bg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom
}

.contacts .container {
    position: relative;
    z-index: 2
}

.contacts__content {
    position: relative;
    width: 16.8421vw;
    margin-right: 38.1579vw
}

.contacts__bone {
    position: absolute;
    z-index: 3;
    left: -6.5vw;
    top: -3vw;
    width: 7.5vw;
    height: auto;
    pointer-events: none
}

.contacts-form {
    position: relative;
    padding: 1.1579vw 1.7895vw 2.2632vw;
    border-radius: .7895vw;
    background: var(--accent);
    color: #fff
}

.contacts-form__title {
    margin-bottom: .2105vw;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.7895vw;
    line-height: 2.12;
    color: #fff
}

.contacts-form__subtitle {
    margin-bottom: 1.0417vw;
    text-align: center
}

.contacts-form__fields {
    display: grid;
    gap: 1.0417vw;
    margin-bottom: 1.5625vw
}

.contacts-form .field {
    position: relative
}

.line-input {
    display: block;
    width: 100%;
    height: 1.9474vw;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #fff;
    border-radius: 0;
    background: transparent;
    color: #fff;
    font-size: .8421vw;
    line-height: 1.5;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color var(--t);
    direction: rtl;
}

.line-input::placeholder {
    color: #fff;
    opacity: 1
}

.line-input:focus {
    outline: 0;
    border-bottom-color: var(--primary)
}

.contacts-form .field.is-invalid .line-input {
    border-bottom-color: #db5366
}

.contacts-form .field__error {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    font-size: .8333vw;
    color: #fff;
    background: #d4644b;
    padding: 0 .4vw;
    border-radius: 2px
}

.contacts-form .field.is-invalid .field__error {
    display: block
}

.contacts-form__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4211vw;
    width: 100%;
    min-height: 2.8421vw;
    margin-bottom: 1.0526vw;
    padding: .2632vw .7895vw;
    border-radius: .4211vw;
    background: #fff;
    color: var(--accent);
    font-size: .7895vw;
    font-weight: 700;
    box-shadow: .2105vw .2105vw 0 var(--green-dark);
    transition: box-shadow var(--t)
}

.contacts-form__submit::after {
    content: "";
    flex: none;
    width: 1.5789vw;
    height: 1.5789vw;
    background: url(../images/icons/paw-green-solid.svg) no-repeat center/contain;
    transform-origin: 50% 80%;
    will-change: transform
}

.contacts-form__submit:hover {
    box-shadow: -.2105vw -.2105vw 0 var(--green-dark)
}

.contacts-form__submit.is-loading {
    opacity: .6;
    pointer-events: none
}

.consent--light {
    position: relative;
    padding-left: .4211vw
}

.consent.consent--light label {
    display: flex;
    align-items: flex-start;
    gap: .5263vw;
    cursor: pointer
}

/* same box as the quiz consents (name="publication_approval"): real checkbox, top-aligned
   to the first text line, paw tick when checked */
.consent.consent--light input {
    appearance: none;
    flex: none;
    width: 1.1053vw;
    height: 1.1053vw;
    margin: 0;
    border: .1053vw solid #fff;
    border-radius: .2105vw;
    background: transparent;
    cursor: pointer;
    transition: background-color var(--t)
}

.consent.consent--light input:checked {
    background: #fff url(../images/icons/paw-check-sm.svg) no-repeat center/80%
}

.consent.consent--light input:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px
}

.consent--light span {
    display: block;
    font-size: .6316vw;
    line-height: 1.5;
    color: #fff
}

.consent--light a {
    color: var(--brown-text);
    font-weight: 700;
    text-decoration: underline
}

.consent--light a:hover {
    text-decoration: none
}

.consent--light .field__error {
    display: none;
    font-size: .6316vw;
    color: #fff;
    background: #d4644b;
    padding: 0 .4vw;
    border-radius: 2px;
    margin-top: .2vw
}

.consent--light.is-invalid .field__error {
    display: block
}

.contacts-form .form-status {
    margin-top: .6vw;
    font-size: .8421vw;
    line-height: 1.1;
    text-align: center
}

.contacts-form .form-status--err {
    background: #d4644b;
    padding: .2105vw .7895vw;
    border-radius: .3vw
}

/* Contacts – desktop layout as in production: full-container green panel, dog peeking over
   its top edge, 4 fields in one row, submit + consents in the end column, bone on the corner. */
@media (min-width: 992px) {
    .contacts {
        height:auto;
        padding: 24.7535vw 0 10vw;
        overflow: visible;
        margin: 8.8421vw;
    }

    .contacts__bg {
        inset: 0 auto auto 50%;
        z-index: 3;
        width: 36.5vw;
        translate: -50% 0;
        pointer-events: none
    }

    /* body cut line (84% of the image) = panel top */
    .contacts__bg img {
        height: auto;
        object-fit: initial
    }

    .contacts .container {
        margin-bottom: 0
    }

    .contacts__content {
        width: 100%;
        margin: 0
    }

    .contacts-form {
        display: grid;
        grid-template-columns: 1fr 17vw;
        grid-template-areas: "title title" "sub sub" "fields submit" ". privacy" ". marketing" ". status";
        column-gap: 1.2632vw;
        align-items: end;
        padding: 4.3158vw 9.4737vw 3.6842vw 4.7368vw;
        border-radius: .7895vw
    }

    .contacts-form__title {
        grid-area: title;
        margin-bottom: .3158vw;
        font-size: 3.5789vw;
        line-height: 1.2
    }

    .contacts-form__subtitle {
        grid-area: sub;
        margin-bottom: 2.6316vw;
        font-size: 1.1579vw
    }

    .contacts-form__fields {
        grid-area: fields;
        grid-template-columns: repeat(4,1fr);
        gap: 1.1579vw;
        margin: 0
    }

    .contacts-form .line-input {
        font-size: .9474vw
    }

    .contacts-form__submit {
        grid-area: submit;
        justify-self: start;
        width: 13.4211vw;
        min-height: 3.1579vw;
        margin: 0;
        font-size: .8421vw
    }

    .consent--privacy {
        grid-area: privacy;
        margin-top: 1.3158vw
    }

    .consent--marketing {
        grid-area: marketing;
        margin-top: .5263vw
    }

    .consent--light {
        padding-left: 0
    }

    .consent--light span {
        font-size: .7368vw
    }

    .contacts-form .form-status {
        grid-area: status
    }

    .contacts__bone {
        left: auto;
        right: -1.4737vw;
        top: 17.0526vw;
        bottom: auto;
        width: 14.7368vw
    }
}

@media (max-width: 991px) {
    .contacts {
        height:auto;
        min-height: 220.8333vw;
        padding: 54.4444vw 0 60.8333vw
    }

    .contacts__content {
        width: 100%;
        margin-right: 0
    }

    .contacts__bone {
        left: -2vw;
        top: -14vw;
        width: 24vw
    }

    .contacts-form {
        padding: 9.1667vw 9.1667vw 12.2222vw;
        border-radius: 4.1667vw
    }

    .contacts-form__title {
        font-size: 9.4444vw;
        line-height: 1.5;
        margin-bottom: 3.8889vw
    }

    .contacts-form__subtitle {
        margin-bottom: 5vw
    }

    .contacts-form__fields {
        gap: 4.1667vw;
        margin-bottom: 6.9444vw
    }

    .line-input {
        height: 10.2778vw;
        font-size: 4.4444vw
    }

    .contacts-form .field__error {
        font-size: 3.8889vw
    }

    .contacts-form__submit {
        gap: 2.2222vw;
        min-height: 15vw;
        margin-bottom: 6.3889vw;
        padding: 3.3333vw 8.3333vw;
        border-radius: 2.2222vw;
        font-size: 4.4444vw;
        box-shadow: .8333vw .8333vw 0 var(--green-dark)
    }

    .contacts-form__submit::after {
        width: 8.3333vw;
        height: 8.3333vw
    }

    .contacts-form__submit:hover {
        box-shadow: -.8333vw -.8333vw 0 var(--green-dark)
    }

    .consent--light {
        padding-left: 0
    }

    .consent.consent--light label {
        gap: 2.2222vw
    }

    .consent--light span {
        font-size: 3.3333vw
    }

    .consent.consent--light input {
        width: 5.8333vw;
        height: 5.8333vw;
        border-width: .5556vw;
        border-radius: 1.1111vw
    }

    .consent--light .field__error,.contacts-form .form-status {
        font-size: 3.3333vw
    }
}

/* ---------- Insurance / average-cost wheel ---------- */
.insurance {
    position: relative;
    min-height: 52.9474vw;
    padding-top: 6.2105vw;
    color: #fff
}

.insurance__bg {
    position: absolute;
    left: 0;
    top: -.33vw;
    width: 100%;
    height: 52.9474vw;
    background: #714937
}

.insurance__container {
    position: relative;
    z-index: 2;
    margin-bottom: 0
}

.insurance .section-caption {
    margin-bottom: 3.2632vw
}

.wheel-wrap {
    position: relative;
    z-index: 3;
    max-width: 65.2632vw;
    margin: 0 auto
}

/* circle: 52.8632vw + 2×1.2632vw slide padding, radius = half its width (original JS) */
.wheel {
    --size: calc(52.8632vw + 1.2632vw * 2);
    --radius: calc(var(--size) / 2);
    --card: 10.5263vw;
    --step: 22.5deg;
    position: relative;
    width: var(--size);
    height: var(--size);
    margin: 7.6vw 5vw 0 0;
    pointer-events: none
}

.wheel__ring {
    position: absolute;
    inset: 0
}

/* --d = signed distance from the active item; next items go anticlockwise (to the left), like the original */
.wheel__item {
    --d: 3;
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--card);
    height: var(--card);
    transform: translate(-50%,-50%) rotate(calc(var(--d) * var(--step) * -1)) translateY(calc(var(--radius) * -1)) rotate(calc(var(--d) * var(--step)));
    opacity: 0;
    pointer-events: none;
    transition: transform .4s linear,opacity .3s ease;
    will-change: transform
}

.wheel__item.is-near {
    opacity: 1;
    pointer-events: auto
}

.wheel__card {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--cream);
    color: var(--brown-text);
    font-size: 1.0526vw;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    box-shadow: .2105vw .2105vw 1.0526vw rgba(158,158,158,.3);
    cursor: pointer
}

.wheel__card::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: calc(100% + 1.0526vw * 2);
    height: calc(100% + 1.0526vw * 2);
    border-radius: 50%;
    background: var(--accent);
    opacity: 0;
    transition: opacity var(--t)
}

.wheel__card span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 1.0526vw;
    border-radius: 50%;
    background: var(--cream)
}

.wheel__item.is-active .wheel__card::before {
    opacity: 1
}

.wheel__nav {
    top: 11%;
    translate: none
}

.wheel__nav--prev {
    right: -5.5789vw
}

.wheel__nav--next {
    left: -5.5789vw
}

.price-block {
    position: absolute;
    top: 12.6842vw;
    pointer-events: none;
    left: 50%;
    transform: translateX(-50%);
    width: 62.9474vw;
}

.price-block__bg {
    position: absolute;
    left: 5.1vw;
    top: 5vw;
    width: 100%
}

.price-block__bg img {
    width: 100%;
    height: auto
}

.price-block__bubble {
    position: absolute;
    left: 33.8947vw;
    top: 18.5789vw;
    background: url(../images/icons/price-bubble.svg) no-repeat center/contain;
    width: 14.6842vw;
    height: 13.6316vw;
    padding: 3.1vw 1.5789vw 5.7895vw 3vw;
}

.price-block__value {
    font-size: 1.8421vw;
    line-height: 1;
    text-align: center;
    color: #fff;
    rotate: 4.16deg
}

@media (max-width: 991px) {
    .insurance {
        min-height: 180.3333vw;
        padding-top: 16.9444vw
    }

    .insurance__bg {
        height: 143.3333vw
    }

    .insurance .section-caption {
        margin-bottom: 10vw
    }

    .wheel-wrap {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        width: calc(100% + 11.1111vw * 2);
        max-width: none;
        height: 80vw;
        margin: -2vw -11.1111vw 0;
        overflow: hidden
    }

    .wheel {
        --size: 170vw;
        --radius: 85vw;
        --card: 31.6667vw;
        flex-shrink: 0;
        width: 170vw;
        height: 190vw;
        margin: 10vw auto 0!important
    }

    .wheel__item.is-edge {
        opacity: 0;
        pointer-events: none
    }

    .wheel__card {
        font-size: 3.8889vw;
        line-height: 1.5;
        box-shadow: .8333vw .8333vw 4.7222vw rgba(158,158,158,.3)
    }

    .wheel__card::before {
        width: calc(100% + 3.0556vw * 2);
        height: calc(100% + 3.0556vw * 2)
    }

    .wheel__card span {
        padding: 4.1667vw
    }

    .wheel__nav {
        top: calc(53% + 3.8889vw)
    }

    .wheel__nav--prev {
        right: auto;
        left: calc(50% + 1.6667vw)
    }

    .wheel__nav--next {
        left: calc(50% - 11.9444vw)
    }

    .price-block {
        /* left: -1.3889vw; */
        top: 105.8889vw;
        width: 100%;
    }

    .price-block__bg {
        left: 0
    }

    .price-block__bubble {
        left: 55.7222vw;
        top: -3.3333vw;
        width: 34.2222vw;
        height: 35.4444vw;
        padding: 9.4444vw 3.6111vw 14.4444vw 3.0556vw
    }

    .price-block__value {
        font-size: 4.4444vw
    }
}

/* ---------- Clients ---------- */
.clients {
    padding: 2.3vw 0;
}

.clients .section-caption {
    margin-bottom: 5.2632vw
}

.clients__slider {
    padding: 0 6vw
}

.clients-slider {
    --per: 5;
    --rows: 2;
    --gap: 1.5789vw
}

.client-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 7.8947vw
}

.client-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto
}

@media (max-width: 991px) {
    .clients {
        padding:57.2222vw 0 19.4444vw
    }

    .clients .section-caption {
        margin-bottom: 7.2222vw
    }

    .clients__slider {
        padding: 0 8.8889vw
    }

    .clients-slider {
        --per: 2;
        --gap: 1.6667vw
    }

    .clients-slider .slider-arrow--prev {
        right: -11.3889vw
    }

    .clients-slider .slider-arrow--next {
        left: -11.3889vw
    }

    .client-logo {
        height: 13.8889vw
    }
}

/* ---------- Recommend ---------- */
.recommend-block {
    padding: 5.2632vw 6.3158vw 3.9474vw;
    border-radius: 2.6316vw;
    background: var(--accent) url(../images/recommend-bg.svg) no-repeat left bottom/cover
}

.recommend-block__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between
}

.recommend-block .section-caption {
    position: relative;
    padding-bottom: 1.6316vw;
    margin-bottom: 1.2105vw
}

.recommend-block .section-caption::after {
    left: auto;
    right: .6316vw;
    translate: none;
    width: 27.1053vw;
    background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 515 11'%3E%3Cellipse cx='257.5' cy='5.5' rx='257.5' ry='5.5' fill='%23000' fill-opacity='.15'/%3E%3C/svg%3E")
}

.recommend-block__logo img {
    width: auto;
    height: 4.2105vw
}

.recommend-slider {
    --per: 2;
    --gap: 3.1579vw
}

.recommend-slider .slider-arrow {
    top: 12.7368vw;
    translate: none
}

.recommend-card__bubble {
    position: relative;
    width: 30.7368vw;
    height: 21.4211vw;
    margin-bottom: -3.0526vw;
    padding: 6.6316vw 4vw 6.3158vw 4.8421vw;
    background: url(../images/review-bubble.svg) no-repeat center/contain;
    color: var(--brown-text)
}

.recommend-card__bubble p {
    max-height: calc(1.6em * 4);
    overflow: hidden;
    font-size: 1.0526vw;
    line-height: 1.6
}

.recommend-card__author {
    display: flex;
    align-items: center;
    gap: 3.1053vw;
    color: #fff;
    font-size: 1.0526vw;
    line-height: 1.6
}

.recommend-card__author img {
    flex: none;
    width: 12.3158vw;
    height: 12.9474vw;
    border-radius: 50%;
    object-fit: cover;
    border: .7895vw solid rgba(170,255,103,.3)
}

.recommend-card__name {
    font-size: 1.8421vw;
    line-height: .914;
    font-weight: 700
}

@media (max-width: 991px) {
    .recommend-block {
        padding:8.6111vw 4.4444vw 21.3889vw;
        border-radius: 4.1667vw;
        background: #7bb64c url(../images/recommend-mobile-bg.svg) no-repeat left bottom/cover
    }

    .recommend-block__top {
        flex-direction: column-reverse;
        align-items: center;
        gap: 11.1111vw
    }

    .recommend-block__logo img {
        height: 10.8333vw
    }

    .recommend-block .section-caption {
        text-align: center;
        padding-bottom: 5vw;
        margin-bottom: 9.4444vw
    }

    .recommend-block .section-caption::after {
        left: 50%;
        right: auto;
        translate: -50% 0
    }

    .recommend-slider {
        --per: 1;
        --gap: 8.3333vw
    }

    .recommend-slider .slider-arrow {
        top: 26.3889vw
    }

    .recommend-card__bubble {
        width: 83.3333vw;
        height: 50.5556vw;
        margin-bottom: 9.1667vw;
        padding: 13.8889vw 13.3333vw 6.9444vw 9.7222vw;
        background-image: url(../images/review-bubble-mobile.svg)
    }

    .recommend-card__bubble p {
        font-size: 3.6111vw;
        line-height: 1.5;
        max-height: calc(1.5em * 4)
    }

    .recommend-card__author {
        gap: 6.1111vw;
        font-size: 4.4444vw
    }

    .recommend-card__author img {
        width: 30.5556vw;
        height: 30.5556vw;
        border-width: 1.9444vw
    }

    .recommend-card__name {
        font-size: 6.6667vw
    }
}

/* ---------- FAQ ---------- */
.faq .section-caption {
    margin-bottom: 3.6458vw
}

.accordion__item {
    position: relative;
    z-index: 2;
    min-height: 6.0938vw;
    padding: 1.6667vw 6.5625vw 1.3542vw 11.9792vw;
    border-radius: 1.5625vw;
    background: var(--sand);
    transition: background .4s linear;
    cursor: pointer
}

.accordion__item+.accordion__item {
    margin-top: 1.5625vw
}

.accordion__item.is-open {
    background: var(--brown-text)
}

.accordion__item::before,.accordion__item::after {
    content: "";
    position: absolute;
    top: .7813vw;
    left: 6.6667vw;
    width: 4.4792vw;
    height: 4.4792vw;
    background: no-repeat center/contain;
    transition: all .4s linear;
    pointer-events: none
}

.accordion__item::before {
    background-image: url(../images/icons/paw-faq.svg)
}

.accordion__item::after {
    opacity: 0;
    background-image: url(../images/icons/paw-faq-open.svg)
}

.accordion__item.is-open::before,.accordion__item.is-open::after {
    top: 2.5vw;
    rotate: -90deg
}

.accordion__item.is-open::before {
    opacity: 0
}

.accordion__item.is-open::after {
    opacity: 1
}

.accordion__heading {
    margin: 0
}

.accordion__trigger {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    padding: 0 3.2292vw 0 0;
    text-align: right;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.875vw;
    line-height: 1.5;
    color: var(--brown-text);
    transition: color .4s linear
}

.accordion__trigger::before {
    content: "";
    position: absolute;
    top: -.4167vw;
    right: -.3125vw;
    width: 3.5417vw;
    height: 3.4896vw;
    background: url(../images/bone.webp) no-repeat center/contain;
    transition: rotate .4s linear
}

.accordion__trigger::after {
    content: "";
    position: absolute;
    inset: -1.6667vw -6.5625vw -1.3542vw -11.9792vw
}

.accordion__item.is-open .accordion__trigger {
    color: #fff
}

.accordion__item.is-open .accordion__trigger::before {
    rotate: -29deg
}

.accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .4s ease
}

.accordion__item.is-open .accordion__panel {
    grid-template-rows: 1fr
}

.accordion__panel>div {
    overflow: hidden;
    min-height: 0
}

.accordion__panel p {
    padding: .8333vw 3.2292vw 0 0;
    font-size: 1.25vw;
    line-height: 1.16;
    color: #fff
}

@media (max-width: 991px) {
    .faq {
        padding-top:19.4444vw
    }

    .faq .section-caption {
        margin-bottom: 4.1667vw
    }

    .accordion__item {
        min-height: 21.1111vw;
        padding: 5.5556vw 11.9444vw 5.5556vw 16.6667vw;
        border-radius: 4.1667vw;
        -webkit-tap-highlight-color: transparent
    }

    .accordion__item+.accordion__item {
        margin-top: 2.7778vw
    }

    .accordion__item::before,.accordion__item::after,.accordion__item.is-open::before,.accordion__item.is-open::after {
        top: 4.1667vw;
        left: 2.7778vw;
        width: 12.2222vw;
        height: 12.2222vw
    }

    .accordion__trigger {
        padding-right: 0;
        font-size: 4.4444vw
    }

    .accordion__trigger::before {
        top: -1.9444vw;
        right: -11.9444vw;
        width: 12.2222vw;
        height: 10.5556vw
    }

    .accordion__trigger::after {
        inset: -5.5556vw -11.9444vw -5.5556vw -16.6667vw
    }

    .accordion__panel p {
        padding: 4.4444vw 0 0;
        font-size: 3.8889vw
    }

    .accordion__panel p br {
        display: none
    }
}

/* ---------- Footer (restored) ---------- */
.site-footer {
    position: relative;
    z-index: 20;
    padding-block: var(--sp-7) calc(var(--sp-7));
    background: var(--c-cream-50);
    text-align: center
}

.site-footer .container {
    margin-bottom: 0
}

.site-footer__logo {
    display: inline-block
}

.site-footer__logo img {
    height: 3rem;
    width: auto;
    margin-inline:auto}

.site-footer__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-2) var(--sp-5);
    margin-top: var(--sp-5);
    font-size: var(--fs-300)
}

.site-footer__links a:hover {
    color: var(--accent);
    text-decoration: underline
}

.site-footer__copy {
    margin-top: var(--sp-3);
    font-size: var(--fs-300);
    line-height: 1.5;
    opacity: .8
}

/* ---------- Quiz wizard: restored rem-based sizing (independent of the vw homepage scale) ---------- */
.quiz {
    font-size: var(--fs-400);
    line-height: 1.6
}

.quiz .btn {
    min-height: clamp(3.25rem,2.6rem + 1.4vw,4.75rem);
    padding: .75rem clamp(1.25rem,.9rem + 1.5vw,2.75rem);
    gap: .6rem;
    border-radius: var(--r-sm);
    font-size: max(1.1875rem,var(--fs-500));
    line-height: 1.3;
    --shadow-shift: 4px;
    background: var(--c-green-600)
}

.quiz .btn:hover {
    background: var(--c-brown-500)
}

.quiz .btn--brown {
    background: var(--c-brown-500)
}

.quiz .btn--brown:hover {
    background: var(--c-green-600)
}

.quiz .btn__paw {
    width: 1.6rem;
    height: 1.6rem
}

@media (max-width: 767px) {
    .quiz .btn {
        --shadow-shift:3px
    }
}

/* ---------- Floating contact ---------- */
.float-whatsapp {
    position: fixed;
    z-index: 80;
    left: 2.1053vw;
    bottom: 2.1053vw;
    width: 6.4063vw;
    height: 6.4063vw;
    border-radius: 50%
}

.float-whatsapp img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    will-change: transform
}

/* original whats-app.json: icon pulse + expanding light rings → compositor-only CSS */
.float-whatsapp::before,.float-whatsapp::after {
    content: "";
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    background: #25d366;
    opacity: 0;
    will-change: transform,opacity
}

@media (prefers-reduced-motion:no-preference) {
    .float-whatsapp img {
        animation: wa-pulse 1.1s ease-in-out infinite
    }

    .float-whatsapp::before {
        animation: wa-ring 2.2s ease-out infinite
    }

    .float-whatsapp::after {
        animation: wa-ring 2.2s ease-out 1.1s infinite
    }
}

@keyframes wa-pulse {
    0%,100% {
        scale: 1
    }

    50% {
        scale: 1.07
    }
}

@keyframes wa-ring {
    0% {
        scale: 1;
        opacity: .45
    }

    100% {
        scale: 1.6;
        opacity: 0
    }
}

.float-phone {
    /* as on live: hangs from the bottom edge of the fixed header */
    position: fixed;
    z-index: 80;
    left: 2.1053vw;
    top: var(--header-bottom,var(--header-h));
    display: flex;
    align-items: center;
    gap: .4vw;
    padding: .45vw .9vw;
    border-radius: 0 0 .4211vw .4211vw;
    background: var(--brown-btn);
    color: #fff;
    font-size: .9474vw;
    font-weight: 700;
    direction: ltr;
    box-shadow: .2105vw .2105vw 0 rgba(204,150,98,.77);
    transition: background var(--t),box-shadow var(--t)
}

.float-phone::before {
    content: "";
    width: 1vw;
    height: 1vw;
    background: url(../images/icons/phone.svg) no-repeat center/contain
}

.float-phone:hover {
    background: var(--accent);
    box-shadow: -.2105vw -.2105vw 0 rgba(123,182,76,.77)
}

@media (max-width: 991px) {
    .float-whatsapp {
        left:1.1111vw;
        bottom: 4vw;
        width: 20.3333vw;
        height: 20.3333vw
    }

    .float-phone {
        left: 3.3vw;
        padding: 2.2vw;
        border-radius: 0 0 2vw 2vw;
        font-size: 0
    }

    .float-phone::before {
        width: 5.5vw;
        height: 5.5vw
    }
}

body.has-modal .float-whatsapp,body.has-modal .float-phone,body.has-modal .promo-timer {
    opacity: 0;
    pointer-events: none
}

/* ---------- Scroll reveal (original "counting-delay" lists) ---------- */
@media (prefers-reduced-motion:no-preference) {
    .js [data-reveal-group]>*,.js [data-reveal] {
        opacity: 0;
        translate: 0 1.5vw;
        transition: opacity .6s var(--ease),translate .6s var(--ease)
    }

    .js [data-reveal-group].is-visible>*,.js [data-reveal].is-visible {
        opacity: 1;
        translate: 0 0
    }

    .js [data-reveal-group].is-visible>*:nth-child(2) {
        transition-delay: .1s
    }

    .js [data-reveal-group].is-visible>*:nth-child(3) {
        transition-delay: .2s
    }

    .js [data-reveal-group].is-visible>*:nth-child(4) {
        transition-delay: .3s
    }
}

/* ==========================================================================
   Inner pages (unchanged behaviour; rem-based)
   ========================================================================== */
.text-page {
    padding-block:clamp(3.5rem,2rem + 6vw,8.5rem)}

.text-page .container {
    max-width: 860px;
    padding-inline:1.25rem}

.text-page,.status {
    font-size: clamp(1rem,.95rem + .2vw,1.125rem);
    line-height: 1.6
}

.text-page h1 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.75rem,1.2rem + 2.2vw,3.25rem);
    line-height: 1.15;
    color: var(--primary);
    margin-bottom: 2rem
}

.text-page h2 {
    font-size: clamp(1.25rem,1.05rem + .8vw,2rem);
    margin: 2rem 0 .75rem;
    line-height: 1.3
}

.text-page p+p {
    margin-top: 1em
}

.text-page ul {
    margin-block:1rem}

.text-page ul li {
    position: relative;
    padding-right: 2rem;
    margin-top: .5rem
}

.text-page ul li::before {
    content: "";
    position: absolute;
    right: 0;
    top: .3em;
    width: 1.2rem;
    height: 1.2rem;
    background: url(../images/icons/list-paw.svg) no-repeat center/contain
}

.text-page a {
    color: var(--green-dark);
    text-decoration: underline;
    text-underline-offset: 3px
}

.notice {
    margin-bottom: 2rem;
    padding: 1rem 1.5rem;
    border-right: 4px solid var(--primary);
    background: var(--cream);
    border-radius: .5rem
}

.status {
    min-height: calc(100vh - var(--header-h) - 10rem);
    display: grid;
    place-items: center;
    padding-block:4rem;text-align: center
}

.status .container {
    margin-bottom: 0
}

.status__card {
    display: grid;
    justify-items: center;
    gap: 1.5rem;
    max-width: 640px
}

.status__card img {
    width: min(320px,70vw)
}

.status .sc-title {
    font-size: clamp(1.75rem,1.2rem + 2.2vw,3.25rem)
}

.text-page .btn,.status .btn {
    font-size: 1.125rem;
    min-height: 3.25rem;
    padding: .75rem 2rem;
    border-radius: .5rem;
    gap: .6rem
}

.text-page .btn .btn__paw,.status .btn .btn__paw {
    width: 1.5rem;
    height: 1.5rem
}

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

    *,*::before,*::after {
        animation-duration: .01ms!important;
        animation-iteration-count: 1!important;
        transition-duration: .01ms!important
    }
}