/* V2 "girly" skin: loaded after styles.css. Hot pink on blush, lilac as the second tint, rounded type, scallops. */
:root {
  --paper: #fff4f8;
  --paper-2: #ffe7f0;
  --paper-3: #ffd6e5;
  --ink: #4a2238;
  --ink-2: #7a4a63;
  --ink-3: #a57d93;
  --brand: #ff6fa8;
  --brand-ink: #cf2a6f;
  --brand-tint: #ffe0ec;
  --on-brand: #3b1229;
  --lilac: #ece3ff;
  --lilac-2: #d9c9ff;
  --lilac-ink: #7a5fb8;
  --line: rgba(207, 42, 111, .16);
  --field-border: rgba(207, 42, 111, .3);
  --white: #ffffff;
  --book-bg: #4a2238;
  --book-fg: #fff4f8;
  --book-fg-2: rgba(255, 244, 248, .8);
  --book-accent: #ffb3d1;
  --overlay: rgba(74, 34, 56, .7);
  --shadow: 0 18px 50px -18px rgba(207, 42, 111, .35);
  --glow: 0 10px 30px -10px rgba(255, 111, 168, .7);
  --font-display: "Quicksand", "Nunito", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script: "Dancing Script", "Snell Roundhand", cursive;
  --r-sm: 14px;
  --r: 24px;
  --r-lg: 34px;
}
:root[data-theme="dark"] {
  --paper: #24101c;
  --paper-2: #2f1526;
  --paper-3: #3c1d31;
  --ink: #ffe9f2;
  --ink-2: #e3bfd2;
  --ink-3: #b48aa1;
  --brand: #ff8ec0;
  --brand-ink: #ffa9cd;
  --brand-tint: #4a2038;
  --on-brand: #2a0f1e;
  --lilac: #3a2c58;
  --lilac-2: #4c3a72;
  --lilac-ink: #cbb7ff;
  --line: rgba(255, 142, 192, .18);
  --field-border: rgba(255, 142, 192, .35);
  --white: #331a2a;
  --book-bg: #170810;
  --book-fg: #ffe9f2;
  --book-fg-2: rgba(255, 233, 242, .8);
  --book-accent: #ffb3d1;
  --overlay: rgba(23, 8, 16, .72);
  --shadow: 0 18px 50px -18px rgba(0, 0, 0, .65);
  --glow: 0 10px 30px -10px rgba(255, 142, 192, .45);
}


/* Soft blobs behind the page */
body { background: transparent; }
body::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image:
    radial-gradient(60vw 40vw at 90% -5%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%),
    radial-gradient(50vw 35vw at -10% 20%, color-mix(in srgb, var(--lilac-2) 55%, transparent), transparent 70%);
  background-repeat: no-repeat; }

/* Type */
h1, h2, h3 { font-weight: 700; letter-spacing: -.01em; }
h1 { letter-spacing: -.02em; }

.hero__script { font-family: var(--font-script); font-size: clamp(1.6rem, 2.6vw, 2.2rem); color: var(--brand-ink); margin: 0 0 6px; line-height: 1; }
.hero__polaroid figcaption, .step__n { font-family: var(--font-script); }
.step__n { font-size: 1.25rem; color: var(--brand-ink); margin-bottom: 2px; }
.hero__polaroid figcaption { font-size: 1.05rem; color: var(--ink-2); }

/* Nav */
.nav { background: color-mix(in srgb, var(--paper) 80%, transparent); border-bottom-color: var(--line); }
.nav__links a.is-active, .nav__links a:hover { border-color: transparent; color: var(--brand-ink); }
.nav__links a { border-radius: 999px; padding: 6px 12px; }
.nav__links a.is-active { background: var(--brand-tint); }

/* Buttons */
.btn--primary { box-shadow: var(--glow); }
.btn--primary:hover { background: var(--brand); filter: brightness(1.06); transform: translateY(-2px); }
.btn--ghost { border-color: var(--brand); color: var(--brand-ink); background: var(--white); }
.btn--ghost:hover { background: var(--brand-tint); border-color: var(--brand-ink); }
.link { color: var(--brand-ink); }

