/* =========================================================
   ОСНОВНОЙ CSS
   ---------------------------------------------------------
   Структура файла:
   1. Шрифты
   2. Базовые настройки и переменные
   3. Компоненты
   4. Keyframes
   5. Responsive
   ========================================================= */

/* =========================================================
   01. ШРИФТЫ
   ========================================================= */
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/dm-sans/dm-sans-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/fonts/manrope/manrope-cyrillic.woff2") format("woff2");
}

@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("/fonts/manrope/manrope-latin.woff2") format("woff2");
}

@font-face {
    font-family: "Playfair Display";
    font-style: italic;
    font-weight: 500 600;
    font-display: swap;
    src: url("/fonts/playfair-display/playfair-cyrillic-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Playfair Display";
    font-style: italic;
    font-weight: 500 600;
    font-display: swap;
    src: url("/fonts/playfair-display/playfair-latin-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 500 600;
    font-display: swap;
    src: url("/fonts/playfair-display/playfair-cyrillic.woff2") format("woff2");
}

@font-face {
    font-family: "Playfair Display";
    font-style: normal;
    font-weight: 500 600;
    font-display: swap;
    src: url("/fonts/playfair-display/playfair-latin.woff2") format("woff2");
}

/* =========================================================
   02. БАЗА И ПЕРЕМЕННЫЕ
   ========================================================= */
:root {
    --ink: #10130f;
    --paper: #f0ece3;
    --paper-2: #e5dfd2;
    --white: #fbfaf6;
    --sage: #9caf7f;
    --sage-deep: #738660;
    --sage-soft: #c2ceb0;
    --line: rgba(16, 19, 15, .11);
    --line-light: rgba(251, 250, 246, .13);
    --serif: "Playfair Display", Georgia, serif;
    --sans: "Manrope", "DM Sans", Arial, sans-serif;
    --gutter: clamp(20px, 3.3vw, 58px);
    --radius: 26px;
    --ease: cubic-bezier(.16, .84, .22, 1);
    --section: clamp(92px, 11vw, 168px);
    --hero-title-size: clamp(66px, 8.4vw, 136px);
    --hero-title-size-tablet: clamp(50px, 13vw, 74px);
    --hero-title-size-mobile: clamp(46px, 13.2vw, 64px);
    --hero-title-line-height: .92;
    --hero-title-letter-spacing: -.055em;
    --body-text-size: 15px;
    --hero-description-size: 14px;
    --button-text-size: 10px;
    --mobile-gutter: 18px;
    --frame-content-pad: clamp(40px, 6vw, 92px);
    --display: "Manrope", "DM Sans", Arial, sans-serif;
    --display-accent: "Playfair Display", Georgia, serif;
    --hero-modern-main-size: clamp(64px, 7.4vw, 112px);
    --hero-modern-sub-size: clamp(24px, 2.35vw, 38px);
    --hero-modern-main-line: .9;
    --hero-modern-sub-line: 1;
    --hero-left-width: min(720px, 52vw);
    --hero-main-size: clamp(58px, 6.65vw, 112px);
    --hero-sub-size: clamp(24px, 2.1vw, 34px);
    --hero-copy-gap: clamp(26px, 3vw, 42px);
    --hero-card-radius: 26px;
    --hero-readable-main: clamp(74px, 7.2vw, 118px);
    --hero-readable-sub: clamp(28px, 2.5vw, 40px);
    --hero-readable-copy: clamp(17px, 1.2vw, 19px);
    --hero-readable-label: clamp(12px, .75vw, 14px);
    --hero-readable-stat: clamp(28px, 2.4vw, 38px);
    --type-ui: 12px;
    --type-ui-strong: 13px;
    --type-body: 17px;
    --type-lead: 20px;
    --type-card: clamp(24px, 1.9vw, 30px);
    --type-subheading: clamp(40px, 3.5vw, 56px);
    --type-section: clamp(56px, 5vw, 80px);
    --type-hero: clamp(84px, 7.8vw, 118px);
    --type-stat: 28px;
    --type-small: 14px;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 110px;
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
}

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

button {
    border: 0;
    cursor: pointer;
}

::selection {
    background: rgba(156, 175, 127, .34);
    color: var(--ink);
}

/* =========================================================
   03. ЗАГРУЗЧИК
   ========================================================= */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: #0b0d0c;
    color: #fff;
    display: grid;
    place-items: center;
    transition: opacity .8s var(--ease), visibility .8s var(--ease);
}

.preloader.done {
    opacity: 0;
    visibility: hidden;
}

.preloader-inner {
    width: min(430px, 76vw);
    text-align: center;
}

.preloader-inner img {
    height: auto;
}

.preloader-inner span {
    display: block;
    margin-top: 18px;
    color: rgba(255, 255, 255, .38);
    font-size: 8px;
    letter-spacing: .24em;
}

.preloader-track {
    height: 1px;
    margin-top: 26px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
}

.preloader-track i {
    display: block;
    width: 28%;
    height: 100%;
    background: var(--sage);
    animation: loader 1.35s infinite;
}

/* =========================================================
   04. ШАПКА И НАВИГАЦИЯ
   ========================================================= */
main,
.section,
.frame,
.header,
.footer {
    min-width: 0;
}

.header {
    position: fixed;
    z-index: 100;
    top: 12px;
    left: var(--gutter);
    right: var(--gutter);
    height: 72px;
    padding: 0 10px 0 18px;
    display: grid;
    grid-template-columns: 175px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 22px;
    background: rgba(10, 13, 11, .42);
    backdrop-filter: blur(22px) saturate(1.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
    transition: .5s var(--ease);
    box-shadow: 0 16px 55px rgba(0, 0, 0, .08);
}

.header.scrolled {
    background: rgba(10, 13, 11, .88);
    box-shadow: 0 16px 55px rgba(0, 0, 0, .18);
}

.brand {
    width: 164px;
    display: block;
}

.brand img {
    height: auto;
    object-fit: contain;
}

.nav a {
    position: relative;
    padding: 7px 0;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .76);
    font-weight: 900;
}

.nav a span {
    margin-right: 7px;
    color: var(--sage);
}

.nav a:after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 1px;
    height: 1px;
    background: var(--sage);
    transition: right .4s var(--ease);
}

.nav a:hover:after {
    right: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    min-width: 0;
}

.header-phone {
    height: 46px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 13px;
    background: rgba(255, 255, 255, .035);
    color: rgba(255, 255, 255, .78);
    white-space: nowrap;
    transition: background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}

.header-phone:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .2);
    transform: translateY(-1px);
}

.header-phone-number {
    font-size: 10px;
    line-height: 1;
    letter-spacing: .08em;
}

.header-phone .ui-icon {
    --icon-size: 17px;
}

.header-phone:hover .ui-icon {
    transform: translate3d(1px, -1px, 0) scale(1.08) rotate(-8deg);
}

.header-phone:hover .ui-icon::before {
    opacity: .22;
    transform: scale(1);
}

.header-phone:hover .ui-icon::after {
    opacity: .75;
    transform: scale(1);
}

.header-phone:hover .ui-icon svg {
    transform: scale(1.08);
    stroke-width: 1.9;
}

.header-book,
.mobile-book {
    height: 46px;
    padding: 0 15px 0 18px;
    border-radius: 14px;
    background: var(--white);
    color: #121511;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.header-book b,
.mobile-book b,
.button b {
    font-size: 17px;
    font-weight: 500;
}

.button:hover .ui-icon,
.header-book:hover .ui-icon,
.header-phone:hover .ui-icon,
.mobile-phone:hover .ui-icon,
.mobile-book:hover .ui-icon,
.line-link:hover .ui-icon,
.text-link:hover .ui-icon,
.pet-card:hover .ui-icon,
.service-option:hover .ui-icon,
.map-link:hover .ui-icon,
.gift-visual a:hover .ui-icon {
    transform: translate3d(3px, -3px, 0) scale(1.08) rotate(7deg);
}

.button:hover .ui-icon::before,
.header-book:hover .ui-icon::before,
.header-phone:hover .ui-icon::before,
.mobile-phone:hover .ui-icon::before,
.mobile-book:hover .ui-icon::before,
.line-link:hover .ui-icon::before,
.text-link:hover .ui-icon::before,
.pet-card:hover .ui-icon::before,
.service-option:hover .ui-icon::before,
.map-link:hover .ui-icon::before,
.gift-visual a:hover .ui-icon::before {
    opacity: .22;
    transform: scale(1);
}

.button:hover .ui-icon::after,
.header-book:hover .ui-icon::after,
.header-phone:hover .ui-icon::after,
.mobile-phone:hover .ui-icon::after,
.mobile-book:hover .ui-icon::after,
.line-link:hover .ui-icon::after,
.text-link:hover .ui-icon::after,
.pet-card:hover .ui-icon::after,
.service-option:hover .ui-icon::after,
.map-link:hover .ui-icon::after,
.gift-visual a:hover .ui-icon::after {
    opacity: .75;
    transform: scale(1);
}

.button:hover .ui-icon svg,
.header-book:hover .ui-icon svg,
.header-phone:hover .ui-icon svg,
.mobile-phone:hover .ui-icon svg,
.mobile-book:hover .ui-icon svg,
.line-link:hover .ui-icon svg,
.text-link:hover .ui-icon svg,
.pet-card:hover .ui-icon svg,
.service-option:hover .ui-icon svg,
.map-link:hover .ui-icon svg,
.gift-visual a:hover .ui-icon svg {
    transform: translate3d(2px, -2px, 0) scale(1.12);
    stroke-width: 1.9;
}

.button .ui-icon,
.header-book .ui-icon,
.mobile-book .ui-icon {
    --icon-size: 18px;
}

.header-book .ui-icon,
.mobile-book .ui-icon {
    --icon-size: 17px;
}

.button,
.header-book,
.mobile-book,
.line-link,
.text-link,
.map-link,
.service-option,
.pet-info {
    align-items: center;
}

.button,
.header-book,
.mobile-book {
    gap: 16px;
}

.button:hover .ui-icon-spark,
.header-book:hover .ui-icon-spark,
.mobile-book:hover .ui-icon-spark {
    transform: translate3d(1px, -1px, 0) rotate(18deg) scale(1.12);
}

.button:hover .ui-icon-spark svg,
.header-book:hover .ui-icon-spark svg,
.mobile-book:hover .ui-icon-spark svg {
    transform: rotate(72deg) scale(.9);
    stroke-width: 1.8;
}

.button:hover .ui-icon::before,
.header-book:hover .ui-icon::before,
.mobile-book:hover .ui-icon::before,
.line-link:hover .ui-icon::before,
.text-link:hover .ui-icon::before,
.pet-card:hover .ui-icon::before,
.service-option:hover .ui-icon::before,
.map-link:hover .ui-icon::before {
    opacity: .16;
    transform: scale(1.12);
}

.button:hover .ui-icon::after,
.header-book:hover .ui-icon::after,
.mobile-book:hover .ui-icon::after,
.line-link:hover .ui-icon::after,
.text-link:hover .ui-icon::after,
.pet-card:hover .ui-icon::after,
.service-option:hover .ui-icon::after,
.map-link:hover .ui-icon::after {
    opacity: .95;
    transform: scale(1);
    box-shadow: 0 0 0 5px rgba(156, 175, 127, .08);
}

body,
button,
input,
select,
textarea,
.nav a,
.header-book,
.mobile-book,
.button,
.text-link,
.line-link,
.section-index,
.tiny-label,
.hero-meta,
.hero-corner,
.hero-fact span,
.hero-pet-card span,
.hero-pet-note,
.service-panel-head p,
.service-category-title span,
.service-option,
.service-option-name,
.service-option-price,
.service-footnote,
.principle,
.principle strong,
.principle p,
.daycare-copy p,
.tag-cloud span,
.daycare-service,
.contact-item,
.contact-item strong,
.contact-item a,
.footer,
.modal-window,
.media-stamp {
    font-family: var(--sans);
}

.nav a,
.header-phone-number,
.header-book,
.mobile-book,
.button,
.text-link,
.line-link,
.section-index,
.tiny-label,
.eyebrow,
.hero-corner,
.hero-pet-card span,
.hero-fact span,
.hero-opening,
.service-category-title span,
.service-category-number,
.service-option,
.service-footnote,
.media-stamp,
.tag-cloud span,
.footer-bottom,
.contact-item > span,
.gift-top,
.gift-bottom {
    font-size: var(--type-ui);
}

.button,
.header-book,
.mobile-book,
.text-link,
.line-link {
    font-size: var(--type-ui-strong);
}

/* =========================================================
   05. ИКОНКИ
   ========================================================= */
.mobile-phone .ui-icon {
    --icon-size: 18px;
}

.ui-icon {
    --icon-size: 19px;
    position: relative;
    width: var(--icon-size);
    height: var(--icon-size);
    min-width: var(--icon-size);
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 6px;
    overflow: visible;
    color: currentColor;
    transition: transform .55s var(--ease),
    background-color .45s var(--ease),
    color .35s var(--ease),
    box-shadow .55s var(--ease);
    isolation: isolate;
    transform-origin: 50% 50%;
}

.ui-icon::before {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px solid currentColor;
    border-radius: 8px;
    opacity: 0;
    transform: scale(.72);
    transition: opacity .28s ease, transform .5s var(--ease);
}

.ui-icon::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    top: -4px;
    right: -4px;
    border-radius: 50%;
    background: var(--sage);
    opacity: 0;
    transform: scale(.5);
    transition: opacity .25s ease, transform .45s var(--ease), box-shadow .45s ease;
    box-shadow: 0 0 0 0 rgba(156, 175, 127, 0);
}

.ui-icon svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.55;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
    transition: transform .55s cubic-bezier(.2, .8, .2, 1.15), stroke-width .3s ease, opacity .3s ease;
}

.ui-icon-arrow svg {
    transform-origin: 50% 50%;
}

.ui-icon-down svg {
    transform-origin: 50% 45%;
}

.ui-icon-route {
    --icon-size: 17px;
}

.ui-icon-route svg {
    transform-origin: 50% 50%;
}

.ui-icon-phone svg {
    transform-origin: 50% 50%;
}

.text-link:hover .ui-icon-down {
    transform: translate3d(0, 3px, 0) scale(1.1);
}

.text-link:hover .ui-icon-down svg {
    transform: translateY(2px) scale(1.08);
}

.pet-card:hover .ui-icon,
.pet-info .ui-icon {
    --icon-size: 20px;
    color: var(--sage);
}

.line-link .ui-icon,
.text-link .ui-icon {
    --icon-size: 17px;
}

.map-link .ui-icon {
    --icon-size: 18px;
}

.ui-icon-spark svg {
    transform-origin: 50% 50%;
}

.ui-icon-eye svg {
    transform-origin: 50% 50%;
}

.ui-icon-paw svg {
    transform-origin: 50% 68%;
}

.ui-icon-plus svg {
    transform-origin: 50% 50%;
}

.ui-icon-pin svg {
    transform-origin: 50% 50%;
}

.ui-icon-chevron svg {
    transform-origin: 50% 50%;
}

.line-link:hover .ui-icon-eye {
    transform: translateY(-1px) scale(1.08);
}

.line-link:hover .ui-icon-eye svg {
    transform: scaleX(1.08) scaleY(1.03);
    stroke-width: 1.8;
}

.pet-card:hover .ui-icon-paw {
    transform: translateY(-2px) scale(1.08) rotate(-6deg);
}

.pet-card:hover .ui-icon-paw svg {
    transform: translateY(-2px) rotate(10deg) scale(1.04);
    stroke-width: 1.75;
}

.map-link:hover .ui-icon-pin {
    transform: translateY(-2px) scale(1.06);
}

.map-link:hover .ui-icon-pin svg {
    transform: translateY(-2px) scale(1.04);
}

.text-link:hover .ui-icon-chevron {
    transform: translateY(2px) scale(1.08);
}

.text-link:hover .ui-icon-chevron svg {
    transform: translateY(2px) scale(1.02);
}

.services-head > .pet-stage .pet-info .ui-icon {
    --icon-size: 22px;
}

.services-head > .pet-stage .pet-info > .ui-icon-paw,
.pet-stage .pet-info > .ui-icon-paw {
    align-self: center !important;
    justify-self: end !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex: 0 0 18px !important;
    margin: 0 !important;
    transform: none !important;
}

.services-head > .pet-stage .pet-info > .ui-icon-paw svg,
.pet-stage .pet-info > .ui-icon-paw svg {
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
}

/* =========================================================
   06. МОБИЛЬНОЕ МЕНЮ
   ========================================================= */
.mobile-phone {
    width: 100%;
    min-height: 52px;
    margin-top: 18px;
    padding: 0 16px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 14px;
    background: rgba(255, 255, 255, .055);
    color: #fff;
    font: inherit;
    transition: background .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}

.mobile-phone:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .22);
    transform: translateY(-1px);
}

.mobile-phone-label {
    color: rgba(255, 255, 255, .48);
    font-size: 10px;
    line-height: 1;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.mobile-phone-number {
    margin-left: auto;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .03em;
    white-space: nowrap;
}

.menu-trigger {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .18);
    padding: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
}

.menu-trigger i {
    width: 17px;
    height: 1px;
    background: #fff;
    transition: .35s;
}

.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: #090c0a;
    color: #fff;
    padding: 20px var(--gutter);
    transform: translateY(-102%);
    transition: transform .68s var(--ease), visibility .68s var(--ease);
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    flex-direction: column;
}

.mobile-nav.open {
    transform: none;
}

.mobile-nav-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255, 255, 255, .42);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 64px;
}

.mobile-nav > a:not(.mobile-phone) {
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    padding: 17px 0;
    border-bottom: 1px solid var(--line-light);
    font: 500 clamp(30px, 8vw, 48px)/1 var(--serif);
}

.mobile-nav > a:not(.mobile-phone) span {
    font: 500 10px/1 var(--sans);
    color: var(--sage);
}

.mobile-book {
    width: 100%;
    margin-top: 26px;
    background: var(--sage);
    color: #fff;
}

/* =========================================================
   07. HERO
   ========================================================= */
.hero {
    position: relative;
    min-height: 720px;
    height: 100svh;
    overflow: hidden;
    background: #0b0d0c;
    color: #fff;
}

.hero-meta {
    position: absolute;
    top: 112px;
    left: var(--gutter);
    right: var(--gutter);
    display: flex;
    justify-content: space-between;
    gap: 18px;
    color: rgba(255, 255, 255, .43);
    font-size: 8px;
    letter-spacing: .23em;
    text-transform: uppercase;
}

.hero-copy {
    position: absolute;
    z-index: 3;
    left: var(--gutter);
    top: 50%;
    width: min(840px, 69vw);
    transform: translateY(-42%);
}

.hero h1 {
    margin: 0;
    max-width: 1000px;
    font: 500 clamp(70px, 9vw, 148px)/.82 var(--serif);
    letter-spacing: var(--hero-title-letter-spacing);
    font-size: var(--hero-title-size);
    line-height: var(--hero-title-line-height);
    font-weight: 600;
}

.hero h1 em {
    font-style: italic;
    color: var(--sage-soft);
}

.hero-copy > p {
    max-width: 540px;
    margin: 32px 0 36px;
    color: rgba(255, 255, 255, .63);
    font-size: 16px;
    line-height: 1.9;
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 33px;
}

.hero-corner {
    position: absolute;
    color: rgba(255, 255, 255, .39);
    font-size: 8px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.hero-corner-bottom {
    right: var(--gutter);
    bottom: 37px;
    display: flex;
    align-items: center;
    gap: 13px;
    writing-mode: vertical-rl;
    opacity: .60;
}

.hero-corner-bottom i {
    width: 1px;
    height: 58px;
    background: rgba(255, 255, 255, .25);
}

.hero.hero-pet {
    min-height: 820px;
    height: 100svh;
    background: #0b0f0c;
    color: #fff;
    display: grid;
    grid-template-columns: minmax(0, 54%) minmax(360px, 46%);
    padding: 126px var(--gutter) 42px;
    isolation: isolate;
}

.hero-pet-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 70% 33%, rgba(156, 175, 127, .20), transparent 23%),
    radial-gradient(circle at 91% 78%, rgba(118, 85, 62, .13), transparent 24%),
    linear-gradient(105deg, #090d0b 0%, #0d120f 48%, #111711 100%);
    z-index: -3;
}

.hero-pet-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(55px);
    pointer-events: none;
    z-index: -1;
}

.hero-pet-glow-a {
    width: 360px;
    height: 360px;
    right: 23%;
    top: 26%;
    background: rgba(156, 175, 127, .18);
}

.hero-pet-glow-b {
    width: 280px;
    height: 280px;
    right: -3%;
    bottom: -4%;
    background: rgba(118, 85, 62, .18);
}

.hero-pet-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .14;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 84px 84px;
    mask-image: linear-gradient(90deg, transparent 0%, black 42%, black 100%);
}

.hero-pet-copy {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: min(680px, 54vw);
    max-width: 680px;
    align-self: center;
    z-index: 5;
    grid-column: 1;
    grid-row: 1;
    padding-top: 8px;
}

.hero-pet-copy h1 {
    max-width: 760px;
    font-size: clamp(66px, 8.2vw, 132px);
    line-height: .84;
    letter-spacing: -.075em;
}

.hero-pet-copy > p {
    max-width: 560px;
    font-size: var(--type-lead) !important;
    line-height: 1.5;
    color: rgba(255, 255, 255, .84);
    margin: 30px 0 32px;
    font-weight: 500;
}

.hero-pet-copy .hero-actions {
    gap: 18px;
}

.hero-pet-copy .button {
    min-height: 60px;
    padding: 0 22px;
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(0, 0, 0, .18);
    font-size: 13px;
    letter-spacing: .055em;
    font-weight: 700;
}

.hero-pet-copy .text-link {
    font-size: 13px;
    color: rgba(255, 255, 255, .78);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: .05em;
}

.hero-facts {
    display: grid;
    gap: 0;
    margin-top: 46px;
    max-width: 650px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding-top: 22px;
}

.hero-fact {
    min-width: 0;
    padding: 0 22px;
    border: 0;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
}

.hero-fact strong {
    display: block;
    font: 600 var(--hero-readable-stat)/1 var(--sans);
    color: #fff;
    font-size: var(--type-stat) !important;
    letter-spacing: -.03em;
    line-height: 1;
}

.hero-fact span {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, .58);
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: .045em;
    text-transform: none;
}

.hero-pet-cloud {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    min-width: 0;
    width: min(100%, 690px);
    height: min(760px, calc(100vh - 170px));
    z-index: 3;
    overflow: visible;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: center;
}

.hero-pet-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}

.hero-pet-orb-a {
    width: 390px;
    height: 390px;
    left: 18%;
    top: 21%;
    border: 1px solid rgba(194, 206, 176, .08);
    background: rgba(156, 175, 127, .035);
    box-shadow: 0 0 0 90px rgba(156, 175, 127, .018), 0 0 0 180px rgba(156, 175, 127, .008);
}

