/* kosmacheva beauty — тема поверх базовых стилей: палитра и логотип с её страницы */
@font-face{font-family:"Marck Script";src:url(../fonts/MarckScript-latin.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  color-scheme:light;
  /* палитра: Lavender Blush, Baby Pink, Almond Silk, Carbon Black */
  --p-blush:#fdedee;
  --p-pink:#ffadc6;
  --p-almond:#e3c5bb;
  --p-ink:#1e1e1f;
  /* роли: фон страницы, светлые листы, карточки на них, акцентный розовый */
  --c-page:#fff;
  --c-blush:var(--p-blush);
  --c-card:var(--p-almond);
  --c-pink:var(--p-pink);
  --c-chocolate:var(--p-ink);
  --c-cream:var(--p-blush);
  --c-wine:var(--p-pink);
  --c-sand:var(--c-card);
  --c-ink-60:color-mix(in srgb,var(--c-chocolate) 70%,transparent);
  --frame:4px solid var(--c-card);
  --f-script:"Marck Script","Snell Roundhand",cursive;
}

/* поверхности */
.surface-chocolate{--bg:var(--c-pink);--fg:var(--c-chocolate);--fg-muted:var(--c-ink-60);--line:var(--c-ink-15);--btn-bg:var(--c-chocolate);--btn-fg:var(--c-cream)}
.surface-wine{--bg:var(--c-pink);--fg:var(--c-chocolate);--fg-muted:color-mix(in srgb,var(--c-chocolate) 82%,transparent);--line:color-mix(in srgb,var(--c-chocolate) 28%,transparent);--btn-bg:var(--c-chocolate);--btn-fg:var(--c-cream)}
.surface-cream{--bg:var(--c-blush);--fg:var(--c-chocolate);--fg-muted:var(--c-ink-60);--line:var(--c-ink-15);--btn-bg:var(--c-chocolate);--btn-fg:var(--c-cream)}
::selection,.surface-cream ::selection,.surface-cream .surface-chocolate ::selection,.surface-cream .surface-wine ::selection{background:var(--c-chocolate);color:var(--c-pink)}

/* логотип */
.wordmark{display:inline-flex;align-items:baseline;font-family:var(--f-script);font-weight:400;font-size:var(--wm,24px);line-height:1;letter-spacing:0;text-transform:none;white-space:nowrap}
.wordmark svg{flex:none;align-self:flex-start;width:.42em;height:.42em;margin:.04em .05em 0}
.logo{aspect-ratio:1}
.surface-cream .sec-mark{color:var(--c-wine)}

/* шапка и меню */
.site-header .site-header__bar{background:color-mix(in srgb,var(--c-cream) 74%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-chocolate) 8%,transparent)}
.site-header .wordmark{--wm:21px;transition:font-size var(--t-slow) var(--ease)}
.nav__pill{background:color-mix(in srgb,var(--c-chocolate) 8%,transparent)}
.burger{background:var(--c-chocolate);color:var(--c-cream)}
.menu{background:var(--c-pink)}
@media (min-width:1024px){
  .site-header .site-header__bar{background:none;box-shadow:none}
  .site-header__logo,.site-header__nav,.site-header .header-actions{background:color-mix(in srgb,var(--c-cream) var(--glass,66%),transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-chocolate) 8%,transparent)}
  .site-header.is-light{--glass:74%}
  .site-header .wordmark{--wm:26px}
  .site-header.is-compact .wordmark{--wm:22px}
}
@media (max-width:1023px){
  .site-header.is-compact .wordmark{--wm:18px}
  body.menu-open .site-header.is-compact .wordmark{--wm:21px}
}

/* первый экран */
.hero__wordmark{--wm:clamp(34px,4.2vw,84px)}
.hero__lead{max-width:36ch}
@media (max-width:899px){
  .hero__video{aspect-ratio:1 / 1}
  .hero__text .t-hero+.t-lead{margin-top:-12px}
}
@media (min-width:600px) and (max-width:899px){.hero__video{aspect-ratio:auto;height:68svh}}

/* строка фактов и бегущая строка услуг */
.stats,.brands{color:var(--c-chocolate)}
.stats__item{color:var(--c-ink-60);border-color:var(--c-ink-15)}
.stats__item+.stats__item{border-left-color:var(--c-ink-15)}
.stats__link:hover{color:var(--c-chocolate)}
.brands__label{color:var(--c-ink-60)}
.brands__list{--gap:clamp(18px,1.8vw,36px)}
.brands__run{animation-duration:72s}
.brands__item{font-family:var(--f-display);font-size:clamp(20px,1.7vw,34px);line-height:1;text-transform:uppercase;white-space:nowrap}
.brands__sep{display:flex;color:var(--c-wine)}
.brands__sep svg{width:.5em;height:.5em}
@media (max-width:599px){.brands__run{animation-duration:56s}}

/* услуги */
.service-strip{background:var(--c-pink)}
.service-strip:hover,.service-strip:focus-visible{background:color-mix(in srgb,var(--c-pink) 90%,var(--c-chocolate))}

/* цены */
.price-row__old{margin-right:.7em;font-weight:300;color:var(--fg-muted);text-decoration:line-through;text-decoration-color:var(--fg);text-decoration-thickness:1.5px}
.price-row__hit{display:inline-block;margin-left:.7em;padding:.2em .7em;border-radius:var(--r-pill);background:var(--c-chocolate);color:var(--c-cream);font-size:10px;font-weight:700;line-height:1.3;text-transform:uppercase;letter-spacing:.06em;vertical-align:.12em}
@media (max-width:599px){.price-row__old{display:block;margin-right:0}}

/* обо мне: аргументы и отзывы */
.about__motto a{text-decoration:underline;text-underline-offset:4px}
.why{display:grid;gap:var(--s-6);margin-top:clamp(56px,7vw,160px)}
.why__bar{padding-bottom:var(--s-4);border-bottom:1px solid var(--line)}
.why__grid{display:grid;gap:var(--s-6) var(--grid-gap)}
.why__item{display:grid;gap:var(--s-3);align-content:start}
.why__item p{max-width:44ch}
.quotes{display:grid;gap:var(--s-3);margin-top:clamp(40px,4.4vw,96px)}
.quote{display:grid;gap:var(--s-5);align-content:space-between;margin:0;padding:clamp(20px,2vw,36px);border-radius:var(--r-md);background:var(--c-card)}
.quote p{font-size:clamp(15px,1.1vw,21px);line-height:1.4;text-wrap:pretty}
.quote cite{font-style:normal}
@media (min-width:900px){
  .why__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .quotes{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)}
}

/* подвал — тёмный лист, как блок записи на её странице */
.footer{--bg:var(--c-chocolate);--fg:var(--c-cream);--fg-muted:color-mix(in srgb,var(--c-cream) 64%,transparent);--line:color-mix(in srgb,var(--c-cream) 18%,transparent);--btn-bg:var(--c-pink);--btn-fg:var(--c-chocolate);margin:var(--bezel);padding-block:clamp(56px,5.6vw,120px) var(--s-6);border-radius:var(--r-sheet);background:var(--bg);color:var(--fg)}
.footer ::selection{background:var(--c-pink);color:var(--c-chocolate)}
.footer__brand{--wm:clamp(34px,3.4vw,60px)}
.footer__brand .wordmark{color:var(--c-pink)}
@media (min-width:1024px){.footer{padding-bottom:var(--s-7)}}