/* Hero */
.hero__offer { background: var(--lilac); color: var(--ink-2); }
.hero__offer strong { color: var(--lilac-ink); }
.hero__video { border-radius: var(--r-lg); outline: 6px solid var(--white); outline-offset: -6px; }
.hero__polaroid { border-radius: 12px; }
.hero__polaroid::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; transform: translateX(-50%) rotate(-4deg);
  background: repeating-linear-gradient(135deg, rgba(255,111,168,.55) 0 8px, rgba(255,255,255,.55) 8px 16px);
  border-radius: 3px; box-shadow: 0 2px 6px rgba(0,0,0,.08); z-index: 2;
}

/* Trust strip */
.strip ul { border: 0; background: var(--white); border-radius: var(--r-lg); padding: 24px 28px; box-shadow: var(--shadow); }
.strip__k { color: var(--brand-ink); }

/* Scalloped section edges */
.flow, .treats { position: relative; }
.flow::before, .treats::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 15px; pointer-events: none;
  background: radial-gradient(circle at 14px 15px, var(--paper-2) 13px, transparent 14px) 0 0 / 28px 15px repeat-x;
}
.flow::after, .treats::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 15px; pointer-events: none; transform: scaleY(-1);
  background: radial-gradient(circle at 14px 15px, var(--paper-2) 13px, transparent 14px) 0 0 / 28px 15px repeat-x;
}
.flow, .treats { background: var(--paper-2); }

/* Services */
.svc { border: 0; box-shadow: var(--shadow); }
.svc--menu:nth-of-type(2) { background: var(--lilac); }
.svc--puppy { background: var(--brand-tint); }
.svc--extras { background: var(--white); }
.price dd { color: var(--brand-ink); }
.price div, .extras li, .hours div { border-color: var(--line); }
.svc--photo { border-radius: var(--r-lg); }

/* Steps */
.step__media { border-radius: var(--r-lg); outline: 5px solid var(--white); outline-offset: -5px; }

/* Compare */
.compare { border-radius: var(--r-lg); outline: 6px solid var(--white); outline-offset: -6px; }
.compare__tag { background: var(--brand); color: var(--on-brand); }

/* Reviews */
.reviews__list blockquote { border: 0; background: var(--lilac); position: relative; padding-top: 34px; box-shadow: none; }
.reviews__list blockquote::before { content: "\201C"; position: absolute; top: 4px; left: 18px; font-family: var(--font-script); font-size: 3rem; line-height: 1; color: var(--brand); }
.reviews__list li:nth-child(even) blockquote { background: var(--brand-tint); }
.reviews__list p { font-family: var(--font-body); font-weight: 600; }

/* Treats */
.treats__media img:first-child { border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%; }
.treats__media-b { border-color: var(--paper-2); border-radius: 22px; }

/* Social */
.social__links a { border: 2px solid var(--brand-tint); }
.social__links a:hover { border-color: var(--brand); background: var(--brand-tint); }
.social__grid img { border-radius: 20px; outline: 4px solid var(--white); outline-offset: -4px; }

/* Visit */
.visit__map { border-radius: var(--r-lg); outline: 6px solid var(--white); outline-offset: -6px; }
.visit address { color: var(--brand-ink); }

/* Book */
.book { position: relative; }
.book::before {
  content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 15px; pointer-events: none;
  background: radial-gradient(circle at 14px 15px, var(--book-bg) 13px, transparent 14px) 0 0 / 28px 15px repeat-x;
}
.book__offer { background: rgba(255, 179, 209, .16); }
.form { border-radius: var(--r-lg); box-shadow: var(--shadow); }
.field input, .field select, .field textarea { border-radius: 14px; background: var(--paper); }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: 0 0 0 4px var(--brand-tint); }

/* Footer */
.footer { border-top: 0; }
.footer__h { color: var(--brand-ink); }


