/* The booking portal (/book/): one question at a time, drawn in ink on paper (11-03: "drawn on… disappearing and then
   appearing… completely mythical"). Questions write themselves in, answer boxes are drawn by a pen line, a pick floods with ink,
   the old question soaks into the paper before the next one is written. ?still turns all motion off (screenshots). */
:root{--paper:#FAF9F7;--ink:#191918;--ink2:#55534E;--mute:#8D8A84;--line:#E4E1DB;--soft:#F1EFEA;--err:#9B3B32;--brand:#191918;--on-brand:#FAF9F7;
  --ease:cubic-bezier(.2,.8,.2,1);--out:cubic-bezier(.6,0,.4,1)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font:16px/1.5 Inter,-apple-system,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
body{overflow-x:hidden}
/* paper grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%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 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
button,input,textarea{font:inherit;color:inherit}
a{color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* chrome: mark, back, trail of answers, progress line */
.top{position:fixed;inset:0 0 auto 0;height:64px;display:flex;align-items:center;gap:12px;padding:0 clamp(16px,4vw,40px);z-index:5;background:linear-gradient(var(--paper) 70%,rgba(250,249,247,0))}
.mark{display:flex;align-items:center;gap:10px;white-space:nowrap;flex:none;font-weight:600;font-size:14px;letter-spacing:-.005em;text-decoration:none;opacity:0;transition:opacity .6s var(--ease)}
.mark i{width:26px;height:26px;border-radius:7px;background:url(/assets/mark.svg) center/cover no-repeat;display:inline-block;flex:none} /* our paw-tile logo (was a dot, 11-03) */
.mark .tile{width:26px;height:26px;border-radius:7px;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font-size:13px;overflow:hidden;flex:none}
.mark .tile img{width:100%;height:100%;object-fit:cover}
.mark.on{opacity:1}
.back{border:0;background:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--ink2);opacity:0;pointer-events:none;transition:opacity .4s,background .2s;flex:none}
.back.on{opacity:1;pointer-events:auto}.back:hover{background:var(--soft)}
.trail{display:flex;gap:6px;overflow:hidden;white-space:nowrap;min-width:0;transition:opacity .4s}
.trail.hide{opacity:0;pointer-events:none}
.crumb{font-size:13px;color:var(--ink2);padding:4px 10px;border-radius:999px;background:var(--soft);border:0;cursor:pointer;animation:crumb .5s var(--ease) both;flex:none}
.crumb:hover{color:var(--ink)}
@keyframes crumb{from{opacity:0;transform:translateY(-6px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.bar{position:fixed;left:0;top:0;height:2px;background:var(--ink);width:0;transition:width .8s var(--ease);z-index:6}
.foot{position:fixed;right:clamp(16px,4vw,40px);bottom:12px;font-size:12px;color:var(--mute);z-index:4}
.foot a{color:var(--mute)}

/* the portal ring: a faint circle that opens outward on every step; the dot that starts everything */
.ring{position:fixed;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;border:1px solid var(--ink);opacity:0;pointer-events:none;z-index:0}
.ring.go{animation:ring 1.1s var(--ease)}
@keyframes ring{0%{transform:scale(1);opacity:.16}100%{transform:scale(260);opacity:0}}
.dot{position:fixed;left:50%;top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--ink);z-index:7;transform:scale(0);pointer-events:none}

/* stage: one question at a time */
.stage{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:96px clamp(18px,5vw,48px) 80px;position:relative;z-index:1}
.q{width:min(760px,100%);min-width:0}
.body{min-width:0}
/* leaving: the ink soaks into the paper (displacement + fade), the page is blank for a beat, then the next one is written */
.q.leave{filter:url(#ink-out);animation:soak .44s var(--out) forwards}
@keyframes soak{60%{opacity:.5}to{opacity:0;transform:scale(1.015)}}
.q.back-leave{animation:backleave .36s var(--out) forwards}
@keyframes backleave{to{opacity:0;transform:scale(.97);filter:blur(6px)}}
.q.back-enter{animation:fade .5s var(--ease) both}

/* writing: each word is revealed left to right by a moving ink edge */
h1.t{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(40px,6.2vw,76px);line-height:1.04;letter-spacing:-.012em;margin:0;text-wrap:balance}
h1.t.long{font-size:clamp(34px,5vw,60px)}
.w{display:inline-block;padding-right:.08em;margin-right:-.08em;
  -webkit-mask-image:linear-gradient(90deg,#000 42%,transparent 58%);mask-image:linear-gradient(90deg,#000 42%,transparent 58%);
  -webkit-mask-size:260% 100%;mask-size:260% 100%;-webkit-mask-position:0 0;mask-position:0 0;
  animation:write .62s var(--ease) both;animation-delay:calc(var(--i)*68ms + 120ms)}
@keyframes write{from{-webkit-mask-position:100% 0;mask-position:100% 0;filter:blur(2.5px)}to{-webkit-mask-position:0 0;mask-position:0 0;filter:none}}
.sub{color:var(--ink2);font-size:17px;margin:18px 0 0;max-width:48ch;animation:fade .8s var(--ease) both;animation-delay:.42s}
.sub b{color:var(--ink);font-weight:600}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.body{margin-top:34px}
.in{animation:fade .7s var(--ease) both;animation-delay:calc(var(--i,0)*60ms + .45s)}

/* answer boxes: a pen line draws the outline, then the ink dries to a hairline */
.opts{display:grid;gap:10px}
.opts.two{grid-template-columns:1fr 1fr}
.opt{position:relative;overflow:hidden;display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;transition:border-color .5s,transform .25s var(--ease),opacity .3s}
.opt.drawing{border-color:transparent;background:transparent;transition:none}
.opt.dried{transition:border-color .6s,background-color .6s}
.opt:hover{border-color:var(--ink)}
.opt:active{transform:scale(.99)}
.opt .k{font-size:12px;font-weight:600;color:var(--mute);width:22px;height:22px;border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;flex:none;font-variant-numeric:tabular-nums}
.opt .l{flex:1;min-width:0}
.opt .l b{display:block;font-weight:600;font-size:17px;letter-spacing:-.01em}
.opt .l span{display:block;color:var(--ink2);font-size:14px;margin-top:2px}
.opt .p{font-weight:600;font-variant-numeric:tabular-nums;font-size:16px;white-space:nowrap}
.opt.big{padding:26px 24px}.opt.big .l b{font-size:22px}
.opt .tick{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line);display:grid;place-items:center;flex:none;color:transparent;transition:background .2s,border-color .2s,color .2s}
.opt.on .tick{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pen{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:2}
.pen rect{fill:none;stroke:var(--ink);stroke-width:1.25;stroke-linecap:round;animation:pen .75s var(--ease) both;animation-delay:var(--d,0s)}
@keyframes pen{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.pen.dry{transition:opacity .6s;opacity:0}
/* the ink flood on pick */
.opt::before{content:"";position:absolute;left:var(--x,50%);top:var(--y,50%);width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform .55s var(--ease);z-index:0}
.opt>*{position:relative;z-index:1;transition:color .25s}
.opt>.pen{position:absolute;inset:0;z-index:2} /* the pen floats over the box; it must never take space inside it */
.opt.pick::before{transform:scale(90)}
.opt.pick,.opt.pick .l span,.opt.pick .k,.opt.pick .p{color:var(--paper)}.opt.pick .k{border-color:rgba(255,255,255,.3)}
.opt.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt.on .k{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.opts.dim .opt:not(.pick){opacity:.35}
.opt:disabled{opacity:.4;cursor:default}
.hint{font-size:12px;color:var(--mute);margin-top:12px}
.ghost{border:0;background:none;color:var(--ink2);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 0;font-size:14px}
.ghost:hover{color:var(--ink)}

/* fields: the underline is drawn by the pen, then rests at a hairline until focus */
.field{display:block;position:relative;padding-bottom:2px}
.field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--ink);opacity:.2;transform-origin:left;animation:underline .9s var(--ease) both;animation-delay:calc(var(--i,0)*80ms + .38s);transition:opacity .25s}
.field:focus-within::after{opacity:1}
.field.bad::after{background:var(--err);opacity:.8}
@keyframes underline{from{transform:scaleX(0);opacity:1}60%{opacity:1}}
.field input,.field textarea{width:100%;border:0;background:transparent;outline:0;padding:10px 0 14px;font-family:"Instrument Serif",Georgia,serif;font-size:clamp(32px,5vw,52px);letter-spacing:-.01em;resize:none}
.field.small input{font-size:clamp(24px,3.4vw,32px)}
.field input::placeholder,.field textarea::placeholder{color:#C9C6BF}
.fl{font-size:13px;font-weight:600;color:var(--ink2);margin:24px 0 0;display:block}
.fl .o{font-weight:400;color:var(--mute)}
.note{min-height:24px;margin-top:14px;font-size:15px;color:var(--ink2)}
.note b{color:var(--ink)}
.note.err,.err{color:var(--err)}
.go{margin-top:28px;display:inline-flex;align-items:center;gap:10px;border:0;background:var(--ink);color:var(--paper);border-radius:999px;padding:15px 26px;font-weight:600;cursor:pointer;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.go.on{opacity:1;transform:none;pointer-events:auto}
.go kbd{font:500 12px Inter,sans-serif;opacity:.6}
.go[aria-busy="true"]{opacity:.6;pointer-events:none}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:18px}

/* checkboxes (consents) */
.chk{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:14px;color:var(--ink2);line-height:1.5;margin-top:14px}
.chk input{position:absolute;opacity:0;width:1px;height:1px}
.chk .box{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--mute);display:grid;place-items:center;flex:none;margin-top:1px;color:transparent;transition:background .2s,border-color .2s}
.chk input:checked+.box{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chk input:focus-visible+.box{outline:2px solid var(--ink);outline-offset:2px}
.chk.bad .box{border-color:var(--err)}
.chk a{color:var(--ink)}

/* weight dial */
.weigh{display:flex;align-items:center;gap:18px}
.weigh .n{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(84px,14vw,150px);line-height:.9;font-variant-numeric:tabular-nums;letter-spacing:-.03em;min-width:2ch}
.weigh .u{font-size:22px;color:var(--ink2)}
.weigh .pm{display:flex;gap:8px;margin-left:auto}
.weigh .pm button{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:22px;line-height:1}
.range{width:100%;margin:26px 0 8px;-webkit-appearance:none;appearance:none;height:2px;background:linear-gradient(90deg,var(--ink) var(--f,30%),var(--line) var(--f,30%));outline:0}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink);cursor:grab}
.range::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink)}
.sizes{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--mute)}
.sizes span.on{color:var(--ink);font-weight:600}

/* days and windows */
.days{display:flex;gap:8px;overflow-x:auto;padding:2px 0 8px;scrollbar-width:none;margin:0 -4px;padding-left:4px}
.days::-webkit-scrollbar{display:none}
.day{flex:none;width:74px;padding:12px 0;border:1px solid var(--line);border-radius:14px;background:#fff;text-align:center;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.day b{display:block;font-family:"Instrument Serif",Georgia,serif;font-size:34px;font-weight:400;line-height:1.05}
.day span{font-size:12px;color:var(--ink2)}
.day.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}.day.on span{color:rgba(250,249,247,.7)}
.day:disabled{opacity:.32;cursor:default}
.wins{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:16px}
.wins .opt{padding:14px 16px}.wins .opt b{white-space:nowrap}

/* the reveal: everything, drawn line by line */
.rcpt{margin-top:26px;position:relative}
.rcpt::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform-origin:left;animation:underline 1s var(--ease) both;animation-delay:.4s}
.ln{display:flex;align-items:flex-start;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);animation:line .7s var(--ease) both;animation-delay:calc(var(--i)*90ms + .5s);width:100%;background:none;border-left:0;border-right:0;border-top:0;text-align:left;cursor:pointer;font:inherit;color:inherit}
.ln:hover .ed{opacity:1}
.ln .a{color:var(--ink2);font-size:14px;width:104px;flex:none;padding-top:2px}
.ln .v{flex:1;min-width:0;font-size:17px}
.ln .v small{display:block;color:var(--ink2);font-size:14px;margin-top:2px}
.ln .v small.flag{color:var(--ink)}
.ln .m{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.ln .ed{font-size:13px;color:var(--mute);opacity:.6;transition:opacity .2s;white-space:nowrap;padding-top:2px}
@keyframes line{from{opacity:0;transform:translateY(10px);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0)}}
.tot{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:22px 0 6px;animation:line .8s var(--ease) both;animation-delay:calc(var(--i)*90ms + .6s)}
.tot .n{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(48px,7vw,62px);line-height:1;font-variant-numeric:tabular-nums}
.small{font-size:13px;color:var(--mute)}
.consents{margin-top:22px}
.banner{border:1px solid var(--ink);border-radius:14px;padding:14px 16px;font-size:15px;margin-bottom:18px;background:#fff}
.banner.err{border-color:var(--err);color:var(--err)}
.banner a{font-weight:600}
.locked{margin-top:26px;color:var(--ink2)}

/* waitlist block */
.wl{margin-top:30px;padding-top:6px}
.wl .ok{font-size:17px}

/* sent: ink floods from the button, then recedes */
.flood{position:fixed;width:20px;height:20px;margin:-10px;border-radius:50%;background:var(--ink);z-index:20;transform:scale(0);pointer-events:none}
.flood.go{transition:transform .9s var(--out);transform:scale(260)}
.sent{position:fixed;inset:0;z-index:21;display:grid;place-items:center;color:var(--paper);pointer-events:none;text-align:center;padding:24px}
.sent h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(48px,8vw,96px);margin:0;line-height:1}
.sent p{color:rgba(250,249,247,.72);margin:16px 0 0}
.sent .w{-webkit-mask-image:linear-gradient(90deg,#000 42%,transparent 58%);mask-image:linear-gradient(90deg,#000 42%,transparent 58%)}

.still *,.still *::before,.still *::after{animation:none!important;transition:none!important}
@media (pointer:coarse){.hint,.opt .k,.go kbd{display:none}}
@media (max-width:640px){.opts.two{grid-template-columns:1fr}.opt{padding:16px}.opt.big{padding:20px}.ln .a{width:78px}.top{height:56px}.trail{display:none}
  .stage{place-items:start center;padding-top:84px}.ln .ed{display:none}.foot{position:static;text-align:center;padding:0 0 18px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}.q.leave{filter:none}}

/* a photo of the pet for the groomer (optional, one per pet) */
.up{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--ink);border-radius:999px;padding:14px 24px;font-weight:600;cursor:pointer;background:#fff;position:relative}
.up:focus-within{outline:2px solid var(--ink);outline-offset:3px}
.up input{position:absolute;opacity:0;width:1px;height:1px}
.petphoto{width:min(320px,100%);aspect-ratio:4/3;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--soft);margin-bottom:18px}
.petphoto img{width:100%;height:100%;object-fit:cover;display:block}
.ln .v .pthumb{display:block;width:72px;height:54px;object-fit:cover;border-radius:8px;margin-top:8px;border:1px solid var(--line)}

/* headings focused by script (tabindex=-1, for screen readers) never show a ring */
[tabindex="-1"]:focus{outline:none}