/* ─────────────────────────────────────────────────────────
   PetSpa & Baltic Groom — shared design tokens + base styles
   Premium-spa aesthetic. White bg, thin type, generous space.
   ───────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Neutrals — warm graphite */
  --ink-1000: #15181C;
  --ink-900:  #1F232A;
  --ink-700:  #3F4853;
  --ink-500:  #6E7682;
  --ink-400:  #8B92A0;
  --ink-300:  #B6BBC6;
  --ink-200:  #D8DCE3;
  --ink-100:  #ECEEF2;
  --bg:       #FFFFFF;
  --surface:  #F7F5F1;
  --hairline: rgba(31,35,42,0.10);
  --hairline-strong: rgba(31,35,42,0.16);
}

/* PetSpa — Архангельск. cool blue + warm sand ochre */
.theme-petspa {
  --accent:        #3A8FB7;
  --accent-deep:   #2A6E92;
  --accent-soft:   #E8F1F6;
  --accent-tint:   #F2F7FA;
  --warm:          #B98E5A;
  --warm-soft:     #F2EAD9;
  --surface:       #F7F4EE;
  --footer-bg:     #14242F;
  --footer-ink:    #B8C2C9;
}

/* Baltic Groom — Калининград. soft blue + coral CTA */
.theme-baltic {
  --accent:        #D9694E;
  --accent-deep:   #B95138;
  --accent-soft:   #FBEAE3;
  --accent-tint:   #FDF4EF;
  --warm:          #7CA9C2;
  --warm-soft:     #E6EEF3;
  --surface:       #F4F2EE;
  --footer-bg:     #1B2530;
  --footer-ink:    #B8C2C9;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
}
a { text-decoration: none; color: inherit; cursor: pointer; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }

/* ─── Type scale (desktop) ─── */
.h-display { font-weight: 300; font-size: 80px; line-height: 0.98; letter-spacing: -0.035em; color: var(--ink-1000); text-wrap: balance; }
.h1       { font-weight: 300; font-size: 56px; line-height: 1.04; letter-spacing: -0.028em; color: var(--ink-1000); text-wrap: balance; }
.h2       { font-weight: 300; font-size: 44px; line-height: 1.05; letter-spacing: -0.024em; color: var(--ink-1000); text-wrap: balance; }
.h3       { font-weight: 400; font-size: 24px; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink-1000); }
.h4       { font-weight: 500; font-size: 17px; line-height: 1.3;  letter-spacing: -0.005em; color: var(--ink-1000); }
.body     { font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--ink-700); }
.body-lg  { font-weight: 300; font-size: 20px; line-height: 1.45; color: var(--ink-700); text-wrap: pretty; }
.caption  { font-weight: 500; font-size: 13px; line-height: 1.4;  color: var(--ink-500); }
.mono     { font-family: var(--font-mono); font-weight: 400; font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-500); }
.mono-sm  { font-family: var(--font-mono); font-weight: 400; font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-400); text-transform: uppercase; }

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--accent);
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 12px;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6;
}

/* ─── Layout ─── */
.container { max-width: 1280px; margin: 0 auto; padding: 0 64px; }
.section { padding: 120px 0; }
.section--tight { padding-top: 96px; padding-bottom: 96px; }

.section-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  align-items: end; margin-bottom: 56px;
}
.section-head__title > * + * { margin-top: 20px; }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 28px;
  border-radius: 999px;
  font-weight: 500; font-size: 15px; letter-spacing: 0.005em;
  border: 1px solid transparent; transition: all .2s ease;
  white-space: nowrap;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); }
.btn--ghost { background: transparent; color: var(--ink-900); border-color: var(--hairline-strong); }
.btn--ghost:hover { border-color: var(--ink-900); }
.btn--inverse { background: #fff; color: var(--ink-1000); }
.btn--sm { height: 44px; padding: 0 20px; font-size: 14px; }

.arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 500; font-size: 14px; color: var(--ink-1000);
}
.arrow .glyph { transition: transform .2s; display: inline-flex; }
.arrow:hover .glyph { transform: translateX(4px); }