/* Toggle + sticky */
.theme-toggle { border-color: var(--brand-tint); background: var(--white); }
.sticky-cta { box-shadow: var(--glow); }

/* Fit fixes */
h1 { font-size: clamp(2.4rem, 4.9vw, 3.7rem); }
.hero__copy { max-width: 620px; }


/* Bow motif: drawn SVG, never the emoji */
.bow-ic { display: inline-block; width: .9em; height: .62em; vertical-align: -.02em; background: var(--brand); -webkit-mask: url(assets/img/bow.svg) center / contain no-repeat; mask: url(assets/img/bow.svg) center / contain no-repeat; }
html { background: var(--paper); }
body { position: relative; isolation: isolate; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22220%22%20viewBox%3D%220%200%20220%20220%22%3E%3Cg%20opacity%3D%220.16%22%3E%3Cg%20transform%3D%22translate%2820%2020%29%20rotate%28-12%2032%2022%29%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ff6fa8%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M30%2020C24%208%2012%204%207%2010c-5%206%200%2016%208%2017%206%201%2012-3%2015-7z%22/%3E%3Cpath%20d%3D%22M34%2020c6-12%2018-16%2023-10%205%206%200%2016-8%2017-6%201-12-3-15-7z%22/%3E%3Cpath%20d%3D%22M28%2026L20%2040M36%2026l8%2014%22/%3E%3C/g%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2221%22%20r%3D%226%22%20fill%3D%22%23ff6fa8%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28130%20120%29%20rotate%2815%2032%2022%29%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ff6fa8%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M30%2020C24%208%2012%204%207%2010c-5%206%200%2016%208%2017%206%201%2012-3%2015-7z%22/%3E%3Cpath%20d%3D%22M34%2020c6-12%2018-16%2023-10%205%206%200%2016-8%2017-6%201-12-3-15-7z%22/%3E%3Cpath%20d%3D%22M28%2026L20%2040M36%2026l8%2014%22/%3E%3C/g%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2221%22%20r%3D%226%22%20fill%3D%22%23ff6fa8%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-size: 220px 220px; }
:root[data-theme="dark"] body::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22220%22%20height%3D%22220%22%20viewBox%3D%220%200%20220%20220%22%3E%3Cg%20opacity%3D%220.12%22%3E%3Cg%20transform%3D%22translate%2820%2020%29%20rotate%28-12%2032%2022%29%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ff8ec0%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M30%2020C24%208%2012%204%207%2010c-5%206%200%2016%208%2017%206%201%2012-3%2015-7z%22/%3E%3Cpath%20d%3D%22M34%2020c6-12%2018-16%2023-10%205%206%200%2016-8%2017-6%201-12-3-15-7z%22/%3E%3Cpath%20d%3D%22M28%2026L20%2040M36%2026l8%2014%22/%3E%3C/g%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2221%22%20r%3D%226%22%20fill%3D%22%23ff8ec0%22/%3E%3C/g%3E%3Cg%20transform%3D%22translate%28130%20120%29%20rotate%2815%2032%2022%29%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ff8ec0%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M30%2020C24%208%2012%204%207%2010c-5%206%200%2016%208%2017%206%201%2012-3%2015-7z%22/%3E%3Cpath%20d%3D%22M34%2020c6-12%2018-16%2023-10%205%206%200%2016-8%2017-6%201-12-3-15-7z%22/%3E%3Cpath%20d%3D%22M28%2026L20%2040M36%2026l8%2014%22/%3E%3C/g%3E%3Ccircle%20cx%3D%2232%22%20cy%3D%2221%22%20r%3D%226%22%20fill%3D%22%23ff8ec0%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }


/* Three.js bow layer (bows.js). When it runs, the static tile steps aside. */
.bows-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; display: block; }
html.has-bows body::before { display: none; }


/* Shop product lists */
.shop__list:nth-child(2) { background: var(--lilac); }
.shop__list:nth-child(2) li { background: var(--white); }