.hero-pet-orb-b {
    width: 160px;
    height: 160px;
    right: 6%;
    bottom: 8%;
    background: rgba(118, 85, 62, .13);
    filter: blur(20px);
}

.hero-pet-card {
    position: absolute;
    width: 156px;
    height: 202px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--hero-card-radius);
    background: rgba(255, 255, 255, .055);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .31);
    overflow: hidden;
    will-change: transform, translate;
    transition: transform .28s var(--ease), border-color .28s ease;
    animation: heroPetFloat 6s ease-in-out infinite;
    transform: rotate(var(--card-rotate, 0deg)) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) scale(var(--tilt-scale, 1));
    translate: 0 0;
}

.hero-pet-card img,
.hero-pet-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 17px;
    display: block;
    filter: saturate(.9) contrast(1.02);
}

.hero-pet-card:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 7, 6, .02) 30%, rgba(5, 7, 6, .72) 100%);
    pointer-events: none;
}

.hero-pet-card span {
    position: absolute;
    z-index: 2;
    left: 13px;
    right: 12px;
    bottom: 13px;
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
    letter-spacing: .02em;
    font-weight: 600;
}

.hero-pet-card-1 {
    left: 10%;
    top: 18%;
    --card-rotate: -3deg;
    animation-delay: -1s;
    width: 238px;
    height: 310px;
}

.hero-pet-card-2 {
    left: 45%;
    top: 7%;
    width: 150px;
    height: 196px;
    --card-rotate: 3deg;
    animation-delay: -3s;
}

.hero-pet-card-3 {
    right: 0;
    top: 24%;
    width: 174px;
    height: 226px;
    --card-rotate: 4deg;
    animation-delay: -2s;
}

.hero-pet-card-4 {
    left: 0;
    bottom: 10%;
    width: 154px;
    height: 202px;
    --card-rotate: 3deg;
    animation-delay: -4s;
}

.hero-pet-card-5 {
    right: 16%;
    bottom: 1%;
    width: 188px;
    height: 242px;
    --card-rotate: -4deg;
    animation-delay: -.5s;
}

.hero-pet-note {
    position: absolute;
    right: 0;
    top: 51%;
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, .43);
    font-size: 11px;
    line-height: 1.45;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hero-pet-note b {
    font: 500 29px/1 var(--serif);
    color: var(--sage-soft);
}

.hero-meta,
.hero-corner,
.eyebrow,
.section-index,
.tiny-label {
    font-size: 11px;
}

.hero h1,
.intro-title h2,
.philosophy-content h2,
.services-head h2,
.service-panel-head h3,
.daycare-copy h2,
.gift-copy h2,
.contacts h2,
.modal-window h2,
.modal-window h3,
.form-success h3 {
    font-family: var(--display);
    font-style: normal;
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: .94;
    font-kerning: normal;
    font-feature-settings: "kern" 1, "liga" 1;
    text-wrap: balance;
}

.hero h1 em,
.intro-title h2 em,
.philosophy-content h2 em,
.services-head h2 em,
.service-panel-head h3 em,
.daycare-copy h2 em,
.gift-copy h2 em,
.contacts h2 em,
.modal-window h2 em,
.modal-window h3 em,
.form-success h3 em {
    font-family: var(--display-accent);
    font-style: italic;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.hero-pet-copy .button,
.hero-pet-copy .text-link {
    font-size: var(--type-ui-strong) !important;
}

.hero-fact span,
.hero-pet-card span {
    font-size: var(--type-ui) !important;
    line-height: 1.35;
}

.hero-pet-copy .hero-topline .eyebrow,
.hero-pet-copy .hero-topline .hero-opening {
    font-size: var(--type-ui) !important;
}

.intro-grid,
.services-head,
.service-panel-head,
.daycare-grid,
.gift,
.contacts-grid,
.hero-pet,
.hero-pet-copy,
.hero-pet-cloud {
    min-width: 0;
}

.legal-hero {
    max-width: 1000px;
    margin: 0 auto 78px;
}

.hero-pet-copy .hero-topline {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    margin-bottom: clamp(28px, 3vw, 42px);
}

.hero-pet-copy .hero-topline .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    color: rgba(255, 255, 255, .62);
    font-size: 11px !important;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.hero-pet-copy .hero-topline .eyebrow i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    margin: 0;
    box-shadow: 0 0 0 6px rgba(156, 175, 127, .10);
}

.hero-pet-copy .hero-topline .eyebrow span {
    white-space: nowrap;
}

.hero-pet-copy .hero-opening {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 31px;
    padding: 0 11px;
    border: 1px solid rgba(194, 206, 176, .20);
    border-radius: 999px;
    background: rgba(156, 175, 127, .075);
    color: rgba(239, 244, 232, .82);
    font-size: 9px !important;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.hero-opening-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--sage);
    box-shadow: 0 0 0 4px rgba(156, 175, 127, .08);
}

.hero-copy-content {
    max-width: 620px;
}

.hero-title-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 13px;
    color: rgba(255, 255, 255, .40);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .20em;
    text-transform: uppercase;
}

.hero-title-eyebrow i {
    width: 25px;
    height: 1px;
    background: rgba(156, 175, 127, .55);
}

.hero-pet-copy h1.hero-title {
    display: block;
    margin: 0;
    max-width: 620px;
    font-family: var(--serif) !important;
    font-size: clamp(74px, 7.3vw, 116px) !important;
    font-weight: 500 !important;
    line-height: .82 !important;
    letter-spacing: -.068em !important;
}

.hero-title-main {
    display: block;
    white-space: nowrap;
    color: #fff;
}

.hero-title-main-accent {
    margin-left: clamp(22px, 4vw, 58px);
}

.hero-title-main em {
    font-family: var(--serif) !important;
    font-style: italic;
    font-weight: 500;
    color: var(--sage-soft);
}

.hero-title-sub {
    display: block;
    max-width: 420px;
    margin: 25px 0 0 5px !important;
    color: rgba(255, 255, 255, .59);
    font-family: var(--sans) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    letter-spacing: .01em !important;
    white-space: normal !important;
}

.hero-title-sub span {
    display: block;
    max-width: 100%;
    color: inherit !important;
    font: inherit !important;
    letter-spacing: inherit !important;
    text-transform: none !important;
}

.hero-pet-copy .button-sage {
    min-height: 53px;
    padding: 0 18px 0 20px;
    gap: 30px;
    font-size: 10px !important;
}

/* =========================================================
   08. О САЛОНЕ
   ========================================================= */
.intro {
    position: relative;
    overflow: hidden;
    background: var(--paper);
}

.intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, .78fr);
    gap: clamp(50px, 8vw, 130px);
    position: relative;
    z-index: 2;
}

.intro-copy {
    max-width: 560px;
    padding-top: 15px;
}

.intro-copy p {
    margin: 0 0 24px;
    color: #62675e;
    font-size: 16px;
    line-height: 1.8;
}

.intro-copy .lead {
    font-size: var(--type-lead);
    line-height: 1.55;
    color: #252a23;
}

.intro-word {
    position: absolute;
    right: -4vw;
    top: 50%;
    transform: translateY(-34%);
    z-index: 0;
    color: rgba(115, 134, 96, .06);
    font: 500 clamp(180px, 29vw, 470px)/.7 var(--serif);
    letter-spacing: -.08em;
    pointer-events: none;
    font-size: clamp(170px, 27vw, 420px) !important;
}

.intro-marquee {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 145px;
    white-space: nowrap;
    transform: translateX(-5vw);
    color: #c0b8ab;
    font: 500 clamp(62px, 8vw, 132px)/.72 var(--serif);
    letter-spacing: -.055em;
    font-size: clamp(54px, 7vw, 108px) !important;
}

.intro-marquee b {
    font: 400 17px/1 var(--sans);
    color: var(--sage-deep);
}

.intro-title h2,
.services h2,
.contacts h2 {
    font-size: clamp(58px, 7vw, 110px);
    line-height: .9;
}

.intro-copy p,
.principle p,
.daycare-copy > p,
.gift-copy p,
.contacts-head p {
    font-size: 16px;
}

.intro-title h2,
.services-head h2,
.contacts h2 {
    font-size: clamp(50px, 6.2vw, 96px);
    line-height: .94;
}

.intro-title h2 em,
.services-head h2 em,
.contacts h2 em {
    color: var(--sage-deep);
}

.intro-word,
.intro-marquee,
.gift-top,
.gift-bottom {
    font-family: var(--display-accent);
}

.intro-copy p,
.principle p,
.daycare-copy > p,
.gift-copy p,
.contacts-head p,
.service-panel-head p,
.services-head-copy > p {
    font-size: var(--type-body);
    line-height: 1.65;
}

.intro-title h2,
.philosophy-content h2,
.services-head h2,
.daycare-copy h2,
.gift-copy h2,
.contacts h2 {
    font-size: var(--type-section);
    line-height: .94;
    letter-spacing: -.055em;
    font-weight: 600;
}

.legal-intro {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
}

/* =========================================================
   09. ФИЛОСОФИЯ
   ========================================================= */
.philosophy {
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    min-height: 820px;
    background: #101410;
    color: #fff;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(27, 31, 25, .08);
}

.philosophy-image {
    position: relative;
    min-height: 540px;
    overflow: hidden;
}

.philosophy-image img {
    filter: saturate(.7);
    will-change: transform;
}

.philosophy-image:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(6, 8, 7, .78), transparent 58%);
}

.philosophy-content {
    padding: clamp(38px, 5vw, 78px);
    display: flex;
    flex-direction: column;
}

.philosophy-content h2 {
    margin: 18px 0 72px;
    font: 500 clamp(52px, 5.6vw, 95px)/.86 var(--serif);
    letter-spacing: -.065em;
    font-size: clamp(50px, 5.4vw, 88px);
    line-height: .94;
}

.philosophy-content h2 em {
    font-style: italic;
    color: var(--sage);
}

.principles {
    margin-top: auto;
    border-top: 1px solid var(--line-light);
}

.principle {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 14px;
    padding: 20px 0;
    border-bottom: 1px solid var(--line-light);
}

.principle > span {
    font-size: 9px;
    color: var(--sage);
}

.principle strong {
    font: 500 24px/1 var(--serif);
    font-size: 22px;
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -0.025em;
}

.principle p {
    margin: 7px 0 0;
    max-width: 450px;
    color: rgba(255, 255, 255, .5);
    font-size: 13px;
    line-height: 1.75;
}

.principle strong,
.service-category-title h4,
.pet-info strong {
    font-size: var(--type-card) !important;
    line-height: 1.05;
    font-weight: 600 !important;
}

/* =========================================================
   10. УСЛУГИ И ПИТОМЦЫ
   ========================================================= */
.services {
    background: radial-gradient(circle at 12% 18%, rgba(156, 175, 127, .10), transparent 26%),
    linear-gradient(180deg, #eee9df 0%, #e9e3d7 100%);
    position: relative;
}

.services-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(560px, 42vw);
    gap: clamp(28px, 6vw, 88px);
    align-items: center;
    margin-bottom: clamp(28px, 3vw, 42px);
    grid-template-rows: auto;
    column-gap: clamp(50px, 5vw, 90px);
}

.services-head > p {
    max-width: 430px;
    margin: 0;
    color: #6d7169;
    line-height: 1.75;
    font-size: 12px;
}

.pet-stage {
    display: flex !important;
    gap: 12px !important;
    height: clamp(260px, 27vw, 360px) !important;
    min-height: 260px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(24, 30, 23, .10) !important;
    position: relative;
    width: 100%;
    padding: 0 !important;
    background: transparent !important;
}

.pet-card {
    position: relative;
    min-width: 0;
    flex: 1;
    overflow: hidden;
    border-radius: 30px;
    background: #101410;
    color: #fff;
    text-align: left;
    transition: flex .9s var(--ease), filter .6s var(--ease);
    outline: none;
}

.pet-card.active {
    flex: 1.28 1 0 !important;
}

.pet-card video {
    position: absolute !important;
    inset: 0 !important;
    filter: saturate(.62) brightness(.78) !important;
    transition: filter .7s var(--ease) !important;
    z-index: auto !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transform: none !important;
}

.pet-card.active video {
    filter: saturate(.86) brightness(.87) !important;
    transform: none !important;
}

.pet-overlay {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg, rgba(7, 9, 8, .04), rgba(7, 9, 8, .18) 36%, rgba(7, 9, 8, .84)) !important;
    z-index: 1 !important;
}

.pet-number {
    position: absolute !important;
    z-index: 2 !important;
    top: 18px !important;
    left: 20px !important;
    color: rgba(255, 255, 255, .5) !important;
    font-size: 10px;
    letter-spacing: .18em !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.pet-info {
    position: absolute !important;
    left: 20px !important;
    right: 20px !important;
    bottom: 20px !important;
    display: grid !important;
    grid-template-columns: 38px 1fr 20px !important;
    align-items: end !important;
    z-index: 2 !important;
}

.pet-info small {
    font-size: 10px;
    letter-spacing: .16em !important;
    color: rgba(255, 255, 255, .52) !important;
}

.pet-info strong {
    font: 500 clamp(34px, 3.5vw, 54px)/.88 var(--serif) !important;
    letter-spacing: -0.025em !important;
    font-size: clamp(31px, 3.4vw, 56px);
    line-height: .84;
    font-family: var(--display-accent) !important;
    font-style: normal !important;
    font-weight: 500 !important;
}

.pet-info b {
    font-size: 18px !important;
    color: var(--sage) !important;
    font-weight: 400 !important;
}

.pet-services-panel {
    display: none;
    animation: servicesPanelIn .65s var(--ease) both;
}

.pet-services-panel.active {
    display: block;
}

.service-panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, .55fr);
    gap: 34px;
    align-items: end;
    padding: 42px 0 20px;
    padding-top: clamp(38px, 4vw, 54px);
    padding-bottom: 22px;
}

.service-panel-head h3 {
    margin: 10px 0 0;
    font: 500 clamp(38px, 4vw, 58px)/.9 var(--serif);
    letter-spacing: -.045em;
    font-size: clamp(38px, 4vw, 58px);
    margin-top: 8px;
    line-height: .88;
}

.service-panel-head p {
    margin: 0;
    color: #6e726a;
    line-height: 1.7;
    font-size: var(--type-body) !important;
    max-width: 380px;
    justify-self: end;
    margin-bottom: 3px;
}

.service-categories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    border: 0;
    align-items: start;
}

.service-category {
    min-width: 0;
    padding: 16px 16px 9px;
    border: 1px solid rgba(16, 19, 15, .10);
    border-radius: 20px;
    background: rgba(251, 250, 246, .54);
    box-shadow: 0 10px 28px rgba(16, 19, 15, .035);
    transition: transform 380ms var(--ease), border-color 380ms var(--ease), background 380ms var(--ease), box-shadow 380ms var(--ease);
}

.service-category:hover {
    transform: translateY(-2px);
    border-color: rgba(115, 134, 96, .24);
    background: rgba(251, 250, 246, .76);
    box-shadow: 0 16px 34px rgba(16, 19, 15, .06);
}

.service-card-top {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
    min-height: 0;
}

.service-category-number {
    color: var(--sage-deep);
    font-size: 10px;
    letter-spacing: .15em;
    padding-top: 2px;
}

.service-category-title {
    min-width: 0;
}

.service-category-title h4 {
    margin: 0;
    font: 500 clamp(22px, 2vw, 31px)/1 var(--serif);
    letter-spacing: -0.035em;
    font-size: clamp(19px, 1.8vw, 28px);
    line-height: 1.08;
    font-family: var(--display);
    font-weight: 600;
}

.service-category-title span {
    display: block;
    margin-top: 5px;
    color: #858980;
    font-size: 11px;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.service-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(16, 19, 15, .08);
}

.service-option {
    position: relative;
    width: 100%;
    min-height: 46px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--ink);
    text-align: left;
    transition: background .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}

.service-option:hover {
    transform: translateX(2px);
    background: rgba(156, 175, 127, .09);
    border-color: rgba(115, 134, 96, .12);
}

.service-option:last-child {
    border-bottom: 0;
}

.service-option-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 650;
}

.service-option-price {
    white-space: nowrap;
    color: var(--sage-deep);
    font-size: 13px;
    line-height: 1.25;
    font-weight: 750;
    text-align: right;
}

.service-empty {
    padding: 18px 0 6px;
    color: #858980;
    font-size: 13px;
}

.service-empty-large {
    grid-column: 1 / -1;
    padding: 36px 22px;
    border: 1px solid var(--line);
    border-radius: 20px;
}

.service-footnote {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: #858980;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.pet-card,
.pet-card.active {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    background: #101410 !important;
    isolation: auto !important;
    transition: flex .9s var(--ease), filter .6s var(--ease) !important;
    width: auto !important;
    height: auto !important;
    color: #fff !important;
    text-align: left !important;
    outline: none !important;
}

.pet-card::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 12px 24%;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, .07));
    box-shadow: 0 24px 55px rgba(0, 0, 0, .18), inset 0 0 0 1px rgba(156, 175, 127, .04);
    pointer-events: none;
    transition: inset 900ms var(--ease), border-color 600ms var(--ease), background 600ms var(--ease);
}

.pet-card.active::before {
    inset: 12px 30%;
    border-color: rgba(156, 175, 127, .16);
}

.pet-card::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(7, 9, 8, .04) 0%, rgba(7, 9, 8, 0) 42%, rgba(7, 9, 8, .80) 100%),
    radial-gradient(circle at 50% 42%, transparent 30%, rgba(7, 9, 8, .18) 100%);
}

.service-option:last-child {
    border-bottom: 0;
}

.service-option-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
    line-height: 1.25;
}

.service-option-price {
    white-space: nowrap;
    color: #747a70;
    font-size: 12px;
    font-weight: 600;
}

.pet-card::before,
.pet-card::after {
    content: none !important;
    display: none !important;
}

.services-head-copy {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}

.services-head-copy h2 {
    margin: 0;
}

.services-head-copy > p {
    max-width: 500px;
    margin: 28px 0 0;
    color: #6d7169;
    line-height: 1.65;
    font-size: 15px;
    margin-top: 22px;
}

.services-head > .pet-stage {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100%;
    height: clamp(560px, 36vw, 690px);
    min-height: 560px;
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin: 0;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 26px 72px rgba(24, 30, 23, .12);
}

.services-head > .pet-stage .pet-card,
.services-head > .pet-stage .pet-card.active {
    height: 100%;
    width: auto;
    min-width: 0;
    flex: 1 1 0;
    border-radius: 25px;
    transition: flex .82s var(--ease),
    filter .55s var(--ease) !important;
    will-change: flex;
}

.services-head > .pet-stage .pet-card.active {
    flex: 1.28 1 0 !important;
}

.services-head > .pet-stage .pet-card video {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.services-head > .pet-stage .pet-number {
    top: 18px;
    left: 18px;
    font-size: 10px;
    padding: 6px 8px;
}

.services-head > .pet-stage .pet-info {
    left: 24px;
    right: 24px;
    bottom: 24px;
    grid-template-columns: 42px minmax(0, 1fr) 22px;
    gap: 10px;
}

.services-head > .pet-stage .pet-info small {
    font-size: 10px;
}

.services-head > .pet-stage .pet-info strong {
    font-size: clamp(42px, 4.3vw, 68px);
}

.services.section {
    padding-top: clamp(48px, 5vw, 72px);
    padding-bottom: clamp(90px, 8vw, 125px);
}

.pet-stage,
.services-head > .pet-stage {
    display: flex !important;
    flex-direction: row !important;
    gap: clamp(10px, 1.2vw, 16px) !important;
    overflow: hidden !important;
    background: transparent !important;
}

.pet-card,
.pet-card.active,
.services-head > .pet-stage .pet-card,
.services-head > .pet-stage .pet-card.active {
    position: relative !important;
    flex: 1 1 0 !important;
    width: auto !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: #101410 !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

.pet-card.active,
.services-head > .pet-stage .pet-card.active {
    flex: 1.28 1 0 !important;
}

.pet-card::before,
.pet-card::after,
.services-head > .pet-stage .pet-card::before,
.services-head > .pet-stage .pet-card::after {
    content: none !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.pet-card video,
.services-head > .pet-stage .pet-card video {
    position: absolute !important;
    inset: -1px !important;
    width: calc(100% + 2px) !important;
    height: calc(100% + 2px) !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    transform: none !important;
}

.pet-overlay,
.services-head > .pet-stage .pet-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(
            180deg,
            rgba(7, 9, 8, 0) 0%,
            rgba(7, 9, 8, .02) 38%,
            rgba(7, 9, 8, .82) 100%
    ) !important;
    border: 0 !important;
    box-shadow: none !important;
}

.pet-number,
.pet-info {
    z-index: 3 !important;
}

.services-head > .pet-stage .pet-info,
.pet-stage .pet-info {
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) 18px !important;
    align-items: center !important;
    gap: 5px !important;
}

.services-head > .pet-stage .pet-info > small,
.pet-stage .pet-info > small {
    align-self: center !important;
    justify-self: start !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.services-head > .pet-stage .pet-info > strong,
.pet-stage .pet-info > strong {
    min-width: 0 !important;
    align-self: center !important;
    white-space: nowrap !important;
    line-height: .9 !important;
    overflow: visible !important;
}

.services-head > .pet-stage .pet-card {
    flex: 1 1 0 !important;
}

.service-panel-head h3,
.modal-window h2,
.modal-window h3 {
    font-size: var(--type-subheading);
    line-height: .98;
    letter-spacing: -.045em;
    font-weight: 600;
}

.service-category-title span,
.service-category-number {
    font-size: var(--type-ui) !important;
}

.service-option,
.service-option-name,
.service-option-price {
    font-size: var(--type-small) !important;
    line-height: 1.4;
}

.service-categories,
.service-card,
.service-options,
.daycare-copy,
.gift-copy,
.gift-visual,
.contacts,
.contact-details,
.map-wrap {
    min-width: 0;
    max-width: 100%;
}

/* =========================================================
   11. ДНЕВНОЙ УХОД
   ========================================================= */
.daycare {
    background: var(--paper-2);
}

.daycare-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(330px, .78fr);
    gap: clamp(45px, 8vw, 120px);
    align-items: center;
}

.daycare-collage {
    position: relative;
    min-height: 650px;
}

.daycare-image {
    position: absolute;
    overflow: hidden;
    border-radius: 23px;
}

.daycare-image img {
    will-change: transform;
}

.daycare-image.main {
    left: 0;
    top: 0;
    width: 72%;
    height: 86%;
}

.daycare-image.small {
    right: 0;
    bottom: 0;
    width: 47%;
    height: 47%;
    border: 10px solid var(--paper-2);
}

.daycare-badge {
    position: absolute;
    right: 22%;
    top: 9%;
    z-index: 4;
    width: 116px;
    height: 116px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sage);
    color: #fff;
    box-shadow: 0 18px 48px rgba(53, 62, 46, .20);
    isolation: isolate;
}

.daycare-badge::after {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    pointer-events: none;
}

