/* Pooch Purrfect Pet Spa
   Brand palette (unchanged from the original site). Edit here only. */
@font-face { font-family: "Fraunces"; src: url("assets/fonts/fraunces-soft-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("assets/fonts/dm-sans.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --pink: #ef9bc9;
  --pink-deep: #d96aaa;
  --pink-ink: #a3407a;      /* darker shade of the brand pink, for readable links */
  --pink-soft: #fdeaf4;
  --aqua: #64c9c2;
  --aqua-soft: #def5f2;
  --lav: #a99be8;
  --lav-soft: #eeebfb;
  --ink: #211b23;
  --muted: #6b616a;
  --cream: #fffaf7;
  --white: #ffffff;
  --line: #eadfe6;

  --display: "Fraunces", Georgia, serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: 20px;
  --max: 1140px;
  --header-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  padding-bottom: 84px; /* space for the mobile action bar */
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--pink-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
/* Keyboard focus ring. Lavender was too faint on the light backgrounds (2.3 to 1); this is 6 to 1.
   The dark bands switch to pink further down so the ring shows there too. */
:focus-visible { outline: 3px solid var(--pink-ink); outline-offset: 3px; border-radius: 6px; }
.award-band :focus-visible, .closer :focus-visible, .site-footer :focus-visible, .action-bar :focus-visible { outline-color: var(--pink); }
/* Read by screen readers, not shown. */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Devices that ask for less motion get none: no smooth scrolling, no transitions. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

h1, h2, h3 {
  font-family: var(--display);
  font-variation-settings: "WONK" 0;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 .45em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 11vw, 5.4rem); font-variation-settings: "WONK" 1; }
h2 { font-size: clamp(1.9rem, 6.5vw, 3.1rem); }
h3 { font-size: 1.3rem; letter-spacing: -0.01em; }
p { margin: 0 0 1em; max-width: 62ch; }
.lede { font-size: 1.18rem; color: var(--muted); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 900px) { :root { --gutter: 36px; --header-h: 80px; } }

.skip { position: absolute; left: -9999px; top: 10px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { left: 10px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: rgba(255, 250, 247, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.site-header .wrap { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; line-height: 1; }
.brand-mark { flex: none; width: 44px; height: 44px; border-radius: 12px; }
.brand b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.22rem; letter-spacing: -0.01em; }
.brand small { display: block; font-size: .78rem; color: var(--muted); margin-top: 4px; }

.menu-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--white); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 999px; padding: 8px 16px; font: 600 .95rem var(--body); cursor: pointer; }
.menu-btn .bars { width: 16px; height: 10px; position: relative; }
.menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease, top .2s ease; }
.menu-btn .bars::before { top: 0; }
.menu-btn .bars::after { top: 8px; }
.menu-btn[aria-expanded="true"] .bars::before { top: 4px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .bars::after { top: 4px; transform: rotate(-45deg); }

.site-nav { display: none; }
.site-nav.open { display: block; position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); background: var(--cream); padding: 12px var(--gutter) 40px; overflow-y: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav li a { display: block; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 1.6rem; }
.site-nav li a[aria-current="page"] { color: var(--pink-ink); }
.site-nav .nav-book { margin-top: 24px; width: 100%; gap: .3em; }
.nav-contact { margin-top: 24px; color: var(--muted); }
.nav-contact a { color: var(--ink); font-weight: 600; }

@media (min-width: 900px) {
  .menu-btn { display: none; }
  .site-nav, .site-nav.open { display: flex; align-items: center; gap: 30px; position: static; padding: 0; background: none; overflow: visible; }
  .site-nav ul { display: flex; gap: 28px; }
  .site-nav li a { font: 600 .98rem var(--body); padding: 6px 0; border: 0; }
  .site-nav li a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--pink-deep); }
  .site-nav li a:hover { color: var(--pink-ink); }
  .site-nav .nav-book { margin: 0; width: auto; white-space: nowrap; }
  .site-nav li a { white-space: nowrap; }
  .site-nav .nav-book .lead { display: none; }
  .nav-contact { display: none; }
}
@media (min-width: 1200px) { .site-nav .nav-book .lead { display: inline; } }
@media (min-width: 900px) and (max-width: 1023px) { .site-nav, .site-nav.open { gap: 18px; } .site-nav ul { gap: 18px; } .site-nav .nav-book { padding-inline: 18px; } }
body.nav-open { overflow: hidden; }
body.nav-open .action-bar { display: none; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 24px; border-radius: 999px; border: 2px solid var(--ink); font: 700 1rem/1.15 var(--body); text-decoration: none; text-align: center; cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-book { background: var(--pink); color: var(--ink); border-color: var(--pink); }
.btn-book:hover { background: var(--pink-deep); border-color: var(--pink-deep); color: var(--ink); }
.btn-plain { background: transparent; color: var(--ink); }
.btn-plain:hover { background: var(--ink); color: var(--white); }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: #3a303c; color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 519px) { .btn-row .btn { flex: 1 1 100%; } }
.ext::after { content: ""; display: inline-block; width: .6em; height: .6em; margin-left: 2px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-1px); clip-path: polygon(0 0, 100% 0, 100% 100%); }

