/* ============================================================
   ARNOLD STUDIO - DOG GROOMING SALON THEME (DELUXE)
   Same candy family as the Premium tier: Lilita One display,
   Nunito body, Caveat hand-notes, sticker cards, soap-scallop
   waves, bubblegum / pool / sunshine on warm cream.
   Recomposed for the mid tier: split hero with a bleeding photo
   panel, photo-top service cards, one dark before/after band,
   a lightbox gallery, and no map. Calmer, still playful.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  --cream:      #FDF4F6;   /* blush page base */
  --paper:      #FFFFFF;   /* cards */
  --ink:        #3B1E4A;   /* plum ink: headings & body (13.2:1 on cream) */
  --ink-soft:   #6E5A7C;   /* muted text (5.7:1 on cream) */
  --pink:       #DA1B67;   /* brand pink: fills, icons, tags (4.9:1 w/ white) */
  --pink-deep:  #B01555;   /* links & eyebrows (6.3:1 on cream) */
  --pink-tint:  #FBE7F0;   /* gallery band */
  --pool:       #C9A9DE;   /* brand lilac band + bubbles (7.0:1 w/ ink) */
  --pool-tint:  #F1E7F9;   /* soft info fills */
  --sun:        #E9B58C;   /* rose gold CTA (plum text = 7.8:1) */
  --sun-hover:  #DB9F72;   /* CTA hover (6.2:1) */
  --sun-tint:   #FBEDE3;   /* FAQ band */
  --berry:      #2E1638;   /* dark plum bands & footer */
  --berry-soft: #4A2C56;   /* dividers on berry */
  --line:       #F2DDE4;   /* decorative hairlines on cream */
  --line-input: #8A7294;   /* input borders (4.3:1 on white) */

  --ff-display: "Fredoka", "Arial Rounded MT Bold", sans-serif;
  --ff-body: "Nunito", "Avenir Next", "Segoe UI", sans-serif;
  --ff-note: "Parisienne", "Snell Roundhand", cursive;

  --r-card: 24px;
  --r-input: 12px;
  --r-chip: 10px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sticker: 6px 6px 0 rgba(51, 43, 99, 0.13);
  --sticker-sm: 3px 3px 0 rgba(51, 43, 99, 0.13);

  --wrap: 74rem;
  --head-h: 4.5rem;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; line-height: 1.12; font-weight: 400; }
p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
address { font-style: normal; }

a { color: var(--pink-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

button, input, select, textarea { font: inherit; color: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

:focus { outline: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }

[id] { scroll-margin-top: 1.5rem; }   /* header is not sticky in Deluxe */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--cream);
  border-radius: 0 0 var(--r-input) var(--r-input);
  text-decoration: none;
  font-weight: 700;
}
.skip-link:focus-visible { top: 0; outline-color: var(--cream); outline-offset: -6px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Type helpers ---------- */
.eyebrow {
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pink-deep);
  margin-bottom: 1rem;
}

.section-title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(1.85rem, 3.3vw, 2.6rem);
  letter-spacing: 0.005em;
  text-wrap: balance;
}

.section-sub {
  max-width: 34rem;
  margin-top: 1rem;
  color: var(--ink-soft);
}

.section-head { max-width: 44rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.section-head-split {
  max-width: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
/* Both halves flex so a long headline cannot push the sub onto its own row */
.section-head-split > :first-child { flex: 1 1 24rem; min-width: 0; }
.section-head-split .section-sub { flex: 1 1 20rem; margin-top: 0.75rem; }

/* Caveat hand-note, used sparingly to keep the salon voice human */
.note {
  font-family: var(--ff-note);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  color: var(--pink-deep);
  line-height: 1.3;
}

/* ---------- Soap-wave section dividers ---------- */
.wave { display: block; line-height: 0; }
.wave svg { display: block; width: 100%; height: clamp(22px, 3vw, 40px); }
.wave-pink { color: var(--pink-tint); }
.wave-pool { color: var(--pool); }
.wave-sun  { color: var(--sun-tint); }
.wave-berry { color: var(--berry); }
.wave.flip svg { transform: scaleY(-1); }
/* When a wave joins two coloured bands directly, it must carry the OUTGOING
   band's colour as its background, or a page-cream sliver shows through. */
.wave.on-pink { background: var(--pink-tint); }
.wave.on-pool { background: var(--pool); }
.wave.on-berry { background: var(--berry); }

/* ---------- Buttons (house orb pill, sticker trim) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-family: var(--ff-body);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 0.45rem 0.45rem 0.45rem 1.4rem;
  cursor: pointer;
  white-space: nowrap;
  color: var(--ink);
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease), transform 0.45s var(--ease);
}
.btn:active { transform: scale(0.98); }

.btn .btn-orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  flex: none;
  transition: transform 0.45s var(--ease);
}
.btn:hover .btn-orb { transform: translateX(3px); }
.btn .btn-orb svg { width: 15px; height: 15px; }

.btn-primary { background: var(--sun); box-shadow: var(--sticker-sm); }
.btn-primary:hover { background: var(--sun-hover); color: var(--ink); }
.btn-primary .btn-orb { background: var(--ink); color: var(--sun); }

.btn-ghost { background: var(--paper); }
.btn-ghost:hover { background: var(--pink-tint); color: var(--ink); }
.btn-ghost .btn-orb { background: var(--pink-tint); color: var(--ink); }

.btn > svg { width: 15px; height: 15px; flex: none; }

/* On the dark band the ghost button flips to a cream outline */
.on-berry-btn {
  background: transparent;
  border-color: var(--cream);
  color: var(--cream);
}
.on-berry-btn:hover { background: var(--cream); color: var(--ink); }
.on-berry-btn .btn-orb { background: var(--cream); color: var(--ink); }
.on-berry-btn:hover .btn-orb { background: var(--sun); }

/* ---------- Utility bar ---------- */
.utility {
  background: var(--berry);
  color: #D5CEF0;
  font-size: 0.875rem;
}
.utility-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
}
.utility svg { width: 15px; height: 15px; flex: none; }
.utility-note { display: inline-flex; align-items: center; gap: 0.5rem; }
.utility-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--sun);
  font-weight: 800;
  text-decoration: none;
  padding: 0.35rem 0;
  font-variant-numeric: tabular-nums;
}
.utility-tel:hover { color: #fff; }
.utility-tel:focus-visible { outline-color: #fff; }

/* ---------- Header ---------- */
/* Deluxe header scrolls away with the page. A sticky/always-available header
   is a Premium feature; see the tier ladder notes. */
.site-head {
  position: relative;
  z-index: 100;
  background: var(--cream);
  border-bottom: 2px solid var(--line);
}
.site-head .wrap { max-width: 82rem; }

.head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--head-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
/* Text lockup: the client's logo is a script wordmark, and her ornate crest is
   far too detailed to read at header size. The crest is used large in the
   footer and on the About page instead. */
.brand-word {
  display: block;
  font-family: var(--ff-note);
  font-size: clamp(1.95rem, 3.4vw, 2.5rem);
  line-height: 0.95;
  color: var(--pink-deep);
  white-space: nowrap;
}
.brand-word small {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--ff-body);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.brand:hover .brand-word { color: var(--pink); }

/* Inline nav on wide screens, slide-in drawer everywhere */
.head-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2vw, 2rem);
}
.head-nav a {
  position: relative;
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.9375rem;
  padding: 0.4rem 0.1rem;
}
.head-nav a:hover { color: var(--pink-deep); }
.head-nav a[aria-current] { color: var(--pink-deep); }
.head-nav a[aria-current]::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--pink);
}
.head-nav a:focus-visible { outline-offset: 4px; }
@media (max-width: 1099px) { .head-nav { display: none; } }

