/* ==========================================================================
   Little Paws Grooming: styles.css
   Mobile-first, no framework, no build step.

   How this file is organized
     1. Fonts            5. Header & navigation    9. Gallery
     2. Design tokens    6. Hero                  10. Testimonials
     3. Base & reset     7. Services & pricing    11. Contact & booking form
     4. Utilities        8. About                 12. Footer, consent banner, privacy page
                                                  13. Preferences: motion, contrast, forced colours, print

   Accessibility: every text/background pair below was checked against WCAG 2.1 AA
   (4.5:1 for body text, 3:1 for form borders and focus rings). The ratios are listed
   next to each colour token; README.md explains how to re-check them if you change one.

   Translation-ready: this file contains no visible wording (no `content: "…"` text),
   and layout uses logical properties (inline/block) so longer French (fr-CA) copy
   simply wraps, with nothing to rebuild.
   ========================================================================== */

/* 1. Fonts ------------------------------------------------------------------
   Self-hosted (see fonts/LICENSE.txt), so the CSP only needs font-src 'self' and
   visitors' IP addresses are never sent to a font CDN. Latin subsets cover French. */
@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-soft-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

/* 2. Design tokens ---------------------------------------------------------- */
:root {
  /* Neutrals: warm off-whites and taupes */
  --c-bg: #FBF8F3;            /* linen: page background */
  --c-bg-alt: #F3EDE4;        /* oat: alternate sections */
  --c-surface: #FFFFFF;       /* cards and inputs */
  --c-border: #E4DBCE;        /* decorative hairlines only */
  --c-border-strong: #8C8073; /* form borders: 3.31–3.85:1 on every background */
  --c-text: #2E2924;          /* body text: 12.11–14.40:1 */
  --c-text-muted: #5C544B;    /* secondary text: 6.25–7.43:1 */

  /* Accent: muted sage (primary) and clay (secondary) */
  --c-sage-50: #EAF0E8;
  --c-sage-300: #A9BDA7;
  --c-sage-700: #46604D;      /* links 5.93–6.91:1; white text on it 6.91:1 */
  --c-sage-800: #374C3D;      /* hover; white text on it 9.28:1 */
  --c-sage-900: #2A3A2F;      /* focus ring: 10.34–12.04:1 */
  --c-clay-50: #F6E9E1;
  --c-clay-500: #C08A6E;      /* decorative only */
  --c-clay-700: #94533A;      /* eyebrow text 4.96–5.90:1 */

  /* Feedback */
  --c-error: #A3362A;         /* 5.79–6.73:1; 5.90:1 on --c-error-bg */
  --c-error-bg: #FBEDEA;

  /* Footer (dark) */
  --c-footer-bg: #2E2924;
  --c-footer-text: #F3EDE4;   /* 12.37:1 */
  --c-footer-muted: #C9BFB2;  /* 7.94:1 */

  --c-focus: var(--c-sage-900);
  --c-focus-inverse: #F3EDE4;

  /* Type */
  --font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --step--1: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.08rem + 0.25vw, 1.25rem);
  --step-2: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem);
  --step-3: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  --step-4: clamp(2.375rem, 1.75rem + 3vw, 4.125rem);

  /* Space */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --section-space: clamp(3.75rem, 2.5rem + 5.5vw, 7.5rem);
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --container: 74rem;

  /* Shape and depth */
  --radius-s: 0.75rem;
  --radius-m: 1rem;
  --radius-l: 1.5rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;
  --shadow-s: 0 1px 2px rgb(46 41 36 / 0.05), 0 4px 12px -4px rgb(46 41 36 / 0.08);
  --shadow-m: 0 1px 2px rgb(46 41 36 / 0.05), 0 16px 36px -16px rgb(46 41 36 / 0.22);
  --shadow-l: 0 2px 4px rgb(46 41 36 / 0.04), 0 28px 60px -24px rgb(46 41 36 / 0.3);

  --header-h: 4.25rem;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  color-scheme: light;
}

