/* Candidate-only: the two-column form + map band that sits immediately above
   the footer on every one of the 27 routes.

   WHY ITS OWN STYLESHEET, rather than rules added to service-pages.css and
   homepage.css:

   1. The band ships on ALL 27 routes. The homepage does not load
      service-pages.css, and the three retained pages (contact, privacy-policy,
      terms-of-use) carry no `service-page` body class, so a
      `.service-page`-scoped rule would not reach them. One unscoped sheet
      linked everywhere covers all 27 with a single rule set instead of two
      near-duplicate copies that could drift apart.
   2. candidate/apply-display-defect-fixes.mjs parses every selector in
      service-pages.css and REFUSES TO RUN unless each one is
      `.service-page`-scoped or the shared mobile-drawer rule. Adding unscoped
      band selectors there would permanently break that applier.
   3. It leaves service-pages.css (?v=20260923f) and homepage.css
      (?v=20260923c) byte-identical, so their cache-token discipline and every
      gate measured against them are preserved by construction rather than by
      re-verification.

   This file is new, so no stale copy of it can be cached anywhere; it is
   nevertheless served with its own ?v= token for consistency with the rest of
   the site, and every reference to it carries that token.

   Every selector here is prefixed `.rr-contact-band` (or is the embed
   container the provider script targets), so this sheet cannot affect any
   existing element on any page. */

.rr-contact-band {
  background: #fff4a3;
  padding: clamp(3.5rem, 7vw, 5.5rem) 1.25rem;
  font-family: 'Public Sans', sans-serif;
  color: #20243a;
}

/* Same measure as the rest of the site's content: width: min(100%, 88rem)
   centred, matching .service-page .service-shell and the header/footer
   max-w-[88rem] wrappers. The band is therefore contained within the site
   content measure rather than full-bleed. */
.rr-contact-band__shell {
  width: min(100%, 88rem);
  margin-inline: auto;
}

/* One column by default (mobile and tablet), two from 64rem/1024px up, which
   is the same breakpoint the homepage uses for its own lg:grid-cols-2 rows. */
.rr-contact-band__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 64rem) {
  .rr-contact-band__grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

/* min-width: 0 is load-bearing, not decorative. A grid item's default
   min-width is auto, so a wide or unbreakable child (a third-party form
   control, a long email address) can force the track wider than its share and
   push the page into horizontal overflow. This lets the column shrink. */
.rr-contact-band__col {
  min-width: 0;
}

.rr-contact-band__col > :first-child {
  margin-top: 0;
}

.rr-contact-band h2 {
  margin: 0 0 .75rem;
  color: #171a42;
  font-family: Sora, sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}

.rr-contact-band__deck {
  max-width: 44rem;
  margin: 0 0 1.5rem;
  border-left: .25rem solid #ff0000;
  padding-left: 1rem;
  font-size: clamp(1rem, 1.6vw, 1.0625rem);
  line-height: 1.7;
}

.rr-contact-band__address {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  /* The band carries a street address and the site has one known unbreakable
     -string overflow elsewhere; allow a break rather than risk a repeat. */
  overflow-wrap: anywhere;
}

/* The map iframe.

   It carries an explicit height here AND a height attribute in the markup, so
   it measures a non-zero rect even before any stylesheet is applied.

   It deliberately does NOT use loading="lazy": a lazily-loaded iframe below the
   fold is not fetched until it approaches the viewport, so an automated check
   measuring the page would find an unloaded frame, and a user scrolling quickly
   meets an empty box. */
.rr-contact-band__map {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: 1.25rem;
  background: #fffdf2;
  box-shadow: 0 12px 0 0 rgb(23 26 66 / .12);
}

@media (max-width: 47.99rem) {
  .rr-contact-band__map {
    height: 320px;
  }
}

/* The operator-supplied embed renders into this container. Nothing about its
   internals is assumed; these rules only stop a wide child escaping the
   column. */
.rr-contact-band .rr-form-embed {
  max-width: 100%;
  min-height: 320px;
}

.rr-contact-band .rr-form-embed :where(iframe, img, table, input, textarea, select) {
  max-width: 100%;
}

.rr-contact-band .rr-form-embed iframe {
  width: 100%;
  border: 0;
}