.head-cta { display: flex; align-items: center; gap: 1.1rem; }
.head-tel {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.9375rem;
  padding: 0.5rem 0.25rem;
  font-variant-numeric: tabular-nums;
}
.head-tel:hover { color: var(--pink-deep); }
.head-tel svg { width: 15px; height: 15px; }
.head-cta .btn { font-size: 0.9375rem; padding: 0.35rem 0.35rem 0.35rem 1.2rem; }
.head-cta .btn .btn-orb { width: 2rem; height: 2rem; }

/* The hamburger is a small-screen fallback on this tier. The always-on
   menu at desktop width is reserved for the Premium theme. */
.nav-toggle {
  display: block;
  position: relative;
  width: 44px;
  height: 44px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  cursor: pointer;
  flex: none;
}
.nav-toggle-bar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.35s var(--ease);
}
.nav-toggle-bar:nth-child(1) { transform: translate(-50%, calc(-50% - 3px)); }
.nav-toggle-bar:nth-child(2) { transform: translate(-50%, calc(-50% + 3px)); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }
@media (min-width: 1100px) { .nav-toggle { display: none; } }

/* Off-canvas drawer. Lives OUTSIDE the header: a backdrop-filter on the
   sticky header would become the containing block for position:fixed kids. */
.site-nav { position: static; }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 115;
  background: rgba(42, 35, 80, 0.55);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0s 0.4s;
}
.nav-scrim.open { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease); }

.nav-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 121;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  width: min(23rem, 90vw);
  padding: 5.75rem 1.5rem 2rem;
  background: var(--berry);
  border-left: 2px solid var(--ink);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(105%);
  visibility: hidden;
  transition: transform 0.45s var(--ease), visibility 0s 0.45s;
}
.nav-menu.open { transform: translateX(0); visibility: visible; transition: transform 0.45s var(--ease); }

.nav-menu li:not([class]) a {
  display: block;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--cream);
  text-decoration: none;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.nav-menu li:not([class]) a:hover { background: var(--berry-soft); color: var(--sun); }
.nav-menu li:not([class]) a[aria-current] { color: var(--sun); }
.nav-menu li:not([class]) a:focus-visible { outline-color: #fff; }

.nav-menu-close { display: contents; }
.menu-close {
  display: grid;
  place-items: center;
  position: absolute;
  top: 1.1rem; right: 1.25rem;
  width: 44px; height: 44px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.3s var(--ease);
}
.menu-close:hover { background: var(--sun); }
.menu-close:focus-visible { outline-color: #fff; }
.menu-close svg { width: 16px; height: 16px; }

.nav-menu-book { margin-top: auto; padding-top: 1.5rem; }
.nav-menu-book .btn { width: 100%; justify-content: space-between; font-size: 1rem; }

.nav-menu-tel { margin-top: 0.85rem; border-top: 2px dashed var(--berry-soft); padding-top: 1.1rem; }
.nav-menu-tel a {
  display: block;
  font-family: var(--ff-body);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--sun);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  padding: 0.35rem 1rem;
}
.nav-menu-tel a:hover { color: var(--cream); }
.nav-menu-tel a:focus-visible { outline-color: #fff; }

/* ---------- Stickers, bubbles, chips (shared whimsy) ---------- */
.sticker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--sun);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--sticker-sm);
}
.sticker svg { width: 14px; height: 14px; }

.bubbles { position: absolute; inset: 0; pointer-events: none; }
.bub {
  position: absolute;
  border: 2px solid var(--pool);
  border-radius: 50%;
  opacity: 0.5;
  animation: bub-float 11s var(--ease) infinite alternate;
}
.bub-fill { background: rgba(69, 192, 229, 0.18); border-color: transparent; }
.bub-pink { border-color: var(--pink); }
.bub-pink.bub-fill { background: rgba(232, 77, 154, 0.14); border-color: transparent; }
.bub-sun.bub-fill { background: rgba(255, 197, 61, 0.22); border-color: transparent; }
.bub-1 { width: 54px; height: 54px; top: 14%; left: 3%; }
.bub-2 { width: 22px; height: 22px; top: 24%; left: 6%; animation-duration: 9s; }
.bub-3 { width: 34px; height: 34px; top: 8%; left: 34%; animation-duration: 13s; }
.bub-4 { width: 16px; height: 16px; bottom: 22%; left: 26%; animation-duration: 8s; }
.bub-5 { width: 68px; height: 68px; bottom: 8%; right: 4%; animation-duration: 14s; }