/* ---------- Mobile action bar ---------- */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: var(--ink); }
.action-bar a { display: flex; align-items: center; justify-content: center; min-height: 50px; border-radius: 999px; font-weight: 700; text-decoration: none; }
.action-bar .call { color: var(--white); border: 1.5px solid rgba(255, 255, 255, .35); }
.action-bar .book { background: var(--pink); color: var(--ink); }
@media (min-width: 900px) { body { padding-bottom: 0; } .action-bar { display: none; } }

/* ---------- Sections ---------- */
.section { padding: 64px 0; }
@media (min-width: 900px) { .section { padding: 104px 0; } }
.tint-pink { background: var(--pink-soft); }
.tint-aqua { background: var(--aqua-soft); }
.tint-lav { background: var(--lav-soft); }
.section-head { margin-bottom: 32px; }
.section-head p { color: var(--muted); }
@media (max-width: 899px) { .section-head.split { display: block; } }
@media (min-width: 900px) {
  .section-head.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: end; margin-bottom: 48px; }
  .section-head.split p { margin-bottom: .5em; }
}

/* ---------- Home hero ---------- */
.hero { padding: 28px 0 56px; overflow: hidden; }
.hero-grid { display: grid; gap: 40px; }
.hero h1 { margin-bottom: .3em; }
.hero-award { display: flex; align-items: center; gap: 12px; max-width: 34ch; margin-bottom: 22px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: .95rem; line-height: 1.35; }
.hero-award .rosette { width: 34px; }
.hero-award .ribbons .rosette + .rosette { margin-left: -9px; }
.hero-award > span:last-child { text-wrap: balance; }
.hero-award:hover > span:last-child { text-decoration: underline; text-decoration-color: var(--pink-deep); text-underline-offset: 3px; }
.hero .lede { margin-bottom: 26px; }
.hero-note { margin-top: 18px; font-size: .95rem; color: var(--muted); }
.hero-note strong { color: var(--ink); }

.arches { margin: 0; position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; max-width: 560px; }
.arch { margin: 0; border-radius: 999px 999px 26px 26px; overflow: hidden; background: var(--pink); padding: 8px; }
.arch img { border-radius: 999px 999px 20px 20px; aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.arch.two { background: var(--aqua); margin-top: 32px; }
.arches figcaption { grid-column: 1 / -1; font-size: .9rem; color: var(--muted); }

@media (min-width: 900px) {
  .hero { padding: 64px 0 104px; }
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 64px; align-items: center; }
  .arches { margin-left: auto; }
  .arch.two { margin-top: 84px; }
}

/* one orchestrated load moment: the two photos settle into place */
@media (prefers-reduced-motion: no-preference) {
  .arch.one { animation: settle-left .9s cubic-bezier(.2, .8, .2, 1) both .1s; }
  .arch.two { animation: settle-right .9s cubic-bezier(.2, .8, .2, 1) both .25s; }
  @keyframes settle-left { from { opacity: 0; transform: translateY(24px) rotate(-4deg); } to { opacity: 1; transform: none; } }
  @keyframes settle-right { from { opacity: 0; transform: translateY(24px) rotate(4deg); } to { opacity: 1; transform: none; } }
}

/* ---------- The ID tag (live hours) ---------- */
.idtag { position: relative; background: var(--pink); color: var(--ink); border-radius: 44px 44px 50% 50% / 44px 44px 34% 34%; padding: 60px 26px 54px; text-align: center; max-width: 360px; width: 100%; margin: 0 auto; }
.idtag::before { content: ""; position: absolute; top: 20px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 0 5px var(--pink-deep); }
.tint-aqua .idtag::before, .tint-pink .idtag::before { background: var(--aqua-soft); }
.tint-pink .idtag::before { background: var(--pink-soft); }
.idtag .status { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: .92rem; }
.idtag .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.idtag .dot.open { background: #1f9e6a; }
.idtag .tag-name { font-family: var(--display); font-variation-settings: "WONK" 1; font-weight: 600; font-size: 1.65rem; line-height: 1.1; margin: 18px 0 6px; }
.idtag address { font-style: normal; margin-bottom: 14px; }
.idtag .tag-phone { font-family: var(--display); font-weight: 600; font-size: 1.45rem; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--ink); }
.idtag .hours { list-style: none; margin: 22px auto 0; padding: 0; max-width: 230px; text-align: left; font-size: .95rem; }
.idtag .hours li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px dashed rgba(33, 27, 35, .25); }
.idtag .hours li.today { font-weight: 700; }