/* 3. Base & reset ----------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Anchor links land below the sticky header (and above the consent banner, when shown). */
  scroll-padding-block-start: calc(var(--header-h) + var(--space-m));
  scroll-padding-block-end: var(--consent-h, 0px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

body.has-consent {
  padding-block-end: var(--consent-h, 0px);
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

/* :where() keeps this reset at zero specificity, so component margins always win. */
:where(ul[role="list"], ol[role="list"]) {
  margin: 0;
  padding: 0;
  list-style: none;
}

dl,
dd {
  margin: 0;
}

address {
  font-style: normal;
}

a {
  color: var(--c-sage-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}

/* Programmatic focus targets (notices, headings) don't need a ring around the whole block. */
[tabindex="-1"]:focus:not(:focus-visible) {
  outline: none;
}

/* 4. Utilities --------------------------------------------------------------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.visually-hidden:not(:focus):not(:active) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  inset-block-start: var(--space-s);
  inset-inline-start: var(--space-s);
  z-index: 100;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-s);
  background: var(--c-sage-900);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: none;
}

.scroll-sentinel {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--fill {
  fill: currentColor;
  stroke: none;
}

.icon-chip {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-m);
  background: var(--c-sage-50);
  color: var(--c-sage-700);
}

.icon-chip--clay {
  background: var(--c-clay-50);
  color: var(--c-clay-700);
}

.eyebrow {
  color: var(--c-clay-700);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nowrap {
  white-space: nowrap;
}

.fine-print {
  margin-block-start: var(--space-l);
  color: var(--c-text-muted);
  font-size: var(--step--1);
}

/* Buttons */
.btn {
  --btn-bg: var(--c-sage-700);
  --btn-fg: #FFFFFF;
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 3rem;
  padding: var(--space-s) var(--space-l);
  /* A transparent border keeps buttons outlined in Windows high-contrast mode. */
  border: 1.5px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.btn:hover {
  --btn-bg: var(--c-sage-800);
  box-shadow: var(--shadow-s);
}

.btn:active {
  transform: translateY(1px);
}

.btn--secondary {
  --btn-bg: var(--c-surface);
  --btn-fg: var(--c-text);
  --btn-border: var(--c-border-strong);
}

.btn--secondary:hover {
  --btn-bg: var(--c-surface);
  --btn-border: var(--c-text);
}

.btn--sm {
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-m);
  font-size: var(--step--1);
}

.btn--lg {
  min-height: 3.5rem;
  padding: var(--space-m) var(--space-xl);
}

.btn .icon {
  width: 1.25em;
  height: 1.25em;
}

.btn__meta {
  font-weight: 500;
  color: var(--c-text-muted);
}

.btn[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.75;
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.link-button:hover {
  text-decoration-thickness: 2px;
}

/* 5. Header & navigation ------------------------------------------------------ */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  border-block-end: 1px solid transparent;
  background: rgb(251 248 243 / 0.94);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

@supports (backdrop-filter: blur(1px)) {
  .site-header {
    background: rgb(251 248 243 / 0.82);
    backdrop-filter: saturate(1.4) blur(12px);
  }
}

.site-header.is-scrolled {
  border-color: var(--c-border);
  box-shadow: 0 10px 24px -20px rgb(46 41 36 / 0.45);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-s);
  min-height: var(--header-h);
  padding-block: var(--space-xs);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-inline-end: auto;
  color: var(--c-text);
  text-decoration: none;
}

.brand__mark {
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  fill: var(--c-sage-700);
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
}

.brand__sub {
  display: block;
  margin-block-start: 0.3rem;
  color: var(--c-text-muted);
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* The menu button only exists once script.js has run (html.js). */
.nav-toggle {
  display: none;
}

.js .nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-s);
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
}

.nav-toggle .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.nav-toggle[aria-expanded="true"] .icon--menu,
.nav-toggle[aria-expanded="false"] .icon--close {
  display: none;
}

/* Without JavaScript the links simply wrap onto their own row. */
.site-nav {
  order: 3;
  flex-basis: 100%;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-pill);
  color: var(--c-text);
  font-weight: 500;
  text-decoration: none;
}

.site-nav a:hover {
  background: var(--c-bg-alt);
}

.site-nav a.is-current {
  color: var(--c-sage-700);
  box-shadow: inset 0 -2px 0 var(--c-sage-700);
  border-radius: 0;
}

.site-header__cta {
  order: 2;
}

@media (max-width: 55.99em) {
  /* Without JavaScript the links wrap onto extra rows, so the header scrolls away
     instead of sticking and covering the content that anchor links jump to. */
  .no-js {
    scroll-padding-block-start: var(--space-m);
  }

  .no-js .site-header {
    position: relative;
  }

  .js .site-nav {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    display: none;
    padding: var(--space-s) var(--gutter) var(--space-l);
    border-block-end: 1px solid var(--c-border);
    background: var(--c-bg);
    box-shadow: var(--shadow-m);
  }

  .js .site-nav.is-open {
    display: block;
  }

  .js .site-nav__list {
    flex-direction: column;
  }

  .js .site-nav a {
    display: flex;
    padding-inline: var(--space-m);
    font-size: var(--step-1);
  }

  .js .site-nav a.is-current {
    box-shadow: inset 3px 0 0 var(--c-sage-700);
  }
}

/* Phones: icon-only menu button (still labelled for screen readers) so the logo,
   menu and Book Now fit on one row. */
@media (max-width: 29.99em) {
  .nav-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

}

/* Smallest phones (320–360 px): tighten spacing so the header still fits on one row. */
@media (max-width: 22.5em) {
  .site-header__inner {
    gap: var(--space-xs);
  }

  .brand {
    gap: var(--space-xs);
  }

  .brand__name {
    font-size: 1.0625rem;
  }

  .brand__mark {
    width: 2rem;
    height: 2rem;
  }

  .site-header__cta {
    padding-inline: var(--space-s);
  }

}

@media (min-width: 56em) {
  :root {
    --header-h: 4.75rem;
  }

  .site-header__inner {
    flex-wrap: nowrap;
  }

  .brand {
    margin-inline-end: 0;
  }

  .site-nav {
    order: 0;
    flex-basis: auto;
    margin-inline: auto;
  }

  .site-header__cta {
    order: 0;
  }

  .js .nav-toggle {
    display: none;
  }
}

/* 6. Hero --------------------------------------------------------------------- */
.hero {
  padding-block: clamp(1.5rem, 0.75rem + 4vw, 4.5rem) clamp(1rem, 0.5rem + 2vw, 2.5rem);
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.25rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.hero__title {
  margin-block: var(--space-s) var(--space-m);
  font-size: var(--step-4);
  letter-spacing: -0.02em;
  line-height: 1.04;
}

.hero__lead {
  max-width: 34rem;
  color: var(--c-text-muted);
  font-size: var(--step-1);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  margin-block-start: var(--space-xl);
}

.hero__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-l);
  margin-block-start: var(--space-l);
  color: var(--c-text-muted);
  font-size: var(--step--1);
  font-weight: 500;
}