.daycare-badge-seal {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.daycare-badge-ring {
    fill: none;
    stroke: rgba(255, 255, 255, .22);
    stroke-width: .7;
}

.daycare-badge-dot {
    fill: rgba(255, 255, 255, .92);
}

.daycare-badge-paw {
    color: rgba(255, 255, 255, .96);
    overflow: visible;
}

.daycare-badge-number {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 25px;
    z-index: 2;
    margin: 0;
    text-align: center;
    font-family: var(--serif);
    font-size: 34px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -.045em;
    color: #fff;
}

.daycare-copy {
    max-width: 560px;
}

.daycare-copy h2 {
    margin: 14px 0 24px;
    font: 500 clamp(62px, 7vw, 112px)/.86 var(--serif);
    letter-spacing: -.065em;
    font-size: clamp(54px, 6vw, 100px);
}

.daycare-copy h2 em {
    font-style: italic;
    color: var(--sage-deep);
}

.daycare-copy > p {
    max-width: 510px;
    color: #646960;
    line-height: 1.8;
    margin: 0 0 30px;
    font-size: 15px;
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 35px;
}

.tag-cloud span {
    padding: 10px 13px;
    border: 1px solid rgba(16, 19, 15, .12);
    border-radius: 999px;
    color: #60665c;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .11em;
}

.daycare-price {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
}

.daycare-price > div {
    padding: 15px 16px;
    border: 1px solid rgba(16, 19, 15, .12);
    border-radius: 17px;
    background: rgba(255, 255, 255, .28);
    min-width: 145px;
}

.daycare-price strong {
    display: block;
    font: 500 27px/1 var(--serif);
    font-size: 22px !important;
}

.daycare-price span {
    display: block;
    margin-top: 6px;
    color: #777b72;
    font-size: var(--type-small) !important;
}

.daycare-price strong,
.daycare-price span {
    line-height: 1.2;
}

/* =========================================================
   12. ПОДАРОЧНЫЙ СЕРТИФИКАТ
   ========================================================= */
.gift {
    display: grid;
    grid-template-columns: 1fr .95fr;
    min-height: 720px;
    background: #101410;
    color: #fff;
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .16);
    margin-bottom: 0;
}

.gift-copy {
    padding: clamp(40px, 6vw, 92px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: var(--frame-content-pad);
    padding-right: var(--frame-content-pad);
}

.gift-copy h2 {
    margin: 18px 0 24px;
    font: 500 clamp(64px, 7vw, 116px)/.85 var(--serif);
    letter-spacing: -.065em;
    font-size: clamp(56px, 6.2vw, 104px);
}

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

.gift-copy p {
    max-width: 500px;
    color: rgba(255, 255, 255, .55);
    line-height: 1.9;
    margin: 0 0 34px;
    font-size: 14px;
}

.gift-visual {
    position: relative;
    min-height: 560px;
    margin: clamp(28px, 5vw, 72px);
    border-radius: 28px;
    overflow: hidden;
    background: radial-gradient(circle at 70% 24%, rgba(156, 175, 127, .24), transparent 28%), linear-gradient(135deg, #222b20, #101510 65%);
    border: 1px solid rgba(255, 255, 255, .13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 34px 90px rgba(0, 0, 0, .28);
    transform-style: preserve-3d;
}

.gift-visual:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255, 255, 255, .11), transparent 25%, transparent 65%, rgba(255, 255, 255, .05));
}

.gift-glow {
    position: absolute;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    right: -100px;
    top: -120px;
    background: rgba(156, 175, 127, .16);
    filter: blur(8px);
}

.gift-top,
.gift-bottom {
    position: absolute;
    left: 25px;
    right: 25px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .46);
}

.gift-top {
    top: 23px;
}

.gift-bottom {
    bottom: 24px;
    align-items: end;
}

.gift-bottom strong {
    font: 500 30px/.95 var(--serif);
    color: #fff;
    letter-spacing: -.03em;
}

.gift-bottom small {
    padding-bottom: 3px;
}

.gift-visual img,
.gift-certificate-image {
    position: absolute;
    left: 50%;
    top: 48%;
    width: min(85%, 635px);
    height: auto;
    border-radius: 20px;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 24px 55px rgba(0, 0, 0, .22));
    will-change: opacity, transform;
}

.gift-certificate-switcher {
    position: absolute;
    left: 50%;
    bottom: 58px;
    z-index: 8;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(8, 11, 9, .48);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transform: translateX(-50%);
}

.gift-certificate-option {
    min-width: 76px;
    height: 32px;
    padding: 0 13px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, .55);
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .08em;
    white-space: nowrap;
    transition: color .35s var(--ease),
    background .35s var(--ease),
    border-color .35s var(--ease),
    transform .35s var(--ease);
}

.gift-certificate-option:hover {
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .07);
}

.gift-certificate-option.active {
    color: #10130f;
    background: var(--white);
    border-color: rgba(255, 255, 255, .72);
    box-shadow: 0 5px 16px rgba(0, 0, 0, .14);
}

.gift-certificate-option:focus-visible {
    outline: 2px solid var(--sage-soft);
    outline-offset: 3px;
}

.gift-certificate-image {
    transition: opacity .25s ease,
    transform .45s var(--ease),
    filter .35s ease;
}

.gift-certificate-image.is-switching {
    opacity: .25;
    transform: translate(-50%, -50%) scale(.985);
}

/* =========================================================
   13. КОНТАКТЫ
   ========================================================= */
.contacts {
    background: var(--paper);
}

.contacts-head {
    display: grid;
    grid-template-columns: 1fr .56fr;
    gap: 70px;
    align-items: end;
    margin-bottom: 30px;
}

.contacts-head p {
    margin: 0;
    color: #686d65;
    line-height: 1.9;
    font-size: 14px;
}

.contacts-grid {
    display: grid;
    grid-template-columns: minmax(280px, .64fr) minmax(0, 1.36fr);
    gap: 14px;
}

.contact-details {
    border-radius: 24px;
    padding: 28px;
    background: #e8e2d7;
    border: 1px solid rgba(16, 19, 15, .08);
}

.contact-item {
    padding: 18px 0;
    border-bottom: 1px solid rgba(16, 19, 15, .11);
}

.contact-item > span {
    display: block;
    margin-bottom: 8px;
    color: #7d8279;
    font-size: var(--type-ui) !important;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
}

.contact-item strong,
.contact-item a {
    font: 500 21px/1.35 var(--serif);
    font-size: 20px !important;
    line-height: 1.35;
}

.contact-item a {
    display: block;
    margin-top: 8px;
    font-size: clamp(13px, 1.05vw, 15px);
    font-family: var(--sans);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 600;
    line-height: 1.35;
}

.contact-details .button {
    margin-top: 20px;
    width: 100%;
}

.map-wrap {
    position: relative;
    min-height: 560px;
    border-radius: 26px;
    overflow: hidden;
    background: #cfc9bd;
    border: 1px solid rgba(16, 19, 15, .08);
}

.salon-map-balloon {
    position: relative;
    width: 286px;
    box-sizing: border-box;
    padding: 18px 18px 17px;
    border-radius: 20px;
    background: #10130f;
    color: var(--white);
    box-shadow: 0 22px 55px rgba(16, 19, 15, .28);
    overflow: visible;
    font-family: var(--sans);
    pointer-events: auto;
}

.salon-map-balloon__logo {
    width: 126px;
    margin: 1px 42px 16px 0;
}

.salon-map-balloon__logo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.salon-map-balloon__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(251, 250, 246, .14);
    border-radius: 50%;
    background: rgba(251, 250, 246, .055);
    color: rgba(251, 250, 246, .76);
    cursor: pointer;
    z-index: 2;
    transition: background .25s ease,
    border-color .25s ease,
    color .25s ease,
    transform .3s ease;
}

.salon-map-balloon__close:hover {
    background: rgba(251, 250, 246, .11);
    border-color: rgba(251, 250, 246, .24);
    color: #fff;
    transform: rotate(90deg);
}

.salon-map-balloon__close svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
}

.salon-map-balloon__title {
    margin: 0 0 5px;
    font: 500 24px/1.06 var(--serif);
    letter-spacing: -.035em;
}

.salon-map-balloon__meta {
    margin-bottom: 4px;
    color: rgba(251, 250, 246, .42);
    font-size: 9px;
    line-height: 1.2;
    letter-spacing: .16em;
}

.salon-map-balloon__address {
    color: rgba(251, 250, 246, .68);
    font-size: 13px;
    line-height: 1.45;
}

.salon-map-balloon__route {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(251, 250, 246, .18);
    color: rgba(251, 250, 246, .8);
    font-size: 10px;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: color .25s ease,
    border-color .25s ease;
}

.salon-map-balloon__route:hover {
    color: #fff;
    border-color: rgba(251, 250, 246, .5);
}

.salon-map-balloon__route span {
    font-size: 14px;
    line-height: 1;
}

.line-link,
.text-link,
.map-link {
    gap: 10px;
}

.contacts.section {
    padding-top: clamp(58px, 6vw, 96px);
}

.contact-item strong,
.contact-item a,
.contact-item > span {
    font-family: var(--sans);
}

.contact-item strong {
    display: block;
    font-size: clamp(18px, 1.5vw, 22px);
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0;
}

.legal-contacts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin-top: 28px;
    border-top: 1px solid rgba(16, 19, 15, .08);
}

.legal-contact {
    padding: 18px 24px 18px 0;
}

.legal-contact:nth-child(even) {
    padding-left: 24px;
    border-left: 1px solid rgba(16, 19, 15, .08);
}

.legal-contact-label {
    display: block;
    margin-bottom: 7px;
    color: #8a9088;
    font: 700 9px/1.2 var(--sans);
    letter-spacing: .12em;
    text-transform: uppercase;
}

.legal-contact-value {
    display: block;
    color: var(--ink);
    font: 500 14px/1.5 var(--sans);
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.legal-contact-value {
    transition: color .2s ease;
}

a.legal-contact-value:hover {
    color: var(--sage-deep);
}

/* =========================================================
   14. ФУТЕР
   ========================================================= */
.footer {
    padding: 46px var(--gutter) 26px;
    background: #0c0f0d;
    color: #fff;
    padding-top: 52px;
}

.footer-main {
    display: grid;
    grid-template-columns: 1fr .7fr auto;
    gap: 40px;
    align-items: end;
    padding-bottom: 60px;
}

.footer-brand {
    width: 180px;
}

.footer-brand img {
    height: auto;
}

.footer-slogan {
    font: 500 24px/1.1 var(--serif);
    color: rgba(255, 255, 255, .8);
    font-size: 24px !important;
    line-height: 1.15;
}

.footer-slogan em {
    font-style: italic;
    color: var(--sage);
}

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line-light);
    color: rgba(255, 255, 255, .34);
    font-size: var(--type-ui) !important;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.footer-bottom div {
    display: flex;
    gap: 18px;
}

/* =========================================================
   15. ФОРМЫ И МОДАЛЬНЫЕ ОКНА
   ========================================================= */
body.modal-open,
body.menu-open {
    overflow: hidden;
}

body:not(.modal-open):not(.menu-open) {
    overflow-y: auto;
}
@supports (-webkit-touch-callout: none) {
    html {
        overflow-x: hidden;
        overflow-y: auto;
    }

    body {
        overflow-x: hidden;
        overflow-y: auto;
    }
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: grid;
    place-items: center;

    visibility: hidden;
    pointer-events: none;
    opacity: 1;
}

.modal.is-open {
    visibility: visible;
    pointer-events: auto;
}

.modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(5, 7, 6, .72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    opacity: 1;
    transform: translateZ(0);
    pointer-events: auto;
}

.modal-window {
    position: relative;
    z-index: 1;
    width: min(590px, calc(100vw - 34px));
    padding: clamp(32px, 5vw, 58px);

    border-radius: 26px;
    background: #ece7dc;
    color: #121610;
    box-shadow: 0 30px 100px rgba(0, 0, 0, .28);

    transform: translate3d(0, 22px, 0) scale(.98);
    opacity: 0;

    transition:
            transform .55s var(--ease),
            opacity .35s ease;

    font-size: var(--type-body);
    will-change: transform, opacity;
}

.modal.is-open .modal-window {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: #ded7ca;
    color: #171b16;
    font-size: 22px;
}

.modal-window h2 {
    margin: 17px 0 18px;
    font: 500 clamp(52px, 7vw, 84px)/.86 var(--serif);
    letter-spacing: -.06em;
    font-size: clamp(46px, 5.8vw, 78px);
}

.modal-window h2 em {
    font-style: italic;
    color: var(--sage-deep);
}

.modal-window > p {
    max-width: 460px;
    color: #6a6f66;
    line-height: 1.8;
    margin: 0 0 26px;
}

.modal-window input,
.modal-window select,
.modal-window textarea {
    font-size: 16px !important;
}

/* =========================================================
   16. COOKIE
   ========================================================= */
.cookie-consent {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 2;
    display: none;
}

.cookie-consent.is-visible {
    display: block;
}

.cookie-consent-card {
    width: min(720px, 100%);
    margin-left: auto;
    padding: 22px 24px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 20px;
    background: rgba(12, 15, 13, .94);
    color: #fff;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
    backdrop-filter: blur(18px);
}

.cookie-consent-card p {
    margin: 0 0 16px;
    color: rgba(255, 255, 255, .62);
    font: 400 12px/1.7 var(--sans);
}

.cookie-consent-card a {
    color: var(--sage-soft);
    text-decoration: underline;
}

.cookie-consent-actions {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.cookie-consent-actions button {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 11px;
    font: 600 9px/1 var(--sans);
    letter-spacing: .1em;
    text-transform: uppercase;
}

.cookie-consent-accept {
    background: var(--sage);
    color: #fff;
}

.cookie-consent-reject {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

/* =========================================================
   17. ПРАВОВЫЕ СТРАНИЦЫ
   ========================================================= */
/*.legal-page {*/
/*    min-height: 100svh;*/
/*    background: radial-gradient(*/
/*            circle at 15% 0%,*/
/*            rgba(156, 175, 127, 0.10),*/
/*            transparent 30%*/
/*    ),*/
/*    linear-gradient(*/
/*            180deg,*/
/*            var(--paper) 0%,*/
/*            #ede9df 100%*/
/*    );*/
/*    color: var(--ink);*/
/*}*/

/*.legal-shell {*/
/*    width: min(1180px, calc(100% - 80px));*/
/*    margin: 0 auto;*/
/*    padding: 150px 0 110px;*/
/*}*/

/*.legal-kicker {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    gap: 10px;*/
/*    margin-bottom: 24px;*/
/*    color: var(--sage-deep);*/
/*    font: 700 10px/1 var(--sans);*/
/*    letter-spacing: .14em;*/
/*    text-transform: uppercase;*/
/*}*/

/*.legal-kicker::before {*/
/*    content: "";*/
/*    width: 28px;*/
/*    height: 1px;*/
/*    background: var(--sage);*/
/*}*/

/*.legal-title {*/
/*    max-width: 920px;*/
/*    margin: 0;*/
/*    color: var(--ink);*/
/*    font: 600 clamp(52px, 6.5vw, 88px)/.92 var(--serif);*/
/*    letter-spacing: -.055em;*/
/*    text-wrap: balance;*/
/*}*/

/*.legal-title em {*/
/*    color: var(--sage-deep);*/
/*    font-style: italic;*/
/*}*/

/*.legal-meta {*/
/*    padding: 8px 12px;*/
/*    border: 1px solid rgba(16, 19, 15, .09);*/
/*    border-radius: 999px;*/
/*    background: rgba(255, 255, 255, .28);*/
/*    color: #697067;*/
/*    font: 700 9px/1.2 var(--sans);*/
/*    letter-spacing: .09em;*/
/*    text-transform: uppercase;*/
/*}*/

/*.legal-date {*/
/*    color: #8b9089;*/
/*    font: 400 12px/1.4 var(--sans);*/
/*}*/

/*.legal-content {*/
/*    width: min(100%, 1000px);*/
/*    margin: 0 auto;*/
/*}*/

/*.legal-section {*/
/*    position: relative;*/
/*    display: grid;*/
/*    grid-template-columns: 90px minmax(0, 1fr);*/
/*    column-gap: 42px;*/
/*    padding: 42px 0;*/
/*    border-top: 1px solid rgba(16, 19, 15, .10);*/
/*}*/

/*.legal-section:last-child {*/
/*    border-bottom: 1px solid rgba(16, 19, 15, .10);*/
/*}*/

/*.legal-section-number {*/
/*    padding-top: 8px;*/
/*    color: var(--sage-deep);*/
/*    font: 700 11px/1 var(--sans);*/
/*    letter-spacing: .14em;*/
/*}*/

/*.legal-section-body {*/
/*    min-width: 0;*/
/*    max-width: 760px;*/
/*}*/

/*.legal-section h2 {*/
/*    margin: 0 0 20px;*/
/*    color: var(--ink);*/
/*    font: 600 clamp(27px, 3vw, 38px)/1.05 var(--serif);*/
/*    letter-spacing: -.04em;*/
/*}*/

/*.legal-section p {*/
/*    max-width: 730px;*/
/*    margin: 0 0 15px;*/
/*    color: #4e554e;*/
/*    font: 400 15px/1.78 var(--sans);*/
/*    letter-spacing: 0;*/
/*}*/

/*.legal-section p:last-child {*/
/*    margin-bottom: 0;*/
/*}*/

/*.legal-section strong {*/
/*    color: var(--ink);*/
/*    font-weight: 700;*/
/*}*/

/*.legal-note {*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    gap: 30px;*/
/*    width: min(100%, 1000px);*/
/*    margin: 30px auto 0;*/
/*    color: #8a9088;*/
/*    font: 400 11px/1.5 var(--sans);*/
/*}*/

/* =========================================================
   18. ПРОЧИЕ КОМПОНЕНТЫ
   ========================================================= */
button,
input,
select {
    font: inherit;
}

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

.noise {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: .035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

.nav {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(15px, 2.2vw, 36px);
    width: max-content;
    max-width: calc(100% - 460px);
    z-index: 2;
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, .54);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 26px;
}

.eyebrow i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sage);
    box-shadow: 0 0 0 7px rgba(156, 175, 127, .11);
    animation: pulse 2s infinite;
}

.button {
    min-height: 54px;
    padding: 0 18px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    font-size: 12px;
    letter-spacing: .11em;
    text-transform: uppercase;
    transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), box-shadow .4s;
}

.button-sage {
    background: var(--sage);
    color: #fff;
    box-shadow: 0 18px 38px rgba(39, 48, 34, .16);
}

.button-sage:hover {
    background: #aabd8e;
    box-shadow: 0 22px 52px rgba(39, 48, 34, .22);
}

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

.button-light {
    background: #f1ede5;
    color: #131611;
}

