/* South Facing Garden — Property Checks pages: compact opening section (shared).

   Linked from every Property Checks page, AFTER the page's own <style> block, so these rules
   take precedence over the hero rules each page carries inline. A new Property Checks page
   only needs the same <link> to get the same spacing. Not used by the home page or the
   privacy, terms and support pages.

   Colours, fonts, buttons and wording are untouched: this file only tightens spacing. */

/* Breadcrumb. It is a <nav>, so it also picks up the page's top-bar rule for every <nav>
   (64px tall, with a background and a bottom border). Here it is just a line of links. */
.breadcrumb {
  height: auto;
  padding: 14px 24px 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
}
body.comfort .breadcrumb { background: none; }

/* Hero: less padding above and below, a slightly wider text column so titles and
   introductions take fewer lines, and tighter gaps between the parts. */
.page-hero { padding: 22px 24px 32px; }
.page-hero-inner { max-width: 900px; }
.page-eyebrow { margin-bottom: 14px; }
.page-hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin-bottom: 12px; }
/* The introduction matches the width of the page's text column (860px), so on a desktop every
   page's introduction fits on two lines and the heroes are the same height. */
.page-hero-sub { max-width: 860px; font-size: clamp(1rem, 2.2vw, 1.1rem); margin-bottom: 24px; line-height: 1.65; }

/* Gap between the hero and the first piece of content. */
.content-wrap { padding-top: 40px; }
.content-wrap > .content-h2:first-child,
.content-wrap > .content-body:first-child > .content-h2:first-child { margin-top: 0; }

@media (max-width: 768px) {
  .breadcrumb { padding: 12px 20px 0; }
  .page-hero { padding: 18px 20px 28px; }
  .page-hero-sub { margin-bottom: 20px; }
  .content-wrap { padding-top: 32px; }
}

/* Phones: some pages set their own hero padding at this width; keep it compact here too. */
@media (max-width: 480px) {
  .page-hero { padding: 16px 20px 26px; }
  .page-hero h1 { font-size: 2rem; }
}