/* About callout: make "Checked by BookaBuilderUK." more prominent */
#about .display.text-lg {
  font-size: 1.5rem;
  line-height: 1.2;
}

/* The hero's overlay lightened, so the photo shows (Mike, 20 Oct: "We need a better hero image"). The template's scrim is
   78% dark at the centre; the text still reads on the leaves at about half that, and the pill has its own backing. */
.ph-hero.ph-hero-photo .ph-hero-scrim {
  background:
    radial-gradient(60% 62% at 50% 46%, rgb(21 32 26 / 0.62) 0%, rgb(21 32 26 / 0.40) 62%, rgb(21 32 26 / 0.08) 100%),
    linear-gradient(180deg, rgb(21 32 26 / 0.06) 0%, rgb(21 32 26 / 0.20) 50%, rgb(21 32 26 / 0.80) 100%);
}
@media (max-width: 639px) {
  .ph-hero.ph-hero-photo .ph-hero-scrim {
    background: linear-gradient(180deg, rgb(21 32 26 / 0.34) 0%, rgb(21 32 26 / 0.56) 45%, rgb(21 32 26 / 0.82) 100%);
  }
}

/* Phone footer (Mike, 20 Oct: "icons look too far apart, button should also match their width"; 29 Oct: "slightly wider to a
   comfortable and elegant width"): three 3.5rem icon boxes with 1rem gaps make a 12.5rem row, the button the same width, and the
   logo a touch larger so the block reads as one. */
@media (max-width: 767px) {
  #siteFooter .md\:hidden > div.mt-7 { gap: 1rem; }
  #siteFooter .md\:hidden > div.mt-7 > a { width: 3.5rem; }
  #siteFooter .md\:hidden > div.mt-7 > a > span { width: 3.5rem; }
  #siteFooter .md\:hidden > a.btn { width: 12.5rem; }
  #siteFooter .md\:hidden > .text-center > img { height: 3.5rem; }
}

/* The four towns two by two on a phone (Mike, 29 Oct), rather than three and one. */
@media (max-width: 639px) {
  #contact ul[aria-label="Towns and areas"],
  #areas ul[aria-label="Towns and areas"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1rem; }
}

/* Phone pill: the stars over one line of words (Mike, 20 Oct). */
@media (max-width: 639px) {
  .ph-hero-pill { flex-direction: column; gap: 0.2rem; border-radius: 1.1rem; padding: 0.55rem 1.1rem; text-align: center; }
  .ph-hero-pill > span:last-child { white-space: nowrap; font-size: 0.95rem; }
}

/* Slide-in menu: the tree mark a little bigger (Mike, 29 Oct). */
#drawer img[src*="mark"] { height: 7.5rem; }
@media (max-height: 700px) { #drawer img[src*="mark"] { height: 5rem; } }