/* GROOMER — independent dog salons, at home, in a shop or on the road.
   Reusable: tokens only. Light / warm paper, soft type, generously framed
   photographs, a little bath-water ripple and bubbles at the outer edges.
   Shape scale: 12px fields, 24px cards, 36px photographs, pill actions.
   Block owns the reveals and carousel; this skin adds no animation loops. */
:root {
  --notch: 0px;
  --r-sm: 12px;
  --r: 24px;
  --r-lg: 36px;
  --r-xl: 44px;
  --pill: 999px;
  /* Capture the page's contrast-checked tones before a band reverses them. */
  --groomer-lift: var(--brand-lift);
  --groomer-accent: var(--accent-lift);
  --groomer-paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cellipse cx='7' cy='12' rx='3.1' ry='4.2'/%3E%3Cellipse cx='13' cy='6' rx='3' ry='4'/%3E%3Cellipse cx='21' cy='6' rx='3' ry='4'/%3E%3Cellipse cx='27' cy='12' rx='3.1' ry='4.2'/%3E%3Cpath d='M7 24c0-4 5-11 10-11s10 7 10 11c0 5-6 3-10 3S7 29 7 24Z'/%3E%3C/svg%3E");
  --groomer-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 24' preserveAspectRatio='none'%3E%3Cpath d='M0 12Q40 0 80 12T160 12V24H0Z'/%3E%3C/svg%3E");
}

.display, .h-xl, .h-lg, .h-md, .h-sm, .brand__name,
.drawer a, .band__track span, .figures dt, .step__num {
  text-transform: none;
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.08;
}
.display--xxl { font-size: clamp(52px, 8.6vw, 120px); }
.display--lg, .h-lg { font-size: clamp(36px, 4.4vw, 64px); }
.display--md, .h-md { font-size: clamp(30px, 3.5vw, 48px); }
.display--sm, .h-sm { font-size: clamp(23px, 2.1vw, 29px); letter-spacing: -.035em; }
.hero .hero__title { --hl: clamp(48px, min(6.8vw, 11svh), 100px); line-height: 1.06; }
.hl__bar { border-radius: var(--pill); background: var(--brand-lift); }
.kicker, .eyebrow { font-weight: 800; letter-spacing: .12em; }
.brand__name { letter-spacing: -.025em; }
.nav__links a { text-transform: none; font-size: 13px; letter-spacing: 0; font-weight: 700; }
.nav__in { gap: 12px; }
.nav__links { gap: 0; }
.nav__links a { padding-inline: 9px; }
.navsoc a, .socials a, .burger { border-radius: var(--pill); }
.drawer a { line-height: 1.25; }

/* Calm, tactile actions. Keep the actual brand fill and its paired ink on hover. */
.btn {
  border-radius: var(--pill);
  text-transform: none;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.35;
  padding: 16px 26px;
  transition: translate .25s var(--ease), opacity .25s var(--ease);
}
.btn--sm { padding: 12px 20px; font-size: 13px; }
.btn:hover { translate: 0 -2px; }
.btn:active { translate: 0 0; }
.btn--primary::before { display: none; }
.btn--primary:hover { background: var(--brand); color: var(--on-brand); }
.band-brand .btn--primary:hover { background: var(--paper); color: var(--paper-fg); }
.btn--dark:hover { background: var(--fg); color: var(--ink); }
.btn--wa svg { color: var(--brand-lift); }
.btn--wa:hover { background: var(--ink-2); border-color: var(--brand-lift); }
.textlink {
  font-size: 14px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: 0;
  border-bottom-width: 1px;
}

