/* ===========================================================================
   Service pages — "Chequer Coast"
   ---------------------------------------------------------------------------
   Only what a service page adds on top of homepage.css: the image hero.
   The page H1 and the H3 card grid used to live here too — until location
   pages started using both and inherited nothing, because they do not load
   this sheet. Anything TWO templates share belongs in homepage.css; this file
   is for what is genuinely service-page-only.
   =========================================================================== */

/* --- hero: image + copy, no form (the form is section 2) ------------------ */
.sv-hero {
  position: relative;
  padding-bottom: clamp(30px, 3.4vh, 46px);
  background:
    radial-gradient(760px 420px at 88% 6%, rgba(255, 76, 0, .10), transparent 68%),
    var(--sand);
}
.sv-hero-grid {
  display: grid;
  grid-template-columns: 1.06fr .94fr;
  gap: clamp(30px, 4.4vw, 62px);
  align-items: center;
  padding-top: clamp(14px, 2vh, 26px);
}
.sv-hero-copy .hb-hero-open { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }

.sv-hero-copy .hb-lead + .hb-lead { margin-top: 1.05em; }
.sv-check { margin-top: 26px; }
.sv-hero-copy .hb-acts { margin-top: 24px; }

/* --- section rhythm on a service page ------------------------------------ */
.hb-sec > .hb-wrap > .hb-marks { margin-top: 22px; }
.hb-sec > .hb-wrap > .hb-lead + .hb-lead { margin-top: 1.05em; }
.hb-sec > .hb-wrap > .hb-acts { margin-top: 28px; }

/* --- breakpoints: on mobile the image leads, then the copy --------------- */
@media (max-width: 1000px) {
  .sv-hero-grid { grid-template-columns: 1fr; }
  .sv-hero-fig { order: -1; max-width: 640px; }
  .sv-hero-copy { order: 0; }
}