/* UX / accessibility pass – loaded after main, shop and v3.
   1. Contrast: the two text colours used for small text now pass WCAG AA (4.5:1) on cream, blush and white.
   2. Touch targets: footer, legal and top-bar links get a 40px+ tap area on touch screens.
   3. Mobile hero: headline, intro and the booking button fit on the first screen. */

:root {
  --rose-deep: #905843; /* was #a8674f – 4.15:1 on cream */
  --muted: #76645e;     /* was #7d6a63 – 4.13:1 on blush */
}
.btn-wa { background: #178244; } /* was #1f9d55 – 3.49:1 with white text */

/* ---------- Touch targets ---------- */
@media (pointer: coarse) {
  .footer nav a, .footer nav span { display: block; padding: 8px 0; }
  .legal-links { gap: 2px 22px; }
  .legal-links a { display: inline-block; padding: 10px 0; }
  .topbar a:not(.hide-sm) { display: inline-block; padding: 6px 0; }
  .crumbs a { display: inline-block; padding: 8px 0; }
}

.topbar a, .topbar span { white-space: nowrap; }

/* ---------- Mobile hero: the promise and the button above the fold ---------- */
@media (max-width: 720px) {
  .hero-v3 .hero-grid { gap: 18px; }
  .hero-v3 .hero-visual { height: min(206px, 27vh); }
  .hero-v3 .spin-badge { width: 84px; height: 84px; top: 10px; }
  .hero-v3 .hero-title { font-size: clamp(2.5rem, 11vw, 3.3rem); }
  .hero-v3 .lead { font-size: 1.02rem; margin-top: 10px; }
  .hero-v3 .hero-cta { margin-top: 20px; }
  .hero-v3 .eyebrow { margin-bottom: 10px; }
}