.hero__points li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.hero__points .icon {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--c-sage-700);
  stroke-width: 2.25;
}

.hero__media {
  position: relative;
}

.hero__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-l);
  object-fit: cover;
}

.hero__badge {
  position: absolute;
  inset-block-end: var(--space-m);
  inset-inline-start: var(--space-m);
  display: flex;
  align-items: center;
  gap: var(--space-s);
  max-width: calc(100% - 2 * var(--space-m));
  padding: var(--space-xs) var(--space-m) var(--space-xs) var(--space-xs);
  border-radius: var(--radius-m);
  background: var(--c-surface);
  box-shadow: var(--shadow-m);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
}

.hero__badge .icon-chip {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-s);
}

.hero__badge .icon {
  width: 1.25rem;
  height: 1.25rem;
}

@media (min-width: 56em) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .hero__img {
    aspect-ratio: 4 / 5;
  }

  .hero__badge {
    inset-block-end: var(--space-xl);
    inset-inline-start: calc(-1 * var(--space-xl));
  }
}

/* 7. Sections, services & pricing ------------------------------------------------ */
.section {
  padding-block: var(--section-space);
}

.section--alt {
  background: var(--c-bg-alt);
}

.section-head {
  max-width: 44rem;
  margin-block-end: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-title {
  margin-block: var(--space-s) var(--space-m);
  font-size: var(--step-3);
}

.section-lead {
  color: var(--c-text-muted);
  font-size: var(--step-1);
}

/* "Sample …" notices over placeholder content (same look as the privacy page's draft notice). */
.section-head .callout {
  margin-block-start: var(--space-l);
  text-align: start;
}

.card {
  padding: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  background: var(--c-surface);
  box-shadow: var(--shadow-s);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19.5rem), 1fr));
  gap: var(--space-l);
}

