/* ============================================================
   Pampered Paws - location page styles
   Shared by locations.html (the hub) and every /locations/ page.
   Namespaced .loc-* so nothing leaks into the shared theme CSS.
   Loaded AFTER bootstrap.css so these rules win the cascade.
   ============================================================ */
/* ============================================================
   Location page styles. Everything is namespaced .loc-* so it
   cannot leak into, or be clobbered by, the shared theme CSS.
   Brand palette is taken from the existing site.
   ============================================================ */
.loc-scope,
.loc-scope *,
.loc-scope *::before,
.loc-scope *::after { box-sizing: border-box; }

.loc-scope {
  --loc-gold: #8e7a3d;
  --loc-gold-dark: #6f5f2f;
  --loc-gold-tint: #f8f5ed;
  --loc-ink: #1f2220;
  --loc-muted: #4a4f4c;
  --loc-mist: #f3f6f5;
  --loc-line: #e0e7e5;
  --loc-radius: 12px;
  --loc-shadow: 0 2px 4px rgba(34,34,34,.04), 0 12px 28px rgba(34,34,34,.07);
}

/* ---------- Hero ---------------------------------------------------- */
/* Match the homepage banner's crop (body.home .banner-image in bootstrap.css
   uses 37.5%, taller than the shared theme default of 28.125%) so the same
   photo reads the same way here as it does on the homepage. */
.loc-hero .banner-image { min-height: 460px; padding-top: 37.5%; }
.loc-hero .banner-image::before {
  background: linear-gradient(105deg, rgba(20,18,12,.42) 0%, rgba(20,18,12,.3) 48%, rgba(20,18,12,.16) 100%);
  pointer-events: none;
}
.loc-hero .banner-content-container {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  height: auto; line-height: 1.5; margin-top: 0;
  display: flex; align-items: center;
}
.loc-hero .banner-content { display: block; width: 100%; line-height: 1.5; }
.loc-hero .container { text-align: left; }
.loc-hero-inner { max-width: 660px; padding: 40px 0; }

.loc-hero h1 {
  margin: 0 0 14px; color: #fff; font-weight: 700;
  font-size: 50px; line-height: 1.08;
  text-shadow: 0 2px 30px rgba(0,0,0,.55);
}
.loc-hero-sub {
  margin: 0 0 12px; color: #fff;
  font-size: 21px; font-weight: 400; line-height: 1.45;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 1px 18px rgba(0,0,0,.6);
}
.loc-hero .loc-hero-meta {
  margin: 0 0 40px; padding: 0; list-style: none;   /* .loc-hero prefix needed to beat theme's ".banner ul{margin:0}" */
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  color: #fff; font-size: 15px;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 1px 18px rgba(0,0,0,.6);
}
.loc-hero .loc-hero-meta li { display: flex; align-items: center; gap: 7px; }
.loc-hero .loc-hero-meta svg { flex: 0 0 auto; }

/* ---------- Google rating badge, hero variant ----------------------- */
/* Base styles live at the end of bootstrap.css. In the hero the badge sits on
   a dark photo, so it takes the same white + text-shadow treatment as
   .loc-hero-sub and .loc-hero-meta, and the unfilled stars become translucent
   white -- the light grey used on the homepage would read as filled here.
   The "> svg" targets the base star row only; the gold row is inside
   .pp-gr-fill and keeps its own colour. */