/* ---------- Services page: find your dog, and prices by size ---------- */
.finder { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1.5px solid var(--ink); }
.finder li { border-bottom: 1px solid var(--line); }
.finder a { position: relative; display: block; padding: 14px 36px 15px 0; text-decoration: none; color: var(--ink); }
.finder a::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-top: 2px solid var(--pink-ink); border-right: 2px solid var(--pink-ink); transform: rotate(45deg); }
.finder .who { display: block; font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1.25; }
.finder .goes { display: block; margin-top: 3px; color: var(--muted); font-size: .98rem; line-height: 1.45; }
.finder a:hover .who { color: var(--pink-ink); }
.finder-help { margin: 0; }
/* The statement that sits on top of the "find your price list" rows. */
.all-breeds { background: var(--pink); color: var(--ink); border-radius: 22px; padding: 20px 22px 22px; margin-bottom: 4px; }
.all-breeds h3 { font-size: clamp(1.75rem, 6.6vw, 2.25rem); font-variation-settings: "WONK" 1; margin-bottom: .3em; }
.all-breeds p { margin: 0; max-width: 40ch; }
.all-breeds + .finder { border-top: 0; }
.priced { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.priced > li { display: grid; gap: 16px; padding: 24px 0; border-bottom: 1px solid rgba(33, 27, 35, .16); }
.priced h3 { margin: 0 0 .25em; font-size: 1.3rem; }
.priced p { margin: 0; color: var(--muted); }
.sizes { margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--white); border: 1.5px solid var(--ink); border-radius: 18px; overflow: hidden; }
.sizes > div { display: flex; flex-direction: column; justify-content: space-between; gap: 2px; padding: 10px 2px 11px; text-align: center; border-left: 1px solid var(--line); }
.sizes > div:first-child { border-left: 0; }
.sizes dt { font-size: .8rem; color: var(--muted); }
.sizes dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.08rem; line-height: 1.15; }
.sizes .from { display: block; font: 400 .75rem/1.2 var(--body); color: var(--muted); }
.fee-sheet .from { font: 400 .82rem/1 var(--body); color: var(--muted); margin-right: 2px; }
@media (min-width: 900px) {
  .priced > li { grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; padding: 30px 0; }
  .sizes > div { padding: 14px 4px 15px; }
  .sizes dt { font-size: .88rem; }
  .sizes dd { font-size: 1.35rem; }
}

/* ---------- Service list ---------- */
.menu { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.menu li { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.menu h3 { margin: 0; font-size: 1.25rem; }
.menu .price { font-weight: 700; white-space: nowrap; align-self: baseline; }
.menu p { grid-column: 1 / -1; margin: 0; color: var(--muted); }
@media (min-width: 900px) {
  .menu.one-col li { grid-template-columns: 1fr auto; gap: 4px 16px; }
  .menu.one-col p { grid-column: 1 / -1; }
  .menu li { grid-template-columns: 280px 1fr auto; gap: 32px; align-items: baseline; padding: 24px 0; }
  .menu p { grid-column: auto; }
}

/* ---------- Steps (a real sequence) ---------- */
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 26px; }
.steps li { counter-increment: step; position: relative; padding-left: 60px; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -4px; width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: var(--pink); display: grid; place-items: center; font-family: var(--display); font-weight: 600; font-size: 1.2rem; }
.steps h3 { font-family: var(--body); font-weight: 700; font-size: 1.1rem; letter-spacing: 0; margin-bottom: .25em; }
.steps p { margin: 0; color: var(--muted); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .steps li { padding: 62px 0 0; }
  .steps li::after { content: ""; position: absolute; top: 17px; left: 54px; right: -20px; border-top: 2px dotted rgba(33, 27, 35, .3); }
  .steps li:last-child::after { display: none; }
}

/* ---------- Two-column blocks ---------- */
.split { display: grid; gap: 36px; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } .split.top { align-items: start; } }