/* The three size-based services: one column until there's room for all three in a row
   (two columns would leave the third card on its own). */
.cards--services {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 56em) {
  .cards--services {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.service-card:hover,
.service-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-m);
}

.service-card__title {
  margin-block-start: var(--space-xs);
  font-size: var(--step-2);
  font-weight: 600;
}

.service-card__text {
  color: var(--c-text-muted);
}

.service-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-xl);
  margin-block-start: auto;
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--c-border);
}

.service-card__meta dt,
.contact-list__label {
  display: block;
  color: var(--c-text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.service-card__meta dd {
  font-size: var(--step-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  align-self: flex-start;
  min-height: 2.75rem;
  font-weight: 600;
}

/* The whole card is the "Book" link's click area, so the hover lift above is an honest promise.
   The link's accessible name stays "Book <service>", and its focus ring stays on the link itself. */
.service-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-l);
}

.service-card__link .icon {
  width: 1.125rem;
  height: 1.125rem;
  transition: transform 0.2s var(--ease);
}

.service-card__link:hover .icon {
  transform: translateX(3px);
}

/* #pricing: the full price list, directly below the service cards (the menu's "Pricing" link lands here). */
.pricing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
  margin-block-start: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.price-main,
.price-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
  align-content: start;
}

.price-card__title {
  margin-block-end: var(--space-m);
  font-size: var(--step-2);
  font-weight: 600;
}

/* Smallest phones: a little more room so the price table fits without scrolling. */
@media (max-width: 22.5em) {
  .price-card {
    padding-inline: var(--space-m);
  }
}

.table-wrap {
  overflow-x: auto;
}

.price-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.price-table caption {
  padding-block-end: var(--space-s);
  color: var(--c-text-muted);
  font-size: var(--step--1);
  text-align: start;
}

.price-table th,
.price-table td {
  padding: var(--space-s) var(--space-xs);
  border-block-end: 1px solid var(--c-border);
  text-align: end;
  vertical-align: bottom;
}

.price-table thead th {
  color: var(--c-text-muted);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.3;
}

.price-table th:first-child {
  padding-inline-start: 0;
  text-align: start;
}

.price-table td:last-child,
.price-table th:last-child {
  padding-inline-end: 0;
}

.price-table tbody th {
  font-weight: 600;
  line-height: 1.3;
}

.price-table td {
  font-size: var(--step-1);
  font-weight: 600;
}

.price-table tbody tr:last-child > * {
  border-block-end: 0;
}

.price-table__note,
.price-list__note {
  display: block;
  color: var(--c-text-muted);
  font-size: var(--step--1);
  font-weight: 400;
}

.price-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-s);
  border-block-end: 1px dashed var(--c-border);
}

.price-list > div:first-child {
  padding-block-start: 0;
}

.price-list > div:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.price-list dt {
  font-weight: 500;
}

.price-list dd {
  font-size: var(--step-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.notes {
  display: grid;
  gap: var(--space-xs);
  padding-inline: var(--space-2xs);
  color: var(--c-text-muted);
  font-size: var(--step--1);
}

.notes li {
  display: flex;
  gap: var(--space-xs);
}

.notes .icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-block-start: 0.15em;
  color: var(--c-sage-700);
  stroke-width: 2.25;
}

@media (min-width: 56em) {
  .pricing-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
  }

  .price-table th,
  .price-table td {
    padding-inline: var(--space-m);
  }
}

/* 8. About / why choose us ------------------------------------------------------ */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.about__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-l);
  object-fit: cover;
}

.features {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l) var(--space-xl);
  margin-block-start: var(--space-xl);
}

.feature {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-m);
  align-items: start;
}

.feature__title {
  margin-block-end: var(--space-2xs);
  font-size: var(--step-1);
  font-weight: 600;
}

.feature__text {
  color: var(--c-text-muted);
}

