/* ZenDog Grooming — design system
   Brand values sampled from her REAL logo (see .tmp/zendog_research/00_EVIDENCE.md):
   sage #7A9965 (56% of logo), warm gold #FFBD59, off-white #FEFEFE.
   Audience note: her stated requirement is "older clients can use it, not too complicated".
   So: 18px base, generous line-height, large tap targets, high contrast, no motion tricks. */

:root {
  /* brand — sampled, not guessed */
  --sage: #7a9965;
  --sage-dark: #5c7a4a;
  --sage-darker: #415734;
  --sage-tint: #e8eee2;
  --sage-wash: #f4f7f0;
  --gold: #ffbd59;
  --gold-dark: #e09b2d;

  /* neutrals */
  --cream: #fbf9f4;
  --paper: #ffffff;
  --ink: #26301f;
  --ink-soft: #55604c;
  --line: #ded9cd;

  --focus: #1a4f8a;

  /* type */
  --font-body: "Nunito", ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Bricolage Grotesque", "Quicksand", var(--font-body);

  /* scale */
  --step--1: clamp(0.94rem, 0.92rem + 0.1vw, 1rem);
  --step-0: clamp(1.06rem, 1rem + 0.25vw, 1.19rem);
  --step-1: clamp(1.28rem, 1.18rem + 0.45vw, 1.55rem);
  --step-2: clamp(1.55rem, 1.36rem + 0.85vw, 2.1rem);
  --step-3: clamp(1.9rem, 1.55rem + 1.5vw, 2.9rem);
  --step-4: clamp(2.25rem, 1.7rem + 2.4vw, 3.9rem);

  --wrap: 1140px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 2px 4px rgba(38, 48, 31, 0.04), 0 8px 24px rgba(38, 48, 31, 0.07);
  --shadow-lg: 0 4px 10px rgba(38, 48, 31, 0.06), 0 18px 48px rgba(38, 48, 31, 0.11);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.15; margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p { margin: 0 0 1em; max-width: 68ch; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--sage-darker); text-underline-offset: 3px; }
a:hover { color: var(--sage-dark); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 760px); margin-inline: auto; }

.section { padding: clamp(3rem, 7vw, 6rem) 0; }
.section-tint { background: var(--sage-wash); }
.section-paper { background: var(--paper); }

.eyebrow {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--sage-dark);
  margin: 0 0 0.9rem;
}

.lead { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.5; }

/* ---------- skip link ---------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--sage-darker); color: #fff; padding: 1rem 1.5rem;
  border-radius: 0 0 var(--radius) 0; font-weight: 700;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 249, 244, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 78px; }

.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: inherit; margin-right: auto; }
.brand img { width: 52px; height: 52px; border-radius: 14px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; color: var(--sage-darker); }
.brand-sub { font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }

.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav a {
  display: inline-flex; align-items: center;
  min-height: 48px; padding: 0 0.95rem;
  border-radius: 12px; text-decoration: none;
  font-weight: 600; color: var(--ink);
}
.nav a:hover { background: var(--sage-tint); }
.nav a[aria-current="page"] { background: var(--sage-tint); color: var(--sage-darker); }

.nav-toggle { display: none; }

@media (max-width: 960px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: 52px; min-width: 52px; padding: 0 1rem;
    background: var(--paper); border: 2px solid var(--line); border-radius: 14px;
    font: inherit; font-weight: 700; cursor: pointer; color: var(--ink);
  }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 0.5rem 1.25rem 1.25rem; box-shadow: var(--shadow-lg);
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { min-height: 56px; font-size: 1.1rem; }
  .nav .btn { margin-top: 0.5rem; justify-content: center; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 56px; padding: 0 1.75rem;
  border-radius: 999px; border: 2px solid transparent;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 700;
  text-decoration: none; cursor: pointer; transition: transform 0.12s ease, background 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--sage-dark); color: #fff; }
.btn-primary:hover { background: var(--sage-darker); color: #fff; }
.btn-gold { background: var(--gold); color: #4a3410; }
.btn-gold:hover { background: var(--gold-dark); color: #3a2808; }
.btn-ghost { background: transparent; color: var(--sage-darker); border-color: var(--sage); }
.btn-ghost:hover { background: var(--sage-tint); }
.btn-lg { min-height: 64px; font-size: 1.15rem; padding: 0 2.25rem; }
.btn-block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ---------- hero ---------- */
.hero { background: linear-gradient(170deg, var(--sage-wash) 0%, var(--cream) 62%); padding: clamp(2.5rem, 6vw, 5.5rem) 0 clamp(3rem, 7vw, 6rem); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: 0.4em; }
.hero h1 .accent { color: var(--sage-dark); }
.hero .lead { margin-bottom: 1.8rem; }

.hero-card {
  background: var(--paper); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--line);
}
.hero-logo { background: var(--sage); border-radius: var(--radius-lg); padding: 1.5rem; }
.hero-logo img { border-radius: var(--radius); }

