/* Fluffy Dogs PV — v2 (20.10.2026): 1:1 build of approved concept #5 "бяло + графит + червено"
   (owner: „по-професионален, не чак толкова розов“, different from the OhPuppy app look). Fonts by glyph IoU: Inter (0.84).
   Earlier pastel build #2 kept in git history.
   Desktop sizes are written in mockup pixels (mockup page = 1024 px wide) and scaled with --u,
   so the page is the mockup at any desktop width. Fonts were matched by glyph IoU:
   headings Montserrat 800 · body Onest · logo Sofia Sans Semi Condensed 900 · notes Caveat. */
:root {
  --u: calc(min(100vw, 1440px) / 1024);
  --bg: #ffffff;
  --panel: #ffffff;
  --card: #ffffff;
  --ink: #141415;
  --ink-2: #4b4d57;
  --ink-3: #565761;
  --plum: #141415;
  --coral: #d81b60;
  --coral-d: #ad1457;
  --coral-soft: #fcebee;
  --green: #30a563;
  --green-soft: #e3f4ea;
  --amber: #e29249;
  --amber-soft: #fdf0de;
  --line: #e8e8ec;
  --shadow: 0 calc(var(--u) * 6) calc(var(--u) * 20) rgba(20, 20, 30, .06);
  --shadow-s: 0 calc(var(--u) * 2) calc(var(--u) * 8) rgba(20, 20, 30, .05);
  --head: "Inter", system-ui, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --logo: "Inter", sans-serif;
  --script: "Lora", Georgia, serif;
  --heart-o: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5S3 14.6 3 8.6C3 5.9 5.1 4 7.5 4c1.8 0 3.4 1.1 4.5 2.7C13.1 5.1 14.7 4 16.5 4 18.9 4 21 5.9 21 8.6c0 6-9 11.9-9 11.9z' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'/%3E%3C/svg%3E");
  --paw-w: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='white'%3E%3Cellipse cx='32' cy='42' rx='14' ry='12'/%3E%3Cellipse cx='14' cy='27' rx='6.5' ry='8.5'/%3E%3Cellipse cx='25' cy='15' rx='6.5' ry='8.8'/%3E%3Cellipse cx='39' cy='15' rx='6.5' ry='8.8'/%3E%3Cellipse cx='50' cy='27' rx='6.5' ry='8.5'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; font-feature-settings: "locl" 0; font-family: var(--sans); color: var(--ink); background: var(--bg); font-size: calc(var(--u) * 15); line-height: 1.45; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--head); font-weight: 800; color: var(--ink); margin: 0 0 .35em; line-height: 1.1; letter-spacing: -.025em; }