@media (min-width: 40em) {
  .features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 56em) {
  .about-grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }

  .about__img {
    aspect-ratio: 4 / 5;
  }
}

/* 9. Gallery ---------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
}

.ba {
  container-type: inline-size;
  margin: 0;
  padding: var(--space-s);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  background: var(--c-surface);
  box-shadow: var(--shadow-s);
}

.ba__pair {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.ba__item {
  position: relative;
}

.ba__item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-m);
  object-fit: cover;
}

.ba__label {
  position: absolute;
  inset-block-start: var(--space-xs);
  inset-inline-start: var(--space-xs);
  padding: 0.2rem 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ba__label--after {
  background: var(--c-sage-700);
  color: #FFFFFF;
}

.ba figcaption {
  padding: var(--space-s) var(--space-xs) var(--space-2xs);
  color: var(--c-text-muted);
  font-size: var(--step--1);
}

.ba figcaption strong {
  color: var(--c-text);
}

@media (min-width: 48em) {
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Before/after toggle. When a card is under 28rem wide, side by side would make each photo smaller than
   about 220 px (phones, tablets, and screens up to about 1030 px wide, where the gallery has two columns),
   so it shows one full-width photo at a time and two buttons switch between them in the same spot, which
   is also the easiest way to compare. script.js keeps data-showing and
   aria-pressed in step. Without JavaScript, or without container-query support, the pair stays side by side. */
.ba__toggle {
  display: none;
  position: absolute;
  inset-block-end: var(--space-s);
  inset-inline: 0;
  width: fit-content;
  margin-inline: auto;
  gap: 0.125rem;
  padding: 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--c-surface);
  box-shadow: var(--shadow-m);
}

.ba__toggle button {
  min-width: 5.5rem;
  min-height: 2.75rem;
  padding: 0 var(--space-m);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.ba__toggle button:hover {
  background: var(--c-bg-alt);
}

.ba__toggle [aria-pressed="true"],
.ba__toggle [aria-pressed="true"]:hover {
  background: var(--c-sage-700);
  color: #FFFFFF;
}

@container (max-width: 28rem) {
  .js .ba__pair {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Both photos share one cell; the one not on show keeps its space but is hidden from everyone. */
  .js .ba__item {
    grid-area: 1 / 1;
  }

  .js .ba:not([data-showing="before"]) .ba__item--before,
  .js .ba[data-showing="before"] .ba__item--after {
    visibility: hidden;
  }

  .js .ba__label {
    display: none;
  }

  .js .ba__toggle {
    display: flex;
  }
}

/* 10. Testimonials ------------------------------------------------------------------ */
.quotes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
}

.quote-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  height: 100%;
  margin: 0;
}

.stars {
  display: flex;
  gap: 0.125rem;
  color: var(--c-clay-700);
}

.stars .icon {
  width: 1.125rem;
  height: 1.125rem;
  fill: currentColor;
  stroke: none;
}

.quote-card__text {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.5;
}

.quote-card__by {
  display: grid;
  gap: 0.125rem;
  margin-block-start: auto;
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-size: var(--step--1);
}

.quote-card__name {
  color: var(--c-text);
  font-size: var(--step-0);
  font-weight: 600;
}

@media (min-width: 56em) {
  .quotes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* 11. Contact & booking form -------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l);
  align-items: start;
}

.contact-card__title,
.booking-card__title {
  margin-block-end: var(--space-l);
  font-size: var(--step-2);
  font-weight: 600;
}

.booking-card__title {
  margin-block-end: var(--space-2xs);
}

.contact-list {
  display: grid;
  gap: var(--space-l);
}

.contact-list > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-m);
}

.contact-list .icon-chip {
  width: 2.75rem;
  height: 2.75rem;
}

.contact-list .icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Calling and emailing are the main actions on a phone: 44 px tall targets. The negative margin keeps
   the text on the same rhythm as before, so the extra height only reaches into the spacing around it. */
.contact-list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-block: -0.5rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.contact-list__address {
  margin-block-end: var(--space-2xs);
}

.hours {
  display: grid;
  gap: var(--space-2xs);
}

.hours > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 var(--space-m);
}

