/* Pawthority - borough pages. Loaded by every service and borough page, after
 * css/site.css and css/home.css.
 *
 * The Direction A design. css/site.css holds the fonts, the colour and type tokens,
 * .wrap, and the shared header and footer. css/home.css holds the base rules, .btn,
 * the hero, the search and the map, which these pages share with the homepage; the
 * search is restyled here as a bar under the list heading. Everything else a borough
 * page needs is here. Borough pages do not load css/styles.css or Tailwind.
 *
 * The breadcrumb, the kicker, the stars and the claim band are the same as in
 * css/provider.css. With the base rules and .btn, they belong in one shared file
 * when the styles.css cleanup PR comes.
 *
 * Nothing on the page is hidden until it scrolls into view, and nothing animates
 * in: the map's tiles, which pop in on the homepage, are shown as they are. The
 * only motion is on hover and focus.
 *
 * One rule to a line, in the order of the page.
 */

/* -- Breadcrumb -- */
.crumbs{padding-top:1.1rem;font-size:.9rem;color:var(--muted)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem .5rem}
.crumbs li+li::before{content:"/";margin-right:.5rem;color:#9AA8A4}
.crumbs a{color:var(--teal-d);text-underline-offset:3px}

/* -- Hero -- */
/* The hero is the homepage's (.hero in css/home.css): the photo full height and out
   to the window's edge from 1024px, above the text below that. */
.kicker{font-size:.98rem;font-weight:600;color:var(--teal-d);text-decoration:none}
a.kicker:hover{text-decoration:underline;text-underline-offset:3px}
/* A step below the homepage's size: these headings are longer ("Find trusted dog day
   care providers in Hammersmith & Fulham"), and the hero carries more under them. */
.b-hero h1{margin-top:.55rem;max-width:21ch;font-size:clamp(2.1rem,4vw,3rem);text-wrap:balance}
/* The breadcrumb is the hero's first item. Below 1024px, where the photo sits above
   the text, it stays above the photo, set in by the page gutter as before. From
   1024px it heads the text column, lined up with the text, and the photo runs the
   full height of the hero from directly under the header, as on the homepage. The
   rest of the text is centred in the space under the breadcrumb, as the homepage
   centres its hero text (the user, 2026-10-04). */
.b-crumbs{order:-2;padding:1.1rem var(--gut) 0}
@media (min-width:1024px){
 .b-hero{grid-template-rows:auto 1fr}
 .b-crumbs{grid-column:1;grid-row:1;padding:1.6rem clamp(3rem,5vw,4.5rem) 0 max(var(--gut),calc(90.909% - var(--wrap)/2 + var(--gut)))}
 .b-hero .hero-text{grid-column:1;grid-row:2;justify-content:center;padding-top:1.75rem;padding-bottom:3.25rem}
 .b-hero .hero-photo{grid-column:2;grid-row:1/3}
}
.facts{margin:1.75rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(8.5rem,100%),1fr));gap:1.25rem;max-width:34rem;padding:1.1rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts div{min-width:0}
.facts dt{font-size:.86rem;font-weight:600;color:var(--muted)}
.facts dd{margin:.3rem 0 0;font-family:var(--serif);font-size:1.45rem;font-weight:600;line-height:1.15}
.jump{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.5rem}
.jump a{display:inline-flex;align-items:center;min-height:40px;padding:.4rem .9rem;border:1.5px solid #B7C6C2;border-radius:999px;font-weight:600;font-size:.94rem;text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.jump a:hover{border-color:var(--teal);color:var(--teal-d)}
.jump a.primary{background:var(--teal);border-color:var(--teal);color:#fff}
.jump a.primary:hover{background:var(--teal-d);border-color:var(--teal-d);color:#fff}
/* Each service's photo keeps the framing it had on the old template. */
.dog-day-care-page .hero-photo img{object-position:40% center}
.pet-boarding-page .hero-photo img{object-position:40% 10%}
.vet-page .hero-photo img{object-position:60% center}

/* -- Provider list -- */
/* One numbered row per provider. On a phone: the name, the rating under it, then
   the area, the tags (two of them) and an arrow at the right. From 980px: the name
   and area, the tags (three), the rating, and "View profile", in columns. The whole
   row is the link: the name's ::after covers it. */
.b-list{padding-top:clamp(2.5rem,5vw,4rem)}
.b-list h2{font-size:clamp(2rem,4.4vw,3rem)}
/* The search, under the list heading (the user, 2026-10-04): the homepage's form as a
   quiet bar, so it reads as a tool for the list rather than a section of its own, and
   the list follows the hero directly. From 760px the label and
   the three controls share one row, and the two field labels are read by screen
   readers only. Below that the label sits above the form, which keeps the homepage's
   layout and labels (stacked under 560px). */
.b-search{margin:1.25rem 0 1.5rem;padding:.85rem;border-radius:14px;background:var(--mist)}
.search-h{margin:0 0 .55rem .1rem;font-weight:700;font-size:.95rem;color:var(--ink-2)}
.b-search .search{margin:0;max-width:none;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
@media (min-width:760px){
 .b-search{display:flex;align-items:center;gap:1.1rem;padding:.6rem .6rem .6rem 1.15rem}
 .search-h{flex:none;margin:0}
 .b-search .search{flex:1;min-width:0;grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
 .b-search .search .btn{grid-column:auto}
 .b-search .field label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* The sort line describes the rows, so it sits on them. */
.sort-line{margin-bottom:.9rem;font-size:.95rem;color:var(--muted)}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.row{position:relative;display:grid;grid-template-columns:2rem minmax(0,1fr) auto;grid-template-areas:"rank name go" "rank rate go" "rank meta go" "rank flags go" "rank price go" "rank tags go";column-gap:.85rem;align-items:start;padding:1.15rem .25rem 1.15rem 0;border-bottom:1px solid var(--line);transition:background .2s}
.row:hover{background:linear-gradient(90deg,var(--mist),rgba(238,244,242,0))}
.rank{grid-area:rank;font-family:var(--serif);font-size:1.35rem;font-weight:600;line-height:1.2;color:#8A9A95;text-align:center}
.r-name{grid-area:name;display:flex;align-items:center;gap:.6rem;font-size:clamp(1.3rem,2.4vw,1.55rem);line-height:1.15;overflow-wrap:anywhere}
.r-name a{color:var(--teal-d);text-decoration:none}
.r-name a::after{content:"";position:absolute;inset:0}
.r-name a:focus-visible{outline:none}
.r-name a:focus-visible::after{outline:3px solid var(--ink);outline-offset:-3px;border-radius:6px}
.r-logo{flex:none;width:40px;height:40px;border-radius:9px;border:1px solid var(--line);object-fit:cover}
.r-rate{grid-area:rate;margin-top:.4rem;display:flex;align-items:center;flex-wrap:wrap;gap:.3rem .5rem}
.r-score{font-family:var(--serif);font-size:1.25rem;font-weight:600;line-height:1}
.r-n{font-size:.9rem;color:var(--muted)}
.r-meta{grid-area:meta;margin-top:.3rem;font-size:.93rem;color:var(--muted)}
.r-flags{grid-area:flags;margin-top:.45rem;display:flex;flex-wrap:wrap;gap:.35rem}
.r-claimed{display:inline-block;font-size:.8rem;font-weight:600;padding:.15rem .5rem;border-radius:6px;color:var(--teal-dd);background:var(--teal-l)}
.r-price{grid-area:price;margin-top:.35rem;font-size:.93rem;color:var(--ink-2)}
.r-tags{grid-area:tags;list-style:none;margin:.65rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.r-tags li{font-size:.86rem;padding:.25rem .6rem;border:1px solid var(--line);border-radius:7px;color:var(--ink-2);background:#fff}
.r-go{grid-area:go;align-self:center;color:var(--teal-d)}
.r-go svg{display:block}
.r-go-t{display:none}
@media (max-width:979px){.r-tags li:nth-child(n+3){display:none}}
@media (min-width:980px){
 .row{grid-template-columns:2.6rem minmax(0,1.2fr) minmax(0,1.3fr) 12rem 6.5rem;grid-template-areas:"rank name tags rate go" "rank meta tags rate go" "rank flags tags rate go" "rank price tags rate go";column-gap:1.5rem;padding:1.35rem 1rem 1.35rem .25rem}
 .rank{align-self:center;font-size:1.6rem}
 .r-rate,.r-tags{margin-top:0;align-self:center}
 .r-go svg{display:none}
 .r-go-t{display:inline;font-weight:700;font-size:.93rem;white-space:nowrap}
}
/* Stars. One element: five star shapes cut out of a bar that is amber up to the
   rating and grey after it. --r is the rating out of 5, set on the element. */
.stars{--star:15px;flex:none;display:inline-block;width:calc(var(--star)*5);height:var(--star);background:linear-gradient(90deg,var(--amber) calc(var(--r)*20%),#DCE5E2 0);-webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6L1.3 7.8l6.1-.7z'/></svg>") 0 0/var(--star) var(--star) repeat-x;mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 1.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6L1.3 7.8l6.1-.7z'/></svg>") 0 0/var(--star) var(--star) repeat-x}
.list-foot{margin-top:1.5rem;padding:1.1rem 1.25rem;border-radius:14px;background:var(--mist);display:flex;flex-wrap:wrap;gap:.4rem 1.25rem;align-items:baseline;color:var(--ink-2);font-size:.97rem}
.list-foot a{color:var(--teal-d);font-weight:700;text-underline-offset:3px}
.list-empty{padding:1.25rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink-2)}
.nearby{margin-top:2rem;padding:clamp(1.2rem,3vw,1.6rem) clamp(1.3rem,3.5vw,2.1rem);border:1px solid var(--line);border-radius:16px}
.nearby h3{font-size:clamp(1.4rem,2.6vw,1.75rem)}
.nearby p{margin-top:.5rem;color:var(--ink-2)}
.nearby ul{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.nearby a{display:inline-flex;align-items:center;min-height:40px;padding:.4rem .9rem;border-radius:8px;background:var(--teal-l);color:var(--teal-dd);font-weight:500;text-decoration:none;transition:background .2s,color .2s}
.nearby a:hover{background:var(--teal);color:#fff}

/* -- About -- */
/* The contents panel sits beside the copy from 980px and follows it down the page.
   Below that it is left out: the copy is one column anyway. */
.b-about{padding-top:clamp(1rem,2vw,1.5rem)}
.about-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:3rem}
.toc{display:none}
@media (min-width:980px){
 .about-grid{grid-template-columns:15rem minmax(0,1fr);column-gap:clamp(2.5rem,5vw,4.5rem)}
 .toc{display:block;position:sticky;top:1.5rem;align-self:start}
 .article:only-child{grid-column:1/-1}
}
.toc-h{margin-bottom:.75rem;font:700 .9rem/1.4 var(--sans);color:var(--muted)}
.toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.toc a{display:block;margin-left:-2px;padding:.45rem 0 .45rem 1rem;border-left:2px solid transparent;font-size:.95rem;line-height:1.35;color:var(--ink-2);text-decoration:none;transition:color .2s,border-color .2s}
.toc a:hover{color:var(--teal-d);border-left-color:var(--teal)}
.article{min-width:0;max-width:72ch}
.article h2{font-size:clamp(2rem,4.4vw,3rem)}
/* The borough's photo keeps the old template's frame: 500px tall (Tower Hamlets'
   portrait source 700px), 220px on a phone, and each borough's crop. */
.about-photo{margin:1.75rem 0 0}
.about-photo img{width:100%;height:500px;object-fit:cover;object-position:center;border-radius:16px;background:var(--mist)}
.borough-richmond .about-photo img{object-position:center 10%}
.borough-westminster .about-photo img{object-position:center 22%}
.borough-kingston-upon-thames .about-photo img{object-position:center top}
.borough-tower-hamlets .about-photo img{height:700px;object-position:center top}
@media (max-width:767px){.about-photo img,.borough-tower-hamlets .about-photo img{height:220px}}
.copy p{margin-top:1rem;font-size:1.07rem;line-height:1.75;color:var(--ink-2)}
.copy h3{margin-top:2.5rem;font-size:clamp(1.4rem,2.6vw,1.75rem);scroll-margin-top:1.5rem}
.copy h3+p,.copy h3+.copy-list{margin-top:.75rem}
.copy a{color:var(--teal-d);text-underline-offset:3px}
.copy strong{color:var(--ink)}
.copy-list ul{margin:1rem 0 0;padding-left:1.25rem;font-size:1.07rem;line-height:1.7;color:var(--ink-2)}
.copy-list li+li{margin-top:.4rem}
.areas{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);display:grid;gap:.75rem}
.areas h3{font:700 .92rem/1.4 var(--sans);letter-spacing:0;color:var(--muted)}
.areas ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.areas li{padding:.3rem .75rem;border-radius:8px;background:var(--mist);font-weight:500;font-size:.95rem}
.areas-note{margin-top:.75rem;font-size:.95rem;color:var(--muted)}

/* -- Prices -- */
.prices{background:var(--mist)}
.price-grid{display:grid;gap:2rem}
@media (min-width:980px){.price-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:4rem;align-items:start}}
.price-intro h2{font-size:clamp(2rem,4.4vw,3rem)}
.price-intro p{margin-top:1rem;max-width:56ch;color:var(--ink-2)}
.ptable{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 18px 40px -30px rgba(8,59,54,.45)}
.ptable caption{padding:0 0 .8rem;text-align:left;font-weight:700;color:var(--ink)}
.ptable th,.ptable td{padding:.9rem 1.15rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:baseline;font-weight:500}
.ptable td{text-align:right;font-family:var(--serif);font-weight:600;font-size:1.08rem;font-variant-numeric:lining-nums}
.ptable .pgroup th{padding-top:1.1rem;font:700 .86rem/1.4 var(--sans);color:var(--muted)}
.ptable tbody:last-child tr:last-child th,.ptable tbody:last-child tr:last-child td{border-bottom:0}
.pnotes{margin-top:1rem;display:grid;gap:.5rem;font-size:.95rem;color:var(--ink-2)}

/* -- Questions -- */
/* The questions are the homepage's borough list boxes (.b in css/home.css). */
.faq-list{display:grid;gap:.6rem;max-width:52rem}
.faq-list .b p{max-width:68ch;padding:0 1.05rem 1.05rem;line-height:1.7;color:var(--ink-2)}

/* -- Other boroughs, other services, the map -- */
/* The two lists side by side from 980px, and the map under them across the full
   width, shown from 980px only. The map is the homepage's, with the borough names
   on its tiles as there (the user, 2026-10-04). */
.more{padding-top:0}
.more-grid{display:grid;gap:2.5rem}
.more-text{display:grid;gap:2.25rem}
@media (min-width:980px){.more-text{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:4rem;align-items:start}}
.more-text h2{font-size:clamp(1.6rem,3vw,2.1rem)}
.linklist{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem}
.linklist a{color:var(--teal-d);text-underline-offset:3px}
.linklist [aria-current]{font-weight:700}
.b-map{display:none}
@media (min-width:980px){.b-map{display:block;margin-bottom:0}}
.js .b-map .map .tile{opacity:1;transform:none}
.js .b-map .map .thames svg{clip-path:none}
.b-map .map-key{margin-top:1rem}

/* -- Claim band -- */
.claim{background:var(--teal-dd);color:#D9E9E5;padding:clamp(2.5rem,6vw,3.75rem) 0}
.claim .wrap{display:grid;gap:1.5rem;align-items:center}
@media (min-width:860px){.claim .wrap{grid-template-columns:1fr auto;gap:3rem}}
.claim h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.5rem);overflow-wrap:anywhere}
.claim p{margin-top:.7rem;max-width:56ch}
.claim .btn{margin-top:0;justify-self:start}
.claim :focus-visible{outline-color:#fff}