/* Layout: right-aligned Persian multi-page site. Steel-blue panel + quiet gray ground; one blue accent. */
:root {
  --bg: #eef1f5; --surface: #ffffff; --ink: #1b2531; --muted: #586678;
  --blue: #1f5ea6; --blue-deep: #17406f; --blue-soft: #dbe7f5; --line: #d3dbe5; --on-blue: #ffffff;
  --panel: #17406f;
  --font: "Vazirmatn", Tahoma, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; padding-inline: 18px; padding-block: 0;
  background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.9;
  direction: rtl; text-align: right;
}
.wrap { max-width: 1040px; margin-inline: auto; }
a { color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }

header.top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: 24px;
  padding: 10px 12px 10px 16px; margin-block: 14px 8px;
  box-shadow: 0 8px 28px rgba(23, 64, 111, .10);
  position: sticky; top: 10px; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; }
.brand svg { width: 34px; height: 34px; color: var(--blue); flex: none; }
nav { display: flex; gap: 2px; background: var(--bg); padding: 4px; border-radius: 999px; }
nav a { text-decoration: none; padding: 7px 16px; border-radius: 999px; color: var(--muted); font-size: 15px; font-weight: 500; text-align: center; white-space: nowrap; }
nav a:hover { background: var(--blue-soft); color: var(--blue-deep); }
nav a[aria-current="page"] { background: var(--blue); color: var(--on-blue); }

.hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; align-items: stretch; padding-block: 20px 36px; }
.hero > div { min-width: 0; }
h1 { font-size: clamp(32px, 6vw, 58px); line-height: 1.3; margin: 8px 0 14px; font-weight: 800; letter-spacing: -0.5px; text-wrap: balance; }
h1 span { color: var(--blue); }
.role { display: inline-block; font-size: 14px; font-weight: 500; color: var(--blue-deep); background: var(--blue-soft); padding: 4px 14px; border-radius: 999px; }
.lead { color: var(--muted); max-width: 52ch; margin: 0 0 24px; font-size: 17px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 12px; font-weight: 700; font-size: 16px; text-decoration: none; border: 2px solid var(--blue); cursor: pointer; font-family: inherit; }
.btn.primary { background: var(--blue); color: var(--on-blue); }
.btn.ghost { background: transparent; color: var(--blue-deep); }
.btn:hover { filter: brightness(1.06); }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.facts li { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 6px 14px; font-size: 14.5px; }
.facts b { color: var(--blue-deep); }

.panel { background: var(--panel); color: #fff; border-radius: 28px; padding: 28px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 320px; }
.panel .paw { position: absolute; inset-block-start: -30px; inset-inline-start: -30px; width: 260px; height: 260px; color: rgba(255,255,255,.1); }
.panel ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; position: relative; }
.panel li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(255,255,255,.1); border-radius: 14px; font-weight: 500; }
.panel li svg { width: 24px; height: 24px; flex: none; }
.panel small { display: block; margin-bottom: 12px; opacity: .8; position: relative; }

section { padding-block: 32px; }
h2 { font-size: 28px; line-height: 1.4; margin: 0 0 6px; font-weight: 800; text-wrap: balance; }
h3 { margin: 0 0 4px; font-size: 20px; }
.sub { color: var(--muted); margin: 0 0 22px; max-width: 60ch; }
.page-head { padding-block: 24px 6px; }
.page-head h1 { font-size: clamp(30px, 5vw, 44px); margin: 0 0 8px; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 24px; min-width: 0; }
.card p { margin: 0; color: var(--muted); }
.ic { width: 46px; height: 46px; border-radius: 14px; background: var(--blue-soft); color: var(--blue-deep); display: grid; place-items: center; margin-bottom: 12px; }
.ic svg { width: 26px; height: 26px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid.five > .card { grid-column: span 2; }
.grid.five > .card:nth-child(n+4) { grid-column: span 3; }
.link { display: inline-block; margin-top: 10px; color: var(--blue-deep); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--blue-soft); }
.link:hover { border-color: var(--blue); }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step { border-top: 3px solid var(--blue); padding-top: 14px; min-width: 0; }
.step b { display: block; font-size: 18px; margin-bottom: 2px; }
.step span { color: var(--muted); }