.hours dd {
  font-variant-numeric: tabular-nums;
}

.booking-card {
  box-shadow: var(--shadow-m);
}

.booking-card__lead {
  margin-block-start: var(--space-xs);
}

.booking-card__intro {
  margin-block: var(--space-2xs) var(--space-l);
  color: var(--c-text-muted);
  font-size: var(--step--1);
}

.form-group {
  min-width: 0;
  margin: 0 0 var(--space-xl);
  padding: 0;
  border: 0;
}

.form-group__legend {
  margin-block-end: var(--space-m);
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
}

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-l) var(--space-m);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

fieldset.field {
  margin: 0;
  padding: 0;
  border: 0;
}

.field__label {
  padding: 0;
  font-weight: 600;
}

.field__optional {
  color: var(--c-text-muted);
  font-weight: 400;
}

.field__hint {
  color: var(--c-text-muted);
  font-size: var(--step--1);
}

.field__input {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-s) var(--space-m);
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--radius-s);
  background-color: var(--c-surface);
  /* 16px minimum stops iOS Safari zooming into the field. */
  font-size: max(1rem, var(--step-0));
  line-height: 1.4;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.field__input:hover {
  border-color: var(--c-text-muted);
}

.field__input:focus-visible {
  border-color: var(--c-sage-700);
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.field__input[aria-invalid="true"] {
  border-color: var(--c-error);
  box-shadow: 0 0 0 1px var(--c-error);
}

textarea.field__input {
  min-height: 8rem;
  resize: vertical;
}

select.field__input {
  appearance: none;
  padding-inline-end: 2.75rem;
  /* Lucide chevron-down, matching the line icons elsewhere. A same-origin file, so img-src stays 'self'.
     Its stroke is --c-text (#2E2924), written into the file because CSS colours can't reach a background image. */
  background-image: url("images/chevron-down.svg");
  background-position: right 0.875rem center;
  background-size: 1.25rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

.field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  color: var(--c-error);
  font-size: var(--step--1);
  font-weight: 600;
}

.field__error .icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-block-start: 0.1em;
}

/* Radio "cards" for dog size: native inputs, so keyboard and screen readers work as usual. */
.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
}

.choice {
  position: relative;
}

.choice input {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 0.875rem;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--c-sage-700);
}

.choice input:focus-visible {
  outline: none;
}

.choice label {
  display: block;
  height: 100%;
  padding: var(--space-s) var(--space-s) var(--space-s) 2.5rem;
  border: 1.5px solid var(--c-border-strong);
  border-radius: var(--radius-s);
  background: var(--c-surface);
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}

.choice label span {
  display: block;
  margin-block-start: 0.15rem;
  color: var(--c-text-muted);
  font-size: var(--step--1);
  font-weight: 400;
}

.choice label:hover {
  border-color: var(--c-text-muted);
}

.choice input:checked + label {
  border-color: var(--c-sage-700);
  background: var(--c-sage-50);
  box-shadow: inset 0 0 0 1px var(--c-sage-700);
}

.choice input:focus-visible + label {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}

.field--choices[aria-invalid="true"] .choice label,
.field--choices.is-invalid .choice label {
  border-color: var(--c-error);
}

/* Checkboxes (consent banner and marketing opt-in) */
.check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-s);
  align-items: start;
}

.check input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.2rem 0 0;
  accent-color: var(--c-sage-700);
}

.check label {
  cursor: pointer;
}

.check .field__hint {
  grid-column: 2;
}

/* The optional marketing opt-in: set apart by a rule rather than a tinted panel, so it doesn't
   outweigh the required fields just above the submit button. */
.check--consent {
  margin-block-end: var(--space-l);
  padding-block-start: var(--space-l);
  border-block-start: 1px solid var(--c-border);
}

.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-privacy {
  display: flex;
  gap: var(--space-xs);
  margin-block-end: var(--space-l);
  color: var(--c-text-muted);
  font-size: var(--step--1);
}

.form-privacy .icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--c-sage-700);
}

.booking-form__actions .btn {
  width: 100%;
}

.ghl-embed iframe {
  display: block;
  width: 100%;
  min-height: 56rem;
  border: 0;
  border-radius: var(--radius-m);
}