@keyframes bub-float {
  from { transform: translateY(0); }
  to   { transform: translateY(-16px); }
}

.ph-chip {
  position: absolute;
  top: 0.9rem;
  z-index: 2;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 2px solid var(--ink);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ph-chip-left { left: 0.9rem; background: var(--berry); color: var(--cream); transform: rotate(-4deg); }
.ph-chip-right { right: 0.9rem; background: var(--sun); color: var(--ink); transform: rotate(4deg); }

/* ============================================================
   HERO
   Copy column on cream, photo panel bleeding off the right edge.
   ============================================================ */
.hero { position: relative; overflow: clip; }
.hero .wrap { position: relative; z-index: 2; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-block: clamp(3rem, 7vw, 5.5rem) clamp(3.5rem, 8vw, 6rem);
}
.hero-copy { max-width: 36rem; }

.hero-title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  letter-spacing: 0.005em;
  text-wrap: balance;
}
.hero-title .tilt { color: var(--pink-deep); }

.hero-sub {
  max-width: 30rem;
  margin-top: 1.5rem;
  font-size: 1.1rem;
  color: var(--ink-soft);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2rem;
}

.hero-trust {
  display: grid;
  gap: 0.6rem;
  margin-top: 2.2rem;
  padding-top: 1.6rem;
  border-top: 2px dashed var(--line);
}
.hero-trust li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9375rem;
  font-weight: 800;
}
.hero-trust svg { width: 16px; height: 16px; color: var(--pink); flex: none; }

/* Photo panel: rounded on three sides, runs off the right of the viewport */
.hero-media { position: relative; }
.hero-frame {
  position: relative;
  border: 2px solid var(--ink);
  border-right: 0;
  border-radius: var(--r-card) 0 0 var(--r-card);
  overflow: hidden;
  background: var(--paper);
  /* stretch past the container to the viewport edge */
  margin-right: calc((100vw - min(100vw, var(--wrap))) / -2 - clamp(1.25rem, 4vw, 2.5rem));
}
.hero-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  max-height: min(78vh, 640px);
  object-fit: cover;
  object-position: 50% 72%;
}

/* ============================================================
   SERVICES  (photo-top sticker cards + add-on pills)
   ============================================================ */
/* Lighter top pad: the hero already ends on generous whitespace */
.services { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4.5rem, 9vw, 7.5rem); }

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.6vw, 2rem);
}
.svc {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--sticker);
  overflow: hidden;
}
.svc-media { position: relative; border-bottom: 2px solid var(--ink); }
.svc-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.svc:nth-child(1) .svc-media img { object-position: 62% 50%; }
.svc:nth-child(2) .svc-media img { object-position: 47% 38%; }
.svc:nth-child(3) .svc-media img { object-position: 45% 32%; }

.svc-tag {
  position: absolute;
  left: 0.9rem;
  bottom: 0.9rem;
  padding: 0.3rem 0.8rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--paper);
  color: var(--ink);
}
/* Tag colours cycle in threes so a longer grid keeps the rhythm */
.svc:nth-child(3n+1) .svc-tag { background: var(--pool); }
.svc:nth-child(3n+2) .svc-tag { background: var(--pink); color: #fff; }
.svc:nth-child(3n) .svc-tag { background: var(--sun); }

.svc-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem clamp(1.25rem, 2vw, 1.75rem) 1.5rem;
}
.svc-name { font-family: var(--ff-display);
  font-weight: 600; font-size: 1.35rem; }
.svc-desc { margin-top: 0.55rem; font-size: 0.96rem; color: var(--ink-soft); }
.svc-points { margin-top: 1.1rem; display: grid; gap: 0.5rem; flex: 1; }
.svc-points li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.9375rem;
  font-weight: 700;
}
.svc-points svg { width: 15px; height: 15px; color: var(--pink); flex: none; margin-top: 5px; }

.svc-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.35rem;
  padding-top: 1rem;
  border-top: 2px dashed var(--line);
}
.svc-price {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--pink-deep);
  font-variant-numeric: tabular-nums;
}
.svc-from {
  font-family: var(--ff-body);
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: 0.3rem;
}
.svc-link { font-weight: 800; font-size: 0.9375rem; white-space: nowrap; }

/* Add-ons: one honest pill row instead of four more cards */
.addons {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--sun-tint);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--sticker);
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.addons-h { font-family: var(--ff-display);
  font-weight: 600; font-size: 1.35rem; }
.addons-sub { margin-top: 0.5rem; font-size: 0.9375rem; color: var(--ink-soft); }
.addon-pills { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.addon-pills li {
  padding: 0.45rem 1rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 800;
  box-shadow: var(--sticker-sm);
}
.addon-pills li:nth-child(3n+1) { border-color: var(--pink); }
.addon-pills li:nth-child(3n+2) { border-color: var(--pool); }
.addons-note { margin-top: 1rem; }

/* ============================================================
   BEFORE & AFTER  (berry band, the tier's one dark moment)
   ============================================================ */
.reveal-band {
  position: relative;
  background: var(--berry);
  color: #D5CEF0;
  padding-block: clamp(4.5rem, 9vw, 7rem);
  overflow: clip;
}
.reveal-band .eyebrow { color: var(--sun); }
.reveal-band .section-title { color: var(--cream); }
.reveal-band .bub { border-color: rgba(255, 255, 255, 0.25); }

.ba-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.ba-frame {
  position: relative;
  padding: 0.6rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--sticker);
  transform: rotate(-1.4deg);
}
.ba-photo {
  width: 100%;
  aspect-ratio: 1089 / 1400;
  max-height: 620px;
  object-fit: cover;
  border-radius: calc(var(--r-card) - 8px);
}
/* Sits inside the white frame, so it takes the on-white pink, not sun */
.ba-cap {
  margin-top: 1rem;
  text-align: center;
  font-family: var(--ff-note);
  font-weight: 600;
  font-size: 1.45rem;
  color: var(--pink-deep);
}
.ba-lead { margin-top: 1.2rem; }
.ba-copy p + p { margin-top: 1rem; }
.ba-honest {
  margin-top: 1.75rem;
  padding: 1.1rem 1.25rem;
  background: rgba(255, 255, 255, 0.06);
  border: 2px solid var(--berry-soft);
  border-left-width: 6px;
  border-left-color: var(--pink);
  border-radius: var(--r-input);
}
.ba-honest b { color: var(--cream); }
.ba-copy .btn { margin-top: 1.85rem; }