.text-link {
    color: rgba(255, 255, 255, .64);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.text-link span {
    color: var(--sage);
    margin-left: 9px;
}

.section {
    padding: var(--section) var(--gutter);
    width: 100%;
    max-width: 100%;
}

.section-index {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #78836c;
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    margin-bottom: 46px;
}

.section-index span {
    color: var(--ink);
    font-size: 10px;
}

.section-index i {
    width: min(160px, 15vw);
    height: 1px;
    background: var(--line);
}

.section-index.dark {
    color: var(--sage);
}

.section-index.dark span {
    color: #fff;
}

.section-index.dark i {
    background: var(--line-light);
}

.tiny-label {
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #738163;
}

.line-link {
    display: inline-flex;
    gap: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid #1b1f19;
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.line-link span {
    color: var(--sage-deep);
}

.frame {
    margin: 0 var(--gutter);
    border-radius: var(--radius);
    overflow: hidden;
    width: auto;
    max-width: none;
    margin-left: var(--gutter);
    margin-right: var(--gutter);
    min-width: 0;
}

.media-stamp {
    position: absolute;
    left: 28px;
    bottom: 25px;
    z-index: 2;
    color: rgba(255, 255, 255, .53);
    font-size: 8px;
    letter-spacing: .2em;
}

.salon-map {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.salon-map .ymaps-2-1-79-map,
.salon-map > ymaps {
    width: 100% !important;
    height: 100% !important;
}

.salon-map .ymaps-2-1-79-ground-pane {
    filter: saturate(.48) contrast(1.06) brightness(1.02);
}

.salon-map .ymaps-2-1-79-balloon {
    overflow: visible !important;
    border-radius: 20px !important;
    box-shadow: none !important;
}

.salon-map .ymaps-2-1-79-balloon__layout {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.salon-map .ymaps-2-1-79-balloon__content {
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.salon-map .ymaps-2-1-79-balloon__close {
    display: none !important;
}

.salon-map .ymaps-2-1-79-balloon__tail {
    background: #10130f !important;
    box-shadow: none !important;
}

.salon-map .ymaps-2-1-79-balloon__tail::after {
    background-color: #10130f !important;
}

.cursor-ring.active {
    transform: translate(-50%, -50%) scale(1.7);
    background: rgba(156, 175, 127, .04);
}

.scroll-progress {
    position: fixed;
    z-index: 10002;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--sage);
    box-shadow: 0 0 18px rgba(156, 175, 127, .6);
}

.reveal {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity .9s var(--ease), transform 1s var(--ease);
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

#certificate-form {
    display: grid;
    gap: 12px;
}

#certificate-form label {
    display: grid;
    gap: 6px;
    color: #6b7068;
    font-size: 8px;
    letter-spacing: .15em;
    text-transform: uppercase;
}

#certificate-form input,
#certificate-form select {
    height: 48px;
    border: 1px solid rgba(16, 19, 15, .12);
    border-radius: 12px;
    padding: 0 13px;
    background: #f7f3eb;
    color: #171b16;
    outline: none;
}

#certificate-form .button {
    margin-top: 8px;
}

.border-right {
    border-right: 1px solid rgba(255, 255, 255, .09);
}

.section-index b {
    font-weight: 600;
}

html,
body {
    max-width: 100%;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

img,
video,
iframe {
    max-width: 100%;
}

.text-link,
.line-link {
    font-size: 12px;
}

body,
button,
input,
select,
textarea {
    font-size: var(--type-body);
}

main {
    min-width: 0;
    max-width: 100%;
}

.section,
.frame {
    min-width: 0;
}

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

/* =========================================================
   KEYFRAMES
   ========================================================= */
@keyframes loader {
    0% {
        transform: translateX(-120%);
    }
    50% {
        transform: translateX(260%);
    }
    100% {
        transform: translateX(420%);
    }
}

@keyframes pulse {
    50% {
        box-shadow: 0 0 0 14px rgba(156, 175, 127, 0);
    }
}

@keyframes heroIn {
    from {
        transform: scale(1.14);
    }
    to {
        transform: scale(1.08);
    }
}

@keyframes servicesPanelIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroPetFloat {
    0%,
    100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -12px;
    }
}

/* =========================================================
   RESPONSIVE
   ---------------------------------------------------------
   Порядок @media сохранён, потому что брейкпоинты пересекаются.
   Внутри каждого @media дублирующие селекторы объединены.
   ========================================================= */
@media (hover: none), (pointer: coarse) {
    .ui-icon::before,
    .ui-icon::after {
        display: none;
    }

    .ui-icon,
    .ui-icon svg {
        transition: none;
        transform: none !important;
    }

    .button:active .ui-icon,
    .header-book:active .ui-icon,
    .header-phone:active .ui-icon,
    .mobile-phone:active .ui-icon,
    .mobile-book:active .ui-icon,
    .line-link:active .ui-icon,
    .text-link:active .ui-icon,
    .service-option:active .ui-icon,
    .pet-card:active .ui-icon {
        transform: scale(.92) !important;
    }

}

@media (prefers-reduced-motion: reduce) {
    .ui-icon,
    .ui-icon svg,
    .ui-icon::before,
    .ui-icon::after {
        transition: none !important;
    }

}

@media (max-width: 820px) {
    .mobile-nav {
        display: flex;
        visibility: visible;
        pointer-events: auto;
    }

    .mobile-nav .menu-trigger {
        display: flex;
    }

    .mobile-nav.open {
        transform: none;
    }

}

@media (max-width: 600px) {
    .gift-visual {
        min-height: 450px;
        margin: 0 14px 14px;
    }

    .gift-certificate-image {
        top: 43%;
        width: min(88%, 635px);
    }

    .gift-certificate-switcher {
        bottom: 53px;
        width: max-content;
        max-width: calc(100% - 24px);
    }

    .gift-certificate-option {
        min-width: 72px;
        height: 32px;
        padding: 0 10px;
        font-size: 9px;
        letter-spacing: .06em;
    }

    .gift-bottom {
        bottom: 17px;
        left: 18px;
        right: 18px;
    }

}

@media (max-width: 420px) {
    .gift-visual {
        min-height: 430px;
        border-radius: 24px;
    }

    .gift-top {
        top: 18px;
        left: 18px;
        right: 18px;
        gap: 12px;
        font-size: 10px;
        letter-spacing: .14em;
    }

    .gift-certificate-image {
        top: 42%;
        width: 88%;
        max-width: none;
        border-radius: 16px;
    }

    .gift-certificate-switcher {
        bottom: 49px;
        padding: 3px;
        gap: 2px;
    }

    .gift-certificate-option {
        min-width: 69px;
        height: 31px;
        padding: 0 8px;
        font-size: 8.5px;
    }

    .gift-bottom {
        bottom: 14px;
        font-size: 9px;
        letter-spacing: .14em;
    }

}

@media (max-width: 560px) {
    .salon-map-balloon {
        width: min(270px, calc(100vw - 48px));
        padding: 16px;
        border-radius: 18px;
    }

    .salon-map-balloon__logo {
        width: 112px;
        margin-bottom: 14px;
    }

    .salon-map-balloon__title {
        font-size: 21px;
    }

    .salon-map-balloon__route {
        font-size: 9px;
    }

}

@media (max-width: 1100px) {
    .header {
        grid-template-columns: 160px minmax(0, 1fr) auto;
    }

    .nav {
        gap: 14px;
    }

    .nav a {
        font-size: 8px;
    }

    .intro-grid,
    .daycare-grid,
    .contacts-grid,
    .philosophy,
    .gift {
        grid-template-columns: 1fr;
    }

    .philosophy-content {
        min-height: 680px;
    }

    .gift-visual {
        min-height: 560px;
    }

    .contacts-grid {
        gap: 14px;
    }

}

@media (max-width: 820px) {
    :root {
        --radius: 20px;
        --section: 86px;
    }

    .header {
        top: 10px;
        height: 60px;
        grid-template-columns: minmax(0, 1fr) auto auto;
        left: 14px;
        right: 14px;
        padding-left: 14px;
    }

    .brand {
        width: 130px;
    }

    .nav {
        display: none;
    }

    .header-book {
        display: none;
    }

    .menu-trigger {
        display: flex;
    }

    .hero {
        min-height: 680px;
    }

    .hero-meta {
        top: 90px;
        font-size: 7px;
    }

    .hero-meta span:last-child {
        display: none;
    }

    .hero-copy {
        left: var(--gutter);
        width: calc(100% - 2 * var(--gutter));
        top: 49%;
    }

    .hero h1 {
        font-size: clamp(60px, 17vw, 98px);
    }

    .hero-copy > p {
        font-size: 13px;
        line-height: 1.75;
        margin-top: 24px;
    }

    .hero-corner-bottom {
        display: none;
    }

    .section-index {
        margin-bottom: 45px;
    }

    .intro-grid,
    .services-head,
    .service-panel-head,
    .contacts-head {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .intro-copy {
        padding-top: 0;
    }

    .intro-marquee {
        margin-top: 80px;
    }

    .frame {
        margin: 0 14px;
    }

    .philosophy {
        min-height: 0;
    }

    .philosophy-image {
        min-height: 450px;
    }

    .philosophy-content {
        min-height: 650px;
        padding: 38px 26px;
    }

    .services-head {
        margin-bottom: 38px;
    }

    .pet-stage {
        height: 62vw;
        min-height: 390px;
    }

    .pet-info strong {
        font-size: clamp(38px, 10vw, 58px);
    }

    .service-panel-head {
        padding-top: 55px;
    }

    .service-panel-head h3 {
        font-size: 50px;
    }

    .daycare-collage {
        min-height: 580px;
    }

    .daycare-image.main {
        height: 78%;
    }

    .daycare-image.small {
        height: 43%;
        width: 49%;
    }

    .daycare-badge {
        right: 18%;
        top: 8%;
        width: 104px;
        height: 104px;
    }

    .daycare-badge::after {
        inset: 7px;
    }

    .daycare-badge-number {
        bottom: 22px;
        font-size: 31px;
    }

    .gift-copy {
        padding: 34px 26px 42px;
    }

    .gift-visual {
        margin: 0 14px 14px;
        min-height: 470px;
    }

    .contacts-grid {
        grid-template-columns: 1fr;
    }

    .map-wrap {
        min-height: 500px;
    }

    .footer-main {
        grid-template-columns: 1fr;
        align-items: start;
        padding-bottom: 45px;
    }

    .footer-slogan {
        font-size: 22px;
    }

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

}

@media (max-width: 520px) {
    .hero-copy > p {
        max-width: 390px;
    }

    .hero-actions {
        gap: 15px;
    }

    .hero-actions .button {
        width: 100%;
    }

    .text-link {
        display: none;
    }

    .intro-title h2,
    .services h2,
    .contacts h2 {
        font-size: clamp(52px, 15vw, 74px);
    }

    .intro-word {
        right: -9vw;
        top: 30%;
    }

    .pet-stage {
        flex-direction: column;
        height: 640px;
    }

    .pet-card,
    .pet-card.active {
        flex: none;
        height: 50%;
        transition: height .8s var(--ease);
    }

    .pet-card.active {
        height: 62%;
    }

    .pet-info {
        bottom: 22px;
    }

    .daycare-collage {
        min-height: 500px;
    }

    .daycare-image.main {
        width: 78%;
        height: 82%;
    }

    .daycare-image.small {
        width: 52%;
        height: 43%;
        border-width: 7px;
    }

    .daycare-badge {
        right: 7%;
        top: 4%;
        width: 94px;
        height: 94px;
    }

    .daycare-badge::after {
        inset: 7px;
    }

    .daycare-badge-number {
        bottom: 20px;
        font-size: 29px;
    }

    .tag-cloud {
        gap: 6px;
    }

    .tag-cloud span {
        font-size: 8px;
    }

    .gift-visual {
        min-height: 420px;
    }

    .gift-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .contact-item strong,
    .contact-item a {
        font-size: 18px;
    }

}

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

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

    .reveal {
        opacity: 1;
        transform: none;
    }

}

@media (prefers-reduced-motion: reduce) {
    .hero-pet-card {
        animation: none !important;
        translate: 0 0 !important;
        transition: none !important;
    }

}

@media (max-width: 1100px) {
    .hero.hero-pet {
        grid-template-columns: minmax(0, 50%) minmax(0, 50%);
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }

    .hero-pet-card {
        width: 145px;
        height: 188px;
        translate: 0 0;
    }

    .hero-pet-card-2 {
        width: 125px;
        height: 165px;
    }

    .hero-pet-card-3 {
        width: 142px;
        height: 187px;
    }

    .hero-pet-card-4 {
        width: 132px;
        height: 175px;
    }

    .hero-pet-card-5 {
        width: 155px;
        height: 198px;
    }

    .hero-pet-copy h1 {
        font-size: clamp(60px, 8vw, 108px);
    }

}

@media (max-width: 820px) {
    .hero.hero-pet {
        display: block;
        min-height: 920px;
        height: auto;
        padding-top: 125px;
        padding-bottom: 30px;
    }

    .hero-pet-copy {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        transform: none;
        z-index: 6;
        width: 100%;
        max-width: none;
        padding-right: 4vw;
        grid-column: auto;
        grid-row: auto;
    }

    .hero-pet-copy h1 {
        font-size: clamp(58px, 14.5vw, 92px);
    }

    .hero-pet-copy > p {
        max-width: 580px;
        font-size: 14px;
    }

    .hero-pet-cloud {
        height: 455px;
        margin-top: 15px;
        margin-left: 4vw;
    }

    .hero-pet-note {
        right: 5%;
        top: 48%;
    }

    .hero-pet-card {
        width: 132px;
        height: 172px;
        translate: 0 0;
    }

    .hero-pet-card-2 {
        width: 118px;
        height: 154px;
    }

    .hero-pet-card-3 {
        width: 130px;
        height: 170px;
    }

    .hero-pet-card-4 {
        width: 120px;
        height: 158px;
    }

    .hero-pet-card-5 {
        width: 142px;
        height: 184px;
    }

    .hero-facts {
        margin-top: 35px;
    }

    .frame {
        margin-left: 14px;
        margin-right: 14px;
    }

}

@media (max-width: 520px) {
    .hero.hero-pet {
        min-height: 900px;
        padding-top: 112px;
    }

    .hero-meta {
        font-size: 7px;
    }

    .hero-meta span:last-child {
        display: none;
    }

    .hero-pet-copy h1 {
        font-size: clamp(54px, 16vw, 78px);
    }

    .hero-pet-copy > p {
        font-size: 13px;
        line-height: 1.7;
    }

    .hero-facts {
        gap: 6px;
    }

    .hero-fact {
        min-width: 0;
        flex: 1;
        padding: 12px 10px;
    }

    .hero-fact strong {
        font-size: 23px;
    }

    .hero-fact span {
        font-size: 7px;
    }

    .hero-pet-cloud {
        height: 390px;
        margin-top: 5px;
        margin-left: -5px;
        margin-right: -8px;
    }

    .hero-pet-card {
        width: 112px;
        height: 148px;
        border-radius: 18px;
        translate: 0 0;
    }

    .hero-pet-card-2 {
        width: 98px;
        height: 130px;
    }

    .hero-pet-card-3 {
        width: 108px;
        height: 142px;
    }

    .hero-pet-card-4 {
        width: 102px;
        height: 134px;
    }

    .hero-pet-card-5 {
        width: 118px;
        height: 154px;
    }

    .hero-pet-note {
        display: none;
    }

    .pet-stage {
        min-height: 390px;
        height: 610px;
        border-radius: 24px;
    }

    .service-options {
        padding-left: 0;
    }


    .service-option {
        width: 100%;
        justify-content: space-between;
    }

    .gift {
        margin-left: 14px;
        margin-right: 14px;
    }

    .gift-copy {
        padding: 34px 25px 42px;
    }

    .gift-visual {
        margin: 0 14px 14px;
        min-height: 430px;
    }

}

@media (max-width: 820px) {
    .mobile-nav {
        display: flex !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .mobile-nav:not(.open) {
        transform: translateY(-102%);
    }

    .mobile-nav.open {
        transform: translateY(0);
    }

}

@media (max-width: 1100px) {
    .service-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .service-panel-head {
        grid-template-columns: 1fr .7fr;
        gap: 34px;
    }

    .pet-stage {
        height: clamp(250px, 31vw, 330px);
        min-height: 250px;
    }

}

@media (max-width: 760px) {
    .pet-stage {
        height: 300px;
        min-height: 300px;
        border-radius: 22px;
    }

    .pet-card,
    .pet-card.active {
        flex: 1;
    }

    .pet-card.active {
        flex: 1.22;
    }

    .pet-info strong {
        font-size: clamp(31px, 7vw, 42px);
    }

    .service-panel-head {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 42px 0 22px;
    }

    .service-panel-head h3 {
        font-size: clamp(38px, 8vw, 52px);
    }

    .service-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .service-category {
        padding: 18px;
        border-radius: 17px;
    }

    .service-card-top {
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 9px;
        min-height: 0;
    }


}

@media (max-width: 560px) {
    .pet-stage {
        flex-direction: column;
        height: 390px;
        min-height: 390px;
    }

    .pet-card,
    .pet-card.active {
        flex: none;
        height: 50%;
        transition: height .8s var(--ease);
    }

    .pet-card.active {
        height: 58%;
    }

    .pet-info {
        left: 17px;
        right: 17px;
        bottom: 16px;
    }

    .pet-info strong {
        font-size: 34px;
    }

    .service-categories {
        grid-template-columns: 1fr;
    }

    .service-category-title h4 {
        font-size: 23px;
    }

}

@media (min-width: 1281px) {
    .hero.hero-pet {
        min-height: 760px;
        padding-top: 132px;
    }

    .services.section,
    .intro.section,
    .daycare.section,
    .contacts.section {
        padding-left: clamp(40px, 4.2vw, 76px);
        padding-right: clamp(40px, 4.2vw, 76px);
    }

    .service-categories {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

}

@media (min-width: 921px) and (max-width: 1280px) {
    :root {
        --gutter: clamp(26px, 3vw, 44px);
        --section: clamp(78px, 9vw, 120px);
    }

    .header {
        left: var(--gutter);
        right: var(--gutter);
        grid-template-columns: 145px minmax(0, 1fr) auto;
        padding-left: 14px;
    }

    .brand {
        width: 140px;
    }

    .nav {
        gap: clamp(10px, 1.5vw, 22px);
    }

    .nav a {
        font-size: 8px;
        letter-spacing: .08em;
    }

    .hero.hero-pet {
        min-height: 720px;
        padding-top: 122px;
        padding-bottom: 38px;
        grid-template-columns: minmax(0, 49%) minmax(0, 51%);
    }

    .hero-pet-copy h1 {
        font-size: clamp(58px, 7.2vw, 102px);
    }

    .hero-pet-copy > p {
        font-size: 14px;
        max-width: 500px;
    }

    .hero-pet-cloud {
        transform: scale(.94);
        transform-origin: center center;
    }

    .intro-grid {
        gap: 50px;
    }

    .philosophy-content {
        min-height: 0;
    }

    .services-head {
        grid-template-columns: minmax(0, 1.1fr) minmax(260px, .7fr);
    }

    .pet-stage {
        height: clamp(270px, 30vw, 390px);
        min-height: 270px;
    }

    .service-panel-head {
        grid-template-columns: minmax(0, 1.1fr) minmax(240px, .7fr);
        padding: 50px 0 24px;
    }

    .service-panel-head h3 {
        font-size: clamp(42px, 5vw, 66px);
    }

    .service-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .service-card {
        min-width: 0;
    }

    .daycare-grid {
        gap: 58px;
    }

    .daycare-collage {
        min-height: 560px;
    }

    .gift {
        min-height: 620px;
    }

    .gift-copy {
        padding: 56px;
    }

    .gift-copy h2 {
        font-size: clamp(54px, 6vw, 86px);
    }

    .gift-visual {
        min-height: 500px;
    }

    .contacts-grid {
        grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr);
    }

    .map-wrap {
        min-height: 500px;
    }

}

@media (max-width: 920px) {
    :root {
        --gutter: 22px;
        --section: 76px;
        --radius: 20px;
    }

    body {
        font-size: 14px;
    }

    .header {
        top: 10px;
        left: 14px;
        right: 14px;
        height: 60px;
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: 7px;
        padding: 0 10px 0 14px;
        border-radius: 16px;
    }

    .brand {
        width: 128px;
    }

    .nav {
        display: none !important;
    }

    .header-book {
        display: none !important;
    }

    .header .menu-trigger {
        display: flex !important;
    }

    .header-phone {
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 12px;
    }

    .header-phone-number {
        display: none;
    }

    .header-phone .ui-icon {
        --icon-size: 18px;
    }

    .mobile-nav {
        position: fixed !important;
        inset: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start;
        z-index: 9999 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(0, -105%, 0) !important;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 18px var(--gutter) 32px !important;
    }

    .mobile-nav.open {
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translate3d(0, 0, 0) !important;
    }

    .mobile-nav-top {
        margin-bottom: 34px;
    }

    .mobile-nav > a:not(.mobile-phone) {
        grid-template-columns: 34px minmax(0, 1fr);
        padding: 14px 0;
        font-size: clamp(26px, 6.8vw, 42px);
    }

    .mobile-phone {
        margin-top: 18px;
        min-height: 52px;
    }

    .mobile-book {
        min-height: 52px;
        margin-top: 10px;
    }

    .hero.hero-pet {
        display: flex;
        flex-direction: column;
        min-height: auto;
        height: auto;
        padding: 112px var(--gutter) 34px;
    }

    .hero-pet-copy {
        width: 100%;
        max-width: 720px;
    }

    .hero-pet-copy h1 {
        font-size: clamp(54px, 11vw, 84px);
    }

    .hero-pet-copy > p {
        max-width: 620px;
        font-size: 14px;
        line-height: 1.72;
        margin: 24px 0 28px;
    }

    .hero-actions {
        gap: 14px;
    }

    .hero-facts {
        width: 100%;
        max-width: 620px;
        margin-top: 28px;
    }

    .hero-fact {
        flex: 1 1 0;
        min-width: 0;
    }

    .hero-pet-cloud {
        width: 100%;
        height: clamp(360px, 56vw, 500px);
        margin-top: 4px;
    }

    .hero-pet-note {
        display: none;
    }

    .hero-corner-bottom {
        display: none;
    }

    .intro-grid,
    .philosophy,
    .daycare-grid,
    .gift,
    .contacts-grid,
    .contacts-head {
        grid-template-columns: 1fr;
    }

    .intro-grid {
        gap: 28px;
    }

    .intro-title h2,
    .services h2,
    .contacts h2 {
        font-size: clamp(48px, 10vw, 74px);
    }

    .intro-copy p {
        font-size: 14px;
    }

    .philosophy-image {
        min-height: clamp(300px, 58vw, 500px);
    }

    .philosophy-content {
        min-height: 0;
        padding: 34px 24px 38px;
    }

    .philosophy-content h2 {
        font-size: clamp(44px, 9vw, 70px);
    }

    .services-head {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-bottom: 28px;
    }

    .services-head > p {
        max-width: 620px;
    }

    .pet-stage {
        width: 100%;
        height: clamp(250px, 48vw, 330px);
        min-height: 0;
        border-radius: 22px;
    }

    .pet-info {
        left: 18px;
        right: 18px;
        bottom: 18px;
    }

    .pet-info strong {
        font-size: clamp(32px, 7vw, 48px);
    }

    .service-panel-head {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 40px 0 20px;
    }

    .service-panel-head h3 {
        font-size: clamp(38px, 8vw, 58px);
    }

    .service-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .service-card {
        min-width: 0;
        padding: 18px;
        border-radius: 18px;
    }

    .service-card-top {
        grid-template-columns: 26px minmax(0, 1fr);
        gap: 10px;
    }

    .service-category-title h4 {
        font-size: clamp(21px, 3.8vw, 29px);
    }


    .service-options {
        padding: 14px 0 0;
        gap: 7px;
    }

    .service-option {
        width: 100%;
        min-height: 40px;
        justify-content: space-between;
        padding: 0 12px 0 14px;
        font-size: 9px;
    }

    .daycare-grid {
        gap: 36px;
    }

    .daycare-collage {
        min-height: clamp(360px, 58vw, 520px);
    }

    .daycare-copy h2 {
        font-size: clamp(48px, 9vw, 74px);
    }

    .daycare-price {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gift {
        min-height: 0;
    }

    .gift-copy {
        padding: 34px 24px 38px;
    }

    .gift-copy h2 {
        font-size: clamp(50px, 9vw, 76px);
    }

    .gift-visual {
        min-height: clamp(320px, 62vw, 480px);
        margin: 0 14px 14px;
    }

    .gift-visual img {
        width: min(72%, 490px);
    }

    .contacts-head {
        gap: 16px;
        margin-bottom: 28px;
    }

    .contact-details {
        padding: 24px;
    }

    .map-wrap {
        min-height: clamp(360px, 70vw, 520px);
    }

    .footer-main {
        grid-template-columns: 1fr;
        gap: 24px;
        align-items: start;
        padding-bottom: 38px;
    }

    .footer-brand {
        width: 155px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

}

@media (max-width: 600px) {
    :root {
        --gutter: var(--mobile-gutter);
        --section: 64px;
    }

    .header {
        top: 8px;
        left: 10px;
        right: 10px;
        height: 56px;
        grid-template-columns: minmax(0, 1fr) 42px 42px;
        gap: 5px;
        border-radius: 15px;
        padding: 0 6px 0 12px;
    }

    .brand {
        width: 116px;
    }

    .header-phone,
    .header .menu-trigger {
        width: 42px;
        height: 42px;
    }

    .header-phone-number {
        display: none;
    }

    .mobile-phone {
        padding: 0 13px;
    }

    .mobile-phone-number {
        font-size: 12px;
    }

    .hero.hero-pet {
        padding: 98px var(--gutter) 26px;
    }

    .hero-meta {
        top: 76px;
        left: var(--gutter);
        right: var(--gutter);
    }

    .hero-pet-copy h1 {
        font-size: clamp(46px, 13.4vw, 68px);
        line-height: .86;
    }

    .hero-pet-copy > p {
        font-size: 13px;
        line-height: 1.62;
        margin: 20px 0 24px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-pet-copy .button,
    .hero-actions .button {
        width: 100%;
        min-height: 52px;
    }

    .text-link {
        display: none;
    }

    .hero-facts {
        gap: 6px;
        margin-top: 20px;
    }

    .hero-fact {
        padding: 10px 9px;
        border-radius: 12px;
    }

    .hero-fact strong {
        font-size: 21px;
    }

    .hero-fact span {
        font-size: 6.5px;
        letter-spacing: .08em;
    }

    .hero-pet-cloud {
        height: 340px;
        margin-top: 4px;
    }

    .hero-pet-card {
        width: 92px;
        height: 122px;
        padding: 4px;
        border-radius: 16px;
        translate: 0 0;
    }

    .hero-pet-card-2 {
        width: 80px;
        height: 104px;
    }

    .hero-pet-card-3 {
        width: 88px;
        height: 116px;
    }

    .hero-pet-card-4 {
        width: 84px;
        height: 110px;
    }

    .hero-pet-card-5 {
        width: 98px;
        height: 128px;
    }

    .hero-pet-card span {
        left: 8px;
        right: 8px;
        bottom: 8px;
        font-size: 7px;
    }

    .section-index {
        margin-bottom: 32px;
        font-size: 8px;
        gap: 8px;
    }

    .section-index i {
        width: min(90px, 18vw);
    }

    .intro-title h2,
    .services h2,
    .contacts h2 {
        font-size: clamp(42px, 12.6vw, 62px);
    }

    .intro-copy .lead {
        font-size: 20px;
    }

    .philosophy {
        margin-left: 10px;
        margin-right: 10px;
        border-radius: 18px;
    }

    .philosophy-image {
        min-height: 280px;
    }

    .philosophy-content {
        padding: 28px 20px 30px;
    }

    .philosophy-content h2 {
        font-size: clamp(40px, 11vw, 58px);
    }

    .principle {
        padding: 15px 0;
    }

    .principle strong {
        font-size: 18px;
    }

    .principle p {
        font-size: 12px;
    }

    .pet-stage {
        flex-direction: column;
        height: 350px;
        min-height: 350px;
        gap: 5px;
        border-radius: 18px;
    }

    .pet-card,
    .pet-card.active {
        flex: none !important;
        width: 100%;
        height: 50%;
        min-height: 0;
    }

    .pet-card.active {
        height: 58%;
    }

    .pet-card:not(.active) {
        height: 42%;
    }

    .pet-number {
        top: 12px;
        left: 14px;
        font-size: 7px;
    }

    .pet-info {
        left: 14px;
        right: 14px;
        bottom: 14px;
    }

    .pet-info small {
        font-size: 7px;
    }

    .pet-info strong {
        font-size: 30px;
    }

    .pet-info b {
        font-size: 20px;
    }

    .service-panel-head {
        padding: 30px 0 18px;
    }

    .service-panel-head h3 {
        font-size: 34px;
    }

    .service-panel-head p {
        font-size: 12px;
        line-height: 1.65;
    }

    .service-categories {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .service-card {
        padding: 16px;
        border-radius: 16px;
    }

    .service-category-title h4 {
        font-size: 22px;
    }

    .service-category-title span {
        font-size: 8px;
    }

    .service-option {
        min-height: 38px;
        font-size: 8.5px;
    }

    .service-footnote {
        margin-top: 18px;
        font-size: 7px;
        line-height: 1.55;
        gap: 8px;
    }

    .daycare-collage {
        min-height: 350px;
    }

    .daycare-image {
        border-radius: 16px;
    }

    .daycare-image.small {
        border-width: 6px;
    }

    .daycare-badge {
        width: 82px;
        height: 82px;
        right: 8%;
        top: 3%;
    }

    .daycare-badge::after {
        inset: 6px;
    }

    .daycare-badge-number {
        bottom: 17px;
        font-size: 25px;
    }

    .daycare-copy h2 {
        font-size: 46px;
    }

    .daycare-copy > p {
        font-size: 13px;
    }

    .tag-cloud {
        gap: 5px;
    }

    .tag-cloud span {
        padding: 8px 10px;
        font-size: 8px;
    }

    .daycare-price {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .daycare-service {
        padding: 14px 15px;
    }

    .gift {
        margin-left: 10px;
        margin-right: 10px;
        border-radius: 18px;
    }

    .gift-copy {
        padding: 28px 20px 32px;
    }

    .gift-copy h2 {
        font-size: 48px;
    }

    .gift-copy p {
        font-size: 13px;
        line-height: 1.7;
    }

    .gift-visual {
        min-height: 310px;
        margin: 0 10px 10px;
        border-radius: 16px;
    }

    .gift-visual img {
        width: 280px;
    }

    .gift-top,
    .gift-bottom {
        left: 14px;
        right: 14px;
    }

    .contacts-head {
        gap: 12px;
    }

    .contacts-head p {
        font-size: 12px;
        line-height: 1.65;
    }

    .contact-details {
        padding: 20px;
        border-radius: 18px;
    }

    .contact-item {
        padding: 15px 0;
    }

    .contact-item strong,
    .contact-item a {
        font-size: 17px;
    }

    .map-wrap {
        min-height: 320px;
        border-radius: 18px;
    }

    .footer {
        padding: 38px var(--gutter) 22px;
    }

    .footer-main {
        gap: 20px;
        padding-bottom: 30px;
    }

    .footer-brand {
        width: 142px;
    }

    .footer-slogan {
        font-size: 19px;
    }

    .footer-bottom {
        font-size: 7px;
    }

    .footer-bottom div {
        flex-wrap: wrap;
        gap: 12px;
    }

    .modal-window {
        width: calc(100vw - 28px);
        max-height: calc(100svh - 28px);
        overflow-y: auto;
        padding: 26px 20px 22px;
        border-radius: 18px;
    }

    .modal-window h2 {
        font-size: clamp(42px, 12vw, 58px);
    }

}

@media (max-width: 380px) {
    :root {
        --gutter: 14px;
    }

    .brand {
        width: 108px;
    }

    .hero.hero-pet {
        padding-left: 14px;
        padding-right: 14px;
    }

    .hero-pet-copy h1 {
        font-size: 45px;
    }

    .hero-pet-cloud {
        height: 305px;
    }

    .hero-fact strong {
        font-size: 19px;
    }

    .pet-stage {
        height: 320px;
        min-height: 320px;
    }

    .service-card {
        padding: 14px;
    }

    .service-category-title h4 {
        font-size: 20px;
    }

    .gift-copy h2 {
        font-size: 44px;
    }

    .map-wrap {
        min-height: 290px;
    }

}

@media (hover: none), (pointer: coarse) {
    .service-card:hover,
    .service-option:hover,
    .button:hover {
        transform: none;
    }

}

@media (max-width: 1100px) {
    :root {
        --frame-content-pad: 56px;
    }

    .gift-copy {
        padding-left: var(--frame-content-pad);
        padding-right: var(--frame-content-pad);
    }

}

@media (max-width: 920px) {
    :root {
        --frame-content-pad: 24px;
    }

    .frame {
        margin-left: var(--gutter);
        margin-right: var(--gutter);
    }

    .gift-copy {
        padding-left: var(--frame-content-pad);
        padding-right: var(--frame-content-pad);
    }

    .gift-copy h2 {
        margin-top: 14px;
    }

}

@media (max-width: 600px) {
    :root {
        --frame-content-pad: 20px;
    }

    .frame {
        margin-left: 10px;
        margin-right: 10px;
    }

    .gift {
        margin-left: 10px;
        margin-right: 10px;
    }

    .gift-copy {
        padding-left: var(--frame-content-pad);
        padding-right: var(--frame-content-pad);
    }

    .gift-copy h2 {
        font-size: 48px;
        line-height: .88;
        margin-top: 14px;
    }

}

@media (max-width: 380px) {
    :root {
        --frame-content-pad: 18px;
    }

    .gift-copy h2 {
        font-size: 42px;
    }

}

@media (max-width: 1100px) {
    .service-categories {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pet-stage {
        height: clamp(290px, 38vw, 370px);
    }

    .service-panel-head {
        grid-template-columns: minmax(0, 1fr) minmax(210px, .6fr);
    }

}

@media (max-width: 760px) {
    .services-head {
        gap: 10px;
        margin-bottom: 22px;
    }

    .services-head > p {
        font-size: 11px;
        line-height: 1.65;
    }

    .pet-stage {
        flex-direction: row;
        height: 255px;
        min-height: 255px;
        gap: 7px;
        border-radius: 20px;
    }

    .pet-card,
    .pet-card.active {
        flex: 1;
        border-radius: 18px;
    }

    .pet-card.active {
        flex: 1.55;
    }

    .pet-card::before {
        inset: 9px 22%;
        border-radius: 16px;
    }

    .pet-card.active::before {
        inset: 9px 29%;
    }

    .pet-card video {
        inset: 9px;
        width: calc(100% - 18px);
        height: calc(100% - 18px);
    }

    .pet-number {
        top: 11px;
        left: 11px;
        padding: 5px 7px;
        font-size: 6px;
    }

    .pet-info {
        left: 12px;
        right: 12px;
        bottom: 12px;
        grid-template-columns: 20px minmax(0, 1fr) 14px;
    }

    .pet-info strong {
        font-size: clamp(24px, 8vw, 36px);
    }

    .pet-info small {
        font-size: 6px;
    }

    .pet-info b {
        font-size: 13px;
    }

    .service-panel-head {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 30px 0 16px;
    }

    .service-panel-head h3 {
        font-size: clamp(34px, 10vw, 48px);
    }

    .service-panel-head p {
        justify-self: start;
        max-width: 100%;
        margin: 0;
        font-size: 10px;
    }

    .service-categories {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .service-category {
        padding: 14px 13px 7px;
        border-radius: 17px;
    }

    .service-card-top {
        grid-template-columns: 24px minmax(0, 1fr) auto;
        gap: 7px;
    }

    .service-category-title h4 {
        font-size: 20px;
    }


    .service-options {
        margin-top: 10px;
    }

    .service-option {
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 42px;
        padding: 8px 9px;
    }

    .service-option-name {
        font-size: 13px;
    }

    .service-option-price {
        font-size: 12px;
    }

}

@media (max-width: 380px) {
    .pet-stage {
        height: 235px;
        min-height: 235px;
    }

    .pet-card.active {
        flex: 1.48;
    }

    .pet-info strong {
        font-size: 23px;
    }

    .service-category-title h4 {
        font-size: 19px;
    }

}

@media (prefers-reduced-motion: reduce) {
    .pet-card,
    .pet-card.active,
    .pet-card video,
    .pet-card::before,
    .service-category,
    .service-option {
        transition-duration: 1ms !important;
    }

}

@media (min-width: 921px) {
    .pet-stage {
        flex-direction: row;
    }

    .pet-card {
        flex: 1 1 0;
        min-width: 0;
        transition: flex .75s var(--ease),
        filter .45s var(--ease),
        border-radius .45s var(--ease);
    }

    .pet-card.active {
        flex: 1.45 1 0;
    }

    .pet-card video {
        object-fit: cover;
        object-position: center top;
    }

}

@media (max-width: 920px) {
    .pet-stage {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        gap: 8px;
        height: clamp(220px, 39vw, 300px);
        min-height: 220px;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 18px 48px rgba(24, 30, 23, .10);
    }

    .pet-card,
    .pet-card.active {
        flex: 1 1 0;
        width: auto;
        height: 100%;
        min-width: 0;
        border-radius: 18px;
        transition: flex .65s var(--ease),
        filter .45s var(--ease),
        border-radius .45s var(--ease);
    }

    .pet-card.active {
        flex: 1.42 1 0;
    }

    .pet-card video {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

    .pet-overlay {
        background: linear-gradient(
                180deg,
                rgba(7, 9, 8, .04) 0%,
                rgba(7, 9, 8, .08) 38%,
                rgba(7, 9, 8, .82) 100%
        );
    }

    .pet-number {
        top: 13px;
        left: 14px;
        font-size: 7px;
    }

    .pet-info {
        left: 14px;
        right: 14px;
        bottom: 14px;
        grid-template-columns: 28px minmax(0, 1fr) 16px;
        gap: 4px;
    }

    .pet-info small {
        font-size: 7px;
    }

    .pet-info strong {
        font-size: clamp(28px, 6vw, 42px);
    }

    .pet-info b {
        font-size: 15px;
    }

}

@media (max-width: 560px) {
    .pet-stage {
        gap: 6px;
        height: clamp(190px, 57vw, 245px);
        min-height: 190px;
        border-radius: 16px;
    }

    .pet-card,
    .pet-card.active {
        height: 100%;
        flex: 1 1 0;
        border-radius: 15px;
    }

    .pet-card.active {
        flex: 1.5 1 0;
    }

    .pet-card video {
        object-position: center top;
    }

    .pet-number {
        top: 10px;
        left: 11px;
        font-size: 6px;
        letter-spacing: .14em;
    }

    .pet-info {
        left: 11px;
        right: 11px;
        bottom: 11px;
        grid-template-columns: 1fr auto;
        gap: 4px;
    }

    .pet-info small {
        display: none;
    }

    .pet-info strong {
        min-width: 0;
        font-size: clamp(24px, 8vw, 34px);
        line-height: .88;
    }

    .pet-info b {
        font-size: 14px;
    }

}

@media (max-width: 1100px) {
    .pet-stage {
        height: clamp(250px, 31vw, 330px) !important;
        min-height: 250px !important;
    }

}

@media (max-width: 760px) {
    .pet-stage {
        display: flex !important;
        flex-direction: row !important;
        height: 300px !important;
        min-height: 300px !important;
        gap: 12px !important;
        border-radius: 22px !important;
    }

    .pet-card,
    .pet-card.active {
        flex: 1 1 0 !important;
        width: auto !important;
        height: auto !important;
        border-radius: 22px !important;
    }

    .pet-card.active {
        flex: 1.22 1 0 !important;
    }

    .pet-info strong {
        font-size: clamp(31px, 7vw, 42px) !important;
    }

}

@media (max-width: 560px) {
    .pet-stage {
        flex-direction: column !important;
        height: 390px !important;
        min-height: 390px !important;
        gap: 5px !important;
    }

    .pet-card,
    .pet-card.active {
        flex: none !important;
        width: 100% !important;
        height: 50% !important;
        min-height: 0 !important;
        border-radius: 18px !important;
        transition: height .8s var(--ease) !important;
    }

    .pet-card.active {
        height: 58% !important;
    }

    .pet-info {
        left: 17px !important;
        right: 17px !important;
        bottom: 16px !important;
    }

    .pet-info strong {
        font-size: 34px !important;
    }

}

@media (hover: none), (pointer: coarse) {
    .ui-icon::before,
    .ui-icon::after {
        display: none;
    }

    .ui-icon,
    .ui-icon svg {
        transition: none;
        transform: none !important;
    }

    .button:active .ui-icon,
    .header-book:active .ui-icon,
    .mobile-book:active .ui-icon,
    .line-link:active .ui-icon,
    .text-link:active .ui-icon,
    .service-option:active .ui-icon,
    .pet-card:active .ui-icon,
    .map-link:active .ui-icon {
        transform: scale(.94) !important;
    }

}

@media (prefers-reduced-motion: reduce) {
    .ui-icon,
    .ui-icon svg,
    .ui-icon::before,
    .ui-icon::after {
        transition: none !important;
    }

}

@media (max-width: 820px) {
    .hero-meta {
        font-size: 10px;
    }

    .hero-pet-copy > p {
        font-size: 15px;
    }

    .hero-fact span {
        font-size: 10px;
    }

    .hero-pet-card span {
        font-size: 10px;
    }

    .section-index,
    .tiny-label {
        font-size: 10px;
    }

    .principle p,
    .daycare-copy > p,
    .gift-copy p,
    .contacts-head p {
        font-size: 15px;
    }

    .tag-cloud span {
        font-size: 11px;
    }

    .service-panel-head p {
        font-size: 14px;
    }

    .service-category-title span {
        font-size: 11px;
    }

    .service-option-name,
    .service-option span {
        font-size: 13px;
    }

    .service-option-price {
        font-size: 12px;
    }

    .service-footnote {
        font-size: 10px;
    }

    .footer-bottom {
        font-size: 10px;
    }

}

@media (max-width: 560px) {
    .hero-meta {
        font-size: 10px;
    }

    .hero-pet-copy > p {
        font-size: 15px;
    }

    .hero-fact span {
        font-size: 10px;
    }

    .section-index,
    .tiny-label {
        font-size: 10px;
    }

    .pet-number,
    .pet-info small {
        font-size: 10px;
    }

    .service-panel-head p {
        font-size: 14px;
    }

    .service-category-title span {
        font-size: 11px;
    }

    .service-option-name,
    .service-option span {
        font-size: 13px;
    }

    .service-option-price {
        font-size: 12px;
    }

    .service-footnote {
        font-size: 10px;
    }

    .tag-cloud span {
        font-size: 11px;
    }

    .footer-bottom {
        font-size: 10px;
    }

}

@media (max-width: 380px) {
    .hero-meta,
    .section-index,
    .tiny-label {
        font-size: 10px;
    }

    .hero-pet-copy > p,
    .principle p,
    .daycare-copy > p,
    .gift-copy p,
    .contacts-head p {
        font-size: 14px;
    }

    .hero-fact span,
    .hero-pet-card span,
    .pet-number,
    .pet-info small {
        font-size: 9px;
    }

    .service-option-name,
    .service-option span {
        font-size: 13px;
    }

    .service-option-price {
        font-size: 12px;
    }

    .service-footnote,
    .footer-bottom {
        font-size: 10px;
    }

}

@media (max-width: 1100px) {
    .services-head {
        grid-template-columns: minmax(0, 1fr) minmax(310px, 390px);
        column-gap: 34px;
        margin-bottom: 36px;
    }

    .services-head > .pet-stage {
        height: 300px;
        min-height: 300px;
    }

    .services-head-copy > p {
        font-size: 14px;
    }

}

@media (max-width: 920px) {
    .services-head {
        display: flex;
        flex-direction: column;
        gap: 24px;
        align-items: stretch;
        margin-bottom: 34px;
    }

    .services-head-copy {
        display: block;
    }

    .services-head-copy > p {
        margin-top: 18px;
        max-width: 580px;
    }

    .services-head > .pet-stage {
        width: 100%;
        height: 310px;
        min-height: 310px;
        order: 2;
    }

}

@media (max-width: 600px) {
    .services-head {
        gap: 18px;
        margin-bottom: 28px;
    }

    .services-head-copy > p {
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.65;
    }

    .services-head > .pet-stage {
        height: 270px;
        min-height: 270px;
        gap: 7px;
        border-radius: 20px;
    }

    .services-head > .pet-stage .pet-card,
    .services-head > .pet-stage .pet-card.active {
        border-radius: 17px;
    }

    .services-head > .pet-stage .pet-card.active {
        flex: 1.32 1 0;
    }

    .services-head > .pet-stage .pet-number {
        top: 10px;
        left: 10px;
        font-size: 8px;
    }

    .services-head > .pet-stage .pet-info {
        left: 11px;
        right: 11px;
        bottom: 11px;
        grid-template-columns: 20px minmax(0, 1fr) 15px;
        gap: 5px;
    }

    .services-head > .pet-stage .pet-info small {
        font-size: 8px;
    }

    .services-head > .pet-stage .pet-info strong {
        font-size: clamp(25px, 8vw, 38px);
    }

}

@media (max-width: 380px) {
    .services-head > .pet-stage {
        height: 245px;
        min-height: 245px;
    }

    .services-head > .pet-stage .pet-info strong {
        font-size: 27px;
    }

}

@media (max-width: 1200px) {
    .services-head {
        grid-template-columns: minmax(0, 1fr) minmax(460px, 48vw);
        column-gap: 36px;
    }

    .services-head > .pet-stage {
        height: 520px;
        min-height: 520px;
    }

    .services-head > .pet-stage .pet-info strong {
        font-size: clamp(38px, 4.8vw, 60px);
    }

}

@media (max-width: 920px) {
    .services.section {
        padding-top: 70px;
        padding-bottom: 90px;
    }

    .services-head {
        display: flex;
        flex-direction: column;
        gap: 24px;
        margin-bottom: 28px;
    }

    .services-head-copy {
        display: block;
        width: 100%;
    }

    .services-head-copy > p {
        margin-top: 18px;
    }

    .services-head > .pet-stage {
        width: 100%;
        height: 500px;
        min-height: 500px;
        order: 2;
    }

    .service-panel-head {
        padding-top: 36px;
        padding-bottom: 18px;
    }

}

@media (max-width: 600px) {
    .services.section {
        padding-top: 58px;
        padding-bottom: 70px;
    }

    .services-head {
        gap: 18px;
        margin-bottom: 24px;
    }

    .services-head-copy > p {
        margin-top: 14px;
        font-size: 14px;
        line-height: 1.65;
    }

    .services-head > .pet-stage {
        height: 360px;
        min-height: 360px;
        gap: 8px;
        border-radius: 22px;
    }

    .services-head > .pet-stage .pet-card,
    .services-head > .pet-stage .pet-card.active {
        border-radius: 19px;
    }

    .services-head > .pet-stage .pet-card.active {
        flex: 1.32 1 0;
    }

    .services-head > .pet-stage .pet-number {
        top: 12px;
        left: 12px;
        font-size: 9px;
    }

    .services-head > .pet-stage .pet-info {
        left: 15px;
        right: 15px;
        bottom: 15px;
        grid-template-columns: 22px minmax(0, 1fr) 17px;
        gap: 6px;
    }

    .services-head > .pet-stage .pet-info small {
        font-size: 9px;
    }

    .services-head > .pet-stage .pet-info strong {
        font-size: clamp(29px, 9vw, 42px);
    }

    .services-head > .pet-stage .pet-info .ui-icon {
        --icon-size: 18px;
    }

    .service-panel-head {
        padding-top: 30px;
        padding-bottom: 16px;
    }

}

@media (max-width: 380px) {
    .services.section {
        padding-top: 52px;
    }

    .services-head > .pet-stage {
        height: 320px;
        min-height: 320px;
    }

}

@media (max-width: 920px) {
    .contacts.section {
        padding-top: 64px;
    }

    .contacts-head {
        margin-bottom: 24px;
    }

    .contact-details {
        padding: 24px;
    }

}

@media (max-width: 600px) {
    .contacts.section {
        padding-top: 48px;
    }

    .contact-details {
        padding: 20px;
        border-radius: 18px;
    }

    .contact-item {
        padding: 15px 0;
    }

    .contact-item > span {
        font-size: 9px;
    }

    .contact-item strong {
        font-size: 17px;
    }

    .contact-item a {
        font-size: 13px;
    }

    .contact-details .button {
        margin-top: 18px;
    }

}

@media (min-width: 921px) {
    .services-head > .pet-stage {
        height: clamp(500px, 35vw, 640px) !important;
        min-height: 500px !important;
    }

}

@media (min-width: 601px) and (max-width: 920px) {
    .services-head > .pet-stage {
        height: clamp(320px, 46vw, 440px) !important;
        min-height: 320px !important;
    }

    .pet-stage {
        height: clamp(320px, 46vw, 440px) !important;
        min-height: 320px !important;
    }

}

@media (max-width: 600px) {
    .services-head {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 18px !important;
    }

    .services-head > .pet-stage,
    .pet-stage {
        display: flex !important;
        flex-direction: row !important;
        width: 100% !important;
        height: clamp(230px, 62vw, 290px) !important;
        min-height: 230px !important;
        gap: 7px !important;
        border-radius: 20px !important;
    }

    .pet-card,
    .pet-card.active,
    .services-head > .pet-stage .pet-card,
    .services-head > .pet-stage .pet-card.active {
        flex: 1 1 0 !important;
        width: auto !important;
        height: 100% !important;
        min-width: 0 !important;
        border-radius: 17px !important;
    }

    .pet-card.active,
    .services-head > .pet-stage .pet-card.active {
        flex: 1.22 1 0 !important;
    }

    .pet-info {
        left: 11px !important;
        right: 11px !important;
        bottom: 11px !important;
        grid-template-columns: 18px minmax(0, 1fr) 16px !important;
        gap: 4px !important;
    }

    .pet-info strong {
        font-size: clamp(26px, 8vw, 38px) !important;
        white-space: nowrap !important;
    }

    .pet-info small {
        font-size: 8px !important;
    }

    .pet-number {
        top: 10px !important;
        left: 10px !important;
        font-size: 7px !important;
    }

}

@media (max-width: 380px) {
    .services-head > .pet-stage,
    .pet-stage {
        height: 220px !important;
        min-height: 220px !important;
        gap: 6px !important;
    }

    .pet-card,
    .pet-card.active {
        border-radius: 16px !important;
    }

    .pet-info {
        grid-template-columns: 12px minmax(0, 1fr) 14px !important;
    }

    .pet-info strong {
        font-size: 25px !important;
    }

    .pet-info small {
        font-size: 7px !important;
    }

}

@media (max-width: 600px) {
    .services-head > .pet-stage .pet-info,
    .pet-stage .pet-info {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        grid-template-columns: 18px minmax(0, 1fr) 18px !important;
        gap: 4px !important;
    }

    .services-head > .pet-stage .pet-info > small,
    .pet-stage .pet-info > small {
        font-size: 7px !important;
        letter-spacing: .12em !important;
    }

    .services-head > .pet-stage .pet-info > strong,
    .pet-stage .pet-info > strong {
        font-size: clamp(27px, 8vw, 34px) !important;
    }

    .services-head > .pet-stage .pet-info > .ui-icon-paw,
    .pet-stage .pet-info > .ui-icon-paw {
        width: 17px !important;
        height: 17px !important;
        min-width: 17px !important;
        flex-basis: 17px !important;
    }

}

@media (max-width: 380px) {
    .services-head > .pet-stage .pet-info,
    .pet-stage .pet-info {
        left: 8px !important;
        right: 8px !important;
        bottom: 9px !important;
        grid-template-columns: 16px minmax(0, 1fr) 16px !important;
        gap: 3px !important;
    }

    .services-head > .pet-stage .pet-info > strong,
    .pet-stage .pet-info > strong {
        font-size: 25px !important;
    }

    .services-head > .pet-stage .pet-info > .ui-icon-paw,
    .pet-stage .pet-info > .ui-icon-paw {
        width: 15px !important;
        height: 15px !important;
        min-width: 15px !important;
        flex-basis: 15px !important;
    }

}

@media (max-width: 600px) {
    .services-head > .pet-stage,
    .pet-stage {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 7px !important;
    }

    .services-head > .pet-stage .pet-card,
    .services-head > .pet-stage .pet-card.active {
        flex: 1 1 0 !important;
        width: auto !important;
        height: 100% !important;
        min-width: 0 !important;
        transition: flex .82s var(--ease),
        filter .55s var(--ease) !important;
    }

    .services-head > .pet-stage .pet-card.active {
        flex: 1.22 1 0 !important;
    }

    .services-head > .pet-stage .pet-info,
    .pet-stage .pet-info {
        left: 10px !important;
        right: 10px !important;
        bottom: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 5px !important;
        min-width: 0 !important;
    }

    .services-head > .pet-stage .pet-info > small,
    .pet-stage .pet-info > small {
        flex: 0 0 auto !important;
        margin: 0 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        align-self: center !important;
    }

    .services-head > .pet-stage .pet-info > strong,
    .pet-stage .pet-info > strong {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        line-height: .9 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        align-self: center !important;
        font-size: clamp(27px, 8vw, 34px) !important;
    }

    .services-head > .pet-stage .pet-info > .ui-icon-paw,
    .pet-stage .pet-info > .ui-icon-paw {
        flex: 0 0 16px !important;
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        margin: 0 0 0 auto !important;
        align-self: center !important;
        justify-self: auto !important;
        transform: none !important;
    }

    .services-head > .pet-stage .pet-info > .ui-icon-paw svg,
    .pet-stage .pet-info > .ui-icon-paw svg {
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
    }

}

@media (max-width: 380px) {
    .services-head > .pet-stage .pet-info,
    .pet-stage .pet-info {
        left: 8px !important;
        right: 8px !important;
        bottom: 9px !important;
        gap: 4px !important;
    }

    .services-head > .pet-stage .pet-info > strong,
    .pet-stage .pet-info > strong {
        font-size: 25px !important;
    }

    .services-head > .pet-stage .pet-info > .ui-icon-paw,
    .pet-stage .pet-info > .ui-icon-paw {
        flex-basis: 15px !important;
        width: 15px !important;
        height: 15px !important;
        min-width: 15px !important;
    }

}

@media (max-width: 820px) {
    .hero h1 {
        font-size: var(--hero-title-size-tablet);
    }

    .intro-title h2,
    .services-head h2,
    .contacts h2 {
        font-size: clamp(42px, 10.8vw, 68px);
    }

    .philosophy-content h2 {
        font-size: clamp(42px, 10.2vw, 68px);
    }

    .service-panel-head h3 {
        font-size: clamp(34px, 8vw, 52px);
    }

    .daycare-copy h2,
    .gift-copy h2 {
        font-size: clamp(46px, 10.5vw, 72px);
    }

    .service-category-title h4 {
        font-size: 19px;
    }

    .principle strong {
        font-size: 21px;
    }

}

@media (max-width: 600px) {
    .hero h1 {
        font-size: var(--hero-title-size-mobile);
    }

    .intro-title h2,
    .services-head h2,
    .contacts h2 {
        font-size: clamp(40px, 11.5vw, 60px);
    }

    .philosophy-content h2 {
        font-size: clamp(38px, 10.8vw, 56px);
    }

    .service-panel-head h3 {
        font-size: clamp(31px, 9.2vw, 46px);
    }

    .daycare-copy h2,
    .gift-copy h2 {
        font-size: clamp(42px, 11.2vw, 64px);
    }

    .modal-window h2 {
        font-size: clamp(39px, 11.2vw, 54px);
    }

    .service-category-title h4 {
        font-size: 18px;
    }

}

@media (max-width: 600px) {
    .cookie-consent {
        left: 10px;
        right: 10px;
        bottom: 10px;
    }

    .cookie-consent-card {
        padding: 18px;
    }

    .cookie-consent-actions button {
        flex: 1;
    }

}

@media (max-width: 1100px) {
    :root {
        --type-body: 16px;
        --type-lead: 19px;
        --type-section: clamp(52px, 6.1vw, 72px);
        --type-subheading: clamp(36px, 4vw, 50px);
        --type-card: clamp(23px, 2.4vw, 28px);
    }

}

@media (max-width: 820px) {
    :root {
        --type-ui: 12px;
        --type-ui-strong: 13px;
        --type-body: 16px;
        --type-lead: 18px;
        --type-section: clamp(46px, 11vw, 62px);
        --type-subheading: clamp(34px, 8.5vw, 46px);
        --type-card: clamp(22px, 5.8vw, 27px);
        --type-stat: 25px;
        --type-small: 14px;
    }

    .hero-title-main {
        font-size: clamp(52px, 13vw, 74px) !important;
    }

    .hero-title-sub {
        font-size: clamp(24px, 5.8vw, 32px) !important;
    }

    .hero-pet-copy > p {
        font-size: 18px !important;
    }

    .hero-fact strong {
        font-size: 25px !important;
    }

    .intro-copy .lead {
        font-size: 19px;
    }

    .service-panel-head p,
    .intro-copy p,
    .principle p,
    .daycare-copy > p,
    .gift-copy p,
    .contacts-head p,
    .services-head-copy > p {
        font-size: 16px !important;
    }

    .contact-item strong,
    .contact-item a {
        font-size: 19px !important;
    }

}

@media (max-width: 560px) {
    :root {
        --type-body: 16px;
        --type-lead: 17px;
        --type-section: clamp(42px, 11.5vw, 56px);
        --type-subheading: clamp(31px, 9vw, 42px);
        --type-card: 21px;
        --type-stat: 23px;
        --type-ui: 12px;
        --type-ui-strong: 13px;
    }

    .hero-title-main {
        font-size: clamp(46px, 13.5vw, 64px) !important;
    }

    .hero-title-sub {
        font-size: clamp(22px, 6vw, 28px) !important;
    }

    .hero-pet-copy > p {
        font-size: 17px !important;
    }

    .hero-pet-copy .button,
    .hero-pet-copy .text-link {
        font-size: 13px !important;
    }

    .hero-fact strong {
        font-size: 23px !important;
    }

    .hero-fact span,
    .hero-pet-card span {
        font-size: 12px !important;
    }

    .intro-copy .lead {
        font-size: 18px;
    }

    .intro-copy p,
    .principle p,
    .daycare-copy > p,
    .gift-copy p,
    .service-panel-head p,
    .services-head-copy > p {
        font-size: 16px !important;
    }

}

@media (max-width: 920px) {
    .frame {
        width: auto;
        max-width: calc(100% - 2 * var(--gutter));
        margin-left: var(--gutter);
        margin-right: var(--gutter);
    }

}

@media (max-width: 600px) {
    .frame {
        max-width: calc(100% - 2 * var(--mobile-gutter));
    }

}

@media (min-width: 921px) {
    .header {
        position: fixed;
        overflow: visible;
    }

    .header .nav {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: max-content;
        max-width: calc(100% - 430px);
        gap: clamp(12px, 1.65vw, 28px);
        z-index: 2;
    }

    .header .nav a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

}

@media (min-width: 921px) and (max-width: 1240px) {
    .header {
        grid-template-columns: 150px minmax(0, 1fr) auto;
        gap: 10px;
        padding-left: 14px;
        padding-right: 8px;
    }

    .brand {
        width: 142px;
    }

    .header .nav {
        max-width: calc(100% - 330px);
        gap: clamp(9px, 1.25vw, 16px);
    }

    .header .nav a {
        font-size: clamp(8px, .72vw, 10px);
        letter-spacing: .055em;
    }

    .header .nav a span {
        margin-right: 4px;
    }

    .header-actions {
        gap: 7px;
    }

    .header-phone,
    .header-book {
        width: 42px;
        min-width: 42px;
        height: 42px;
        padding: 0;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .header-phone-number,
    .header-book > span:first-child {
        display: none;
    }

    .header-phone .ui-icon,
    .header-book .ui-icon {
        --icon-size: 17px;
        margin: 0;
    }

    .header-book {
        gap: 0;
    }

}

@media (max-width: 920px) {
    .header .nav,
    .header-book {
        display: none !important;
    }

    .header .header-actions {
        gap: 7px;
    }

    .header-phone {
        width: 44px;
        min-width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 12px;
    }

    .header-phone-number {
        display: none !important;
    }

    .header-phone .ui-icon {
        --icon-size: 18px;
    }

    .header .menu-trigger {
        display: flex !important;
    }

}

@media (max-width: 600px) {
    .header {
        grid-template-columns: minmax(0, 1fr) 42px 42px;
        gap: 5px;
    }

    .header-phone,
    .header .menu-trigger {
        width: 42px;
        min-width: 42px;
        height: 42px;
    }

    .header-phone .ui-icon {
        --icon-size: 17px;
    }

}

@media (max-width: 900px) {
    .legal-shell {
        width: min(100% - 48px, 760px);
        padding: 125px 0 80px;
    }

    .legal-hero {
        margin-bottom: 58px;
    }

    .legal-section {
        grid-template-columns: 65px minmax(0, 1fr);
        column-gap: 28px;
        padding: 36px 0;
    }

    .legal-section-body {
        max-width: 100%;
    }

    .legal-section p {
        max-width: 100%;
    }

}

@media (max-width: 600px) {
    .legal-shell {
        width: calc(100% - 32px);
        padding: 105px 0 60px;
    }

    .legal-hero {
        margin-bottom: 42px;
    }

    .legal-kicker {
        margin-bottom: 18px;
    }

    .legal-title {
        font-size: clamp(43px, 13vw, 64px);
        line-height: .94;
    }

    .legal-intro {
        flex-wrap: wrap;
        margin-top: 22px;
    }

    .legal-section {
        display: block;
        padding: 30px 0;
    }

    .legal-section-number {
        padding: 0;
        margin-bottom: 13px;
    }

    .legal-section h2 {
        margin-bottom: 15px;
        font-size: 29px;
        line-height: 1.05;
    }

    .legal-section p {
        font-size: 14px;
        line-height: 1.72;
    }

    .legal-contacts {
        grid-template-columns: 1fr;
        margin-top: 22px;
    }

    .legal-contact {
        padding: 15px 0;
    }

    .legal-contact:nth-child(even) {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(16, 19, 15, .08);
    }

    .legal-note {
        display: block;
        margin-top: 24px;
    }

}

@media (max-width: 400px) {
    .legal-shell {
        width: calc(100% - 28px);
    }

    .legal-title {
        font-size: 42px;
    }

    .legal-meta {
        font-size: 8px;
    }

}

@media (max-width: 1100px) {
    .hero-pet-copy {
        width: min(600px, 53vw);
    }

    .hero-pet-copy h1.hero-title {
        font-size: clamp(64px, 7vw, 92px) !important;
    }

    .hero-title-sub {
        max-width: 380px;
    }

}

@media (max-width: 820px) {
    .hero.hero-pet {
        min-height: 940px;
        padding: 116px var(--gutter) 38px;
    }

    .hero-pet-copy {
        width: 100%;
        max-width: 100%;
        padding-right: 0;
    }

    .hero-pet-copy .hero-topline {
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 34px;
    }

    .hero-pet-copy .hero-topline .eyebrow {
        font-size: 9px !important;
        letter-spacing: .09em;
    }

    .hero-pet-copy .hero-topline .eyebrow span {
        white-space: normal;
    }

    .hero-pet-copy .hero-opening {
        min-height: 29px;
        padding: 0 10px;
        font-size: 8px !important;
        letter-spacing: .10em;
    }

    .hero-copy-content {
        max-width: 100%;
    }

    .hero-title-eyebrow {
        margin-bottom: 11px;
        font-size: 8px;
        letter-spacing: .18em;
    }

    .hero-title-eyebrow i {
        width: 20px;
    }

    .hero-pet-copy h1.hero-title {
        max-width: 100%;
        font-size: clamp(58px, 15.2vw, 82px) !important;
        line-height: .84 !important;
    }

    .hero-title-main {
        white-space: nowrap;
    }

    .hero-title-main-accent {
        margin-left: clamp(15px, 7vw, 34px);
    }

    .hero-title-sub {
        max-width: 340px;
        margin: 19px 0 0 2px !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .hero-actions {
        margin-top: 26px;
        gap: 14px;
    }

    .hero-pet-copy .button-sage {
        min-height: 52px;
        padding: 0 16px 0 17px;
    }

    .hero-pet-copy .text-link {
        font-size: 8px !important;
    }

    .hero-facts {
        margin-top: 34px !important;
        padding-top: 17px !important;
    }

    .hero-fact {
        padding: 0 10px;
    }

    .hero-fact strong {
        font-size: 21px !important;
    }

}

@media (max-width: 560px) {
    .hero.hero-pet {
        min-height: 890px;
        padding: 104px 20px 30px;
    }

    .hero-pet-copy .hero-topline {
        align-items: flex-start;
        margin-bottom: 28px;
    }

    .hero-pet-copy .hero-topline .eyebrow {
        max-width: 62%;
        font-size: 9px !important;
        line-height: 1.35;
    }

    .hero-pet-copy .hero-opening {
        min-height: 27px;
        padding: 0 9px;
        font-size: 7px !important;
    }

    .hero-opening-dot {
        width: 4px;
        height: 4px;
    }

    .hero-title-eyebrow {
        margin-bottom: 9px;
        font-size: 10px;
    }

    .hero-pet-copy h1.hero-title {
        font-size: clamp(52px, 16vw, 72px) !important;
        line-height: .86 !important;
    }

    .hero-title-main-accent {
        margin-left: clamp(42px, 13vw, 58px);
        margin-top: -2px;
    }

    .hero-title-sub {
        max-width: 295px;
        margin-top: 17px !important;
        font-size: 12px !important;
        line-height: 1.52 !important;
    }

    .hero-actions {
        align-items: flex-start;
        flex-direction: column;
        margin-top: 23px;
        gap: 12px;
    }

    .hero-pet-copy .text-link {
        margin-left: 3px;
        font-size: 10px !important;
    }

    .hero-facts {
        margin-top: 29px !important;
        gap: 0;
    }

    .hero-fact {
        padding: 0 7px;
    }

    .hero-fact strong {
        font-size: 18px !important;
    }

    .hero-pet-cloud {
        height: 390px;
        margin-top: 24px;
    }

}

@media (max-width: 360px) {
    .hero.hero-pet {
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero-pet-copy h1.hero-title {
        font-size: 48px !important;
    }

    .hero-title-sub {
        max-width: 270px;
    }

    .hero-pet-copy .hero-opening {
        padding: 0 8px;
    }

}

@media (max-width: 1100px) {
    .hero.hero-pet {
        grid-template-columns: minmax(0, 56%) minmax(330px, 44%);
    }

    .hero-pet-cloud {
        height: min(680px, calc(100vh - 160px));
    }

    .hero-pet-card-1 {
        width: 210px;
        height: 276px;
    }

}

@media (max-width: 820px) {
    .hero-pet-cloud {
        width: 100%;
        height: 500px;
        margin-top: 30px;
    }

    .hero-pet-card-1 {
        left: 10%;
        top: 10%;
    }

    .hero-pet-card-3 {
        right: 2%;
        top: 13%;
    }

    .hero-pet-card-4 {
        left: 2%;
        bottom: 6%;
    }

    .hero-pet-card-5 {
        right: 15%;
        bottom: 0;
    }

}

@media (max-width: 560px) {
    .hero-pet-card-1 {
        left: 8%;
        top: 9%;
        width: 170px;
        height: 224px;
    }

    .hero-pet-card-2 {
        left: 43%;
        top: 2%;
        width: 112px;
        height: 148px;
    }

    .hero-pet-card-3 {
        right: -2%;
        top: 20%;
        width: 132px;
        height: 170px;
    }

    .hero-pet-card-4 {
        left: 1%;
        bottom: 0;
        width: 116px;
        height: 152px;
    }

    .hero-pet-card-5 {
        right: 17%;
        bottom: 0;
        width: 136px;
        height: 174px;
    }

}


/* =========================================================
   06. ЖИВЫЕ РАБОТЫ И КОМАНДА
   ---------------------------------------------------------
   Секции сделаны единым визуальным потоком:
   - без внешних margin у полноширинных блоков;
   - без светлых полос от .frame;
   - единая типографическая шкала сайта;
   - адаптивная сетка для работ и команды.
   ========================================================= */

.works-section {
    position: relative;
    width: 100%;
    margin: 0;
    padding: clamp(88px, 8.5vw, 132px) var(--gutter) clamp(92px, 9vw, 138px);
    overflow: clip;
    isolation: isolate;
    background: #10130f;
    color: #f6f2e8;
}

.works-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 78% 18%, rgba(156, 175, 127, .10), transparent 28%),
    radial-gradient(circle at 18% 88%, rgba(255, 255, 255, .025), transparent 24%);
}

.works-section .section-index {
    margin-bottom: clamp(34px, 4vw, 52px);
    color: rgba(246, 242, 232, .58);
}

.works-section .section-index b {
    color: rgba(246, 242, 232, .72);
}

.works-section .section-index i {
    background: rgba(246, 242, 232, .14);
}

.works-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .52fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: end;
    margin: 0 0 clamp(30px, 3.6vw, 48px);
}

.works-head h2 {
    margin: 12px 0 0;
    max-width: 760px;
    font: 500 clamp(48px, 5.25vw, 82px) / .89 var(--serif);
    letter-spacing: -.055em;
}

.works-head h2 em {
    color: var(--sage-soft);
}

.works-head p {
    max-width: 460px;
    margin: 0 0 2px auto;
    color: rgba(246, 242, 232, .62);
    font-size: clamp(13px, .92vw, 15px);
    line-height: 1.78;
}

.works-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(8px, .7vw, 12px);
}

.work-card {
    position: relative;
    grid-column: span 3;
    min-height: clamp(220px, 18vw, 286px);
    overflow: hidden;
    isolation: isolate;
    border-radius: clamp(18px, 1.6vw, 24px);
    background: #0b0d0c;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035);
}

.work-card:nth-child(1),
.work-card:nth-child(4) {
    grid-column: span 6;
    min-height: clamp(330px, 28vw, 430px);
}

.work-card video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.8) brightness(.76);
    transition: transform .8s var(--ease), filter .8s var(--ease);
}

.work-card:hover video {
    transform: scale(1.045);
    filter: saturate(1) brightness(.86);
}

.work-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, transparent 26%, rgba(4, 5, 4, .08) 48%, rgba(4, 5, 4, .86) 100%);
}

.work-caption {
    position: absolute;
    left: clamp(16px, 1.5vw, 22px);
    right: clamp(16px, 1.5vw, 22px);
    bottom: clamp(16px, 1.5vw, 22px);
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.work-caption span {
    color: rgba(255, 255, 255, .44);
    font-size: 9px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .15em;
}

.work-caption strong {
    max-width: 90%;
    font: 500 clamp(20px, 1.8vw, 29px) / .98 var(--serif);
    letter-spacing: -.025em;
}

/*
 * Команда больше не является .frame.
 * За счёт этого исчезают боковые/верхние полосы body-фона,
 * а сам блок выглядит продолжением paper-секций сайта.
 */
.team-section {
    position: relative;
    display: grid;
    grid-template-columns: minmax(320px, .92fr) minmax(0, 1.08fr);
    width: 100%;
    min-height: clamp(500px, 46vw, 700px);
    margin: 0;
    padding: 0;
    overflow: clip;
    isolation: isolate;
    background: var(--paper);
    color: var(--ink);
}

.team-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(circle at 18% 48%, rgba(156, 175, 127, .16), transparent 23%),
    linear-gradient(90deg, rgba(229, 223, 210, .22), transparent 48%);
}

.team-placeholder-visual,
.team-copy {
    min-width: 0;
}

.team-placeholder-visual {
    position: relative;
    min-height: inherit;
    padding: clamp(54px, 6vw, 92px) clamp(24px, 5vw, 78px) clamp(46px, 5vw, 76px) var(--gutter);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    background: transparent;
}

.team-placeholder-visual::before {
    content: "";
    position: absolute;
    width: clamp(280px, 30vw, 470px);
    aspect-ratio: 1;
    right: clamp(-170px, -10vw, -90px);
    top: 50%;
    border: 1px solid rgba(16, 19, 15, .07);
    border-radius: 50%;
    transform: translateY(-50%);
}

.team-placeholder-visual::after {
    content: "";
    position: absolute;
    width: clamp(120px, 12vw, 180px);
    aspect-ratio: 1;
    right: clamp(30px, 8vw, 150px);
    top: 28%;
    border-radius: 50%;
    background: rgba(156, 175, 127, .08);
    filter: blur(1px);
}

.team-placeholder-visual > * {
    position: relative;
    z-index: 1;
}

.team-placeholder-visual .tiny-label {
    color: #7b856f;
}

.team-placeholder-visual strong {
    display: block;
    max-width: 620px;
    font: 500 clamp(62px, 7.4vw, 116px) / .84 var(--serif);
    letter-spacing: -.065em;
}

.team-placeholder-visual em {
    color: var(--sage-deep);
}

.team-copy {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(54px, 6vw, 98px) var(--gutter) clamp(54px, 6vw, 98px) clamp(42px, 6vw, 96px);
}

.team-copy::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14%;
    bottom: 14%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(16, 19, 15, .08) 22%, rgba(16, 19, 15, .08) 78%, transparent);
}

.team-copy .section-index {
    margin-bottom: 0;
    color: #78836c;
}

.team-copy .section-index span {
    color: var(--ink);
}

.team-copy .section-index i {
    background: var(--line);
}

.team-copy h2 {
    max-width: 720px;
    margin: clamp(28px, 3.2vw, 42px) 0 clamp(22px, 2.2vw, 32px);
    font: 500 clamp(46px, 4.75vw, 76px) / .9 var(--serif);
    letter-spacing: -.055em;
}

.team-copy h2 em {
    color: var(--sage-deep);
}

.team-copy > p {
    max-width: 610px;
    margin: 0;
    color: #61685d;
    font-size: clamp(14px, 1vw, 16px);
    line-height: 1.78;
}

.team-meta {
    max-width: 610px;
    margin-top: clamp(28px, 3vw, 38px);
    padding-top: 15px;
    border-top: 1px solid rgba(16, 19, 15, .09);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    color: #767b73;
    font-size: 10px;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.team-meta b {
    color: #242923;
    font-weight: 700;
    text-align: right;
}

/* ---------- Seamless section flow ---------- */
.works-section + .team-section,
.team-section + .section,
.team-section + .frame {
    margin-top: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .works-section {
        padding-top: 82px;
        padding-bottom: 96px;
    }

    .works-head {
        grid-template-columns: minmax(0, 1fr) minmax(230px, .56fr);
        gap: 34px;
    }

    .team-section {
        grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
        min-height: 520px;
    }

    .team-placeholder-visual {
        padding-left: var(--gutter);
    }

    .team-copy {
        padding-left: clamp(34px, 4.4vw, 58px);
    }
}

@media (max-width: 920px) {
    .works-section {
        padding-top: 76px;
        padding-bottom: 88px;
    }

    .works-head {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-bottom: 30px;
    }

    .works-head p {
        max-width: 580px;
        margin-left: 0;
    }

    .works-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .work-card,
    .work-card:nth-child(1),
    .work-card:nth-child(4) {
        grid-column: span 3;
        min-height: clamp(250px, 35vw, 340px);
    }

    .team-section {
        grid-template-columns: 1fr 1fr;
        min-height: 480px;
    }

    .team-placeholder-visual {
        padding-right: 38px;
    }

    .team-copy {
        padding-right: var(--gutter);
    }

    .team-copy::before {
        top: 12%;
        bottom: 12%;
    }
}

@media (max-width: 760px) {
    .works-section {
        padding: 70px var(--gutter) 78px;
    }

    .works-head h2 {
        font-size: clamp(44px, 10vw, 64px);
    }

    .works-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .work-card,
    .work-card:nth-child(1),
    .work-card:nth-child(4) {
        grid-column: span 1;
        min-height: 240px;
    }

    .work-card:nth-child(1),
    .work-card:nth-child(4) {
        min-height: 300px;
    }

    .work-caption {
        left: 14px;
        right: 14px;
        bottom: 14px;
    }

    .work-caption strong {
        max-width: 100%;
        font-size: clamp(18px, 5vw, 25px);
    }

    .team-section {
        display: block;
        min-height: 0;
    }

    .team-placeholder-visual {
        min-height: 390px;
        padding: 48px var(--gutter) 34px;
    }

    .team-placeholder-visual strong {
        max-width: 470px;
        font-size: clamp(58px, 15vw, 86px);
    }

    .team-placeholder-visual::before {
        right: -120px;
        top: 54%;
        width: 300px;
    }

    .team-placeholder-visual::after {
        right: 18%;
        top: 22%;
        width: 100px;
    }

    .team-copy {
        padding: 44px var(--gutter) 68px;
    }

    .team-copy::before {
        left: var(--gutter);
        right: var(--gutter);
        top: 0;
        bottom: auto;
        width: auto;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(16, 19, 15, .09) 20%, rgba(16, 19, 15, .09) 80%, transparent);
    }

    .team-copy h2 {
        font-size: clamp(42px, 10.8vw, 64px);
        margin-top: 26px;
    }

    .team-copy > p {
        font-size: 16px;
    }

    .team-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .team-meta b {
        text-align: left;
    }
}

@media (max-width: 560px) {
    .works-section {
        padding-top: 64px;
        padding-bottom: 70px;
    }

    .works-section .section-index {
        margin-bottom: 30px;
    }

    .works-head {
        gap: 14px;
        margin-bottom: 24px;
    }

    .works-head h2 {
        font-size: clamp(40px, 11.5vw, 58px);
    }

    .works-head p {
        font-size: 14px;
        line-height: 1.7;
    }

    .works-grid {
        gap: 7px;
    }

    .work-card,
    .work-card:nth-child(1),
    .work-card:nth-child(4) {
        min-height: 195px;
        border-radius: 16px;
    }

    .work-card:nth-child(1),
    .work-card:nth-child(4) {
        min-height: 245px;
    }

    .work-caption span {
        font-size: 8px;
    }

    .work-caption strong {
        font-size: 18px;
    }

    .team-placeholder-visual {
        min-height: 330px;
        padding-top: 38px;
        padding-bottom: 28px;
    }

    .team-placeholder-visual strong {
        font-size: clamp(52px, 15vw, 72px);
    }

    .team-copy {
        padding-top: 38px;
        padding-bottom: 54px;
    }

    .team-copy h2 {
        margin-top: 22px;
        font-size: clamp(38px, 10.8vw, 56px);
    }

    .team-copy > p {
        font-size: 15px;
    }
}

@media (max-width: 380px) {
    .works-grid {
        grid-template-columns: 1fr;
    }

    .work-card,
    .work-card:nth-child(1),
    .work-card:nth-child(4) {
        min-height: 230px;
    }

    .team-placeholder-visual {
        min-height: 300px;
    }
}

/* =========================================================
   15. ЕДИНАЯ ТИПОГРАФИКА И КОНТАКТЫ
   ---------------------------------------------------------
   Единая шкала размеров для всего сайта.
   Все интерактивные контакты имеют одинаковую визуальную
   механику на desktop и mobile.
   ========================================================= */

:root {
    --type-ui: 11px;
    --type-ui-strong: 12px;
    --type-body: 15px;
    --type-lead: 18px;
    --type-section: clamp(54px, 5.15vw, 76px);
    --type-subheading: clamp(34px, 3.25vw, 48px);
    --type-card: clamp(21px, 1.7vw, 27px);
    --type-stat: 28px;
    --type-small: 13px;
}

/* Служебный текст */
.section-index,
.tiny-label,
.hero-meta,
.hero-corner,
.hero-fact span,
.hero-pet-card span,
.hero-opening,
.service-category-title span,
.service-category-number,
.service-footnote,
.media-stamp,
.tag-cloud span,
.footer-bottom,
.contact-item > span,
.gift-top,
.gift-bottom {
    font-size: var(--type-ui);
}

/* Базовый текст — один размер по всему сайту */
body {
    font-size: var(--type-body);
}

.intro-copy p,
.principle p,
.daycare-copy > p,
.gift-copy p,
.contacts-head p,
.service-panel-head p,
.services-head-copy > p,
.team-copy > p,
.works-head p {
    font-size: var(--type-body);
}

/* Все основные заголовки секций */
.intro-title h2,
.services-head h2,
.contacts h2,
.daycare-copy h2,
.gift-copy h2,
.works-head h2,
.team-copy h2 {
    font-size: var(--type-section);
    line-height: .92;
    letter-spacing: -.055em;
}

/* Вторичный display-заголовок */
.philosophy-content h2 {
    font-size: clamp(50px, 4.9vw, 72px);
    line-height: .92;
    letter-spacing: -.06em;
}

.service-panel-head h3,
.modal-window h2,
.modal-window h3,
.form-success h3 {
    font-size: var(--type-subheading);
    line-height: .96;
}

/* Вводный акцент */
.intro-copy .lead {
    font-size: var(--type-lead);
    line-height: 1.55;
}

/* Карточки услуг */
.service-category-title h4 {
    font-size: var(--type-card);
    line-height: 1.05;
}

.service-option,
.service-option-name {
    font-size: var(--type-small) !important;
    line-height: 1.35;
}

.service-option-price {
    font-size: 12px !important;
    line-height: 1.2;
}

/* Живые работы и команда */
.work-caption strong {
    font-size: clamp(19px, 1.55vw, 25px);
    line-height: 1;
}

.team-placeholder-visual strong {
    font-size: clamp(58px, 6.15vw, 92px);
    line-height: .86;
}

.team-copy > p {
    line-height: 1.7;
}

/* =========================================================
   CONTACT ACTIONS
   ========================================================= */

.contact-details {
    padding: clamp(22px, 2vw, 30px);
}

.contact-item {
    padding: 20px 0;
}

.contact-item > span {
    margin-bottom: 9px;
    font-size: 10px !important;
    line-height: 1.25;
    letter-spacing: .14em;
}

.contact-item > strong {
    display: block;
    font-family: var(--sans);
    font-size: 17px !important;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0;
}

.contact-item > .contact-action {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 66px;
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid rgba(16, 19, 15, .10);
    border-radius: 16px;
    background: rgba(251, 250, 246, .38);
    color: var(--ink);
    text-transform: none;
    text-decoration: none;
    letter-spacing: 0;
    box-shadow: 0 8px 24px rgba(16, 19, 15, .03);
    transition: transform .35s var(--ease),
    background-color .35s var(--ease),
    border-color .35s var(--ease),
    box-shadow .35s var(--ease);
}

.contact-item > .contact-action:hover {
    transform: translateY(-2px);
    background: rgba(251, 250, 246, .72);
    border-color: rgba(16, 19, 15, .17);
    box-shadow: 0 12px 28px rgba(16, 19, 15, .07);
}

.contact-action-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(156, 175, 127, .14);
    color: var(--sage-deep);
}

.contact-action-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.contact-action-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    text-align: left;
}

.contact-action-copy strong {
    display: block;
    overflow-wrap: anywhere;
    font-family: var(--sans);
    font-size: 14px !important;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
}

.contact-action-copy small {
    display: block;
    color: #7d8279;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.contact-action-arrow {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(16, 19, 15, .11);
    border-radius: 50%;
    color: #68705f;
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1;
    transition: transform .35s var(--ease),
    background-color .35s var(--ease),
    color .35s var(--ease);
}

.contact-item > .contact-action:hover .contact-action-arrow {
    transform: translate(2px, -2px);
    background: var(--sage);
    color: #fff;
}

@media (max-width: 1100px) {
    :root {
        --type-body: 15px;
        --type-lead: 17px;
        --type-section: clamp(50px, 5.8vw, 70px);
        --type-subheading: clamp(32px, 4vw, 46px);
        --type-card: clamp(20px, 2.4vw, 26px);
    }
}

@media (max-width: 820px) {
    :root {
        --type-ui: 10px;
        --type-ui-strong: 12px;
        --type-body: 15px;
        --type-lead: 17px;
        --type-section: clamp(44px, 10.5vw, 58px);
        --type-subheading: clamp(31px, 8.3vw, 42px);
        --type-card: clamp(20px, 5.4vw, 25px);
        --type-stat: 24px;
        --type-small: 13px;
    }

    .intro-title h2,
    .services-head h2,
    .contacts h2,
    .daycare-copy h2,
    .gift-copy h2,
    .works-head h2,
    .team-copy h2 {
        font-size: var(--type-section);
    }

    .philosophy-content h2 {
        font-size: clamp(40px, 9.5vw, 54px);
    }

    .team-placeholder-visual strong {
        font-size: clamp(52px, 14vw, 76px);
    }

    .contact-details {
        padding: 20px;
    }

    .contact-item > .contact-action {
        grid-template-columns: 40px minmax(0, 1fr) 22px;
        gap: 11px;
        min-height: 64px;
        padding: 10px 12px;
        border-radius: 14px;
    }

    .contact-action-icon {
        width: 40px;
        height: 40px;
        border-radius: 11px;
    }

    .contact-action-copy strong {
        font-size: 13px !important;
    }

    .contact-action-copy small {
        font-size: 9px;
    }
}

@media (max-width: 560px) {
    :root {
        --type-ui: 10px;
        --type-ui-strong: 12px;
        --type-body: 15px;
        --type-lead: 17px;
        --type-section: clamp(40px, 10.8vw, 54px);
        --type-subheading: clamp(30px, 8.8vw, 40px);
        --type-card: 20px;
        --type-stat: 22px;
        --type-small: 13px;
    }

    .intro-copy .lead {
        font-size: var(--type-lead);
    }

    .service-option,
    .service-option-name {
        font-size: var(--type-small) !important;
    }

    .team-placeholder-visual strong {
        font-size: clamp(48px, 14.5vw, 68px);
    }

    .team-copy h2 {
        font-size: var(--type-section);
    }

    .team-copy > p,
    .works-head p {
        font-size: var(--type-body);
    }

    .contact-details {
        padding: 18px;
        border-radius: 18px;
    }

    .contact-item {
        padding: 17px 0;
    }

    .contact-item > span {
        margin-bottom: 8px;
        font-size: 9px !important;
    }

    .contact-item > strong {
        font-size: 16px !important;
    }

    .contact-item > .contact-action {
        grid-template-columns: 38px minmax(0, 1fr) 20px;
        gap: 9px;
        min-height: 60px;
        margin-top: 10px;
        padding: 9px 10px;
        border-radius: 13px;
    }

    .contact-action-icon {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }

    .contact-action-icon svg {
        width: 18px;
        height: 18px;
    }

    .contact-action-copy strong {
        font-size: 12px !important;
    }

    .contact-action-copy small {
        font-size: 8px;
        line-height: 1.35;
    }

    .contact-action-arrow {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }
}

@media (max-width: 380px) {
    .contact-item > .contact-action {
        grid-template-columns: 36px minmax(0, 1fr) 18px;
        gap: 8px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .contact-action-icon {
        width: 36px;
        height: 36px;
    }

    .contact-action-copy strong {
        font-size: 11.5px !important;
    }

    .contact-action-copy small {
        font-size: 7.5px;
    }
}


/* =========================================================
   16. ФИНАЛЬНАЯ ГЕОМЕТРИЯ СЕКЦИЙ И МОБИЛЬНОГО SHELL
   ---------------------------------------------------------
   1) Внутренние поля всех основных мобильных блоков совпадают
      с шириной верхнего фиксированного меню.
   2) У .frame не остаётся конфликтующих margin в поздних media.
   3) Убираются визуальные "ступеньки" и тонкие линии от
      внешних отступов/нестыковок фона.
   ========================================================= */

/* Desktop/tablet: базовая геометрия остаётся без изменений. */
.frame {
    width: auto;
    max-width: none;
    margin-left: var(--gutter);
    margin-right: var(--gutter);
    min-width: 0;
}

/* Не добавляем отдельные внешние полосы между полноширинными секциями. */
.intro,
.services.section,
.works-section,
.team-section,
.daycare.section,
.contacts.section,
.footer {
    margin-top: 0;
    margin-bottom: 0;
}

/* У frame-секций не должно быть дополнительных внешних теней,
   создающих ощущение отдельной "карточки" между фонами. */
.philosophy.frame,
.gift.frame {
    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width: 920px) {
    :root {
        --gutter: 14px;
    }

    .header {
        left: 14px;
        right: 14px;
    }

    .section {
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }

    .frame,
    .philosophy.frame,
    .gift.frame {
        width: calc(100% - (2 * var(--gutter)));
        max-width: none;
        margin-left: var(--gutter);
        margin-right: var(--gutter);
    }

    /* Полноширинные тёмные/светлые секции идут вплотную друг к другу:
       без 1px gaps и без случайных промежуточных цветов. */
    .works-section,
    .team-section,
    .daycare.section,
    .contacts.section,
    .services.section,
    .intro.section {
        border-top: 0;
        border-bottom: 0;
    }
}

@media (max-width: 600px) {
    /* В этом breakpoint верхнее меню имеет 10px боковой отступ —
       все секции и frame-блоки должны иметь тот же shell. */
    :root {
        --gutter: 10px;
        --mobile-gutter: 10px;
    }

    .header {
        left: 10px;
        right: 10px;
    }

    .section {
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }

    .frame,
    .philosophy.frame,
    .gift.frame {
        width: calc(100% - 20px);
        max-width: none;
        margin-left: 10px;
        margin-right: 10px;
    }

    /* Внутри frame не должно быть дополнительных горизонтальных
       отступов, отличающихся от общей мобильной сетки. */
    .philosophy-content,
    .gift-copy {
        box-sizing: border-box;
    }

    /* Убираем тонкие визуальные швы между секциями. */
    .works-section,
    .team-section,
    .daycare.section,
    .contacts.section,
    .services.section,
    .intro.section {
        border-top: 0 !important;
        border-bottom: 0 !important;
        box-shadow: none;
    }
}


/* =========================================================
   ПОДАРОЧНЫЙ СЕРТИФИКАТ — УСЛОВИЯ
   Компактный триггер в секции + отдельная читаемая модалка.
   ========================================================= */
.gift-copy > p {
    margin-bottom: 20px;
}

.gift-conditions-link {
    width: min(100%, 430px);
    min-height: 58px;
    padding: 8px 10px 8px 8px;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 11px;
    margin: 0 0 24px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    background: rgba(255, 255, 255, .035);
    color: #fff;
    text-align: left;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
    transition: transform .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}

.gift-conditions-link:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, .06);
    border-color: rgba(194, 206, 176, .24);
    box-shadow: 0 16px 34px rgba(0, 0, 0, .16);
}