.cta { background: var(--panel); color: #fff; border-radius: 24px; padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.cta h2 { margin: 0 0 4px; }
.cta p { margin: 0; opacity: .85; }
.cta .btn { background: #fff; color: #17406f; border-color: #fff; }

.group { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 26px; margin-bottom: 18px; }
.group header { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.group header .ic { margin: 0; flex: none; }
.group header p { margin: 0; color: var(--muted); }
.items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; padding: 0; list-style: none; }
.items li { border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; background: var(--bg); min-width: 0; }
.items b { display: block; color: var(--blue-deep); }
.items span { color: var(--muted); font-size: 15px; }

.about { display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 28px; }
.about > * { min-width: 0; }
.photo { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: 50% 40%; border-radius: 22px; display: block; background: var(--blue-soft); }
.about p { margin: 0 0 10px; }
.table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.table th, .table td { text-align: right; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.table th { width: 30%; color: var(--muted); font-weight: 500; }

.contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.row { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; display: flex; flex-direction: column; min-width: 0; }
.row small { color: var(--muted); font-size: 13.5px; }
.row .val { font-weight: 700; overflow-wrap: anywhere; }
.row a.val { text-decoration: none; color: var(--blue-deep); }

footer { padding-block: 26px 40px; color: var(--muted); font-size: 14px; border-top: 1px solid var(--line); margin-top: 24px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

@media (max-width: 800px) {
  .grid.five { grid-template-columns: 1fr; }
  .grid.five > .card, .grid.five > .card:nth-child(n+4) { grid-column: auto; }
  .hero, .about, .grid.two, .contact, .items, .steps { grid-template-columns: 1fr; }
  .panel { min-height: 0; }
  header.top { padding: 12px; justify-content: center; }
  .brand { width: 100%; justify-content: center; }
  nav { width: 100%; }
  nav a { flex: 1 1 auto; padding: 7px 6px; font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* booking */
.book-top { background: var(--panel); color: #fff; border-radius: 28px; padding: 30px 28px; margin-top: 8px; position: relative; overflow: hidden; }
.book-top h1 { margin: 8px 0 6px; font-size: clamp(30px, 5vw, 44px); }
.book-top p { margin: 0; max-width: 52ch; opacity: .9; position: relative; }
.book-top > *:not(.paw-bg) { position: relative; }
.paw-bg { position: absolute; inset-block-start: -40px; inset-inline-start: -30px; width: 240px; height: 240px; color: rgba(255,255,255,.09); }
.paw-bg svg { width: 100%; height: 100%; }
.book-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
.book-grid > * { min-width: 0; }
.form label { display: block; font-weight: 700; margin: 14px 0 4px; }
.form label:first-child { margin-top: 0; }
.form input, .form select, .form textarea { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 14px; min-width: 0; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form .two > * { min-width: 0; }
.form .send { margin-top: 20px; width: 100%; justify-content: center; }
.form .hint { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }
.side dl { margin: 10px 0 0; }
.side dt { color: var(--muted); font-size: 13.5px; margin-top: 10px; }
.side dd { margin: 0; font-weight: 700; }
@media (max-width: 800px) { .book-grid { grid-template-columns: 1fr; } .form .two { grid-template-columns: 1fr; } }

/* hero accordion */
.acc { display: grid; gap: 10px; position: relative; }
.acc details { background: rgba(255,255,255,.1); border-radius: 14px; overflow: hidden; transition: background .15s; }
.acc details[open] { background: rgba(255,255,255,.18); }
.acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 14px; font-weight: 500; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { background: rgba(255,255,255,.08); }
.acc summary > svg:first-child { width: 24px; height: 24px; flex: none; }
.acc summary span { flex: 1; min-width: 0; }
.acc .chev { width: 20px; height: 20px; flex: none; transition: transform .2s; opacity: .8; }
.acc details[open] .chev { transform: rotate(180deg); }
.acc p { margin: 0; padding: 0 14px 14px 14px; font-size: 15px; line-height: 1.8; opacity: .92; }
.acc p a { color: #fff; font-weight: 700; text-underline-offset: 3px; }
.acc summary:focus-visible { outline-color: #fff; }
@media (prefers-reduced-motion: reduce) { .acc .chev, .acc details { transition: none; } }

/* services: navy frame with paw header */
.group { padding: 0; overflow: hidden; border: 2px solid var(--panel); }
.group header.gh { background: var(--panel); color: #fff; padding: 20px 24px; margin: 0; position: relative; overflow: hidden; }
.group header.gh > *:not(.pawdeco) { position: relative; }
.group header.gh .ic { background: rgba(255,255,255,.16); color: #fff; }
.group header.gh h2 { color: #fff; }
.group header.gh p { color: rgba(255,255,255,.85); }
.pawdeco { position: absolute; inset-inline-start: -18px; inset-block-start: -22px; width: 150px; height: 150px; color: rgba(255,255,255,.11); transform: rotate(-12deg); }
.group .items { margin: 0; padding: 20px 24px 24px; }

/* floating consultation button */
body { padding-block-end: 96px; }
.fab { position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: inline-flex; align-items: center; gap: 8px; background: var(--blue); color: var(--on-blue); text-decoration: none; font-weight: 700; padding: 13px 22px; border-radius: 999px; box-shadow: 0 10px 28px rgba(23,64,111,.35); border: 2px solid var(--on-blue); white-space: nowrap; }
.fab svg { width: 22px; height: 22px; }
.fab:hover { filter: brightness(1.07); }

/* pets gallery */
.pets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pet { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 14px 14px 12px; text-align: center; min-width: 0; transition: transform .2s; }
.pet:hover { transform: translateY(-4px) rotate(-1deg); }
.pet-art { background: var(--blue-soft); border-radius: 18px; padding: 10px; aspect-ratio: 1; display: grid; place-items: center; }
.pet-art svg { width: 100%; height: 100%; display: block; }
.pet figcaption { margin-top: 8px; font-weight: 700; color: var(--blue-deep); }
@media (max-width: 800px) { .pets { gap: 10px; } .pet { padding: 8px 8px 6px; border-radius: 18px; } .pet-art { padding: 4px; border-radius: 12px; } .pet figcaption { font-size: 14px; margin-top: 4px; } }
@media (prefers-reduced-motion: reduce) { .pet { transition: none; } .pet:hover { transform: none; } }

/* photos: solo card, gallery, lightbox */
.solo { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 22px; }
.solo-text { flex: 1; min-width: 0; }
.solo-text h2 { margin-bottom: 8px; }
.ph { position: relative; display: block; overflow: hidden; border-radius: 18px; border: 1px solid var(--line); background: var(--blue-soft); cursor: zoom-in; }
.ph img, .ph video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ph:hover img, .ph:hover video { transform: scale(1.03); }
.ph img, .ph video { transition: transform .25s; }
.zoom { position: absolute; inset-block-end: 8px; inset-inline-end: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(23,64,111,.82); color: #fff; display: grid; place-items: center; }
.zoom svg { width: 17px; height: 17px; }
.solo-ph { flex: none; width: 170px; aspect-ratio: 3 / 4; }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gallery .ph { aspect-ratio: 4 / 5; }

.lb { position: fixed; inset: 0; z-index: 60; background: rgba(8,16,26,.9); display: flex; align-items: center; justify-content: center; padding: 56px 12px 24px; }
.lb[hidden] { display: none; }
.lb-body { max-width: 100%; max-height: 100%; display: flex; align-items: center; justify-content: center; min-width: 0; }
.lb-body img, .lb-body video { max-width: 100%; max-height: calc(100vh - 100px); width: auto; height: auto; border-radius: 14px; display: block; background: #000; }
.lb button { border: 0; background: rgba(255,255,255,.16); color: #fff; cursor: pointer; font-family: inherit; line-height: 1; border-radius: 999px; }
.lb button:hover { background: rgba(255,255,255,.28); }
.lb-x { position: absolute; inset-block-start: calc(12px + env(safe-area-inset-top, 0px)); inset-inline-start: 14px; width: 44px; height: 44px; font-size: 28px; }
.lb-prev, .lb-next { flex: none; width: 44px; height: 44px; font-size: 30px; margin-inline: 6px; }
.lb[data-single="1"] .lb-prev, .lb[data-single="1"] .lb-next { visibility: hidden; }
body.lb-open { overflow: hidden; }

@media (max-width: 800px) {
  .solo { gap: 14px; padding: 16px; }
  .solo-ph { width: 118px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lb-prev, .lb-next { position: absolute; inset-block-end: 14px; margin: 0; }
  .lb-prev { inset-inline-end: calc(50% + 8px); }
  .lb-next { inset-inline-start: calc(50% + 8px); }
}
@media (prefers-reduced-motion: reduce) { .ph img, .ph video { transition: none; } .ph:hover img, .ph:hover video { transform: none; } }

/* articles */
.agrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.acard { display: flex; flex-direction: column; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 20px; text-decoration: none; min-width: 0; transition: transform .2s, border-color .2s; }
.acard:hover { transform: translateY(-3px); border-color: var(--blue); }
.acard h3 { margin: 4px 0 0; font-size: 19px; line-height: 1.6; }
.acard p { margin: 0; color: var(--muted); font-size: 15px; flex: 1; }
.tag { display: inline-block; align-self: flex-start; font-size: 13px; font-weight: 700; color: var(--blue-deep); background: var(--blue-soft); padding: 2px 12px; border-radius: 999px; }
.meta { color: var(--muted); font-size: 13.5px; }
.back { display: inline-block; margin-bottom: 8px; text-decoration: none; color: var(--blue-deep); font-weight: 700; }
.back:hover { text-decoration: underline; }
.article { max-width: 720px; padding-block: 8px 24px; }
.article .lead2 { font-size: 18px; color: var(--muted); margin: 6px 0 12px; }
.article h2 { font-size: 23px; margin: 30px 0 8px; }
.article p { margin: 0 0 12px; }
.article ul { margin: 6px 0 14px; padding-inline-start: 22px; padding-inline-end: 0; }
.article li { margin: 4px 0; }
.note { background: var(--blue-soft); border-radius: 18px; padding: 14px 18px; margin: 16px 0; border-inline-start: 5px solid var(--blue); }
.note b { display: block; margin-bottom: 4px; color: var(--blue-deep); }
.note p { margin: 0; }
.note ul { margin-bottom: 0; }
.note.warn { background: color-mix(in srgb, #e5a23a 20%, var(--surface)); border-inline-start-color: #d98a1a; }
.note.warn b { color: var(--ink); }
.note.soft { background: var(--surface); border: 1px solid var(--line); border-inline-start: 5px solid var(--line); }
.faq { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; margin: 8px 0; }
.faq summary { cursor: pointer; padding: 12px 16px; font-weight: 700; }
.faq p { margin: 0; padding: 0 16px 14px; color: var(--muted); }
.vid video { width: 100%; max-width: 560px; border-radius: 20px; display: block; background: #000; }
@media (max-width: 800px) {
  .agrid { grid-template-columns: 1fr; }
  nav a { font-size: 13.5px !important; padding: 7px 4px !important; }
  nav { gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .acard { transition: none; } .acard:hover { transform: none; } }

/* navy article cards */
.acard { position: relative; overflow: hidden; background: var(--panel); color: #fff; border-color: transparent; }
.acard::before { content: ""; position: absolute; inset-block-start: -26px; inset-inline-start: -22px; width: 130px; height: 130px; transform: rotate(-12deg); opacity: .09; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%23fff'%3E%3Cellipse cx='13' cy='21' rx='5' ry='6.5'/%3E%3Cellipse cx='22' cy='12' rx='5' ry='6.5'/%3E%3Cellipse cx='34' cy='12' rx='5' ry='6.5'/%3E%3Cellipse cx='43' cy='21' rx='4.5' ry='6'/%3E%3Cpath d='M28 24c-7 0-14 7-14 13 0 4 3 6 7 6 3 0 4-1 7-1s4 1 7 1c4 0 7-2 7-6 0-6-7-13-14-13z'/%3E%3C/svg%3E"); }
.acard > * { position: relative; }
.acard h3 { color: #fff; }
.acard p { color: rgba(255,255,255,.84); }
.acard .tag { background: rgba(255,255,255,.16); color: #fff; }
.acard .meta { color: rgba(255,255,255,.72); }
.acard:hover { border-color: transparent; filter: brightness(1.12); }

/* quick tips, ask box, footer links */
.tips { display: grid; gap: 10px; }
.tip { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.tip summary { cursor: pointer; padding: 14px 18px; font-weight: 700; font-size: 17px; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tip summary::-webkit-details-marker { display: none; }
.tip summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--blue-soft); color: var(--blue-deep); display: grid; place-items: center; font-size: 20px; line-height: 1; }
.tip[open] summary::after { content: "−"; background: var(--blue); color: var(--on-blue); }
.tip[open] { border-color: var(--blue); }
.tip-body { padding: 0 18px 18px; }
.tip-body ul { margin: 0 0 10px; padding-inline-start: 22px; padding-inline-end: 0; }
.tip-body li { margin: 4px 0; }
.tip-body .depends { margin: 10px 0 14px; color: var(--muted); font-size: 15px; }
.btn.small { padding: 8px 18px; font-size: 15px; border-radius: 10px; background: var(--blue); color: var(--on-blue); }
.askbox { background: var(--panel); color: #fff; border-radius: 24px; padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 720px; }
.askbox h2 { margin: 0 0 2px; font-size: 22px; }
.askbox p { margin: 0; opacity: .86; }
.askbox .btn { background: #fff; color: #17406f; border-color: #fff; }
.flinks { display: flex; gap: 14px; flex-wrap: wrap; }
.flinks a { color: var(--blue-deep); font-weight: 700; text-decoration: none; }
.flinks a:hover { text-decoration: underline; }

/* tips: paw icons + general ask */
.tip { position: relative; }
.tip summary { justify-content: flex-start; }
.tip summary > span { flex: 1; min-width: 0; }
.tip summary .tp { width: 30px; height: 30px; flex: none; color: var(--blue); background: var(--blue-soft); border-radius: 10px; padding: 5px; }
.tip[open] summary .tp { background: var(--blue); color: var(--on-blue); }
.tip::after { content: ""; position: absolute; inset-block-end: -18px; inset-inline-start: -14px; width: 110px; height: 110px; transform: rotate(-14deg); pointer-events: none; opacity: 0; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='%231f5ea6'%3E%3Cellipse cx='13' cy='21' rx='5' ry='6.5'/%3E%3Cellipse cx='22' cy='12' rx='5' ry='6.5'/%3E%3Cellipse cx='34' cy='12' rx='5' ry='6.5'/%3E%3Cellipse cx='43' cy='21' rx='4.5' ry='6'/%3E%3Cpath d='M28 24c-7 0-14 7-14 13 0 4 3 6 7 6 3 0 4-1 7-1s4 1 7 1c4 0 7-2 7-6 0-6-7-13-14-13z'/%3E%3C/svg%3E"); }
.tip[open]::after { opacity: .08; }
.tip-body { position: relative; z-index: 1; }
.tips-ask { margin-top: 14px; background: var(--panel); color: #fff; border-radius: 20px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; position: relative; overflow: hidden; }
.tips-ask p { margin: 0; font-weight: 700; }
.tips-ask .btn { background: #fff; color: #17406f; border-color: #fff; }

/* slider */
.slider { position: relative; flex: none; width: 260px; }
.slider .viewport { overflow: hidden; border-radius: 18px; direction: ltr; touch-action: pan-y; }
.slider .track { display: flex; direction: ltr; transition: transform .45s ease; will-change: transform; }
.slider .slide { flex: 0 0 100%; aspect-ratio: 4 / 5; border-radius: 0; border: 0; }
.slider .s-prev, .slider .s-next { position: absolute; inset-block-start: 45%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(23,64,111,.78); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; font-family: inherit; display: grid; place-items: center; padding: 0 0 3px; }
.slider .s-prev { left: 8px; }
.slider .s-next { right: 8px; }
.slider .s-prev:hover, .slider .s-next:hover { background: rgba(23,64,111,.95); }
.slider .dots { display: flex; justify-content: center; gap: 7px; margin-top: 10px; }
.slider .dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; background: var(--line); cursor: pointer; transition: background .2s, width .2s; }
.slider .dot[aria-current="true"] { background: var(--blue); width: 22px; border-radius: 6px; }
@media (max-width: 800px) {
  .solo { flex-direction: column; align-items: stretch; }
  .slider { width: 100%; max-width: 300px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) { .slider .track { transition: none; } }

/* compact top banner slider */
.solo { gap: 18px; padding: 14px 18px 14px 14px; border-radius: 22px; margin-top: 4px; }
.solo-text h2 { font-size: 24px; margin-bottom: 2px; }
.solo-text .sub { margin-bottom: 6px; font-size: 15px; }
.slider { width: 200px; }
.slider .slide { aspect-ratio: 1 / 1; }
.slider .dots { margin-top: 8px; }
@media (max-width: 800px) {
  .solo { flex-direction: row; align-items: center; gap: 12px; padding: 12px; }
  .solo-text h2 { font-size: 20px; }
  .solo-text .sub { font-size: 13.5px; line-height: 1.7; }
  .slider { width: 140px; max-width: 140px; margin-inline: 0; flex: none; }
  .slider .s-prev, .slider .s-next { width: 28px; height: 28px; font-size: 20px; }
  .slider .dot { width: 7px; height: 7px; }
  .slider .dot[aria-current="true"] { width: 16px; }
}

/* banner coverflow slider */
.solo.banner { display: block; position: relative; overflow: hidden; padding: 16px 0 12px; border-radius: 24px; background: linear-gradient(180deg, var(--surface), var(--blue-soft)); }
.banner .deco { position: absolute; pointer-events: none; color: var(--blue); opacity: .09; }
.banner .deco.d1 { width: 120px; height: 120px; inset-block-start: -22px; inset-inline-start: -16px; transform: rotate(-14deg); }
.banner .deco.d2 { width: 90px; height: 90px; inset-block-end: -18px; inset-inline-end: 4%; transform: rotate(16deg); }
.banner .deco.d3 { width: 42px; height: 42px; inset-block-start: 14px; inset-inline-end: 38%; opacity: .12; color: #d8526b; }
.banner .deco.d4 { width: 30px; height: 30px; inset-block-end: 20px; inset-inline-start: 30%; opacity: .12; color: #d8526b; }
.banner-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; flex-wrap: wrap; padding-inline: 22px; margin-bottom: 12px; }
.banner-head h2 { margin: 0; font-size: 24px; }
.banner-head .sub { margin: 0; font-size: 15px; }
.banner-head .link { margin: 0; }
.banner .slider { position: relative; width: 100%; max-width: none; margin: 0; flex: none; --sw: 190px; }
.banner .viewport { border-radius: 0; direction: ltr; }
.banner .track { display: flex; gap: 14px; direction: ltr; transition: transform .5s ease; padding-block: 8px; }
.banner .slide { flex: 0 0 var(--sw); width: var(--sw); aspect-ratio: 4 / 5; border-radius: 18px; border: 2px solid var(--surface); box-shadow: 0 8px 22px rgba(23,64,111,.18); filter: blur(2.5px); opacity: .6; transform: scale(.92); transition: filter .4s, opacity .4s, transform .4s; cursor: pointer; }
.banner .slide.is-active { filter: none; opacity: 1; transform: scale(1); cursor: zoom-in; z-index: 1; }
.banner .slide .zoom { opacity: 0; }
.banner .slide.is-active .zoom { opacity: 1; }
.banner .dots { margin-top: 6px; }
@media (max-width: 800px) {
  .solo.banner { flex-direction: initial; padding: 14px 0 10px; }
  .banner .slider { --sw: 148px; max-width: none; margin: 0; }
  .banner .track { gap: 10px; }
  .banner-head { padding-inline: 16px; }
  .banner-head h2 { font-size: 21px; }
  .banner-head .sub { font-size: 13.5px; }
  .banner .s-prev, .banner .s-next { width: 30px; height: 30px; font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .banner .track, .banner .slide { transition: none; } }

/* vet tag in header */
.vet-tag { display: inline-block; margin-inline-start: 2px; padding: 3px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #1f5ea6, #17406f); box-shadow: 0 4px 10px rgba(23,64,111,.25); white-space: nowrap; }
@media (max-width: 800px) { .brand { flex-wrap: wrap; justify-content: center; row-gap: 4px; } }

/* online visit sheet */
.sheet { position: fixed; inset: 0; z-index: 70; background: rgba(8,16,26,.62); display: flex; align-items: flex-end; justify-content: center; padding: 12px; }
.sheet[hidden] { display: none; }
.sheet-card { position: relative; width: 100%; max-width: 460px; background: var(--surface); border-radius: 26px; padding: 26px 22px 22px; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.sheet-card h2 { margin: 0 0 6px; font-size: 24px; }
.sheet-card p { margin: 0 0 16px; color: var(--muted); font-size: 15px; }
.sheet-x { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--blue-soft); color: var(--blue-deep); font-size: 22px; cursor: pointer; font-family: inherit; }
.sheet-list { display: grid; gap: 10px; }
.sheet-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-radius: 16px; border: 2px solid var(--blue); background: var(--blue); color: var(--on-blue); text-decoration: none; font-weight: 700; }
.sheet-opt small { font-weight: 400; opacity: .85; font-size: 13px; }
.sheet-opt.alt { background: var(--surface); color: var(--blue-deep); }
@media (min-width: 700px) { .sheet { align-items: center; } }
.btn.online { background: var(--blue-soft); color: var(--blue-deep); border-color: var(--blue-soft); }

.sheet-when { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.sheet-when select { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.sheet-when select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }

/* today strip */
.today { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; padding: 6px 16px; border-radius: 999px; background: var(--panel); color: #fff; font-size: 13.5px; line-height: 1.7; }
.today[hidden] { display: none; }
.today .t-time { font-weight: 800; font-variant-numeric: tabular-nums; background: rgba(255,255,255,.16); padding: 0 10px; border-radius: 999px; }
.today .t-state { position: relative; padding-inline-start: 16px; opacity: .92; }
.today .t-state::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #9fb4cc; }
.today.is-open .t-state::before { background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.25); }
header.top { margin-block-start: 8px; }
@media (max-width: 800px) { .today { font-size: 12.5px; gap: 2px 10px; padding: 5px 12px; border-radius: 18px; } }

/* page background: scattered paws and hearts */

/* reviews */
.rv-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rv-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 4px; }
.rv { position: relative; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 22px 20px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; box-shadow: 0 10px 26px rgba(23,64,111,.07); }
.rv .qm { position: absolute; inset-block-start: 16px; inset-inline-start: 16px; width: 34px; height: 34px; color: var(--blue); opacity: .16; }
.rv-flag { align-self: flex-start; font-size: 12px; font-weight: 700; color: #8a5a00; background: #ffe8b8; padding: 1px 10px; border-radius: 999px; }
.stars { display: flex; gap: 2px; color: #f0b429; }
.stars svg { width: 18px; height: 18px; }
.rv blockquote { margin: 0; flex: 1; color: var(--ink); line-height: 1.95; }
.rv figcaption { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.rv .av { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; }
.rv .av svg { width: 22px; height: 22px; }
.rv figcaption b { display: block; line-height: 1.4; }
.rv figcaption small { color: var(--muted); font-size: 13px; }
.rv-cta { margin-top: 16px; background: var(--panel); color: #fff; border-radius: 20px; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rv-cta p { margin: 0; font-weight: 700; }
.rv-cta .btn { background: #fff; color: #17406f; border-color: #fff; }
@media (max-width: 800px) {
  .rv-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding-bottom: 10px; margin-inline: -16px; padding-inline: 16px; -webkit-overflow-scrolling: touch; }
  .rv { flex: 0 0 84%; scroll-snap-align: center; }
}

/* second, offset layer for a livelier background */
.rv .qm { inset-inline-start: auto; inset-inline-end: 16px; }

/* review form */
.rstars { display: flex; gap: 6px; margin-bottom: 12px; direction: ltr; justify-content: flex-end; }
.rstars button { width: 42px; height: 42px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--bg); color: #c3ccd8; font-size: 24px; line-height: 1; cursor: pointer; padding: 0 0 2px; }
.rstars button.on { color: #f0b429; border-color: #f0b429; background: #fff8e6; }
.rform { display: grid; gap: 10px; margin-bottom: 14px; }
.rform input[type="text"], .rform select, .rform textarea { width: 100%; font: inherit; color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 14px; min-width: 0; }
.rform input:focus, .rform select:focus, .rform textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.rform .chk { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--muted); line-height: 1.7; }
.rform .chk input { margin-top: 5px; flex: none; }
#rsheet .sheet-card { max-height: 92vh; overflow-y: auto; }

/* compact home cards */
section:has(.compact) { padding-block: 18px; }
section:has(.compact) h2 { font-size: 24px; }
section:has(.compact) .sub { margin-bottom: 12px; font-size: 15px; }
.compact .card { display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; row-gap: 2px; align-items: start; padding: 14px 16px; border-radius: 18px; }
.compact .card .ic { grid-row: 1 / span 3; width: 42px; height: 42px; margin: 0; border-radius: 12px; }
.compact .card .ic svg { width: 22px; height: 22px; }
.compact .card h3 { font-size: 17px; margin: 0; line-height: 1.5; }
.compact .card p { font-size: 14.5px; line-height: 1.75; }
.compact .card .link { grid-column: 2; margin-top: 4px; justify-self: start; }
.grid.compact { gap: 12px; }
@media (max-width: 800px) {
  .grid.five.compact { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 8px; margin-inline: -16px; padding-inline: 16px; -webkit-overflow-scrolling: touch; }
  .grid.five.compact > .card, .grid.five.compact > .card:nth-child(n+4) { flex: 0 0 80%; grid-column: auto; scroll-snap-align: center; }
  .grid.compact:not(.five) { grid-template-columns: 1fr; }
}
.sheet-x { inset-inline-start: auto; inset-inline-end: 12px; }
.sheet-card h2 { padding-inline-end: 0; }

/* page background (plain CSS, works on older browsers too) */
body { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%22560%22%20height%3D%22560%22%20viewBox%3D%220%200%20560%20560%22%3E%3Cdefs%3E%3Cg%20id%3D%22p%22%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%2221%22%20rx%3D%225%22%20ry%3D%226.5%22/%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2212%22%20rx%3D%225%22%20ry%3D%226.5%22/%3E%3Cellipse%20cx%3D%2234%22%20cy%3D%2212%22%20rx%3D%225%22%20ry%3D%226.5%22/%3E%3Cellipse%20cx%3D%2243%22%20cy%3D%2221%22%20rx%3D%224.5%22%20ry%3D%226%22/%3E%3Cpath%20d%3D%22M28%2024c-7%200-14%207-14%2013%200%204%203%206%207%206%203%200%204-1%207-1s4%201%207%201c4%200%207-2%207-6%200-6-7-13-14-13z%22/%3E%3C/g%3E%3Cpath%20id%3D%22h%22%20d%3D%22M24%2042s-14-8.800-14-20a8%208%200%200%201%2014-5.200A8%208%200%200%201%2038%2022c0%2011.200-14%2020-14%2020z%22/%3E%3C/defs%3E%3Cuse%20xlink%3Ahref%3D%22%23p%22%20transform%3D%22translate%2860%2070%29%20rotate%28-20%29%20scale%281.35%29%20translate%28-24%20-24%29%22%20fill%3D%22%231f5ea6%22%20opacity%3D%220.07%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23p%22%20transform%3D%22translate%28300%2040%29%20rotate%2815%29%20scale%280.8250000000000001%29%20translate%28-24%20-24%29%22%20fill%3D%22%235f9fe6%22%20opacity%3D%220.15%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23p%22%20transform%3D%22translate%28470%20150%29%20rotate%2825%29%20scale%281.6500000000000001%29%20translate%28-24%20-24%29%22%20fill%3D%22%231f5ea6%22%20opacity%3D%220.06%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23p%22%20transform%3D%22translate%28150%20260%29%20rotate%28-35%29%20scale%280.8999999999999999%29%20translate%28-24%20-24%29%22%20fill%3D%22%235f9fe6%22%20opacity%3D%220.14%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23p%22%20transform%3D%22translate%28380%20330%29%20rotate%2810%29%20scale%281.2000000000000002%29%20translate%28-24%20-24%29%22%20fill%3D%22%231f5ea6%22%20opacity%3D%220.07%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23p%22%20transform%3D%22translate%2860%20440%29%20rotate%2830%29%20scale%281.5%29%20translate%28-24%20-24%29%22%20fill%3D%22%235f9fe6%22%20opacity%3D%220.13%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23p%22%20transform%3D%22translate%28260%20470%29%20rotate%28-10%29%20scale%280.75%29%20translate%28-24%20-24%29%22%20fill%3D%22%231f5ea6%22%20opacity%3D%220.08%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23p%22%20transform%3D%22translate%28500%20500%29%20rotate%28-25%29%20scale%281.0499999999999998%29%20translate%28-24%20-24%29%22%20fill%3D%22%235f9fe6%22%20opacity%3D%220.14%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23h%22%20transform%3D%22translate%28215%20150%29%20rotate%28-12%29%20scale%281.04%29%20translate%28-24%20-24%29%22%20fill%3D%22%23e58aa0%22%20opacity%3D%220.16%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23h%22%20transform%3D%22translate%28445%20425%29%20rotate%28-12%29%20scale%280.8450000000000001%29%20translate%28-24%20-24%29%22%20fill%3D%22%23e58aa0%22%20opacity%3D%220.15%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23h%22%20transform%3D%22translate%28115%20345%29%20rotate%28-12%29%20scale%280.65%29%20translate%28-24%20-24%29%22%20fill%3D%22%23e58aa0%22%20opacity%3D%220.15%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23h%22%20transform%3D%22translate%28330%20215%29%20rotate%2814%29%20scale%280.5850000000000001%29%20translate%28-24%20-24%29%22%20fill%3D%22%23e58aa0%22%20opacity%3D%220.12%22/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%22560%22%20height%3D%22560%22%20viewBox%3D%220%200%20560%20560%22%3E%3Cdefs%3E%3Cg%20id%3D%22p%22%3E%3Cellipse%20cx%3D%2213%22%20cy%3D%2221%22%20rx%3D%225%22%20ry%3D%226.5%22/%3E%3Cellipse%20cx%3D%2222%22%20cy%3D%2212%22%20rx%3D%225%22%20ry%3D%226.5%22/%3E%3Cellipse%20cx%3D%2234%22%20cy%3D%2212%22%20rx%3D%225%22%20ry%3D%226.5%22/%3E%3Cellipse%20cx%3D%2243%22%20cy%3D%2221%22%20rx%3D%224.5%22%20ry%3D%226%22/%3E%3Cpath%20d%3D%22M28%2024c-7%200-14%207-14%2013%200%204%203%206%207%206%203%200%204-1%207-1s4%201%207%201c4%200%207-2%207-6%200-6-7-13-14-13z%22/%3E%3C/g%3E%3Cpath%20id%3D%22h%22%20d%3D%22M24%2042s-14-8.800-14-20a8%208%200%200%201%2014-5.200A8%208%200%200%201%2038%2022c0%2011.200-14%2020-14%2020z%22/%3E%3C/defs%3E%3Cuse%20xlink%3Ahref%3D%22%23p%22%20transform%3D%22translate%2860%2070%29%20rotate%28-20%29%20scale%281.35%29%20translate%28-24%20-24%29%22%20fill%3D%22%231f5ea6%22%20opacity%3D%220.07%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23p%22%20transform%3D%22translate%28300%2040%29%20rotate%2815%29%20scale%280.8250000000000001%29%20translate%28-24%20-24%29%22%20fill%3D%22%235f9fe6%22%20opacity%3D%220.15%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23p%22%20transform%3D%22translate%28470%20150%29%20rotate%2825%29%20scale%281.6500000000000001%29%20translate%28-24%20-24%29%22%20fill%3D%22%231f5ea6%22%20opacity%3D%220.06%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23p%22%20transform%3D%22translate%28150%20260%29%20rotate%28-35%29%20scale%280.8999999999999999%29%20translate%28-24%20-24%29%22%20fill%3D%22%235f9fe6%22%20opacity%3D%220.14%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23p%22%20transform%3D%22translate%28380%20330%29%20rotate%2810%29%20scale%281.2000000000000002%29%20translate%28-24%20-24%29%22%20fill%3D%22%231f5ea6%22%20opacity%3D%220.07%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23p%22%20transform%3D%22translate%2860%20440%29%20rotate%2830%29%20scale%281.5%29%20translate%28-24%20-24%29%22%20fill%3D%22%235f9fe6%22%20opacity%3D%220.13%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23p%22%20transform%3D%22translate%28260%20470%29%20rotate%28-10%29%20scale%280.75%29%20translate%28-24%20-24%29%22%20fill%3D%22%231f5ea6%22%20opacity%3D%220.08%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23p%22%20transform%3D%22translate%28500%20500%29%20rotate%28-25%29%20scale%281.0499999999999998%29%20translate%28-24%20-24%29%22%20fill%3D%22%235f9fe6%22%20opacity%3D%220.14%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23h%22%20transform%3D%22translate%28215%20150%29%20rotate%28-12%29%20scale%281.04%29%20translate%28-24%20-24%29%22%20fill%3D%22%23e58aa0%22%20opacity%3D%220.16%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23h%22%20transform%3D%22translate%28445%20425%29%20rotate%28-12%29%20scale%280.8450000000000001%29%20translate%28-24%20-24%29%22%20fill%3D%22%23e58aa0%22%20opacity%3D%220.15%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23h%22%20transform%3D%22translate%28115%20345%29%20rotate%28-12%29%20scale%280.65%29%20translate%28-24%20-24%29%22%20fill%3D%22%23e58aa0%22%20opacity%3D%220.15%22/%3E%3Cuse%20xlink%3Ahref%3D%22%23h%22%20transform%3D%22translate%28330%20215%29%20rotate%2814%29%20scale%280.5850000000000001%29%20translate%28-24%20-24%29%22%20fill%3D%22%23e58aa0%22%20opacity%3D%220.12%22/%3E%3C/svg%3E"); background-repeat: repeat, repeat; background-size: 560px 560px, 560px 560px; background-position: 0 0, 280px 190px; }
@media (max-width: 800px) { body { background-size: 420px 420px, 420px 420px; background-position: 0 0, 210px 140px; } }

/* today card */
.today-sec { padding-block: 10px 6px; }
.today-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 14px 16px; box-shadow: 0 8px 22px rgba(23,64,111,.06); }
.tc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tc-title small { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; }
.tc-title b { font-size: 19px; }
.tc-state { position: relative; padding: 3px 14px 3px 12px; padding-inline-start: 28px; border-radius: 999px; background: var(--blue-soft); color: var(--blue-deep); font-weight: 700; font-size: 13.5px; }
.tc-state::before { content: ""; position: absolute; inset-inline-start: 11px; inset-block-start: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #9fb4cc; }
.today-card.is-open .tc-state { background: #dcf7e6; color: #0f5d33; }
.today-card.is-open .tc-state::before { background: #22b35e; box-shadow: 0 0 0 4px rgba(34,179,94,.22); }
.tc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tc-box { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 10px 14px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tc-box small { color: var(--blue-deep); font-weight: 700; font-size: 13.5px; }
.tc-box b { font-size: 16.5px; line-height: 1.6; }
.tc-sub { color: var(--muted); font-size: 13px; }
.tc-link { margin-top: 4px; align-self: flex-start; color: var(--blue-deep); font-weight: 700; font-size: 14px; text-decoration: none; border-bottom: 2px solid var(--blue-soft); }
.tc-link:hover { border-color: var(--blue); }
.tc-week { margin-top: 8px; }
.tc-week summary { cursor: pointer; color: var(--blue-deep); font-weight: 700; font-size: 14px; padding: 4px 0; }
.tc-table { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 14px; }
.tc-table th, .tc-table td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.tc-table th { color: var(--muted); font-weight: 500; }
.tc-table tr.is-today td { background: var(--blue-soft); font-weight: 700; }
@media (max-width: 800px) { .tc-grid { grid-template-columns: 1fr; } .tc-box b { font-size: 15.5px; } }

/* vet tag link + brand wrapper */
.brandwrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
a.vet-tag { text-decoration: none; transition: filter .15s, transform .15s; }
a.vet-tag:hover { filter: brightness(1.12); transform: translateY(-1px); }
@media (max-width: 800px) { .brandwrap { width: 100%; justify-content: center; } }

/* about: explainers */
.expl { display: grid; gap: 10px; }
.expl details { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.expl summary { cursor: pointer; padding: 12px 16px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.expl summary::-webkit-details-marker { display: none; }
.expl summary::after { content: "+"; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--blue-soft); color: var(--blue-deep); display: grid; place-items: center; font-size: 19px; line-height: 1; }
.expl details[open] summary::after { content: "−"; background: var(--blue); color: var(--on-blue); }
.expl details[open] { border-color: var(--blue); }
.expl details p { margin: 0; padding: 0 16px 14px; color: var(--muted); }

/* date bar under the header */
.datebar { display: flex; justify-content: center; margin: 2px 0 4px; }
.datebar[hidden] { display: none; }
.db-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--blue-deep); font-size: 14px; box-shadow: 0 4px 12px rgba(23,64,111,.06); }
.db-pill svg { width: 17px; height: 17px; flex: none; }
.db-pill b { font-weight: 700; color: var(--ink); }
@media (max-width: 800px) { .db-pill { font-size: 13px; padding: 4px 14px; } }
@media (max-width: 800px) { .brandwrap { flex-wrap: nowrap; gap: 8px; } .brandwrap .brand { width: auto; flex: 0 1 auto; } .vet-tag { flex: none; } }

/* messenger buttons row */
.msgr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 6px 0 14px; }
.m-btn { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px 14px; border-radius: 20px; text-decoration: none; color: #fff; text-align: center; box-shadow: 0 10px 22px rgba(0,0,0,.14); transition: transform .15s, filter .15s; min-width: 0; }
.m-btn:hover { transform: translateY(-3px); filter: brightness(1.06); }
.m-ic { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.22); display: grid; place-items: center; }
.m-ic svg { width: 26px; height: 26px; }
.m-btn b { font-size: 17px; line-height: 1.5; }
.m-btn small { font-size: 12.5px; opacity: .92; direction: ltr; overflow-wrap: anywhere; line-height: 1.4; }
.m-wa { background: linear-gradient(135deg, #25d366, #0e8f5a); }
.m-bale { background: linear-gradient(135deg, #36b3f0, #1565c0); }
.m-ig { background: linear-gradient(135deg, #ff6a3d, #e0245e 55%, #b3166b); }
@media (max-width: 800px) {
  .msgr { gap: 8px; }
  .m-btn { padding: 12px 6px 10px; border-radius: 16px; }
  .m-ic { width: 40px; height: 40px; }
  .m-ic svg { width: 22px; height: 22px; }
  .m-btn b { font-size: 15px; }
  .m-btn small { display: none; }
}

/* messenger buttons v2: compact, brand colours, logo in a white disc */
.msgr { gap: 10px; margin: 4px 0 12px; }
.m-btn { flex-direction: row; justify-content: center; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 16px; box-shadow: 0 6px 14px rgba(0,0,0,.12); text-align: right; }
.m-ic { width: 38px; height: 38px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12); flex: none; }
.m-ic svg { width: 24px; height: 24px; }
.m-t { display: flex; flex-direction: column; min-width: 0; text-align: right; }
.m-t b { font-size: 16px; line-height: 1.4; }
.m-t small { font-size: 12px; opacity: .92; direction: ltr; text-align: right; overflow-wrap: anywhere; line-height: 1.3; }
.m-wa { background: linear-gradient(135deg, #2bd16a, #11a652); }
.m-bale { background: linear-gradient(135deg, #3aa8f5, #1a73d9); }
.m-ig { background: linear-gradient(45deg, #f09433 0%, #e6683c 28%, #dc2743 55%, #cc2366 78%, #bc1888 100%); }
@media (max-width: 800px) {
  .msgr { gap: 8px; }
  .m-btn { flex-direction: column; gap: 4px; padding: 9px 6px 8px; border-radius: 14px; }
  .m-ic { width: 34px; height: 34px; }
  .m-ic svg { width: 21px; height: 21px; }
  .m-t { align-items: center; text-align: center; }
  .m-t b { font-size: 14px; }
  .m-t small { display: none; }
}

/* header credentials */
.brandcol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cred { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 800px) { .brandcol { width: 100%; align-items: center; text-align: center; } .cred { font-size: 12px; } }

/* compact hero with a scrolling services row */
.hero2 { display: grid; gap: 12px; padding-block: 8px 4px; }
.hero2 .h-text { min-width: 0; }
.hero2 h1 { font-size: clamp(26px, 4.2vw, 38px); margin: 6px 0 4px; line-height: 1.35; }
.hero2 .lead { margin: 0; font-size: 16px; max-width: 62ch; }
.svc-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 18px 8px; margin-inline: -18px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.svc { position: relative; overflow: hidden; flex: 1 0 190px; scroll-snap-align: start; display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: 20px; background: var(--panel); color: #fff; text-decoration: none; min-width: 0; box-shadow: 0 8px 18px rgba(23,64,111,.18); transition: transform .15s, filter .15s; }
.svc:hover { transform: translateY(-3px); filter: brightness(1.1); }
.svc .paw { position: absolute; inset-inline-start: -16px; inset-block-end: -18px; width: 84px; height: 84px; color: rgba(255,255,255,.1); }
.svc .ic { width: 34px; height: 34px; border-radius: 11px; background: rgba(255,255,255,.16); color: #fff; display: grid; place-items: center; margin: 0; position: relative; }
.svc .ic svg { width: 20px; height: 20px; }
.svc b { position: relative; font-size: 16px; line-height: 1.5; }
.svc p { position: relative; margin: 0; font-size: 13.5px; line-height: 1.65; opacity: .86; }
.hero2 .actions { margin-top: 2px; }
@media (max-width: 800px) { .svc { flex: 0 0 66%; } }
@media (prefers-reduced-motion: reduce) { .svc { transition: none; } .svc:hover { transform: none; } }

/* brand-coloured buttons inside the chooser sheets */
.sheet .sheet-opt.m-btn { flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; padding: 10px 14px; border: 0; border-radius: 16px; box-shadow: none; color: #fff; text-align: right; }
.sheet .sheet-opt.m-btn .m-t { align-items: flex-start; text-align: right; }
.sheet .sheet-opt.m-btn .m-t small { display: block; }
.sheet .sheet-opt.m-btn .m-t b { font-size: 17px; }

.brand svg.logo { width: 38px; height: 38px; color: inherit; }

.credit { flex-basis: 100%; text-align: center; margin: 14px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--muted); line-height: 2; }
.credit .by { opacity: .85; } .credit bdi { font-weight: 700; letter-spacing: .8px; color: var(--blue); }

.hero2 .h-text { text-align: center; }
.hero2 .h-text .actions { justify-content: center; gap: 8px; margin: 2px 0 6px; }
.hero2 .actions .btn { padding: 8px 16px; font-size: 14px; border-radius: 10px; border-width: 1.5px; transition: background .15s, color .15s, border-color .15s; }
.hero2 .actions .btn:hover, .hero2 .actions .btn:focus-visible { background: #12335f; border-color: #12335f; color: #fff; filter: none; }

.page-head { padding-block: 10px 4px; }
.page-head.center { text-align: center; }
.page-head.center .sub { margin-inline: auto; }
.page-head h1 { margin-bottom: 4px; }
.group header.gh { padding: 12px 18px; }
.group header.gh h2 { font-size: 20px !important; }
.group header.gh p { font-size: 14px; }
.group header.gh .ic { width: 38px; height: 38px; border-radius: 11px; }
.group header.gh .ic svg { width: 20px; height: 20px; }
.group .items { padding: 12px 16px 16px; gap: 8px; margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.items li { padding: 8px 12px; border-radius: 12px; }
.items b { font-size: 15px; }
.items span { font-size: 13px; line-height: 1.6; }
.group { margin-bottom: 12px; border-radius: 18px; }
@media (max-width: 900px) { .group .items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .group .items { grid-template-columns: 1fr; } }
.items li, .items span { line-height: 1.55; } .items b { margin-bottom: 2px; } .items li { display: flex; flex-direction: column; justify-content: flex-start; }

.page-head { text-align: center; }
.page-head .sub { margin-inline: auto; }
.expl { gap: 7px; }
.expl details { border-radius: 12px; transition: background .15s, border-color .15s; }
.expl summary { padding: 8px 14px; font-size: 15px; transition: color .15s; }
.expl summary::after { width: 22px; height: 22px; font-size: 16px; }
.expl details p { padding: 0 14px 10px; font-size: 14px; line-height: 1.8; }
.expl details:hover { background: #17406f; border-color: #17406f; }
.expl details:hover summary, .expl details:hover p { color: #fff; }
.expl details:hover summary::after { background: rgba(255,255,255,.2); color: #fff; }
.grid.two { gap: 10px; }
.grid.two .card { padding: 12px 16px; border-radius: 14px; transition: background .15s, border-color .15s; }
.grid.two .card h3 { margin: 0 0 3px; font-size: 16px; transition: color .15s; }
.grid.two .card p { font-size: 14px; line-height: 1.7; transition: color .15s; }
.grid.two .card:hover { background: #17406f; border-color: #17406f; }
.grid.two .card:hover h3, .grid.two .card:hover p { color: #fff; }

.top-actions { display: flex; justify-content: center; gap: 8px; margin: 4px 0 10px; }
.top-actions .btn, .top-actions .btn.primary, .top-actions .btn.online { padding: 8px 18px; font-size: 14px; border-radius: 10px; border: 1.5px solid var(--blue-soft); background: var(--blue-soft); color: var(--blue-deep); transition: background .15s, color .15s, border-color .15s; }
.top-actions .btn:hover, .top-actions .btn:focus-visible, .top-actions .btn:active { background: #12335f; border-color: #12335f; color: #fff; filter: none; }
.banner .slide { aspect-ratio: 1 / 1; }
.banner .slider { --sw: 160px; }
.banner .track { padding-block: 4px; }
.solo.banner { padding: 12px 0 8px; }
.banner-head { margin-bottom: 6px; }
@media (max-width: 800px) { .banner .slider { --sw: 124px; } .solo.banner { padding: 10px 0 6px; } }
.top-actions .btn { line-height: 1.5; padding: 6px 16px; }

.banner .slider { --sw: 138px; }
.banner .slide { filter: blur(2px); }
.solo.banner { padding: 8px 0 4px; }
.banner-head { margin-bottom: 2px; }
.banner .dots { margin-top: 2px; }
@media (max-width: 800px) { .banner .slider { --sw: 104px; } .solo.banner { padding: 8px 0 4px; } .banner-head .sub { display: none; } }
.seo-text h2 { font-size: 20px; } .seo-text p { color: var(--muted); font-size: 15px; line-height: 2; max-width: 80ch; margin: 0 0 8px; }