/* ============================================================
   HOW IT WORKS  (three steps, dashed rail)
   ============================================================ */
.process { padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.steps {
  --steps-gap: clamp(1.5rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--steps-gap);
}
.step { position: relative; }
/* dashed run from each numeral to the next one, none after the last */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.55rem;
  left: 4rem;
  right: calc(-1 * var(--steps-gap));
  border-top: 3px dashed var(--line);
}
.step-num {
  display: grid;
  place-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 999px;
  border: 2px solid var(--ink);
  box-shadow: var(--sticker-sm);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1.5rem;
  background: var(--paper);
}
.step:nth-child(1) .step-num { background: var(--pink); color: #fff; transform: rotate(-7deg); }
.step:nth-child(2) .step-num { background: var(--pool); transform: rotate(5deg); }
.step:nth-child(3) .step-num { background: var(--sun); transform: rotate(-4deg); }
.step-name { font-family: var(--ff-display);
  font-weight: 600; font-size: 1.3rem; margin-top: 1.25rem; }
.step-desc { margin-top: 0.55rem; color: var(--ink-soft); }

/* ============================================================
   GALLERY  (pink band, click to enlarge)
   ============================================================ */
.work { background: var(--pink-tint); padding-block: clamp(4.5rem, 9vw, 7.5rem); }

.gal {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.4rem);
}
/* Alternate tiles drop half a step so the row reads like a pinned-up
   scrapbook rather than a flat strip of squares. */
.gal-item { margin: 0; }
.gal-item:nth-child(even) { margin-top: clamp(1rem, 3.5vw, 2.75rem); }
.gal-item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--sticker-sm);
  cursor: zoom-in;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.gal-item:nth-child(odd) img { transform: rotate(-0.9deg); }
.gal-item:nth-child(even) img { transform: rotate(0.9deg); }
.gal-item img:hover { transform: rotate(0deg) scale(1.015); box-shadow: var(--sticker); }
/* Photos only on this tier: no pet-name captions (those stay Premium's) */
.gal-item img:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 3px; }
.gal-item:nth-child(1) img { object-position: 55% 40%; }
.gal-item:nth-child(2) img { object-position: 60% 40%; }
.gal-item:nth-child(3) img { object-position: 25% 50%; }
.gal-item:nth-child(4) img { object-position: 50% 35%; }
.gal-foot {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem 2rem;
  flex-wrap: wrap;
  text-align: center;
}
.gal-foot p { font-weight: 700; color: var(--ink-soft); }

/* ============================================================
   OUR SALON  (folded about + owner portrait)
   ============================================================ */
.about { padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.about-grid {
  display: grid;
  /* photo column leads: Pamela's portrait is the trust anchor on both pages */
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.about-media { position: relative; padding-bottom: 3.5rem; }
.about-frame {
  padding: 0.6rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--sticker);
}
.about-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 26%;
  border-radius: calc(var(--r-card) - 8px);
}
.about-copy p + p { margin-top: 1rem; }
.about-copy .section-title { margin-bottom: 1.25rem; }
.about-points { margin-top: 1.5rem; display: grid; gap: 0.65rem; }
.about-points li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-weight: 800;
}
.about-points svg { width: 16px; height: 16px; color: var(--pink); flex: none; align-self: center; }
.about-cap {
  margin-top: 0.85rem;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--ink-soft);
}

.about-copy .btn { margin-top: 1.75rem; }

/* ============================================================
   REVIEWS  (pool band)
   Plain ruled quotes, not Premium's tilted sticker cards: this is
   the tier's step down. All text on pool must be --ink, since
   --ink-soft only reaches 2.96:1 against the blue.
   ============================================================ */
.reviews { background: var(--pool); padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.reviews .eyebrow,
.reviews .section-title,
.reviews .section-sub { color: var(--ink); }
.reviews-link { font-weight: 800; color: var(--ink); }
.reviews-link:hover { color: var(--berry); }

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
}
.review {
  padding-top: 1.25rem;
  border-top: 3px solid var(--ink);
  color: var(--ink);
}
.review-stars { display: inline-flex; gap: 0.2rem; color: var(--ink); }
.review-stars svg { width: 16px; height: 16px; }
.review blockquote p { margin-top: 0.85rem; font-size: 1rem; }
.review-by { margin-top: 0.9rem; font-size: 0.9rem; }
.review-by b { display: block; }

/* ============================================================
   FAQ  (sun band)
   One measured column under the heading, hairline rows, a bare
   plus mark. Premium keeps the two-column split and the rotated
   sun-disc icons.
   ============================================================ */
.faq { background: var(--sun-tint); padding-block: clamp(4.5rem, 8.5vw, 7rem); }
.faq .section-head { margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Grouped by service, and each group is itself a disclosure so the section
   opens as four headers rather than sixteen questions. `name` makes the
   categories mutually exclusive where supported and degrades to independent
   toggles where it is not. */
.faq-cat-item { border-bottom: 2px solid rgba(59, 30, 74, 0.22); }
.faq-cat-item:first-child { border-top: 2px solid rgba(59, 30, 74, 0.22); }
.faq-cat-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.35rem 0.25rem;
  cursor: pointer;
  list-style: none;
}
.faq-cat-item > summary::-webkit-details-marker { display: none; }
.faq-cat-item > summary h3 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  line-height: 1.3;
  color: var(--ink);
}
.faq-cat-item > summary:hover h3 { color: var(--pink-deep); }
.faq-cat-item[open] > summary h3 { color: var(--pink-deep); }
.faq-cat-item[open] > summary .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-icon-lg { width: 1.6rem; height: 1.6rem; }
.faq-icon-lg::before, .faq-icon-lg::after { width: 18px; height: 2.5px; }