.trust-row { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.trust-item { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 0.98rem; color: var(--ink-soft); }
.trust-item svg { flex: none; color: var(--sage-dark); }

/* ---------- cards ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }

.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.4rem, 2.5vw, 2rem);
  box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.card h3 { color: var(--sage-darker); }
.card p { color: var(--ink-soft); }
.card > :last-child { margin-bottom: 0; }

.card-icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--sage-tint); color: var(--sage-darker);
  display: grid; place-items: center; margin-bottom: 1.1rem;
}

.price-tag {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.5rem; color: var(--sage-darker);
}
.price-meta { font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- steps ---------- */
.steps { counter-reset: step; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.step { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.5rem 1.4rem; }
.step::before {
  counter-increment: step; content: counter(step);
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gold); color: #4a3410;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  margin-bottom: 0.9rem;
}
.step h3 { font-size: 1.12rem; margin-bottom: 0.3em; }
.step p { font-size: 0.98rem; margin: 0; color: var(--ink-soft); }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); }
table { border-collapse: collapse; width: 100%; min-width: 520px; }
caption { text-align: left; padding: 1rem 1.25rem; font-weight: 700; font-family: var(--font-display); font-size: 1.1rem; }
th, td { text-align: left; padding: 1rem 1.25rem; border-bottom: 1px solid var(--line); }
th { background: var(--sage-wash); font-family: var(--font-display); color: var(--sage-darker); }
td.num, th.num { text-align: right; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- callout ---------- */
.callout {
  background: var(--sage-tint); border-left: 6px solid var(--sage);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.35rem 1.6rem; margin: 2rem 0;
}
.callout > :last-child { margin-bottom: 0; }
.callout-gold { background: #fff6e6; border-left-color: var(--gold-dark); }

/* ---------- cta band ---------- */
.cta-band { background: var(--sage); color: #fff; text-align: center; padding: clamp(3rem, 7vw, 5.5rem) 0; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255, 255, 255, 0.9); margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 1.75rem; }

/* ---------- footer ---------- */
.site-footer { background: var(--sage-darker); color: rgba(255, 255, 255, 0.85); padding: clamp(2.5rem, 5vw, 4rem) 0 2rem; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.site-footer h3 { color: #fff; font-size: 1.05rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.55rem; }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: 0.92rem; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; }

/* ---------- demo banner (honesty — this is a demo, never pretend otherwise) ---------- */
.demo-banner {
  background: #3d3323; color: #ffe9c2; text-align: center;
  padding: 0.7rem 1.25rem; font-size: 0.92rem; font-weight: 600;
}
.demo-banner strong { color: var(--gold); }

.demo-note {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #fff6e6; color: #7a5410; border: 1px dashed var(--gold-dark);
  border-radius: 999px; padding: 0.3rem 0.85rem;
  font-size: 0.85rem; font-weight: 700;
}

.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;
}

/* ================= services ================= */
.service-group { margin-bottom: 3rem; }
.service-group:last-child { margin-bottom: 0; }
.service-group h3 { font-size: var(--step-2); color: var(--sage-darker); margin-bottom: 0.25em; }
.service-group-blurb { color: var(--ink-soft); margin-bottom: 1.5rem; }

.service-card h4 { font-family: var(--font-display); font-size: 1.22rem; color: var(--sage-darker); margin: 0 0 0.5em; }
.service-card p { flex: 1; font-size: 0.99rem; }
.service-meta { display: flex; align-items: baseline; gap: 0.75rem; margin: 0.5rem 0 1.1rem !important; }
.service-card .btn { align-self: flex-start; min-height: 48px; padding: 0 1.25rem; font-size: 0.98rem; }

/* ================= tables ================= */
.row-group { background: var(--sage) !important; color: #fff !important; font-size: 1.05rem; }
.hours-mini { min-width: 0; width: 100%; }
.hours-mini th, .hours-mini td { padding: 0.35rem 0; border: 0; font-weight: 500; font-size: 0.95rem; background: none; color: inherit; font-family: var(--font-body); }
.hours-mini th { text-align: left; }
.hours-mini td { text-align: right; }

/* ================= gallery ================= */
.gallery-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.gal-item { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.gal-ph { aspect-ratio: 4 / 3; display: grid; place-items: center; color: var(--sage); background:
  linear-gradient(135deg, var(--sage-tint) 0%, var(--sage-wash) 100%); }
.gal-item:nth-child(3n) .gal-ph { background: linear-gradient(135deg, #fff4e0 0%, var(--cream) 100%); color: var(--gold-dark); }
.gal-item figcaption { padding: 0.9rem 1.1rem 1.1rem; font-size: 0.95rem; color: var(--ink-soft); }
.gal-item figcaption strong { color: var(--ink); }
.gal-item figcaption span { display: block; font-size: 0.85rem; color: var(--sage-dark); font-weight: 700; margin-top: 0.2rem; }

/* ================= booking wizard ================= */
.booking-shell { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(1.5rem, 4vw, 3rem); }
.bstep h2 { font-size: var(--step-2); color: var(--sage-darker); }
.bstep h2:focus { outline: none; }
.bstep-help { color: var(--ink-soft); margin-bottom: 1.75rem; }
.bstep-nav { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
.bstep-nav .btn-primary { margin-left: auto; }
@media (max-width: 560px) { .bstep-nav { flex-direction: column-reverse; } .bstep-nav .btn { width: 100%; margin-left: 0; } }

/* progress */
.progress { list-style: none; display: flex; gap: 0.35rem; margin: 0; padding: 0; overflow-x: auto; }
.progress li { flex: 1; min-width: 74px; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; }
.progress-dot { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--sage-tint); color: var(--sage-dark); font-family: var(--font-display); font-weight: 700; border: 2px solid transparent; }
.progress-label { font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); }
.progress .is-current .progress-dot { background: var(--sage-dark); color: #fff; }
.progress .is-current .progress-label { color: var(--sage-darker); }
.progress .is-done .progress-dot { background: var(--gold); color: #4a3410; }

/* choices */
.choice-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.choice { text-align: left; background: var(--sage-wash); border: 2px solid var(--line); border-radius: var(--radius); padding: 1.5rem; cursor: pointer; font: inherit; min-height: 120px; display: flex; flex-direction: column; gap: 0.4rem; transition: border-color 0.15s, background 0.15s; }
.choice:hover { border-color: var(--sage); background: var(--sage-tint); }
.choice-title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--sage-darker); }
.choice-sub { color: var(--ink-soft); font-size: 0.95rem; }

.service-group-choice { margin-bottom: 2rem; }
.service-group-choice h3 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sage-dark); margin-bottom: 0.75rem; }
.service-choice { display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.25rem; margin-bottom: 0.65rem; cursor: pointer; font: inherit; min-height: 72px; }
.service-choice:hover { border-color: var(--sage); background: var(--sage-wash); }
.sc-main { flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.sc-name { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.sc-desc { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.4; }
.sc-meta { text-align: right; flex: none; }
.sc-price { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; color: var(--sage-darker); }
.sc-time { display: block; font-size: 0.85rem; color: var(--ink-soft); }

/* days + slots */
.day-strip { display: flex; gap: 0.6rem; overflow-x: auto; padding-bottom: 0.75rem; margin-bottom: 1.5rem; -webkit-overflow-scrolling: touch; }
.day-btn { flex: none; width: 92px; min-height: 104px; background: var(--paper); border: 2px solid var(--line); border-radius: var(--radius); padding: 0.75rem 0.4rem; cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; }
.day-btn:hover:not(:disabled) { border-color: var(--sage); }
.day-btn.is-selected { border-color: var(--sage-dark); background: var(--sage-tint); }
.day-btn.is-full { opacity: 0.5; cursor: not-allowed; }
.day-name { font-size: 0.82rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.day-num { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.day-mon { font-size: 0.82rem; color: var(--ink-soft); }
.day-avail { margin-top: 0.3rem; font-size: 0.74rem; font-weight: 700; color: var(--sage-dark); }
.day-btn.is-full .day-avail { color: var(--ink-soft); }

.slot-list h3 { font-size: 1.15rem; margin-bottom: 0.9rem; }
.slot-prompt { color: var(--ink-soft); }
.slot-grid { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.slot-btn { min-height: 66px; background: var(--paper); border: 2px solid var(--line); border-radius: 14px; cursor: pointer; font: inherit; display: flex; flex-direction: column; justify-content: center; gap: 0.1rem; }
.slot-btn:hover { border-color: var(--sage-dark); background: var(--sage-tint); }
.slot-btn strong { font-family: var(--font-display); font-size: 1.22rem; color: var(--sage-darker); }
.slot-btn span { font-size: 0.8rem; color: var(--ink-soft); }

/* forms */
fieldset { border: 0; padding: 0; margin: 0 0 2rem; }
legend { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--sage-darker); padding: 0; margin-bottom: 1rem; }
.field { margin-bottom: 1.4rem; }
.field label { display: block; font-weight: 700; margin-bottom: 0.4rem; }
.optional { font-weight: 400; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 56px; padding: 0.85rem 1rem;
  font: inherit; color: var(--ink); background: var(--paper);
  border: 2px solid var(--line); border-radius: 12px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--sage-dark); }
.field.has-error input, .field.has-error select { border-color: #b3261e; background: #fff6f5; }
.hint { font-size: 0.9rem; color: var(--ink-soft); margin: 0.45rem 0 0; }

.field-error-summary { border: 3px solid #b3261e; border-radius: var(--radius); padding: 1.1rem 1.35rem; margin-bottom: 1.75rem; background: #fff6f5; }
.field-error-summary:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.field-error-summary h3 { color: #b3261e; font-size: 1.1rem; margin-bottom: 0.5em; }
.field-error-summary ul { margin: 0; padding-left: 1.2rem; }
.field-error-summary li { margin-bottom: 0.35rem; }
.field-error-summary a { color: #b3261e; font-weight: 700; }

.check { display: flex; align-items: flex-start; gap: 0.85rem; padding: 1.1rem 1.25rem; margin-bottom: 0.75rem; background: var(--sage-wash); border: 2px solid var(--line); border-radius: var(--radius); cursor: pointer; font-weight: 600; min-height: 64px; }
.check input { width: 26px; height: 26px; flex: none; margin-top: 0.15rem; accent-color: var(--sage-dark); }
.check:hover { border-color: var(--sage); }

.terms-box { background: var(--sage-wash); border-radius: var(--radius); padding: 1.35rem 1.6rem; margin-bottom: 1.75rem; }
.terms-box p { font-size: 0.97rem; margin-bottom: 0.7rem; }
.terms-box p:last-child { margin-bottom: 0; }

/* summary + payment */
.summary-card { background: var(--sage-wash); border-radius: var(--radius); padding: 1.35rem 1.6rem; margin-bottom: 1.75rem; }
.sum-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.sum-row:last-child { border-bottom: 0; }
.sum-row span { color: var(--ink-soft); }
.sum-row strong { text-align: right; }
.sum-total { border-top: 2px solid var(--sage); margin-top: 0.4rem; padding-top: 0.9rem; font-size: 1.15rem; }
.sum-total strong { color: var(--sage-darker); font-size: 1.35rem; font-family: var(--font-display); }

.pay-panel { border: 2px dashed var(--gold-dark); border-radius: var(--radius); padding: 1.5rem; background: #fffdf8; }
.pay-panel .demo-note { margin-bottom: 1.25rem; }
.pay-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pay-panel input[readonly] { background: #fff; color: var(--ink-soft); }

.done-mark { width: 74px; height: 74px; border-radius: 50%; background: var(--sage); color: #fff; display: grid; place-items: center; margin-bottom: 1.25rem; }
.happen-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.happen-list li { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.9rem 0 0.9rem 2rem; border-bottom: 1px solid var(--line); position: relative; }
.happen-list li::before { content: "✓"; position: absolute; left: 0; top: 0.9rem; color: var(--sage-dark); font-weight: 700; font-size: 1.15rem; }
.happen-list li:last-child { border-bottom: 0; }
.happen-list span { color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- her own palette, from her own Canva site ----------
   She already chose these. We were using a derived green; these are hers. */
:root {
  --sage-deep: #4d7945;   /* her headings / primary, 13 uses on her site */
  --sage-soft: #9db196;   /* her section backgrounds, 13 uses */
}

.tagline {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 1rem;
}

.creds { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0; padding: 0; list-style: none; }
.creds li {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--sage-tint); color: var(--sage-darker);
  border-radius: 999px; padding: .45rem 1rem; font-weight: 700; font-size: .95rem;
}
.creds li::before { content: "✓"; color: var(--sage-dark); }

.note-box-book { background: var(--sage-wash); border-left: 4px solid var(--sage); border-radius: 0 var(--radius) var(--radius) 0; padding: 1rem 1.2rem; margin-bottom: 1.4rem; }
.note-box-book p { margin: 0; font-size: .96rem; }

.tel-link { font-weight: 700; white-space: nowrap; }
.contact-strip {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center;
  padding: .85rem 0; border-top: 1px solid var(--line); margin-top: 1.25rem;
}

/* ================= reviews ================= */
.review { margin: 0; }
.review-stars { color: var(--gold-dark); font-size: 1.35rem; letter-spacing: .12em; margin-bottom: .6rem; }
.review blockquote { margin: 0 0 1.1rem; flex: 1; font-size: 1.02rem; line-height: 1.6; color: var(--ink); }
.review blockquote::before { content: "\201C"; }
.review blockquote::after { content: "\201D"; }
.review figcaption { display: flex; flex-direction: column; border-top: 1px solid var(--line); padding-top: .8rem; }
.review figcaption span { font-size: .88rem; color: var(--ink-soft); }

/* ================= policies ================= */
.policy-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.policy-jump a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.1rem;
  background: var(--paper); border: 2px solid var(--line); border-radius: 999px;
  text-decoration: none; font-weight: 700; font-size: .95rem;
}
.policy-jump a:hover { border-color: var(--sage); background: var(--sage-tint); }
.policy { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2.25rem); margin-bottom: 1.5rem; scroll-margin-top: 100px; }
.policy h2 { font-size: var(--step-2); color: var(--sage-darker); }
.policy > :last-child { margin-bottom: 0; }
.policy-list { padding-left: 1.2rem; margin: 0 0 1rem; }
.policy-list li { margin-bottom: .7rem; }
.policy-split { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 1.25rem 0; }
.policy-split > div { border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.policy-split h3 { font-size: 1.05rem; margin-bottom: .35em; }
.policy-split p { margin: 0; font-size: .98rem; }
.policy-yes { background: #e7f4ec; border-left: 5px solid #2f7d4f; }
.policy-yes h3 { color: #22603b; }
.policy-no { background: #fdf1e3; border-left: 5px solid #b3671e; }
.policy-no h3 { color: #8a4e14; }
.policy-aside { font-style: italic; color: var(--ink-soft); }

/* =====================================================================================
   V2 — PHONE FIRST.  Louis, 17 Sept: "the mobile version looks shit… make it hot."
   He was right: the homepage was 18 phone-screens tall, eight reviews were stacked on top of
   each other, and a phone button added that afternoon had wrecked the header. The model is
   what lanawayelectrical.co.uk gets right on a phone — clean header, immersive hero, proper
   pill buttons, a rating strip, a sticky action bar — in ZenDog's own colours. Her logo is
   white and gold on green, so that is the hero: her brand turned up, not a new one.
   ===================================================================================== */
:root {
  --forest: #2c4426;
  --forest-2: #3d5f35;
  --glow-gold: 0 10px 30px rgba(255, 189, 89, .42), 0 2px 8px rgba(255, 189, 89, .35);
  --bar-h: 64px;
}

/* ---------- demo banner ---------- */
.demo-short { display: none; }
@media (max-width: 720px) {
  .demo-banner { padding: .45rem 1rem; font-size: .8rem; }
  .demo-long { display: none; }
  .demo-short { display: inline; }
}

/* ---------- header: logo + menu, nothing else on a phone ---------- */
.header-tel {
  order: 3; display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.15rem;
  border-radius: 999px; border: 2px solid var(--sage); text-decoration: none;
  font-family: var(--font-display); font-weight: 700; color: var(--sage-darker); white-space: nowrap;
}
.header-tel:hover { background: var(--sage-tint); }
.burger { display: inline-flex; flex-direction: column; gap: 5px; }
.burger i { display: block; width: 24px; height: 3px; border-radius: 2px; background: var(--sage-darker); }
@media (max-width: 960px) {
  .header-tel, .brand-sub-long { display: none; }
  .header-inner { min-height: 64px; }
  .brand img { width: 44px; height: 44px; border-radius: 12px; }
  .brand-name { font-size: 1.3rem; }
  .nav-toggle { min-width: 48px; min-height: 48px; padding: 0; border-radius: 14px; border-color: var(--line); }
}

/* ---------- buttons ---------- */
.btn-gold, .btn-primary, .mb-book { text-transform: uppercase; letter-spacing: .05em; font-weight: 800; font-size: .98rem; }
.btn-lg.btn-gold, .btn-lg.btn-primary { font-size: 1.02rem; }
.btn-glow { box-shadow: var(--glow-gold); }
.btn-gold:hover { transform: translateY(-1px); }
.btn-outline-light { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.55); }
.btn-outline-light:hover { background: rgba(255,255,255,.16); color: #fff; }
.btn-sm { min-height: 44px; padding: 0 1.1rem; font-size: .9rem; }
@media (max-width: 640px) { .btn-block-mobile { width: 100%; } }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(120% 80% at 85% 10%, rgba(255,189,89,.16) 0%, rgba(255,189,89,0) 55%),
    linear-gradient(165deg, #4d7945 0%, var(--forest-2) 45%, var(--forest) 100%);
  padding: clamp(2.75rem, 8vw, 6.5rem) 0 clamp(4rem, 9vw, 7rem);
}
.hero-inner { position: relative; z-index: 1; max-width: 760px; margin-left: max(1.25rem, calc((100% - var(--wrap)) / 2)); }
.hero-mark {
  position: absolute; right: -14%; bottom: -6%; width: min(92vw, 640px); height: auto;
  opacity: .13; pointer-events: none; user-select: none;
}
@media (min-width: 900px) { .hero-mark { right: 2%; bottom: auto; top: 50%; transform: translateY(-50%); opacity: .16; width: 520px; } }
.hero .eyebrow { color: var(--gold); }
.hero h1 { color: #fff; font-size: clamp(2.5rem, 10.5vw, 4.4rem); line-height: 1.04; letter-spacing: -.02em; margin-bottom: .45em; }
.hero h1 .accent { color: var(--gold); }
.hero .lead { color: rgba(255,255,255,.9); font-size: clamp(1.12rem, 1rem + .6vw, 1.4rem); max-width: 34ch; margin-bottom: 1.75rem; }
@media (max-width: 640px) {
  .hero-cta { flex-direction: column; }
  .hero-cta .btn { width: 100%; }
}

/* ---------- rating strip, floating over the hero's bottom edge ---------- */
.trust-band { position: relative; z-index: 2; margin-top: -2rem; }
.trust-pill {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem .65rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: var(--shadow-lg); padding: .9rem 1.25rem; font-size: .95rem; color: var(--ink-soft);
  width: fit-content; max-width: 100%; margin-inline: auto;
}
.trust-pill strong { color: var(--ink); }
.trust-stars { color: var(--gold-dark); letter-spacing: .1em; font-size: 1.05rem; }
.trust-sep { color: var(--line); }

/* ---------- section rhythm on a phone ---------- */
.section-sub { color: var(--ink-soft); font-size: 1.08rem; margin-bottom: 1.5rem; }
.fine { font-size: .92rem; color: var(--ink-soft); margin: 1.1rem 0 0; }
.section-sage { background: linear-gradient(170deg, var(--forest-2) 0%, var(--forest) 100%); color: #fff; }
.on-dark { color: #fff; }
.eyebrow-light { color: var(--gold); }
@media (max-width: 720px) {
  .section { padding: 2.75rem 0; }
  h2 { font-size: 1.8rem; }
  .lead { font-size: 1.12rem; }
}

/* ---------- why one-to-one: icon rows, not three tall cards ---------- */
.why-list { display: grid; gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 860px) { .why-list { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.why { display: flex; gap: 1rem; align-items: flex-start; background: var(--sage-wash); border-radius: var(--radius); padding: 1.1rem 1.15rem; }
.why-ico { flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--sage-dark); color: #fff; }
.why h3 { font-size: 1.12rem; margin-bottom: .2em; color: var(--sage-darker); }
.why p { margin: 0; font-size: .98rem; color: var(--ink-soft); }

/* ---------- the rail: reviews you swipe, not reviews you scroll past ---------- */
.wrap-rail { width: 100%; max-width: calc(var(--wrap) + 2.5rem); margin-inline: auto; }
.rail-track {
  display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: .5rem 1.25rem 1rem; scroll-padding-left: 1.25rem;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-track:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; border-radius: 24px; }
.rail .review {
  flex: 0 0 84%; max-width: 400px; scroll-snap-align: start; margin: 0;
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line);
  border-radius: 22px; padding: 1.35rem 1.35rem 1.15rem; box-shadow: var(--shadow);
}
@media (min-width: 720px) { .rail .review { flex-basis: 360px; } }
.rail .review blockquote { font-size: 1rem; line-height: 1.55; }
.rail-ui { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .35rem; }
.rail-dots { display: flex; gap: .45rem; align-items: center; }
.rail-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: var(--sage); opacity: .35; cursor: pointer; transition: width .2s, opacity .2s; }
.rail-dots button[aria-current="true"] { width: 26px; opacity: 1; background: var(--sage-dark); }
.rail-btn { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--line); background: var(--paper); color: var(--sage-darker); font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding-bottom: 3px; }
.rail-btn:hover { border-color: var(--sage); }
.section-sage .rail-dots button { background: #fff; }
.section-sage .rail-dots button[aria-current="true"] { background: var(--gold); }
.section-sage .rail-btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.4); color: #fff; }
@media (max-width: 640px) { .rail-btn { display: none; } }

/* ---------- tap-to-book rows ---------- */
.svc-rows { display: grid; gap: .65rem; }
@media (min-width: 860px) { .svc-rows { grid-template-columns: 1fr 1fr; gap: .9rem; } }
.svc-row {
  display: flex; align-items: center; gap: .9rem; min-height: 76px;
  background: var(--paper); border: 2px solid var(--line); border-radius: 18px;
  padding: .9rem 1rem .9rem 1.15rem; text-decoration: none; color: var(--ink);
  transition: border-color .15s, transform .12s;
}
.svc-row:hover { border-color: var(--sage); color: var(--ink); }
.svc-row:active { transform: scale(.99); }
.svc-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.svc-row-main strong { font-family: var(--font-display); font-size: 1.08rem; }
.svc-row-main span { font-size: .88rem; color: var(--ink-soft); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.svc-row-meta { flex: none; text-align: right; display: flex; flex-direction: column; }
.svc-row-meta strong { font-family: var(--font-display); font-size: 1.3rem; color: var(--sage-darker); line-height: 1.1; }
.svc-row-meta span { font-size: .8rem; color: var(--ink-soft); white-space: nowrap; }
.svc-row-go { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: #3a2808; display: grid; place-items: center; font-size: 1.35rem; font-weight: 700; padding-bottom: 2px; }

/* ---------- how it works: a tight numbered list ---------- */
.how { list-style: none; counter-reset: how; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 760px) { .how { grid-template-columns: repeat(3, 1fr); gap: 1rem; } }
.how li { counter-increment: how; display: grid; grid-template-columns: 40px 1fr; column-gap: .9rem; align-items: center; background: var(--sage-wash); border-radius: var(--radius); padding: .85rem 1rem; }
.how li::before { content: counter(how); grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #3a2808; font-family: var(--font-display); font-weight: 800; }
.how li strong { font-family: var(--font-display); font-size: 1.04rem; }
.how li span { font-size: .9rem; color: var(--ink-soft); }

/* ---------- compact service cards (services page) ---------- */
.service-card { padding: 1.15rem 1.25rem; }
.service-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .45rem; }
.service-card-head h4 { margin: 0; font-size: 1.12rem; }
.service-card-head .price-tag { font-size: 1.35rem; flex: none; }
.service-card p { font-size: .96rem; margin-bottom: .8rem; }
.service-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.service-card .btn { align-self: auto; }
@media (max-width: 720px) {
  .service-group { margin-bottom: 2rem; }
  .service-group h3 { font-size: 1.45rem; }
  .service-group-blurb { margin-bottom: 1rem; font-size: .98rem; }
  .grid { gap: .8rem; }
}

/* ---------- price list: fits a phone instead of scrolling sideways ---------- */
@media (max-width: 720px) {
  .table-scroll table { min-width: 0; }
  .table-scroll th, .table-scroll td { padding: .8rem .85rem; }
  .table-scroll td br, .table-scroll td .price-meta { display: none; }
  .table-scroll caption { padding: .85rem; }
  .policy-jump { flex-wrap: nowrap; overflow-x: auto; margin-inline: -1.25rem; padding: 0 1.25rem .5rem; scrollbar-width: none; }
  .policy-jump::-webkit-scrollbar { display: none; }
  .policy-jump a { flex: none; }
}

/* ---------- closing band matches the hero ---------- */
.cta-band { background: linear-gradient(165deg, #4d7945 0%, var(--forest) 100%); }
.cta-band .tagline { margin-bottom: .4rem; }
@media (max-width: 640px) { .cta-band .btn-row { flex-direction: column; } .cta-band .btn { width: 100%; } }

/* ---------- sticky action bar, phones only ---------- */
.mobile-bar { display: none; }
@media (max-width: 960px) {
  .mobile-bar {
    display: grid; grid-template-columns: 1fr var(--bar-h) var(--bar-h);
    position: fixed; inset: auto 0 0; z-index: 90; height: calc(var(--bar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 24px rgba(38,48,31,.18);
  }
  .mobile-bar a { display: grid; place-items: center; text-decoration: none; }
  .mb-book { background: var(--gold); color: #3a2808; font-family: var(--font-display); }
  .mb-call { background: var(--sage-dark); color: #fff; }
  .mb-ig { background: var(--forest); color: #fff; }
  body { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
  .page-book .mobile-bar { display: none; }
  .page-book { padding-bottom: 0; }
}

/* ---------- booking: example payment options ---------- */
.pay-methods { display: grid; gap: .7rem; margin-bottom: 1rem; }
.pay-opt { min-height: 60px; border-radius: 14px; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 1.08rem; display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; }
.pay-apple { background: #000; color: #fff; }
.pay-gpay { background: #fff; color: #1f1f1f; border: 2px solid #dadce0; }
.pay-opt:disabled { opacity: .55; cursor: progress; }
.pay-or { display: flex; align-items: center; gap: .8rem; color: var(--ink-soft); font-size: .9rem; margin: .4rem 0; }
.pay-or::before, .pay-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.pay-card { border: 2px solid var(--line); border-radius: 14px; background: var(--paper); margin-bottom: .7rem; }
.pay-card > summary { min-height: 60px; padding: 0 1.1rem; display: flex; align-items: center; font-weight: 700; cursor: pointer; list-style: none; }
.pay-card > summary::-webkit-details-marker { display: none; }
.pay-card > summary::after { content: "▾"; margin-left: auto; color: var(--ink-soft); }
.pay-card[open] > summary::after { content: "▴"; }
.pay-card-body { padding: 0 1.1rem 1.1rem; }
.pay-link { background: none; border: 0; color: var(--sage-darker); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 48px; width: 100%; }
.pay-status { margin: .8rem 0 0; padding: .8rem 1rem; border-radius: 12px; background: var(--sage-tint); font-weight: 600; }
@media (max-width: 560px) {
  .progress-label { display: none; }
  .progress .is-current .progress-label { display: block; }
  .booking-shell { padding: 1.25rem 1.1rem; border-radius: 22px; }
  .choice { min-height: 96px; padding: 1.15rem; }
  .bstep .btn-primary { min-height: 60px; }
}

/* v2 polish after looking at it on a phone */
.svc-row-main strong { line-height: 1.22; }
.svc-row-main span { -webkit-line-clamp: unset; display: block; overflow: visible; }
.trust-band { background: var(--paper); }
@media (max-width: 640px) {
  .trust-sep { display: none; }
  .trust-pill { flex-direction: column; gap: .15rem; padding: .85rem 1.25rem; }
  .svc-row { padding: .8rem .85rem .8rem 1rem; gap: .7rem; }
  .svc-row-meta strong { font-size: 1.2rem; }
  .why { padding: 1rem; }
  .why p { font-size: .95rem; line-height: 1.5; }
}

/* desktop header: the phone pill I added crowded it — strapline wrapped to three clipped lines
   and the Book button broke onto two. Nothing in the header is allowed to wrap. */
.brand { flex: none; }
.brand-sub, .nav .btn, .nav a { white-space: nowrap; }
.nav .btn { min-height: 48px; padding: 0 1.3rem; font-size: .9rem; }
@media (min-width: 961px) { .nav a { padding: 0 .75rem; } .nav { margin-left: auto; } .brand { margin-right: 0; } }
@media (min-width: 961px) and (max-width: 1240px) { .header-tel, .brand-sub-long { display: none; } }

/* =====================================================================================
   V3 — BUILT TO THE RULE SHEET (research thread 10: GOV.UK, NN/g on older users, WCAG 2.2).
   Beth's one stated requirement: "older clients can use it". 80% of them will be on a phone.
   R1  body text 19px, everywhere          R2  nothing a customer reads is under 16px
   R9  text ≥ 4.5:1                        R11 borders and controls ≥ 3:1
   R12 gold is a FILL under dark text — never text, border or state on white (it is 1.66:1)
   R13 white-on-sage buttons use #556B46 (5.87:1), not her #7A9965 (3.20:1)
   R16 every target ≥ 44px                 R18 ≥ 12px between targets, 24px before destructive
   ===================================================================================== */
:root {
  --ink: #1b2118;            /* 16.4:1 on white */
  --ink-soft: #4a5545;       /*  7.9:1 */
  --sage-900: #2f3a28;       /* 11.9:1 — headings */
  --sage-700: #495b3c;       /*  7.4:1 — links */
  --sage-dark: #556b46;      /*  5.9:1 — primary button fill under a white label */
  --sage-darker: #2f3a28;
  --gold-700: #8a5a00;       /*  5.9:1 — the only gold allowed to BE text on white */
  --star: #b37400;           /*  3.7:1 — rating stars are graphics, need 3:1 */
  --edge: #6b7564;           /*  4.9:1 — input and control borders */
  --edge-soft: #8a9582;      /*  3.2:1 — card borders that are also targets */
  --error: #b3261e;
  --success: #0f7a52;
  --forest-top: #3a5c33;     /* lightest green that still gives gold small text 4.5:1 */
}

html { scroll-padding-top: 6rem; scroll-padding-bottom: 6rem; }   /* WCAG 2.4.11: focus never hides under the sticky header or bar */
body { font-size: 1.1875rem; line-height: 1.6; color: var(--ink); }
a { color: var(--sage-700); }
a:visited { color: #5b3f7a; }                                      /* R15: visited links look visited */
.btn:visited, .nav a:visited, .brand:visited, .svc-row:visited, .action:visited, .mobile-bar a:visited, .policy-jump a:visited { color: inherit; }
.btn-primary:visited, .btn-outline-light:visited { color: #fff; }
.btn-gold:visited, .mb-book:visited { color: #3a2808; }

/* R2 — the floor. Every one of these was 12–15px. */
.eyebrow, .brand-sub, .trust-item, .trust-pill, .price-meta, .step p, .hours-mini th, .hours-mini td,
.footer-bottom, .demo-note, .hint, .gal-item figcaption, .gal-item figcaption span, .review figcaption span,
.creds li, .note-box-book p, .policy-split p, .svc-row-main span, .svc-row-meta span, .why p, .how li span,
.service-card p, .fine, .btn-sm, .nav .btn, .pay-or, .policy-jump a, .terms-box p, .section-sub,
.site-footer li, .site-footer p, .table-scroll td, .table-scroll th { font-size: 1rem; }
.eyebrow { letter-spacing: .1em; }
.btn, .btn-gold, .btn-primary, .mb-book { font-size: 1.0625rem; }
.rail .review blockquote { font-size: 1.0625rem; }
.review-stars, .trust-stars { color: var(--star); }
.svc-row, .policy-jump a { border-color: var(--edge-soft); }
.nav-toggle { border-color: var(--edge); }

/* solid fallbacks under every gradient, set to the LIGHTEST stop — so contrast is judged on the
   worst case, and so an automated checker has a real colour to read */
.hero { background-color: var(--forest-top);
  background-image: radial-gradient(90% 70% at 100% 0%, rgba(255,189,89,.10) 0%, rgba(255,189,89,0) 60%),
                    linear-gradient(165deg, var(--forest-top) 0%, #33512c 50%, var(--forest) 100%); }
.section-sage { background-color: var(--forest-top); background-image: linear-gradient(170deg, var(--forest-top) 0%, var(--forest) 100%); }
.cta-band { background-color: var(--forest-top); background-image: linear-gradient(165deg, var(--forest-top) 0%, var(--forest) 100%); }
.site-footer { background: var(--sage-900); }
.mb-call { background: var(--sage-dark); }

/* menu button says "Menu" — an unlabelled hamburger is a known failure with older users */
.nav-toggle { gap: .6rem; padding: 0 .9rem; min-width: 0; font-size: 1.0625rem; color: var(--ink); }
.nav-toggle .burger i { width: 22px; }

/* carousel: swiping can never be the only way through it (WCAG 2.5.7) — arrows stay on phones,
   at 48px, and the dots become a position indicator rather than nine-pixel buttons */
@media (max-width: 640px) { .rail-btn { display: grid; } }
.rail-btn { width: 48px; height: 48px; }
.rail-dots span { width: 9px; height: 9px; border-radius: 999px; background: #fff; opacity: .4; transition: width .2s, opacity .2s; }
.rail-dots span[data-on="true"] { width: 26px; opacity: 1; background: var(--gold); }
.section-paper .rail-dots span { background: var(--sage-dark); }
.section-paper .rail-dots span[data-on="true"] { background: var(--sage-900); }
.section-paper .rail-btn { border-color: var(--edge); }

/* ---------- flow pages: booking, your booking, review ---------- */
.page-flow .mobile-bar { display: none; }
.page-flow { padding-bottom: 0; }
.flow { background: var(--paper); min-height: 70vh; padding: 1rem 0 4rem; }
.wrap-flow { width: min(100% - 2.5rem, 640px); margin-inline: auto; }
.flow-top { display: flex; align-items: center; min-height: 48px; margin-bottom: .25rem; }
.back-link { min-height: 48px; padding: 0 1rem 0 0; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; color: var(--sage-700); text-decoration: underline; text-underline-offset: 3px; }
.flow-step { margin: 0 0 0 auto; color: var(--ink-soft); font-size: 1rem; }
.screen h1 { font-size: clamp(1.75rem, 6.4vw, 2.4rem); margin-bottom: .5em; color: var(--sage-900); }
.screen h1:focus, .slot-heading:focus { outline: none; }
.screen-help { color: var(--ink-soft); margin-bottom: 1.5rem; }
.h-small { font-size: 1.3rem; margin: 2.25rem 0 .75rem; color: var(--sage-900); }
.group-title { font-size: 1.2rem; margin: 2rem 0 .7rem; color: var(--sage-900); }
.group-title:first-child { margin-top: 0; }
.btn-wide { width: 100%; }
@media (min-width: 640px) { .btn-wide { width: auto; min-width: 17rem; } }
.stack { display: grid; gap: .9rem; margin: 1.5rem 0; justify-items: start; }
.stack > * { width: 100%; }
@media (min-width: 640px) { .stack > * { width: auto; } }

.pick-row, .action {
  display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left; cursor: pointer;
  min-height: 72px; padding: 1rem; margin: 0; font: inherit; color: var(--ink); text-decoration: none;
  background: var(--paper); border: 2px solid var(--edge-soft); border-radius: 16px;
}
.pick-row { margin-bottom: .75rem; }
.pick-row:hover, .action:hover { border-color: var(--sage-dark); background: var(--sage-wash); color: var(--ink); }
.pick-main, .action-main { flex: 1; min-width: 0; }
.pick-main strong, .action-main strong { display: block; font-family: var(--font-display); font-size: 1.1875rem; line-height: 1.25; }
.pick-main span, .action-main span { display: block; font-size: 1rem; color: var(--ink-soft); line-height: 1.4; margin-top: .2rem; }
.pick-meta { flex: none; text-align: right; }
.pick-meta strong { display: block; font-family: var(--font-display); font-size: 1.35rem; color: var(--sage-900); }
.pick-meta span { font-size: 1rem; color: var(--ink-soft); white-space: nowrap; }
.action-list { display: grid; gap: .75rem; margin: 0 0 1.5rem; }
.action-go { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--gold); color: #3a2808; display: grid; place-items: center; font-size: 1.4rem; font-weight: 700; padding-bottom: 2px; }

/* forms */
.page-flow .field { margin-bottom: 1.6rem; border: 0; padding: 0; min-width: 0; }
.page-flow .field label, .label { display: block; font-weight: 700; font-size: 1.1875rem; margin: 0 0 .3rem; padding: 0; color: var(--ink); }
.page-flow .hint { margin: 0 0 .5rem; color: var(--ink-soft); }
.page-flow .field input, .page-flow .field textarea {
  width: 100%; min-height: 56px; padding: .8rem .9rem; font: inherit; font-size: 1.1875rem; color: var(--ink);
  background: var(--paper); border: 2px solid var(--edge); border-radius: 10px;
}
.page-flow .field input:focus, .page-flow .field textarea:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--ink); }
.field-short input { max-width: 9rem; }
.field-mid input { max-width: 19rem; }
.optional { font-weight: 400; color: var(--ink-soft); }
.has-error { border-left: 5px solid var(--error) !important; padding-left: 1rem !important; }
.has-error input, .has-error textarea { border-color: var(--error); }
.field-err { color: var(--error); font-weight: 700; margin: 0 0 .5rem; }
.field-err::before { content: "⚠ "; }
.error-summary { border: 4px solid var(--error); border-radius: 12px; padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; }
.error-summary:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.error-summary h2 { font-size: 1.35rem; margin-bottom: .4em; color: var(--ink); }
.error-summary ul { margin: 0; padding-left: 1.2rem; }
.error-summary li { margin-bottom: .4rem; }
.error-summary a { color: var(--error); font-weight: 700; }

/* chips: static buttons instead of a dropdown (GOV.UK: select is "a last resort") */
.chips { display: flex; flex-wrap: wrap; gap: .75rem; }
.chips-stack { flex-direction: column; }
.chip { position: relative; display: block; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: flex; align-items: center; min-height: 52px; padding: .4rem 1.15rem; border: 2px solid var(--edge); border-radius: 999px; background: var(--paper); font-weight: 600; }
.chips-stack .chip span { border-radius: 14px; }
.chip input:checked + span { background: var(--sage-900); border-color: var(--sage-900); color: #fff; }
.chip input:checked + span::before { content: "✓"; margin-right: .5rem; font-weight: 800; }   /* R14: not colour alone */
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

.page-flow .check { display: flex; align-items: flex-start; gap: .85rem; min-height: 60px; padding: 1rem 1.1rem; margin-bottom: .75rem; background: var(--paper); border: 2px solid var(--edge); border-radius: 14px; font-weight: 600; cursor: pointer; }
.page-flow .check input { flex: none; width: 28px; height: 28px; margin: .1rem 0 0; accent-color: var(--sage-900); }

/* month grid + slot list */
.cal-nav-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.cal-step { min-height: 48px; padding: 0 .9rem; border: 2px solid var(--edge); border-radius: 12px; background: var(--paper); font: inherit; font-size: 1rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.cal-step:disabled { opacity: .35; cursor: not-allowed; }
.cal-month { flex: 1; margin: 0; text-align: center; font-size: 1.2rem; color: var(--sage-900); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-grid.is-loading { opacity: .5; }
@media (max-width: 420px) { .cal-grid { margin-inline: -1.25rem; gap: 0; } }      /* full-bleed so 7 cells stay ≥44px down to 320px */
.cal-dow { text-align: center; font-size: 1rem; font-weight: 700; color: var(--ink-soft); padding: .3rem 0; }
.cal-day { min-height: 48px; min-width: 44px; padding: 0; border: 0; background: none; font: inherit; font-size: 1.1rem; cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.cal-day span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 2px solid transparent; }
.cal-day.is-open span { background: var(--sage-tint); border-color: var(--sage-dark); font-weight: 800; }
.cal-day:disabled { cursor: not-allowed; }
.cal-day:disabled span { color: var(--edge); text-decoration: line-through; }
.cal-day.is-chosen span { background: var(--sage-900); border-color: var(--sage-900); color: #fff; }
.cal-key, .cal-rule { font-size: 1rem; color: var(--ink-soft); margin: .8rem 0 0; }
.cal-key-yes, .cal-key-no { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: .95rem; vertical-align: middle; margin-right: .25rem; }
.cal-key-yes { background: var(--sage-tint); border: 2px solid var(--sage-dark); font-weight: 800; color: var(--ink); }
.cal-key-no { color: var(--edge); text-decoration: line-through; }
.slot-heading { font-size: 1.3rem; margin: 1.75rem 0 .75rem; color: var(--sage-900); }
.slot-stack { display: grid; gap: .75rem; }
.slot-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 60px; padding: 0 1.15rem; border: 2px solid var(--sage-dark); border-radius: 14px; background: var(--paper); font: inherit; color: var(--ink); cursor: pointer; }
.slot-row:hover { background: var(--sage-tint); }
.slot-row strong { font-family: var(--font-display); font-size: 1.25rem; }
.slot-row span { font-size: 1rem; color: var(--ink-soft); }
.slot-prompt { color: var(--ink-soft); margin-top: 1.25rem; }

/* check-your-answers rows */
.answers { margin: 0 0 1.25rem; border-top: 1px solid var(--line); }
.answer { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: start; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.answer dt { grid-column: 1 / -1; font-size: 1rem; font-weight: 700; color: var(--ink-soft); }
.answer dd { margin: 0; overflow-wrap: anywhere; }
.answer-change { text-align: right; }
.change-link { min-height: 44px; min-width: 44px; padding: 0 .1rem; background: none; border: 0; font: inherit; font-weight: 700; color: var(--sage-700); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.answer-money { grid-template-columns: 1fr auto; align-items: baseline; }
.answer-money dt { grid-column: auto; color: var(--ink); font-weight: 600; font-size: 1.1875rem; }
.answer-due dt, .answer-due dd { font-weight: 800; }
.answer-due dd { font-family: var(--font-display); font-size: 1.45rem; color: var(--sage-900); }
.terms-list { margin: 0 0 1rem; padding-left: 1.25rem; }
.terms-list li { margin-bottom: .65rem; }

/* pay */
.page-flow .pay-methods { display: grid; gap: .9rem; margin: 1.25rem 0; }
.pay-opt { min-height: 64px; font-size: 1.1875rem; }
.pay-plain { background: var(--paper); color: var(--ink); border: 2px solid var(--edge); }

/* confirmation + ticket */
.done-kicker { margin: 0 0 .3rem; font-size: 1rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-700); }
.done-panel, .ticket { color: #fff; border-radius: 24px; padding: 1.5rem; margin-bottom: 1.5rem; background-color: var(--forest-top); background-image: linear-gradient(165deg, var(--forest-top) 0%, var(--forest) 100%); }
.done-panel .done-kicker { color: var(--gold); }
.done-panel h1, .ticket h1 { color: #fff; font-size: clamp(1.6rem, 6vw, 2.1rem); margin-bottom: .35em; }
.done-ref { margin: 0; }
.done-ref strong { display: block; font-family: var(--font-display); font-size: 1.7rem; letter-spacing: .06em; }
.ticket-status { display: inline-flex; align-items: center; min-height: 34px; padding: 0 .9rem; margin: 0 0 .8rem; border-radius: 999px; font-size: 1rem; font-weight: 800; }
.ticket-status.is-on { background: var(--gold); color: #3a2808; }
.ticket-status.is-on::before { content: "✓ "; white-space: pre; }
.ticket-status.is-done { background: #fff; color: var(--sage-900); }
.ticket-status.is-off { background: #fdeceb; color: var(--error); }
.ticket-date { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.2; }
.ticket-time { margin: .1rem 0 0; font-size: 1.3rem; }
.ticket-svc { margin: .6rem 0 0; }
.ticket-ref { margin: .8rem 0 0; font-size: 1rem; }
.danger-zone { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }   /* R18: 24px+ before anything destructive */
.btn-danger { background: var(--paper); color: var(--error); border: 2px solid var(--error); }
.btn-danger:hover { background: #fdeceb; color: var(--error); }
.callout-warn { background: #fdf1e3; border-left-color: var(--gold-700); }
.callout-warn .btn { margin-top: .25rem; }
.flash { background: #e7f4ec; border-left: 5px solid var(--success); border-radius: 0 12px 12px 0; padding: .9rem 1.1rem; margin-bottom: 1rem; font-weight: 700; }
.demo-controls { margin: 3rem 0 0; padding: 1rem 1.15rem 1.25rem; border: 2px dashed var(--gold-700); border-radius: 16px; background: #fffaf0; min-width: 0; }
.demo-controls legend { padding: 0 .4rem; font-size: 1rem; font-weight: 800; color: var(--gold-700); }
.demo-controls p { font-size: 1rem; margin-bottom: .75rem; }
.demo-note { color: var(--gold-700); border-color: var(--gold-700); }

/* rule-sheet fixes, 19 Sept — found by measurement, not by eye */
:root { --star: #946100; }                                   /* stars are glyphs, so they meet the TEXT bar: 5.3:1 */
.tagline { color: var(--gold-700); }                          /* gold on white was 1.66:1 */
.site-footer .tagline, .cta-band .tagline, .hero .tagline { color: var(--gold); }
.row-group { background: var(--sage-dark) !important; }       /* white on her #7A9965 was 3.20:1 */
.service-group-blurb, .service-card .btn, .service-card .btn-sm { font-size: 1rem; }
.page-manage .flow-top:has(> .back-link[hidden]) { display: none; }
.page-manage .flow { padding-top: 1.5rem; }

/* returning customers */
.been-before { background: var(--sage-wash); border: 2px solid var(--edge-soft); border-radius: 16px; padding: 1.1rem 1.15rem 1.25rem; margin-bottom: 1.75rem; }
.been-before p { margin: 0 0 .9rem; }
.fine .back-link { padding: 0; font-size: 1rem; text-align: left; }
#dog-choices .pick-row { min-height: 80px; }

/* =====================================================================================
   V4 — the seven-lens audit (19 Sept 2026). Each rule below answers a measured finding.
   ===================================================================================== */

/* a two-line button label used to sit left-aligned inside a centred pill */
.btn { text-align: center; }
.btn-wide, .btn-lg { white-space: normal; padding-block: .55rem; line-height: 1.25; }

/* R1: the copy people must READ to book is body copy — 19px, not 16 */
.pick-main span, .action-main span, .page-flow .hint, .screen-help, .terms-list li, .service-card p, .svc-row-main span { font-size: 1.1875rem; line-height: 1.45; }
.pick-main .pick-size, .size-band { display: inline-block; margin: .3rem 0 .1rem; padding: .1rem .6rem; border-radius: 999px; background: var(--sage-wash); border: 1px solid var(--edge-soft); color: var(--sage-900); font-size: 1rem; font-style: normal; font-weight: 700; }
p.size-band { margin: 0 0 .6rem; }

/* step 1 was 5.4 screens with no way to jump */
.jump-row { display: flex; gap: .5rem; overflow-x: auto; margin: 0 -1.25rem 1.25rem; padding: .25rem 1.25rem .6rem; scrollbar-width: none; position: sticky; top: 0; z-index: 5; background: var(--cream); }
.jump-row::-webkit-scrollbar { display: none; }
.jump-chip { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 2px solid var(--edge); border-radius: 999px; background: var(--paper); color: var(--ink); font-weight: 700; font-size: 1rem; text-decoration: none; white-space: nowrap; }
.jump-chip:hover { border-color: var(--sage-dark); color: var(--ink); }
.group-title { scroll-margin-top: 4.5rem; }
.group-blurb { margin: -.35rem 0 .9rem; color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.45; }
#extras-included { margin-bottom: 1rem; }
.group-title:focus { outline: none; }

/* extras: two big tick boxes that ride on a groom */
.check-extra { align-items: center; }
.check-extra strong { font-family: var(--font-display); font-size: 1.1875rem; }
.extra-price { display: block; font-weight: 600; color: var(--ink-soft); font-size: 1.0625rem; }

/* kept-progress notice, errors that are not field errors */
.flash p { margin: 0; max-width: none; }
.flash-kept { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; }
.flash-kept .back-link { min-height: 44px; }
.flash-error { background: #fdeceb; border-left-color: var(--error); color: var(--ink); }

/* answers */
.answer-note { display: inline-block; font-size: 1rem; color: var(--ink-soft); }
.answer-paid dd::before { content: "✓ "; white-space: pre; color: var(--success); }
.answer-due .dd-words { font-family: var(--font-body); font-size: 1.1875rem; font-weight: 700; text-align: right; }

/* manage: the ticket holds its height while loading, so nothing jumps under a thumb */
.ticket { min-height: 236px; }
.ticket.is-loading { display: grid; place-items: center; }
.ticket-loading { margin: 0; font-size: 1.1875rem; font-weight: 700; color: #fff; opacity: .9; }
.ticket.is-cancelled { background-image: none; background-color: #55584f; }
.ticket.is-cancelled .ticket-date, .ticket.is-cancelled .ticket-time, .ticket.is-cancelled .ticket-svc { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .85; }
.ticket-status.is-wait { background: #fff; color: #7a4a00; }
.ticket-status.is-wait::before { content: "⏳ "; white-space: pre; }
.ticket-status.is-off::before { content: "✕ "; white-space: pre; }

/* focus you can SEE on the dark green: white ring, then the blue one outside it */
.done-panel :focus-visible, .ticket :focus-visible, .site-footer :focus-visible, .hero :focus-visible, .section-sage :focus-visible,
.cta-band :focus-visible, .mobile-bar :focus-visible, .demo-banner :focus-visible {
  outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 7px var(--focus);
}

/* prices at 320px (iPhone Display Zoom): the Time column folds under the name instead of clipping the price */
.price-time { display: none; }
@media (max-width: 420px) {
  .col-time { display: none; }
  .price-time { display: block; font-size: 1rem; color: var(--ink-soft); font-weight: 600; }
  .table-scroll th, .table-scroll td { padding: .75rem .7rem; }
  .table-scroll td:first-child { overflow-wrap: anywhere; }
  td.num, th.num { white-space: nowrap; }
}

/* large text / narrow screens: the calendar header wraps instead of crushing the month */
.cal-nav-row { flex-wrap: wrap; }
.cal-month { min-width: 9ch; }
@media (max-width: 360px) { .cal-month { order: -1; flex-basis: 100%; } .cal-step { flex: 1; } }

/* `hidden` must always win. `.action{display:flex}` was beating it, so a home-visit customer was still offered
   directions to the salon. (Third time this class of bug has bitten: login screen, demo strip, now this.) */
[hidden] { display: none !important; }

/* the action bar at 320px (iPhone Display Zoom): "BOOK AN APPOINTMENT" wrapped to two left-aligned, clipped lines */
.mb-book { text-align: center; padding: 0 .5rem; line-height: 1.15; }
.mb-short { display: none; }
@media (max-width: 380px) { .mb-long { display: none; } .mb-short { display: inline; } }

.flow-what { margin: -.4rem 0 1.1rem; padding: .55rem .9rem; border-radius: 12px; background: var(--sage-wash); border: 1px solid var(--edge-soft); color: var(--sage-900); font-weight: 700; font-size: 1.0625rem; }
.flow-help { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 1.0625rem; }
.flow-help a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }


/* ==========================================================================
   Beth's colours, taken from her own social post (27 Sep 2026, Matouš):
   sage paper #B8C1A5 with a grain, her deep green lettering #4E6A56, white.
   Only the dark forest bands and the gold buttons of the demo change; the
   layout, the pages and the words are the demo's.
   Contrast: #4E6A56 on the sage is 3.2:1, so it is used for big headings only;
   smaller text on the sage is #33483A (5.3:1) or ink #2E2A26 (7.6:1); white
   on #4E6A56 buttons and footer is 6.0:1. White text on the sage itself would
   be 1.8:1, so the post's white lines become deep green here.
   ========================================================================== */
:root {
  --beth-sage: #B8C1A5;
  --beth-green: #4E6A56;
  --beth-green-deep: #33483A;
  --beth-ink: #2E2A26;
  --beth-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero, .section-sage, .cta-band, .done-panel, .ticket {
  background-color: var(--beth-sage);
  background-image: var(--beth-grain);
  color: var(--beth-ink);
}
.hero .eyebrow, .eyebrow-light, .cta-band .tagline { color: var(--beth-green-deep); }
.hero h1 { color: var(--beth-green); }
.hero h1 .accent { color: var(--beth-green-deep); }
.hero .lead { color: var(--beth-ink); }
.section-sage h2, .section-sage h3, .cta-band h2 { color: var(--beth-green); }
.section-sage p, .cta-band p { color: var(--beth-ink); }
.section-sage .rail-dots button { background: rgba(51, 72, 58, 0.3); }
.section-sage .rail-dots button[aria-current="true"] { background: var(--beth-green-deep); }
.section-sage .rail-btn { background: rgba(255, 255, 255, 0.4); border-color: var(--beth-green-deep); color: var(--beth-green-deep); }
.done-panel, .ticket { color: var(--beth-ink); }

.btn-gold, .mb-book { background: var(--beth-green); color: #fff; }
.btn-gold:hover, .mb-book:hover { background: var(--beth-green-deep); color: #fff; }
.btn-gold:visited, .mb-book:visited { color: #fff; }
.btn-glow { box-shadow: none; }
.btn-outline-light { background: rgba(255, 255, 255, 0.3); color: var(--beth-green-deep); border-color: var(--beth-green-deep); }
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.55); color: var(--beth-green-deep); }
.btn-outline-light:visited { color: var(--beth-green-deep); }

.site-footer { background: var(--beth-green); }

/* Her dogs, cut from the same post, peeking up from the bottom of the band. */
.hero, .cta-band { position: relative; overflow: hidden; padding-bottom: 0; }
.beth-dogs { display: block; width: 100%; max-width: 620px; height: auto; margin: 2rem auto 0; pointer-events: none; }
.hero .hero-mark { display: none; }
@media (min-width: 900px) {
  .hero { padding-bottom: 0; min-height: 34rem; }
  .hero .beth-dogs { position: absolute; right: 2%; bottom: 0; width: 46%; max-width: 620px; margin: 0; }
  .hero-inner { padding-bottom: clamp(3rem, 7vw, 6rem); }
}

/* Gallery: her photographs fill the demo's picture frames. */
.gal-photo { background: var(--sage-tint); }
.gal-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Her colours on the last gold bits: the step numbers and the ZEN tagline. */
.how li::before { background: var(--beth-sage); color: var(--beth-green-deep); }
.step::before { background: var(--beth-sage); color: var(--beth-green-deep); }
.tagline { color: var(--beth-green-deep); }
.site-footer .tagline, .site-footer p.tagline { color: #fff; }

/* The demo's header phone button did not fit beside the menu under 1600 px and pushed the
   whole page sideways (1453 px wide at 1280). The number is in the hero, the phone bar
   and the footer, so the header drops it until there is room. */
@media (min-width: 900px) and (max-width: 1599px) { .header-tel { display: none; } }

/* Photos fill the demo's 4:3 frames instead of stretching them. */
.gal-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.gal-photo img { position: absolute; inset: 0; }

/* The phone's bottom bar: book in her green, call and Instagram in the deeper green. */
.mb-call, .mb-ig { background: var(--beth-green-deep); color: #fff; }
.mb-ig { border-left: 1px solid rgba(255, 255, 255, 0.25); }

/* ==========================================================================
   Fixes Matouš picked (27 Sep 2026), look unchanged otherwise.
   ========================================================================== */
/* The header's Book now kept the demo's dark text (.nav a wins over .btn-gold):
   2.76:1 on the green. White is 6.0:1. */
.nav a.btn-gold, .nav a.btn-gold:visited, .nav a.btn-gold:hover { color: #fff; }

/* Footer links and the phone number were 22 px tall on a phone: a finger needs 44. */
.site-footer li { margin-bottom: 0; }
.site-footer li a, .site-footer a.tel-link, .site-footer a.mail-link { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer a.mail-link { overflow-wrap: anywhere; }

/* House rule (CLAUDE.md 8b): capitals keep normal letter-spacing. */
.eyebrow, .brand-sub, .btn-gold, .btn-primary, .mb-book, .service-group-choice h3,
.day-name, .done-kicker { letter-spacing: normal; }

/* House rule (CLAUDE.md 8a): an even border all round instead of a stripe down the left. */
.note-box-book, .flash { border-left: 0; border: 1px solid var(--sage); border-radius: var(--radius); }
.policy-yes { border-left: 0; border: 1px solid #2f7d4f; border-radius: var(--radius); }
.policy-no { border-left: 0; border: 1px solid #b3671e; border-radius: var(--radius); }
.has-error { border-left: 0 !important; border: 2px solid var(--error) !important; border-radius: var(--radius); padding-left: 1rem !important; }
.callout { border-left: 0; border: 1px solid var(--sage); border-radius: var(--radius); }
.site-footer li a { min-width: 44px; }
#r-manage, .fine > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }

/* Header (Matouš, 27 Sep 2026): just her dog head logo and the name, bigger, no tagline. */
.brand img { width: 76px; height: auto; border-radius: 0; }
.brand-name { font-size: 1.75rem; }
@media (max-width: 960px) { .brand img { width: 62px; height: auto; border-radius: 0; } .brand-name { font-size: 1.5rem; } }

/* Reviews with the reviewer's face (27 Sep 2026). Google reviews carry the photo Google
   shows; where Google shows only a coloured letter, so do we. Facebook has no stars, so
   those say "Recommends ZenDog" instead of five stars they were never given. */
.review figcaption { flex-direction: row; align-items: center; gap: .8rem; }
.review-who { display: flex; flex-direction: column; min-width: 0; }
.review-who a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.review-avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; object-fit: cover; }
.review-initial { display: inline-grid; place-items: center; background: var(--beth-sage); color: var(--beth-green-deep); font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; }
.review-rec { font-weight: 700; color: var(--beth-green-deep); margin-bottom: .6rem; font-size: 1rem; }
/* Long reviews are shown whole but folded to eight lines; the full text is one tap away. */
.review blockquote { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
.review blockquote.open { display: block; }
.review-more { background: none; border: 0; padding: 0; margin: -.6rem 0 1rem; color: var(--beth-green-deep); font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 44px; align-self: flex-start; }
/* The review dots are spans with data-on (the button rules above never matched them). */
.section-sage .rail-dots span { background: rgba(51, 72, 58, 0.3); }
.section-sage .rail-dots span[data-on="true"] { background: var(--beth-green-deep); }
/* 🚨 A folded review must not stretch: with flex:1 a card beside an opened one grew taller,
   and the browser drew the lines past the fold after its "…", which read as if words were
   cut out of the middle of a real review. Folded text keeps its own height; the name is
   pushed to the bottom of the card instead. */
.review blockquote { flex: 0 0 auto; }
.review blockquote:not(.open) { max-height: calc(1.55em * 8); }
.review figcaption { margin-top: auto; }

/* Rating strip (Matouš, 27 Sep 2026): a straight full-width strip under the hero instead of
   a rounded box half over its edge, whose corners sat badly on the straight edge. */
.trust-band { margin-top: 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.trust-pill {
  width: 100%; max-width: none; border: 0; border-radius: 0; box-shadow: none; background: transparent;
  padding: 1rem 0; flex-direction: row; flex-wrap: wrap; gap: .35rem 1rem;
}
@media (max-width: 640px) {
  .trust-pill { flex-direction: row; padding: .85rem 0; gap: .25rem .75rem; }
  .trust-pill .trust-stars { flex-basis: 100%; text-align: center; }
}

/* Beth's own photos (sent by Matouš, 27 Sep 2026): her at work with dogs. */
.beth-photo { margin: 0; border-radius: var(--radius-lg, 20px); overflow: hidden; border: 1px solid var(--line); background: var(--sage-tint); }
.beth-photo img { display: block; width: 100%; height: auto; }
.physio-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) {
  .physio-grid { grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center; }
  .physio-grid .beth-photo { max-width: 420px; justify-self: end; }
}

/* The demo's purple for visited links (#5b3f7a) is near invisible on the green footer
   (Matouš, 27 Sep 2026): links on the green bands keep their own colour once clicked. */
.site-footer a:visited, .site-footer a.tel-link:visited, .site-footer a.mail-link:visited { color: #fff; }
.section-sage a:not(.btn):visited, .cta-band a:not(.btn):visited, .hero a:not(.btn):visited { color: var(--beth-green-deep); }
.review-who a:visited { color: var(--ink-soft); }

/* ==========================================================================
   Booking, step 1 redesign (27 Sep 2026): one decision per screen, like an iOS
   grouped list. Level 1 is the kinds of service, level 2 the options of one kind.
   ========================================================================== */
.page-book .mobile-bar { display: none; }
.page-book .jump-row { display: none; }

.kind-list { border: 1px solid var(--line); border-radius: 16px; background: var(--paper); overflow: hidden; }
.kind-row {
  display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 60px; padding: .9rem 1.1rem;
  background: none; border: 0; border-top: 1px solid var(--line); text-align: left; cursor: pointer;
  font: inherit; color: var(--ink);
}
.kind-row:first-child { border-top: 0; }
.kind-name { flex: 1; font-weight: 700; font-size: 1.125rem; }
.kind-price { color: var(--ink-soft); font-size: 1rem; white-space: nowrap; }
.kind-go { color: var(--ink-soft); font-size: 1.5rem; line-height: 1; }
@media (hover: hover) { .kind-row:hover { background: var(--sage-wash); } }
.kind-row:active { background: var(--sage-tint); }
.kind-back { margin: -.25rem 0 .75rem; }

.opt-group { border: 0; margin: 0 0 1.25rem; padding: 0; }
.opt-legend { font-weight: 700; font-size: 1rem; color: var(--ink); margin-bottom: .5rem; padding: 0; }
.opt-group > .opt-row { border: 1px solid var(--line); border-top-width: 0; background: var(--paper); }
.opt-group > .opt-row:first-of-type { border-top-width: 1px; border-radius: 16px 16px 0 0; }
.opt-group > .opt-row:last-of-type { border-radius: 0 0 16px 16px; }
.opt-group > .opt-row:only-of-type { border-radius: 16px; }
.opt-row { display: flex; align-items: center; gap: .85rem; min-height: 60px; padding: .8rem 1.1rem; cursor: pointer; }
.opt-row input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--beth-green); }
.opt-name { flex: 1; font-size: 1.0625rem; color: var(--ink); }
.opt-meta { display: flex; flex-direction: column; align-items: flex-end; font-size: .9375rem; color: var(--ink-soft); white-space: nowrap; }
.opt-meta strong { color: var(--ink); font-size: 1.0625rem; }
.opt-row:has(input:checked) { background: var(--sage-wash); }
.opt-row:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }

.included { margin: -.5rem 0 1.25rem; }
.included summary { cursor: pointer; font-weight: 700; color: var(--beth-green-deep); min-height: 44px; display: flex; align-items: center; }
.included p { margin: .25rem 0 0; color: var(--ink-soft); }

/* The choice and its price stay in view with the one button that moves on. */
.svc-bar {
  position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; gap: 1rem;
  margin: 1.5rem -1.25rem 0; padding: .75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.svc-bar-text { flex: 1; margin: 0; color: var(--ink-soft); font-size: 1rem; }
.svc-bar-text strong { color: var(--ink); font-size: 1.1875rem; }
.svc-bar .btn { min-width: 9.5rem; }
.svc-bar .btn[disabled] { opacity: .45; cursor: not-allowed; }
@media (min-width: 700px) { .svc-bar { margin-inline: 0; border: 1px solid var(--line); border-radius: 16px; bottom: 1rem; } }
.included summary { list-style: none; gap: .5rem; }
.included summary::-webkit-details-marker { display: none; }
.included summary::before { content: "›"; display: inline-block; font-size: 1.4rem; line-height: 1; transition: transform .15s; }
.included[open] summary::before { transform: rotate(90deg); }
.kind-back { display: inline-flex; margin: 0 0 .5rem; }
.done-kicker { color: var(--beth-green-deep); }

/* The logo is also the way home: a full finger sized target. */
.brand { min-height: 44px; }

/* ==========================================================================
   Services & prices and Contact (redesign 27 Sep 2026): a price list like a
   café menu, in the same grouped rows as the booking. No bubbles, no cards.
   ========================================================================== */
.page-services .policy-jump { display: none; }
.price-group { padding: 0 0 2.25rem; margin-bottom: 2.25rem; border-bottom: 1px solid var(--line); }
.price-group:last-of-type { border-bottom: 0; }
.price-group h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); margin: 0 0 .35rem; }
.price-lead { color: var(--ink-soft); margin: 0 0 1rem; max-width: 60ch; }
.price-list { list-style: none; margin: 0 0 .75rem; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); overflow: hidden; }
.price-row { display: flex; align-items: center; gap: 1rem; min-height: 56px; padding: .75rem 1.1rem; border-top: 1px solid var(--line); }
.price-row:first-child { border-top: 0; }
.price-name { flex: 1; color: var(--ink); font-size: 1.0625rem; }
.price-note { color: var(--ink-soft); font-size: .9375rem; }
.price-amt { display: flex; align-items: baseline; gap: .6rem; white-space: nowrap; color: var(--ink-soft); font-size: 1rem; text-align: right; }
.price-amt strong { color: var(--ink); font-size: 1.125rem; }
.price-amt a { color: var(--beth-green-deep); white-space: normal; }
.price-book { margin-top: .25rem; }
.price-group .included { margin: 0 0 .75rem; }
.price-group .included p { margin: .5rem 0 0; max-width: 65ch; }
.price-foot { margin-top: 0; }

.contact-actions { margin-top: 1.5rem; }
.contact-grid { display: grid; gap: 2rem; }
.h-list { font-size: 1.25rem; margin: 0 0 .75rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.2fr 1fr; gap: 3rem; max-width: 1040px; } }
@media (max-width: 560px) {
  .price-row { flex-wrap: wrap; gap: .25rem 1rem; }
  .contact-grid .price-amt { white-space: normal; }
}

@media (min-width: 900px) { .contact-grid { margin-inline: auto; } }

/* Links in a list row: the whole row height is the target. */
.price-amt a { display: inline-flex; align-items: center; min-height: 44px; }

/* Two actions, one row, equal width on a phone. */
@media (max-width: 640px) { .contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } .contact-actions .btn { width: 100%; padding-inline: .75rem; font-size: 1rem; } }

/* The dot between facts in the rating strip is text too: readable grey. */
.trust-sep { color: var(--ink-soft); }
/* "Google review" under a name is a link: finger sized. */
.review-who a { display: inline-flex; align-items: center; min-height: 44px; }

/* Beth's IG bio in the hero, physio beside it (Matouš picked C + G in the design lab, 29 Sep 2026):
   a card in the hero's empty top right from 1100 px, a tappable dark strip under the dogs below
   that (next to the headline the card would not fit). */
.hero .lead { text-wrap: pretty; }
.physio-ico { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--beth-sage); color: var(--beth-green-deep); flex: none; }
.physio-card { display: none; }
@media (min-width: 1100px) {
  .physio-card {
    display: block; position: absolute; z-index: 1; top: 5.5rem; right: max(1.25rem, calc((100% - var(--wrap)) / 2)); width: 330px;
    background: rgba(255, 255, 255, 0.72); border: 1px solid var(--beth-green-deep); border-radius: var(--radius);
    padding: 1.3rem 1.4rem; color: var(--beth-ink);
  }
  .physio-card p { margin: 0 0 .6rem; line-height: 1.5; }
  .physio-card .physio-card-h { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--beth-green-deep); margin: .6rem 0 .35rem; }
  .physio-card a { color: var(--beth-green-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; min-height: 44px; align-items: center; white-space: nowrap; }
  .hero-inner { max-width: 620px; }
}
.physio-strip { display: block; background: var(--beth-green-deep); color: #fff; text-decoration: none; }
.physio-strip:visited, .physio-strip:hover { color: #fff; }
.physio-strip-in { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; padding-top: .9rem; padding-bottom: .9rem; }
.physio-strip .physio-ico { width: 34px; height: 34px; }
.physio-strip-h { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.3; }
.physio-strip-t { display: block; font-size: .9rem; line-height: 1.45; color: rgba(255, 255, 255, 0.88); margin-top: .15rem; }
.physio-strip-go { font-size: 1.6rem; line-height: 1; padding-left: .25rem; }
@media (min-width: 1100px) { .physio-strip { display: none; } }
#physio { scroll-margin-top: 5rem; }