/* The salon opens on paper. Dark lower bands still use Block's hero tokens. */
.hero.band-dark {
  --ink: var(--paper);
  --fg: var(--paper-fg);
  --fg-2: var(--paper-fg-2);
  --brand-lift: var(--groomer-lift);
  --accent-lift: var(--groomer-accent);
  background: var(--paper);
  color: var(--paper-fg);
}
.hero__in { gap: clamp(36px, 4.5vw, 64px); }
.hero__copy .lede { max-width: 43ch; }
.hero__facts { font-size: 12px; text-transform: none; font-weight: 700; letter-spacing: 0; }
.hero__facts li::before, .hero__facts li + li::before { border-radius: 50%; }
.hero::after {
  content: '';
  position: absolute;
  top: 4%; bottom: 6%; right: 0;
  width: 48%;
  pointer-events: none;
  background:
    radial-gradient(circle at 92% 16%, transparent 0 42px, rgb(var(--brand-rgb) / .13) 43px 45px, transparent 46px),
    radial-gradient(circle at 8% 88%, rgb(var(--accent-rgb) / .07) 0 58px, transparent 59px),
    radial-gradient(circle at 95% 72%, transparent 0 76px, rgb(var(--accent-rgb) / .09) 77px 79px, transparent 80px),
    radial-gradient(circle at 12% 9%, rgb(var(--brand-rgb) / .06) 0 24px, transparent 25px);
}
.hero__frame, .statement__media, .zone__media, .step__media {
  clip-path: none;
  border-radius: var(--r-lg);
}
.hero .hero__frame {
  border: 8px solid var(--paper-2);
  box-shadow: 0 20px 48px -32px rgb(var(--hero-ink-rgb) / .28);
}
.hero__tag {
  top: 24px; left: 24px;
  max-width: calc(100% - 48px);
  border-radius: var(--pill);
  padding: 9px 14px;
  text-transform: none;
  letter-spacing: .015em;
  line-height: 1.4;
}
.hero__tag i { border-radius: 50%; animation: none; }
.hero__strip {
  margin-top: 12px;
  border: 1px solid var(--paper-line);
  border-radius: var(--r);
  background: var(--paper-2);
  color: var(--paper-fg);
  padding: 10px 18px;
}
.hero__chip b { text-transform: none; font-size: 13px; letter-spacing: 0; }
.hero__seg i { background: var(--paper-line); border-radius: var(--pill); }
.hero__arrow:hover { background: var(--paper-fg); color: var(--paper); }
.hero__seg:focus-visible, .hero__arrow:focus-visible { outline-color: var(--groomer-lift); }

/* A paw is a small separator, not an illustration. SVGs are masks: ink is a token. */
.band { background: var(--paper-2); border-block: 1px solid var(--paper-line); }
.band__track span { color: var(--paper-fg-2); font-size: clamp(24px, 2.5vw, 34px); letter-spacing: -.025em; }
.band__track span::after {
  width: 19px; height: 19px; border-radius: 0;
  background: var(--brand-lift);
  -webkit-mask: var(--groomer-paw) center / contain no-repeat;
  mask: var(--groomer-paw) center / contain no-repeat;
}

/* Ripples occupy only the empty bottom padding of dark sections. */
.section.band-dark { position: relative; }
.section.band-dark::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 24px;
  background: var(--paper);
  -webkit-mask: var(--groomer-wave) left bottom / 160px 24px repeat-x;
  mask: var(--groomer-wave) left bottom / 160px 24px repeat-x;
  pointer-events: none;
}
.head3 { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 760px; }
.head3 .kicker { margin: 0; }
.head3 .lede { max-width: 58ch; }
.head2 { align-items: flex-start; }
.zone { border-top: 0; }
.zone__media { aspect-ratio: 4 / 4.3; }
.zone h3 { line-height: 1.2; }
.zone > p { line-height: 1.65; }
.tags li { border-radius: var(--pill); text-transform: none; font-size: 12px; letter-spacing: 0; padding: 5px 10px; }
.statement__text { font-size: clamp(36px, 4.5vw, 64px); }
.figures dt { letter-spacing: -.035em; }
.figures dd { line-height: 1.6; }