/* Notices (form errors, success, failure) */
.notice {
  display: grid;
  gap: var(--space-xs);
  margin-block-end: var(--space-l);
  padding: var(--space-m) var(--space-l);
  border: 1.5px solid;
  border-radius: var(--radius-m);
}

.notice--error {
  border-color: var(--c-error);
  background: var(--c-error-bg);
}

.notice--success {
  border-color: var(--c-sage-700);
  background: var(--c-sage-50);
}

.notice__title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 700;
}

.notice--error .notice__title {
  color: var(--c-error);
}

.notice--success .notice__title {
  color: var(--c-sage-800);
}

.notice__title .icon {
  width: 1.25rem;
  height: 1.25rem;
}

.notice__list {
  margin: 0;
  padding-inline-start: 1.25rem;
}

.notice__list a {
  color: var(--c-error);
  font-weight: 600;
}

/* No-JavaScript confirmations: shown when the proxy redirects to #booking-received / #booking-error. */
.notice--target {
  display: none;
}

.notice--target:target {
  display: grid;
}

@media (min-width: 40em) {
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field--full {
    grid-column: 1 / -1;
  }

  .choices {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .booking-form__actions .btn {
    width: auto;
  }
}

@media (min-width: 56em) {
  .contact-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
    gap: var(--space-xl);
  }

  .contact-card {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-l));
  }
}

/* 12a. Footer ------------------------------------------------------------------------ */
.site-footer {
  padding-block: var(--space-3xl) var(--space-xl);
  background: var(--c-footer-bg);
  color: var(--c-footer-text);
}

.site-footer a,
.site-footer .link-button {
  color: var(--c-footer-text);
}

.site-footer :focus-visible {
  outline-color: var(--c-focus-inverse);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl) var(--space-xl);
}

.brand--inverse {
  color: var(--c-footer-text);
}

.brand--inverse .brand__mark {
  fill: var(--c-sage-300);
}

.brand--inverse .brand__sub,
.site-footer__tagline {
  color: var(--c-footer-muted);
}

.site-footer__tagline {
  margin-block: var(--space-m) var(--space-l);
}

.site-footer__heading {
  margin-block-end: var(--space-m);
  color: var(--c-footer-muted);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.site-footer .hours {
  max-width: 20rem;
}

/* Footer links are 44 px tall tap targets, like every other control. */
.site-footer__links {
  display: grid;
}

.site-footer__links a,
.site-footer__address a,
.site-footer__legal a,
.site-footer__legal .link-button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
}

.site-footer__links a {
  text-decoration: none;
}

.site-footer__links a:hover {
  text-decoration: underline;
}

.social {
  display: flex;
  gap: var(--space-xs);
}

.social a {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(243 237 228 / 0.35);
  border-radius: 50%;
  transition: background-color 0.2s var(--ease);
}

.social a:hover {
  background: rgb(243 237 228 / 0.12);
}

.social .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-s) var(--space-xl);
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-l);
  border-block-start: 1px solid rgb(243 237 228 / 0.18);
  color: var(--c-footer-muted);
  font-size: var(--step--1);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-l);
}

@media (min-width: 40em) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64em) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr);
  }
}

/* 12b. Consent banner ------------------------------------------------------------------ */
.consent {
  position: fixed;
  inset-inline: var(--space-s);
  inset-block-end: var(--space-s);
  z-index: 60;
  max-width: 46rem;
  max-height: calc(100vh - 2 * var(--space-s));
  max-height: calc(100dvh - 2 * var(--space-s));
  margin-inline: auto;
  overflow-y: auto;
  padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  background: var(--c-surface);
  box-shadow: var(--shadow-l);
}

.consent__title {
  margin-block-end: var(--space-xs);
  font-size: var(--step-2);
  font-weight: 600;
}

.consent__text {
  color: var(--c-text-muted);
  font-size: var(--step--1);
}

.consent__choices {
  display: grid;
  gap: var(--space-s);
  margin: var(--space-m) 0 0;
  padding: var(--space-m) 0 0;
  border: 0;
  border-block-start: 1px solid var(--c-border);
  font-size: var(--step--1);
}

.consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-m);
}