/* Questions read as children: indented, hairline rules instead of the 2px */
.faq-cat-body { padding: 0 0 1.1rem clamp(0rem, 2.5vw, 1.1rem); }
.faq-cat-body .faq-item { border-bottom: 1px solid rgba(59, 30, 74, 0.14); }
.faq-cat-body .faq-item:first-child { border-top: 1px solid rgba(59, 30, 74, 0.14); }
.faq-cat-body .faq-item:last-child { border-bottom: 0; }
.faq-cat-body .faq-item summary { padding-block: 0.95rem; }

.faq-item { border-bottom: 2px solid rgba(51, 43, 99, 0.22); }
.faq-item:first-child { border-top: 2px solid rgba(51, 43, 99, 0.22); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0.25rem;
  cursor: pointer;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3,
.faq-item summary h4 {
  font-family: var(--ff-body);
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.4;
}
.faq-icon {
  position: relative;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 2px;
  border-radius: 2px;
  background: var(--pink-deep);
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-item[open] summary h3,
.faq-item[open] summary h4 { color: var(--pink-deep); }
.faq-item > p { padding: 0 3rem 1.4rem 0.25rem; color: var(--ink); max-width: 62ch; }

/* ============================================================
   BOOK  (request form + salon details, no map on this tier)
   ============================================================ */
.book { padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.book-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2.5rem, 5.5vw, 4.5rem);
  /* Centre the shorter details column against the tall form */
  align-items: center;
}
.book-sub { max-width: 32rem; margin-top: 1rem; color: var(--ink-soft); }
.book-sub strong { color: var(--pink-deep); }

.form-callout {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  background: var(--sun-tint);
  border: 2px solid var(--ink);
  border-radius: var(--r-input);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.5;
}
.form-callout svg { width: 20px; height: 20px; flex: none; color: var(--pink-deep); margin-top: 2px; }

.book-form {
  margin-top: 2rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--sticker);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  gap: 1.2rem;
}
/* An author display rule beats the bare [hidden] attribute, so re-hide it
   explicitly: main.js sets form.hidden on submit, and without this the whole
   sticker card stayed on screen next to the thank-you. */
.book-form[hidden] { display: none; }
.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.2rem;
}
.field { display: grid; gap: 0.4rem; }
.field label { font-size: 0.9rem; font-weight: 800; }
.field .opt { font-weight: 600; color: var(--ink-soft); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  background: #fff;
  color: var(--ink);
  border: 2px solid var(--line-input);
  border-radius: var(--r-input);
  min-height: 44px;
}
.field textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #6E6694; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--pink-deep);
  outline-offset: 1px;
  border-color: var(--pink-deep);
}
.hp-field { position: absolute; left: -9999px; }

.btn-submit { width: 100%; justify-content: space-between; }
.form-note { font-size: 0.9375rem; color: var(--ink-soft); text-align: center; }

form.is-submitted { opacity: 1 !important; }

.form-success {
  margin-top: 2rem;
  background: var(--sun-tint);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--sticker);
  padding: 2.25rem;
  text-align: center;
}
/* An author display rule beats the bare [hidden] attribute, so re-hide it explicitly */
.form-success[hidden] { display: none; }
.form-success svg { width: 44px; height: 44px; color: var(--pink-deep); margin-inline: auto; }
.form-success h3 { font-family: var(--ff-display);
  font-weight: 600; font-size: 1.4rem; margin-top: 0.9rem; }
.form-success p { margin-top: 0.5rem; color: var(--ink-soft); }