.plans { gap: 20px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.plan {
  clip-path: none; border-radius: var(--r); padding: 30px 26px 26px; border: 1px solid var(--paper-line);
  transition: translate .4s var(--fx-ease), opacity .8s var(--fx-ease);
}
.plan h3 { font-size: clamp(24px, 2.1vw, 30px); line-height: 1.2; }
.plan__price { font-family: var(--serif); font-size: 34px; line-height: 1.3; font-weight: 700; letter-spacing: -.035em; }
.plan__price span { font-family: var(--sans); display: inline-block; font-size: 14px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.plan__text { font-size: 14px; line-height: 1.6; }
.plan__cta { font-size: 13px; text-transform: none; letter-spacing: 0; }
.plan--featured { border-color: var(--hero-action-border); }
.plan--featured .plan__cta { border-color: currentColor; }
.plan.is-in:hover { box-shadow: none; }
.timetable, .rows, .bookform { border-top-width: 1px; }
.timetable .chip, .state { border-radius: var(--pill); }
.offer { border-radius: var(--r); }
.offer b, .mate__name, .quote__stars { color: var(--brand-lift); }
.steps:not(:has(.step__media)) .step { border-radius: var(--r); }
.step__num { display: flex; align-items: center; gap: 16px; font-size: 52px; line-height: 1; }
.steps:not(:has(.step__media)) .step__num { font-size: 52px; }
.step__num::after {
  content: ''; display: block; width: 24px; height: 24px; flex: none;
  background: currentColor;
  -webkit-mask: var(--groomer-paw) center / contain no-repeat;
  mask: var(--groomer-paw) center / contain no-repeat;
}
.mosaic { gap: 14px; }
.mosaic .shot { border-radius: var(--r); }
.qa__q { font-family: var(--sans); font-size: clamp(18px, 1.5vw, 22px); text-transform: none; font-weight: 700; line-height: 1.4; letter-spacing: -.015em; }
.qa__ic { border: 1px solid var(--line-2); width: 32px; height: 32px; }
.field input, .field select, .field textarea { border-radius: var(--r-sm); background-color: var(--paper-2); }
.field label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; }

/* Closing bubbles are confined to the outside margins, away from the headline.
   Remove all large bubbles on stacked screens. Waves remain in empty padding. */
.closing { position: relative; overflow: hidden; }
.closing__in { position: relative; z-index: 1; }
.closing .display { max-width: 15ch; }
.closing::before, .closing::after {
  content: ''; position: absolute; width: 200px; height: 320px;
  top: 50%; translate: 0 -50%; pointer-events: none;
  background:
    radial-gradient(circle at 50% 35%, transparent 0 62px, color-mix(in srgb, var(--on-brand) 12%, transparent) 63px 65px, transparent 66px),
    radial-gradient(circle at 45% 83%, color-mix(in srgb, var(--on-brand) 7%, transparent) 0 35px, transparent 36px);
}
.closing::before { left: -100px; }
.closing::after { right: -100px; }
.way { border-radius: var(--r); padding: 16px 20px; overflow-wrap: anywhere; }
.way > span { min-width: 0; }
.way b { font-size: 12px; text-transform: none; letter-spacing: 0; }
.way svg { color: var(--groomer-lift); }
a.way:hover b { color: var(--hero-fg-2); }
a.way:hover svg { color: var(--hero-brand-lift); }
.footer__h { text-transform: none; font-family: var(--sans); font-size: 13px; font-weight: 800; letter-spacing: 0; }

@media (max-width: 1080px) {
  .hero::after, .closing::before, .closing::after { display: none; }
}
@media (max-width: 620px) {
  /* Specificity keeps the phone floor's photo-first layout but adds a paper
     gutter and a rounded frame. Nothing decorative can enter the text column. */
  .skin--smiths-groomer .hero__media { margin-inline: 0; }
  .skin--smiths-groomer .hero { padding-top: 16px; }
  .hero .hero__frame { border-width: 5px; border-radius: 28px; }
  .skin--smiths-groomer .hero__tag { top: 16px; left: 16px; max-width: calc(100% - 32px); font-size: 10.5px; }
  .hero__strip { margin-top: 8px; border-radius: 18px; }
  .skin--smiths-groomer .hero__strip { padding-inline: 12px; }
  /* On a phone the strip holds only the progress segments: no empty card under the photo. */
  .skin--smiths-groomer .hero__strip:not(:has(.hero__chip)) { background: transparent; border-color: transparent; min-height: 24px; padding-block: 0; justify-content: center; }
  .skin--smiths-groomer .hero__chip b { white-space: normal; }
  .hero__actions .btn { padding-inline: 22px; }
  .hero__facts { gap: 10px 18px; }
  .head2 { display: grid; gap: 20px; }
  .head2 .lede { max-width: 58ch; }
  .mosaic { gap: 10px; }
  .mosaic .shot { border-radius: 18px; }
  .plan { padding: 26px 24px; }
  .rows > div { grid-template-columns: 80px minmax(0, 1fr); }
  .way { border-radius: 18px; }
  .closing .display--xxl { line-height: 1.08; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active, .plan.is-in:hover { translate: none; transition: none; }
}

/* Smiths brand accents only; all dimensions and layout match the groomer skin. */
.hl__bar { background: var(--smiths-pink); }
.hero__tag { background: var(--smiths-pink-soft); color: var(--paper-fg); }
.hero__facts li::before, .hero__facts li + li::before { background: var(--smiths-pink); }