.consent__actions .btn {
  flex: 1 1 auto;
  min-height: 2.75rem;
  padding-inline: var(--space-m);
}

/* 12c. Inner pages (privacy policy) ------------------------------------------------------ */
.page-hero {
  padding-block: clamp(2.5rem, 1.75rem + 3vw, 4.5rem) clamp(2rem, 1.5rem + 2vw, 3rem);
  background: var(--c-bg-alt);
}

.page-hero__title {
  margin-block: var(--space-s) var(--space-m);
  font-size: var(--step-4);
}

.page-hero__meta {
  color: var(--c-text-muted);
}

.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xl);
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--section-space);
}

.toc {
  align-self: start;
  padding: var(--space-l);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-l);
  background: var(--c-surface);
  font-size: var(--step--1);
}

.toc__title {
  margin-block-end: var(--space-s);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 700;
}

.toc ol {
  display: grid;
  gap: var(--space-2xs);
  margin: 0;
  padding-inline-start: 1.25rem;
}

.toc a {
  display: inline-block;
  padding-block: 0.2rem;
}

.prose {
  max-width: 46rem;
}

.prose > * + * {
  margin-block-start: var(--space-m);
}

/* A long document: section headings a size below the marketing page's (step-3), so they don't outshout the text. */
.prose h2 {
  margin-block-start: var(--space-2xl);
  font-size: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);
}

.prose h3 {
  margin-block-start: var(--space-l);
  font-size: var(--step-1);
  font-weight: 600;
}

.prose ul {
  padding-inline-start: 1.25rem;
}

.prose li + li {
  margin-block-start: var(--space-2xs);
}

.callout {
  padding: var(--space-m) var(--space-l);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-m);
  background: var(--c-surface);
}

.callout--draft {
  border-color: var(--c-clay-700);
  background: var(--c-clay-50);
}

.callout--summary {
  border-color: var(--c-sage-300);
  background: var(--c-sage-50);
}

.callout__title {
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 700;
}

.callout > * + * {
  margin-block-start: var(--space-xs);
}

.callout ul {
  margin-block-end: 0;
  padding-inline-start: 1.25rem;
}

.prose code {
  padding: 0.1em 0.35em;
  border-radius: 0.3rem;
  background: var(--c-bg-alt);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
}

.data-table caption {
  padding-block-end: var(--space-xs);
  color: var(--c-text-muted);
  text-align: start;
}

.data-table th,
.data-table td {
  padding: var(--space-s) var(--space-xs);
  border-block-end: 1px solid var(--c-border);
  text-align: start;
  vertical-align: top;
}

.data-table th {
  font-weight: 600;
}

@media (min-width: 64em) {
  .page-layout {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--space-3xl);
  }

  .toc {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-l));
  }
}

/* 13. User preferences --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --c-text-muted: #3E3833;
    --c-border: #8C8073;
    --c-border-strong: #5C544B;
  }
}

@media (forced-colors: active) {
  .btn,
  .nav-toggle,
  .card,
  .choice label,
  .consent,
  .notice,
  .ba__label,
  .ba__toggle button {
    border: 1px solid CanvasText;
  }

  .ba__toggle [aria-pressed="true"] {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  select.field__input {
    appearance: auto;
    padding-inline-end: var(--space-m);
    background-image: none;
  }

  .site-nav a.is-current {
    text-decoration: underline;
  }
}

@media print {
  .site-header,
  .consent,
  .skip-link,
  .hero__actions,
  .hero__badge,
  .service-card__link,
  .booking-card,
  .social,
  .site-footer__legal {
    display: none !important;
  }

  body {
    background: #FFFFFF;
    font-size: 11pt;
  }

  .section,
  .section--alt,
  .site-footer {
    padding-block: 1rem;
    background: none;
    color: #000000;
  }

  .site-footer a {
    color: #000000;
  }

  .card,
  .ba {
    box-shadow: none;
    break-inside: avoid;
  }

  /* Paper can't toggle: always print each before/after pair side by side. */
  .ba__toggle {
    display: none !important;
  }

  .ba__pair {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .ba__item {
    grid-area: auto !important;
    visibility: visible !important;
  }

  .ba__label {
    display: block !important;
  }
}