.book-cards { display: grid; gap: 1.25rem; }
.book-card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--sticker-sm);
  padding: 1.5rem;
}
.book-card-h {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 0.9rem;
}
.book-card-h svg { width: 18px; height: 18px; color: var(--pink); flex: none; }
.book-card address { color: var(--ink-soft); font-weight: 700; }
.book-link { display: inline-block; margin-top: 0.8rem; font-weight: 800; color: var(--pink-deep); }
.hours { display: grid; gap: 0.4rem; font-size: 0.9rem; }
.hours div { display: flex; justify-content: space-between; gap: 0.75rem; }
.hours dt { font-weight: 800; flex: none; white-space: nowrap; }
.hours dd { margin: 0; color: var(--ink-soft); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.book-note {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 2px dashed var(--line);
  font-size: 0.875rem;
  color: var(--ink-soft);
}

/* First-visit checklist folded into the details column on this tier */
.bring { background: var(--pool-tint); }
.bring ol { display: grid; gap: 0.85rem; counter-reset: bring; }
.bring li {
  counter-increment: bring;
  display: flex;
  gap: 0.75rem;
  font-size: 0.9375rem;
}
.bring li::before {
  content: counter(bring, decimal-leading-zero);
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--pink-deep);
  flex: none;
  padding-top: 2px;
}
.bring b { display: block; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(42, 35, 80, 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
  overscroll-behavior: contain;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lb-figure { max-width: min(58rem, 100%); }
.lb-img { max-height: 76vh; width: auto; max-width: 100%; border-radius: var(--r-card); margin-inline: auto; }
.lb-cap {
  margin-top: 0.9rem;
  text-align: center;
  color: var(--cream);
  font-family: var(--ff-note);
  font-weight: 600;
  font-size: 1.4rem;
}
.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease);
}
.lb-btn:hover { background: var(--pink); border-color: var(--pink); color: #fff; }
.lb-btn:focus-visible { outline-color: #fff; }
.lb-close { top: 1rem; right: 1rem; }
.lb-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ---------- Footer (berry sign-off, trimmed for this tier) ----------
   Premium keeps the Caveat hand-note, the paw-print divider, the giant
   phone and the social icon circles. Deluxe runs one line, a smaller
   phone, one nav row with the socials folded in, and the legal bar. */
.foot {
  background: var(--berry);
  color: #D5CEF0;
  text-align: center;
}
.foot-inner { padding-block: clamp(2.5rem, 5vw, 3.5rem) clamp(1.75rem, 3.5vw, 2.5rem); }

.foot-line {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  color: var(--cream);
  text-wrap: balance;
}
.foot-tel {
  display: inline-block;
  margin-top: 0.85rem;
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--sun);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.foot-tel:hover { color: var(--cream); }
.foot-tel:focus-visible { outline-color: var(--cream); }
.foot-meta { margin-top: 0.75rem; font-size: 0.9375rem; }
.foot-meta a { color: #D5CEF0; }
.foot-meta a:hover { color: var(--sun); }
.foot-meta a:focus-visible { outline-color: #fff; }

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.6rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 2px solid var(--berry-soft);
}
.foot-nav a {
  color: var(--cream);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.9375rem;
  padding: 0.35rem 0.15rem;
}
.foot-nav a:hover { color: var(--sun); }
.foot-nav a:focus-visible { outline-color: #fff; }
.foot-nav .foot-social { color: #B9B0DC; font-weight: 700; }
.foot-nav .foot-social:hover { color: var(--sun); }

.foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-block: 1.4rem;
  border-top: 2px solid var(--berry-soft);
  font-size: 0.875rem;
  color: #B9B0DC;
}
.foot-bottom nav { display: flex; gap: 1.5rem; }
.foot-bottom a { color: #D5CEF0; text-decoration: none; }
.foot-bottom a:hover { color: var(--sun); }
.foot-bottom a:focus-visible { outline-color: #fff; }

/* ---------- Sticky mobile / tablet CTA bar ---------- */
.mobile-bar { display: none; }

/* ---------- Reveal motion ----------
   Uses the individual `translate` property, not `transform`, so the
   decorative rotations on stickers, cards and photos survive a reveal. */
.reveal {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.7s var(--ease), translate 0.7s var(--ease);
}
.reveal.is-in { opacity: 1; translate: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  /* Sticky CTA bar on mobile AND tablet */
  .mobile-bar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 110;
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem clamp(1rem, 4vw, 1.5rem);
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
    background: rgba(255, 246, 233, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 2px solid var(--ink);
  }
  .mobile-bar .btn { justify-content: center; font-size: 0.9375rem; padding: 0.85rem 1.25rem; gap: 0.5rem; }
  .mobile-bar .btn-ghost { flex: 0 0 auto; }
  .mobile-bar .btn-primary { flex: 1; box-shadow: none; }
  body { padding-bottom: 4.6rem; }

  /* Header CTA collapses to the menu button; phone + Book live in the sticky bar */
  .head-tel,
  .head-book { display: none; }

  .hero-grid { grid-template-columns: 1fr; padding-block: clamp(2.5rem, 6vw, 4rem) 3.75rem; }
  .hero-copy { max-width: none; }
  .hero-media { margin-top: 3.25rem; }
  .hero-frame {
    border-right: 2px solid var(--ink);
    border-radius: var(--r-card);
    margin-right: 0;
  }
  /* The hero photo is portrait (4/5). The old 5/4 frame showed only a 64%
     letterbox of it, which is what was cutting the dogs off. Matching the
     frame to the source shows the whole picture; the width cap below keeps
     the height sane once the single column gets wide. */
  .hero-photo { aspect-ratio: 4 / 5; max-height: none; object-position: 50% 50%; }

  /* Two across, and the odd last card turns into a wide horizontal one.
     (.svc-grid-6 on the services page undoes this; see interior responsive.) */
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-grid .svc:last-child { grid-column: span 2; flex-direction: row; }
  .svc-grid .svc:last-child .svc-media { flex: 0 0 42%; border-right: 2px solid var(--ink); border-bottom: 0; }
  .svc-grid .svc:last-child .svc-media img { height: 100%; aspect-ratio: auto; }

  .ba-grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .about-media { max-width: 33rem; }
  .book-grid { grid-template-columns: 1fr; }

  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-grid > :last-child { grid-column: span 2; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }

  .utility-note { display: none; }
  .utility-row { justify-content: center; }

  .hero-actions .btn { width: 100%; justify-content: space-between; }
  .hero-trust { gap: 0.6rem; }

  .svc-grid { grid-template-columns: 1fr; }
  .svc-grid .svc:last-child { grid-column: auto; flex-direction: column; }
  .svc-grid .svc:last-child .svc-media { flex: none; border-right: 0; border-bottom: 2px solid var(--ink); }
  .svc-grid .svc:last-child .svc-media img { height: auto; aspect-ratio: 4 / 3; }

  .addons { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  /* the dashed run reaches sideways to the next numeral, so it has no
     job (and would poke past the container) once the steps stack */
  .step:not(:last-child)::after { display: none; }
  .review-grid { grid-template-columns: 1fr; }
  .review-grid > :last-child { grid-column: auto; }
  .form-row { grid-template-columns: 1fr; }
  .foot-nav { gap: 0.5rem 1.1rem; }
}

/* ---------- Reduced motion ---------- */
/* The hero photo panel bleeds to the viewport edge, so on very wide screens it
   grows far wider than tall and `object-fit: cover` crops the dogs out of frame.
   Let the height cap grow with the viewport instead of stopping at 640px.
   Scoped to min-width so it can never reach the <=1023px rules above. */
@media (min-width: 1024px) {
  .hero-photo { max-height: min(86vh, clamp(640px, 44vw, 1250px)); }
}

@media (min-width: 700px) {
  .flyer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 480px) and (max-width: 1023px) {
  .hero-media { max-width: 30rem; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bub { animation: none; }
  .reveal { opacity: 1; translate: none; transition: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* ============================================================
   INTERIOR PAGES (services / gallery / our salon / contact)
   The inside pages borrow the home page's vocabulary wherever
   they can. Only the components below are new, and every one of
   them stays a step under the Premium tier: no per-service
   detail pages, no map, no captions, no decorative discs.
   ============================================================ */

/* Page head: title left, one line of context right */
.page-hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 3rem;
  flex-wrap: wrap;
}
.page-hero-row > :first-child { flex: 1 1 26rem; min-width: 0; }
.page-hero-row .section-sub { flex: 1 1 20rem; margin-top: 0; }

/* Inline link inside a section sub, used to reach the inside pages */
.section-sub-link { font-weight: 800; }

/* ---------- Services page ----------
   Three stacked cream sections: the menu, the price table, the
   add-ons. Only the last one carries the full closing space. */
.svc-page { padding-block: clamp(3rem, 6vw, 4.5rem); }
.pricing { padding-block: 0 clamp(3rem, 6vw, 4.5rem); }
.addon-section { padding-block: 0 clamp(4.5rem, 9vw, 7.5rem); }

/* ---------- Printed service flyers (services page) ---------- */
.flyers { padding-block: 0 clamp(4.5rem, 9vw, 7.5rem); }
.flyer-grid {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
}
.flyer {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--sticker);
  padding: 0.75rem 0.75rem 0;
  overflow: hidden;
}
.flyer img {
  width: 100%;
  border-radius: calc(var(--r-card) - 10px);
  border: 1px solid var(--line);
  cursor: zoom-in;
}
.flyer-open {
  display: block;
  padding: 0 0.25rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--pink-deep);
}
.flyer-open:hover { color: var(--ink); }

.flyer-cap {
  padding: 0.85rem 0.25rem 0.35rem;
  text-align: center;
  font-weight: 800;
  font-size: 0.9375rem;
  color: var(--ink);
}

/* Crops for the three cards the home page does not carry */
/* Cards 2 and 3 carry portrait photos in a 4/3 frame, so only the vertical
   crop matters. Scoped to .svc-grid-6 so the home page's own cards 2 and 3
   (which are already 4/3 and need no shifting) are left alone. */
.svc-grid-6 .svc:nth-child(2) .svc-media img { object-position: 50% 4%; }
.svc-grid-6 .svc:nth-child(3) .svc-media img { object-position: 50% 12%; }
.svc-grid-6 .svc:nth-child(4) .svc-media img { object-position: 50% 14%; }
.svc-grid-6 .svc:nth-child(5) .svc-media img { object-position: 48% 44%; }
.svc-grid-6 .svc:nth-child(6) .svc-media img { object-position: 42% 45%; }

/* Pricing: one shared table for the whole menu. Per-service pages
   with their own tables are the Premium tier's job. */
.price-panel {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--sun-tint);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--sticker);
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.price-panel-h { font-family: var(--ff-display);
  font-weight: 600; font-size: 1.35rem; }
.price-panel p { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--ink-soft); }
.price-panel + .price-panel { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.price-fine {
  grid-column: 1 / -1;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px dashed rgba(59, 30, 74, 0.2);
  font-size: 0.875rem;
  color: var(--ink-soft);
}
.price-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.price-table th,
.price-table td {
  padding: 0.7rem 0.5rem;
  text-align: right;
  border-bottom: 2px dashed rgba(51, 43, 99, 0.18);
}
.price-table th:first-child,
.price-table td:first-child { text-align: left; padding-left: 0; font-weight: 800; }
.price-table th:last-child,
.price-table td:last-child { padding-right: 0; }
.price-table thead th {
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 1rem;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: var(--ink);
}
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table td { color: var(--ink-soft); font-weight: 700; }

/* Add-ons: the home page shows them as pills, this page prices them */
.addon-rows {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 3.5rem);
}
.addon-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
  border-bottom: 2px dashed var(--line);
}
.addon-row dt { font-weight: 800; }
.addon-row dd {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 600;
  color: var(--pink-deep);
  font-variant-numeric: tabular-nums;
}
.addon-foot { margin-top: 1.5rem; font-size: 0.9375rem; color: var(--ink-soft); }

/* ---------- Gallery page ----------
   Three across instead of the home page's four, so the wall reads
   as photographs rather than thumbnails. */
/* Scoped to desktop: below 1024 the wall inherits the home page's
   two-then-one column behaviour, which this rule would otherwise beat
   on source order. */
@media (min-width: 1024px) {
  .gal-wall { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.gal-wall .gal-item:nth-child(1) img { object-position: 55% 40%; }
.gal-wall .gal-item:nth-child(2) img { object-position: 60% 40%; }
.gal-wall .gal-item:nth-child(3) img { object-position: 50% 35%; }
.gal-wall .gal-item:nth-child(4) img { object-position: 48% 44%; }
.gal-wall .gal-item:nth-child(5) img { object-position: 50% 45%; }
.gal-wall .gal-item:nth-child(6) img { object-position: 25% 50%; }
.gal-wall .gal-item:nth-child(7) img { object-position: 47% 38%; }
.gal-wall .gal-item:nth-child(8) img { object-position: 45% 32%; }
.gal-wall .gal-item:nth-child(9) img { object-position: 62% 50%; }
/* The home page runs one line and one button side by side; the
   gallery page closes on a stacked, centred invitation. */
.gal-foot-stack { flex-direction: column; gap: 0.75rem; }
.gal-foot-h {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  font-weight: 400;
  color: var(--ink);
  text-wrap: balance;
}
.gal-foot-note { max-width: 34rem; }
.gal-foot-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
}
.gal-foot-stack .gal-foot-actions { margin-top: 0.75rem; }

/* ---------- Our salon page ---------- */
/* The home page hangs the owner pill in this gap; the story page
   puts a hand-note there instead and gives the owner a full card. */
.about-note {
  position: absolute;
  right: clamp(0.5rem, 3vw, 1.5rem);
  bottom: 0.4rem;
  transform: rotate(-2deg);
}

.meet-section { padding-block: 0 clamp(4.5rem, 9vw, 7.5rem); }
.meet {
  max-width: 56rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--sticker);
}
.meet-photo {
  width: clamp(7rem, 14vw, 9.5rem);
  height: clamp(7rem, 14vw, 9.5rem);
  border-radius: 999px;
  border: 2px solid var(--ink);
  object-fit: cover;
  flex: none;
}
/* No owner portrait yet: centre the card on itself rather than leaving a
   lone text column pinned left inside a flex row. */
.meet-textonly { flex-direction: column; text-align: center; max-width: 44rem; }
.meet-textonly > div { width: 100%; }

.meet-name { font-family: var(--ff-display);
  font-weight: 600; font-size: 1.5rem; }
.meet-role {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink-deep);
}
/* :not([class]) so the role line keeps its own colour */
.meet p:not([class]) { margin-top: 0.9rem; color: var(--ink-soft); }

/* House rules on the pool band. Ruled, not carded: same step down
   the reviews take on the home page. All text stays --ink here. */
.values { background: var(--pool); padding-block: clamp(4rem, 8vw, 6.5rem); }
.values .eyebrow,
.values .section-title,
.values .section-sub { color: var(--ink); }
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
}
.value { padding-top: 1.25rem; border-top: 3px solid var(--ink); color: var(--ink); }
.value h3 { font-family: var(--ff-display);
  font-weight: 600; font-size: 1.25rem; }
.value p { margin-top: 0.6rem; }

/* ---------- Contact page ----------
   The page head already carries the opening space, so the booking
   block runs tighter here than the same section does at home. */
.book-page { padding-block: clamp(3rem, 6vw, 4.5rem); }
.helper-section { padding-block: 0 clamp(4.5rem, 9vw, 7.5rem); }
/* Reuse of the add-on panel: copy left, two buttons right. The button
   column sizes to its content so the pair stays on one row. Scoped to
   desktop, or it would beat the panel's own single-column stack. */
.helper-section .addons { margin-top: 0; }
@media (min-width: 1024px) {
  .helper-section .addons { grid-template-columns: minmax(0, 1fr) auto; }
}
.helper-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ---------- Closing CTA band ---------- */
.cta { background: var(--pink-tint); padding-block: clamp(3.5rem, 7vw, 5.5rem); text-align: center; }
.cta-inner { max-width: 44rem; margin-inline: auto; }
.cta .section-sub { max-width: 36rem; margin-inline: auto; color: var(--ink); }
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 2rem;
}

/* ---------- Interior responsive ---------- */
@media (max-width: 1023px) {
  /* Six cards divide evenly in two columns, so the home page's
     full-width last card must not apply here. */
  .svc-grid-6 .svc:last-child { grid-column: auto; flex-direction: column; }
  .svc-grid-6 .svc:last-child .svc-media { flex: none; border-right: 0; border-bottom: 2px solid var(--ink); }
  .svc-grid-6 .svc:last-child .svc-media img { height: auto; aspect-ratio: 4 / 3; }

  .price-panel { grid-template-columns: 1fr; }
  .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value:last-child { grid-column: span 2; }
}

@media (max-width: 640px) {
  .addon-rows { grid-template-columns: 1fr; }
  .meet { flex-direction: column; align-items: flex-start; }
  .meet-textonly { align-items: center; }
  .value-grid { grid-template-columns: 1fr; }
  .value:last-child { grid-column: auto; }
  .cta-actions .btn { width: 100%; justify-content: space-between; }
}

/* ============================================================
   LEGAL PAGES (privacy / accessibility)
   ============================================================ */
.page-hero {
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem);
  border-bottom: 2px dashed var(--line);
}
.page-hero .section-title { font-size: clamp(2rem, 4vw, 3rem); }
.page-hero .section-sub { margin-top: 1rem; }