.pp-google-rating--hero {
  justify-content: flex-start; text-align: left;
  margin: 0 0 22px; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 1px 18px rgba(0,0,0,.6);
}
.pp-google-rating--hero .pp-gr-stars > svg { fill: rgba(255,255,255,.45); }
.pp-google-rating--hero .pp-gr-text a { color: #fff; }

/* ---------- Contact page hero (live Google Map background) ---------- */
/* The map is decorative here - it's the same listing embedded properly,
   interactively, further down the page in #find-us - so it's non-interactive
   and hidden from assistive tech. */
.contact-hero .banner-image { min-height: 460px; padding-top: 30%; }
.contact-hero-map {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  border: 0; z-index: 0; pointer-events: none;
}
.contact-hero .banner-image::before { background: rgba(60,60,60,.45); z-index: 1; }
.contact-hero .banner-content-container {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  height: auto; line-height: 1.5; margin-top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.contact-hero .banner-content { display: block; width: 100%; line-height: 1.5; }
.contact-hero-title {
  font-size: 32px; line-height: 1.25; font-weight: 300;
  text-shadow: 0 2px 30px rgba(0,0,0,.55);
}
.contact-hero-title strong { font-weight: 700; }
@media (min-width: 992px) {
  .contact-hero-title { font-size: 54px; line-height: 1.2; }
}

/* ---------- Buttons ------------------------------------------------- */
.loc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 28px; border-radius: 999px; border: 2px solid transparent;
  font-size: 17px; font-weight: 600; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.loc-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.loc-btn-primary { background: var(--loc-gold); color: #fff; box-shadow: 0 6px 18px rgba(142,122,61,.35); }
.loc-btn-primary:hover,
.loc-btn-primary:focus { background: var(--loc-gold-dark); color: #fff; text-decoration: none; transform: translateY(-2px); }
.loc-btn-ghost { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.7); }
.loc-btn-ghost:hover,
.loc-btn-ghost:focus { background: #fff; color: var(--loc-ink); text-decoration: none; transform: translateY(-2px); }
.loc-btn-outline { background: #fff; color: var(--loc-gold); border-color: var(--loc-gold); }
.loc-btn-outline:hover,
.loc-btn-outline:focus { background: var(--loc-gold); color: #fff; text-decoration: none; transform: translateY(-2px); }
.loc-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Generic section shell ----------------------------------- */
.loc-section { padding: 64px 0; }
.loc-section--mist { background: var(--loc-mist); }
.loc-section-head { max-width: 720px; margin-bottom: 38px; }
.loc-section-head.is-centred { margin-left: auto; margin-right: auto; text-align: center; }
.loc-kicker {
  display: block; margin-bottom: 10px; color: var(--loc-gold);
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.loc-section h2 { margin: 0 0 14px; font-size: 30px; line-height: 1.2; font-weight: 700; color: var(--loc-ink); }
.loc-section h3 { font-size: 21px; font-weight: 700; color: var(--loc-ink); }
.loc-section p { font-size: 17px; line-height: 1.7; color: var(--loc-muted); }
.loc-section-head p { font-size: 18px; margin: 0; }

/* A .loc-btn-row is normally the last thing in a section, so nothing gives
   it a bottom gap. contact.html's "Get in touch" section follows one with
   more copy ("Prefer to message?"), which otherwise sits flush against it. */
.loc-btn-row + h2,
.loc-btn-row + h3 { margin-top: 32px; }

/* contact.html: "Get in touch" -> "Where to find us" felt like too big a gap
   at the default 64px+64px section padding, so pull the first section in. */
#get-in-touch { padding-bottom: 40px; }

/* ---------- Intro + at-a-glance ------------------------------------- */
.loc-intro-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 44px; align-items: start; }
.loc-prose p { margin: 0 0 18px; }
.loc-prose p:last-child { margin-bottom: 0; }
.loc-prose a { color: var(--loc-gold); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.loc-prose a:hover { color: var(--loc-gold-dark); }

.loc-card {
  background: #fff; border: 1px solid var(--loc-line);
  border-radius: var(--loc-radius); box-shadow: var(--loc-shadow);
}
.loc-glance { position: sticky; top: 24px; overflow: hidden; }
.loc-glance-head { background: var(--loc-gold); color: #fff; padding: 18px 24px; }
.loc-glance-head h3 { margin: 0; color: #fff; font-size: 19px; }
.loc-glance dl { margin: 0; padding: 8px 24px 4px; }
.loc-glance dt {
  margin-top: 16px; font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: #8a8f8c;
}
.loc-glance dd { margin: 3px 0 0; padding-bottom: 16px; border-bottom: 1px solid var(--loc-line); font-size: 17px; color: var(--loc-ink); line-height: 1.5; }
.loc-glance dl > div:last-child dd { border-bottom: 0; }
.loc-glance dd a { color: var(--loc-gold); font-weight: 700; text-decoration: none; }
.loc-glance dd a:hover { text-decoration: underline; }
.loc-glance-foot { padding: 4px 24px 24px; }
.loc-glance-foot .loc-btn { width: 100%; }

/* ---------- Trust strip --------------------------------------------- */
.loc-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.loc-trust-item { background: #fff; border: 1px solid var(--loc-line); border-radius: var(--loc-radius); padding: 28px 24px; text-align: center; transition: transform .2s ease, box-shadow .2s ease; }
.loc-trust-item:hover { transform: translateY(-3px); box-shadow: var(--loc-shadow); }
.loc-trust-icon {
  width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 50%;
  background: var(--loc-gold-tint); color: var(--loc-gold);
  display: flex; align-items: center; justify-content: center;
}
.loc-trust-item h3 { margin: 0 0 7px; font-size: 18px; }
.loc-trust-item p { margin: 0; font-size: 15px; line-height: 1.55; }

/* ---------- Map ----------------------------------------------------- */
.loc-map-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; align-items: stretch; }
.loc-map-embed { position: relative; min-height: 430px; border-radius: var(--loc-radius); overflow: hidden; box-shadow: var(--loc-shadow); border: 1px solid var(--loc-line); }
.loc-map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.loc-directions h3 { margin: 26px 0 8px; font-size: 18px; }
.loc-directions h3:first-child { margin-top: 0; }
.loc-directions p { margin: 0 0 8px; font-size: 16.5px; }
.loc-address { margin: 0 0 8px; font-style: normal; font-size: 17px; line-height: 1.65; color: var(--loc-muted); }
.loc-directions .loc-btn-row { margin-top: 24px; }

/* ---------- Areas we cover ------------------------------------------ */
.loc-areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
.loc-area {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 22px; background: #fff; border: 1px solid var(--loc-line);
  border-radius: var(--loc-radius); color: var(--loc-ink);
  font-size: 17px; font-weight: 600; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.loc-area:hover, .loc-area:focus { color: var(--loc-gold); border-color: var(--loc-gold); transform: translateY(-3px); box-shadow: var(--loc-shadow); text-decoration: none; }
.loc-area svg { flex: 0 0 auto; color: var(--loc-gold); }
.loc-area.is-current { background: var(--loc-gold); border-color: var(--loc-gold); color: #fff; cursor: default; transform: none; box-shadow: none; }
.loc-area.is-current svg { color: #fff; }
p.loc-nearby { margin: 0; font-size: 16.5px; color: var(--loc-muted); line-height: 1.7; }
p.loc-nearby a { color: var(--loc-gold); font-weight: 600; }

/* ---------- Hub: areas + distance table ------------------------------ */
.loc-towns { border: 1px solid var(--loc-line); border-radius: var(--loc-radius); overflow: hidden; background: #fff; box-shadow: var(--loc-shadow); margin-bottom: 26px; }
.loc-town {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 40px; align-items: center; gap: 16px;
  padding: 20px 24px; border-bottom: 1px solid var(--loc-line);
  color: var(--loc-ink); text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.loc-town:last-child { border-bottom: 0; }
a.loc-town:hover, a.loc-town:focus { background: var(--loc-gold-tint); color: var(--loc-gold); text-decoration: none; }
.loc-town-head {
  background: var(--loc-mist); padding-top: 13px; padding-bottom: 13px;
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #8a8f8c;
}
.loc-town-name { font-size: 19px; font-weight: 700; }
.loc-town-dist, .loc-town-drive { font-size: 16px; color: var(--loc-muted); }
.loc-town-head .loc-town-name,
.loc-town-head .loc-town-dist,
.loc-town-head .loc-town-drive { font-size: 12px; font-weight: 700; color: #8a8f8c; }
.loc-town-go { color: var(--loc-gold); justify-self: end; display: flex; }
a.loc-town:hover .loc-town-dist,
a.loc-town:hover .loc-town-drive { color: var(--loc-gold); }

@media (max-width: 767px) {
  .loc-town-head { display: none; }
  .loc-town { grid-template-columns: 1fr 28px; gap: 4px 12px; padding: 18px 20px; }
  .loc-town-name { grid-column: 1; }
  .loc-town-go { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .loc-town-dist, .loc-town-drive { grid-column: 1; font-size: 15px; }
  .loc-town-dist::before { content: "Distance: "; color: #8a8f8c; }
  .loc-town-drive::before { content: "Drive: "; color: #8a8f8c; }
}

/* ---------- Plain page title (no hero banner) ------------------------ */
.loc-title-band { padding: 56px 0 8px; text-align: center; }
.loc-title-band h1 {
  display: inline-block; margin: 0 0 18px; padding-bottom: 18px;
  border-bottom: 3px solid var(--loc-gold);
  font-size: 44px; font-weight: 700; line-height: 1.15; color: var(--loc-ink);
}
@media (max-width: 767px) {
  .loc-title-band { padding: 40px 0 4px; }
  .loc-title-band h1 { font-size: 30px; }
}

/* gallery.html's heading predates .loc-title-band and kept the old theme's
   36px gold text with a thin grey rule, so it read as a different site to
   prices.html and faq.html. Its markup cannot move into a title band: the
   shuffle script at the foot of gallery.html finds its row with
   document.querySelector('.gallery-title').closest('.row'), so lifting the
   heading out would break the image ordering. Restyled in place instead.

   width:fit-content makes the gold rule hug the text, which is what the band
   achieves with an inline-block h1 inside a centred parent -- the gallery's
   parent does not centre its inline content, so the margin auto does it.

   SELECTOR IS .site-content .gallery-title, NOT JUST .gallery-title.
   First attempt at this used the bare class and still rendered flush left,
   because bootstrap.css has ".site-content h1{font-size:38px;margin:0 0 16px}"
   (checked with Playwright: getComputedStyle showed margin-left/right stuck at
   0 despite this rule). ".site-content h1" is one class + one element, i.e.
   specificity (0,1,1) -- higher than a bare ".gallery-title" at (0,1,0) -- so
   it always wins regardless of which stylesheet loads later; the cascade only
   falls back to source order when specificity ties. ".site-content
   .gallery-title" is two classes, (0,2,0), which safely outranks it either
   way. Don't drop the ".site-content" prefix.

   TOP MARGIN IS NEGATIVE ON PURPOSE. gallery.html (and only gallery.html,
   404.html, blog.html, terms-conditions.html and the two blog posts) is
   wrapped in ".content-area", which carries an unconditional
   "padding-top:70px" (bootstrap.css) -- breathing room under the header for
   that older template, shared by six pages, so it wasn't touched here.
   prices.html/faq.html use a different template with no such wrapper, so
   their whole gap comes from .loc-title-band's own padding-top. Stacking a
   positive margin-top here on top of that 70px nearly doubled the gap above
   "Gallery" versus "Prices & Treatments". A negative margin pulls the heading
   back up into that padding instead of adding to it, so the two land on the
   same total gap. Checked for overflow:hidden on every ancestor first (all
   "visible") so nothing here gets clipped. Measured with Playwright:
     desktop (>=768px): 70px padding + 56px margin = 126px vs prices' 56px
       -> margin-top: -14px  (70 - 14 = 56, matches)
     mobile (<768px):   70px padding + 40px margin = 110px vs prices' 40px
       -> margin-top: -30px  (70 - 30 = 40, matches)
   If .content-area's padding-top ever changes, these two numbers need
   recalculating to match -- they are not independent of it. */
.site-content .gallery-title {
  width: fit-content;
  margin: -14px auto 36px;
  padding: 0 0 18px;
  border-bottom: 3px solid var(--loc-gold);
  font-size: 44px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--loc-ink);
  text-align: center;
}
.site-content .gallery-title:after { content: none; }   /* the old 1px grey rule */
@media (max-width: 767px) {
  .site-content .gallery-title { margin: -30px auto 26px; font-size: 30px; }
}

/* ---------- Pricing cards (prices.html) ------------------------------ */
.loc-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
/* A row of only two cards. Without this they stretch to half the container
   each and dwarf the three-card rows above; constraining and centring keeps
   them the same width as their neighbours. Mobile falls back to the single
   column the other grids use. */
.loc-price-grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 660px; margin-left: auto; margin-right: auto; }
@media (max-width: 767px) { .loc-price-grid--pair { grid-template-columns: 1fr; max-width: none; } }
.loc-price-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: #fff; border: 1px solid #d6cdb4; border-radius: var(--loc-radius);
  box-shadow: var(--loc-shadow); overflow: hidden;
}
p.loc-price-name {
  align-self: stretch; margin: 0; padding: 18px 24px;
  background: var(--loc-gold); color: #fff; font-size: 19px; font-weight: 700;
  letter-spacing: .04em; text-align: center;
}
.loc-price-amount { margin: 26px 0 4px; display: flex; align-items: baseline; justify-content: center; gap: 6px; font-size: 38px; font-weight: 700; line-height: 1; color: var(--loc-gold); }
.loc-price-from { display: inline; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #000; }
.loc-price-note { margin: 0 28px 22px; font-size: 14.5px; color: var(--loc-muted); }
.loc-price-features { list-style: none; margin: 0; padding: 0 28px 28px; width: 100%; }
.loc-price-features li {
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--loc-line); font-size: 15.5px; color: var(--loc-ink); line-height: 1.4;
}
.loc-price-features li:last-child { border-bottom: 0; }
.loc-price-features svg { flex: 0 0 auto; color: var(--loc-gold); }
.loc-price-disclaimer { margin: 26px 0 0; font-size: 14.5px; color: var(--loc-muted); font-style: italic; }

/* ---------- FAQ ----------------------------------------------------- */
.loc-faq { max-width: 860px; margin: 0 auto; }
.loc-faq details { background: #fff; border: 1px solid var(--loc-line); border-radius: var(--loc-radius); margin-bottom: 12px; overflow: hidden; }
.loc-faq details[open] { border-color: #d6cdb4; box-shadow: var(--loc-shadow); }
.loc-faq summary {
  padding: 20px 56px 20px 24px; position: relative; cursor: pointer;
  font-size: 18px; font-weight: 600; color: var(--loc-ink); list-style: none;
}
.loc-faq summary::-webkit-details-marker { display: none; }
.loc-faq summary::after {
  content: ""; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px;
  border-right: 2.5px solid var(--loc-gold); border-bottom: 2.5px solid var(--loc-gold);
  transform: translateY(-70%) rotate(45deg); transition: transform .25s ease;
}
.loc-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.loc-faq summary:hover { color: var(--loc-gold); }
.loc-faq-body { padding: 0 24px 22px; }
.loc-faq-body p { margin: 0 0 12px; font-size: 16.5px; }
.loc-faq-body p:last-child { margin-bottom: 0; }
.loc-faq-body a { color: var(--loc-gold); font-weight: 600; }

/* ---------- Closing CTA --------------------------------------------- */
.loc-cta { background: var(--loc-gold); color: #fff; padding: 58px 0; margin-bottom: 20px; }
.loc-cta-grid { display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap; }
.loc-cta h2 { margin: 0 0 10px; color: #fff; font-size: 32px; font-weight: 700; line-height: 1.2; }
.loc-cta p { margin: 0; color: rgba(255,255,255,.92); font-size: 18px; max-width: 560px; }
.loc-cta .loc-btn-outline { background: #fff; color: var(--loc-gold); border-color: #fff; }
.loc-cta .loc-btn-outline:hover { background: var(--loc-gold-dark); color: #fff; border-color: #fff; }
.loc-cta .loc-btn-ghost { border-color: rgba(255,255,255,.8); }

/* ---------- Sticky mobile call bar ---------------------------------- */
.loc-callbar { display: none; }

/* ---------- Responsive ---------------------------------------------- */
@media (max-width: 1279px) {
  .loc-hero h1 { font-size: 42px; }
}
@media (max-width: 991px) {
  .loc-intro-grid { grid-template-columns: 1fr; gap: 34px; }
  .loc-glance { position: static; }
  .loc-map-grid { grid-template-columns: 1fr; gap: 28px; }
  .loc-map-embed { min-height: 360px; }
  .loc-trust { grid-template-columns: repeat(2, 1fr); }
  .loc-areas { grid-template-columns: repeat(2, 1fr); }
  .loc-price-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  /* The hero box grows to fit its content instead of being a fixed 420px
     with the content absolutely positioned inside it and overflowing.

     PRE-EXISTING BUG, not a breadcrumb one -- measured identical before and
     after that change. On a town page at <=400px (iPhone 12/13/14 is 390px,
     older phones 360/375px) the h1 wraps to two lines and .loc-hero-meta
     wraps to three, making .loc-hero-inner 526px tall inside a 420px box.
     .banner-content-container is "position:absolute; top:0; bottom:0" and
     centred, so the excess split evenly: 53px of h1 clipped under the nav bar
     at the top, and 53px of the "Book an appointment" button spilling out of
     the bottom of the photo onto whatever followed. It now lands on the
     breadcrumb bar, which is what made a long-standing bug finally obvious.

     Only the 20 town pages ever overflowed. The hub and contact hero are
     shorter and fit at every width, and >=414px fits everywhere, so this
     changes nothing outside the phone widths that were already broken.

     min-height keeps the 420px floor so short heroes still fill the space;
     the flex column re-centres the content that position:absolute used to.
     The :before scrim is absolute, so it is out of flex flow -- but it must
     stay BELOW the content. position:static would drop the content out of the
     positioned paint layer, so the still-absolute scrim painted over the top
     of it: the text greyed out and every tap (rating link, Call, Book an
     appointment) landed on the scrim instead of the link. position:relative
     keeps the content in flex flow AND in the paint layer, and z-index:1 puts
     it above the scrim -- the same layering .contact-hero sets explicitly. */
  .loc-hero .banner-image {
    min-height: 420px; padding-top: 0;
    display: flex; flex-direction: column; justify-content: center;
  }
  .loc-hero .banner-content-container { position: relative; z-index: 1; }
  .loc-hero .banner-content { width: 100%; }
  .loc-hero-inner { padding: 34px 0; }
  .loc-hero h1 { font-size: 32px; }
  .loc-hero-sub { font-size: 18px; }
  .loc-hero .loc-hero-meta { margin-bottom: 32px; font-size: 14px; gap: 6px 16px; }
  .loc-btn { padding: 14px 22px; font-size: 16px; }
  .loc-btn-row .loc-btn { flex: 1 1 100%; }
  .loc-section { padding: 44px 0; }
  .loc-section h2 { font-size: 27px; }
  .loc-price-grid { grid-template-columns: 1fr; gap: 20px; }
  .loc-cta h2 { font-size: 26px; }
  .loc-cta-grid { gap: 22px; }
  .loc-cta .loc-btn-row { width: 100%; }

  /* Always-visible call button on phones */
  .loc-callbar {
    display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.97); border-top: 1px solid var(--loc-line);
    box-shadow: 0 -4px 18px rgba(34,34,34,.1);
  }
  .loc-callbar .loc-btn { flex: 1 1 0; padding: 14px 10px; font-size: 16px; }
  body.loc-scope { padding-bottom: 76px; }
}
@media (max-width: 480px) {
  .loc-areas { grid-template-columns: 1fr; }
  .loc-trust { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .loc-scope * { transition: none !important; }
}

/* ============================================================
   Breadcrumbs
   ------------------------------------------------------------
   One bar, identical markup on every page, inserted immediately
   before the page title band / #content. On the pages that carry
   a hero -- contact.html, the /locations hub and all 20 town
   pages -- #content is the next thing after the banner, so the
   same insertion point puts the bar directly BELOW the banner,
   which is where it is wanted.

   It deliberately sits OUTSIDE #content.site-content:

     - bootstrap.css styles headings and lists with
       ancestor-qualified selectors like ".site-content h1", which
       are (0,1,1) and beat a bare class regardless of load order
       (see the .gallery-title note above -- that cost two attempts
       to work out). Outside #content none of them can reach it.
     - ".content-area" carries an unconditional padding-top:70px
       that gallery.html's heading margin is tuned against. Adding
       a sibling above .content-area leaves that 70px untouched.

   Don't move it inside #content without re-checking both.

   The trails mirror the BreadcrumbList JSON-LD already in every
   page head. Google expects visible content and markup to agree,
   so change the two together or not at all.
   ============================================================ */
.pp-breadcrumb {
  background: var(--loc-mist);
  border-bottom: 1px solid var(--loc-line);
}
.pp-breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center;
  margin: 0; padding: 12px 0; list-style: none;
  font-size: 14px; line-height: 1.5;
}
.pp-breadcrumb li { display: flex; align-items: center; }

/* Separator drawn as a background image rather than ::before text.
   Generated text content IS announced by several screen readers, so a
   "/" or ">" would be read out between every crumb; a background image
   never is, and the trail reads as "Home, Areas We Cover, ...". The
   stroke colour is baked into the data URI because background-image
   cannot inherit currentColor -- it is decorative, so that is fine. */
.pp-breadcrumb li + li::before {
  content: ""; flex: none;
  width: 16px; height: 16px; margin: 0 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa5a1' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
}

/* Beats bootstrap.css's bare "a{color:inherit}" at (0,0,1). */
.pp-breadcrumb a {
  color: var(--loc-muted); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.pp-breadcrumb a:hover,
.pp-breadcrumb a:focus-visible {
  color: var(--loc-gold-dark); border-bottom-color: currentColor;
}
.pp-breadcrumb [aria-current="page"] { color: var(--loc-ink); font-weight: 600; }

@media (max-width: 767px) {
  .pp-breadcrumb ol { padding: 10px 0; font-size: 13px; }
}