/* ─── Tags ─── */
.tag {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px;
  border-radius: 999px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-700);
  background: var(--surface); border: 1px solid var(--hairline);
}
.tag--accent { color: var(--accent-deep); background: var(--accent-soft); border-color: transparent; }
.tag--warm   { color: var(--ink-900); background: var(--warm-soft); border-color: transparent; }

/* ─── Photo with cover ─── */
.photo {
  position: relative; overflow: hidden;
  border-radius: 6px;
  background: var(--ink-100);
}
.photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* ─── Header ─── */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
.header__inner {
  height: 88px; display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 48;
}
.header__logo { display: flex; align-items: center; height: 44; }
.header__logo img { height: 40px; width: auto; }
.header__nav {
  display: flex; gap: 36; justify-content: center;
}
.header__nav a {
  display: inline-flex; align-items: center; gap: 6;
  font-size: 14px; font-weight: 500; color: var(--ink-900);
  letter-spacing: -0.005em;
}
.header__phone {
  display: flex; align-items: center; gap: 10;
  font-size: 15px; font-weight: 500; color: var(--ink-1000);
  letter-spacing: -0.01em;
}
.header__phone .dot {
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--accent);
}

/* ─── Footer ─── */
.footer { background: var(--footer-bg); color: var(--footer-ink); }
.footer a { color: var(--footer-ink); text-decoration: none; }
.footer a:hover { color: #fff; }
.footer__grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 64;
}
.footer__brand { font-weight: 500; font-size: 30px; letter-spacing: -0.02em; color: #fff; }
.footer__brand-sub {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #fff; opacity: 0.55;
}
.footer__col-title {
  font-family: var(--font-mono); font-weight: 400; font-size: 10.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); margin-bottom: 18px;
}
.footer__col ul { display: grid; gap: 12px; }
.footer__col ul a { font-size: 14px; font-weight: 400; }
.footer__social {
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85);
}
.footer__social:hover { border-color: rgba(255,255,255,0.5); color: #fff; }
.footer__bottom {
  margin-top: 88px; padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex; justify-content: space-between; align-items: center;
}
.footer__bottom a { font-family: var(--font-mono); font-size: 11.5px; color: rgba(255,255,255,0.55); }

/* ─── Hairlines ─── */
.hr { height: 1px; background: var(--hairline); border: 0; }

/* ─── SVG icons inline ─── */
.icon-arrow {
  display: inline-flex; align-items: center;
}

/* ─── Mobile (max-width: 768px) ─── */
@media (max-width: 768px) {
  .h-display { font-size: 34px; line-height: 1.04; letter-spacing: -0.024em; overflow-wrap: break-word; hyphens: auto; }
  .h1       { font-size: 28px; line-height: 1.08; letter-spacing: -0.022em; overflow-wrap: break-word; hyphens: auto; }
  .h2       { font-size: 24px; line-height: 1.1;  overflow-wrap: break-word; hyphens: auto; }
  .h3       { font-size: 19px; }
  .body-lg  { font-size: 16px; }
  .body     { font-size: 15px; }

  .container { padding: 0 20px; }
  .section { padding: 72px 0; }

  .section-head {
    grid-template-columns: 1fr;
    gap: 16px; margin-bottom: 32px;
  }

  /* Header mobile */
  .header__inner {
    height: 64px; display: flex;
    align-items: center; justify-content: space-between;
  }
  .header__logo img { height: 30px; }
  .header__nav { display: none; }
  .header__phone { display: none; }
  .header__cta-desktop { display: none; }

  .mobile-controls { display: flex !important; }

  /* Footer mobile */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer__col-booking { display: none; }
  .footer__cols-mobile {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .footer__bottom {
    margin-top: 40px;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .footer__bottom-links { display: none; }
}

@media (min-width: 769px) {
  .mobile-controls { display: none !important; }
  .mobile-only { display: none !important; }
  .footer__cols-mobile { display: none !important; }
}

/* ─── Utility ─── */
.bg-surface { background: var(--surface); }
.bg-white { background: var(--bg); }
.text-accent { color: var(--accent); }
.w-full { width: 100%; }
.justify-center { justify-content: center; }