.legal { padding-block: clamp(3rem, 6vw, 4.5rem) clamp(4rem, 8vw, 6rem); }
.legal-body { max-width: 48rem; }
.legal-body h2 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  margin: 2.4rem 0 0.7rem;
}
.legal-body h2:first-of-type { margin-top: 0; }
.legal-body p { color: var(--ink-soft); }
.legal-body p + p { margin-top: 0.9rem; }
.legal-body ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-top: 0.9rem;
  display: grid;
  gap: 0.5rem;
  color: var(--ink-soft);
}
.legal-updated { font-size: 0.9rem; color: var(--ink-soft); }
.legal-back { display: inline-block; margin-top: 2.5rem; font-weight: 800; }

/* ---------- Footer logo (full stacked lockup, reversed) ---------- */
.foot-logo {
  display: block;
  /* the client's crest is a near-square 1:1 emblem */
  width: clamp(190px, 26vw, 300px);
  height: auto;
  margin: 0 auto clamp(1.1rem, 2.6vw, 1.75rem);
}

/* ---------- Price tables on narrow screens ----------
   A 5-column table cannot fit a phone, and side-scrolling hid the Length and
   From columns entirely (the client reported the table looking empty). Below
   620px each row becomes its own stacked block and every value carries its own
   header via data-label, so nothing is off-screen. */
@media (max-width: 620px) {
  .price-scroll { overflow-x: visible; }
  .price-table { min-width: 0; }
  .price-table thead {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .price-table tr {
    display: block;
    padding: 0.9rem 0;
    border-bottom: 2px dashed rgba(59, 30, 74, 0.18);
  }
  .price-table tbody tr:last-child { border-bottom: 0; }
  .price-table th[scope="row"] {
    display: block; width: 100%;
    padding: 0 0 0.45rem; border: 0; text-align: left;
    font-family: var(--ff-display); font-weight: 600; font-size: 1.05rem; color: var(--ink);
  }
  .price-table td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: 0.22rem 0; border: 0; text-align: right;
  }
  .price-table td::before {
    content: attr(data-label);
    font-weight: 800; color: var(--ink); text-align: left;
  }
  .price-table td:not([data-label])::before,
  .price-table td[data-label=""]::before { content: none; }
}