/* TROETELDIER · playful pet parlour / troeteldiersalon
   Sunny yellow, teal, coral pops on warm white. Rounded display (Baloo 2) +
   soft sans (Nunito). Big radii, pootjie (paw) pattern, tilted cards.
   Default hero: stamp. */
:root {
  --c-bg: #fffaf0;
  --c-surface: #ffffff;
  --c-surface-2: #e5f5f2;
  --c-text: #1f2a44;
  --c-muted: #46516b;
  --c-primary: #0d7069;
  --c-on-primary: #ffffff;
  --c-accent: #ff7a59;
  --c-on-accent: #1f2a44;
  --c-accent-text: #b83f1f;
  --c-line: #f0dfbd;
  --c-hero-bg: #ffd65c;
  --c-hero-text: #1f2a44;
  --c-footer-bg: #1f2a44;
  --c-footer-text: #fffaf0;
  --c-ph-a: #ffe9a8; --c-ph-b: #ffdc7a;
  --c-price: #0d7069;

  --f-head: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --f-body: "Nunito", system-ui, sans-serif;
  --fw-head: 800;
  --fw-body-bold: 800;
  --lh-head: 1.05;
  --tt-eyebrow: none;
  --ls-eyebrow: .02em;
  --fs-eyebrow: 1rem;
  --radius-s: 10px; --radius-m: 24px; --radius-l: 36px; --radius-btn: 999px;
  --radius-ph: 32px;
  --shadow: 0 6px 0 #f0dfbd;
  --motif-color: #ff7a59;

  --paws: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cg fill='%23f2b705' fill-opacity='.35' transform='rotate(-20 45 45)'%3E%3Cellipse cx='45' cy='52' rx='11' ry='9'/%3E%3Ccircle cx='33' cy='38' r='4.5'/%3E%3Ccircle cx='41' cy='33' r='4.5'/%3E%3Ccircle cx='50' cy='33' r='4.5'/%3E%3Ccircle cx='58' cy='38' r='4.5'/%3E%3C/g%3E%3C/svg%3E");
  --texture: none;
  --hero-texture: var(--paws);
  --ph-pattern: var(--paws), linear-gradient(135deg, #bfe9e3, #8fd6cc);
}
.brand__mark { background: var(--c-accent); color: var(--c-on-accent); border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; }
.hero h1 { font-size: clamp(2.4rem, 1.4rem + 4.5vw, 5rem); }
/* (round 2) hero button colour now comes from --c-cta (= primary teal), like every other main action */
.btn--primary { box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.card { border: 3px solid var(--c-line); }
.cards .card:nth-child(odd) { transform: rotate(-1.2deg); }
.cards .card:nth-child(even) { transform: rotate(1deg); }
.cards .card:hover { transform: rotate(0) scale(1.02); transition: transform .2s; }
.card .ph--card { border-radius: 0; }
.hours__table { background: var(--c-surface); border-radius: var(--radius-m); padding: var(--space-4) var(--space-5); border-collapse: separate; border: 3px solid var(--c-line); }
.hours__table tr:last-child th, .hours__table tr:last-child td { border-bottom: 0; }
.quote blockquote { font-size: var(--step-3); }
@media (prefers-reduced-motion: reduce) { .cards .card { transform: none !important; } }