h1 { font-size: calc(var(--u) * 45); }
h2 { font-size: calc(var(--u) * 26); }
h3 { font-size: calc(var(--u) * 17); letter-spacing: -.015em; }
p { margin: 0 0 1em; }
.wrap { width: calc(var(--u) * 924); margin: 0 auto; }
.accent { color: var(--coral); }
.muted { color: var(--ink-2); }
.script { font-family: var(--script); font-weight: 500; color: var(--coral); }
.eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: calc(var(--u) * 10.5); font-weight: 600; color: var(--ink-3); margin-bottom: calc(var(--u) * 10); }
.hrt { display: inline-block; width: .62em; height: .62em; margin-left: .25em; vertical-align: .08em; color: var(--coral); }
.heart::after { content: ""; display: inline-block; width: .6em; height: .6em; margin-left: .3em; vertical-align: .12em; background: var(--coral); -webkit-mask: var(--heart-o) center / contain no-repeat; mask: var(--heart-o) center / contain no-repeat; }
.doodle { position: absolute; pointer-events: none; color: #f09aa3; opacity: .8; }

/* ---------- header (sits on the hero image) ---------- */
.site-h { position: absolute; top: 0; left: 0; right: 0; z-index: 50; }
.site-h .wrap { display: flex; align-items: center; height: calc(var(--u) * 64); width: calc(var(--u) * 922); padding-top: calc(var(--u) * 6); }
.logo { display: flex; align-items: center; gap: calc(var(--u) * 10); text-decoration: none; }
.logo svg { width: calc(var(--u) * 45); height: calc(var(--u) * 42); color: var(--coral); flex: none; }
.logo b { display: block; font-family: var(--logo); font-weight: 900; font-size: calc(var(--u) * 27.5); line-height: .9; letter-spacing: -.01em; color: var(--ink); }
.logo small { display: block; font-size: calc(var(--u) * 8.6); letter-spacing: .22em; color: #624958; font-weight: 600; margin-top: calc(var(--u) * 5); }
.nav { display: flex; gap: calc(var(--u) * 30); margin-left: calc(var(--u) * 58); }
.nav a { text-decoration: none; font-weight: 500; font-size: calc(var(--u) * 13.4); color: #1a0512; padding: calc(var(--u) * 4) 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--coral); border-color: var(--coral); }
.hbtn { margin-left: auto; width: calc(var(--u) * 33); height: calc(var(--u) * 33); border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: var(--shadow-s); color: var(--coral); text-decoration: none; }
.hbtn svg { width: 46%; height: 46%; }
.menu-btn { display: none; }

/* ---------- buttons, tags ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 10); background: linear-gradient(180deg, #ec5a69, #e2485a); color: #fff; border: 0; border-radius: 999px; height: calc(var(--u) * 45); padding: 0 calc(var(--u) * 28); font: 700 calc(var(--u) * 14.5) var(--sans); text-decoration: none; cursor: pointer; box-shadow: 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(230, 72, 92, .30); transition: transform .15s, filter .15s; white-space: nowrap; }
.btn:hover { filter: brightness(.95); transform: translateY(-1px); }
.btn .arr { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.btn.ghost { background: #fff; color: var(--coral); box-shadow: inset 0 0 0 2px var(--coral); }
.btn.small { height: calc(var(--u) * 34); padding: 0 calc(var(--u) * 16); font-size: calc(var(--u) * 12.5); }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.tag { display: inline-flex; align-items: center; font-size: calc(var(--u) * 10.5); font-weight: 600; border-radius: 999px; height: calc(var(--u) * 21); padding: 0 calc(var(--u) * 11); color: #fff; }
.tag.available { background: var(--green); }
.tag.reserved { background: var(--amber); }
.tag.taken { background: #a99a9c; }
.tag.soft { background: var(--coral-soft); color: var(--coral-d); }
.tag.pending { background: var(--amber-soft); color: #9a5a12; }
.tag.accepted { background: var(--green-soft); color: #23704a; }
.tag.rejected { background: #fde2e2; color: #a0262f; }

/* ---------- hero ---------- */
.hero { position: relative; height: calc(var(--u) * 430); background: #f8e1e2 url("/assets/img/hero.jpg") center / cover no-repeat; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(253, 236, 236, .78) 0%, rgba(253, 236, 236, .55) 38%, rgba(253, 236, 236, 0) 55%); }
.hero .wrap { position: relative; padding-top: calc(var(--u) * 92); }
.hero .eyebrow { margin-top: calc(var(--u) * -28); }
.hero h1 { margin: 0; font-size: calc(var(--u) * 41.5); line-height: calc(var(--u) * 45); letter-spacing: -.035em; }
.hero h1 .hrt { width: calc(var(--u) * 26); height: calc(var(--u) * 26); margin-left: calc(var(--u) * 40); vertical-align: calc(var(--u) * 6); }
.hero .lead { font-size: calc(var(--u) * 14.6); line-height: calc(var(--u) * 21); color: #221626; margin: calc(var(--u) * 8) 0 calc(var(--u) * 19); max-width: calc(var(--u) * 352); }
.hero .btn { width: calc(var(--u) * 278); }
.feats { display: flex; gap: calc(var(--u) * 22); margin-top: calc(var(--u) * 26); margin-left: calc(var(--u) * -6); }
.feats div { display: flex; align-items: center; gap: calc(var(--u) * 9); font-size: calc(var(--u) * 10); line-height: 1.38; color: #3f2e3a; font-weight: 500; width: calc(var(--u) * 140); }
.feats i { flex: none; width: calc(var(--u) * 35); height: calc(var(--u) * 35); border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--coral); box-shadow: var(--shadow-s); }
.feats i svg { width: 50%; height: 50%; }
.hero .note { position: absolute; left: calc(var(--u) * 850); top: calc(var(--u) * 84); font-family: var(--script); color: #642e3e; font-size: calc(var(--u) * 21); line-height: calc(var(--u) * 20.5); transform: rotate(-12deg); text-align: center; width: calc(var(--u) * 74); }
.hero .note .hrt { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.hero .paw1 { left: calc(var(--u) * 940); top: calc(var(--u) * 192); width: calc(var(--u) * 44); transform: rotate(14deg); color: #f28c97; opacity: .9; }

/* sub-page hero: same photo, shorter */
.phero { position: relative; height: calc(var(--u) * 300); background: #f8e1e2 url("/assets/img/hero.jpg") 70% 40% / cover no-repeat; overflow: hidden; }
.phero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(253, 236, 236, .9) 0%, rgba(253, 236, 236, .7) 40%, rgba(253, 236, 236, 0) 60%); }
.phero .wrap { position: relative; padding-top: calc(var(--u) * 100); }
.phero h1 { font-size: calc(var(--u) * 40); line-height: calc(var(--u) * 46); letter-spacing: -.03em; margin: 0 0 calc(var(--u) * 10); }
.phero p { max-width: calc(var(--u) * 420); color: #221626; font-size: calc(var(--u) * 14); }

/* ---------- panel over the hero ---------- */
.panel { position: relative; background: var(--panel); border-radius: calc(var(--u) * 26) calc(var(--u) * 26) 0 0; margin-top: calc(var(--u) * -26); padding-top: calc(var(--u) * 24); z-index: 2; }
section { position: relative; padding: calc(var(--u) * 26) 0; }
.sec-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(var(--u) * 18); }
.sec-h h2 { margin: 0; }
.sec-h a { color: var(--coral); font-weight: 500; font-size: calc(var(--u) * 11); text-decoration: underline; text-underline-offset: 3px; display: inline-flex; gap: calc(var(--u) * 8); align-items: center; }
.sec-h a svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.card { background: var(--card); border-radius: calc(var(--u) * 16); box-shadow: var(--shadow); }
.grid { display: grid; gap: calc(var(--u) * 20); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }

/* ---------- puppy cards ---------- */
.pup { overflow: hidden; text-decoration: none; display: flex; flex-direction: column; transition: transform .18s; }
.pup:hover { transform: translateY(-3px); }
.pup .ph { position: relative; height: calc(var(--u) * 176); background: #f6dede; border-radius: calc(var(--u) * 16) calc(var(--u) * 16) 0 0; overflow: hidden; }
.pup .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pup .ph .tag { position: absolute; left: calc(var(--u) * 13); top: calc(var(--u) * 13); z-index: 1; }
.pup .bd { padding: calc(var(--u) * 13) calc(var(--u) * 16); display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: calc(var(--u) * 60); }
.pup .bd b { display: block; font-weight: 600; font-size: calc(var(--u) * 12.6); color: #090611; }
.pup .bd b span { font-weight: 400; }
.pup .bd small { display: none; }
.pup .price { display: block; font-size: calc(var(--u) * 17.5); font-weight: 700; color: #0c010f; margin-top: calc(var(--u) * 1); }
.pup .go { width: calc(var(--u) * 37); height: calc(var(--u) * 37); border-radius: 50%; background: #fdeef0; display: grid; place-items: center; color: var(--coral-d); flex: none; }
.pup .go svg { width: 48%; height: 48%; }
.empty { padding: calc(var(--u) * 30); text-align: center; }
.empty .script { font-size: calc(var(--u) * 26); }

/* ---------- trust band ---------- */
.trust { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); background: linear-gradient(180deg, #fdeaea, #fdf0ee); border-radius: calc(var(--u) * 20); box-shadow: var(--shadow-s); padding: calc(var(--u) * 20); width: calc(var(--u) * 948); margin: 0 auto; }
.trust > div { display: flex; align-items: center; gap: calc(var(--u) * 20); padding: 0 calc(var(--u) * 26); }
.trust > div + div { border-left: 1px solid #ecc9c9; }
.trust .ic-b { flex: none; width: calc(var(--u) * 60); height: calc(var(--u) * 68); display: grid; place-items: center; }
.trust .ic-b svg { width: 100%; height: 100%; }
.trust b { display: block; font-weight: 700; font-size: calc(var(--u) * 16.5); line-height: 1.15; color: #14010f; }
.trust small { white-space: nowrap; display: block; font-size: calc(var(--u) * 11.2); color: #3f3541; line-height: 1.38; margin-top: calc(var(--u) * 5); }
.trust .doodle { width: calc(var(--u) * 26); }

/* ---------- story ---------- */
.story-sec { position: relative; height: calc(var(--u) * 300); margin-top: calc(var(--u) * 10); padding: 0; }
.story-photo { position: absolute; right: 0; top: calc(var(--u) * -8); bottom: 0; width: calc(var(--u) * 584); background: url("/assets/img/story.jpg") center 20% / cover no-repeat; -webkit-mask: linear-gradient(90deg, transparent 0, #000 12%); mask: linear-gradient(90deg, transparent 0, #000 12%); }
.story-txt { position: relative; padding-top: calc(var(--u) * 14); width: calc(var(--u) * 380); }
.story-txt h2 { font-size: calc(var(--u) * 26.5); margin-bottom: calc(var(--u) * 12); }
.story-txt p { font-size: calc(var(--u) * 12.9); line-height: calc(var(--u) * 19.5); color: #2c2836; margin-bottom: calc(var(--u) * 6); }
.story-txt .script { display: block; font-size: calc(var(--u) * 23); transform: rotate(-4deg); transform-origin: left; margin: calc(var(--u) * 14) 0 calc(var(--u) * 22); color: #e24559; }
.story-txt .btn { width: calc(var(--u) * 182); }
.quote { position: absolute; left: calc(var(--u) * 815); top: calc(var(--u) * 21); width: calc(var(--u) * 162); background: rgba(255, 248, 247, .82); border-radius: calc(var(--u) * 14); padding: calc(var(--u) * 14); font-family: var(--script); font-size: calc(var(--u) * 15.5); line-height: calc(var(--u) * 17); color: #673441; transform: rotate(-4deg); box-shadow: var(--shadow-s); }
.quote .hrt { width: calc(var(--u) * 13); height: calc(var(--u) * 13); display: block; margin: calc(var(--u) * 2) 0 0 auto; }

/* ---------- app band ---------- */
.appband { position: relative; height: calc(var(--u) * 222); background: #fbe2e3 url("/assets/img/app-bg.jpg") center / cover no-repeat; border-radius: calc(var(--u) * 24) calc(var(--u) * 24) 0 0; margin-top: calc(var(--u) * 24); }
.appband .phone { position: absolute; left: calc(var(--u) * 92); top: calc(var(--u) * 50); width: calc(var(--u) * 175); height: calc(var(--u) * 265); transform: rotate(-12deg); transform-origin: bottom left; border-radius: calc(var(--u) * 30) calc(var(--u) * 30) 0 0; background: #17171a; padding: calc(var(--u) * 7) calc(var(--u) * 7) 0; box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 36) rgba(80, 30, 40, .28); }
.appband .scr { width: 100%; height: 100%; border-radius: calc(var(--u) * 24) calc(var(--u) * 24) 0 0; background: #fff; overflow: hidden; padding: calc(var(--u) * 26) calc(var(--u) * 14) 0; }
.appband .scr .ttl { display: flex; align-items: center; gap: calc(var(--u) * 5); font-family: var(--logo); font-weight: 900; font-size: calc(var(--u) * 17); color: var(--ink); }
.appband .scr .ttl svg { width: calc(var(--u) * 22); height: calc(var(--u) * 20); color: var(--coral); }
.appband .scr img { width: 100%; height: calc(var(--u) * 70); object-fit: cover; border-radius: calc(var(--u) * 10); margin: calc(var(--u) * 8) 0 calc(var(--u) * 6); }
.appband .scr ul { list-style: none; margin: 0; padding: 0; }
.appband .scr li { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 9.5); font-weight: 500; padding: calc(var(--u) * 5) 0; border-bottom: 1px solid #f2e6e6; }
.appband .scr li i { width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: 50%; display: inline-block; flex: none; }
.appband .notch { position: absolute; top: calc(var(--u) * 7); left: 50%; transform: translateX(-50%); width: calc(var(--u) * 60); height: calc(var(--u) * 15); background: #17171a; border-radius: 0 0 calc(var(--u) * 10) calc(var(--u) * 10); }
.appband .clip { position: absolute; left: 0; right: 0; top: calc(var(--u) * -60); bottom: 0; overflow: hidden; pointer-events: none; }
.appband .txt { position: absolute; left: calc(var(--u) * 353); top: calc(var(--u) * 33); }
.appband h2 { color: var(--plum); font-size: calc(var(--u) * 24); margin-bottom: calc(var(--u) * 8); letter-spacing: -.03em; }
.appband p { font-size: calc(var(--u) * 15); line-height: calc(var(--u) * 21); color: #322634; max-width: calc(var(--u) * 360); margin: 0; }
.stores { display: flex; gap: calc(var(--u) * 20); margin-top: calc(var(--u) * 16); }
.store { display: inline-flex; align-items: center; gap: calc(var(--u) * 9); background: #000; color: #fff; text-decoration: none; border-radius: calc(var(--u) * 8); height: calc(var(--u) * 45); padding: 0 calc(var(--u) * 14); line-height: 1.05; box-shadow: 0 0 0 1px #a6a6a6 inset; }
.store svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); fill: #fff; }
.store small { display: block; font-size: calc(var(--u) * 8.5); }
.store b { display: block; font-size: calc(var(--u) * 16); font-weight: 500; letter-spacing: -.01em; }
.appband .note { position: absolute; left: calc(var(--u) * 848); top: calc(var(--u) * 46); width: calc(var(--u) * 100); font-family: var(--script); color: #ac5d6a; font-size: calc(var(--u) * 19); line-height: calc(var(--u) * 19); transform: rotate(-14deg); text-transform: uppercase; }
.appband .doodle { width: calc(var(--u) * 46); }

/* ---------- footer ---------- */
.site-f { background: #fdf3f1; padding: calc(var(--u) * 22) 0 calc(var(--u) * 24); }
.site-f .wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: calc(var(--u) * 40); width: calc(var(--u) * 928); }
.site-f .logo svg { width: calc(var(--u) * 40); height: calc(var(--u) * 37); }
.site-f .logo b { font-size: calc(var(--u) * 24); }
.site-f .logo small { font-size: calc(var(--u) * 8); }
.site-f nav { display: flex; gap: calc(var(--u) * 21); }
.site-f nav a { text-decoration: none; font-size: calc(var(--u) * 11.2); color: #523e4d; }
.site-f .soc { display: flex; gap: calc(var(--u) * 6); justify-content: flex-end; align-items: center; }
.site-f .soc a { width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 1px #efd5d5 inset; background: #fff8f7; color: #2a1520; }
.site-f .soc svg { width: 50%; height: 50%; }
.site-f .meta { text-align: right; font-size: calc(var(--u) * 8.6); color: #6f5261; margin-top: calc(var(--u) * 10); line-height: 1.8; }
.site-f .meta a { color: inherit; }

/* ---------- puppy detail ---------- */
.crumbs { font-size: calc(var(--u) * 11.5); color: var(--ink-2); margin: 0 0 calc(var(--u) * 14); }
.crumbs a { text-decoration: none; color: var(--coral); font-weight: 600; }
.detail { display: grid; grid-template-columns: 1.15fr 1fr; gap: calc(var(--u) * 30); align-items: start; }
.gallery .main { width: 100%; aspect-ratio: 4 / 3.3; object-fit: cover; border-radius: calc(var(--u) * 18); box-shadow: var(--shadow); background: #f6dede; }
.thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 10); }
.thumbs button { padding: 0; border: 2px solid transparent; border-radius: calc(var(--u) * 10); overflow: hidden; cursor: pointer; background: none; aspect-ratio: 1; }
.thumbs button.on { border-color: var(--coral); }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.facts { list-style: none; padding: 0; margin: calc(var(--u) * 14) 0 calc(var(--u) * 18); }
.facts li { display: flex; gap: calc(var(--u) * 10); padding: calc(var(--u) * 6) 0; border-bottom: 1px dashed var(--line); font-size: calc(var(--u) * 13); }
.facts li span { color: var(--ink-2); min-width: calc(var(--u) * 120); }
.big-price { font-family: var(--head); font-size: calc(var(--u) * 32); font-weight: 800; color: var(--coral); margin: calc(var(--u) * 2) 0; }
.includes { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 10) calc(var(--u) * 24); }
.includes div { display: flex; align-items: center; gap: calc(var(--u) * 8); font-weight: 600; font-size: calc(var(--u) * 13); }
.includes i { width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-style: normal; font-size: calc(var(--u) * 12); }
.parents { display: flex; gap: calc(var(--u) * 30); flex-wrap: wrap; align-items: center; }
.parent { text-align: center; text-decoration: none; }
.parent img { width: calc(var(--u) * 96); height: calc(var(--u) * 96); border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: var(--shadow-s); margin: 0 auto calc(var(--u) * 6); }
.parent b { display: block; font-size: calc(var(--u) * 13); }
.parent small { color: var(--ink-2); font-size: calc(var(--u) * 11.5); }
.docs { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 14); }
.doc { background: var(--card); border-radius: calc(var(--u) * 14); box-shadow: var(--shadow-s); overflow: hidden; text-decoration: none; display: flex; flex-direction: column; }
.doc .th { aspect-ratio: 4 / 3; background: #f6e6e6; display: grid; place-items: center; font-size: calc(var(--u) * 32); overflow: hidden; }
.doc .th img { width: 100%; height: 100%; object-fit: cover; }
.doc .t { padding: calc(var(--u) * 8) calc(var(--u) * 12) calc(var(--u) * 10); font-size: calc(var(--u) * 12); font-weight: 700; }
.doc .t small { display: block; font-weight: 500; color: var(--coral); }
.box { padding: calc(var(--u) * 20) calc(var(--u) * 24); }
.desc { white-space: pre-line; font-size: calc(var(--u) * 13); }

/* ---------- dogs ---------- */
.dog { overflow: hidden; }
.dog > img, .dog-row > a img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #f6dede; }
.dog .bd { padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 16); }
.dog .bd b { font-size: calc(var(--u) * 17); font-family: var(--head); }
.dog .sex { color: var(--coral); font-weight: 700; }
.dog .chips { display: flex; gap: calc(var(--u) * 6); flex-wrap: wrap; margin: calc(var(--u) * 8) 0; }

/* ---------- timeline, tips, warn ---------- */
.timeline { list-style: none; padding: 0; margin: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: calc(var(--u) * 13); top: 6px; bottom: 6px; border-left: 2px dashed #f0b9b6; }
.timeline li { position: relative; padding: 0 0 calc(var(--u) * 16) calc(var(--u) * 40); font-size: calc(var(--u) * 12.5); }
.timeline li::before { content: ""; position: absolute; left: calc(var(--u) * 4); top: calc(var(--u) * 2); width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-radius: 50%; background: var(--coral) var(--paw-w) center / 60% no-repeat; }
.timeline b { display: block; color: var(--coral-d); font-size: calc(var(--u) * 13); }
.tips { counter-reset: t; }
.tip { padding: calc(var(--u) * 18); position: relative; }
.tip::before { counter-increment: t; content: counter(t); width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: 50%; background: var(--coral-soft); color: var(--coral); font-weight: 800; display: grid; place-items: center; margin-bottom: calc(var(--u) * 8); font-size: calc(var(--u) * 13); }
.tip h3 { font-size: calc(var(--u) * 14); }
.tip p { font-size: calc(var(--u) * 12); }
.warn { background: #fff5f3; border: 2px solid #f6c5c0; border-radius: calc(var(--u) * 18); padding: calc(var(--u) * 20) calc(var(--u) * 22); display: flex; gap: calc(var(--u) * 16); align-items: flex-start; }
.warn i { font-style: normal; font-size: calc(var(--u) * 30); }

/* ---------- forms ---------- */
.field { display: block; margin-bottom: calc(var(--u) * 12); }
.field > span { display: block; font-size: calc(var(--u) * 12); font-weight: 600; margin-bottom: calc(var(--u) * 5); }
input, select, textarea { width: 100%; font: calc(var(--u) * 13.5) var(--sans); color: var(--ink); background: #fff; border: 1.5px solid #f1dcdc; border-radius: calc(var(--u) * 12); padding: calc(var(--u) * 10) calc(var(--u) * 12); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); }
textarea { min-height: calc(var(--u) * 100); resize: vertical; }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; gap: calc(var(--u) * 12); align-items: center; padding: calc(var(--u) * 10) 0; border-bottom: 1px solid var(--line); font-size: calc(var(--u) * 13); }
.contact-list i { flex: none; width: calc(var(--u) * 36); height: calc(var(--u) * 36); border-radius: 50%; background: var(--coral-soft); color: var(--coral); display: grid; place-items: center; font-style: normal; font-size: calc(var(--u) * 16); }
.contact-list a { text-decoration: none; font-weight: 700; }
.map { width: 100%; height: calc(var(--u) * 190); border: 0; border-radius: calc(var(--u) * 14); margin-top: calc(var(--u) * 12); }
details { background: var(--card); border-radius: calc(var(--u) * 12); box-shadow: var(--shadow-s); padding: calc(var(--u) * 12) calc(var(--u) * 16); margin-bottom: calc(var(--u) * 8); font-size: calc(var(--u) * 13); }
summary { font-weight: 600; cursor: pointer; }
details p { margin: calc(var(--u) * 8) 0 0; color: var(--ink-2); }

/* ---------- skeleton, lightbox ---------- */
.sk { background: linear-gradient(90deg, #f7e4e1 25%, #fbefed 50%, #f7e4e1 75%); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: calc(var(--u) * 16); min-height: calc(var(--u) * 236); }
@keyframes sk { to { background-position: -200% 0; } }
.lb { position: fixed; inset: 0; background: rgba(30, 15, 15, .85); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.lb.open { display: flex; }
.lb img { max-height: 92vh; max-width: 96vw; border-radius: 12px; }
.lb button { position: absolute; top: 16px; right: 18px; background: #fff; border: 0; border-radius: 50%; width: 44px; height: 44px; font-size: 22px; cursor: pointer; }

/* ---------- admin ---------- */
.adm { display: grid; grid-template-columns: calc(var(--u) * 200) 1fr; gap: calc(var(--u) * 20); align-items: start; }
.adm-side { padding: calc(var(--u) * 14) calc(var(--u) * 10); position: sticky; top: 20px; display: flex; flex-direction: column; gap: 4px; }
.adm-who { display: flex; gap: 10px; align-items: center; padding: 4px 8px 14px; }
.adm-who svg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); color: var(--coral); flex: none; }
.adm-who b { display: block; line-height: 1.15; font-size: calc(var(--u) * 13); } .adm-who small { color: var(--ink-2); font-size: calc(var(--u) * 11); }
.adm-tab { display: block; text-align: left; background: none; border: 0; border-radius: calc(var(--u) * 12); padding: calc(var(--u) * 9) calc(var(--u) * 12); font: 600 calc(var(--u) * 13) var(--sans); color: var(--ink); cursor: pointer; text-decoration: none; }
.adm-tab:hover { background: var(--coral-soft); }
.adm-tab.on { background: var(--coral); color: #fff; }
.adm-side hr { border: 0; border-top: 1px solid var(--line); margin: 10px 4px; }
.adm-main { min-width: 0; }
.adm-top { margin-bottom: calc(var(--u) * 14); }
.adm-stats { margin-bottom: calc(var(--u) * 18); }
.adm-stats .card { display: flex; gap: calc(var(--u) * 12); align-items: center; padding: calc(var(--u) * 14) calc(var(--u) * 16); }
.adm-stats i { width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: calc(var(--u) * 17); flex: none; }
.adm-stats b { display: block; font-size: calc(var(--u) * 24); line-height: 1; font-weight: 800; font-family: var(--head); }
.adm-stats small { color: var(--ink-2); font-weight: 600; font-size: calc(var(--u) * 11.5); }
.i-green { background: var(--green-soft); color: var(--green); }
.i-amber { background: var(--amber-soft); color: var(--amber); }
.i-coral { background: var(--coral-soft); color: var(--coral); }
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; min-width: 520px; font-size: calc(var(--u) * 13); }
.tbl th { text-align: left; font-size: calc(var(--u) * 11); color: var(--ink-2); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl td a { text-decoration: none; }
.tbl .th { width: calc(var(--u) * 48); height: calc(var(--u) * 48); border-radius: calc(var(--u) * 12); object-fit: cover; background: #f6dede; }
.tbl .act { text-align: right; white-space: nowrap; }
.ic { background: #fff; border: 1.5px solid var(--line); border-radius: 50%; width: 34px; height: 34px; cursor: pointer; font-size: 15px; margin-left: 6px; }
.ic:hover { border-color: var(--coral); }
.ph-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.ph-it { position: relative; width: 96px; height: 96px; }
.ph-it img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.ph-it button { position: absolute; top: 5px; right: 5px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(255,255,255,.95); cursor: pointer; font-size: 15px; line-height: 1; }
.ph-it button.mv { right: auto; left: 5px; font-size: 12px; color: var(--amber); }
.ph-it .main-badge { position: absolute; left: 6px; bottom: 6px; background: var(--coral); color: #fff; font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.ph-add { width: 96px; height: 96px; border: 2px dashed #efb7b2; border-radius: 14px; display: grid; place-items: center; text-align: center; font-size: 12px; font-weight: 700; color: var(--coral); cursor: pointer; background: #fff8f7; }
.seg { display: flex; gap: 8px; }
.seg label { flex: 1; }
.seg input { display: none; }
.seg span { display: block; text-align: center; border: 1.5px solid var(--line); border-radius: 12px; padding: 9px 6px; cursor: pointer; font-weight: 700; background: #fff; font-size: calc(var(--u) * 13); }
.seg input:checked + span { border-color: var(--coral); background: var(--coral-soft); color: var(--coral-d); }
.checks { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 4px 0 6px; }
.checks label { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: calc(var(--u) * 13); }
.checks input { width: 18px; height: 18px; accent-color: var(--coral); }
#toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 30px); background: #2f2222; color: #fff; padding: 13px 22px; border-radius: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: .25s; z-index: 200; max-width: calc(100% - 32px); font-size: 15px; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#toast.bad { background: #b3262f; }
.plain-top { padding-top: calc(var(--u) * 90); }

/* ---------- phone / tablet ---------- */
@media (max-width: 860px) {
  :root { --u: 1px; }
  body { font-size: 15px; }
  .wrap, .site-f .wrap, .site-h .wrap { width: calc(100% - 32px); }
  .site-h .wrap { height: 64px; }
  .logo b { font-size: 24px; } .logo svg { width: 36px; height: 34px; }
  .nav { display: none; position: absolute; top: 64px; left: 12px; right: 12px; flex-direction: column; gap: 0; margin: 0; background: #fff; border-radius: 16px; box-shadow: var(--shadow); padding: 6px 16px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 2px; border-bottom: 1px solid var(--line); font-size: 16px; }
  .hbtn { display: none; }
  .menu-btn { display: grid; place-items: center; margin-left: auto; background: #fff; border: 0; border-radius: 50%; width: 42px; height: 42px; font-size: 20px; cursor: pointer; color: var(--ink); box-shadow: var(--shadow-s); }
  .hero { height: auto; padding-bottom: 300px; background-size: auto 340px; background-position: 70% bottom; background-color: #fbe9e8; }
  .hero::before { background: linear-gradient(180deg, #fbe9e8 0%, #fbe9e8 55%, rgba(251, 233, 232, 0) 70%); }
  .hero .wrap { padding-top: 84px; }
  .hero h1 { font-size: 34px; line-height: 39px; }
  .hero h1 .hrt { margin-left: 10px; }
  .hero .lead { font-size: 15.5px; line-height: 22px; }
  .hero .btn { width: 100%; }
  .feats { flex-direction: column; gap: 10px; margin-left: 0; }
  .feats div { width: auto; font-size: 14px; }
  .hero .note, .hero .paw1 { display: none; }
  .phero { height: auto; padding-bottom: 170px; background-size: auto 220px; background-position: 70% bottom; background-color: #fbe9e8; }
  .phero::before { background: linear-gradient(180deg, #fbe9e8 0%, #fbe9e8 60%, rgba(251, 233, 232, 0) 78%); }
  .phero .wrap { padding-top: 84px; }
  .phero h1 { font-size: 32px; line-height: 37px; }
  .phero p { font-size: 15px; }
  .g3, .g4, .g2 { grid-template-columns: 1fr; }
  .docs { grid-template-columns: 1fr 1fr; }
  .pup .ph { height: 230px; }
  .pup .bd b { font-size: 15px; } .pup .price { font-size: 20px; }
  .trust { grid-template-columns: 1fr; width: calc(100% - 32px); padding: 8px 4px; }
  .trust > div { padding: 14px 16px; }
  .trust > div + div { border-left: 0; border-top: 1px solid #ecc9c9; }
  .trust b { font-size: 17px; } .trust small { font-size: 13px; }
  .story-sec { height: auto; }
  .story-photo { position: relative; width: 100%; height: 260px; -webkit-mask: none; mask: none; margin-top: 20px; }
  .story-txt { width: auto; margin: 0 16px; }
  .story-txt h2 { font-size: 26px; } .story-txt p { font-size: 15px; line-height: 22px; }
  .quote { position: relative; left: auto; top: auto; width: auto; margin: -50px 16px 0 auto; max-width: 230px; font-size: 18px; line-height: 20px; }
  .appband { height: auto; padding: 300px 16px 30px; background-position: 70% bottom; }
  .appband .clip { top: 0; }
  .appband .phone { left: 50%; top: 24px; margin-left: -88px; transform: rotate(-8deg); transform-origin: center; }
  .appband .txt { position: static; }
  .appband h2 { font-size: 24px; } .appband p { font-size: 15px; line-height: 22px; }
  .appband .note, .appband .doodle { display: none; }
  .stores { flex-wrap: wrap; gap: 10px; }
  .site-f .wrap { grid-template-columns: 1fr; gap: 16px; }
  .site-f nav { flex-wrap: wrap; gap: 12px 18px; } .site-f nav a { font-size: 14px; }
  .site-f .soc { justify-content: flex-start; } .site-f .meta { text-align: left; font-size: 12px; }
  .detail { grid-template-columns: 1fr; }
  .facts li, .includes div, .desc, .crumbs { font-size: 14.5px; }
  .adm { grid-template-columns: 1fr; } .adm-side { position: static; flex-direction: row; flex-wrap: wrap; } .adm-side hr, .adm-who { display: none; }
  .tbl, .adm-tab, .seg span, .checks label, input, select, textarea, .field > span { font-size: 15px; }
  .dog-row { grid-template-columns: 1fr !important; }
  h2 { font-size: 26px; } h3 { font-size: 18px; }
}

/* =====================  SUB-PAGES (mockups A–E)  ===================== */
.phero .feats { margin-top: calc(var(--u) * 22); }
.phero .note { position: absolute; font-family: var(--script); color: #642e3e; font-size: calc(var(--u) * 20); line-height: calc(var(--u) * 20); transform: rotate(-12deg); text-align: center; width: calc(var(--u) * 110); }
.phero .note .hrt { width: calc(var(--u) * 16); height: calc(var(--u) * 16); }
.phero .doodle { width: calc(var(--u) * 40); color: #f28c97; }
.phero.tall { height: calc(var(--u) * 400); }
.phero.tall .wrap { padding-top: calc(var(--u) * 70); }
.phero.tall h1 { font-size: calc(var(--u) * 41); line-height: calc(var(--u) * 43); }
.phero.tall .eyebrow { margin-bottom: calc(var(--u) * 8); }
.phero .lead2 { font-size: calc(var(--u) * 15.5); line-height: calc(var(--u) * 21); color: #221626; margin: 0 0 calc(var(--u) * 18); max-width: calc(var(--u) * 380); }
.phero.story-hero { background-image: url("/assets/img/istoriya-hero.jpg"); background-position: right center; }
.btn.block { width: 100%; }
.sub-card { background: rgba(255, 252, 251, .9); border-radius: calc(var(--u) * 20); box-shadow: var(--shadow-s); }
.sec-title { display: flex; align-items: center; gap: calc(var(--u) * 10); margin-bottom: calc(var(--u) * 16); }
.sec-title svg.pawi { width: calc(var(--u) * 30); height: calc(var(--u) * 30); color: var(--coral); }
.sec-title h2 { margin: 0; }

/* A — puppy */
.pp-top { padding-top: calc(var(--u) * 74); background: linear-gradient(180deg, #fde9e9 0, var(--bg) calc(var(--u) * 260)); }
.crumbs { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 12.5); color: #3f2e3a; margin: 0 0 calc(var(--u) * 12); }
.crumbs svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); color: var(--coral); }
.crumbs a { color: #3f2e3a; font-weight: 400; text-decoration: none; }
.crumbs i { width: 1px; height: calc(var(--u) * 14); background: #e3c8c8; }
.detail { grid-template-columns: calc(var(--u) * 503) 1fr; gap: calc(var(--u) * 26); }
.gallery { position: relative; }
.gallery .main { aspect-ratio: auto; height: calc(var(--u) * 336); border-radius: calc(var(--u) * 16); }
.gal-btn { position: absolute; top: calc(var(--u) * 170); width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: 50%; border: 0; background: rgba(255,255,255,.95); display: grid; place-items: center; cursor: pointer; color: #333; box-shadow: var(--shadow-s); }
.gal-btn svg { width: 55%; height: 55%; }
.gal-btn.prev { left: calc(var(--u) * 12); } .gal-btn.next { right: calc(var(--u) * 12); }
.gal-zoom { position: absolute; right: calc(var(--u) * 14); top: calc(var(--u) * 14); width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; background: rgba(255,255,255,.95); display: grid; place-items: center; }
.gal-zoom svg { width: 55%; height: 55%; }
.thumbs { gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 8); }
.thumbs button { aspect-ratio: auto; height: calc(var(--u) * 70); border-radius: calc(var(--u) * 8); }
.info { position: relative; padding-right: calc(var(--u) * 80); }
.info h1 { font-size: calc(var(--u) * 28); margin: calc(var(--u) * 12) 0 calc(var(--u) * 2); letter-spacing: -.03em; }
.info .big-price { font-size: calc(var(--u) * 33); margin: 0 0 calc(var(--u) * 10); color: var(--coral); }
.facts-card { background: rgba(255, 250, 249, .95); border-radius: calc(var(--u) * 12); padding: calc(var(--u) * 6) calc(var(--u) * 14); margin-bottom: calc(var(--u) * 12); box-shadow: var(--shadow-s); }
.facts-card li { display: flex; align-items: center; gap: calc(var(--u) * 12); list-style: none; padding: calc(var(--u) * 4) 0; font-size: calc(var(--u) * 14); color: #23121c; }
.facts-card ul { margin: 0; padding: 0; }
.facts-card li svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18); color: var(--coral); flex: none; }
.facts-card li b { font-weight: 500; }
.info .btn { width: calc(var(--u) * 303); margin-bottom: calc(var(--u) * 8); }
.info .btn.ghost svg { width: calc(var(--u) * 17); height: calc(var(--u) * 17); }
.note-card { display: flex; align-items: center; gap: calc(var(--u) * 12); background: rgba(253, 236, 236, .8); border-radius: calc(var(--u) * 14); padding: calc(var(--u) * 10) calc(var(--u) * 12); font-size: calc(var(--u) * 10.6); line-height: 1.5; color: #3f2e3a; margin-top: calc(var(--u) * 4); width: calc(var(--u) * 384); }
.note-card i { flex: none; width: calc(var(--u) * 32); height: calc(var(--u) * 32); border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--coral); }
.note-card i svg { width: 55%; height: 55%; }
.info .side-note { position: absolute; right: 0; top: calc(var(--u) * 0); width: calc(var(--u) * 88); font-family: var(--script); color: #642e3e; font-size: calc(var(--u) * 18.5); line-height: calc(var(--u) * 18.5); transform: rotate(-10deg); text-align: center; }
.info .doodle { right: calc(var(--u) * 6); top: calc(var(--u) * 130); width: calc(var(--u) * 40); color: #f4a0a8; }
.sub-card.box { padding: calc(var(--u) * 18) calc(var(--u) * 24); margin-top: calc(var(--u) * 14); position: relative; }
.sub-card h2 { font-size: calc(var(--u) * 23); }
.inc-row { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 10) calc(var(--u) * 22); margin-top: calc(var(--u) * 10); padding-right: calc(var(--u) * 90); }
.inc-row div { display: flex; align-items: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 11.5); color: #23121c; }
.inc-row i { width: calc(var(--u) * 42); height: calc(var(--u) * 42); border-radius: 50%; background: #fde4e6; display: grid; place-items: center; }
.inc-row i b { width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; background: var(--coral); display: grid; place-items: center; color: #fff; }
.inc-row i svg { width: 60%; height: 60%; }
.sub-card .corner-note { position: absolute; right: calc(var(--u) * 18); bottom: calc(var(--u) * 12); width: calc(var(--u) * 100); font-family: var(--script); color: #642e3e; font-size: calc(var(--u) * 14); line-height: calc(var(--u) * 14); transform: rotate(-10deg); text-align: center; }
.parents-row { display: grid; grid-template-columns: calc(var(--u) * 170) auto auto auto 1fr; align-items: center; gap: calc(var(--u) * 26); }
.parents-row .parent img { width: calc(var(--u) * 138); height: calc(var(--u) * 138); border: 0; box-shadow: none; }
.parents-row .parent b { font-weight: 500; font-size: calc(var(--u) * 14); }
.parents-row > .hrt { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.parents-row p { font-size: calc(var(--u) * 13.5); line-height: 1.45; color: #23121c; margin: 0; padding-left: calc(var(--u) * 20); border-left: 1px solid #ecd0d0; }
.docs { grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 18); }
.doc { border-radius: calc(var(--u) * 12); }
.doc .th { aspect-ratio: auto; height: calc(var(--u) * 100); margin: calc(var(--u) * 10) calc(var(--u) * 10) 0; border-radius: calc(var(--u) * 6); }
.doc .t { display: flex; flex-direction: column; gap: calc(var(--u) * 4); font-weight: 500; font-size: calc(var(--u) * 13); padding: calc(var(--u) * 10) calc(var(--u) * 14) calc(var(--u) * 12); }
.doc .t span { display: flex; align-items: center; gap: calc(var(--u) * 8); }
.doc .t span svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); color: var(--coral); flex: none; }
.doc .t small { padding-left: calc(var(--u) * 24); text-decoration: underline; display: inline-flex; gap: 6px; align-items: center; }
.doc .t small svg { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }

/* B — dogs */
.dogcard { overflow: hidden; display: flex; flex-direction: column; }
.dogcard > img, .dogcard > .noimg { width: 100%; height: calc(var(--u) * 230); object-fit: cover; background: #f6dede; }
.dogcard .bd { padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 14); }
.dogcard h3 { font-size: calc(var(--u) * 20); margin: 0 0 calc(var(--u) * 6); display: flex; align-items: center; gap: calc(var(--u) * 8); }
.dogcard h3 svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.dogcard .meta { font-size: calc(var(--u) * 12); color: #23121c; margin-bottom: calc(var(--u) * 8); }
.chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); margin-bottom: calc(var(--u) * 10); }
.chip { display: inline-flex; align-items: center; gap: 4px; height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 8); border-radius: calc(var(--u) * 6); font-size: calc(var(--u) * 9.5); font-weight: 600; background: #e5f5ea; color: #23704a; }
.chip.red { background: #fdecee; color: #b3364a; }
.dogcard a.more, .litcard a.more { font-size: calc(var(--u) * 11.5); color: var(--coral); display: inline-flex; gap: 6px; align-items: center; }
.dogcard a.more svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.dogdocs { margin-top: calc(var(--u) * 14); }
.dogdocs h3 { font-size: calc(var(--u) * 16); margin-bottom: calc(var(--u) * 10); }
.litcard .ph { height: calc(var(--u) * 150); }
.litcard .bd b { font-family: var(--head); font-weight: 800; font-size: calc(var(--u) * 14); }
.litcard .bd small { display: block; font-size: calc(var(--u) * 12); color: #23121c; }

/* C — story */
.about-grid { display: grid; grid-template-columns: calc(var(--u) * 607) 1fr; gap: calc(var(--u) * 12); align-items: start; }
.about-card { padding: calc(var(--u) * 18) calc(var(--u) * 22); display: grid; grid-template-columns: 1fr calc(var(--u) * 212); gap: calc(var(--u) * 16); position: relative; }
.about-card h2 { grid-column: 1 / -1; font-size: calc(var(--u) * 24); margin: 0; }
.about-card .txt p { font-size: calc(var(--u) * 11.6); line-height: 1.6; color: #23121c; }
.about-card .txt .script { display: block; font-size: calc(var(--u) * 19); line-height: 1.25; transform: rotate(-5deg); color: #e24559; margin-top: calc(var(--u) * 10); }
.about-card .ph { position: relative; }
.about-card .ph img { width: 100%; height: calc(var(--u) * 186); object-fit: cover; border-radius: calc(var(--u) * 14); }
.about-card .ph .quote2 { position: relative; margin: calc(var(--u) * -18) calc(var(--u) * -6) 0 calc(var(--u) * -10); background: rgba(253, 236, 236, .96); border-radius: calc(var(--u) * 14); padding: calc(var(--u) * 14); font-family: var(--script); color: #642e3e; font-size: calc(var(--u) * 14); line-height: 1.25; transform: rotate(-4deg); box-shadow: var(--shadow-s); }
.path-card { padding: calc(var(--u) * 18) calc(var(--u) * 18); }
.path-card h2 { font-size: calc(var(--u) * 24); }
.tl { list-style: none; margin: 0; padding: 0; position: relative; }
.tl::before { content: ""; position: absolute; left: calc(var(--u) * 17); top: calc(var(--u) * 20); bottom: calc(var(--u) * 20); border-left: 2px solid #f3c2c5; }
.tl li { display: grid; grid-template-columns: calc(var(--u) * 36) calc(var(--u) * 64) 1fr; align-items: center; gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 10); }
.tl li > i { position: relative; width: calc(var(--u) * 34); height: calc(var(--u) * 34); border-radius: 50%; background: #fde4e6; display: grid; place-items: center; color: var(--coral); }
.tl li > i svg { width: 55%; height: 55%; }
.tl li > b { font-family: var(--head); color: var(--coral); font-size: calc(var(--u) * 15); }
.tl li > div { background: rgba(255, 250, 249, .95); border-radius: calc(var(--u) * 10); padding: calc(var(--u) * 8) calc(var(--u) * 12); font-size: calc(var(--u) * 10.2); line-height: 1.45; color: #3f2e3a; box-shadow: var(--shadow-s); }
.tl li > div strong { display: block; font-size: calc(var(--u) * 11.4); color: #14010f; }
.moments { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 12); }
.moments a img { width: 100%; height: calc(var(--u) * 160); object-fit: cover; border-radius: calc(var(--u) * 10); }

/* D — checks */
.gcard { padding: calc(var(--u) * 20) calc(var(--u) * 18); display: flex; flex-direction: column; position: relative; }
.gcard .gh { display: flex; align-items: center; gap: calc(var(--u) * 16); margin-bottom: calc(var(--u) * 14); }
.gcard .gh .ic-b { width: calc(var(--u) * 66); height: calc(var(--u) * 72); flex: none; }
.gcard .gh .ic-b svg { width: 100%; height: 100%; }
.gcard .gh h3 { font-family: var(--sans); font-weight: 700; font-size: calc(var(--u) * 19); margin: 0; line-height: 1.15; }
.gcard p { font-size: calc(var(--u) * 13.5); line-height: 1.45; color: #23121c; }
.gcard .regno { text-align: center; font-size: calc(var(--u) * 13); color: #3f2e3a; margin: 0; }
.gcard .regno b { display: block; font-family: var(--head); font-size: calc(var(--u) * 19); letter-spacing: .02em; color: #14010f; margin-top: calc(var(--u) * 6); }
.gcard .okbox { display: flex; align-items: center; gap: calc(var(--u) * 12); background: #e9f6ee; border-radius: calc(var(--u) * 12); padding: calc(var(--u) * 10) calc(var(--u) * 14); font-weight: 600; font-size: calc(var(--u) * 12); color: #1d4d33; margin-bottom: calc(var(--u) * 12); }
.gcard .okbox svg { width: calc(var(--u) * 38); height: calc(var(--u) * 42); flex: none; }
.gcard .btn { margin-top: auto; width: 100%; }
.gcard .org { font-size: calc(var(--u) * 11.5); color: #6f5261; }
.tip2 { padding: calc(var(--u) * 14); display: grid; grid-template-columns: calc(var(--u) * 46) 1fr; gap: calc(var(--u) * 6) calc(var(--u) * 10); }
.tip2 .n { width: calc(var(--u) * 34); height: calc(var(--u) * 34); border-radius: 50%; background: #fde4e6; color: var(--coral); font-weight: 600; display: grid; place-items: center; font-size: calc(var(--u) * 16); }
.tip2 h3 { font-family: var(--sans); font-weight: 700; font-size: calc(var(--u) * 14.5); margin: 0; align-self: center; }
.tip2 .ico { color: var(--coral); }
.tip2 .ico svg { width: calc(var(--u) * 44); height: calc(var(--u) * 44); }
.tip2 p { font-size: calc(var(--u) * 10.3); line-height: 1.5; color: #3f2e3a; margin: calc(var(--u) * 10) 0 0; }
.warn2 { position: relative; height: calc(var(--u) * 280); border-radius: calc(var(--u) * 24) calc(var(--u) * 24) 0 0; background: #fbe2e3 url("/assets/img/hero.jpg") 90% 60% / auto 130% no-repeat; overflow: hidden; }
.warn2::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(253, 234, 234, .97) 0%, rgba(253, 234, 234, .9) 55%, rgba(253, 234, 234, 0) 75%); }
.warn2 .in { position: relative; display: grid; grid-template-columns: calc(var(--u) * 60) calc(var(--u) * 420); gap: calc(var(--u) * 14); padding: calc(var(--u) * 30) 0 0 calc(var(--u) * 50); }
.warn2 .in svg.tri { width: calc(var(--u) * 52); height: calc(var(--u) * 48); color: var(--coral); }
.warn2 h2 { font-family: var(--sans); font-weight: 700; font-size: calc(var(--u) * 22); }
.warn2 p { font-size: calc(var(--u) * 13); line-height: 1.5; color: #23121c; }
.warn2 .note { position: absolute; left: calc(var(--u) * 840); top: calc(var(--u) * 26); width: calc(var(--u) * 140); font-family: var(--script); color: #642e3e; font-size: calc(var(--u) * 17); line-height: 1.1; transform: rotate(-10deg); text-align: center; }

/* E — contact */
.contact-grid { display: grid; grid-template-columns: calc(var(--u) * 482) 1fr; gap: calc(var(--u) * 14); align-items: start; }
.form-card, .ct-card { padding: calc(var(--u) * 20) calc(var(--u) * 24); }
.form-card h2, .ct-card h2, .faq-card h2 { display: flex; align-items: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 24); }
.form-card h2 svg, .ct-card h2 svg, .faq-card h2 svg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); color: var(--coral); }
.form-card > p { font-size: calc(var(--u) * 13.5); color: #23121c; }
.ifield { position: relative; margin-bottom: calc(var(--u) * 12); }
.ifield svg { position: absolute; left: calc(var(--u) * 18); top: calc(var(--u) * 15); width: calc(var(--u) * 16); height: calc(var(--u) * 16); color: var(--coral); pointer-events: none; }
.ifield input, .ifield select, .ifield textarea { height: calc(var(--u) * 47); padding-left: calc(var(--u) * 50); border-radius: calc(var(--u) * 12); font-size: calc(var(--u) * 13); border-color: #f1dcdc; }
.ifield textarea { height: calc(var(--u) * 125); padding-top: calc(var(--u) * 14); }
.form-card .btn { width: 100%; height: calc(var(--u) * 48); }
.form-card .privacy { display: flex; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 10.4); color: #5a4652; margin-top: calc(var(--u) * 12); }
.form-card .alt { font-size: calc(var(--u) * 11.5); text-align: center; margin-top: calc(var(--u) * 8); }
.form-card .alt button { background: none; border: 0; color: var(--coral); text-decoration: underline; cursor: pointer; font: inherit; }
.ct-list { list-style: none; margin: 0 0 calc(var(--u) * 14); padding: 0; }
.ct-list li { display: flex; align-items: center; gap: calc(var(--u) * 20); padding: calc(var(--u) * 8) 0; }
.ct-list i { width: calc(var(--u) * 46); height: calc(var(--u) * 46); border-radius: 50%; background: var(--coral); color: #fff; display: grid; place-items: center; flex: none; }
.ct-list i svg { width: 48%; height: 48%; }
.ct-list b { display: block; font-size: calc(var(--u) * 18); font-weight: 700; color: #14010f; }
.ct-list b a { text-decoration: none; }
.ct-list small { font-size: calc(var(--u) * 12); color: #3f2e3a; }
.ct-card .map { display: block; width: 100% !important; height: calc(var(--u) * 172); border-radius: calc(var(--u) * 14); margin: 0; }
.ohp-card { position: relative; margin-top: calc(var(--u) * 14); padding: calc(var(--u) * 18) calc(var(--u) * 128) calc(var(--u) * 18) calc(var(--u) * 58); background: rgba(253, 234, 234, .9); border-radius: calc(var(--u) * 20); overflow: hidden; min-height: calc(var(--u) * 180); }
.ohp-card h3 { font-size: calc(var(--u) * 17.5); margin-bottom: calc(var(--u) * 6); }
.ohp-card p { font-size: calc(var(--u) * 12); line-height: 1.5; color: #3f2e3a; margin: 0; }
.ohp-card .stores { gap: calc(var(--u) * 16); }
.ohp-card .store { height: calc(var(--u) * 43); }
.ohp-card > .doodle { left: calc(var(--u) * 14); top: calc(var(--u) * 20); width: calc(var(--u) * 36); color: #f4a0a8; }
.ohp-card .mini-phone { position: absolute; right: calc(var(--u) * -6); top: calc(var(--u) * -6); width: calc(var(--u) * 128); height: calc(var(--u) * 200); transform: rotate(8deg); border-radius: calc(var(--u) * 22); background: #17171a; padding: calc(var(--u) * 5); }
.ohp-card .mini-phone .scr { width: 100%; height: 100%; background: #fff; border-radius: calc(var(--u) * 18); padding: calc(var(--u) * 16) calc(var(--u) * 8) 0; overflow: hidden; }
.ohp-card .mini-phone .ttl { display: flex; gap: 4px; align-items: center; font-family: var(--logo); font-weight: 900; font-size: calc(var(--u) * 12); }
.ohp-card .mini-phone .ttl svg { width: calc(var(--u) * 14); height: calc(var(--u) * 13); color: var(--coral); }
.ohp-card .mini-phone img { width: 100%; height: calc(var(--u) * 52); object-fit: cover; border-radius: calc(var(--u) * 6); margin: calc(var(--u) * 5) 0; }
.ohp-card .mini-phone li { list-style: none; font-size: calc(var(--u) * 7); padding: calc(var(--u) * 3) 0; border-bottom: 1px solid #f2e6e6; display: flex; gap: 4px; align-items: center; }
.ohp-card .mini-phone li i { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 50%; display: inline-block; }
.ohp-card .mini-phone ul { margin: 0; padding: 0; }
.faq-card { position: relative; margin-top: calc(var(--u) * 22); padding: calc(var(--u) * 18) calc(var(--u) * 24) calc(var(--u) * 26); border-radius: calc(var(--u) * 20); overflow: hidden; background: #fdeeee url("/assets/img/hero.jpg") 120% 70% / auto 150% no-repeat; min-height: calc(var(--u) * 262); }
.faq-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(254, 246, 245, .98) 0%, rgba(254, 246, 245, .96) 52%, rgba(254, 246, 245, 0) 70%); }
.faq-card > * { position: relative; }
.faq-card .faq { width: calc(var(--u) * 506); }
.faq-card details { border-radius: calc(var(--u) * 12); padding: calc(var(--u) * 12) calc(var(--u) * 20); margin-bottom: calc(var(--u) * 10); box-shadow: 0 0 0 1px #f1dcdc inset; background: #fff; }
.faq-card summary { font-weight: 500; font-size: calc(var(--u) * 14.5); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-card summary::-webkit-details-marker { display: none; }
.faq-card summary::after { content: ""; width: calc(var(--u) * 9); height: calc(var(--u) * 9); border-right: 2px solid var(--coral); border-bottom: 2px solid var(--coral); transform: rotate(45deg) translateY(-3px); }
.faq-card details[open] summary::after { transform: rotate(-135deg); }
.faq-card .note { position: absolute; left: calc(var(--u) * 560); top: calc(var(--u) * 46); width: calc(var(--u) * 110); font-family: var(--script); color: #642e3e; font-size: calc(var(--u) * 18); line-height: 1.15; transform: rotate(-10deg); }

@media (max-width: 860px) {
  .phero.tall { height: auto; } .phero .note, .phero .doodle { display: none; }
  .pp-top { padding-top: 74px; }
  .detail { grid-template-columns: 1fr; }
  .gallery .main { height: 300px; }
  .gal-btn { top: 136px; }
  .info { padding-right: 0; } .info .side-note, .info .doodle { display: none; }
  .info h1 { font-size: 28px; } .info .btn, .note-card { width: 100%; }
  .facts-card li { font-size: 15px; }
  .inc-row { padding-right: 0; } .inc-row div { font-size: 14px; width: calc(50% - 12px); }
  .sub-card .corner-note { display: none; }
  .parents-row { grid-template-columns: 1fr 1fr; } .parents-row > h2, .parents-row p { grid-column: 1 / -1; } .parents-row > .hrt { display: none; }
  .parents-row p { border: 0; padding: 0; font-size: 15px; }
  .about-grid, .contact-grid { grid-template-columns: 1fr; }
  .about-card { grid-template-columns: 1fr; } .about-card .txt p { font-size: 15px; }
  .tl li > div { font-size: 13px; } .tl li > div strong { font-size: 14px; }
  .moments { grid-template-columns: 1fr 1fr; }
  .gcard p, .tip2 p { font-size: 14px; }
  .warn2 { height: auto; padding-bottom: 220px; background-size: auto 240px; background-position: 70% bottom; }
  .warn2::before { background: linear-gradient(180deg, rgba(253,234,234,.98) 0%, rgba(253,234,234,.95) 60%, rgba(253,234,234,0) 80%); }
  .warn2 .in { grid-template-columns: 1fr; padding: 24px 16px 0; } .warn2 .note { display: none; }
  .ohp-card { padding: 18px 18px 18px 18px; } .ohp-card .mini-phone, .ohp-card > .doodle { display: none; }
  .faq-card { background-image: none; } .faq-card .faq { width: auto; } .faq-card .note { display: none; }
  .ifield input, .ifield select { height: 50px; font-size: 16px; } .ct-list b { font-size: 17px; } .ct-list small { font-size: 13px; }
  .dogcard > img { height: 280px; }
}
.pawi-wrap svg, .form-card h2 > span:first-child svg, .ct-card h2 > span:first-child svg, .faq-card h2 > span:first-child svg { width: calc(var(--u) * 30); height: calc(var(--u) * 28); color: var(--coral); display: block; }
.ct-list i svg { color: #fff; }
.ohp-card .mini-phone .ttl span svg { width: calc(var(--u) * 14); height: calc(var(--u) * 13); color: var(--coral); }
.gcard .ic-b svg, .gcard .okbox span svg { width: 100%; height: 100%; display: block; }
.gcard .okbox > span:first-child { width: calc(var(--u) * 38); height: calc(var(--u) * 42); flex: none; }
.tip2 .ico svg { display: block; }
.warn2 .in > span svg { width: calc(var(--u) * 52); height: calc(var(--u) * 48); color: var(--coral); }

.ohp-card .store { padding: 0 calc(var(--u) * 10); white-space: nowrap; } .ohp-card .store b { font-size: calc(var(--u) * 14); }
.desc-more summary { font-family: var(--head); font-weight: 800; font-size: calc(var(--u) * 23); list-style: none; }
.desc-more summary::-webkit-details-marker { display: none; }
.desc-more summary small { font-family: var(--sans); font-weight: 500; font-size: calc(var(--u) * 12); color: var(--coral); margin-left: calc(var(--u) * 10); text-decoration: underline; }
.desc-more[open] summary small { display: none; }
.desc-more { background: none; box-shadow: none; padding: 0; margin: 0; }
.detail > * { min-width: 0; }
.info { padding-right: 0; }
.info .facts-card { width: calc(var(--u) * 303); }
.info .note-card { width: 100%; }
.info .side-note { top: calc(var(--u) * -6); }
@media (max-width: 860px) { .info .facts-card { width: 100%; } }
@media (max-width: 860px) {
  .docs { grid-template-columns: 1fr 1fr; gap: 12px; }
  .doc .th { height: 120px; }
  .sec-h { flex-wrap: wrap; gap: 6px; }
  .appband { padding-top: 330px; }
  .about-card > .script { margin-top: 12px !important; grid-column: 1 / -1 !important; }
  .story-sec .quote { margin-top: 14px; }
  .inc-row div { width: auto; }
}
.wm-opts { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; background: #fff7f6; border: 1px dashed #efc3c3; border-radius: 12px; padding: 9px 14px; margin-bottom: 10px; font-size: 13.5px; }
.wm-opts span { font-weight: 600; color: var(--ink-2); }
.wm-opts label { display: flex; gap: 7px; align-items: center; font-weight: 600; cursor: pointer; }
.wm-opts input { width: 18px; height: 18px; accent-color: var(--coral); }
.ph-it .wm-badge { position: absolute; left: 4px; right: 4px; bottom: 26px; background: rgba(35, 2, 13, .72); color: #fff; font-size: 9.5px; font-weight: 600; border-radius: 6px; padding: 2px 4px; text-align: center; }

/* ---------- trust: extra checks ---------- */
.trust-more { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 8) calc(var(--u) * 10); margin-top: calc(var(--u) * 14); padding-top: calc(var(--u) * 14); border-top: 1px solid #ecc9c9; }
.trust-more:empty { display: none; }
.trust-more span, .trust-more a { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); background: rgba(255, 255, 255, .75); border-radius: 999px; padding: calc(var(--u) * 5) calc(var(--u) * 12); font-size: calc(var(--u) * 11.2); font-weight: 600; color: #23121c; box-shadow: 0 0 0 1px #f0d4d4 inset; }
.trust-more span svg { width: calc(var(--u) * 12); height: calc(var(--u) * 12); color: var(--green); }
.trust-more a { color: var(--coral); text-decoration: none; background: #fff; }
.trust-more a svg { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.trust > div.trust-more { padding-left: 0; padding-right: 0; border-left: 0; }

/* ---------- viewer ---------- */
.lb { position: fixed; inset: 0; background: rgba(25, 10, 14, .9); display: none; align-items: center; justify-content: center; z-index: 300; padding: 20px 70px; }
.lb.open { display: flex; }
.lb figure { margin: 0; text-align: center; }
.lb img { max-height: 84vh; max-width: 100%; border-radius: 12px; display: block; margin: 0 auto; }
.lb figcaption { color: #fff; font-size: 15px; margin-top: 10px; opacity: .9; }
.lb button { position: absolute; background: #fff; border: 0; border-radius: 50%; width: 46px; height: 46px; cursor: pointer; display: grid; place-items: center; font-size: 24px; color: #23020d; }
.lb button svg { width: 55%; height: 55%; }
.lb .lb-x { top: 16px; right: 18px; }
.lb .lb-p { left: 14px; top: 50%; transform: translateY(-50%); }
.lb .lb-n { right: 14px; top: 50%; transform: translateY(-50%); }
.lb.single .lb-p, .lb.single .lb-n { display: none; }
@media (max-width: 860px) { .lb { padding: 60px 8px; } .lb .lb-p, .lb .lb-n { top: auto; bottom: 14px; transform: none; } }

/* ---------- dog sheet ---------- */
.dogsheet { position: fixed; inset: 0; z-index: 250; background: rgba(35, 2, 13, .45); display: none; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 40px 16px; }
.dogsheet.open { display: flex; }
.ds-in { position: relative; background: var(--panel); border-radius: 22px; width: min(860px, 100%); padding: 26px 28px 30px; box-shadow: 0 30px 80px rgba(60, 10, 20, .35); }
.ds-x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; font-size: 22px; cursor: pointer; box-shadow: var(--shadow-s); }
.ds-h { display: grid; grid-template-columns: 170px 1fr; gap: 20px; align-items: center; margin-bottom: 10px; }
.ds-h img { width: 170px; height: 170px; object-fit: cover; border-radius: 18px; }
.ds-h h2 { font-size: 30px; display: flex; gap: 10px; align-items: center; margin: 0 0 4px; }
.ds-h h2 svg { width: 26px; height: 26px; }
.ds-h p { font-size: 15px; margin: 0 0 6px; }
.ds-in h3 { font-size: 18px; margin: 18px 0 10px; }
.ds-in h3 small { font-family: var(--sans); font-weight: 500; font-size: 13px; color: var(--ink-2); }
.ds-ph { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.ds-ph img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.ds-in .docs { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.ds-in .doc .th { height: 120px; }
.ds-in .doc .t { font-size: 14px; }
@media (max-width: 600px) { .ds-h { grid-template-columns: 1fr; } .ds-h img { width: 100%; height: 240px; } .ds-in { padding: 20px 16px; } .ds-in .docs { grid-template-columns: 1fr 1fr; } }

/* ---------- puppy page: parent docs, links ---------- */
.linkbtn { background: none; border: 0; padding: 0; color: var(--coral); font: 500 calc(var(--u) * 12.5) var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.linkbtn svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.pdocs { margin-top: calc(var(--u) * 12); }
.pdocs + .pdocs { margin-top: calc(var(--u) * 20); padding-top: calc(var(--u) * 16); border-top: 1px dashed #efcaca; }
.pdocs-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: calc(var(--u) * 10); flex-wrap: wrap; }
.pdocs-h b { font-family: var(--head); font-size: calc(var(--u) * 15); }
.thumbs { display: flex; overflow-x: auto; scrollbar-width: thin; }
.thumbs button { flex: 0 0 calc((100% - 4 * var(--u) * 8) / 5); }
.facts-card li span { display: block; }
.facts-card li svg[viewBox="0 0 24 24"] { flex: none; }
.info .facts-card { width: calc(var(--u) * 370); }
@media (max-width: 860px) { .thumbs button { flex-basis: 70px; height: 70px; } .linkbtn { font-size: 14px; } .pdocs-h b { font-size: 16px; } .trust-more span, .trust-more a { font-size: 13px; padding: 6px 12px; } .trust-more { margin: 6px 12px 14px; } }
.info h1 { font-size: calc(var(--u) * 25); }
.info .side-note { top: calc(var(--u) * -30); right: calc(var(--u) * -18); width: calc(var(--u) * 82); font-size: calc(var(--u) * 16.5); line-height: calc(var(--u) * 16.5); }
[data-after] .appband h2 { max-width: calc(var(--u) * 470); }
[data-after] .appband .note { top: calc(var(--u) * 70); }

/* ---------- story: real photos, no composite ---------- */
.story-sec { height: auto; margin-top: calc(var(--u) * 18); padding: calc(var(--u) * 10) 0 calc(var(--u) * 30); }
.story-grid { display: grid; grid-template-columns: calc(var(--u) * 400) 1fr; gap: calc(var(--u) * 40); align-items: center; }
.story-grid .story-txt { width: auto; padding: 0; }
.story-pics { position: relative; height: calc(var(--u) * 330); }
.story-pics a { position: absolute; display: block; border-radius: calc(var(--u) * 22); overflow: hidden; box-shadow: var(--shadow); border: calc(var(--u) * 5) solid #fff; }
.story-pics img { width: 100%; height: 100%; object-fit: cover; }
.story-pics .sp-main { left: calc(var(--u) * 150); top: 0; width: calc(var(--u) * 210); height: calc(var(--u) * 330); }
.story-pics .sp-main img { object-position: center 15%; }
.story-pics .sp-2 { left: 0; top: calc(var(--u) * 30); width: calc(var(--u) * 170); height: calc(var(--u) * 125); transform: rotate(-4deg); }
.story-pics .sp-3 { left: calc(var(--u) * 20); top: calc(var(--u) * 175); width: calc(var(--u) * 150); height: calc(var(--u) * 115); transform: rotate(3deg); }
.story-pics .quote { left: calc(var(--u) * 380); top: calc(var(--u) * 40); }
.story-pics .badge-1 { position: absolute; left: calc(var(--u) * 300); top: calc(var(--u) * 270); background: #fff; border-radius: 999px; padding: calc(var(--u) * 7) calc(var(--u) * 14); font-weight: 700; font-size: calc(var(--u) * 12.5); box-shadow: var(--shadow-s); color: #23121c; }
.phero.story-hero { background: linear-gradient(120deg, #fde9e9 0%, #fbe0e2 55%, #f8d6da 100%); }
.phero.story-hero::before { display: none; }
.sh-pic { position: absolute; right: calc((100vw - var(--u) * 924) / 2 + var(--u) * 60); top: calc(var(--u) * 70); width: calc(var(--u) * 230); height: calc(var(--u) * 300); border-radius: calc(var(--u) * 26); overflow: hidden; border: calc(var(--u) * 6) solid #fff; box-shadow: var(--shadow); transform: rotate(3deg); }
.sh-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; }
@media (max-width: 860px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-pics { height: 360px; margin: 10px 0 0; }
  .story-pics .sp-main { left: auto; right: 0; width: 200px; height: 300px; }
  .story-pics .sp-2 { width: 150px; height: 110px; top: 10px; }
  .story-pics .sp-3 { width: 140px; height: 105px; top: 150px; }
  .story-pics .quote { position: absolute; left: 0; top: 270px; margin: 0; max-width: 210px; }
  .story-pics .badge-1 { left: auto; right: 10px; top: 310px; }
  .sh-pic { display: none; }
}

/* ---------- trust: neat grid of extra checks ---------- */
.trust-more { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 10) calc(var(--u) * 16); justify-content: stretch; padding: calc(var(--u) * 16) calc(var(--u) * 26) calc(var(--u) * 2); }
.trust-more span, .trust-more a { background: none; box-shadow: none; border-radius: 0; padding: 0; justify-content: flex-start; font-size: calc(var(--u) * 11.6); font-weight: 600; line-height: 1.3; }
.trust-more span svg { flex: none; width: calc(var(--u) * 18); height: calc(var(--u) * 18); padding: calc(var(--u) * 4); border-radius: 50%; background: var(--green); color: #fff; }
.trust-more a { font-weight: 700; }
@media (max-width: 860px) { .trust-more { grid-template-columns: 1fr 1fr; padding: 14px 16px 6px; margin: 0; } .trust-more span, .trust-more a { font-size: 13px; } }
/* dog sheet facts, puppy health/growth */
.ds-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; margin: 8px 0 0; }
.ds-facts div { display: flex; gap: 8px; font-size: 14.5px; border-bottom: 1px dashed #efcaca; padding: 4px 0; }
.ds-facts dt { color: var(--ink-2); min-width: 108px; }
.ds-facts dd { margin: 0; font-weight: 600; }
.ds-about { font-size: 14.5px; margin: 10px 0 0; }
.hg { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 26); margin-top: calc(var(--u) * 8); }
.hg h3 { font-size: calc(var(--u) * 14); margin-bottom: calc(var(--u) * 8); }
.hl { list-style: none; margin: 0; padding: 0; }
.hl li { display: grid; grid-template-columns: auto 1fr auto; gap: calc(var(--u) * 10); align-items: center; padding: calc(var(--u) * 6) 0; border-bottom: 1px dashed #efcaca; font-size: calc(var(--u) * 12.5); }
.hl i { width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; }
.hl i svg { width: 60%; height: 60%; }
.hl span { color: var(--ink-2); }
.gt { width: 100%; border-collapse: collapse; font-size: calc(var(--u) * 12.5); }
.gt th { text-align: left; color: var(--ink-2); font-weight: 600; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.gt td { padding: 6px; border-bottom: 1px dashed #efcaca; }
button.parent { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; padding: 0; }
button.parent small { display: block; color: var(--coral); text-decoration: underline; font-size: calc(var(--u) * 11.5); margin-top: 2px; }
@media (max-width: 860px) { .ds-facts { grid-template-columns: 1fr; } .hg { grid-template-columns: 1fr; } .hl li, .gt { font-size: 14px; } button.parent small { font-size: 13px; } }
.tbl.growth { min-width: 0; max-width: 520px; } .tbl.growth input { padding: 7px 9px; font-size: 14px; }
.story-pics .quote { left: calc(var(--u) * 318); top: calc(var(--u) * 22); width: calc(var(--u) * 160); }
.story-pics .badge-1 { left: calc(var(--u) * 250); }
@media (max-width: 860px) { .story-pics .quote { left: 0; top: 270px; width: auto; } }

/* ---------- trust: extra checks as even cards (owner 20.10 „подреди по-добре“) ---------- */
.trust-more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 10); padding: calc(var(--u) * 16) 0 0; margin-top: calc(var(--u) * 16); }
.trust-more span, .trust-more a { display: flex; align-items: center; gap: calc(var(--u) * 10); min-height: calc(var(--u) * 46); padding: calc(var(--u) * 8) calc(var(--u) * 12); background: rgba(255, 255, 255, .78); border-radius: calc(var(--u) * 12); box-shadow: 0 0 0 1px #f2d6d6 inset; font-size: calc(var(--u) * 11.4); font-weight: 600; color: #23121c; text-decoration: none; }
.trust-more span i { flex: none; width: calc(var(--u) * 24); height: calc(var(--u) * 24); border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; }
.trust-more span i svg { width: 55%; height: 55%; padding: 0; background: none; }
.trust-more em, .lparent em { font-style: normal; }
.trust-more a { justify-content: center; background: var(--coral); color: #fff; box-shadow: none; }
.trust-more a svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }

/* ---------- what you get: icon cards ---------- */
.inc-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 12); }
.inc-grid > div:not(.inc-note) { display: flex; align-items: center; gap: calc(var(--u) * 12); background: linear-gradient(180deg, #fff, #fff6f5); border-radius: calc(var(--u) * 14); padding: calc(var(--u) * 12); box-shadow: 0 0 0 1px #f4dede inset; }
.inc-grid i { flex: none; width: calc(var(--u) * 46); height: calc(var(--u) * 46); border-radius: calc(var(--u) * 14); background: linear-gradient(135deg, #fde4e6, #fbd0d5); color: var(--coral-d); display: grid; place-items: center; }
.inc-grid i svg { width: 58%; height: 58%; }
.inc-grid b { display: block; font-size: calc(var(--u) * 13); }
.inc-grid small { display: block; font-size: calc(var(--u) * 10.6); color: var(--ink-2); line-height: 1.35; margin-top: 2px; }
.inc-note { display: flex; align-items: center; justify-content: center; text-align: center; font-family: var(--script); color: #a03c55; font-size: calc(var(--u) * 17); line-height: 1.1; transform: rotate(-4deg); }

/* ---------- parents: a love card ---------- */
.love-card { position: relative; margin-top: calc(var(--u) * 14); border-radius: calc(var(--u) * 22); padding: calc(var(--u) * 24) calc(var(--u) * 30) calc(var(--u) * 26); background: radial-gradient(120% 140% at 50% 0%, #fff 0%, #fde8ea 55%, #fbd6db 100%); box-shadow: var(--shadow-s); text-align: center; overflow: hidden; }
.love-card h2 { font-family: var(--script); font-weight: 700; font-size: calc(var(--u) * 38); color: var(--coral-d); letter-spacing: 0; margin: 0; }
.love-card h2 .hrt { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.love-sub { max-width: calc(var(--u) * 520); margin: calc(var(--u) * 4) auto calc(var(--u) * 16); font-size: calc(var(--u) * 13); color: #4a3640; }
.love-row { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 44); }
.lparent { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; align-items: center; }
.lparent .ring { width: calc(var(--u) * 150); height: calc(var(--u) * 150); border-radius: 50%; padding: calc(var(--u) * 5); background: conic-gradient(from 200deg, #f28c97, #e6485c, #fbc4cb, #f28c97); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(230, 72, 92, .25); transition: transform .2s; }
.lparent:hover .ring { transform: scale(1.04) rotate(-2deg); }
.lparent .ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: calc(var(--u) * 4) solid #fff; }
.lparent em { margin-top: calc(var(--u) * 10); font-family: var(--script); font-size: calc(var(--u) * 20); color: var(--coral-d); line-height: 1; }
.lparent b { font-family: var(--head); font-size: calc(var(--u) * 18); }
.lparent small { font-size: calc(var(--u) * 11.5); color: var(--ink-2); }
.lparent u { margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 11.5); color: var(--coral); text-underline-offset: 3px; }
.love-heart { width: calc(var(--u) * 54); height: calc(var(--u) * 54); color: var(--coral); animation: beat 1.6s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(230, 72, 92, .3)); }
.love-heart svg { width: 100%; height: 100%; }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.15); } 30% { transform: scale(.98); } 45% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .love-heart { animation: none; } }

/* ---------- sub-page hero never clips its content ---------- */
.phero.tall { height: auto; min-height: calc(var(--u) * 400); padding-bottom: calc(var(--u) * 52); }
.phero.story-hero .note { left: calc(var(--u) * 560) !important; top: calc(var(--u) * 120) !important; }

@media (max-width: 860px) {
  .trust-more { grid-template-columns: 1fr 1fr; padding: 12px 12px 4px; margin: 0; }
  .trust-more span, .trust-more a { font-size: 13px; min-height: 52px; }
  .inc-grid { grid-template-columns: 1fr 1fr; } .inc-grid b { font-size: 14px; } .inc-grid small { font-size: 12px; } .inc-note { grid-column: 1 / -1; font-size: 20px; }
  .love-row { gap: 14px; } .lparent .ring { width: 120px; height: 120px; } .love-heart { width: 34px; height: 34px; } .love-card h2 { font-size: 34px; } .love-sub { font-size: 14.5px; }
  .phero.tall { padding-bottom: 170px; }
}
.trust > div.trust-more { display: grid; padding: calc(var(--u) * 16) 0 0; border-left: 0; border-top: 1px solid #ecc9c9; }
@media (max-width: 860px) { .trust > div.trust-more { padding: 12px; } }

/* ---------- nav with 7 items ---------- */
.nav { gap: calc(var(--u) * 22); margin-left: calc(var(--u) * 44); }
.nav a { font-size: calc(var(--u) * 13); }

/* ---------- album / happy owners ---------- */
.happy-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 12); }
.happy-strip a, .album-grid a { position: relative; display: block; border-radius: calc(var(--u) * 16); overflow: hidden; box-shadow: var(--shadow-s); aspect-ratio: 1; background: #f6dede; }
.happy-strip img, .album-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.happy-strip a:hover img, .album-grid a:hover img { transform: scale(1.04); }
.happy-strip span, .album-grid span { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(var(--u) * 20) calc(var(--u) * 12) calc(var(--u) * 10); background: linear-gradient(transparent, rgba(35, 2, 13, .7)); color: #fff; font-size: calc(var(--u) * 12); font-weight: 600; }
.album-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 12); }
.album-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: calc(var(--u) * 16); }
.album-tabs button { border: 0; background: #fff; box-shadow: 0 0 0 1.5px #f1d2d2 inset; border-radius: 999px; padding: 8px 16px; font: 600 calc(var(--u) * 12.5) var(--sans); cursor: pointer; color: var(--ink); }
.album-tabs button.on { background: var(--coral); color: #fff; box-shadow: none; }

/* ---------- blog ---------- */
.post-card { overflow: hidden; text-decoration: none; display: flex; flex-direction: column; }
.post-card .ph { position: relative; height: calc(var(--u) * 170); background: #f6dede; }
.post-card .ph img, .post-card .ph-empty { width: 100%; height: 100%; object-fit: cover; }
.post-card .ph-empty { background: #fbe0e2 url("/assets/img/hero.jpg") 70% 40% / cover; opacity: .55; }
.post-card .ph .tag { position: absolute; left: 12px; top: 12px; }
.post-card .bd { padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 16); }
.post-card small { color: var(--ink-2); font-size: calc(var(--u) * 11); }
.post-card h3 { font-size: calc(var(--u) * 16); margin: 4px 0 6px; }
.post-card p { font-size: calc(var(--u) * 12.5); color: #3f2e3a; margin: 0 0 8px; }
.post-card .more { color: var(--coral); font-weight: 600; font-size: calc(var(--u) * 12.5); }
.article-wrap { max-width: calc(var(--u) * 760); }
.article { background: var(--card); border-radius: calc(var(--u) * 22); box-shadow: var(--shadow-s); padding: calc(var(--u) * 30) calc(var(--u) * 40) calc(var(--u) * 36); }
.article h1 { font-size: calc(var(--u) * 34); margin: calc(var(--u) * 10) 0 calc(var(--u) * 6); letter-spacing: -.03em; }
.article .meta { color: var(--ink-2); font-size: calc(var(--u) * 12.5); }
.article .cover { width: 100%; max-height: calc(var(--u) * 420); object-fit: cover; border-radius: calc(var(--u) * 16); margin: calc(var(--u) * 14) 0; }
.article-body { font-size: calc(var(--u) * 15.5); line-height: 1.7; color: #23121c; }
.article-body h2 { font-size: calc(var(--u) * 23); margin: 1.4em 0 .5em; }
.article-body h3 { font-size: calc(var(--u) * 18); margin: 1.2em 0 .4em; }
.article-body img { width: 100%; border-radius: calc(var(--u) * 14); margin: 1em 0; }
.article-body a { color: var(--coral-d); }
.article-body ul, .article-body ol { padding-left: 1.3em; }
.article-cta { margin-top: calc(var(--u) * 20); text-align: center; }
.article-cta .btn { margin: 4px; }
@media (max-width: 860px) {
  .happy-strip, .album-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .happy-strip span, .album-grid span { font-size: 12px; }
  .article { padding: 22px 18px; } .article h1 { font-size: 28px; } .article-body { font-size: 16.5px; } .article-body h2 { font-size: 22px; }
  .post-card .ph { height: 200px; } .post-card h3 { font-size: 18px; } .post-card p { font-size: 14px; }
  .album-tabs button { font-size: 14px; }
}
/* admin: album + posts */
.alb-up { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 14px 0 18px; }
.alb-up .field select { min-width: 200px; }
.alb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.alb-it { background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px #f2dcdc inset; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.alb-it img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.alb-it input, .alb-it select { padding: 7px 9px; font-size: 13px; }
.alb-row { display: flex; gap: 4px; align-items: center; } .alb-row select { flex: 1; } .alb-row .ic { margin-left: 0; flex: none; }
.md-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.md-bar button, .md-bar label { background: #fff; border: 1.5px solid var(--line); border-radius: 10px; padding: 6px 12px; font: 600 13px var(--sans); cursor: pointer; color: var(--ink); }
.md-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.md-prev { background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px #f1dcdc inset; padding: 14px 18px; min-height: 360px; max-height: 620px; overflow: auto; font-size: 15px; }
.cover-pick { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .cover-pick img { width: 90px; height: 60px; object-fit: cover; border-radius: 8px; }
@media (max-width: 860px) { .md-split { grid-template-columns: 1fr; } }

/* ---------- two-puppy hero for sub-pages; header readable on photos ---------- */
.phero { background-image: url("/assets/img/hero2.jpg"); background-position: right center; }
.phero::before { background: linear-gradient(90deg, rgba(253, 236, 236, .94) 0%, rgba(253, 236, 236, .8) 36%, rgba(253, 236, 236, 0) 52%); }
.phero .note:not([style*="395"]) { left: calc(var(--u) * 912) !important; top: calc(var(--u) * 78) !important; width: calc(var(--u) * 96) !important; }
.phero .doodle.paw1 { left: calc(var(--u) * 955) !important; top: calc(var(--u) * 205) !important; }
.site-h::before { content: ""; position: absolute; inset: 0 0 -20px 0; background: linear-gradient(180deg, rgba(253, 241, 241, .92) 0%, rgba(253, 241, 241, .65) 60%, rgba(253, 241, 241, 0) 100%); pointer-events: none; z-index: -1; }
.faq-card { background-image: url("/assets/img/hero2.jpg"); background-size: auto 115%; background-position: 115% 60%; }
.faq-card::before { background: linear-gradient(90deg, rgba(254, 246, 245, .98) 0%, rgba(254, 246, 245, .96) 50%, rgba(254, 246, 245, 0) 64%); }
.faq-card .note { left: calc(var(--u) * 548) !important; top: calc(var(--u) * 150) !important; }

/* ---------- real app screens in a phone frame ---------- */
.appband .phone.real { padding: calc(var(--u) * 6); background: #111; border-radius: calc(var(--u) * 30) calc(var(--u) * 30) 0 0; overflow: hidden; }
.appband .phone.real img { width: 100%; height: auto; border-radius: calc(var(--u) * 24) calc(var(--u) * 24) 0 0; display: block; }
.ohp-card .mini-phone.real { padding: calc(var(--u) * 5); overflow: hidden; }
.ohp-card .mini-phone.real img { width: 100%; height: auto; border-radius: calc(var(--u) * 17); display: block; }
.faq-card .note { display: none; }

/* hero notes and paws off the sub-page photo — on some screen widths they fell on the puppies */
.phero .note, .phero .doodle.paw1 { display: none; }

/* ---------- /proverki guide ---------- */
.guide-intro { font-size: calc(var(--u) * 13.5); max-width: calc(var(--u) * 720); margin-bottom: calc(var(--u) * 16); }
.guide { display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.g-item { background: var(--card); border-radius: calc(var(--u) * 16); box-shadow: var(--shadow-s); padding: 0; margin: 0; overflow: hidden; }
.g-item summary { display: grid; grid-template-columns: calc(var(--u) * 30) calc(var(--u) * 44) 1fr auto; gap: calc(var(--u) * 12); align-items: center; padding: calc(var(--u) * 14) calc(var(--u) * 18); list-style: none; cursor: pointer; }
.g-item summary::-webkit-details-marker { display: none; }
.g-n { width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: 50%; background: var(--coral-soft); color: var(--coral); font-weight: 800; display: grid; place-items: center; font-size: calc(var(--u) * 13); }
.g-ic { width: calc(var(--u) * 42); height: calc(var(--u) * 42); border-radius: calc(var(--u) * 12); background: linear-gradient(135deg, #fde4e6, #fbd0d5); color: var(--coral-d); display: grid; place-items: center; }
.g-ic svg { width: 58%; height: 58%; }
.g-t b { display: block; font-family: var(--head); font-size: calc(var(--u) * 16); }
.g-t small { color: var(--ink-2); font-size: calc(var(--u) * 12); }
.g-ok { display: flex; gap: 6px; align-items: center; font-size: calc(var(--u) * 11.5); font-weight: 600; color: var(--ink-2); cursor: pointer; }
.g-ok input { width: 18px; height: 18px; accent-color: var(--green); }
.g-item[open] summary { border-bottom: 1px dashed #efcaca; }
.g-body { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: calc(var(--u) * 16); padding: calc(var(--u) * 16) calc(var(--u) * 18) calc(var(--u) * 18); font-size: calc(var(--u) * 12.8); line-height: 1.55; }
.g-body h4 { margin: 0 0 6px; font-size: calc(var(--u) * 12.5); text-transform: uppercase; letter-spacing: .08em; color: var(--coral-d); }
.g-body ul { margin: 0; padding-left: 1.1em; } .g-body li { margin-bottom: 4px; } .g-body p { margin: 0 0 8px; }
.g-ours { background: #ecf7f0; border-radius: calc(var(--u) * 12); padding: calc(var(--u) * 12) calc(var(--u) * 14); }
.g-ours h4 { color: #23704a; }
.guide-foot { margin-top: calc(var(--u) * 14); font-size: calc(var(--u) * 12.5); }
@media (max-width: 860px) {
  .g-item summary { grid-template-columns: 28px 40px 1fr; } .g-ok { grid-column: 3; }
  .g-t b { font-size: 16px; } .g-t small { font-size: 13px; } .g-body { grid-template-columns: 1fr; font-size: 15px; } .g-body h4 { font-size: 13px; } .guide-intro { font-size: 15px; }
}

/* =====================  v2 · concept #5 (white · charcoal · red)  ===================== */
body { background: #fff; color: var(--ink); letter-spacing: -.003em; }
h1, h2, h3 { letter-spacing: -.02em; font-weight: 700; }
.heart::after { display: none; }
.doodle, .hero .note, .phero .note, .inc-note .hrt { display: none !important; }

/* header */
.site-h { position: sticky; top: 0; background: rgba(255, 255, 255, .97); border-bottom: 1px solid #ececf0; backdrop-filter: blur(8px); }
.site-h::before { display: none; }
.site-h .wrap { height: calc(var(--u) * 52); width: calc(var(--u) * 928); padding: 0; }
.logo svg { width: calc(var(--u) * 31); height: calc(var(--u) * 29); color: var(--coral); }
.logo b { font-family: var(--sans); font-weight: 700; font-size: calc(var(--u) * 18.5); letter-spacing: -.02em; line-height: 1; }
.logo small { font-size: calc(var(--u) * 9.8); letter-spacing: 0; text-transform: none; color: #565761; font-weight: 500; margin-top: calc(var(--u) * 3); }
.nav { margin-left: auto; gap: calc(var(--u) * 26); }
.nav a { font-size: calc(var(--u) * 11.6); font-weight: 500; color: #3a3c45; border: 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--coral); }
.btn.cta { margin-left: calc(var(--u) * 46); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 17); font-size: calc(var(--u) * 12); }

/* buttons, pills */
.btn { background: var(--coral); border-radius: calc(var(--u) * 4); box-shadow: none; height: calc(var(--u) * 35); padding: 0 calc(var(--u) * 18); font-size: calc(var(--u) * 12.5); font-weight: 600; letter-spacing: -.005em; }
.btn:hover { background: var(--coral-d); filter: none; }
.btn.ghost { background: #fff; color: var(--coral); box-shadow: inset 0 0 0 1.5px var(--coral); }
.btn.ghost:hover { background: #fff5f6; }
.pill { flex: none; align-self: flex-start; font-size: calc(var(--u) * 9.6); font-weight: 600; border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 3) calc(var(--u) * 7); }
.pill.available { background: #fdeaed; color: var(--coral); }
.pill.reserved { background: #ececef; color: #43454f; }
.pill.taken { background: #f1f1f3; color: #8a8c96; }
.tag { border-radius: calc(var(--u) * 3); font-weight: 600; }
.tag.available { background: var(--coral); } .tag.reserved { background: #43454f; } .tag.soft { background: #fdeaed; color: var(--coral); }

/* hero */
.hero5 { position: relative; height: calc(var(--u) * 273); background: #f5f1ec url("/assets/img/hero5.jpg") 62% center / cover no-repeat; }
.hero5::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(250, 248, 245, .92) 0%, rgba(250, 248, 245, .78) 34%, rgba(250, 248, 245, 0) 52%); }
.hero5 .wrap { position: relative; width: calc(var(--u) * 928); padding-top: calc(var(--u) * 53); }
.hero5 .eyebrow { font-size: calc(var(--u) * 9.5); letter-spacing: .14em; color: #48474f; font-weight: 600; margin-bottom: calc(var(--u) * 9); }
.hero5 h1 { font-size: calc(var(--u) * 41); line-height: calc(var(--u) * 38); letter-spacing: -.028em; color: #141415; margin: 0; }
.hero5 .lead { font-size: calc(var(--u) * 13); line-height: calc(var(--u) * 19.5); color: #232225; margin: calc(var(--u) * 13) 0 calc(var(--u) * 16); }
.hero5-btns { display: flex; gap: calc(var(--u) * 18); }
.hero5-btns .btn:first-child { width: calc(var(--u) * 164); } .hero5-btns .btn.ghost { width: calc(var(--u) * 109); }

/* trust strip */
.strip5 { background: #f7f7f9; border-bottom: 1px solid #efeff2; }
.strip5 .wrap { width: calc(var(--u) * 928); display: grid; grid-template-columns: repeat(4, 1fr); height: calc(var(--u) * 63); align-items: center; }
.strip5 .wrap > div { display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 14); font-size: calc(var(--u) * 12); font-weight: 500; color: #2f313a; }
.strip5 .wrap > div + div { border-left: 1px solid #e2e2e6; }
.strip5 svg { width: calc(var(--u) * 24); height: calc(var(--u) * 24); color: var(--coral); flex: none; }

/* sections */
.sec5 { padding: calc(var(--u) * 20) 0 calc(var(--u) * 24); }
.sec5 .wrap { width: calc(var(--u) * 928); }
.sec5-h { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: calc(var(--u) * 16); }
.sec5-h.center { display: block; text-align: center; }
.sec5-h h2 { font-size: calc(var(--u) * 22.5); margin: 0; }
.sec5-h p { font-size: calc(var(--u) * 12); color: #626572; margin: calc(var(--u) * 6) 0 0; }
.sec5-h a { color: var(--coral); font-size: calc(var(--u) * 11); font-weight: 600; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.sec5-h a svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }

/* puppy cards */
.card { border-radius: calc(var(--u) * 6); box-shadow: 0 0 0 1px #ececf0, 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(20, 20, 30, .04); }
.pup .ph { height: calc(var(--u) * 144); border-radius: calc(var(--u) * 6) calc(var(--u) * 6) 0 0; background: #f3f3f5; }
.pup .ph .tag { display: none; }
.pup .bd { padding: calc(var(--u) * 12) calc(var(--u) * 13) calc(var(--u) * 13); min-height: 0; align-items: flex-start; }
.pup .bd b { font-weight: 400; font-size: calc(var(--u) * 11.6); color: #33353d; }
.pup .bd b span { font-weight: 400; }
.pup .price { color: var(--coral); font-size: calc(var(--u) * 15.5); font-weight: 700; margin-top: calc(var(--u) * 3); }
.pup .go { display: none; }
.grid.g3 { gap: calc(var(--u) * 14); }

/* story */
.story5 { padding: calc(var(--u) * 26) 0 calc(var(--u) * 28); }
.story5-grid { display: grid; grid-template-columns: calc(var(--u) * 453) 1fr; align-items: center; }
.story5-txt { padding: 0 calc(var(--u) * 22) 0 calc((100vw - var(--u) * 928) / 2); }
.story5-txt h2 { font-size: calc(var(--u) * 23); margin: 0 0 calc(var(--u) * 4); }
.story5-txt .sub { font-size: calc(var(--u) * 12.5); color: #565865; margin: 0 0 calc(var(--u) * 13); }
.story5-txt p { font-size: calc(var(--u) * 11.6); line-height: calc(var(--u) * 17.5); color: #5d5f69; }
.story5-txt p b { color: #23242a; font-weight: 600; }
.sign { display: flex; align-items: center; gap: calc(var(--u) * 16); margin: calc(var(--u) * 16) 0 calc(var(--u) * 18); }
.sign i { width: calc(var(--u) * 42); height: 2px; background: var(--coral); flex: none; }
.sign b { display: block; font-weight: 500; font-size: calc(var(--u) * 11.5); color: #2b2d34; }
.sign small { display: block; font-size: calc(var(--u) * 9.6); color: #7b7d88; margin-top: 2px; }
.story5-img { position: relative; display: block; height: calc(var(--u) * 236); border-radius: calc(var(--u) * 4) 0 0 calc(var(--u) * 4); overflow: hidden; }
.story5-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.story5-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 45%, rgba(10, 10, 14, .62) 100%); }
.story5-img blockquote { position: absolute; z-index: 1; right: calc(var(--u) * 34); top: calc(var(--u) * 34); margin: 0; font-family: var(--script); font-style: italic; font-weight: 500; font-size: calc(var(--u) * 14.5); line-height: calc(var(--u) * 19); color: #fff; }
.story5-img blockquote i { display: block; width: calc(var(--u) * 40); height: 2px; background: var(--coral); margin-top: calc(var(--u) * 14); }

/* happy owners + blog rows */
.happy-strip a { border-radius: calc(var(--u) * 6); box-shadow: none; aspect-ratio: 222 / 146; }
.blog5 { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 14); }
.b5 { display: grid; grid-template-columns: calc(var(--u) * 128) 1fr; gap: calc(var(--u) * 12); background: #fff; border-radius: calc(var(--u) * 6); box-shadow: 0 0 0 1px #ececf0; overflow: hidden; text-decoration: none; }
.b5 img, .b5-ph { width: 100%; height: calc(var(--u) * 96); object-fit: cover; background: #f3f3f5; display: block; }
.b5 > span { padding: calc(var(--u) * 10) calc(var(--u) * 12) calc(var(--u) * 10) 0; }
.b5 b { display: block; font-size: calc(var(--u) * 11.5); font-weight: 600; color: #141415; line-height: 1.35; }
.b5 small { display: block; font-size: calc(var(--u) * 10); color: #7b7d88; margin: calc(var(--u) * 6) 0; }
.b5 em { font-style: normal; color: var(--coral); font-size: calc(var(--u) * 11); font-weight: 600; display: inline-flex; gap: 5px; align-items: center; }
.b5 em svg { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }

/* app band, restrained */
.appband { background: #f7f7f9; border-radius: calc(var(--u) * 8); height: calc(var(--u) * 200); margin-top: 0; overflow: hidden; }
.appband .clip { top: 0; }
.appband .phone.real { left: calc(var(--u) * 70); top: calc(var(--u) * 24); transform: rotate(-8deg); transform-origin: center; }
.appband .txt { left: calc(var(--u) * 330); top: calc(var(--u) * 42); }
.appband h2 { color: #141415; font-size: calc(var(--u) * 21); }
.appband p { color: #5d5f69; font-size: calc(var(--u) * 13); }
.store { border-radius: calc(var(--u) * 6); }

/* footer */
.site-f { background: #fff; border-top: 1px solid #ececf0; padding: calc(var(--u) * 22) 0 calc(var(--u) * 26); }
.site-f .wrap { display: block; width: calc(var(--u) * 928); }
.f5-top { display: flex; align-items: center; gap: calc(var(--u) * 46); padding-bottom: calc(var(--u) * 16); border-bottom: 1px solid #ececf0; }
.f5-top .logo { margin-right: auto; }
.f5-c { display: inline-flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 11.5); color: #2f313a; text-decoration: none; }
.f5-c svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); color: var(--coral); }
.site-f .soc a { background: none; box-shadow: none; width: calc(var(--u) * 24); height: calc(var(--u) * 24); color: #141415; }
.site-f .soc svg { width: 100%; height: 100%; }
.f5-bot { display: flex; justify-content: space-between; gap: 20px; padding-top: calc(var(--u) * 14); font-size: calc(var(--u) * 9.8); color: #7b7d88; }
.f5-bot > span:last-child { display: flex; gap: calc(var(--u) * 18); align-items: center; }
.f5-bot nav { display: flex; gap: calc(var(--u) * 14); } .f5-bot a { color: #7b7d88; text-decoration: none; }

/* ---------- sub-pages in the same language ---------- */
.phero { background: #f5f1ec url("/assets/img/hero5.jpg") 70% center / cover no-repeat; }
.phero::before { background: linear-gradient(90deg, rgba(250, 248, 245, .95) 0%, rgba(250, 248, 245, .82) 36%, rgba(250, 248, 245, 0) 54%); }
.phero.tall { min-height: calc(var(--u) * 273); padding-bottom: calc(var(--u) * 30); }
.phero.tall .wrap { padding-top: calc(var(--u) * 48); width: calc(var(--u) * 928); }
.phero.tall h1 { font-size: calc(var(--u) * 38); line-height: calc(var(--u) * 38); }
.phero .accent, .hero h1 .accent { color: var(--ink); }
.phero .hrt { display: none; }
.phero .lead2 { font-size: calc(var(--u) * 13); line-height: 1.5; color: #232225; }
.phero .eyebrow { font-size: calc(var(--u) * 9.5); letter-spacing: .14em; color: #48474f; }
.feats div { font-size: calc(var(--u) * 10.5); color: #3a3c45; } .feats i { box-shadow: 0 0 0 1px #ececf0; color: var(--coral); }
.phero.story-hero { background: #f7f7f9; }
.sh-pic { border-width: 0; border-radius: calc(var(--u) * 6); transform: none; box-shadow: var(--shadow); }
.panel { background: #fff; border-radius: 0; margin-top: 0; padding-top: calc(var(--u) * 24); }
.sub-card, .card, .gcard, .tip2, .g-item, .about-card, .path-card, .form-card, .ct-card, .dogcard, .doc, details { background: #fff; border-radius: calc(var(--u) * 6); box-shadow: 0 0 0 1px #ececf0; }
.trust { background: #f7f7f9; border-radius: calc(var(--u) * 6); box-shadow: none; }
.trust > div + div { border-color: #e2e2e6; } .trust-more { border-color: #e2e2e6 !important; }
.trust-more span, .trust-more a { background: #fff; box-shadow: 0 0 0 1px #ececf0; border-radius: calc(var(--u) * 4); }
.inc-grid > div:not(.inc-note) { background: #fff; box-shadow: 0 0 0 1px #ececf0; border-radius: calc(var(--u) * 6); }
.inc-grid i, .g-ic, .tl li > i { background: #fdeaed; color: var(--coral); border-radius: calc(var(--u) * 6); }
.inc-note { font-style: italic; color: #565865; font-size: calc(var(--u) * 14); transform: none; }
.love-card { background: #f7f7f9; box-shadow: none; border-radius: calc(var(--u) * 6); }
.love-card h2 { font-family: var(--head); font-style: normal; font-size: calc(var(--u) * 24); color: var(--ink); }
.lparent .ring { background: #fff; box-shadow: 0 0 0 1px #e2e2e6; }
.lparent em { font-family: var(--sans); font-style: normal; font-size: calc(var(--u) * 10); letter-spacing: .14em; text-transform: uppercase; color: #7b7d88; }
.love-heart { color: var(--coral); animation: none; filter: none; width: calc(var(--u) * 30); height: calc(var(--u) * 30); }
.quote, .quote2 { font-family: var(--script); font-style: italic; background: #fff; color: #33353d; transform: none; box-shadow: 0 0 0 1px #ececf0; border-radius: calc(var(--u) * 6); }
.script { font-family: var(--script); font-style: italic; color: #565865 !important; transform: none !important; }
.facts-card, .note-card { background: #f7f7f9; box-shadow: none; border-radius: calc(var(--u) * 6); }
.note-card i { color: var(--coral); }
.info .side-note { display: none; }
.big-price, .info .big-price { color: var(--coral); }
.gallery .main, .thumbs button { border-radius: calc(var(--u) * 6); }
.warn2 { background: #f7f7f9; border-radius: calc(var(--u) * 6); }
.warn2::before { background: linear-gradient(90deg, rgba(247, 247, 249, .98) 0%, rgba(247, 247, 249, .94) 55%, rgba(247, 247, 249, 0) 75%); }
.g-ours { background: #f2f8f4; }
.ohp-card { background: #f7f7f9; border-radius: calc(var(--u) * 6); }
.faq-card { background-color: #fff; background-image: url("/assets/img/hero5.jpg"); background-position: 95% 60%; background-size: auto 130%; border-radius: calc(var(--u) * 6); box-shadow: 0 0 0 1px #ececf0; }
.faq-card::before { background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .97) 52%, rgba(255, 255, 255, 0) 70%); }
.ct-list i { background: var(--coral); }
.album-tabs button { border-radius: calc(var(--u) * 4); } .album-tabs button.on { background: var(--ink); }
.post-card .ph-empty { background: #f3f3f5; opacity: 1; }
.article { border-radius: calc(var(--u) * 6); box-shadow: 0 0 0 1px #ececf0; }
.pp-top { background: #fff; padding-top: calc(var(--u) * 24); }
.adm-tab.on { background: var(--ink); }
#toast { background: #141415; }
.lb { background: rgba(10, 10, 14, .92); }

@media (max-width: 860px) {
  .site-h .wrap { height: 60px; } .btn.cta { display: none; }
  .hero5 { height: auto; padding-bottom: 230px; background-size: auto 260px; background-position: 72% bottom; background-color: #f8f6f3; }
  .hero5::before { background: linear-gradient(180deg, #f8f6f3 0%, #f8f6f3 58%, rgba(248, 246, 243, 0) 74%); }
  .hero5 .wrap { width: calc(100% - 32px); padding-top: 34px; }
  .hero5 h1 { font-size: 32px; line-height: 34px; } .hero5 .lead { font-size: 15px; line-height: 22px; }
  .hero5-btns { flex-wrap: wrap; } .hero5-btns .btn { width: auto !important; flex: 1; }
  .strip5 .wrap { width: 100%; grid-template-columns: 1fr 1fr; height: auto; }
  .strip5 .wrap > div { justify-content: flex-start; padding: 14px 16px; font-size: 13.5px; border-left: 0 !important; border-top: 1px solid #ececf0; }
  .sec5 .wrap { width: calc(100% - 32px); } .sec5-h { flex-wrap: wrap; gap: 8px; } .sec5-h h2 { font-size: 24px; } .sec5-h p { font-size: 14px; }
  .pup .ph { height: 230px; } .pup .bd b { font-size: 15px; } .pup .price { font-size: 19px; } .pill { font-size: 12px; }
  .story5-grid { grid-template-columns: 1fr; } .story5-txt { padding: 0 16px; } .story5-txt h2 { font-size: 24px; } .story5-txt p { font-size: 15px; line-height: 23px; }
  .sign b { font-size: 14px; } .sign small { font-size: 12px; }
  .story5-img { margin-top: 20px; height: 260px; border-radius: 0; } .story5-img blockquote { font-size: 16px; line-height: 21px; right: 20px; top: 24px; }
  .blog5 { grid-template-columns: 1fr; } .b5 { grid-template-columns: 120px 1fr; } .b5 b { font-size: 15px; } .b5 small, .b5 em { font-size: 13px; }
  .appband { height: auto; padding: 280px 18px 26px; } .appband .phone.real { left: 50%; margin-left: -88px; top: 18px; } .appband .txt { position: static; } .appband h2 { font-size: 22px; }
  .site-f .wrap { width: calc(100% - 32px); } .f5-top { flex-wrap: wrap; gap: 12px 20px; } .f5-top .logo { width: 100%; } .f5-c { font-size: 14px; }
  .f5-bot { flex-direction: column; font-size: 12px; } .f5-bot > span:last-child { flex-wrap: wrap; } .f5-bot nav { flex-wrap: wrap; }
  .phero.tall { padding-bottom: 200px; background-size: auto 230px; background-position: 72% bottom; background-color: #f8f6f3; }
  .phero::before { background: linear-gradient(180deg, #f8f6f3 0%, #f8f6f3 60%, rgba(248, 246, 243, 0) 78%); }
  .phero.tall .wrap { width: calc(100% - 32px); padding-top: 34px; } .phero.tall h1 { font-size: 30px; line-height: 34px; }
}
.hero5 { background-position: 62% 30%; }
.hero5 .wrap { padding-top: calc(var(--u) * 30); }
.story5-img::after { background: linear-gradient(90deg, rgba(0, 0, 0, .05) 30%, rgba(10, 10, 14, .78) 100%); }
.appband .note { display: none; }
.f5-bot .sep { color: #c9cad1; }
.btn .arr, .btn svg { flex: none; }
@media (max-width: 860px) { .site-h .wrap { width: calc(100% - 32px); height: 60px; } .logo b { font-size: 19px; } .logo small { font-size: 11px; } .logo svg { width: 30px; height: 28px; } }
@media (max-width: 860px) {
  .trust { width: calc(100% - 32px); }
  .trust > div.trust-more { grid-template-columns: 1fr 1fr; padding: 12px; }
  .gallery { min-width: 0; max-width: 100%; overflow: hidden; } .thumbs { max-width: 100%; }
}
@media (max-width: 860px) {
  .detail { grid-template-columns: 1fr !important; }
  .info .facts-card { width: 100%; }
  .trust small { white-space: normal; }
}
@media (max-width: 860px) {
  .trust { grid-template-columns: minmax(0, 1fr); }
  .trust > div.trust-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3, .g4, .g2 { grid-template-columns: minmax(0, 1fr); }
}
/* professional: no hearts/paws next to headings */
.hrt, .pawi-wrap, .form-card h2 > span:first-child, .ct-card h2 > span:first-child, .faq-card h2 > span:first-child, .sec-title > .script { display: none !important; }
.love-card h2 .hrt { display: none; }

/* ---------- richer home (owner 20.10 „обогати началната“) ---------- */
.stats5 { border-bottom: 1px solid #efeff2; }
.stats5 .wrap { width: calc(var(--u) * 928); display: grid; grid-template-columns: 1.35fr repeat(4, 1fr); padding: calc(var(--u) * 22) 0; }
.stats5 .wrap > div { padding: 0 calc(var(--u) * 16); }
.stats5 .wrap > div + div { border-left: 1px solid #ececf0; }
.stats5 b { display: block; font-size: calc(var(--u) * 22); font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.stats5 .wrap > div:first-child b { font-size: calc(var(--u) * 17); padding-top: calc(var(--u) * 4); }
.stats5 span { display: block; font-size: calc(var(--u) * 10.5); color: #6b6d78; line-height: 1.4; margin-top: calc(var(--u) * 4); }

.why5 { background: #f7f7f9; padding: calc(var(--u) * 34) 0; margin-top: calc(var(--u) * 10); }
.why5-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 14); }
.why5-c { background: #fff; border-radius: calc(var(--u) * 6); box-shadow: 0 0 0 1px #ececf0; padding: calc(var(--u) * 18); }
.why5-c i { width: calc(var(--u) * 40); height: calc(var(--u) * 40); border-radius: calc(var(--u) * 6); background: #fdeaed; color: var(--coral); display: grid; place-items: center; margin-bottom: calc(var(--u) * 12); }
.why5-c i svg { width: 55%; height: 55%; }
.why5-c b { display: block; font-size: calc(var(--u) * 14); margin-bottom: calc(var(--u) * 5); }
.why5-c p { font-size: calc(var(--u) * 11.6); color: #5d5f69; line-height: 1.55; margin: 0; }

.dogs5-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 14); }
.dog5 { padding: 0; border: 0; background: #fff; border-radius: calc(var(--u) * 6); box-shadow: 0 0 0 1px #ececf0; overflow: hidden; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: transform .18s; }
.dog5:hover { transform: translateY(-3px); }
.dog5 img, .dog5-ph { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #f3f3f5; }
.dog5-b { display: block; padding: calc(var(--u) * 11) calc(var(--u) * 13) calc(var(--u) * 13); }
.dog5-b b { display: block; font-size: calc(var(--u) * 15); }
.dog5-b small { display: block; font-size: calc(var(--u) * 10.6); color: #6b6d78; margin: 2px 0 calc(var(--u) * 8); }
.dog5-b em { font-style: normal; display: flex; flex-wrap: wrap; gap: 4px; }
.dog5-b em i { font-style: normal; font-size: calc(var(--u) * 9.4); font-weight: 600; background: #fdeaed; color: var(--coral); border-radius: 3px; padding: 2px 6px; }

.gal5-g { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: calc(var(--u) * 140); gap: calc(var(--u) * 10); }
.gal5-g a { border-radius: calc(var(--u) * 6); overflow: hidden; display: block; }
.gal5-g a.g0 { grid-column: span 2; grid-row: span 2; }
.gal5-g a.g5 { grid-column: span 2; }
.gal5-g img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.gal5-g a:hover img { transform: scale(1.04); }

.shows5 { position: relative; overflow: hidden; background: var(--cream6); padding: calc(var(--u) * 44) 0 calc(var(--u) * 52); margin: calc(var(--u) * 16) 0; }
.shows5::before { content: ""; position: absolute; right: -8%; top: -30%; width: 55%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(216, 27, 96, .09), transparent 65%); pointer-events: none; }
.shows5-in { position: relative; width: calc(var(--u) * 928); display: grid; grid-template-columns: calc(var(--u) * 300) 1fr; gap: calc(var(--u) * 30); align-items: center; }
.shows5 .eyebrow { color: #d81b60; font-size: calc(var(--u) * 9.5); letter-spacing: .14em; }
.shows5 h2 { font-size: calc(var(--u) * 26); line-height: 1.08; margin: calc(var(--u) * 4) 0 calc(var(--u) * 10); }
.shows5 p { color: #5d5f69; font-size: calc(var(--u) * 12); line-height: 1.65; margin-bottom: calc(var(--u) * 18); }
.btn.ghost.light { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.btn.ghost.light:hover { background: rgba(255, 255, 255, .08); }
/* phone snaps scattered on a table: different sizes, tilts and overlaps; they fly in once, then sway */
.shows5-ph { position: relative; aspect-ratio: 600 / 540; }
.ugc { position: absolute; display: block; background: #fff; padding: calc(var(--u) * 4); border-radius: calc(var(--u) * 10); box-shadow: 0 14px 30px -14px rgba(42, 31, 24, .5), 0 2px 6px rgba(42, 31, 24, .08);
  transform: rotate(var(--r)); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; animation: sway6 var(--t, 7s) ease-in-out var(--d, 0s) infinite; }
.ugc img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; border-radius: calc(var(--u) * 7); }
.ugc:hover { transform: rotate(0) scale(1.07); z-index: 9; box-shadow: 0 22px 40px -16px rgba(42, 31, 24, .6); }
.ugc em { position: absolute; left: calc(var(--u) * -6); bottom: calc(var(--u) * 14); padding: calc(var(--u) * 3) calc(var(--u) * 9); border-radius: 99px; background: #d81b60; color: #fff; font-style: normal; font-weight: 700; font-size: calc(var(--u) * 9.5); letter-spacing: .02em; white-space: nowrap; transform: rotate(-4deg); box-shadow: 0 6px 14px -6px rgba(216, 27, 96, .6); }
.ugc.u2::before, .ugc.u4::before { content: ""; position: absolute; z-index: 2; left: 50%; top: calc(var(--u) * -8); width: calc(var(--u) * 54); height: calc(var(--u) * 16); translate: -50% 0; rotate: -4deg; background: var(--tape-a); opacity: .85; }
.ugc.u4::before { background: var(--tape-b); rotate: 5deg; }
.u1 { left: 0; top: 5%; width: 35%; height: 50%; --r: -5deg; --t: 7s; z-index: 2; }
.u2 { left: 31%; top: 0; width: 38%; height: 35%; --r: 3deg; --t: 8s; --d: -2s; z-index: 1; }
.u3 { left: 71%; top: 3%; width: 29%; height: 47%; --r: 6deg; --t: 6.5s; --d: -4s; z-index: 3; }
.u4 { left: 4%; top: 57%; width: 42%; height: 34%; --r: 2.5deg; --t: 7.5s; --d: -1s; z-index: 2; }
.u5 { left: 41%; top: 37%; width: 28%; height: 45%; --r: -4deg; --t: 6s; --d: -3s; z-index: 4; }
.u6 { left: 67%; top: 56%; width: 33%; height: 33%; --r: 4deg; --t: 8.5s; --d: -5s; z-index: 3; }
@keyframes sway6 { 50% { translate: 0 calc(var(--u) * -5); } }
.shows5.rv6:not(.in) .ugc { opacity: 0; transform: translate(var(--fx, 0), 40px) rotate(calc(var(--r) * 3)) scale(.85); }
.shows5.rv6 .ugc { transition: transform .9s cubic-bezier(.2, .8, .2, 1), opacity .6s, box-shadow .35s; }
.shows5.rv6 .u1 { --fx: -60px; transition-delay: .05s; } .shows5.rv6 .u2 { --fx: -20px; transition-delay: .15s; } .shows5.rv6 .u3 { --fx: 60px; transition-delay: .25s; }
.shows5.rv6 .u4 { --fx: -50px; transition-delay: .35s; } .shows5.rv6 .u5 { transition-delay: .45s; } .shows5.rv6 .u6 { --fx: 60px; transition-delay: .55s; }
.shows5.rv6.in .ugc:hover { transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .ugc { animation: none; } }

.steps5 { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--u) * 14); counter-reset: s; }
.st5 { position: relative; padding: calc(var(--u) * 18) calc(var(--u) * 16); border-top: 2px solid var(--coral); background: #fafafb; border-radius: 0 0 calc(var(--u) * 6) calc(var(--u) * 6); }
.st5 span { display: block; font-size: calc(var(--u) * 12); font-weight: 700; color: var(--coral); letter-spacing: .08em; }
.st5 b { display: block; font-size: calc(var(--u) * 15); margin: calc(var(--u) * 6) 0 calc(var(--u) * 6); }
.st5 p { font-size: calc(var(--u) * 11.4); color: #5d5f69; line-height: 1.55; margin: 0; }

.inc5-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(var(--u) * 10); }
.inc5 { text-align: center; padding: calc(var(--u) * 16) calc(var(--u) * 8); border-radius: calc(var(--u) * 6); box-shadow: 0 0 0 1px #ececf0; }
.inc5 i { width: calc(var(--u) * 44); height: calc(var(--u) * 44); border-radius: 50%; background: #fdeaed; color: var(--coral); display: grid; place-items: center; margin: 0 auto calc(var(--u) * 10); }
.inc5 i svg { width: 52%; height: 52%; }
.inc5 b { display: block; font-size: calc(var(--u) * 11.6); }
.inc5 small { display: block; font-size: calc(var(--u) * 9.8); color: #7b7d88; margin-top: 3px; }

.breed5-in { width: calc(var(--u) * 928); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 40); align-items: center; }
.breed5-ph img { width: 100%; height: calc(var(--u) * 300); object-fit: cover; object-position: 70% center; border-radius: calc(var(--u) * 6); }
.breed5 .eyebrow { font-size: calc(var(--u) * 9.5); letter-spacing: .14em; color: var(--coral); }
.breed5 h2 { font-size: calc(var(--u) * 24); margin: calc(var(--u) * 4) 0 calc(var(--u) * 14); }
.breed5-l { list-style: none; margin: 0; padding: 0; }
.breed5-l li { position: relative; padding: 0 0 calc(var(--u) * 12) calc(var(--u) * 26); font-size: calc(var(--u) * 11.6); color: #5d5f69; line-height: 1.55; }
.breed5-l li::before { content: ""; position: absolute; left: 0; top: calc(var(--u) * 4); width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: 50%; background: var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 60% no-repeat; }
.breed5-l b { display: block; color: var(--ink); font-size: calc(var(--u) * 13); margin-bottom: 2px; }

.faq5 { display: grid; grid-template-columns: calc(var(--u) * 300) 1fr; gap: calc(var(--u) * 40); }
.faq5 h2 { font-size: calc(var(--u) * 24); }
.faq5 .muted { font-size: calc(var(--u) * 12); } .faq5 .muted a { color: var(--coral); }
.faq5 details { box-shadow: none; border-radius: 0; border-bottom: 1px solid #ececf0; padding: calc(var(--u) * 14) 0; margin: 0; background: none; }
.faq5 summary { font-size: calc(var(--u) * 13.5); font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.faq5 summary::-webkit-details-marker { display: none; }
.faq5 summary::after { content: "+"; color: var(--coral); font-size: calc(var(--u) * 18); line-height: 1; }
.faq5 details[open] summary::after { content: "–"; }
.faq5 details p { font-size: calc(var(--u) * 12); }

.cta5 { background: var(--coral); color: #fff; padding: calc(var(--u) * 34) 0; margin: calc(var(--u) * 16) 0 calc(var(--u) * 8); }
.cta5 .wrap { width: calc(var(--u) * 928); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cta5 h2 { color: #fff; font-size: calc(var(--u) * 24); margin: 0 0 calc(var(--u) * 6); }
.cta5 p { color: #ffe1e6; font-size: calc(var(--u) * 12.5); margin: 0; }
.cta5-b { display: flex; gap: calc(var(--u) * 12); }
.btn.white { background: #fff; color: var(--coral); } .btn.white:hover { background: #fff3f5; }

@media (max-width: 860px) {
  .stats5 .wrap { width: calc(100% - 32px); grid-template-columns: 1fr 1fr; gap: 16px 0; }
  .stats5 .wrap > div:first-child { grid-column: 1 / -1; } .stats5 .wrap > div { border-left: 0 !important; padding: 0 8px; }
  .stats5 b { font-size: 24px; } .stats5 span { font-size: 13px; }
  .why5-g, .steps5 { grid-template-columns: minmax(0, 1fr); } .why5-c b, .st5 b { font-size: 17px; } .why5-c p, .st5 p { font-size: 14.5px; }
  .dogs5-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dog5-b b { font-size: 17px; } .dog5-b small { font-size: 13px; } .dog5-b em i { font-size: 11px; }
  .gal5-g { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; } .gal5-g a.g5 { grid-column: span 2; }   /* 4 + 6 + 2 = 12 cells: no lonely last tile */
  .shows5-in { width: calc(100% - 32px); grid-template-columns: minmax(0, 1fr); } .shows5 h2 { font-size: 24px; } .shows5 p { font-size: 15px; }
  .shows5 { padding: 36px 0 44px; } .shows5 h2 { font-size: 26px; } .shows5-ph { margin: 6px 4px 0; } .ugc { padding: 3px; border-radius: 9px; } .ugc img { border-radius: 7px; } .ugc em { font-size: 11px; padding: 3px 9px; bottom: 10px; }
  .inc5-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } .inc5 b { font-size: 14.5px; } .inc5 small { font-size: 12.5px; }
  .breed5-in { width: calc(100% - 32px); grid-template-columns: minmax(0, 1fr); gap: 20px; } .breed5-ph img { height: 220px; } .breed5 h2 { font-size: 24px; } .breed5-l li { font-size: 15px; } .breed5-l b { font-size: 16px; }
  .faq5 { grid-template-columns: minmax(0, 1fr); gap: 10px; } .faq5 summary { font-size: 16px; } .faq5 details p { font-size: 15px; }
  .cta5 .wrap { width: calc(100% - 32px); flex-direction: column; align-items: flex-start; } .cta5 h2 { font-size: 24px; } .cta5 p { font-size: 15px; }
}
.gal5-g.n5 a.g5 { grid-column: auto; }

/* demo copy only (fluffy-dogs-pv-demo) */
.demo-pill { position: fixed; left: 12px; bottom: 12px; z-index: 90; padding: 6px 12px; border-radius: 999px; background: rgba(28, 28, 30, .82); color: #fff; font: 600 12px/1.2 Inter, system-ui, sans-serif; pointer-events: none; }

/* ---------- v3 accents (21.10.2026, owner: „комбинирай малко от темата на ohpuppy.org“) ----------
   Borrowed from the OhPuppy Cozy theme, recoloured to the kennel red: taped polaroids, a tilted
   marquee ribbon with a puppy on it, the FAQ card with a cut-out puppy, the app card with phones,
   floating chips and a QR code, and gentle scroll reveals. Handwriting only on polaroid captions. */
:root { --hand: "Caveat", "Bradley Hand", cursive; --cream6: #faf6f1; --tape-a: #f2cfa0; --tape-b: #bfe3cf; --tape-c: #f4c0c8; }
.btn.dark { background: #141415; color: #fff; }
.btn.dark:hover { background: #2b2b2f; }
.eye6 { text-transform: uppercase; letter-spacing: .16em; font-size: calc(var(--u) * 9.5); font-weight: 700; color: var(--coral); margin-bottom: calc(var(--u) * 8); }

/* hero: hand-drawn underline + soft entrance */
.sq6 { position: relative; display: inline-block; color: var(--coral); }
.sq6::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: calc(var(--u) * -9); height: calc(var(--u) * 10);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8c40-6 80-6 120-2s90 5 176-4' fill='none' stroke='%23e29249' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform-origin: left; animation: sq6-draw .9s .5s cubic-bezier(.6, 0, .2, 1) both; }
@keyframes sq6-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero5 .wrap > * { animation: up6 .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero5 .wrap > :nth-child(2) { animation-delay: .08s; } .hero5 .wrap > :nth-child(3) { animation-delay: .16s; } .hero5 .wrap > :nth-child(4) { animation-delay: .24s; }
@keyframes up6 { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* scroll reveal (set by FD.reveal) */
.rv6 { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.rv6.in { opacity: 1; transform: none; }

@keyframes bob6 { 50% { translate: 0 -6px; } }

  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0); mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0); }

/* happy owners: polaroid strip */
.happy6 { background: var(--cream6); padding: calc(var(--u) * 34) 0; }
.happy6-in { display: grid; grid-template-columns: calc(var(--u) * 200) 1fr; gap: calc(var(--u) * 20); align-items: center; }
.happy6-tx h2 { font-size: calc(var(--u) * 26); line-height: 1.05; margin: 0 0 calc(var(--u) * 8); }
.happy6-tx p { font-size: calc(var(--u) * 12.5); color: #5d5f69; margin: 0 0 calc(var(--u) * 16); }
.happy6-strip { display: flex; gap: calc(var(--u) * 16); overflow-x: auto; scroll-snap-type: x mandatory; padding: calc(var(--u) * 14) calc(var(--u) * 6) calc(var(--u) * 20); scrollbar-width: none;
  -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
.happy6-strip::-webkit-scrollbar { display: none; }
.pol { position: relative; flex: 0 0 calc(var(--u) * 160); scroll-snap-align: start; background: #fff; padding: calc(var(--u) * 7) calc(var(--u) * 7) calc(var(--u) * 34); box-shadow: 0 8px 18px -10px rgba(42, 31, 24, .45); transform: rotate(var(--r, 0deg)); transition: transform .25s; text-decoration: none; }
.pol:hover { transform: rotate(0) scale(1.05); z-index: 2; }
.pol img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.happy6-strip.marq { overflow: hidden; scroll-snap-type: none; padding-left: 0; padding-right: 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marq-run { display: flex; width: max-content; animation: marq calc(var(--n, 8) * 4.5s) linear infinite; }
.marq-run .pol { margin-right: calc(var(--u) * 16); }
.marq-run .pol img { object-position: 50% 15%; }   /* tall podium shots keep the heads */
.marq:hover .marq-run { animation-play-state: paused; }
@keyframes marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marq-run { animation: none; } .happy6-strip.marq { overflow-x: auto; } }
.pol span { position: absolute; left: calc(var(--u) * 9); bottom: calc(var(--u) * 7); max-width: 88%; padding: 1px calc(var(--u) * 7); background: #fbf3d6; transform: rotate(-2deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); font-family: var(--hand); font-size: calc(var(--u) * 14); line-height: 1.15; color: #3a3036; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* FAQ card */
.faq6 { display: grid; grid-template-columns: 1fr 1.1fr; gap: calc(var(--u) * 36); background: var(--cream6); border-radius: calc(var(--u) * 16); padding: calc(var(--u) * 34) calc(var(--u) * 34) calc(var(--u) * 30); }
.faq6-l h2 { font-size: calc(var(--u) * 32); line-height: 1.04; margin: 0 0 calc(var(--u) * 10); }
.faq6-l > p { font-size: calc(var(--u) * 12.5); color: #5d5f69; margin: 0 0 calc(var(--u) * 20); }
.faq6-card { position: relative; background: #fbe7dc; border-radius: calc(var(--u) * 12); padding: calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 18); min-height: calc(var(--u) * 150); }
.faq6-card b { display: block; font-size: calc(var(--u) * 17); margin-bottom: calc(var(--u) * 12); }
.faq6-card .btn { position: relative; z-index: 1; }
.faq6-tel { display: block; margin-top: calc(var(--u) * 12); font-weight: 700; font-size: calc(var(--u) * 13); color: #141415; text-decoration: none; position: relative; z-index: 1; }
.faq6-card img { position: absolute; right: calc(var(--u) * -14); bottom: calc(var(--u) * -6); width: calc(var(--u) * 230); filter: drop-shadow(0 14px 14px rgba(60, 30, 20, .25)); pointer-events: none; }
.faq6-q details { background: none; box-shadow: none; border-radius: 0; padding: 0; margin: 0; font-size: inherit; border-bottom: 1px solid #e7dfd6; }
.faq6-q details:last-child { border-bottom: 0; }
.faq6-q summary { display: flex; align-items: center; gap: calc(var(--u) * 14); padding: calc(var(--u) * 14) 0; cursor: pointer; list-style: none; font-weight: 600; font-size: calc(var(--u) * 13.5); }
.faq6-q summary::-webkit-details-marker { display: none; }
.faq6-q summary i { width: calc(var(--u) * 22); height: calc(var(--u) * 22); color: #3a3036; flex: none; }
.faq6-q summary i svg { width: 100%; height: 100%; }
.faq6-q summary span { flex: 1; }
.chev6 { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-right: 2px solid #3a3036; border-bottom: 2px solid #3a3036; transform: rotate(45deg); transition: transform .25s; margin-right: calc(var(--u) * 4); }
.faq6-q details[open] .chev6 { transform: rotate(-135deg); }
.faq6-q details p { margin: 0 0 calc(var(--u) * 14) calc(var(--u) * 36); font-size: calc(var(--u) * 12.5); line-height: 1.55; color: #5d5f69; }
.faq6-q details[open] p { animation: up6 .3s ease both; }

/* app + follow cards */
.app6 { display: grid; grid-template-columns: 1.55fr 1fr; gap: calc(var(--u) * 16); }
.app6-card { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; gap: calc(var(--u) * 10); background: linear-gradient(135deg, #fbecec, #faf3ec); border-radius: calc(var(--u) * 16); padding: calc(var(--u) * 26); overflow: hidden; }
.app6-tx h2, .app6-follow h2 { font-size: calc(var(--u) * 23); line-height: 1.08; margin: 0 0 calc(var(--u) * 14); }
.app6-l { list-style: none; margin: 0 0 calc(var(--u) * 16); padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 10) calc(var(--u) * 12); }
.app6-l li { display: flex; align-items: center; gap: calc(var(--u) * 9); font-weight: 600; font-size: calc(var(--u) * 11.5); color: #3a3036; }
.tl6 { display: inline-grid; place-items: center; width: calc(var(--u) * 32); height: calc(var(--u) * 32); border-radius: calc(var(--u) * 9); flex: none; }
.tl6 svg { width: 55%; height: 55%; }
.tl6.red { background: #fbe3e7; color: var(--coral); } .tl6.amber { background: #fbebda; color: #b0652f; } .tl6.sky { background: #e4ecf5; color: #3d6a93; } .tl6.plum { background: #efe6f3; color: #6e4a86; } .tl6.green { background: #e3f1e8; color: #23784a; }
.app6-get { display: grid; grid-template-columns: auto 1fr auto; gap: calc(var(--u) * 12); align-items: center; background: #fff; border-radius: calc(var(--u) * 12); padding: calc(var(--u) * 12); box-shadow: 0 10px 24px -18px rgba(60, 30, 30, .4); }
.app6-ic { width: calc(var(--u) * 46); height: calc(var(--u) * 46); border-radius: calc(var(--u) * 11); background: var(--coral); color: #fff; display: grid; place-items: center; }
.app6-ic svg { width: 58%; }
.app6-get b { display: block; font-size: calc(var(--u) * 13); } .app6-get small { display: block; font-size: calc(var(--u) * 10); color: #6b6d76; margin-bottom: calc(var(--u) * 6); }
.app6-get .stores { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); margin: 0; }
.app6-get .store { height: calc(var(--u) * 32); padding: 0 calc(var(--u) * 9); gap: calc(var(--u) * 6); white-space: nowrap; }
.app6-get .store svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.app6-get .store small { font-size: calc(var(--u) * 6.5); } .app6-get .store b { font-size: calc(var(--u) * 11.5); }
.app6-qr { margin: 0; text-align: center; } .app6-qr img { width: calc(var(--u) * 64); height: calc(var(--u) * 64); background: #fff; padding: 4px; }
.app6-qr figcaption { font-size: calc(var(--u) * 9); color: #6b6d76; margin-top: 3px; }
.app6-ph { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: calc(var(--u) * 12); padding-top: calc(var(--u) * 16); }
.ph6 { position: relative; width: calc(var(--u) * 112); aspect-ratio: 9 / 19.5; border-radius: calc(var(--u) * 20); background: #111; padding: calc(var(--u) * 4); box-shadow: 0 24px 40px -22px rgba(0, 0, 0, .5); rotate: -6deg; translate: 0 10px; }
.ph6.b { rotate: 5deg; translate: 0 -14px; }
.ph6 img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: calc(var(--u) * 16); }
.ph6::before { content: ""; position: absolute; top: calc(var(--u) * 9); left: 50%; translate: -50% 0; width: 30%; height: calc(var(--u) * 8); border-radius: 99px; background: #111; z-index: 1; }
.fl6 { position: absolute; z-index: 3; display: flex; align-items: center; gap: calc(var(--u) * 8); background: #fff; border-radius: calc(var(--u) * 10); padding: calc(var(--u) * 6) calc(var(--u) * 10) calc(var(--u) * 6) calc(var(--u) * 6); box-shadow: 0 12px 26px -14px rgba(40, 20, 20, .45); animation: bob6 5s ease-in-out infinite; }
.fl6 .tl6 { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.fl6 b { display: block; font-size: calc(var(--u) * 11); } .fl6 small { display: block; font-size: calc(var(--u) * 9.5); color: #6b6d76; }
.fl6.a { left: calc(var(--u) * -8); top: 26%; } .fl6.b { right: calc(var(--u) * -6); bottom: 14%; animation-delay: -2.5s; }
.app6-follow { position: relative; background: var(--cream6); border-radius: calc(var(--u) * 16); padding: calc(var(--u) * 30) calc(var(--u) * 26) calc(var(--u) * 140); overflow: hidden; }
.app6-follow p { font-size: calc(var(--u) * 12.5); color: #5d5f69; margin: 0 0 calc(var(--u) * 16); }
.app6-fb { display: flex; gap: calc(var(--u) * 10); flex-wrap: wrap; position: relative; z-index: 1; }
.app6-dogs { position: absolute; right: calc(var(--u) * 10); bottom: 0; width: calc(var(--u) * 230); filter: drop-shadow(0 12px 12px rgba(60, 30, 20, .22)); pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .rv6 { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 860px) {
  .eye6 { font-size: 11px; }
  .hero5 { background-position: 62% bottom; }   /* line ~1084 (desktop 62% 30%) came later and pushed the puppies out of the mobile hero */
  .sq6::after { bottom: -8px; height: 9px; }
  .happy6 { padding: 30px 0; } .happy6-in { grid-template-columns: 1fr; gap: 6px; }
  .happy6-tx { padding: 0 16px; } .happy6-tx h2 { font-size: 28px; } .happy6-tx h2 br { display: none; } .happy6-tx p { font-size: 15px; margin-bottom: 12px; }
  .happy6-strip { gap: 14px; padding: 14px 16px 20px; } .pol { flex-basis: 62vw; padding: 7px 7px 36px; } .happy6-strip.marq { padding: 14px 0 20px; } .marq-run .pol { flex-basis: 52vw; margin-right: 14px; } .pol span { font-size: 17px; left: 9px; bottom: 8px; padding: 1px 8px; }
  .faq6 { grid-template-columns: 1fr; gap: 18px; padding: 26px 18px; border-radius: 14px; margin: 0 16px; }
  .faq6-l h2 { font-size: 32px; } .faq6-l > p { font-size: 15px; } .faq6-card { padding: 18px; min-height: 160px; } .faq6-card b { font-size: 19px; } .faq6-tel { font-size: 15px; }
  .faq6-card img { width: 170px; right: -8px; }
  .faq6-q summary { font-size: 16px; gap: 12px; padding: 15px 0; } .faq6-q summary i { width: 22px; height: 22px; } .chev6 { width: 8px; height: 8px; }
  .faq6-q details p { margin-left: 34px; font-size: 15px; }
  .app6 { grid-template-columns: 1fr; gap: 14px; padding: 0 16px; }
  .app6-card { grid-template-columns: 1fr; padding: 24px 18px; border-radius: 14px; }
  .app6-tx h2, .app6-follow h2 { font-size: 25px; } .app6-l { gap: 10px; } .app6-l li { font-size: 14px; gap: 8px; } .tl6 { width: 34px; height: 34px; border-radius: 10px; }
  .app6-get { grid-template-columns: auto 1fr; padding: 12px; } .app6-qr { display: none; } .app6-ic { width: 46px; height: 46px; border-radius: 12px; }
  .app6-get b { font-size: 16px; } .app6-get small { font-size: 12.5px; }
  .app6-get .store { height: 40px; padding: 0 11px; gap: 7px; } .app6-get .store svg { width: 18px; height: 18px; } .app6-get .store small { font-size: 9px; } .app6-get .store b { font-size: 14px; }
  .app6-ph { padding-top: 12px; } .ph6 { width: 120px; border-radius: 22px; padding: 4px; } .ph6 img { border-radius: 18px; } .ph6::before { height: 8px; top: 10px; }
  .fl6 { padding: 6px 10px 6px 6px; } .fl6 .tl6 { width: 28px; height: 28px; } .fl6 b { font-size: 13px; } .fl6 small { font-size: 11.5px; } .fl6.a { left: 0; } .fl6.b { right: 0; }
  .app6-follow { padding: 26px 18px 150px; border-radius: 14px; } .app6-follow p { font-size: 15px; } .app6-dogs { width: 230px; }
  .btn.dark { height: 44px; }
}

/* footer credit: who built and maintains the site (owner 21.10) */
.f5-made { margin-top: calc(var(--u) * 12); padding: calc(var(--u) * 10) 0 calc(var(--u) * 4); border-top: 1px solid #ececf0; text-align: center; font-size: calc(var(--u) * 9.8); color: #7b7d88; }
.f5-made b { color: #3a3b42; font-weight: 600; } .f5-made a { color: #3a3b42; font-weight: 600; text-decoration: none; white-space: nowrap; } .f5-made a:hover { color: var(--coral); }
.f5-made .sep { margin: 0 calc(var(--u) * 8); color: #c9cad1; }
@media (max-width: 860px) { .f5-made { font-size: 12.5px; margin-top: 14px; padding-top: 12px; line-height: 1.6; } .f5-made .sep { display: none; } .f5-made a { display: block; } }
body:has(> .demo-pill) { padding-bottom: 44px; }   /* demo copy: the fixed badge never covers the credit line */


/* ---------- v4 (21.10.2026 нощ, owner: „по-красиво, интерактивно, раздвижено, яки икони и картички“) ---------- */
/* why us: 3D icons, one colour per card, tilt toward the pointer, staggered entrance */
.why6 { background: linear-gradient(180deg, #f7f7f9, #fff); padding: calc(var(--u) * 40) 0 calc(var(--u) * 34); }
.why6-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 16); perspective: 900px; }
.why6-c { --c: #d81b60; --cs: #fde8ec; position: relative; overflow: hidden; background: #fff; border-radius: calc(var(--u) * 18); padding: calc(var(--u) * 22) calc(var(--u) * 22) calc(var(--u) * 20);
  box-shadow: 0 1px 0 #ececf0, 0 10px 30px -22px rgba(20, 20, 30, .35); transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .3s ease, translate .6s cubic-bezier(.2, .7, .2, 1) var(--d), opacity .6s ease var(--d); }
.why6-c::before { content: ""; position: absolute; inset: 0; background: radial-gradient(240px circle at var(--mx, 80%) var(--my, 0%), var(--cs), transparent 70%); opacity: .9; transition: opacity .3s; pointer-events: none; }
.why6-c::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .4s ease; }
.why6-c:hover { box-shadow: 0 1px 0 #ececf0, 0 24px 44px -24px color-mix(in srgb, var(--c) 55%, transparent); }
.why6-c:hover::after { transform: scaleX(1); }
.why6-c > * { position: relative; }
.why6-n { position: absolute; right: calc(var(--u) * 18); top: calc(var(--u) * 14); font-weight: 800; font-size: calc(var(--u) * 28); color: var(--c); opacity: .12; letter-spacing: -.04em; }
.why6-ic { display: block; width: calc(var(--u) * 66); height: calc(var(--u) * 66); margin-bottom: calc(var(--u) * 12); transform: translateZ(30px); }
.why6-ic img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 12px color-mix(in srgb, var(--c) 30%, transparent)); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.why6-c:hover .why6-ic img { transform: translateY(-6px) rotate(-6deg) scale(1.08); }
.why6-c b { display: block; font-size: calc(var(--u) * 15); margin-bottom: calc(var(--u) * 6); letter-spacing: -.01em; }
.why6-c p { margin: 0; font-size: calc(var(--u) * 12); line-height: 1.55; color: #5d5f69; }
.why6-c.amber { --c: #d97706; --cs: #fef3e2; } .why6-c.mint { --c: #0f9f6e; --cs: #e3f7ee; } .why6-c.sky { --c: #2f7fd6; --cs: #e5f0fc; }
.why6-c.rose { --c: #d81b60; --cs: #fde8ec; } .why6-c.plum { --c: #8b5cf6; --cs: #f1ebfe; } .why6-c.teal { --c: #0d9488; --cs: #e0f5f3; }
.rv6 .why6-c { opacity: 0; translate: 0 26px; } .rv6.in .why6-c { opacity: 1; translate: 0 0; }

/* home story: portrait in an arch, slow ring, floating fact badges */
.arch6 { position: relative; height: calc(var(--u) * 330); margin-right: calc((100vw - var(--u) * 928) / 2); overflow-x: clip; }   /* the spinning ring's box grows when rotated */
.arch6-ph { position: absolute; left: 50%; top: calc(var(--u) * 8); translate: -50% 0; width: calc(var(--u) * 210); height: calc(var(--u) * 310); border-radius: 999px 999px calc(var(--u) * 22) calc(var(--u) * 22); overflow: hidden; box-shadow: 0 30px 60px -30px rgba(120, 0, 20, .45); z-index: 1; }
.arch6-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: transform .6s ease; }
.arch6-ph:hover img { transform: scale(1.05); }
.arch6-ring { position: absolute; left: 50%; top: calc(var(--u) * 0); width: calc(var(--u) * 300); height: calc(var(--u) * 300); translate: -50% 0; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--coral) 35%, transparent); animation: spin6 40s linear infinite; }
.arch6-ring::before { content: ""; position: absolute; inset: calc(var(--u) * 30); border-radius: 50%; background: radial-gradient(circle, #fde8ec, transparent 70%); }
@keyframes spin6 { to { rotate: 360deg; } }
.bdg6 { position: absolute; z-index: 2; display: flex; align-items: center; gap: calc(var(--u) * 9); background: #fff; border-radius: calc(var(--u) * 12); padding: calc(var(--u) * 8) calc(var(--u) * 12) calc(var(--u) * 8) calc(var(--u) * 8); box-shadow: 0 16px 30px -16px rgba(30, 20, 20, .4); animation: bob6 5s ease-in-out infinite; }
.bdg6 b { display: block; font-size: calc(var(--u) * 12.5); } .bdg6 small { display: block; font-size: calc(var(--u) * 9.5); color: #6b6d76; }
.bdg6 .tl6 { width: calc(var(--u) * 32); height: calc(var(--u) * 32); }
.bdg6.b1 { left: calc(var(--u) * 10); top: calc(var(--u) * 46); } .bdg6.b2 { right: calc(var(--u) * 0); top: calc(var(--u) * 140); animation-delay: -1.7s; } .bdg6.b3 { left: calc(var(--u) * 30); bottom: calc(var(--u) * 26); animation-delay: -3.3s; }
.rv6 .bdg6 { opacity: 0; scale: .7; transition: opacity .5s ease, scale .5s cubic-bezier(.3, 1.6, .5, 1); } .rv6.in .bdg6 { opacity: 1; scale: 1; }
.rv6.in .bdg6.b2 { transition-delay: .15s; } .rv6.in .bdg6.b3 { transition-delay: .3s; }

/* story page: scroll timeline */
.about-grid { grid-template-columns: 1fr; }
.tl7-sec { padding: calc(var(--u) * 30) 0 calc(var(--u) * 40); }
.tl7 { position: relative; list-style: none; margin: calc(var(--u) * 26) 0 0; padding: 0; }
.tl7-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; translate: -50% 0; background: #ececf0; border-radius: 3px; }
.tl7-line i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: linear-gradient(180deg, #f39aa8, var(--coral)); border-radius: 3px; box-shadow: 0 0 12px rgba(216, 27, 96, .35); }
.tl7-it { position: relative; display: grid; grid-template-columns: 1fr calc(var(--u) * 70) 1fr; align-items: center; margin-bottom: calc(var(--u) * 22); }
.tl7-card { grid-column: 1; background: #fff; border-radius: calc(var(--u) * 16); padding: calc(var(--u) * 18) calc(var(--u) * 20); box-shadow: 0 1px 0 #ececf0, 0 18px 40px -26px rgba(20, 20, 30, .4); opacity: 0; translate: calc(var(--u) * -50) 0; transition: opacity .6s ease, translate .7s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
.tl7-it:nth-child(odd) .tl7-card { grid-column: 3; translate: calc(var(--u) * 50) 0; }
.tl7-it.on .tl7-card { opacity: 1; translate: 0 0; }
.tl7-card:hover { box-shadow: 0 1px 0 #ececf0, 0 26px 50px -24px rgba(216, 27, 96, .3); }
.tl7-dot { grid-column: 2; grid-row: 1; justify-self: center; width: calc(var(--u) * 46); height: calc(var(--u) * 46); border-radius: 50%; display: grid; place-items: center; background: #fff; color: #9a9ba3; box-shadow: 0 0 0 3px #ececf0; z-index: 1; scale: .6; transition: scale .5s cubic-bezier(.3, 1.6, .5, 1), background .4s, color .4s, box-shadow .4s; }
.tl7-dot svg { width: 48%; height: 48%; }
.tl7-it.on .tl7-dot { scale: 1; color: #fff; }
.tl7-it.on .tl7-dot.rose, .tl7-it.on .tl7-dot.red { background: var(--coral); box-shadow: 0 0 0 6px #fde8ec; } .tl7-it.on .tl7-dot.amber { background: #e08a12; box-shadow: 0 0 0 6px #fef3e2; }
.tl7-it.on .tl7-dot.sky { background: #2f7fd6; box-shadow: 0 0 0 6px #e5f0fc; } .tl7-it.on .tl7-dot.plum { background: #8b5cf6; box-shadow: 0 0 0 6px #f1ebfe; }
.tl7-it.on .tl7-dot.green { background: #0f9f6e; box-shadow: 0 0 0 6px #e3f7ee; } .tl7-it.on .tl7-dot.teal { background: #0d9488; box-shadow: 0 0 0 6px #e0f5f3; }
.tl7-date { display: inline-block; font-weight: 800; font-size: calc(var(--u) * 10.5); letter-spacing: .06em; text-transform: uppercase; padding: calc(var(--u) * 4) calc(var(--u) * 10); border-radius: 99px; margin-bottom: calc(var(--u) * 8); }
.tl7-date.rose, .tl7-date.red { background: #fde8ec; color: var(--coral); } .tl7-date.amber { background: #fef3e2; color: #b45309; } .tl7-date.sky { background: #e5f0fc; color: #1f63b0; }
.tl7-date.plum { background: #f1ebfe; color: #6d3fd8; } .tl7-date.green { background: #e3f7ee; color: #0b7a55; } .tl7-date.teal { background: #e0f5f3; color: #0b7069; }
.tl7-card h3 { font-size: calc(var(--u) * 17); margin: 0 0 calc(var(--u) * 6); }
.tl7-card p { margin: 0; font-size: calc(var(--u) * 12.3); line-height: 1.6; color: #5d5f69; }
.tl7-media { margin-top: calc(var(--u) * 12); }
.tl7-media > img { width: 100%; height: calc(var(--u) * 170); object-fit: cover; border-radius: calc(var(--u) * 10); }
/* chapter photos: a small fan of taped polaroids that opens when the chapter arrives and spreads on hover */
.snaps { position: relative; height: calc(var(--u) * 205); margin-top: calc(var(--u) * 16); }
.snp { position: absolute; top: calc(var(--u) * 8); width: 58%; background: #fff; padding: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 30); box-shadow: 0 12px 26px -14px rgba(42, 31, 24, .55), 0 1px 3px rgba(42, 31, 24, .1);
  transform: translateX(var(--x0, 0)) rotate(var(--r0, 0deg)); transition: transform .8s cubic-bezier(.2, .8, .2, 1), box-shadow .3s; text-decoration: none; }
.snp img { display: block; width: 100%; height: calc(var(--u) * 140); object-fit: cover; object-position: 50% 25%; }
.snp span { position: absolute; left: calc(var(--u) * 8); right: calc(var(--u) * 8); bottom: calc(var(--u) * 6); font-family: var(--hand); font-size: calc(var(--u) * 15); line-height: 1.1; color: #3a3036; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snp.s1 { left: 2%; z-index: 3; --r: -4deg; --x: 0; }
.snp.s2 { left: 40%; z-index: 2; --r: 5deg; --x: 0; --x0: -45%; }
.snp.s3 { left: 22%; top: 0; z-index: 1; --r: -1deg; --x0: 0; }
.snaps.n2 .snp.s1 { width: 54%; left: 0; } .snaps.n2 .snp.s2 { width: 50%; left: 49%; top: calc(var(--u) * 24); z-index: 3; }
.snaps.n3 .snp { width: 46%; } .snaps.n3 .snp img { height: calc(var(--u) * 118); }
.snaps.n3 .snp.s2 { left: 52%; } .snaps.n3 .snp.s3 { left: 27%; top: calc(var(--u) * 26); z-index: 4; --r: 2deg; }
.snp.s1::before { content: ""; position: absolute; left: 50%; top: calc(var(--u) * -9); width: calc(var(--u) * 58); height: calc(var(--u) * 17); translate: -50% 0; rotate: -3deg; background: var(--tape-a); opacity: .85; }
.snp.s2::before { content: ""; position: absolute; right: calc(var(--u) * -10); top: calc(var(--u) * 4); width: calc(var(--u) * 46); height: calc(var(--u) * 15); rotate: 40deg; background: var(--tape-c); opacity: .85; }
.tl7-it.on .snp { transform: translateX(var(--x, 0)) rotate(var(--r)); }
.tl7-it.on .snaps:hover .snp.s1 { transform: translateX(-6%) rotate(-7deg); }
.tl7-it.on .snaps:hover .snp.s2 { transform: translateX(8%) rotate(8deg); }
.tl7-it.on .snaps:hover .snp.s3 { transform: translateY(-10%) rotate(0deg); }
.snp:hover { z-index: 6 !important; box-shadow: 0 20px 36px -14px rgba(42, 31, 24, .6); }
@media (prefers-reduced-motion: reduce) { .snp { transform: rotate(var(--r)) !important; transition: none; } }
.tl7-doc { display: grid; gap: 2px; padding: calc(var(--u) * 12) calc(var(--u) * 14); border-radius: calc(var(--u) * 10); background: repeating-linear-gradient(135deg, #fafafb 0 8px, #f4f4f7 8px 16px); border: 1px dashed #d9dae0; text-decoration: none; color: inherit; }
.tl7-doc span { font-size: calc(var(--u) * 10); color: #6b6d76; text-transform: uppercase; letter-spacing: .08em; } .tl7-doc b { font-size: calc(var(--u) * 17); letter-spacing: .02em; } .tl7-doc em { font-style: normal; color: var(--coral); font-weight: 600; font-size: calc(var(--u) * 11); }
.tl7-dogs, .tl7-pups { display: flex; gap: calc(var(--u) * 10); flex-wrap: wrap; }
.tl7-dogs a, .tl7-pups a { display: grid; justify-items: center; gap: 4px; text-decoration: none; color: inherit; font-size: calc(var(--u) * 11); }
.tl7-dogs img, .tl7-dogs span, .tl7-pups img, .tl7-pups span { width: calc(var(--u) * 64); height: calc(var(--u) * 64); border-radius: 50%; object-fit: cover; background: #f3f3f6; box-shadow: 0 0 0 3px #fff, 0 6px 14px -6px rgba(0, 0, 0, .3); transition: transform .3s; }
.tl7-pups img, .tl7-pups span { width: calc(var(--u) * 92); height: calc(var(--u) * 92); border-radius: calc(var(--u) * 14); }
.tl7-dogs a:hover img, .tl7-pups a:hover img { transform: translateY(-3px) scale(1.05); }
.tl7-next .tl7-card { background: linear-gradient(135deg, #fff, #fff4f6); box-shadow: 0 0 0 1.5px #f6c7cf, 0 20px 40px -26px rgba(216, 27, 96, .4); }
.tl7-cta { display: flex; gap: calc(var(--u) * 10); margin-top: calc(var(--u) * 14); flex-wrap: wrap; }

/* checks: 3D icons + a colour per guide step */
.gcard .gh .ic3 { width: calc(var(--u) * 70); height: calc(var(--u) * 70); flex: none; display: grid; place-items: center; border-radius: calc(var(--u) * 18); background: radial-gradient(circle at 50% 40%, #fff, #fbeff1); }
.gcard .gh .ic3 img { width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(150, 20, 40, .25)); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.gcard:hover .gh .ic3 img { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.guide .g-item { --c: #d81b60; --cs: #fde8ec; }
.guide .g-item:nth-child(9n+2) { --c: #d97706; --cs: #fef3e2; } .guide .g-item:nth-child(9n+3) { --c: #0f9f6e; --cs: #e3f7ee; } .guide .g-item:nth-child(9n+4) { --c: #2f7fd6; --cs: #e5f0fc; }
.guide .g-item:nth-child(9n+5) { --c: #8b5cf6; --cs: #f1ebfe; } .guide .g-item:nth-child(9n+6) { --c: #0d9488; --cs: #e0f5f3; } .guide .g-item:nth-child(9n+7) { --c: #db2777; --cs: #fde7f1; }
.guide .g-item:nth-child(9n+8) { --c: #4f46e5; --cs: #e9e8fd; } .guide .g-item:nth-child(9n) { --c: #dc2626; --cs: #fee4e2; }
.guide .g-ic { background: linear-gradient(135deg, var(--cs), color-mix(in srgb, var(--cs) 60%, var(--c) 18%)); color: var(--c); box-shadow: 0 8px 16px -10px var(--c); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.guide .g-item:hover .g-ic, .guide .g-item[open] .g-ic { transform: rotate(-6deg) scale(1.08); }
.guide .g-n { background: var(--c); color: #fff; }

/* album: an open photo album, pictures drop onto the pages */
.bk { margin-top: calc(var(--u) * 6); }
.bk-in { position: relative; display: grid; grid-template-columns: 1fr 1fr; aspect-ratio: 1.55; padding: calc(var(--u) * 14); border-radius: calc(var(--u) * 14); background: linear-gradient(135deg, #8d1a2c, #5e0d1b); box-shadow: 0 30px 60px -30px rgba(80, 0, 15, .6), inset 0 0 0 2px rgba(255, 255, 255, .06); perspective: 2000px; }
.bk-page { position: relative; overflow: hidden; background: #fbf7ef; background-image: radial-gradient(rgba(140, 110, 70, .07) 1px, transparent 1px); background-size: 6px 6px; }
.bk-page.l { border-radius: calc(var(--u) * 6) 0 0 calc(var(--u) * 6); box-shadow: inset -26px 0 30px -18px rgba(70, 40, 20, .28); }
.bk-page.r { border-radius: 0 calc(var(--u) * 6) calc(var(--u) * 6) 0; box-shadow: inset 26px 0 30px -18px rgba(70, 40, 20, .28); }
.bk-leaf { position: absolute; top: calc(var(--u) * 14); bottom: calc(var(--u) * 14); left: 50%; width: calc(50% - var(--u) * 14); background: #f6efe2; transform-origin: left center; border-radius: 0 calc(var(--u) * 6) calc(var(--u) * 6) 0; opacity: 0; pointer-events: none; backface-visibility: visible; box-shadow: inset 30px 0 40px -20px rgba(70, 40, 20, .25); }
.bk-leaf.turn-next { opacity: 1; animation: leafN .8s cubic-bezier(.45, .05, .3, 1) forwards; }
.bk-leaf.turn-prev { opacity: 1; left: calc(var(--u) * 14); transform-origin: right center; border-radius: calc(var(--u) * 6) 0 0 calc(var(--u) * 6); animation: leafP .8s cubic-bezier(.45, .05, .3, 1) forwards; }
@keyframes leafN { from { transform: rotateY(0); filter: brightness(1); } 50% { filter: brightness(.82); } to { transform: rotateY(-180deg); filter: brightness(1); } }
@keyframes leafP { from { transform: rotateY(0); } 50% { filter: brightness(.82); } to { transform: rotateY(180deg); } }
.bk-ph { position: absolute; left: var(--x); top: var(--y); width: var(--w); background: #fff; padding: 3.5% 3.5% 11%; box-shadow: 0 10px 22px -12px rgba(40, 20, 10, .5); transform: rotate(var(--r)); text-decoration: none; transition: transform .3s, box-shadow .3s; }
.bk-ph:hover { transform: rotate(0) scale(1.06); z-index: 5; box-shadow: 0 20px 34px -14px rgba(40, 20, 10, .55); }
.bk-ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.bk-ph span { position: absolute; left: 6%; right: 6%; bottom: 2%; font-family: var(--hand); font-size: calc(var(--u) * 14.5); color: #3a3036; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bk-c { position: absolute; width: 16%; aspect-ratio: 1; background: rgba(60, 40, 30, .82); z-index: 1; }
.bk-c.tl { left: -4%; top: -4%; clip-path: polygon(0 0, 100% 0, 0 100%); } .bk-c.br { right: -4%; bottom: -4%; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.bk.drop .bk-ph { animation: drop6 .75s cubic-bezier(.25, .9, .35, 1.15) both; animation-delay: calc(var(--i) * 260ms + 120ms); }
.bk.drop .bk-page.r .bk-ph { animation-delay: calc(var(--i) * 260ms + 900ms); }
@keyframes drop6 { 0% { opacity: 0; transform: translateY(-140%) rotate(calc(var(--r) * -3)) scale(1.25); } 60% { opacity: 1; } 78% { transform: translateY(2%) rotate(var(--r)) scale(.98); } 100% { opacity: 1; transform: rotate(var(--r)) scale(1); } }
.bk-no { position: absolute; bottom: 2.5%; left: 50%; translate: -50% 0; font-style: normal; font-family: var(--hand); font-size: calc(var(--u) * 14); color: #a08c74; }
.bk-title { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding: 10%; }
.bk-title h2 { font-family: var(--hand); font-weight: 600; font-size: calc(var(--u) * 46); color: #5e0d1b; margin: calc(var(--u) * 6) 0 0; letter-spacing: 0; }
.bk-title p { margin: calc(var(--u) * 2) 0 calc(var(--u) * 10); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: calc(var(--u) * 11); color: #8d1a2c; }
.bk-title small { color: #8a7a66; font-size: calc(var(--u) * 11); }
.bk-paw { width: calc(var(--u) * 54); color: var(--coral); rotate: -12deg; } .bk-paw svg { width: 100%; height: auto; }
.bk.drop .bk-title > * { animation: up6 .6s ease both; } .bk.drop .bk-title > :nth-child(2) { animation-delay: .1s; } .bk.drop .bk-title > :nth-child(3) { animation-delay: .2s; } .bk.drop .bk-title > :nth-child(4) { animation-delay: .3s; }
.bk-nav { display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 16); margin-top: calc(var(--u) * 16); }
.bk-nav button { width: calc(var(--u) * 42); height: calc(var(--u) * 42); border-radius: 50%; border: 0; background: var(--coral); color: #fff; font-size: calc(var(--u) * 24); line-height: 1; cursor: pointer; box-shadow: 0 10px 20px -10px rgba(216, 27, 96, .6); transition: transform .2s, background .2s; }
.bk-nav button:hover:not(:disabled) { transform: scale(1.08); background: var(--coral-d); }
.bk-nav button:disabled { background: #e3e3e8; color: #a5a6ae; box-shadow: none; cursor: default; }
.bk-nav span { font-weight: 700; font-size: calc(var(--u) * 13); min-width: calc(var(--u) * 60); text-align: center; }
.bk-hint { text-align: center; color: #8a8b94; font-size: calc(var(--u) * 11); margin: calc(var(--u) * 8) 0 0; }

@media (prefers-reduced-motion: reduce) {
  .arch6-ring, .bdg6 { animation: none; } .bk.drop .bk-ph, .bk.drop .bk-title > * { animation: none; }
  .tl7-card { opacity: 1; translate: 0 0; } .tl7-dot { scale: 1; }
}
@media (max-width: 860px) {
  .why6 { padding: 34px 0 28px; } .why6-g { grid-template-columns: 1fr; gap: 12px; padding: 0 16px; }
  .why6-c { padding: 18px 18px 18px 86px; min-height: 104px; border-radius: 16px; } .why6-ic { position: absolute; left: 16px; top: 18px; width: 56px; height: 56px; margin: 0; }
  .why6-c b { font-size: 17px; } .why6-c p { font-size: 14.5px; } .why6-n { font-size: 26px; right: 14px; top: 10px; }
  .arch6 { height: 400px; margin: 28px 16px 0; } .arch6-ph { width: 230px; height: 340px; top: 20px; } .arch6-ring { width: 320px; height: 320px; }
  .bdg6 { padding: 7px 11px 7px 7px; border-radius: 12px; } .bdg6 b { font-size: 14px; } .bdg6 small { font-size: 11.5px; } .bdg6 .tl6 { width: 32px; height: 32px; }
  .bdg6.b1 { left: 0; top: 40px; } .bdg6.b2 { right: 0; top: 170px; } .bdg6.b3 { left: 6px; bottom: 6px; }
  .tl7-sec { padding: 26px 0 30px; } .tl7 { padding: 0 16px 0 8px; }
  .tl7-line { left: 31px; translate: 0 0; }
  .tl7-it, .tl7-it:nth-child(odd) { grid-template-columns: 48px 1fr; gap: 12px; align-items: start; margin-bottom: 18px; }
  .tl7-it .tl7-card, .tl7-it:nth-child(odd) .tl7-card { grid-column: 2; grid-row: 1; translate: 30px 0; padding: 16px; border-radius: 14px; }
  .tl7-it.on .tl7-card { translate: 0 0; }
  .tl7-dot { grid-column: 1; width: 44px; height: 44px; margin-top: 8px; }
  .tl7-date { font-size: 11px; padding: 4px 10px; margin-bottom: 8px; } .tl7-card h3 { font-size: 19px; } .tl7-card p { font-size: 15px; }
  .tl7-media > img { height: 180px; border-radius: 10px; } .snaps { height: 228px; } .snp img { height: 150px; } .snaps.n3 .snp img { height: 118px; } .snp span { font-size: 17px; } .tl7-doc span { font-size: 11px; } .tl7-doc b { font-size: 18px; } .tl7-doc em { font-size: 13px; }
  .tl7-dogs img, .tl7-dogs span { width: 60px; height: 60px; } .tl7-pups img, .tl7-pups span { width: 96px; height: 96px; border-radius: 14px; } .tl7-dogs a, .tl7-pups a { font-size: 13px; }
  .gcard .gh .ic3 { width: 64px; height: 64px; border-radius: 16px; }
  .bk-in { grid-template-columns: 1fr; aspect-ratio: .74; padding: 10px; margin: 0 4px; border-radius: 12px; }
  .bk-page.l { display: none; } .bk-page.r { border-radius: 6px; box-shadow: inset 18px 0 24px -16px rgba(70, 40, 20, .28); }
  .bk-leaf { left: 10px; top: 10px; bottom: 10px; width: calc(100% - 20px); border-radius: 6px; }
  .bk-leaf.turn-prev { left: 10px; transform-origin: left center; animation-name: leafN; animation-direction: reverse; }
  .bk-ph span { font-size: 16px; } .bk-no { font-size: 16px; } .bk-title h2 { font-size: 44px; } .bk-title p { font-size: 12px; } .bk-title small { font-size: 13px; } .bk-paw { width: 50px; }
  .bk.drop .bk-page.r .bk-ph { animation-delay: calc(var(--i) * 260ms + 120ms); }
  .bk-nav { gap: 18px; margin-top: 16px; } .bk-nav button { width: 46px; height: 46px; font-size: 26px; } .bk-nav span { font-size: 15px; } .bk-hint { font-size: 12.5px; padding: 0 16px; }
}
/* timeline: the empty side carries the big date */
.tl7-side { grid-column: 3; grid-row: 1; padding: 0 calc(var(--u) * 10); opacity: 0; translate: calc(var(--u) * 40) 0; transition: opacity .6s ease .1s, translate .7s cubic-bezier(.2, .7, .2, 1) .1s; }
.tl7-it:nth-child(odd) .tl7-side { grid-column: 1; text-align: right; translate: calc(var(--u) * -40) 0; }
.tl7-it.on .tl7-side { opacity: 1; translate: 0 0; }
.tl7-side b { display: block; font-size: calc(var(--u) * 34); line-height: 1; letter-spacing: -.035em; color: var(--c, var(--coral)); }
.tl7-side small { display: block; margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 10.5); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #a3a4ad; }
.tl7-side.rose, .tl7-side.red { --c: var(--coral); } .tl7-side.amber { --c: #d97706; } .tl7-side.sky { --c: #2f7fd6; } .tl7-side.plum { --c: #8b5cf6; } .tl7-side.green { --c: #0f9f6e; } .tl7-side.teal { --c: #0d9488; }
.tl7-it { margin-bottom: calc(var(--u) * 6); }
.tl7-it .tl7-date { display: none; }
.about-card .txt p { font-size: calc(var(--u) * 12.6); line-height: 1.7; }
@media (prefers-reduced-motion: reduce) { .tl7-side { opacity: 1; translate: 0 0; } }
@media (max-width: 860px) { .tl7-side { display: none; } .tl7-it .tl7-date { display: inline-block; } .tl7-it, .tl7-it:nth-child(odd) { margin-bottom: 18px; } .about-card .txt p { font-size: 15.5px; } }
/* hero feature chips: one colour each */
.phero .feats div:nth-child(1) i { background: #fde8ec; color: var(--coral); box-shadow: none; }
.phero .feats div:nth-child(2) i { background: #fef3e2; color: #d97706; box-shadow: none; }
.phero .feats div:nth-child(3) i { background: #e3f7ee; color: #0f9f6e; box-shadow: none; }

/* ---------- v5 (21.10.2026 нощ): 3D icons everywhere, flip puppy cards, dropping chips, winding paw timeline ---------- */
/* what you get: 3D icons + tilt */
.inc5-g { perspective: 900px; }
.inc5 { transform: rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transition: transform .25s ease, box-shadow .3s, translate .6s cubic-bezier(.2, .7, .2, 1) var(--d), opacity .6s ease var(--d); }
.inc5:hover { box-shadow: 0 18px 34px -22px rgba(216, 27, 96, .45); }
.inc5 .ic3d { width: calc(var(--u) * 58); height: calc(var(--u) * 58); background: none; display: block; margin: 0 auto calc(var(--u) * 8); }   /* block, not grid: a grid let tall icons outgrow the box */
.inc5 .ic3d img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(120, 30, 40, .22)); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.inc5:hover .ic3d img { transform: translateY(-5px) rotate(-8deg) scale(1.1); }
.rv6 .inc5 { opacity: 0; translate: 0 22px; } .rv6.in .inc5 { opacity: 1; translate: 0 0; }

/* trust band: 3D icons; the "all checks" link is a visible red pill */
.trust .ic-b.ic3d img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(120, 30, 40, .22)); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.trust > div:hover .ic3d img { transform: translateY(-4px) rotate(-6deg) scale(1.06); }
.trust-more a { background: var(--coral) !important; color: #fff !important; box-shadow: none !important; justify-content: center; }
.trust-more a em, .trust-more a svg { color: #fff !important; }

/* sub-page hero chips: drop from above, glow twice, then rest */
.feats.drop3 i.ft3 { width: calc(var(--u) * 42); height: calc(var(--u) * 42); background: none !important; box-shadow: none !important; border-radius: 0; }
.feats.drop3 i.ft3 img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(120, 30, 40, .25)); }
.feats.drop3 > div { animation: drop3 .9s cubic-bezier(.25, .9, .35, 1.2) both; animation-delay: calc(var(--k) * 180ms + 350ms); }
.feats.drop3 > div i.ft3 img { animation: glow3 1.4s ease-in-out 2; animation-delay: calc(var(--k) * 180ms + 1250ms); }
@keyframes drop3 { 0% { opacity: 0; transform: translateY(-140px) rotate(-14deg); } 55% { opacity: 1; } 72% { transform: translateY(6px) rotate(3deg); } 86% { transform: translateY(-3px) rotate(-1deg); } 100% { opacity: 1; transform: none; } }
@keyframes glow3 { 50% { filter: drop-shadow(0 0 10px rgba(255, 196, 120, .95)) drop-shadow(0 0 22px rgba(245, 60, 80, .55)) brightness(1.15); transform: scale(1.12); } }

/* puppy cards turn over to the listing */
.pup.flip { perspective: 1200px; background: none; box-shadow: none; overflow: visible; }
.pup.flip:hover { transform: none; }
.flip-in { position: relative; display: block; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, 1.2, .4, 1); }
.flip-f, .flip-b { display: flex; flex-direction: column; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; border-radius: calc(var(--u) * 6); box-shadow: 0 0 0 1px #ececf0; overflow: hidden; }
.flip-b { position: absolute; inset: 0; transform: rotateY(180deg); padding: calc(var(--u) * 14) calc(var(--u) * 16); gap: calc(var(--u) * 8); background: linear-gradient(160deg, #fff 30%, #fff4f6); box-shadow: 0 0 0 1.5px #f3c4cc, 0 20px 40px -24px rgba(216, 27, 96, .4); }
@media (hover: hover) { .pup.flip:hover .flip-in { transform: rotateY(180deg); } }
.pup.flip.on .flip-in { transform: rotateY(180deg); }
.flip-hint { position: absolute; right: calc(var(--u) * 10); bottom: calc(var(--u) * 10); width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--coral); display: grid; place-items: center; z-index: 1; }
.flip-hint svg { width: 52%; height: 52%; }
.fb-top b { display: block; font-size: calc(var(--u) * 20); letter-spacing: -.02em; margin-top: calc(var(--u) * 6); line-height: 1.1; }
.fb-top small { display: block; color: #6b6d76; font-size: calc(var(--u) * 11); }
.fb-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: calc(var(--u) * 6) calc(var(--u) * 10); }
.fb-facts span { display: grid; } .fb-facts em { font-style: normal; font-size: calc(var(--u) * 9.5); text-transform: uppercase; letter-spacing: .08em; color: #9a9ba3; } .fb-facts strong { font-size: calc(var(--u) * 12); font-weight: 600; color: #1d1d22; }
.fb-inc { font-size: calc(var(--u) * 10.5); color: #0b7a55; background: #e3f7ee; border-radius: 99px; padding: calc(var(--u) * 4) calc(var(--u) * 10); align-self: flex-start; font-weight: 600; }
.fb-bot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fb-bot .price { font-size: calc(var(--u) * 18); font-weight: 800; color: var(--coral); }
.fb-go { display: inline-flex; align-items: center; gap: 6px; background: var(--coral); color: #fff; font-weight: 600; font-size: calc(var(--u) * 11.5); padding: calc(var(--u) * 7) calc(var(--u) * 12); border-radius: calc(var(--u) * 4); }
.fb-go svg { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.flip-b.reserved .fb-go, .flip-b.taken .fb-go { background: #3a3b42; }

/* story timeline: winding path, walking paws, zoom */
.tl7-line { display: none; }
.tl7-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.tl7-base { fill: none; stroke: #ececf0; stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
.tl7-prog { fill: none; stroke: var(--coral); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(216, 27, 96, .35)); }
.tl7-paw { fill: var(--coral); opacity: 0; transition: opacity .35s ease; }
.tl7-paw.on { opacity: .28; }
.tl7-walker { fill: var(--coral); transition: opacity .3s; }
.tl7-glow { fill: rgba(216, 27, 96, .14); animation: pulse7 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse7 { 50% { transform: scale(1.5); opacity: .4; } }
.tl7-it { z-index: 1; }
.tl7-card { scale: var(--z, 1); transition: opacity .6s ease, translate .7s cubic-bezier(.2, .7, .2, 1), scale .25s ease-out, box-shadow .3s; }
.tl7-side { scale: var(--z, 1); }

@media (prefers-reduced-motion: reduce) {
  .feats.drop3 > div, .feats.drop3 > div i.ft3 img { animation: none; } .tl7-glow { animation: none; }
}
@media (max-width: 860px) {
  .inc5 .ic3d { width: 54px; height: 54px; margin-bottom: 8px; }
  .feats.drop3 i.ft3 { width: 40px; height: 40px; }
  .flip-b { padding: 18px; gap: 12px; border-radius: 6px; } .fb-top b { font-size: 24px; } .fb-top small { font-size: 13px; }
  .fb-facts em { font-size: 11px; } .fb-facts strong { font-size: 15px; } .fb-inc { font-size: 12.5px; padding: 5px 12px; }
  .fb-bot .price { font-size: 22px; } .fb-go { font-size: 14px; padding: 9px 14px; } .fb-go svg { width: 14px; height: 14px; }
  .flip-hint { width: 34px; height: 34px; right: 12px; bottom: 12px; }
  .tl7-paw.on { opacity: .3; }
}

/* ---- Ivelina's own text (21.10): sizes & colours, parents & DNA tests, kennel rules, e-mail ---- */
.sz8-p { font-size: calc(var(--u) * 12.4); color: #5d5f69; line-height: 1.55; margin: 0 0 calc(var(--u) * 12); }
.sz8 { display: flex; align-items: flex-start; gap: calc(var(--u) * 12); margin-bottom: calc(var(--u) * 10); }
.sz8-k { flex: 0 0 calc(var(--u) * 62); font-size: calc(var(--u) * 9.5); letter-spacing: .12em; text-transform: uppercase; color: #7b7d88; font-weight: 700; padding-top: calc(var(--u) * 6); }
.sz8-chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); }
.sz8-chips span { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 5) calc(var(--u) * 11); border-radius: 999px; box-shadow: 0 0 0 1px #ececf0; font-size: calc(var(--u) * 11.4); font-weight: 600; color: var(--ink); background: #fff; }
.sz8-chips:not(.col) span { background: #fdeaed; box-shadow: none; color: var(--coral); }
.sz8-chips i { width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.sz8-chips i.two { background: linear-gradient(135deg, #fff 50%, #1d1d21 50%); }
.breed5 .breed5-l { margin-top: calc(var(--u) * 14); }
.rules8 { max-width: calc(var(--u) * 640); margin: calc(var(--u) * 18) auto 0; text-align: center; font-size: calc(var(--u) * 11.4); line-height: 1.6; color: #5d5f69; }
.par8-in { width: calc(var(--u) * 928); display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 40); align-items: center; }
.par8 h2 { font-size: calc(var(--u) * 24); margin: calc(var(--u) * 4) 0 calc(var(--u) * 14); }
.par8-l { list-style: none; margin: 0 0 calc(var(--u) * 18); padding: 0; }
.par8-l li { position: relative; padding: 0 0 calc(var(--u) * 10) calc(var(--u) * 26); font-size: calc(var(--u) * 12.4); color: var(--ink); line-height: 1.5; }
.par8-l li::before { content: ""; position: absolute; left: 0; top: calc(var(--u) * 3); width: calc(var(--u) * 14); height: calc(var(--u) * 14); border-radius: 50%; background: var(--coral) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 60% no-repeat; }
.par8-card { padding: calc(var(--u) * 22); border-radius: calc(var(--u) * 8); background: #fff; box-shadow: 0 0 0 1px #ececf0, 0 18px 40px -30px rgba(20, 20, 30, .35); }
.par8-h { display: block; font-size: calc(var(--u) * 16); }
.par8-s { display: block; font-size: calc(var(--u) * 10.4); color: #7b7d88; margin: 2px 0 calc(var(--u) * 12); }
.par8-t { list-style: none; margin: 0; padding: 0; counter-reset: t8; }
.par8-t li { counter-increment: t8; position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: calc(var(--u) * 10); padding: calc(var(--u) * 9) 0 calc(var(--u) * 9) calc(var(--u) * 30); border-top: 1px solid #f0f0f3; }
.par8-t li::before { content: counter(t8); position: absolute; left: 0; top: calc(var(--u) * 10); width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-radius: 50%; background: #e8f6ee; color: #1f8a52; font-size: calc(var(--u) * 10); font-weight: 700; display: grid; place-items: center; }
.par8-t b { font-size: calc(var(--u) * 11.8); color: var(--ink); }
.par8-t small { grid-column: 1; font-size: calc(var(--u) * 9.8); color: #7b7d88; margin-top: 2px; }
.par8-t em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: calc(var(--u) * 9.4); font-weight: 700; letter-spacing: .06em; color: #1f8a52; background: #e8f6ee; padding: calc(var(--u) * 3) calc(var(--u) * 8); border-radius: 999px; }
.faq6-mail { display: block; font-size: calc(var(--u) * 11); color: inherit; opacity: .8; margin-top: 4px; position: relative; z-index: 1; }
@media (max-width: 860px) {
  .sz8-p { font-size: 15px; } .sz8 { flex-direction: column; gap: 6px; } .sz8-k { flex: none; font-size: 12px; padding: 0; } .sz8-chips span { font-size: 14px; padding: 6px 12px; } .sz8-chips i { width: 13px; height: 13px; }
  .rules8 { font-size: 14px; max-width: none; padding: 0 4px; }
  .par8-in { width: calc(100% - 32px); grid-template-columns: minmax(0, 1fr); gap: 22px; } .par8 h2 { font-size: 24px; }
  .par8-l li { font-size: 15px; padding-left: 26px; } .par8-l li::before { width: 15px; height: 15px; top: 3px; }
  .par8-card { padding: 18px 16px; } .par8-h { font-size: 18px; } .par8-s { font-size: 13px; }
  .par8-t li { padding-left: 30px; } .par8-t li::before { width: 21px; height: 21px; font-size: 12px; top: 10px; } .par8-t b { font-size: 14.5px; } .par8-t small { font-size: 12.5px; } .par8-t em { font-size: 11px; padding: 3px 8px; }
  .faq6-mail { font-size: 14px; }
}

/* ---- icons v6 (21.10, owner picked "Е"): the same 3D icons recoloured to red accents + ivory/graphite, smaller, on a soft pink circle ---- */
.why6-ic, .inc5 .ic3d, .trust .ic-b.ic3d, .gcard .gh .ic3, .feats.drop3 i.ft3 { display: grid !important; place-items: center; border-radius: 50% !important; background: #fdf0f2 !important; box-shadow: none !important; }
.why6-ic { width: calc(var(--u) * 58); height: calc(var(--u) * 58); }
.inc5 .ic3d { width: calc(var(--u) * 58); height: calc(var(--u) * 58); margin: 0 auto calc(var(--u) * 10); }
.trust .ic-b.ic3d { width: calc(var(--u) * 56); height: calc(var(--u) * 56); }
.gcard .gh .ic3 { width: calc(var(--u) * 60); height: calc(var(--u) * 60); }
.why6-ic img, .inc5 .ic3d img, .trust .ic-b.ic3d img, .gcard .gh .ic3 img { width: 68%; height: 68%; filter: drop-shadow(0 4px 5px rgba(60, 20, 30, .16)); }
.feats.drop3 i.ft3 img { width: 70%; height: 70%; filter: drop-shadow(0 3px 4px rgba(60, 20, 30, .16)); }
.why6-c:hover .why6-ic img, .inc5:hover .ic3d img, .trust > div:hover .ic3d img, .gcard:hover .gh .ic3 img { transform: translateY(-3px) rotate(-5deg) scale(1.05); }
@media (max-width: 860px) {
  .why6-ic { width: 52px; height: 52px; } .inc5 .ic3d { width: 52px; height: 52px; margin-bottom: 8px; } .trust .ic-b.ic3d { width: 50px; height: 50px; } .gcard .gh .ic3 { width: 56px; height: 56px; }
}

/* ---- spacing fixes 21.10 (footer on every page + admin) ---- */
.f5-top { gap: calc(var(--u) * 26); }
.f5-top .logo { flex: none; white-space: nowrap; }
.f5-c { white-space: nowrap; }
.card.dog .bd > div { flex-wrap: wrap; }
.card.dog .btn.small { flex: 1 1 auto; justify-content: center; min-width: 0; }
#uf { grid-template-columns: 1fr 1fr 1fr 1.3fr; }
#uf .field > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#uf input[type=file] { padding: calc(var(--u) * 8) calc(var(--u) * 8); font-size: calc(var(--u) * 10.5); min-width: 0; width: 100%; }
@media (max-width: 860px) {
  #uf { grid-template-columns: 1fr; }
  #uf input[type=file] { font-size: 14px; padding: 10px; }
  /* tables become stacked rows instead of sliding off the screen */
  .tbl:not(.growth) { min-width: 0; }
  .tbl:not(.growth) thead { display: none; }
  .tbl:not(.growth) tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .tbl:not(.growth) td { border: 0; padding: 0; }
  .tbl:not(.growth) td:first-child { flex: none; }
  .tbl:not(.growth) td:first-child:not(:has(img)) { flex: 1 1 100%; }
  .tbl:not(.growth) td:nth-child(2):has(~ td) { flex: 1 1 50%; min-width: 0; }
  .tbl:not(.growth) td.act { margin-left: auto; }
  /* the three counters sit in one row */
  .adm-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; }
  .adm-stats .card { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; }
  .adm-stats i { width: 28px; height: 28px; font-size: 14px; }
  .adm-stats b { font-size: 22px; } .adm-stats small { font-size: 11.5px; line-height: 1.25; }
}

/* ── v7 (ideas from ohpuppy.app): photo heroes with a soft fade, one per page; quote panel; joined steps ── */
.phero.v7 { height: auto; min-height: calc(var(--u) * 430); display: grid; align-items: end; padding: 0 0 calc(var(--u) * 64); background: #241a1d var(--hero) center 35% / cover no-repeat; color: #fff; text-align: center;
  -webkit-mask: linear-gradient(180deg, #000 82%, transparent); mask: linear-gradient(180deg, #000 82%, transparent); }
.phero.v7::before { background: radial-gradient(120% 90% at 50% 100%, rgba(18, 12, 14, .78) 0%, rgba(18, 12, 14, .45) 45%, rgba(18, 12, 14, .08) 80%); }
.phero.v7 .wrap { padding-top: calc(var(--u) * 150); display: grid; justify-items: center; }
.phero.v7 .eyebrow { color: #ffd3dc; letter-spacing: .16em; }
.phero.v7 h1 { color: #fff; font-size: calc(var(--u) * 46); line-height: 1.04; margin: calc(var(--u) * 8) 0 calc(var(--u) * 12); text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.phero.v7 h1 .accent { color: #fff; background: linear-gradient(transparent 62%, rgba(216, 27, 96, .75) 62%, rgba(216, 27, 96, .75) 88%, transparent 88%); padding: 0 .08em; }
.phero.v7 .lead2 { color: rgba(255, 255, 255, .92); max-width: calc(var(--u) * 520); margin: 0 auto calc(var(--u) * 20); }
.phero.v7 .btn { box-shadow: 0 10px 24px -10px rgba(216, 27, 96, .8); }
.phero.v7 + .panel { margin-top: calc(var(--u) * -20); background: transparent; }
.phero.v7 .wrap > * { animation: up7 .9s cubic-bezier(.2, .8, .2, 1) both; } .phero.v7 .wrap > :nth-child(2) { animation-delay: .08s; } .phero.v7 .wrap > :nth-child(3) { animation-delay: .16s; } .phero.v7 .wrap > :nth-child(4) { animation-delay: .24s; }
@keyframes up7 { from { opacity: 0; translate: 0 18px; } }

.steps5 { position: relative; gap: calc(var(--u) * 22); padding-top: calc(var(--u) * 6); }
.steps5::before, .steps5::after { content: ""; position: absolute; top: calc(var(--u) * 24); left: 12.5%; right: 12.5%; height: 3px; border-radius: 3px; background: #f1d9de; }
.steps5::after { background: #d81b60; transform-origin: left; transform: scaleX(var(--fill, 1)); transition: transform 1.6s cubic-bezier(.3, .7, .2, 1) .2s; }
.rv6:not(.in) .steps5 { --fill: 0; }
.st5 { position: relative; z-index: 1; background: none; border: 0; padding: 0 calc(var(--u) * 6); text-align: center; }
.st5 span { width: calc(var(--u) * 48); height: calc(var(--u) * 48); margin: 0 auto calc(var(--u) * 12); display: grid; place-items: center; border-radius: 50%; background: #d81b60; color: #fff; font-size: calc(var(--u) * 15); letter-spacing: 0; box-shadow: 0 0 0 6px #fff, 0 10px 22px -8px rgba(216, 27, 96, .6); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.st5:hover span { transform: scale(1.12); }
.rv6:not(.in) .st5 span { transform: scale(.4); }
.rv6 .st5:nth-child(2) span { transition-delay: .45s; } .rv6 .st5:nth-child(3) span { transition-delay: .9s; } .rv6 .st5:nth-child(4) span { transition-delay: 1.35s; }
@media (max-width: 860px) {
  .phero.v7 { min-height: 420px; padding-bottom: 54px; background-position: center 30%; }
  .phero.v7::before { background: linear-gradient(180deg, rgba(18, 12, 14, .1) 0%, rgba(18, 12, 14, .55) 38%, rgba(18, 12, 14, .82) 100%); }
  .phero.v7 .wrap { padding-top: 140px; } .phero.v7 h1 { font-size: 36px; } .phero.v7 .lead2 { font-size: 15.5px; line-height: 1.5; padding: 0 6px; }
  .steps5 { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .steps5::before, .steps5::after { top: 24px; bottom: 24px; left: 24px; right: auto; width: 3px; height: auto; transform-origin: top; transform: scaleY(var(--fill, 1)); }
  .st5 { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; text-align: left; padding: 0; } .st5 span { grid-row: span 2; width: 48px; height: 48px; margin: 0; font-size: 16px; } .st5 b { margin-top: 2px; }
}
@media (prefers-reduced-motion: reduce) { .phero.v7 .wrap > * { animation: none; } }

/* ── v8: balloons + walking paws on the steps; letter from Ivelina; real poodles per colour ── */
.steps5::before, .steps5::after { display: none; }
.trail7 { position: absolute; top: calc(var(--u) * 30); left: 15%; right: 15%; display: flex; justify-content: space-between; pointer-events: none; }
.trail7 i { width: calc(var(--u) * 13); height: calc(var(--u) * 13); background: #e7a9b5; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.5' rx='5.2' ry='4.4'/%3E%3Cellipse cx='5.2' cy='10.5' rx='2.3' ry='2.9'/%3E%3Cellipse cx='9.6' cy='6.2' rx='2.3' ry='3'/%3E%3Cellipse cx='14.4' cy='6.2' rx='2.3' ry='3'/%3E%3Cellipse cx='18.8' cy='10.5' rx='2.3' ry='2.9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.5' rx='5.2' ry='4.4'/%3E%3Cellipse cx='5.2' cy='10.5' rx='2.3' ry='2.9'/%3E%3Cellipse cx='9.6' cy='6.2' rx='2.3' ry='3'/%3E%3Cellipse cx='14.4' cy='6.2' rx='2.3' ry='3'/%3E%3Cellipse cx='18.8' cy='10.5' rx='2.3' ry='2.9'/%3E%3C/svg%3E") center / contain no-repeat; rotate: 90deg; opacity: .2; animation: walk7 3.6s ease-in-out infinite; }
.trail7 i:nth-child(odd) { translate: 0 calc(var(--u) * -5); } .trail7 i:nth-child(even) { translate: 0 calc(var(--u) * 5); }
.trail7 i:nth-child(1) { animation-delay: 0.00s; } .trail7 i:nth-child(2) { animation-delay: 0.18s; } .trail7 i:nth-child(3) { animation-delay: 0.36s; } .trail7 i:nth-child(4) { animation-delay: 0.54s; } .trail7 i:nth-child(5) { animation-delay: 0.72s; } .trail7 i:nth-child(6) { animation-delay: 0.90s; } .trail7 i:nth-child(7) { animation-delay: 1.08s; } .trail7 i:nth-child(8) { animation-delay: 1.26s; } .trail7 i:nth-child(9) { animation-delay: 1.44s; } .trail7 i:nth-child(10) { animation-delay: 1.62s; } .trail7 i:nth-child(11) { animation-delay: 1.80s; } .trail7 i:nth-child(12) { animation-delay: 1.98s; } .trail7 i:nth-child(13) { animation-delay: 2.16s; } .trail7 i:nth-child(14) { animation-delay: 2.34s; } .trail7 i:nth-child(15) { animation-delay: 2.52s; } 
@keyframes walk7 { 0%, 100% { opacity: .15; } 18% { opacity: 1; background: #d81b60; } 40% { opacity: .35; } }
.rv6:not(.in) .trail7 i { animation: none; opacity: 0; }
.st5 span { position: relative; width: calc(var(--u) * 54); height: calc(var(--u) * 62); border-radius: 50% 50% 48% 48% / 46% 46% 54% 54%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55) 0 12%, transparent 28%), var(--b, #d81b60);
  box-shadow: inset -6px -8px 14px rgba(0, 0, 0, .14), 0 14px 22px -12px rgba(0, 0, 0, .35); margin-bottom: calc(var(--u) * 26); animation: float7 var(--ft, 4.4s) ease-in-out infinite; transform-origin: 50% 120%; }
.st5 span::after { content: ""; position: absolute; left: 50%; bottom: calc(var(--u) * -5); translate: -50% 0; border: calc(var(--u) * 4) solid transparent; border-bottom-color: var(--b, #d81b60); rotate: 180deg; }
.st5 span::before { content: ""; position: absolute; left: 50%; top: 100%; width: calc(var(--u) * 10); height: calc(var(--u) * 24); margin-top: calc(var(--u) * 3); border-left: 1.5px solid #c7b9be; border-radius: 0 0 0 100%; }
.st5:nth-child(2) span { --b: #d81b60; --ft: 4.2s; } .st5:nth-child(3) span { --b: #e8833a; --ft: 4.8s; animation-delay: -1.2s; } .st5:nth-child(4) span { --b: #e05a87; --ft: 4.5s; animation-delay: -2.1s; } .st5:nth-child(5) span { --b: #2f9e8f; --ft: 5s; animation-delay: -.6s; }
@keyframes float7 { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 calc(var(--u) * -9); rotate: 4deg; } }
.st5:hover span { transform: scale(1.12); }
.rv6:not(.in) .st5 span { transform: translateY(calc(var(--u) * 60)) scale(.5); opacity: 0; }
.rv6 .st5 span { transition: transform 1s cubic-bezier(.2, .9, .3, 1.3), opacity .6s; }

.letter7-sec { padding: calc(var(--u) * 40) 0 calc(var(--u) * 56); }
.letter7 { position: relative; max-width: calc(var(--u) * 700); margin: 0 auto; padding: calc(var(--u) * 46) calc(var(--u) * 210) calc(var(--u) * 40) calc(var(--u) * 62); border-radius: calc(var(--u) * 4);
  background: linear-gradient(90deg, transparent calc(var(--u) * 44), rgba(216, 27, 96, .18) calc(var(--u) * 44) calc(var(--u) * 45), transparent calc(var(--u) * 45)), repeating-linear-gradient(180deg, transparent 0 calc(var(--u) * 25), rgba(120, 140, 190, .16) calc(var(--u) * 25) calc(var(--u) * 26)), #fffdf7;
  background-position: 0 0, 0 calc(var(--u) * 21); box-shadow: 0 30px 60px -32px rgba(42, 31, 24, .5), 0 1px 0 #ece3d6, inset 0 0 0 1px #f3ece1; rotate: -.6deg; transition: rotate .9s cubic-bezier(.2, .8, .2, 1), translate .9s cubic-bezier(.2, .8, .2, 1); }
.letter7.long { max-width: calc(var(--u) * 760); }
.letter7 p { font-size: calc(var(--u) * 12.4); line-height: calc(var(--u) * 26); color: #3a3036; margin: 0 0 calc(var(--u) * 0); }
.letter7 p + p { margin-top: calc(var(--u) * 13); }
.letter7 .hi7 + p { margin-top: 0; }
.letter7 .hi7 { font-family: var(--hand); font-size: calc(var(--u) * 26); color: #2b2226; margin-bottom: calc(var(--u) * 4); }
.letter7 .bye7 { font-family: var(--hand); font-size: calc(var(--u) * 20); margin-top: calc(var(--u) * 10); }
.letter7 .sig7 { font-family: var(--hand); font-size: calc(var(--u) * 34); line-height: 1; color: #d81b60; rotate: -3deg; transform-origin: left; margin: calc(var(--u) * 6) 0 calc(var(--u) * 14); }
.letter7 .sig7 small { display: block; font-family: var(--sans); font-size: calc(var(--u) * 9.5); line-height: 1.4; color: #8a7f84; rotate: 3deg; margin-top: calc(var(--u) * 8); letter-spacing: .02em; }
.letter7 .ps7 { font-family: var(--hand); font-size: calc(var(--u) * 17); line-height: 1.3; color: #642e3e; margin-top: calc(var(--u) * 8); }
.letter7 .lnk7 svg { width: 1em; height: 1em; flex: none; }
.letter7 .lnk7 { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; font-weight: 700; font-size: calc(var(--u) * 12); color: #d81b60; text-decoration: none; }
.stamp7 { position: absolute; top: calc(var(--u) * 20); right: calc(var(--u) * 22); width: calc(var(--u) * 78); padding: calc(var(--u) * 10) calc(var(--u) * 6); display: grid; justify-items: center; gap: 2px; text-align: center; background: #fff4f6; color: #d81b60; rotate: 7deg;
  outline: 2px dashed rgba(216, 27, 96, .45); outline-offset: -6px; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .3); }
.stamp7 span { width: calc(var(--u) * 20); height: calc(var(--u) * 20); } .stamp7 span svg { width: 100%; height: 100%; }
.stamp7 b { font-size: calc(var(--u) * 8.5); line-height: 1.1; } .stamp7 small { font-size: calc(var(--u) * 7.5); color: #8a5a66; }
.pin7 { position: absolute; right: calc(var(--u) * -34); top: calc(var(--u) * 120); width: calc(var(--u) * 190); background: #fff; padding: calc(var(--u) * 7) calc(var(--u) * 7) calc(var(--u) * 32); rotate: 5deg; box-shadow: 0 16px 30px -14px rgba(42, 31, 24, .55); text-decoration: none; transition: rotate .3s, scale .3s; }
.pin7::before { content: ""; position: absolute; left: 50%; top: calc(var(--u) * -9); width: calc(var(--u) * 62); height: calc(var(--u) * 17); translate: -50% 0; rotate: -4deg; background: var(--tape-a); opacity: .85; }
.pin7 img { display: block; width: 100%; height: calc(var(--u) * 220); object-fit: cover; object-position: 50% 15%; }
.pin7 span { position: absolute; left: calc(var(--u) * 10); bottom: calc(var(--u) * 7); font-family: var(--hand); font-size: calc(var(--u) * 16); color: #3a3036; }
.pin7:hover { rotate: 1deg; scale: 1.04; }
.rv6:not(.in) .letter7 { rotate: -5deg; translate: 0 calc(var(--u) * 50); }

.col7 { position: relative; aspect-ratio: 4 / 4.4; }
.col7 figure { position: absolute; inset: 0; margin: 0; background: #fff; padding: calc(var(--u) * 7); border-radius: calc(var(--u) * 10); box-shadow: 0 20px 40px -22px rgba(42, 31, 24, .55); opacity: 0; scale: .94; rotate: -3deg; transition: opacity .6s, scale .6s cubic-bezier(.2, .8, .2, 1), rotate .6s cubic-bezier(.2, .8, .2, 1); }
.col7 figure:nth-child(even) { rotate: 3deg; }
.col7 figure:not(.on) .col7-cr { display: none; }
.col7 figure.on { opacity: 1; scale: 1; rotate: -1.5deg; z-index: 2; }
.col7 figure img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--u) * 6); }
.col7::before { content: ""; position: absolute; inset: 4% -3% -2% 5%; border-radius: calc(var(--u) * 10); background: #f6dfe3; rotate: 5deg; }
.col7-tag { position: absolute; z-index: 3; left: calc(var(--u) * -10); bottom: calc(var(--u) * 26); padding: calc(var(--u) * 5) calc(var(--u) * 14); border-radius: 99px; background: #d81b60; color: #fff; font-weight: 700; font-size: calc(var(--u) * 12); rotate: -4deg; box-shadow: 0 8px 16px -8px rgba(216, 27, 96, .7); }
.col7-cr { position: absolute; z-index: 3; right: calc(var(--u) * 16); bottom: calc(var(--u) * 14); font-size: calc(var(--u) * 8.5); color: rgba(255, 255, 255, .9); text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.breed5-ph.col7 img { height: 100%; }
.sz8-chips.col button { font: inherit; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; border: 1px solid #ececf0; background: #fff; color: inherit; border-radius: 99px; padding: calc(var(--u) * 5) calc(var(--u) * 11); transition: background .2s, border-color .2s, transform .2s; }
.sz8-chips.col button:hover { transform: translateY(-2px); }
.sz8-chips.col button.on { border-color: #d81b60; background: #fff1f3; box-shadow: 0 0 0 2px rgba(216, 27, 96, .15); }
@media (max-width: 860px) {
  .trail7 { top: 26px; bottom: 26px; left: 22px; right: auto; flex-direction: column; } .trail7 i { width: 10px; height: 10px; rotate: 180deg; }
  .trail7 i:nth-child(odd) { translate: -4px 0; } .trail7 i:nth-child(even) { translate: 4px 0; }
  .st5 span { width: 46px; height: 54px; margin: 0; } .st5 span::before { display: none; }
  .letter7 { padding: 30px 20px 26px 34px; margin: 0 4px;
    background: linear-gradient(90deg, transparent 24px, rgba(216, 27, 96, .18) 24px 25px, transparent 25px), repeating-linear-gradient(180deg, transparent 0 25px, rgba(120, 140, 190, .16) 25px 26px), #fffdf7; background-position: 0 0, 0 18px; }
  .letter7 p { font-size: 15px; line-height: 26px; } .letter7 .hi7 { font-size: 26px; padding-right: 70px; } .letter7 .sig7 { font-size: 32px; } .letter7 .sig7 small { font-size: 12px; } .letter7 .ps7 { font-size: 19px; }
  .stamp7 { width: 66px; top: 14px; right: 12px; } .stamp7 b { font-size: 10px; } .stamp7 small { font-size: 9px; } .stamp7 span { width: 18px; height: 18px; }
  .pin7 { position: relative; display: block; right: auto; top: auto; width: 62%; margin: 6px auto 22px; rotate: 3deg; padding: 7px 7px 32px; } .pin7 img { height: 200px; } .pin7 span { font-size: 18px; }
  .col7-tag { font-size: 14px; left: -4px; } .col7-cr { font-size: 11px; }
  .sz8-chips.col button { padding: 6px 12px; }
}
@media (prefers-reduced-motion: reduce) { .trail7 i, .st5 span { animation: none; } }

/* ── v9: pink theme, rounder shapes; why = moving strip; care collage; one spinning tile for "what you get"; cute parents ── */
:root { --coral: #d81b60; --coral-d: #ad1457; --coral-soft: #fde7ef; --r7: calc(var(--u) * 18); }
.btn, .btn.cta { border-radius: 999px; }
.btn { padding: 0 calc(var(--u) * 22); }
.card, .sub-card, .b5, .faq6, .faq6-card, .trust, .trust-more > *, .tl7-card, .inc5, .gcard, .form-card, .contact-grid > *, .grid .card, .detail > *, .g-item, .guide-intro + .guide > * { border-radius: var(--r7); }
.b5 img, .b5-ph { border-radius: var(--r7) 0 0 var(--r7); }
.field input, .field select, .field textarea, input[type=text], input[type=email], input[type=tel], textarea, select { border-radius: calc(var(--u) * 12); }
.sz8-chips span, .sz8-chips.col button, .adm-tab { border-radius: 999px; }

.tile7 { display: grid; place-items: center; flex: none; width: calc(var(--u) * 46); height: calc(var(--u) * 46); border-radius: 30%; background: linear-gradient(160deg, color-mix(in srgb, var(--t) 78%, #fff), var(--t)); box-shadow: 0 10px 20px -10px var(--t), inset 0 1px 0 rgba(255, 255, 255, .35); }
.tile7 svg { width: 52%; height: 52%; }

.why7 { overflow: hidden; }
.why7-strip { -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); padding: calc(var(--u) * 10) 0 calc(var(--u) * 18); }
.why7-run { display: flex; width: max-content; gap: calc(var(--u) * 16); animation: marq 46s linear infinite; padding-left: calc(var(--u) * 16); }
.why7-strip:hover .why7-run { animation-play-state: paused; }
.why7-c { display: flex; align-items: center; gap: calc(var(--u) * 14); width: calc(var(--u) * 330); padding: calc(var(--u) * 16) calc(var(--u) * 22) calc(var(--u) * 16) calc(var(--u) * 16); background: #fff; border-radius: 999px; box-shadow: 0 1px 0 #f1e6ea, 0 14px 30px -20px rgba(120, 40, 70, .35); }
.why7-c b { display: block; font-size: calc(var(--u) * 13.5); margin-bottom: 2px; }
.why7-c small { display: block; font-size: calc(var(--u) * 10.6); line-height: 1.45; color: #6b6d77; }
.why7-c:nth-child(odd) { translate: 0 calc(var(--u) * 8); }

.care7 { background: #fff; }
.care7::before { right: auto; left: -10%; top: -20%; background: radial-gradient(circle, rgba(216, 27, 96, .1), transparent 65%); }
.care7 .shows5-in { grid-template-columns: 1fr calc(var(--u) * 300); }
.care7 .shows5-txt { order: 2; } .care7 .shows5-ph { order: 1; }
.care7-l { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 7); margin: 0 0 calc(var(--u) * 18); }
.care7-l span { padding: calc(var(--u) * 5) calc(var(--u) * 12); border-radius: 999px; background: #fde7ef; color: #ad1457; font-weight: 600; font-size: calc(var(--u) * 10.8); }
.care7-l span::before { content: "♡ "; }

.inc7 { display: grid; grid-template-columns: calc(var(--u) * 380) 1fr; gap: calc(var(--u) * 44); max-width: calc(var(--u) * 860); margin: calc(var(--u) * 10) auto 0; }
.inc7-stage { position: relative; }
.inc7-box { position: sticky; top: calc(50vh - var(--u) * 150); height: calc(var(--u) * 300); border-radius: calc(var(--u) * 28); background: radial-gradient(circle at 50% 45%, #fff, #fbeef3 70%); box-shadow: inset 0 0 0 1px #f6e2ea; display: grid; place-items: center; }
.tile7.big { position: absolute; width: calc(var(--u) * 150); height: calc(var(--u) * 150); border-radius: 30%; opacity: 0; transform: rotate(-120deg) scale(.4); transition: transform .8s cubic-bezier(.2, .9, .3, 1.25), opacity .45s; box-shadow: 0 30px 50px -22px var(--t), inset 0 2px 0 rgba(255, 255, 255, .4); }
.tile7.big.on { opacity: 1; transform: rotate(0) scale(1); }
.tile7.big.out { opacity: 0; transform: rotate(120deg) scale(.4); }
.inc7-n { position: absolute; bottom: calc(var(--u) * 18); font-weight: 700; font-size: calc(var(--u) * 11); letter-spacing: .12em; color: #b9a3ad; }
.inc7-l { list-style: none; margin: 0; padding: calc(var(--u) * 40) 0; }
.inc7-l li { display: flex; align-items: center; gap: calc(var(--u) * 16); padding: calc(var(--u) * 22) calc(var(--u) * 18); margin-bottom: calc(var(--u) * 10); border-radius: calc(var(--u) * 20); opacity: .38; transition: opacity .4s, background .4s, transform .4s; cursor: pointer; }
.inc7-l li .tile7 { width: calc(var(--u) * 40); height: calc(var(--u) * 40); }
.inc7-l li.on { opacity: 1; background: color-mix(in srgb, var(--t) 9%, #fff); transform: translateX(calc(var(--u) * 6)); }
.inc7-l li b { display: block; font-size: calc(var(--u) * 17); }
.inc7-l li small { display: block; font-size: calc(var(--u) * 11.5); color: #6b6d77; }
.inc7-l li em { margin-left: auto; font-style: normal; font-weight: 800; font-size: calc(var(--u) * 13); color: var(--t); opacity: .55; }

.cute8 { background: linear-gradient(180deg, #fff, #fff6f9); }
.cute8 .par8-card { border-radius: calc(var(--u) * 26); background: #fff; box-shadow: 0 0 0 1px #f6e2ea, 0 24px 46px -28px rgba(216, 27, 96, .45); position: relative; }
.cute8 .par8-card::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M7 3c0 6 10 6 10 12M17 3c0 6-10 6-10 12M7 21c0-2 1.5-3.2 3-4M17 21c0-2-1.5-3.2-3-4M8.5 6.5h7M8.5 11.5h7'/%3E%3C/svg%3E") !important; background-size: 56% !important; background-position: center !important; background-repeat: no-repeat !important; position: absolute; right: calc(var(--u) * 18); top: calc(var(--u) * -16); width: calc(var(--u) * 44); height: calc(var(--u) * 44); display: grid; place-items: center; font-size: calc(var(--u) * 22); border-radius: 30%; background: #2f9e6b; rotate: 8deg; box-shadow: 0 10px 20px -10px #2f9e6b; }
.cute8 .par8-l li::before { background: #fde7ef var(--paw-w) center / 62% no-repeat; background-color: #d81b60; border-radius: 30%; }
.cute8 .par8-t li { border-radius: calc(var(--u) * 14); }
.cute8 .par8-t em { background: #e3f4ea; color: #1f7a4d; border-radius: 999px; font-style: normal; }
@media (max-width: 860px) {
  .why7-c { width: 290px; padding: 14px 18px 14px 14px; } .why7-c b { font-size: 16px; } .why7-c small { font-size: 13px; } .tile7 { width: 46px; height: 46px; }
  .care7 .shows5-in { grid-template-columns: minmax(0, 1fr); } .care7 .shows5-txt { order: 1; } .care7 .shows5-ph { order: 2; } .care7-l span { font-size: 13px; padding: 5px 12px; }
  .inc7 { grid-template-columns: minmax(0, 1fr); gap: 0; } .inc7-stage { display: none; } .inc7-l { padding: 0; }
  .inc7-l li { opacity: 1; padding: 14px; } .inc7-l li.on { transform: none; } .inc7-l li b { font-size: 17px; } .inc7-l li small { font-size: 14px; } .inc7-l li .tile7 { width: 44px; height: 44px; }
  .cute8 .par8-card::before { width: 40px; height: 40px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .why7-run { animation: none; flex-wrap: wrap; width: auto; } .why7-c[aria-hidden] { display: none; } }

/* ── album: photos hanging on strings across a wall, a window behind ── */
.wall8 { position: relative; margin-top: calc(var(--u) * 14); padding: calc(var(--u) * 40) 0 calc(var(--u) * 30); border-radius: calc(var(--u) * 28); overflow: hidden;
  background: radial-gradient(60% 40% at 50% 10%, rgba(255, 236, 214, .9), transparent 70%), repeating-linear-gradient(90deg, rgba(0, 0, 0, .012) 0 2px, transparent 2px 7px), #f8f0e8; box-shadow: inset 0 0 0 1px #efe2d6; }
.win8 { position: absolute; left: 50%; top: calc(var(--u) * 26); translate: -50% 0; width: calc(var(--u) * 470); height: calc(var(--u) * 330); border-radius: calc(var(--u) * 200) calc(var(--u) * 200) calc(var(--u) * 8) calc(var(--u) * 8);
  background: linear-gradient(90deg, transparent calc(50% - var(--u) * 5), #fbf7f1 calc(50% - var(--u) * 5) calc(50% + var(--u) * 5), transparent 0), linear-gradient(180deg, transparent 52%, #fbf7f1 52% calc(52% + var(--u) * 10), transparent 0),
    radial-gradient(circle at 70% 30%, #fff8e6 0 8%, transparent 30%), linear-gradient(180deg, #bfe1f6 0%, #dcefee 55%, #f6e6d4 100%);
  box-shadow: 0 0 0 calc(var(--u) * 12) #fbf7f1, 0 0 0 calc(var(--u) * 13) #e8dccd, 0 30px 60px -20px rgba(120, 90, 60, .35); }
.win8::after { content: ""; position: absolute; left: calc(var(--u) * -40); right: calc(var(--u) * -40); bottom: calc(var(--u) * -26); height: calc(var(--u) * 16); border-radius: 6px; background: #fbf7f1; box-shadow: 0 10px 18px -10px rgba(120, 90, 60, .4); }
.cur8 { position: absolute; top: calc(var(--u) * -30); bottom: calc(var(--u) * -20); width: calc(var(--u) * 80); background: repeating-linear-gradient(90deg, #f6c9d6 0 calc(var(--u) * 9), #f0b5c6 calc(var(--u) * 9) calc(var(--u) * 16)); box-shadow: 0 16px 24px -14px rgba(160, 60, 90, .45); z-index: 1; animation: cur8 7s ease-in-out infinite; transform-origin: top; }
.cur8.l { left: calc(var(--u) * -70); border-radius: 0 0 calc(var(--u) * 40) 0; } .cur8.r { right: calc(var(--u) * -70); border-radius: 0 0 0 calc(var(--u) * 40); animation-delay: -3s; }
@keyframes cur8 { 50% { rotate: .8deg; } }
.wall8-rows { position: relative; z-index: 2; padding-top: calc(var(--u) * 50); }
.row8 { position: relative; height: calc(var(--u) * 268); }
.str8 { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--u) * 44); overflow: visible; }
.str8 path { fill: none; stroke: #9c7f69; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.row8::before, .row8::after { content: ""; position: absolute; top: calc(var(--u) * -3); width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%; background: #b9a08c; box-shadow: 0 2px 3px rgba(0, 0, 0, .25); z-index: 3; }
.row8::before { left: calc(var(--u) * 8); } .row8::after { right: calc(var(--u) * 8); }
.hang8 { position: absolute; left: var(--x); top: calc(var(--u) * var(--y) - var(--u) * 4); width: calc(var(--u) * 150); translate: -50% 0; background: #fff; padding: calc(var(--u) * 7) calc(var(--u) * 7) calc(var(--u) * 30); text-decoration: none;
  box-shadow: 0 16px 26px -14px rgba(60, 40, 30, .5); transform-origin: 50% 0; rotate: var(--r); transition: scale .3s, box-shadow .3s; }
.hang8 img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.hang8 span { position: absolute; left: calc(var(--u) * 9); right: calc(var(--u) * 9); bottom: calc(var(--u) * 7); font-family: var(--hand); font-size: calc(var(--u) * 14); color: #3a3036; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peg8 { position: absolute; left: 50%; top: calc(var(--u) * -14); translate: -50% 0; width: calc(var(--u) * 10); height: calc(var(--u) * 30); border-radius: calc(var(--u) * 3); background: linear-gradient(90deg, #d9b48a, #f0d2ab 50%, #c99c6c); box-shadow: 0 3px 4px rgba(0, 0, 0, .25); z-index: 2; }
.peg8::after { content: ""; position: absolute; left: 50%; top: 40%; translate: -50% 0; width: calc(var(--u) * 12); height: calc(var(--u) * 3); background: #8f8f96; border-radius: 2px; }
.row8 .hang8 { opacity: 0; translate: -50% -120vh; }
.row8.in .hang8 { opacity: 1; translate: -50% 0; animation: drop8 1.1s cubic-bezier(.25, 1.4, .45, 1) var(--dl) both, sway8 var(--sd) ease-in-out calc(var(--dl) + 1.1s) infinite; }
@keyframes drop8 { from { opacity: 1; translate: -50% -110vh; rotate: calc(var(--r) * 6); } 70% { rotate: calc(var(--r) * -2); } to { translate: -50% 0; rotate: var(--r); } }
@keyframes sway8 { 0%, 100% { rotate: var(--r); } 50% { rotate: calc(var(--r) * -1); } }
.hang8:hover { scale: 1.08; z-index: 5; animation-play-state: paused, paused; box-shadow: 0 24px 36px -16px rgba(60, 40, 30, .6); }
.wall8-more { position: relative; z-index: 2; text-align: center; margin-top: calc(var(--u) * 10); }
.wall8 .bk-hint { position: relative; z-index: 2; }
@media (max-width: 860px) {
  .wall8 { border-radius: 20px; padding: 26px 0 20px; margin: 10px -8px 0; } .win8 { width: 78%; height: 240px; top: 20px; border-radius: 160px 160px 6px 6px; } .cur8 { width: 46px; } .cur8.l { left: -40px; } .cur8.r { right: -40px; }
  .wall8-rows { padding-top: 40px; } .row8 { height: 250px; } .hang8 { width: 41vw; padding: 6px 6px 28px; } .hang8 span { font-size: 16px; } .peg8 { width: 10px; height: 26px; top: -12px; }
}
@media (prefers-reduced-motion: reduce) { .row8 .hang8, .row8.in .hang8 { opacity: 1; translate: -50% 0; animation: none; } .cur8 { animation: none; } }

/* ── v10: playful top of the home page; paw step markers; pink paw wall in the album ── */
.hero5::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: calc(var(--u) * 34); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 C150 2 300 2 450 18 S750 38 900 20 S1100 4 1200 16 V40 H0Z' fill='white'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; z-index: 1; }
.hero5 .wrap { z-index: 2; }
.hero5 .eyebrow { display: inline-block; padding: calc(var(--u) * 4) calc(var(--u) * 11); border-radius: 999px; background: #fde7ef; color: #ad1457; rotate: -2deg; }
.strip5 { position: relative; z-index: 3; background: transparent; border: 0; margin-top: calc(var(--u) * -22); }
.strip5 .wrap { display: flex; justify-content: center; flex-wrap: wrap; gap: calc(var(--u) * 12); height: auto; }
.strip5 .wrap > div { border: 0 !important; background: #fff; border-radius: 999px; padding: calc(var(--u) * 7) calc(var(--u) * 16) calc(var(--u) * 7) calc(var(--u) * 7); box-shadow: 0 12px 24px -16px rgba(120, 40, 70, .45), 0 0 0 1px #f6e6ec; gap: calc(var(--u) * 10); transition: transform .3s; }
.strip5 .wrap > div:nth-child(1) { --t: #d81b60; rotate: -2deg; } .strip5 .wrap > div:nth-child(2) { --t: #e09a2d; rotate: 1.5deg; } .strip5 .wrap > div:nth-child(3) { --t: #2f9e6b; rotate: -1deg; } .strip5 .wrap > div:nth-child(4) { --t: #3f7fa6; rotate: 2deg; }
.strip5 .wrap > div:hover { transform: translateY(-3px) rotate(0); }
.strip5 svg { width: calc(var(--u) * 30); height: calc(var(--u) * 30); padding: calc(var(--u) * 6); border-radius: 30%; background: var(--t); color: #fff; }
.stats5 { border: 0; }
.stats5 .wrap { gap: calc(var(--u) * 12); padding: calc(var(--u) * 30) 0 calc(var(--u) * 10); }
.stats5 .wrap > div { border: 0 !important; padding: calc(var(--u) * 16) calc(var(--u) * 16) calc(var(--u) * 14); border-radius: calc(var(--u) * 22); background: var(--sb); transition: transform .35s cubic-bezier(.2, .9, .3, 1.3); }
.stats5 .wrap > div:nth-child(1) { --sb: #fde7ef; rotate: -1.5deg; } .stats5 .wrap > div:nth-child(2) { --sb: #fdf0de; rotate: 1.5deg; } .stats5 .wrap > div:nth-child(3) { --sb: #e3f4ea; rotate: -1deg; } .stats5 .wrap > div:nth-child(4) { --sb: #e6f0f7; rotate: 1.2deg; } .stats5 .wrap > div:nth-child(5) { --sb: #efeafa; rotate: -1.4deg; }
.stats5 .wrap > div:hover { transform: translateY(-4px) scale(1.03); rotate: 0deg; }
.stats5 b { font-size: calc(var(--u) * 26); font-weight: 800; }
.stats5 .wrap > div:first-child b { font-size: calc(var(--u) * 16); padding-top: calc(var(--u) * 6); }

.st5 span { width: calc(var(--u) * 68); height: calc(var(--u) * 68); border-radius: 0; padding-top: calc(var(--u) * 26); box-sizing: border-box; font-size: calc(var(--u) * 15); box-shadow: none;
  background: radial-gradient(circle at 40% 62%, rgba(255, 255, 255, .35) 0 10%, transparent 30%), var(--b, #d81b60); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.5' rx='5.6' ry='4.8'/%3E%3Cellipse cx='4.9' cy='10.3' rx='2.5' ry='3.1'/%3E%3Cellipse cx='9.5' cy='5.7' rx='2.5' ry='3.2'/%3E%3Cellipse cx='14.5' cy='5.7' rx='2.5' ry='3.2'/%3E%3Cellipse cx='19.1' cy='10.3' rx='2.5' ry='3.1'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='16.5' rx='5.6' ry='4.8'/%3E%3Cellipse cx='4.9' cy='10.3' rx='2.5' ry='3.1'/%3E%3Cellipse cx='9.5' cy='5.7' rx='2.5' ry='3.2'/%3E%3Cellipse cx='14.5' cy='5.7' rx='2.5' ry='3.2'/%3E%3Cellipse cx='19.1' cy='10.3' rx='2.5' ry='3.1'/%3E%3C/svg%3E") center / contain no-repeat; animation: hop7 var(--ft, 4.4s) ease-in-out infinite; }
.st5 span::before, .st5 span::after { display: none; }
.st5 { filter: drop-shadow(0 10px 10px rgba(120, 40, 70, .12)); }
@keyframes hop7 { 0%, 100% { translate: 0 0; rotate: -8deg; } 50% { translate: 0 calc(var(--u) * -8); rotate: 8deg; } }
.trail7 { top: calc(var(--u) * 36); }

.wall8 { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-14 -14 52 52' fill='white' opacity='.6'%3E%3Cg transform='rotate(-18 12 12)'%3E%3Cellipse cx='12' cy='16.5' rx='5.6' ry='4.8'/%3E%3Cellipse cx='4.9' cy='10.3' rx='2.5' ry='3.1'/%3E%3Cellipse cx='9.5' cy='5.7' rx='2.5' ry='3.2'/%3E%3Cellipse cx='14.5' cy='5.7' rx='2.5' ry='3.2'/%3E%3Cellipse cx='19.1' cy='10.3' rx='2.5' ry='3.1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / calc(var(--u) * 84) calc(var(--u) * 84), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-14 -14 52 52' fill='white' opacity='.6'%3E%3Cg transform='rotate(-18 12 12)'%3E%3Cellipse cx='12' cy='16.5' rx='5.6' ry='4.8'/%3E%3Cellipse cx='4.9' cy='10.3' rx='2.5' ry='3.1'/%3E%3Cellipse cx='9.5' cy='5.7' rx='2.5' ry='3.2'/%3E%3Cellipse cx='14.5' cy='5.7' rx='2.5' ry='3.2'/%3E%3Cellipse cx='19.1' cy='10.3' rx='2.5' ry='3.1'/%3E%3C/g%3E%3C/svg%3E") calc(var(--u) * 42) calc(var(--u) * 42) / calc(var(--u) * 84) calc(var(--u) * 84), linear-gradient(180deg, #fbd9e5, #f9cddd); box-shadow: inset 0 0 0 1px #f3c2d3; }
.win8 { display: none; }
.wall8-rows { padding-top: calc(var(--u) * 10); }
.str8 path { stroke: #fff; stroke-width: 2; }
.row8::before, .row8::after { background: #d81b60; }
.wall8 .bk-hint { color: #9c3d63; }
@media (max-width: 860px) {
  .hero5::after { height: 22px; }
  .strip5 { margin-top: -16px; } .strip5 .wrap { display: flex; width: calc(100% - 24px); gap: 8px; } .strip5 .wrap > div { padding: 6px 12px 6px 6px; font-size: 13px; border-top: 0 !important; } .strip5 svg { width: 28px; height: 28px; }
  .stats5 .wrap { gap: 10px; } .stats5 .wrap > div { padding: 14px; } .stats5 b { font-size: 26px; }
  .st5 span { width: 52px; height: 52px; padding-top: 20px; font-size: 14px; }
  .wall8 { background-size: 70px 70px, 70px 70px, auto; background-position: 0 0, 35px 35px, 0 0; }
}
.hero5 { height: calc(var(--u) * 318); }

/* ── v11: tilted cards that fall in; dog-tag on a collar for "what you get"; playful page heroes; ticking checklist ── */
[data-live] .grid > .card:nth-child(4n+1) { rotate: -2.2deg; } [data-live] .grid > .card:nth-child(4n+2) { rotate: 1.8deg; }
[data-live] .grid > .card:nth-child(4n+3) { rotate: -1.2deg; } [data-live] .grid > .card:nth-child(4n+4) { rotate: 2.4deg; }
[data-live] .grid > .card { transition: rotate .4s cubic-bezier(.2, .9, .3, 1.3), translate .4s; }
[data-live] .grid > .card:hover { rotate: 0deg; translate: 0 -4px; }
@supports (animation-timeline: view()) {
  [data-live] .grid > .card { animation: fall11 linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  [data-live] .grid > .card:nth-child(even) { animation-range: entry 10% entry 85%; }
}
@keyframes fall11 { from { opacity: 0; translate: 0 -90px; rotate: 9deg; } }

.inc7-box { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-14 -14 52 52' fill='%23f3c9d7'%3E%3Cg transform='rotate(-18 12 12)'%3E%3Cellipse cx='12' cy='16.5' rx='5.6' ry='4.8'/%3E%3Cellipse cx='4.9' cy='10.3' rx='2.5' ry='3.1'/%3E%3Cellipse cx='9.5' cy='5.7' rx='2.5' ry='3.2'/%3E%3Cellipse cx='14.5' cy='5.7' rx='2.5' ry='3.2'/%3E%3Cellipse cx='19.1' cy='10.3' rx='2.5' ry='3.1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / calc(var(--u) * 70) calc(var(--u) * 70), radial-gradient(circle at 50% 45%, #fff, #fbeef3 70%); overflow: hidden; }
.inc7-box::before { content: ""; position: absolute; left: -5%; right: -5%; top: calc(var(--u) * 28); height: calc(var(--u) * 30); background: linear-gradient(180deg, #e8467f, #c2185b); rotate: -3deg;
  box-shadow: 0 8px 14px -8px rgba(120, 20, 60, .5); outline: 2px dashed rgba(255, 255, 255, .55); outline-offset: calc(var(--u) * -6); }
.inc7-box::after { content: ""; position: absolute; left: 50%; top: calc(var(--u) * 46); translate: -50% 0; width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; border: calc(var(--u) * 5) solid #c9ccd3; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .2); z-index: 1; }
.tile7.big { top: calc(var(--u) * 66); width: calc(var(--u) * 150); height: calc(var(--u) * 150); border-radius: 50%; transform-origin: 50% calc(var(--u) * -6); transform: rotateY(90deg); transition: transform .6s cubic-bezier(.3, .8, .3, 1.2), opacity .3s; z-index: 2;
  border: calc(var(--u) * 6) solid color-mix(in srgb, var(--t) 70%, #fff); box-shadow: 0 26px 40px -22px var(--t), inset 0 2px 0 rgba(255, 255, 255, .45); }
.tile7.big::before { content: ""; position: absolute; left: 50%; top: calc(var(--u) * 6); translate: -50% 0; width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 50%; background: #fbeef3; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.tile7.big.on { transform: rotateY(0); animation: tag11 3.2s ease-in-out .6s infinite; }
.tile7.big.out { transform: rotateY(-90deg); }
@keyframes tag11 { 0%, 100% { rotate: -7deg; } 50% { rotate: 7deg; } }
.inc7-n { bottom: calc(var(--u) * 16); }

.phero.v7 .eyebrow { padding: calc(var(--u) * 5) calc(var(--u) * 13); border-radius: 999px; background: #fde7ef; color: #ad1457; rotate: -3deg; text-shadow: none; }
.phero.v7 h1 { rotate: -1.5deg; }
.phero.v7 h1 .accent { display: inline-block; background: #d81b60; padding: 0 .22em .06em; border-radius: calc(var(--u) * 14); rotate: 3deg; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .5); margin-left: .1em; }
.phero.v7 .btn { rotate: -3deg; animation: wig11 3.4s ease-in-out 1.2s infinite; }
.phero.v7 .btn:hover { animation: none; rotate: 0deg; }
@keyframes wig11 { 0%, 80%, 100% { rotate: -3deg; } 85% { rotate: 3deg; } 90% { rotate: -5deg; } 95% { rotate: 2deg; } }

.cute8 .par8-l li::before { background: #fff; box-shadow: inset 0 0 0 2px #f3c2d3; transition: background .35s, box-shadow .35s, scale .35s cubic-bezier(.2, .9, .3, 1.6); }
.cute8 .par8-l.ok li::before { background: #d81b60 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat; box-shadow: none; scale: 1.15; }
.cute8 .par8-l li { transition: color .35s; color: #9a9ca6; } .cute8 .par8-l.ok li { color: inherit; }
.cute8 .par8-l.ok li:nth-child(1)::before, .cute8 .par8-l.ok li:nth-child(1) { transition-delay: 0.60s; }
.cute8 .par8-l.ok li:nth-child(2)::before, .cute8 .par8-l.ok li:nth-child(2) { transition-delay: 1.05s; }
.cute8 .par8-l.ok li:nth-child(3)::before, .cute8 .par8-l.ok li:nth-child(3) { transition-delay: 1.50s; }
.cute8 .par8-l.ok li:nth-child(4)::before, .cute8 .par8-l.ok li:nth-child(4) { transition-delay: 1.95s; }
.cute8 .par8-l.ok li:nth-child(5)::before, .cute8 .par8-l.ok li:nth-child(5) { transition-delay: 2.40s; }
.cute8 .par8-l.ok li:nth-child(6)::before, .cute8 .par8-l.ok li:nth-child(6) { transition-delay: 2.85s; }

@media (max-width: 860px) { .phero.v7 .btn { animation-delay: 1.5s; } .tile7.big { width: 130px; height: 130px; } }
@media (prefers-reduced-motion: reduce) { .tile7.big.on, .phero.v7 .btn { animation: none; } }
.phero.v7 + .panel [data-live] { margin-top: calc(var(--u) * 26); }
.phero.v7 + .panel { padding-top: calc(var(--u) * 34); }
@media (max-width: 860px) { [data-live] .grid { row-gap: 22px; } [data-live] .grid > .card:nth-child(odd) { rotate: -1.2deg; } [data-live] .grid > .card:nth-child(even) { rotate: 1.2deg; } }
.cute8 .par8-l li::before { box-shadow: inset 0 0 0 2px #bfe3cf; }
.cute8 .par8-l.ok li::before { background-color: #2f9e6b; }

/* ── trust band v9: pink paw card, three tilted sticker badges, check tags that pop in ── */
.trust9 { position: relative; padding: calc(var(--u) * 30) calc(var(--u) * 28) calc(var(--u) * 26); border-radius: calc(var(--u) * 30); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-14 -14 52 52' fill='white' opacity='.7'%3E%3Cg transform='rotate(-18 12 12)'%3E%3Cellipse cx='12' cy='16.5' rx='5.6' ry='4.8'/%3E%3Cellipse cx='4.9' cy='10.3' rx='2.5' ry='3.1'/%3E%3Cellipse cx='9.5' cy='5.7' rx='2.5' ry='3.2'/%3E%3Cellipse cx='14.5' cy='5.7' rx='2.5' ry='3.2'/%3E%3Cellipse cx='19.1' cy='10.3' rx='2.5' ry='3.1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / calc(var(--u) * 80) calc(var(--u) * 80), linear-gradient(160deg, #fde3ec, #fbd3e1); box-shadow: inset 0 0 0 1px #f6c9d8; }
.tb9-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 18); }
.tb9 { display: flex; align-items: center; gap: calc(var(--u) * 14); padding: calc(var(--u) * 16) calc(var(--u) * 18); background: #fff; border-radius: calc(var(--u) * 22); rotate: var(--r); box-shadow: 0 16px 30px -18px rgba(150, 30, 80, .45);
  transition: rotate .4s cubic-bezier(.2, .9, .3, 1.4), translate .4s; }
.tb9:hover { rotate: 0deg; translate: 0 -4px; }
.tb9 .tb9-ic { width: calc(var(--u) * 52); height: calc(var(--u) * 52); animation: bob9 3.6s ease-in-out infinite; }
.tb9:nth-child(2) .tb9-ic { animation-delay: -1.2s; } .tb9:nth-child(3) .tb9-ic { animation-delay: -2.4s; }
@keyframes bob9 { 50% { translate: 0 -4px; rotate: -6deg; } }
.tb9 b { display: block; font-size: calc(var(--u) * 14.5); line-height: 1.2; }
.tb9 small { display: block; font-size: calc(var(--u) * 10.6); color: #6b6d77; line-height: 1.4; margin-top: 2px; }
.tb9-tags { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: calc(var(--u) * 10) calc(var(--u) * 12); margin-top: calc(var(--u) * 24); }
.tb9-tags:empty { display: none; }
.tb9-tags span { display: inline-flex; align-items: center; gap: calc(var(--u) * 7); padding: calc(var(--u) * 6) calc(var(--u) * 13) calc(var(--u) * 6) calc(var(--u) * 6); border-radius: 999px; background: #fff; rotate: var(--r); font-size: calc(var(--u) * 11.4); font-weight: 600; color: #2b2d35;
  box-shadow: 0 8px 16px -12px rgba(150, 30, 80, .5); animation: pop9 .6s cubic-bezier(.2, .9, .3, 1.5) var(--d) both; }
.tb9-tags span i { display: grid; place-items: center; width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: 50%; background: #2f9e6b; color: #fff; }
.tb9-tags span i svg { width: 60%; height: 60%; }
.tb9-tags em { font-style: normal; }
@keyframes pop9 { from { opacity: 0; scale: .4; } }
.tb9-tags .btn { rotate: -2deg; margin-left: calc(var(--u) * 6); }
.tb9-tags .btn svg { width: 1em; height: 1em; }
@media (max-width: 860px) {
  .trust9 { padding: 20px 14px; border-radius: 22px; } .tb9-row { grid-template-columns: 1fr; gap: 12px; }
  .tb9 { padding: 14px; } .tb9 b { font-size: 16px; } .tb9 small { font-size: 13px; } .tb9 .tb9-ic { width: 48px; height: 48px; }
  .tb9-tags { gap: 8px; margin-top: 18px; } .tb9-tags span { font-size: 13px; padding: 5px 11px 5px 5px; } .tb9-tags span i { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .tb9 .tb9-ic, .tb9-tags span { animation: none; } }

/* ══ Mobile pass (≤860px): whole photos, nothing hidden, nothing sideways, readable text, real tap targets ══ */
html { overflow-x: clip; }
@media (max-width: 860px) {
  /* home hero: text first, then the photo as its own rounded card — never under the text */
  .hero5 { height: auto; padding-bottom: 300px; background: #fbf6f2; }
  .hero5::before { inset: auto 12px 52px 12px; height: 236px; border-radius: 26px; background: url("/assets/img/hero5.jpg") 64% 32% / cover no-repeat; box-shadow: 0 18px 34px -20px rgba(80, 30, 40, .5); }
  .hero5::after { display: none; }
  .strip5 { margin-top: -38px; }
  .strip5 .wrap > div { rotate: 0deg !important; }
  /* sub-page heroes: same pattern — photo card on top, dark text below */
  .phero.v7 { min-height: 0; padding: 262px 0 18px; background: #fff; color: var(--ink); -webkit-mask: none; mask: none; display: block; text-align: center; }
  .phero.v7::before { inset: 10px 12px auto 12px; height: 238px; border-radius: 26px; background: var(--hero) center 35% / cover no-repeat; box-shadow: 0 18px 34px -20px rgba(80, 30, 40, .5); }
  .phero.v7 .wrap { padding-top: 0; position: relative; }
  .phero.v7 .eyebrow { position: absolute; top: -50px; left: 50%; translate: -50% 0; white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .35); }
  .phero.v7 h1 { color: var(--ink); text-shadow: none; font-size: 34px; margin-top: 6px; rotate: -1deg; }
  .phero.v7 .lead2 { color: #4b4d57; }
  .phero.v7 + .panel { margin-top: 0; padding-top: 18px; }
  /* cards: tilted but always visible (scroll-driven drop is desktop only) */
  [data-live] .grid > .card { animation: none !important; }
  [data-live] .grid { row-gap: 22px; padding: 0 4px; }
  /* colour picker photo: not a full screen */
  .col7 { aspect-ratio: auto; height: 330px; }
  /* FAQ puppy no longer covers the e-mail */
  .faq6-card { padding-bottom: 120px; }
  .faq6-card img { width: 130px; right: 4px; bottom: -4px; }
  /* story: 3-photo fans become 2 on phones (the third covered the captions) */
  .snaps.n3 .snp.s3 { display: none; } .snaps.n3 .snp { width: 54%; } .snaps.n3 .snp img { height: 150px; } .snaps.n3 .snp.s2 { left: 44%; top: 24px; }
  /* readable small text */
  .eyebrow, .eye6, .hero5 .eyebrow { font-size: 12px !important; letter-spacing: .1em; }
  .chip, .tag, .pill, .flip-b em, .ugc em, .tl7-date, .g-ok, .cute8 .par8-t em { font-size: 12.5px !important; }
  .dogcard .meta, .letter7 .sig7 small, .stamp7 b { font-size: 13px !important; }
  .stamp7 small { font-size: 11px !important; }
  /* tap targets ≥ 40px */
  .letter7 .lnk7, .faq6-tel, .faq6-mail, .linkbtn, .more.linkbtn, .sec5-h a, .alt button, .contact-list a, .c-list a, a[href^="tel:"], a[href^="mailto:"], a[href*="instagram"] { min-height: 40px; display: inline-flex; align-items: center; }
  .alt button { padding: 0 8px; font-size: 14px !important; }
  .tl7 .btn, .tl7-next .btn { height: 44px; }
}
@media (max-width: 860px) {
  .faq6-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .faq6-card .btn { margin-bottom: 8px; }
  .dogcard > img, .dogcard .ph img, .pup .ph img, .pup .ph { aspect-ratio: 4 / 3; height: auto; max-height: 280px; object-fit: cover; }
  .sec5-h a, .alt, .alt button { font-size: 14px !important; }
  .form-card .priv, .form-card small, .form-card .muted, #contact-form span:not(.hrt) { font-size: 13px; }
}
@media (max-width: 860px) { .faq6-card .faq6-tel { margin-top: 2px; } .faq6-card .faq6-mail { margin-top: 0; } .faq6-card { padding-bottom: 104px; } }