.creds { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.creds li { display: flex; align-items: center; gap: 14px; }
.creds img { width: 56px; height: 56px; flex: none; }
.creds .mark { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--aqua); font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.creds .mark.lav { background: var(--lav); }
.creds strong { display: block; }
.creds span { color: var(--muted); font-size: .95rem; }

.portrait { margin: 0; }
.portrait img { border-radius: 26px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.portrait figcaption { font-size: .9rem; color: var(--muted); margin-top: 10px; }

/* ---------- Notes and callouts ---------- */
.callout { background: var(--white); border: 1.5px solid var(--ink); border-radius: 22px; padding: 22px 24px; }
.callout h3 { font-size: 1.15rem; margin-bottom: .35em; }
.callout p:last-child { margin-bottom: 0; }
.checklist { list-style: none; padding: 0; margin: 0 0 1em; }
.checklist li { position: relative; padding: 8px 0 8px 32px; border-bottom: 1px solid var(--line); }
.checklist li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 14px; height: 8px; border-left: 2.5px solid var(--pink-deep); border-bottom: 2.5px solid var(--pink-deep); transform: rotate(-45deg); }

/* ---------- FAQ ---------- */
.faq { border-top: 1.5px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; position: relative; padding: 20px 44px 20px 0; font-weight: 700; font-size: 1.08rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -9px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq .answer { padding: 0 0 22px; }
.faq .answer p:last-child { margin-bottom: 0; }

/* ---------- Inner page header ---------- */
.page-head { padding: 40px 0 36px; }
.page-head h1 { font-size: clamp(2.4rem, 10vw, 4.4rem); }
.page-head .lede { margin-bottom: 0; }
@media (min-width: 900px) { .page-head { padding: 80px 0 56px; } }

/* ---------- Contact ---------- */
.contact-rows { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.contact-rows li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.contact-rows .label { display: block; font-size: .92rem; color: var(--muted); }
.contact-rows .value { font-size: 1.22rem; font-weight: 600; color: var(--ink); }
.contact-rows .value small { display: block; margin-top: 2px; font-size: .95rem; font-weight: 400; color: var(--muted); }
.map { border-radius: 24px; overflow: hidden; border: 1.5px solid var(--ink); background: var(--aqua-soft); aspect-ratio: 4 / 3; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Legal / long-form ---------- */
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(1.45rem, 4.6vw, 1.85rem); margin-top: 1.8em; }
.prose h3 { font-family: var(--body); font-weight: 700; font-size: 1.1rem; letter-spacing: 0; margin-top: 1.4em; }
.prose ul { padding-left: 1.2em; margin: 0 0 1em; }
.prose li { margin-bottom: .45em; }
.prose p, .prose li { max-width: 68ch; }
.updated { color: var(--muted); font-size: .95rem; }
.toc { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 18px 22px; margin: 24px 0 8px; }
.toc p { font-weight: 700; margin-bottom: .4em; }
.toc ol { margin: 0; padding-left: 1.3em; }
.toc li { margin: .25em 0; }
/* Fees and time windows summary on the policies page */
.glance { margin: 28px 0 12px; padding: 24px 22px 14px; background: var(--white); border: 1.5px solid var(--ink); border-radius: 22px; }
.prose .glance h2 { margin-top: 0; }
.prose .glance h3 { margin: 1.5em 0 .2em; font-size: .95rem; font-weight: 700; color: var(--muted); }
.glance > p { color: var(--muted); margin-bottom: 0; }
.fee-sheet { margin: 0; }
.fee-sheet > div { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; }
.fee-sheet dt { flex: 1 1 0; min-width: 0; display: flex; align-items: baseline; gap: 10px; }
.fee-sheet dt a { color: var(--ink); text-decoration-color: var(--pink-deep); }
.fee-sheet dt a:hover { color: var(--pink-ink); }
.fee-sheet dt::after { content: ""; flex: 1 1 24px; min-width: 24px; border-bottom: 2px dotted rgba(33, 27, 35, .3); transform: translateY(-.28em); }
.fee-sheet dd { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.12rem; white-space: nowrap; text-align: right; }
@media (min-width: 900px) { .glance { padding: 30px 32px 18px; } }
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.legal-nav a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--white); color: var(--ink); text-decoration: none; font-size: .95rem; font-weight: 600; }
.legal-nav a[aria-current="page"] { background: var(--ink); color: var(--white); border-color: var(--ink); }

/* ---------- Closing band ---------- */
.closer { background: var(--ink); color: var(--pink-soft); padding: 56px 0; }
.closer h2 { color: var(--white); margin-bottom: .3em; }
.closer p { color: #d8ccd4; }
.closer .btn-plain { color: var(--white); border-color: rgba(255, 255, 255, .5); }
.closer .btn-plain:hover { background: var(--white); color: var(--ink); }
@media (min-width: 900px) { .closer { padding: 80px 0; } .closer .wrap { display: flex; justify-content: space-between; align-items: center; gap: 48px; } .closer p { margin: 0; } }

/* ---------- Footer ---------- */
.site-footer { background: #181319; color: #cbbfc8; padding: 52px 0 28px; font-size: .96rem; }
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { color: var(--pink); text-decoration: underline; }
.foot-grid { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
.foot-grid .foot-brand { grid-column: 1 / -1; }
.foot-logo { display: block; width: 150px; }
.foot-logo img { width: 100%; border-radius: 20px; }
.foot-brand p { margin-top: 16px; }
.foot-grid h2 { font-family: var(--body); font-size: .95rem; font-weight: 700; letter-spacing: 0; color: var(--pink); margin-bottom: 10px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { padding: 4px 0; }
.foot-base { margin-top: 36px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; font-size: .88rem; }
@media (min-width: 900px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } .foot-grid .foot-brand { grid-column: auto; } }

/* ---------- Utilities ---------- */
.muted { color: var(--muted); }
.nw { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.stack > * + * { margin-top: 18px; }
.center-404 { min-height: 60vh; display: grid; align-content: center; }
.contact-rows .value a { color: var(--ink); }

/* ---------- Award band ---------- */
.award-band { background: var(--ink); color: #e6dbe2; padding: 60px 0; }
.award-band h2 { color: var(--white); font-size: clamp(2.3rem, 9vw, 4rem); font-variation-settings: "WONK" 1; margin: 0; }
.award-band a { color: var(--pink); }
.award-band a:hover { color: var(--white); }
.award-grid { display: grid; gap: 36px; }
.award-list { list-style: none; margin: 28px 0; padding: 0; display: grid; gap: 18px; }
.award-list li { display: grid; grid-template-columns: 124px 1fr; align-items: center; gap: 16px; }
.award-list strong { display: block; text-wrap: balance; font-family: var(--display); font-weight: 600; font-size: 1.45rem; color: var(--white); line-height: 1.1; }
.award-list span { display: block; color: var(--pink); margin-top: 4px; font-size: .98rem; }
.rosette { width: 72px; height: auto; flex: none; }
.ribbons { display: flex; flex: none; }
.ribbons .rosette + .rosette { margin-left: -20px; }
.award-list .ribbons .rosette:first-child { position: relative; z-index: 1; }
.award-photo { margin: 0; }
.award-photo img { border-radius: 22px; width: 100%; aspect-ratio: 1400 / 1013; object-fit: cover; }
.award-photo figcaption { font-size: .9rem; color: #bfb2bb; margin-top: 10px; }
@media (min-width: 900px) {
  .award-band { padding: 96px 0; }
  .award-grid { grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: center; }
  .award-list .rosette { width: 92px; }
  .award-list li { grid-template-columns: 164px 1fr; gap: 20px; }
}
@media (prefers-reduced-motion: no-preference) {
  .rosette { transform-origin: 50% 40%; transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
  .award-list li:hover .rosette { transform: rotate(-8deg) scale(1.04); }
}

/* ---------- Photo strip and gallery ---------- */
.shot { margin: 0; }
.shot img { width: 100%; border-radius: 20px; background: var(--pink-soft); }
.shot figcaption { font-size: .92rem; color: var(--muted); margin-top: 8px; }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: min(68vw, 280px); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px var(--gutter) 12px; scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
.strip .shot { scroll-snap-align: start; }
.strip .shot img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 1140px) { .strip { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); max-width: var(--max); margin: 0 auto; overflow: visible; } }
.grid-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
.grid-gallery .shot img { aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 900px) { .grid-gallery { grid-template-columns: repeat(3, 1fr); gap: 36px 24px; } }

/* ---------- Coat guide ---------- */
.coat-guide { margin: 0; border-top: 1.5px solid var(--ink); }
.coat-guide > div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.coat-guide dt { font-family: var(--display); font-weight: 600; font-size: 1.2rem; }
.coat-guide dd { margin: 0; }
.coat-guide .eg { color: var(--muted); }
.coat-guide .when { font-weight: 700; }
@media (min-width: 900px) { .coat-guide > div { grid-template-columns: 280px 1fr auto; gap: 32px; align-items: baseline; } }

/* ---------- Misc additions ---------- */
.portrait.wide img { aspect-ratio: 1400 / 1013; }
.cat-photo { max-width: 300px; margin-top: 8px; }
.creds .mark.pink { background: var(--pink); }
.tint-lav .idtag::before { background: var(--lav-soft); }
.tint-pink .creds .mark.pink { background: var(--white); }

/* ---------- Back to top ---------- */
.to-top { position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 65; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: var(--pink); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 6px 18px rgba(33, 27, 35, .22); cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s ease, transform .2s ease, background-color .15s ease; }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--pink-deep); }
body.nav-open .to-top { display: none; }
@media (min-width: 900px) { .to-top { right: 28px; bottom: 28px; width: 54px; height: 54px; } }

/* ---------- Review quotes ---------- */
.rating { color: var(--muted); margin-bottom: 30px; }
.lead-quote { margin: 0 0 30px; }
.lead-quote blockquote { margin: 0; position: relative; padding-top: 34px; }
.lead-quote blockquote::before { content: "\201C"; position: absolute; top: -6px; left: -4px; font-family: var(--display); font-size: 5rem; line-height: 1; color: var(--pink-deep); }
.lead-quote p { font-family: var(--display); font-variation-settings: "WONK" 1; font-weight: 600; font-size: clamp(1.55rem, 5.4vw, 2.1rem); line-height: 1.22; letter-spacing: -0.01em; margin: 0; max-width: 24ch; }
.lead-quote figcaption, .quotes figcaption { font-size: .92rem; color: var(--muted); margin-top: 10px; }
.quotes { list-style: none; margin: 0 0 30px; padding: 0; border-top: 1.5px solid var(--ink); }
.quotes li { padding: 18px 0; border-bottom: 1px solid rgba(33, 27, 35, .14); }
.quotes figure, .quotes blockquote { margin: 0; }
.quotes p { margin: 0; max-width: 56ch; }

/* ---------- Mayor quotes ---------- */
.mayor-quote { margin: 0 0 26px; padding-left: 20px; border-left: 3px solid var(--pink); }
.mayor-quote blockquote, .story-quote blockquote { margin: 0; }
.mayor-quote p { font-family: var(--display); font-variation-settings: "WONK" 1; font-weight: 600; font-size: clamp(1.45rem, 5vw, 1.9rem); line-height: 1.2; color: var(--white); margin: 0; max-width: 22ch; }
.mayor-quote figcaption { font-size: .92rem; color: #bfb2bb; margin-top: 10px; }
.story-quote { margin: 8px 0 28px; padding-left: 20px; border-left: 3px solid var(--pink-deep); }
.story-quote p { font-family: var(--display); font-weight: 600; font-size: 1.3rem; line-height: 1.3; margin: 0; max-width: 30ch; }
.story-quote figcaption { font-size: .92rem; color: var(--muted); margin-top: 8px; }

/* ---------- Careers: page heads and the way back ---------- */
.crumb { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-weight: 600; font-size: .98rem; }
.crumb::before { content: ""; width: 8px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
.job-cta { margin-top: 26px; }
.careers-head { padding-bottom: 64px; }
.careers-grid { display: grid; gap: 44px; }
.careers-list .section-head { margin-bottom: 20px; }
.careers-photo { max-width: 560px; }
@media (min-width: 900px) {
  .careers-head { padding-bottom: 104px; }
  .careers-grid { grid-template-columns: 1.1fr .9fr; grid-template-areas: "intro photo" "list list"; gap: 72px 72px; align-items: center; }
  .careers-intro { grid-area: intro; }
  .careers-photo { grid-area: photo; margin-left: auto; }
  .careers-list { grid-area: list; }
  .careers-list .section-head { margin-bottom: 40px; }
}
.closed-note { margin: 0; font-weight: 700; color: var(--ink); }
.closer .closed-note { color: var(--white); }

/* ---------- Careers: job page ---------- */
.stack-lg > * + * { margin-top: 40px; }
.pay-line { font-family: var(--display); font-weight: 600; font-size: 1.45rem; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 22px; max-width: 24ch; }
.perks .value { font-size: 1.1rem; }
.shop-hours { margin: 4px 0 16px; }
.shop-hours > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.shop-hours dt { font-weight: 600; }
.shop-hours dd { margin: 0; color: var(--muted); text-align: right; }
.values-head { margin-top: 1.4em; }

/* ---------- Careers: open positions ---------- */
.openings { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); }
.openings > li { display: grid; gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--line); }
.openings h3 { font-size: clamp(1.9rem, 7vw, 2.6rem); font-variation-settings: "WONK" 1; margin: 0 0 .15em; }
.openings p { margin: 0; color: var(--muted); }
.opening-go { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
@media (min-width: 900px) { .openings > li { grid-template-columns: 1fr auto; align-items: center; gap: 48px; padding: 34px 0; } }
@media (min-width: 900px) { .steps.four { grid-template-columns: repeat(4, 1fr); gap: 32px; } .steps.two { grid-template-columns: repeat(2, 1fr); } .steps.many { grid-template-columns: repeat(3, 1fr); row-gap: 48px; } .steps.many li:nth-child(3n)::after { display: none; } }
.callout .checklist { margin-bottom: 0; }
.callout .checklist li:last-child { border-bottom: 0; padding-bottom: 0; }
.callout .checklist + p { margin-top: 12px; }
.callout h3 + .checklist li:first-child { padding-top: 4px; }
.callout h3 + .checklist li:first-child::before { top: 11px; }

/* ---------- Careers: application form ---------- */
:root { --error: #b3261e; }
.apply-wrap { display: grid; gap: 28px; }
.apply-intro h2 { font-size: 1.6rem; margin-bottom: .2em; }
.apply-intro p { margin-bottom: .6em; }
.apply-intro .eeo { font-size: .92rem; }
/* On a phone the form comes first and the job summary follows it. */
.apply-intro { order: 2; padding-top: 26px; border-top: 1.5px solid var(--ink); }
@media (min-width: 1000px) {
  .apply-wrap { grid-template-columns: 4fr 8fr; gap: 72px; align-items: start; }
  .apply-intro { order: 0; padding-top: 0; border-top: 0; position: sticky; top: calc(var(--header-h) + 32px); }
}
.apply-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.form-part { border-top: 1.5px solid var(--ink) !important; padding: 26px 0 38px !important; }
.form-part > legend { float: left; width: 100%; padding: 0; margin: 0 0 20px; font-family: var(--display); font-weight: 600; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.01em; }
.fields { clear: both; display: grid; gap: 22px 20px; align-items: end; }
@media (min-width: 700px) { .fields { grid-template-columns: 1fr 1fr; } .fields .wide, .fields .choice { grid-column: 1 / -1; } }
.field { min-width: 0; }
.field > label, .field > legend { display: block; padding: 0; margin: 0 0 6px; font-weight: 700; line-height: 1.35; }
.field .opt { font-weight: 400; font-size: .9rem; color: var(--muted); margin-left: 4px; }
.hint { margin: 0 0 8px; font-size: .95rem; color: var(--muted); max-width: 60ch; }
.field > label + .hint, .field > legend + .hint { margin-top: -2px; }
.field input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), .field select, .field textarea {
  display: block; width: 100%; min-height: 52px; padding: 12px 16px; background: var(--white); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 14px; font: inherit; line-height: 1.4;
}
.field textarea { min-height: 136px; resize: vertical; }
/* iPhone Safari draws date fields wider than their box, which pushed the whole page past
   the screen edge. Dropping the native look makes the field obey its width like the others. */
.field input[type="date"] { -webkit-appearance: none; appearance: none; }
.field input[type="date"]::-webkit-date-and-time-value { min-height: 1.4em; text-align: left; }
.field input, .field select, .field textarea { min-width: 0; max-width: 100%; }
.apply-wrap > *, .fields > * { min-width: 0; }
/* Safety net: nothing inside the application section can widen the page. */
#apply { overflow-x: clip; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 23px) 55%, calc(100% - 17px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--pink-ink); outline-offset: 2px; border-radius: 14px; }
.field [aria-invalid="true"], .field.invalid .chips { border-color: var(--error); }
.field.invalid .chip span { border-color: var(--error); }
.field-error { margin: 8px 0 0; color: var(--error); font-weight: 600; font-size: .95rem; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 9px 18px; background: var(--white); border: 1.5px solid var(--ink); border-radius: 999px; font-weight: 600; line-height: 1.2; transition: background-color .12s ease, color .12s ease; }
.chip input[type="checkbox"] + span { padding-left: 14px; }
.chip input[type="checkbox"] + span::before { content: ""; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--ink); border-radius: 6px; background: var(--white) center / 12px 12px no-repeat; }
.chip input:checked + span { background: var(--ink); color: var(--white); }
.chip input[type="checkbox"]:checked + span::before { border-color: var(--pink); background-color: var(--pink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.4l2.6 2.6L10 3.4' fill='none' stroke='%23211b23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.chip input:focus-visible + span { outline: 3px solid var(--pink-ink); outline-offset: 3px; }
.chip:hover input:not(:checked) + span { background: var(--pink-soft); }

.upload { padding: 18px; background: var(--pink-soft); border: 2px dashed var(--pink-deep); border-radius: 18px; }
.upload input[type="file"] { display: block; width: 100%; font: inherit; color: var(--ink); cursor: pointer; }
.upload input[type="file"]::file-selector-button { margin: 0 14px 0 0; min-height: 44px; padding: 8px 18px; background: var(--white); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 999px; font: 700 .98rem var(--body); cursor: pointer; }
.upload input[type="file"]:focus-visible { outline: 3px solid var(--pink-ink); outline-offset: 6px; border-radius: 10px; }
.upload.over { background: var(--white); border-style: solid; }

.confirm { border-top: 1.5px solid var(--ink); padding-top: 26px; }
.field > label.check { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-weight: 600; cursor: pointer; }
.check input { flex: none; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--pink-ink); }
.form-send { display: grid; gap: 14px; margin-top: 26px; }
.form-send .btn { justify-self: start; min-width: 220px; }
.form-send .btn[disabled] { opacity: .6; cursor: progress; }
.form-send .hint { margin: 0; }
@media (max-width: 519px) { .form-send .btn { justify-self: stretch; } }
.form-alert { margin: 0 0 26px; padding: 18px 20px; background: var(--white); border: 1.5px solid var(--error); border-radius: 18px; }
.form-alert p { margin: 0; font-weight: 700; }
.form-alert ul { margin: 8px 0 0; padding-left: 1.2em; }
.form-alert a { color: var(--error); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sent { background: var(--aqua-soft); border: 1.5px solid var(--ink); border-radius: 26px; padding: 30px 26px; }
.sent h3 { font-size: clamp(1.8rem, 6vw, 2.4rem); font-variation-settings: "WONK" 1; }
.sent p:last-child { margin-bottom: 0; }
.sent:focus { outline: none; }

/* ---------- Two price lists: new clients, and existing clients' locked rates ---------- */
.sizes .lbs { display: block; margin-top: 1px; font-size: .75rem; line-height: 1.25; }
/* Five sizes across a phone: the unit drops under the range in every cell, so none wraps alone. */
@media (max-width: 479px) { .sizes:not(.four) .lbs .u { display: block; } }
.sizes.four { grid-template-columns: repeat(4, 1fr); }
.doors { margin: 26px 0 0; }
.doors .who { font-size: 1.45rem; }
.h-sub { font-size: 1.6rem; }
@media (min-width: 700px) {
  .doors { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; border-top: 0; max-width: 860px; }
  .doors li { border-top: 1.5px solid var(--ink); }
}
@media (min-width: 900px) { .sizes .lbs { font-size: .76rem; } .doors { margin-top: 36px; } .doors .who { font-size: 1.7rem; } }

.locked { background: var(--ink); color: var(--white); }
.locked h2 { color: var(--white); }
.locked-head { display: grid; gap: 30px; margin-bottom: 36px; }
.locked-head p { color: #d8ccd4; margin-bottom: 0; }
.locked-head a, .locked-note a { color: var(--pink); }
.locked-head a:hover, .locked-note a:hover { color: var(--white); }
.locked .priced { border-top-color: rgba(255, 255, 255, .6); }
.locked .priced > li { border-bottom-color: rgba(255, 255, 255, .2); }
.locked .priced p { color: #d8ccd4; }
.locked .sizes { color: var(--ink); border-color: var(--white); }
.locked :focus-visible { outline-color: var(--pink); }
/* The date hangs on a pet tag, like the hours tag on the home page. */
.lock-tag { position: relative; justify-self: start; display: flex; flex-direction: column; margin: 0 0 6px; padding: 15px 28px 17px 60px; background: var(--pink); color: var(--ink); border-radius: 44px 18px 18px 44px; transform: rotate(-4deg); }
.lock-tag::before { content: ""; position: absolute; left: 20px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px var(--pink-deep); }
.lock-tag span { font-size: .9rem; font-weight: 600; }
.lock-tag b { font-family: var(--display); font-variation-settings: "WONK" 1; font-weight: 600; font-size: 1.9rem; line-height: 1.05; letter-spacing: -.01em; white-space: nowrap; }
.rate-cards { display: grid; gap: 20px; margin-top: 36px; }
.rate-cards .callout { color: var(--ink); border-color: var(--white); }
.rate-cards .fee-sheet > div:last-child { padding-bottom: 0; }
@media (min-width: 640px) and (max-width: 899px) { .rate-cards { grid-template-columns: 1fr 1fr; } }
.locked-note { margin: 28px 0 0; color: #d8ccd4; }
@media (min-width: 900px) {
  .locked-head { grid-template-columns: 1fr auto; align-items: end; gap: 56px; margin-bottom: 48px; }
  .lock-tag { justify-self: end; }
  .lock-tag b { font-size: 2.3rem; }
  .rate-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; margin-top: 48px; }
}

/* ---------- Book online: MoeGo's booking page in a frame ---------- */
.book-grid { display: grid; gap: 40px; }
.booking-frame { height: 800px; border: 1.5px solid var(--ink); border-radius: 24px; overflow: hidden; background: var(--white); }
.booking-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.book-fallback { margin: 12px 0 0; font-size: .95rem; }
.book-closed { margin-bottom: 20px; background: var(--pink-soft); }
.book-closed h2 { font-size: 1.3rem; margin-bottom: .35em; }
.book-notes h2 { font-size: 1.45rem; margin-top: 1.5em; }
.book-notes h2:first-child { margin-top: 0; }
.book-notes .fee-sheet { border-top: 1.5px solid var(--ink); padding-top: 4px; }
.book-rates { margin: 14px 0 0; }
@media (min-width: 900px) {
  .book-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; align-items: start; }
  .book-notes { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* ---------- A bold line under a service's description ---------- */
.priced p.price-note { margin-top: 10px; color: var(--ink); }
.locked .priced p.price-note { color: var(--white); }

/* ---------- About: the award ribbons from the home page, on a light background ---------- */
.award-list.light { margin: 26px 0 0; }
.award-list.light strong { color: var(--ink); font-size: 1.3rem; }
.award-list.light div span { color: var(--muted); font-size: .95rem; }
.award-list.light + .creds { margin-top: 22px; }

/* ---------- About: the Nextdoor line, with their trophy under it ---------- */
.fave { padding: 52px 0 56px; text-align: center; }
.fave h2 { max-width: 19ch; margin: 0 auto; font-size: clamp(1.5rem, 5.4vw, 2.1rem); line-height: 1.18; }
.fave-trophy { margin: 22px auto 0; width: max-content; }
.fave-trophy img { width: 104px; margin: 0 auto; }
/* The years sit on a label that overlaps the trophy's foot, the way Nextdoor shows each year. */
.fave-trophy figcaption { position: relative; margin: -9px auto 0; width: max-content; padding: 5px 14px 6px; background: var(--white); border: 1.5px solid var(--ink); border-radius: 12px; font-weight: 700; font-size: 1.05rem; line-height: 1.2; letter-spacing: .01em; }
@media (min-width: 900px) {
  .fave { padding: 72px 0 76px; }
  .fave-trophy img { width: 120px; }
  .fave-trophy figcaption { font-size: 1.15rem; }
}

/* ---------- Team page ---------- */
.team-soon { margin: 0; }
.team-soon-photo { position: relative; }
.team-soon-photo img { width: 100%; border-radius: 26px; aspect-ratio: 1400 / 1013; object-fit: cover; }
/* The notice hangs on a pet tag, like the hours tag and the locked-rates tag. */
.soon-tag { position: absolute; left: 14px; bottom: -26px; max-width: none; display: flex; flex-direction: column; margin: 0; padding: 14px 26px 16px 58px; background: var(--pink); color: var(--ink); border-radius: 44px 18px 18px 44px; transform: rotate(-4deg); box-shadow: 0 0 0 6px var(--cream); }
.soon-tag::before { content: ""; position: absolute; left: 20px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 0 4px var(--pink-deep); }
.soon-tag span { font-size: .9rem; font-weight: 600; }
.soon-tag b { font-family: var(--display); font-variation-settings: "WONK" 1; font-weight: 600; font-size: 1.9rem; line-height: 1.05; letter-spacing: -.01em; white-space: nowrap; }
.team-soon figcaption { margin-top: 44px; font-size: .9rem; color: var(--muted); }
.team-next { margin-top: 48px; }
.team-next h2 { font-size: clamp(1.7rem, 5.5vw, 2.4rem); }
@media (min-width: 900px) {
  .soon-tag { left: 36px; bottom: -34px; padding: 18px 36px 20px 70px; }
  .soon-tag::before { left: 26px; }
  .soon-tag b { font-size: 2.6rem; }
  .team-soon figcaption { margin-top: 52px; }
  .team-next { margin-top: 72px; }
}
/* Staff cards, used once TEAM in tools/build.py has people in it. */
.crew { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; }
.member-arch { border-radius: 999px 999px 22px 22px; overflow: hidden; background: var(--pink); padding: 6px; margin-bottom: 14px; }
.member-arch.aqua { background: var(--aqua); }
.member-arch.lav { background: var(--lav); }
.member-arch img, .member-arch .initials { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 999px 999px 17px 17px; }
.member-arch .initials { background: var(--cream); font-family: var(--display); font-variation-settings: "WONK" 1; font-weight: 600; font-size: clamp(2.4rem, 11vw, 4rem); }
.member h2 { font-size: 1.35rem; margin: 0; }
.member .role { margin: 2px 0 8px; font-weight: 700; color: var(--pink-ink); }
.member p { margin: 0; color: var(--muted); }
.member h2 + .role + p { color: var(--ink); }
@media (min-width: 700px) { .crew { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 28px; } }
@media (min-width: 1000px) { .crew { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 32px; } .member h2 { font-size: 1.5rem; } }

/* ---------- The asterisk on prices, and the line it points to ---------- */
.ast { color: var(--pink-ink); font: 700 .8em/1 var(--body); margin-left: 2px; vertical-align: .2em; }
h1 .ast, h2 .ast { font-size: .5em; vertical-align: .7em; margin-left: 3px; }
.ast.lead { margin: 0 2px 0 0; font-size: 1em; vertical-align: baseline; }
.menu .price .ast { font-size: 1em; vertical-align: baseline; }
.price-foot { margin: 18px 0 0; max-width: 70ch; font-size: .95rem; color: var(--muted); }
.section-head .price-foot { margin: 0; font-size: .92rem; }
.locked .ast { color: var(--pink); }
.rate-cards .ast { color: var(--pink-ink); }