/* fulcrumstudio.uk: shares the vet offer's printed look (scripts/lib/vet-brand.ts). Palette pairs
   there were checked for WCAG AA; keep them in sync if the brand changes. */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/fraunces-latin.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 800; font-display: swap; src: url(/fonts/figtree-latin.woff2) format("woff2"); }
:root {
  --ink: #20302C; --pine: #1F4E45; --pine-soft: #E6EFEB; --clay: #B04E2A; --clay-soft: #F8E7DD;
  --muted: #5A6560; --paper: #FFFFFF; --cream: #FBF7F1; --sand: #F6EFE4; --line: #E6DCCD;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 17px/1.55 var(--sans); }
a { color: var(--pine); text-underline-offset: 3px; }
a:hover { color: var(--clay); }
:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 20px; }
header.site { padding: 22px 0; }
header.site .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { font: 600 21px/1 var(--serif); color: var(--pine); text-decoration: none; letter-spacing: -.01em; }
.logo span { color: var(--clay); }
main { padding: 12px 0 64px; }
h1 { font: 600 clamp(32px, 6vw, 46px)/1.1 var(--serif); letter-spacing: -.02em; color: var(--pine); margin: 18px 0 16px; }
h2 { font: 600 22px/1.25 var(--serif); color: var(--pine); margin: 0 0 12px; }
.lede { font-size: 19px; color: var(--ink); max-width: 36em; }
.muted { color: var(--muted); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 24px; margin: 22px 0; }
.btn { display: inline-block; background: var(--pine); color: #fff; border: 0; border-radius: 10px; padding: 13px 20px; font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer; }
.btn:hover { background: #173d36; color: #fff; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
footer.site { border-top: 1px solid var(--line); padding: 22px 0 40px; font-size: 14px; color: var(--muted); }
footer.site p { margin: 4px 0; }

/* Booking */
.days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x mandatory; }
.day { flex: 0 0 auto; scroll-snap-align: start; min-width: 84px; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; text-align: center; font: 500 14px/1.25 var(--sans); color: var(--ink); cursor: pointer; }
.day b { display: block; font: 600 17px/1.2 var(--serif); color: var(--pine); }
.day[aria-pressed="true"] { background: var(--pine); border-color: var(--pine); color: #fff; }
.day[aria-pressed="true"] b { color: #fff; }
.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin: 14px 0 4px; }
.time { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 11px 6px; font: 600 16px/1 var(--sans); color: var(--pine); cursor: pointer; }
.time:hover { border-color: var(--pine); }
.time[aria-pressed="true"] { background: var(--clay); border-color: var(--clay); color: #fff; }
form.book { display: grid; gap: 14px; }
label { display: grid; gap: 5px; font-weight: 600; font-size: 15px; }
label .opt { font-weight: 400; color: var(--muted); }
input, select, textarea { font: 16px/1.4 var(--sans); color: var(--ink); background: #fff; border: 1px solid #cfc3b1; border-radius: 9px; padding: 11px 12px; width: 100%; }
textarea { min-height: 84px; resize: vertical; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.picked { background: var(--clay-soft); border-radius: 10px; padding: 11px 14px; font-weight: 600; }
.errors { background: var(--clay-soft); color: #7a2f14; border-radius: 10px; padding: 11px 14px; margin: 0; }
.errors:empty { display: none; }
.done { background: var(--pine-soft); border-radius: 14px; padding: 24px; }
.small { font-size: 14px; }
@media (max-width: 520px) { body { font-size: 16px; } .card { padding: 18px; } }