.gift-conditions-link:focus-visible {
    outline: 2px solid var(--sage-soft);
    outline-offset: 3px;
}

.gift-conditions-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(194, 206, 176, .18);
    border-radius: 50%;
    background: rgba(156, 175, 127, .10);
    color: var(--sage-soft);
    transition: transform .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease);
}

.gift-conditions-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
}

.gift-conditions-link:hover .gift-conditions-icon {
    transform: scale(1.04);
    background: rgba(156, 175, 127, .15);
    border-color: rgba(194, 206, 176, .32);
}

.gift-conditions-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.gift-conditions-copy strong {
    color: rgba(255, 255, 255, .92);
    font: 700 12px/1.25 var(--sans);
    letter-spacing: .02em;
}

.gift-conditions-copy small {
    color: rgba(255, 255, 255, .43);
    font: 500 10px/1.3 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.gift-conditions-arrow {
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    color: rgba(255, 255, 255, .55);
    font: 400 13px/1 var(--sans);
    transition: transform .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}

.gift-conditions-link:hover .gift-conditions-arrow {
    transform: translate(2px, -2px);
    background: var(--sage);
    border-color: var(--sage);
    color: #fff;
}

.gift-rules-modal-window {
    width: min(780px, calc(100vw - 34px));
    max-height: min(760px, calc(100svh - 34px));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.gift-rules-modal-window h2 {
    margin-bottom: 13px;
}

.gift-rules-intro {
    max-width: 540px;
    margin: 0 0 28px !important;
}

.gift-rules-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.gift-rules-list li {
    min-width: 0;
    display: grid;
    grid-template-columns: 31px minmax(0, 1fr);
    gap: 11px;
    padding: 15px 14px 16px;
    border: 1px solid rgba(16, 19, 15, .08);
    border-radius: 15px;
    background: rgba(255, 255, 255, .30);
}

.gift-rule-number {
    padding-top: 3px;
    color: var(--sage-deep);
    font: 700 10px/1 var(--sans);
    letter-spacing: .12em;
}

.gift-rules-list h3 {
    margin: 0 0 5px;
    color: var(--ink);
    font: 700 14px/1.2 var(--sans);
    letter-spacing: -.02em;
}

.gift-rules-list p {
    margin: 0;
    color: #696f67;
    font: 400 12px/1.65 var(--sans);
}

.gift-rules-list p strong {
    color: var(--ink);
    font-weight: 700;
}

@media (max-width: 820px) {
    .gift-rules-modal-window {
        width: min(680px, calc(100vw - 28px));
        max-height: calc(100svh - 28px);
    }

    .gift-rules-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .gift-conditions-link {
        width: 100%;
        min-height: 56px;
        margin-bottom: 20px;
        grid-template-columns: 38px minmax(0, 1fr) 25px;
        gap: 9px;
        padding: 7px 8px 7px 7px;
        border-radius: 14px;
    }

    .gift-conditions-icon {
        width: 38px;
        height: 38px;
    }

    .gift-conditions-copy strong {
        font-size: 11px;
    }

    .gift-conditions-copy small {
        font-size: 9px;
    }

    .gift-conditions-arrow {
        width: 25px;
        height: 25px;
        font-size: 12px;
    }

    .gift-rules-modal-window {
        width: calc(100vw - 20px);
        max-height: calc(100svh - 20px);
        padding: 25px 16px 18px;
        border-radius: 17px;
    }

    .gift-rules-modal-window h2 {
        margin-top: 13px;
        margin-bottom: 11px;
    }

    .gift-rules-intro {
        font-size: 13px !important;
        line-height: 1.65 !important;
        margin-bottom: 20px !important;
    }

    .gift-rules-list {
        gap: 8px;
    }

    .gift-rules-list li {
        grid-template-columns: 27px minmax(0, 1fr);
        gap: 9px;
        padding: 13px 12px 14px;
        border-radius: 13px;
    }

    .gift-rule-number {
        font-size: 9px;
    }

    .gift-rules-list h3 {
        margin-bottom: 4px;
        font-size: 13px;
    }

    .gift-rules-list p {
        font-size: 12px;
        line-height: 1.58;
    }
}

@media (max-width: 380px) {
    .gift-rules-modal-window {
        padding-left: 14px;
        padding-right: 14px;
    }

    .gift-rules-list li {
        padding-left: 11px;
        padding-right: 11px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gift-conditions-link,
    .gift-conditions-icon,
    .gift-conditions-arrow {
        transition: none !important;
    }
}




/* =========================================================
   COOKIE POLICY MODAL — FINAL OVERRIDES
   ========================================================= */
.legal-modal-window {
    width: min(760px, calc(100vw - 40px));
    max-height: min(820px, calc(100svh - 56px));
    padding: 46px 48px 34px;
    overflow-y: auto;
    overscroll-behavior: contain;

    background: var(--paper);
    border-radius: 24px;

    box-shadow: 0 34px 110px rgba(0, 0, 0, .30);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.legal-modal-window::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* Верхняя часть */

.legal-modal-window .legal-modal-header {
    padding: 0 44px 30px 0;
    margin: 0;
    border-bottom: 1px solid rgba(16, 19, 15, .10);
}

.legal-modal-window .legal-kicker {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 17px;
    color: var(--sage-deep);
    font: 700 9px/1 var(--sans);
    letter-spacing: .15em;
    text-transform: uppercase;
}

.legal-modal-window .legal-kicker::before {
    content: "";
    width: 25px;
    height: 1px;
    flex: 0 0 25px;
    background: var(--sage);
}

.legal-modal-window .legal-modal-title {
    max-width: 620px;
    margin: 0;
    color: var(--ink);
    font: 600 clamp(48px, 6vw, 72px)/.88 var(--serif);
    letter-spacing: -.055em;
}

.legal-modal-window .legal-modal-title em {
    color: var(--sage-deep);
    font-style: italic;
}

.legal-modal-window .legal-intro {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin: 20px 0 0;
}

.legal-modal-window .legal-meta {
    padding: 7px 10px;
    border: 1px solid rgba(16, 19, 15, .08);
    border-radius: 999px;
    background: rgba(255, 255, 255, .32);
    color: #70776e;
    font: 700 8px/1.15 var(--sans);
    letter-spacing: .09em;
    text-transform: uppercase;
}

.legal-modal-window .legal-date {
    color: #92978f;
    font: 400 10px/1.4 var(--sans);
}

/* Содержание */

.legal-modal-window .legal-modal-content {
    margin: 0;
    border: 0;
}

.legal-modal-window .legal-section {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 20px;
    padding: 25px 0 26px;
    border: 0;
    border-bottom: 1px solid rgba(16, 19, 15, .075);
}

.legal-modal-window .legal-section:last-child {
    border-bottom: 0;
    padding-bottom: 8px;
}

.legal-modal-window .legal-section-number {
    padding: 4px 0 0;
    color: var(--sage-deep);
    font: 700 9px/1 var(--sans);
    letter-spacing: .13em;
}

.legal-modal-window .legal-section-body {
    min-width: 0;
    max-width: 590px;
}

.legal-modal-window .legal-section-body h3 {
    margin: 0 0 10px;
    color: var(--ink);
    font: 600 clamp(23px, 2.6vw, 30px)/1.02 var(--serif);
    letter-spacing: -.04em;
}

.legal-modal-window .legal-section-body p {
    max-width: 590px;
    margin: 0 0 10px;
    color: #596058;
    font: 400 13px/1.68 var(--sans);
    letter-spacing: 0;
}

.legal-modal-window .legal-section-body p:last-child {
    margin-bottom: 0;
}

.legal-modal-window .legal-section-body strong {
    color: var(--ink);
    font-weight: 700;
}

/* Контакты */

.legal-modal-window .legal-contacts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 18px;
}

.legal-modal-window .legal-contact {
    display: grid;
    gap: 5px;
    padding: 13px 0;
}

.legal-modal-window .legal-contact:nth-child(even) {
    padding-left: 18px;
    border-left: 1px solid rgba(16, 19, 15, .075);
}

.legal-modal-window .legal-contact-label {
    color: #969b94;
    font: 700 7px/1.2 var(--sans);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.legal-modal-window .legal-contact-value {
    color: var(--ink);
    font: 500 12px/1.45 var(--sans);
    overflow-wrap: anywhere;
}

.legal-modal-window .legal-contact a {
    color: var(--sage-deep);
}

/* Нижняя подпись */

.legal-modal-window .legal-modal-note {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding-top: 18px;
    margin-top: 4px;
    border-top: 1px solid rgba(16, 19, 15, .075);
    color: #969b94;
    font: 400 9px/1.45 var(--sans);
}

/* Закрытие */

.legal-modal-window .modal-close {
    z-index: 5;
}

/* Планшет */

@media (max-width: 700px) {
    .legal-modal-window {
        width: calc(100vw - 28px);
        max-height: calc(100svh - 28px);
        padding: 34px 26px 25px;
        border-radius: 20px;
    }

    .legal-modal-window .legal-modal-header {
        padding-right: 36px;
        padding-bottom: 25px;
    }

    .legal-modal-window .legal-modal-title {
        font-size: clamp(43px, 10vw, 58px);
    }

    .legal-modal-window .legal-section {
        grid-template-columns: 34px minmax(0, 1fr);
        column-gap: 14px;
        padding: 21px 0 22px;
    }

    .legal-modal-window .legal-section-body h3 {
        font-size: 25px;
    }

    .legal-modal-window .legal-section-body p {
        font-size: 13px;
        line-height: 1.7;
    }
}

/* Телефон */

@media (max-width: 480px) {
    .legal-modal-window {
        width: calc(100vw - 20px);
        max-height: calc(100svh - 20px);
        padding: 28px 20px 20px;
        border-radius: 18px;
    }

    .legal-modal-window .legal-modal-header {
        padding-right: 32px;
        padding-bottom: 22px;
    }

    .legal-modal-window .legal-kicker {
        margin-bottom: 15px;
        font-size: 8px;
    }

    .legal-modal-window .legal-modal-title {
        font-size: clamp(40px, 12vw, 52px);
        line-height: .9;
    }

    .legal-modal-window .legal-intro {
        gap: 5px;
        margin-top: 17px;
    }

    .legal-modal-window .legal-meta {
        padding: 6px 8px;
        font-size: 7px;
    }

    .legal-modal-window .legal-date {
        width: 100%;
        margin-top: 2px;
        font-size: 9px;
    }

    .legal-modal-window .legal-section {
        display: block;
        padding: 20px 0 21px;
    }

    .legal-modal-window .legal-section-number {
        margin-bottom: 9px;
        padding: 0;
    }

    .legal-modal-window .legal-section-body h3 {
        margin-bottom: 9px;
        font-size: 24px;
        line-height: 1.02;
    }

    .legal-modal-window .legal-section-body p {
        font-size: 13px;
        line-height: 1.68;
    }

    .legal-modal-window .legal-contacts {
        grid-template-columns: 1fr;
        margin-top: 15px;
    }

    .legal-modal-window .legal-contact {
        padding: 12px 0;
    }

    .legal-modal-window .legal-contact:nth-child(even) {
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(16, 19, 15, .075);
    }

    .legal-modal-window .legal-modal-note {
        display: block;
        padding-top: 16px;
        font-size: 8px;
    }

    .legal-modal-window .legal-modal-note span {
        display: block;
    }

    .legal-modal-window .legal-modal-note span + span {
        margin-top: 6px;
    }
}

/* =========================================================
   КАТАЛОГ УСЛУГ — ЛОКАЛЬНЫЕ ДАННЫЕ
   ========================================================= */
.service-category-description {
    margin: 14px 0 0;
    color: #656a62;
    font-size: 13px;
    line-height: 1.6;
}

.service-category-recommended {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(16, 19, 15, .07);
}

.service-category-recommended > span,
.service-detail-label {
    display: block;
    margin-bottom: 5px;
    color: var(--sage-deep);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.service-category-recommended p {
    margin: 0;
    color: #757a71;
    font-size: 11px;
    line-height: 1.55;
}

.service-included {
    margin-top: 13px;
}

.service-included-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.service-included-list span {
    padding: 6px 8px;
    border: 1px solid rgba(16, 19, 15, .08);
    border-radius: 999px;
    background: rgba(255, 255, 255, .46);
    color: #62685f;
    font-size: 10px;
    line-height: 1.2;
}

.services-extras {
    margin-top: clamp(46px, 6vw, 78px);
    padding-top: clamp(28px, 4vw, 44px);
    border-top: 1px solid rgba(16, 19, 15, .10);
}

.services-extras-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .58fr);
    gap: 32px;
    align-items: end;
    margin-bottom: 20px;
}

.services-extras-head h3 {
    margin: 9px 0 0;
    font: 500 clamp(34px, 3.6vw, 54px)/.93 var(--display);
    letter-spacing: -.045em;
}

.services-extras-head h3 em {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 500;
    color: var(--sage-deep);
}

.services-extras-head p {
    margin: 0;
    max-width: 390px;
    justify-self: end;
    color: #6e726a;
    font-size: var(--type-body);
    line-height: 1.65;
}

.services-extras-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.service-extra-card {
    min-width: 0;
    padding: 17px 17px 16px;
    border: 1px solid rgba(16, 19, 15, .09);
    border-radius: 18px;
    background: rgba(251, 250, 246, .54);
    transition: transform 320ms var(--ease), background 320ms var(--ease), border-color 320ms var(--ease), box-shadow 320ms var(--ease);
}

.service-extra-card:hover {
    transform: translateY(-2px);
    border-color: rgba(115, 134, 96, .22);
    background: rgba(251, 250, 246, .76);
    box-shadow: 0 14px 28px rgba(16, 19, 15, .055);
}

.service-extra-card-top {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 9px;
    align-items: start;
}

.service-extra-index {
    color: var(--sage-deep);
    font-size: 9px;
    letter-spacing: .14em;
}

.service-extra-card strong {
    min-width: 0;
    font-size: 14px;
    line-height: 1.35;
}

.service-extra-price {
    white-space: nowrap;
    color: var(--sage-deep);
    font-size: 12px;
    font-weight: 800;
}

.service-extra-card p {
    margin: 12px 0 0 35px;
    color: #72776e;
    font-size: 11px;
    line-height: 1.55;
}

@media (max-width: 1040px) {
    .services-extras-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .services-extras-head {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .services-extras-head p {
        justify-self: start;
    }

    .services-extras-grid {
        grid-template-columns: 1fr;
    }

    .service-category-description {
        font-size: 12px;
    }

    .service-included-list span {
        font-size: 9px;
        padding: 5px 7px;
    }

    .service-extra-card-top {
        grid-template-columns: 23px minmax(0, 1fr);
    }

    .service-extra-price {
        grid-column: 2;
        justify-self: start;
        margin-top: 4px;
    }

    .service-extra-card p {
        margin-left: 31px;
    }
}



/* =========================================================
   КАРТОЧКИ УСЛУГ — ЧИТАЕМАЯ ТИПОГРАФИКА И РАСКРЫВАЕМЫЕ ДЕТАЛИ
   ========================================================= */
.service-option {
    font-size: 15px !important;
    line-height: 1.35;
}

.service-option-name {
    font-size: 15px !important;
    line-height: 1.35;
    font-weight: 650;
}

.service-option-price {
    font-size: 14px !important;
    line-height: 1.25;
    font-weight: 750;
    white-space: nowrap;
}

.service-details,
.service-extra-details {
    margin-top: 14px;
    border-top: 1px solid rgba(16, 19, 15, .08);
}

.service-details > summary,
.service-extra-details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0 4px;
    list-style: none;
    cursor: pointer;
    color: var(--sage-deep);
    font-size: 14px;
    font-weight: 700;
}

.service-details > summary::-webkit-details-marker,
.service-extra-details > summary::-webkit-details-marker {
    display: none;
}

.service-details > summary span,
.service-extra-details > summary span {
    display: inline-grid;
    place-items: center;
    width: 25px;
    height: 25px;
    border: 1px solid rgba(115, 134, 96, .22);
    border-radius: 50%;
    font-size: 17px;
    font-weight: 400;
    line-height: 1;
    transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}

.service-details[open] > summary span,
.service-extra-details[open] > summary span {
    transform: rotate(45deg);
    background: var(--ink);
    color: #fff;
}

.service-details .service-category-description,
.service-details .service-category-recommended,
.service-details .service-included {
    animation: serviceDetailsIn .35s var(--ease);
}

.service-category-description {
    font-size: var(--type-body);
    line-height: 1.65;
}

.service-category-recommended p {
    font-size: var(--type-body);
    line-height: 1.6;
}

.service-included-list span {
    font-size: 13px;
}

.service-extra-details {
    margin: 12px 0 0 35px;
    border-top: 0;
}

.service-extra-details > summary {
    padding: 0;
    font-size: 13px;
}

.service-extra-details p {
    margin: 10px 0 0;
    font-size: var(--type-body);
    line-height: 1.6;
    color: #72776e;
}

@keyframes serviceDetailsIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 820px) {
    .service-option,
    .service-option-name {
        font-size: 14px !important;
    }

    .service-option-price {
        font-size: 13px !important;
    }

    .service-details > summary,
    .service-extra-details > summary {
        font-size: 13px;
    }

    .service-category-description,
    .service-category-recommended p,
    .service-extra-details p {
        font-size: var(--type-body);
    }

    .service-included-list span {
        font-size: 12px;
    }
}

/* =========================================================
   ПЛАВНОЕ РАСКРЫТИЕ ПОДРОБНОСТЕЙ
   ========================================================= */
.service-details-content {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height .36s var(--ease), opacity .28s ease;
    will-change: height, opacity;
}

.service-details-content > :first-child {
    margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
    .service-details-content {
        transition: none;
    }
}




/* =========================================================
   SERVICES / PET SWITCHER — ФИНАЛЬНАЯ ВИЗУАЛЬНАЯ НАСТРОЙКА
   Компактнее по высоте, заметнее как интерактивный переключатель.
   ========================================================= */

.services-head > .pet-stage.pet-stage-compact {
    position: relative !important;
    height: clamp(330px, 24vw, 390px) !important;
    min-height: 330px !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background:
            linear-gradient(145deg, rgba(16, 20, 16, .06), rgba(16, 20, 16, 0)) !important;
    box-shadow: 0 22px 60px rgba(24, 30, 23, .09) !important;
    isolation: isolate !important;
}

.pet-stage-compact::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border: 1px solid rgba(16, 19, 15, .08);
    border-radius: inherit;
}

.pet-switcher-hint {
    position: absolute;
    z-index: 5;
    top: 20px;
    left: 20px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px 8px 12px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    background: rgba(7, 9, 8, .42);
    color: rgba(255, 255, 255, .86);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
    pointer-events: none;
}

.pet-switcher-hint span {
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.pet-switcher-hint i {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--sage-soft);
    font-size: 8px;
    line-height: 1;
    font-style: normal;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.pet-switcher-hint i::after {
    content: "↗";
    font-size: 11px;
    line-height: 1;
    transform: translateY(-1px);
}

.services-head > .pet-stage.pet-stage-compact .pet-card,
.services-head > .pet-stage.pet-stage-compact .pet-card.active {
    position: relative !important;
    height: 100% !important;
    min-height: 0 !important;
    flex: 1 1 0 !important;
    width: auto !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 22px !important;
    background: #101410 !important;
    box-shadow: 0 12px 32px rgba(7, 9, 8, .12) !important;
    cursor: pointer !important;
    transition:
            flex .72s var(--ease),
            transform .42s var(--ease),
            filter .55s var(--ease),
            border-color .42s var(--ease),
            box-shadow .42s var(--ease) !important;
    will-change: flex, transform;
}

.services-head > .pet-stage.pet-stage-compact .pet-card:not(.active) {
    filter: saturate(.52) brightness(.74) !important;
}

.services-head > .pet-stage.pet-stage-compact .pet-card.active {
    flex: 1.16 1 0 !important;
    border-color: rgba(156, 175, 127, .45) !important;
    box-shadow:
            0 18px 42px rgba(7, 9, 8, .20),
            0 0 0 1px rgba(156, 175, 127, .10) inset !important;
    filter: saturate(.92) brightness(.90) !important;
}

.services-head > .pet-stage.pet-stage-compact .pet-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(255, 255, 255, .24) !important;
    box-shadow:
            0 18px 42px rgba(7, 9, 8, .18),
            0 0 0 1px rgba(255, 255, 255, .05) inset !important;
    filter: saturate(.72) brightness(.81) !important;
}

.services-head > .pet-stage.pet-stage-compact .pet-card.active:hover {
    filter: saturate(1) brightness(.94) !important;
    border-color: rgba(156, 175, 127, .62) !important;
}

.services-head > .pet-stage.pet-stage-compact .pet-card:focus-visible {
    outline: 2px solid var(--sage) !important;
    outline-offset: 3px !important;
}

.services-head > .pet-stage.pet-stage-compact .pet-card video {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
}

.services-head > .pet-stage.pet-stage-compact .pet-overlay {
    background:
            linear-gradient(
                    180deg,
                    rgba(7, 9, 8, .06) 0%,
                    rgba(7, 9, 8, .02) 38%,
                    rgba(7, 9, 8, .82) 100%
            ) !important;
    transition: opacity .45s var(--ease) !important;
}

.services-head > .pet-stage.pet-stage-compact .pet-card:not(.active) .pet-overlay {
    opacity: .92;
}

.services-head > .pet-stage.pet-stage-compact .pet-card:hover .pet-overlay {
    opacity: .72;
}

.services-head > .pet-stage.pet-stage-compact .pet-info {
    left: 17px !important;
    right: 17px !important;
    bottom: 16px !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

.services-head > .pet-stage.pet-stage-compact .pet-info strong {
    font-size: clamp(30px, 3vw, 44px) !important;
    line-height: .9 !important;
    white-space: nowrap !important;
    text-shadow: 0 8px 22px rgba(0, 0, 0, .24);
}

.services-head > .pet-stage.pet-stage-compact .pet-info .ui-icon-paw {
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin: 0 0 2px auto !important;
    color: var(--sage) !important;
}

.pet-choice-state {
    position: absolute;
    z-index: 4;
    right: 15px;
    top: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 0 9px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    background: rgba(7, 9, 8, .34);
    color: rgba(255, 255, 255, .76);
    font-size: 8px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
    transition:
            opacity .35s var(--ease),
            transform .35s var(--ease),
            background .35s var(--ease),
            border-color .35s var(--ease),
            color .35s var(--ease);
}

.pet-choice-state-action {
    opacity: .88;
}

.pet-choice-state-selected {
    opacity: 0;
    transform: translateY(-4px);
}

.pet-card:not(.active):hover .pet-choice-state-action {
    opacity: 0;
    transform: translateY(-4px);
}

.pet-card:not(.active):hover .pet-choice-state-selected {
    opacity: .95;
    transform: translateY(0);
    background: rgba(156, 175, 127, .14);
    border-color: rgba(156, 175, 127, .30);
    color: #fff;
}

.pet-card.active .pet-choice-state-action {
    opacity: 0;
    transform: translateY(4px);
}

.pet-card.active .pet-choice-state-selected {
    opacity: .96;
    transform: translateY(0);
    background: rgba(156, 175, 127, .16);
    border-color: rgba(156, 175, 127, .34);
    color: #fff;
}

@media (max-width: 1200px) and (min-width: 921px) {
    .services-head > .pet-stage.pet-stage-compact {
        height: 320px !important;
        min-height: 320px !important;
    }

    .services-head > .pet-stage.pet-stage-compact .pet-info strong {
        font-size: 34px !important;
    }
}

@media (max-width: 920px) {
    .services-head > .pet-stage.pet-stage-compact {
        height: 300px !important;
        min-height: 300px !important;
        padding: 8px !important;
        border-radius: 23px !important;
    }

    .pet-switcher-hint {
        top: 16px;
        left: 16px;
    }

    .services-head > .pet-stage.pet-stage-compact .pet-card,
    .services-head > .pet-stage.pet-stage-compact .pet-card.active {
        border-radius: 18px !important;
    }
}

@media (max-width: 600px) {
    .services-head > .pet-stage.pet-stage-compact {
        height: clamp(210px, 58vw, 250px) !important;
        min-height: 210px !important;
        gap: 7px !important;
        padding: 7px !important;
        border-radius: 20px !important;
    }

    .pet-switcher-hint {
        top: 14px;
        left: 14px;
        padding: 7px 9px 7px 10px;
        gap: 7px;
    }

    .pet-switcher-hint span {
        font-size: 8px;
    }

    .pet-switcher-hint i {
        font-size: 7px;
    }

    .services-head > .pet-stage.pet-stage-compact .pet-card,
    .services-head > .pet-stage.pet-stage-compact .pet-card.active {
        border-radius: 16px !important;
    }

    .services-head > .pet-stage.pet-stage-compact .pet-card.active {
        flex: 1.16 1 0 !important;
    }

    .services-head > .pet-stage.pet-stage-compact .pet-info {
        left: 12px !important;
        right: 12px !important;
        bottom: 11px !important;
        gap: 7px !important;
    }

    .services-head > .pet-stage.pet-stage-compact .pet-info strong {
        font-size: clamp(24px, 8vw, 32px) !important;
    }

    .services-head > .pet-stage.pet-stage-compact .pet-info .ui-icon-paw {
        flex-basis: 16px !important;
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        margin-bottom: 1px !important;
    }

    .pet-choice-state {
        top: 10px;
        right: 10px;
        min-height: 23px;
        padding: 0 7px;
        font-size: 7px;
        letter-spacing: .09em;
    }
}

@media (max-width: 380px) {
    .services-head > .pet-stage.pet-stage-compact {
        height: 200px !important;
        min-height: 200px !important;
    }

    .pet-switcher-hint {
        top: 11px;
        left: 11px;
    }

    .pet-switcher-hint i {
        display: none;
    }

    .services-head > .pet-stage.pet-stage-compact .pet-info strong {
        font-size: 24px !important;
    }
}

@media (hover: none), (pointer: coarse) {
    .services-head > .pet-stage.pet-stage-compact .pet-card:hover {
        transform: none !important;
    }

    .services-head > .pet-stage.pet-stage-compact .pet-card:not(.active) .pet-choice-state-action {
        opacity: .88;
        transform: none;
    }

    .services-head > .pet-stage.pet-stage-compact .pet-card:not(.active) .pet-choice-state-selected {
        opacity: 0;
        transform: translateY(-4px);
    }

    .services-head > .pet-stage.pet-stage-compact .pet-card.active .pet-choice-state-selected {
        opacity: .96;
        transform: translateY(0);
    }
}


/* =========================================================
   ФИНАЛЬНАЯ СЕТКА КАРТОЧЕК УСЛУГ
   Цена и время показываются только в строке конкретного варианта.
   Верхний динамический ценник и активное состояние вариантов больше не используются.
   ========================================================= */
.service-card-top {
    grid-template-columns: 27px minmax(0, 1fr);
}

.service-options {
    gap: 5px;
    margin-top: 18px;
    padding-top: 12px;
}

.service-option {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 44px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 12px;
}

.service-option-name {
    font-size: 15px !important;
    font-weight: 650;
    line-height: 1.35;
}

.service-option-price {
    font-size: 14px !important;
    font-weight: 750;
    color: var(--sage-deep);
    white-space: nowrap;
}

.service-option:hover {
    background: rgba(156, 175, 127, .09);
    border-color: rgba(115, 134, 96, .12);
}

@media (max-width: 820px) {
    .service-card-top {
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .service-option {
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 42px;
        padding: 8px 9px;
    }

    .service-option-name {
        font-size: 14px !important;
    }

    .service-option-price {
        font-size: 13px !important;
    }
}