/* ==========================================================================
   Ally Property Inspections — shared components

   The pieces that appear on more than one page, defined once. Loaded on every
   page, which is the point: the old site defined its card, its comparison
   table and its call-to-action band separately inside each page's own <style>
   block, so changing any of them meant editing thirty pages and missing one.

   What belongs here: anything a shortcode in inc/shortcodes.php renders, and
   anything that turned out to be the same component on three or more pages.
   What does not: a layout that exists on exactly one page. That stays in
   assets/ally-page-<slug>.css.

   Everything below is written against the tokens in ally-tokens.css. No
   literal colour, font stack or spacing value appears in this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   [ally_service_areas] — the published coverage list
   -------------------------------------------------------------------------- */

/*
 * The states stack rather than sitting side by side, and the reason is the
 * shape of the data: Alabama is 130 towns and Georgia is 58. Put them in two
 * columns of the page and Alabama runs to twice Georgia's height with an empty
 * half-page beside it. Full width each, the town list gets five columns instead
 * of two and the tall one comes down from sixty-five rows to twenty-six.
 */
.ally-areas {
  display: grid;
  gap: var(--s-7);
}

.ally-areas-heading {
  font-family: var(--font-display);
  font-size: var(--f-subheading);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-blue-deep);
  margin: 0 0 var(--s-1);
  padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--c-blue-tint);
}

.ally-areas-count {
  font-size: var(--f-fine);
  color: var(--c-ink-soft);
  margin: 0 0 var(--s-4);
}

/*
 * Multi-column rather than a grid: the list is alphabetical, and columns read
 * down-then-across, which keeps A next to B. A grid would run A B C across the
 * first row and break the alphabet the reader is scanning by.
 *
 * A column *width* rather than a column count, so the number of columns falls
 * out of the space available instead of out of a breakpoint. The Alabama list
 * is 130 towns and the Georgia one is 58; at the same viewport width they want
 * different numbers of columns, and this gives them that for free.
 */
.ally-areas-list {
  /*
   * The global --measure cap is right for everything it was written for and
   * wrong here. 70ch keeps a line of prose readable by stopping the eye having
   * to travel back across a wide page; a column of one-word town names has no
   * line to travel. Left in place it clamps the list to 560px, which is three
   * columns of unused page and Alabama running to sixty-five rows.
   */
  max-width: none;
  columns: 11rem;
  column-gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--f-caption);
  line-height: 1.9;
  color: var(--c-ink-soft);
}

.ally-areas-list li {
  break-inside: avoid;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------------------
   [ally_offices] — address, phone, email and hours, from inc/locations.php
   -------------------------------------------------------------------------- */

.ally-offices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-4);
}

.ally-office {
  background: var(--c-bg);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
}

.ally-office-name {
  font-family: var(--font-display);
  font-size: var(--f-subheading);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  color: var(--c-ink);
  margin: 0 0 var(--s-2);
}

.ally-office-address {
  font-size: var(--f-caption);
  line-height: var(--lh-body);
  color: var(--c-ink-soft);
  margin: 0 0 var(--s-3);
}

.ally-office-contact {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0 0 var(--s-3);
  font-size: var(--f-caption);
}

.ally-office-contact a {
  color: var(--c-blue);
  text-decoration: none;
  /* The email is long enough to overflow a narrow card on a phone. */
  overflow-wrap: anywhere;
}

.ally-office-contact a:hover,
.ally-office-contact a:focus-visible {
  text-decoration: underline;
}

.ally-office-hours {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding-top: var(--s-3);
  border-top: 1px solid var(--c-rule);
  font-size: var(--f-fine);
  color: var(--c-ink-soft);
}

/* --------------------------------------------------------------------------
   PAGE SHELL

   The pieces every rebuilt page is made of: a hero band, a prose column, an
   alternating section band, a call-to-action. Each of the thirteen hand-built
   pages carried its own copy of all four, under its own class names, inside its
   own <style> block — which is why the site had thirty different blues and no
   way to change any of them.

   A page that needs nothing beyond these gets no stylesheet of its own.
   -------------------------------------------------------------------------- */

.ally-page {
  color: var(--c-ink);
  font-size: var(--f-body);
  line-height: var(--lh-body);
}

.ally-page .wrap {
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.ally-page .wrap-narrow {
  max-width: 820px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.ally-page .eyebrow {
  font-family: var(--font-display);
  font-size: var(--f-eyebrow);
  font-weight: var(--w-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-yellow);
  margin: 0 0 var(--s-3);
}

.ally-page h1 {
  font-family: var(--font-display);
  font-size: var(--f-title);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  /* No letter-spacing here. Content headings are capitals and their tracking is
     set once, in ally-tokens.css. A value at this point would be (0,1,1) in a
     file that loads after tokens, so it would win the tie on source order and
     quietly put the negative sentence-case tracking back under the capitals. */
  margin: 0 0 var(--s-4);
}

.ally-page h2 {
  font-family: var(--font-display);
  font-size: var(--f-heading);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  margin: 0 0 var(--s-4);
}

.ally-page h3 {
  font-family: var(--font-display);
  font-size: var(--f-subheading);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  color: var(--c-ink);
  margin: var(--s-5) 0 var(--s-3);
}

.ally-page p {
  margin: 0 0 var(--s-4);
  max-width: var(--measure);
}

/* :has() is doing real work here: it lets the measure cap apply to paragraphs
   of text and not to the ones the editor used as an image wrapper. Browsers
   without it fall back to the capped width, which is the current behaviour
   rather than a broken one. */
.ally-page p:has(> img),
.ally-page p.ally-actions {
  max-width: none;
}

/*
 * --measure exists to stop a line of text running so wide the eye loses its
 * place on the way back. An image has no such problem, and an image clamped to
 * the text measure leaves half the page empty beside it, which reads as a
 * broken layout rather than a considered one.
 */
.ally-page img {
  display: block;
  max-width: 100%;
  height: auto;
}

.ally-page p > img {
  border-radius: var(--radius-lg);
}

.ally-page a {
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ally-page a:hover,
.ally-page a:focus-visible {
  color: var(--c-blue-deep);
}

/* --- the hero band ------------------------------------------------------- */

.ally-hero {
  background: var(--c-blue-deep);
  color: var(--c-bg);
  padding-block: var(--s-8) var(--s-7);
}

.ally-hero h1,
.ally-hero p {
  color: var(--c-bg);
}

.ally-hero .lede {
  font-size: var(--f-lead);
}

.ally-hero .sub {
  color: var(--c-blue-tint);
}

.ally-hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin-top: var(--s-6);
}

/* --- section bands ------------------------------------------------------- */

.ally-band {
  padding-block: var(--s-8);
  background: var(--c-bg);
}

.ally-band-soft {
  background: var(--c-bg-soft);
  border-block: 1px solid var(--c-rule);
}

.ally-band > :last-child > :last-child {
  margin-bottom: 0;
}

/* --- buttons ------------------------------------------------------------- */

.ally-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: var(--s-6) 0 0;
  max-width: none;
}

/*
 * A button is not a prose link and must not be underlined. Two rules say
 * otherwise and both have to be beaten:
 *
 *   .ally-page a                                   (0,1,1) — this file
 *   .ast-single-post .entry-content a              (0,2,1) — Astra, inline
 *
 * So the selector below is (0,2,1) as well, which ties Astra and wins on source
 * order because ally-components.css is enqueued with ally-tokens as a
 * dependency and ally-tokens depends on astra-theme-css. Astra's inline block
 * prints with its own handle, ahead of this file.
 *
 * Verified against the rendered page rather than reasoned about: the first
 * attempt at this rule was (0,2,0) and lost silently, leaving every button on
 * every rebuilt page underlined while the stylesheet looked correct.
 */
.ally-page a.ally-btn,
a.ally-btn,
.ally-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3) var(--s-5);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: var(--f-body);
  font-weight: var(--w-bold);
  text-decoration: none;
  border: 1px solid transparent;
}

.ally-page a.ally-btn-primary,
a.ally-btn-primary,
.ally-btn-primary {
  background: var(--c-yellow);
  color: var(--c-ink);
}

.ally-page a.ally-btn-primary:hover,
.ally-page a.ally-btn-primary:focus-visible,
.ally-btn-primary:hover,
.ally-btn-primary:focus-visible {
  background: var(--c-yellow-deep);
  color: var(--c-ink);
}

.ally-page a.ally-btn-ghost,
a.ally-btn-ghost,
.ally-btn-ghost {
  background: transparent;
  color: var(--c-bg);
  border-color: rgba(255, 255, 255, .45);
}

.ally-page a.ally-btn-ghost:hover,
.ally-page a.ally-btn-ghost:focus-visible,
.ally-btn-ghost:hover,
.ally-btn-ghost:focus-visible {
  background: rgba(255, 255, 255, .1);
  color: var(--c-bg);
}

/*
 * Colour has the same specificity problem the underline had, and it matters
 * more. `.ally-page a` sets the link blue at (0,1,1); `.ally-btn-primary` set
 * near-black on yellow at (0,1,0) and lost, so the primary button rendered as
 * blue text on yellow — about 3:1 — and the ghost button as blue on the deep
 * blue hero, about 1.5:1. Both fail WCAG AA outright. The variants are raised
 * to (0,2,1) to match the base rule above.
 */

/* On a light band the ghost button needs the opposite treatment. */
.ally-page .ally-band a.ally-btn-ghost,
.ally-band .ally-btn-ghost {
  color: var(--c-ink);
  border-color: var(--c-rule);
}

.ally-page .ally-band a.ally-btn-ghost:hover,
.ally-page .ally-band a.ally-btn-ghost:focus-visible,
.ally-band .ally-btn-ghost:hover,
.ally-band .ally-btn-ghost:focus-visible {
  background: var(--c-blue-tint);
  color: var(--c-ink);
}

/* --- a legal / long-text page -------------------------------------------- */

.ally-legal h2 {
  font-size: var(--f-subheading);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-rule);
}

.ally-legal h3 {
  font-size: var(--f-lead);
}

.ally-legal p {
  font-size: var(--f-body);   /* body size, as Meredith asked (was caption, 14px) */
  line-height: 1.7;
  color: var(--c-ink-soft);
}

.ally-legal dl {
  margin: 0 0 var(--s-5);
  font-size: var(--f-caption);
  line-height: 1.7;
  color: var(--c-ink-soft);
}

.ally-legal dt {
  font-weight: var(--w-semibold);
  color: var(--c-ink);
  margin-top: var(--s-3);
}

.ally-legal dd {
  margin: 0 0 var(--s-2);
}

/* --------------------------------------------------------------------------
   A CARD GRID OF LINKS

   An index page: /resources/ today, and anything else that turns out to be a
   list of places to go rather than something to read.
   -------------------------------------------------------------------------- */

.ally-page .res-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.ally-page .res-grid li {
  background: var(--c-bg);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  padding: var(--s-5);
}

.ally-page .res-grid h2 {
  font-size: var(--f-subheading);
  margin-bottom: var(--s-2);
}

.ally-page .res-grid h2 a {
  text-decoration: none;
}

.ally-page .res-grid h2 a:hover,
.ally-page .res-grid h2 a:focus-visible {
  text-decoration: underline;
}

.ally-page .res-grid p {
  margin-bottom: 0;
  font-size: var(--f-caption);
  color: var(--c-ink-soft);
}

/* ==========================================================================
   Forms — [ally_form]

   Input styling itself is global (ally-tokens.css): 16px text so iOS does not
   zoom, one border token, one radius. This is layout only.
   ========================================================================== */
.ally-form-wrap { max-width: 640px; }
.ally-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4) var(--s-4);
  margin-bottom: var(--s-5);
}
.ally-form__field { grid-column: 1 / -1; }
.ally-form__field--half { grid-column: auto; }
@media (max-width: 560px) { .ally-form__field--half { grid-column: 1 / -1; } }
.ally-form__req { color: var(--c-blue-deep); }
.ally-form__group { grid-column: 1 / -1; margin: 0 0 -6px; font-weight: 700; }   /* "Name *" over First / Last */
.ally-form input:focus-visible,
.ally-form select:focus-visible,
.ally-form textarea:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 1px;
  border-color: var(--c-blue);
}
.ally-form__submit { min-width: 12rem; }
.ally-form__notice {
  padding: var(--s-4) var(--s-5);
  border-radius: var(--radius);
  margin: 0 0 var(--s-5);
  font-weight: 600;
}
.ally-form__notice--ok  { background: var(--c-blue-tint); color: var(--c-blue-deep); border-left: 4px solid var(--c-blue); }
.ally-form__notice--err { background: #fdf3e6; color: var(--c-ink); border-left: 4px solid var(--c-yellow-deep); }
/* honeypot: reachable to a bot, invisible and inert to a person */
.ally-form__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ==========================================================================
   Tiles — a grid of large link targets with an icon and a label.

   Used wherever a page asks the visitor to pick one thing: a market to
   schedule in, a sample report, a good or bad review. One component rather
   than a grid per page, so the three location pickers on the site cannot
   drift apart.
   ========================================================================== */
.ally-page .ally-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.ally-page .ally-tiles--2 { max-width: 640px; margin-inline: auto; }
.ally-page .ally-tiles--3 { max-width: 760px; margin-inline: auto; }
.ally-page .ally-tiles--4 { max-width: 1000px; margin-inline: auto; }
.ally-page .ally-tiles li { margin: 0; }
.ally-page a.ally-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  height: 100%;
  padding: var(--s-6) var(--s-5);
  border: 1px solid var(--c-rule);
  border-radius: var(--radius-lg);
  background: var(--c-bg);
  color: var(--c-ink);
  text-decoration: none;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ally-page a.ally-tile img {
  width: auto;
  max-width: 120px;
  max-height: 120px;
  margin: 0;
  border-radius: 0;
}
.ally-page a.ally-tile:hover {
  border-color: var(--c-blue);
  box-shadow: 0 6px 18px rgba(13, 28, 69, .08);
  transform: translateY(-2px);
  color: var(--c-blue-deep);
}
.ally-page a.ally-tile:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ally-page a.ally-tile { transition: none; } .ally-page a.ally-tile:hover { transform: none; } }

/* ==========================================================================
   Steps — a numbered list the visitor works through in order.
   The number is the list's own counter, so reordering is an edit to the
   markup and nothing else.
   ========================================================================== */
.ally-page .ally-steps { list-style: none; counter-reset: ally-step; margin: 0 0 var(--s-6); padding: 0; }
.ally-page .ally-steps li {
  counter-increment: ally-step;
  position: relative;
  padding: var(--s-4) 0 var(--s-4) calc(48px + var(--s-4));
  min-height: 48px;
  border-bottom: 1px solid var(--c-rule);
  margin: 0;
}
.ally-page .ally-steps li::before {
  content: counter(ally-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--s-4);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-blue);
  color: var(--c-bg);
  font-family: var(--font-display);
  font-weight: 700;
}

/* A short list of linked items set in columns. */
.ally-page .ally-checklist { columns: 3 12rem; column-gap: var(--s-6); margin: 0 0 var(--s-6); padding-left: 1.2em; }
.ally-page .ally-checklist li { break-inside: avoid; margin: 0 0 var(--s-2); }

/* Map embed: fixed ratio, lazy-loaded in the markup. */
.ally-page .ally-map { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--c-bg-soft); }
.ally-page .ally-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   Raw design blocks  (.ally-raw)
   A page pasted from one of Meredith's standalone design files sits inside
   <div class="ally-raw">. Her files were drawn on browser defaults (16px,
   normal line height, default list and heading margins), so this hands those
   defaults back inside the block instead of the theme's body type. Her own
   rules are all scoped to the block's id, so they outrank everything here.
   Shared by every raw page; nothing here is page-specific.
   ========================================================================== */
.ally-raw { font-size: 16px; line-height: normal; font-weight: 400; }   /* her files are drawn at 400 */
.ally-raw :where(p, ul, ol, li, blockquote, figure) { margin: revert; padding: revert; max-width: none; }
.ally-raw :where(h1, h2, h3, h4, h5, h6) { margin: revert; font: revert; letter-spacing: revert; text-transform: revert; color: revert; }

/* Form labels as live's CE forms: brand grey, bold. Astra's  label, legend
   colour otherwise applies. */
.ally-form label,
.ally-form__group { color: var(--c-gray); font-weight: 700; }

/* The two CE state pages were ported from live with headings set to
   line-height: inherit, written against Astra's body line height (1.85714).
   The theme body is 1.6, which made every heading and paragraph on those pages
   shorter than live. One shared rule for that family of pages, rather than an
   edit in each page file. */
.ally-ce, .ally-ce-al, .ally-ceh { line-height: 1.85714; }

/* Astra fixes inputs and selects at 40px tall; with 12px padding that clips
   16px text (the CE course list showed half its first option). */
.ally-form :is(input:not([type=checkbox]):not([type=radio]), select) { height: auto; min-height: 48px; line-height: 1.5; }

/* Ally Designed template: Meredith draws her pages on a 16px base, not the
   theme body size, so text that sets no size of its own matches her file. */
.ally-designed .entry-content { font-size: 16px; }

/* ==========================================================================
   Split hero  (.ally-hero--split)
   The standard hero band with a white card on the right: a form, a quote
   calculator, anything that should sit above the fold. First used on Contact
   (Meredith, Oct 2026: "too bare" plain band, dated photo-and-box on live).
   Shared component -- no page stylesheet involved.
   ========================================================================== */
.ally-hero--split {
  position: relative;
  overflow: hidden;
  padding-block: var(--s-8) var(--s-8);
  background: linear-gradient(135deg, var(--c-blue-deep) 0%, var(--c-blue) 100%);
}
/* concentric rings, after the pin in the logo; decoration only */
.ally-hero--split::before {
  content: "";
  position: absolute;
  width: 900px;
  height: 900px;
  left: -360px;
  bottom: -520px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 34px, rgba(255, 255, 255, .06) 34px 36px);
  pointer-events: none;
}
.ally-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  gap: var(--s-8);
  align-items: start;
}
.ally-hero--split .eyebrow { color: var(--c-yellow); }
.ally-page .ally-hero__contacts {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3);
}
.ally-hero__contacts li { margin: 0; }
.ally-hero__contacts li:last-child { grid-column: 1 / -1; }
.ally-page .ally-hero__contacts a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s-3) 14px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .07);
  color: var(--c-bg);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease;
}
.ally-page .ally-hero__contacts a:hover,
.ally-page .ally-hero__contacts a:focus-visible {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .5);
  color: var(--c-bg);
}
.ally-hero__contacts span {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-yellow);
}
.ally-hero .ally-hero__note { margin: var(--s-4) 0 0; font-size: var(--f-caption); color: var(--c-blue-tint); }

.ally-hero__card {
  padding: var(--s-6);
  border-radius: 16px;
  background: var(--c-bg);
  color: var(--c-ink);
  box-shadow: 0 24px 60px rgba(10, 22, 60, .30);
}
.ally-hero .ally-hero__card h2 { margin: 0 0 var(--s-2); color: var(--c-ink); font-size: 26px; }
.ally-hero .ally-hero__card p { color: var(--c-ink-soft); }
.ally-hero__card .ally-form-wrap { max-width: none; }
.ally-hero__card .ally-form__submit { width: 100%; }

@media (max-width: 960px) {
  .ally-hero__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .ally-hero__card { padding: var(--s-5); }
}
@media (max-width: 700px) {
  .ally-page .ally-hero__contacts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .ally-page .ally-hero__contacts { grid-template-columns: 1fr; }
  .ally-page .ally-hero__contacts a { font-size: 16px; }
}

/* Form fields, to the design system: white field, one border token, 8px
   radius, a blue focus ring; textarea included. */
.ally-form :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
  width: 100%;
  border: 1px solid var(--c-rule);
  border-radius: 8px;
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: 16px;
  padding: 12px 14px;
  box-shadow: none;
}
.ally-form :is(input, select, textarea):hover { border-color: #c9c5c6; }
.ally-form label { display: block; margin-bottom: 6px; font-size: 14px; }

/* ==========================================================================
   Classic pages  (body.ally-classic)
   Pages Meredith asked to rebuild to the live site's design rather than the
   new one: What We Inspect, Service Areas, Terms & Privacy and the
   After-You-Schedule FAQs. A page opts in with the _ally_classic meta
   (functions.php), which adds the body class. Everything they share is here,
   as one block; there are no page stylesheets for them. Layout and sizes are
   measured from live at 1440px. Fonts are NOT live's: Meredith (26 Oct 2026)
   decided Be Vietnam Pro headings and Open Sans 500 body, as on every other
   page, in place of live's Montserrat, Gotham and Impact.
   ========================================================================== */
.ally-classic .entry-content { font-family: var(--font-text); font-weight: 500; color: #000; }
.ally-classic .entry-title { font-family: var(--font-display); }
.ally-classic .entry-content :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: 900;
  color: #013C74;
  text-transform: uppercase;
  letter-spacing: 0;
}
.ally-classic .entry-title {
  font-size: 30px;
  font-weight: 400;
  line-height: 1.2;
  color: #013C74;
  text-transform: uppercase;
  letter-spacing: 0;
}

.cl { font-size: 14px; line-height: 1.857; }
.cl :is(h1, h2, h3, p, ul) { max-width: none; }
.cl a { color: #F3CB48; text-decoration: none; }
.cl a:hover { color: #013C74; }
.cl-wrap { max-width: 1140px; margin: 0 auto; padding: 0 10px; }

/* photo banner, 500px, as live */
.cl-photo { height: 500px; background-size: cover; background-position: 50% 50%; }
/* short map strip (Service Areas): the headline and a Schedule button stay above the fold on a 13-inch laptop (Meredith, 26 Oct 2026) */
.cl-photo--strip { height: 170px; }
.cl .cl-cta { margin: 0 0 28px; }
.cl .cl-cta a { color: var(--c-bg); }

/* white title box overlapping the banner (What We Inspect) */
.cl-titlebox-row { position: relative; z-index: 1; max-width: 1140px; margin: -160px auto 0; }
.cl-titlebox { width: 570px; max-width: 100%; padding: 50px; background: #fff; }
.cl .cl-titlebox h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 70px;
  font-weight: 900;
  line-height: 1.4;
  color: #1963AC;
}
.cl-band { margin-top: -49px; padding: 70px 0 25px; background: #1E60AB; color: #fff; }
.cl-band p { margin: 0; font-size: 20px; font-weight: 400; line-height: 1.857; color: #fff; }

/* heading + list beside an image (What We Inspect) */
.cl-split {
  display: grid;
  grid-template-columns: 360px minmax(0, 740px);
  justify-content: space-between;
  align-items: start;
  padding-top: 70px;
  padding-bottom: 70px;
}
.cl .cl-impact {
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 1px;
  text-transform: capitalize;
  color: #1963AC;
}
.cl-dots { list-style: none; margin: 0; padding: 0; }
.cl-dots li { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 21px; line-height: 39px; color: #1963AC; }
.cl-dots li::before { content: ""; flex: none; width: 11px; height: 11px; margin-right: 3px; border-radius: 50%; background: #1963AC; }
.cl-dots a { color: #1963AC; }
.cl-split img { display: block; width: 100%; height: auto; }

/* long-form body (Service Areas, Terms) */
.cl-body { padding-top: 50px; padding-bottom: 60px; }
.cl .cl-xl { margin: 0 0 20px; font-size: 60px; line-height: 1.4; }
.cl .cl-h3 { margin: 0 0 20px; font-size: 30px; font-weight: 800; line-height: 1.3; }
.cl .cl-h2 { margin: 60px 0 20px; font-size: 45px; line-height: 1.3; }
.cl-body p { margin: 0 0 20px; }
.cl .cl-state {
  margin: 60px 0 20px;
  font-family: var(--font-display);
  font-size: 35px;
  line-height: 1.3;
  color: #1963AC;
}
.cl .ally-areas-heading,
.cl .ally-areas-count { display: none; }   /* the page sets its own state headings */
.cl .ally-areas-list {
  display: block;
  columns: 4 260px;
  column-gap: 20px;
  margin: 0;
  padding: 0 0 0 10px;
  list-style: none;
}
.cl .ally-areas-list li { margin: 0; font-size: 18px; line-height: 1.857; color: #3075B5; break-inside: avoid; }

/* Terms & Privacy on the classic layout: live's wide column and headings */
.ally-classic .ally-legal .wrap-narrow { max-width: 1140px; padding-inline: 10px; }
.ally-classic .ally-legal :is(h1, h2) { margin: 50px 0 20px; font-size: 30px; line-height: 1.3; }
.ally-classic .ally-legal h1 { margin-top: 0; }
.ally-classic .ally-legal h3 { margin: 20px 0 10px; font-size: 15px; font-weight: 700; color: #000; text-transform: none; }
.ally-classic .ally-legal p { font-size: 17px; line-height: 1.857; color: #000; }
.ally-classic .ally-legal a { color: #F3CB48; text-decoration: none; }
.ally-classic .ally-legal hr { display: none; }

@media (max-width: 1024px) {
  .cl-split { grid-template-columns: 1fr; gap: 30px; }
  .cl .cl-xl { font-size: 40px; }
  .cl .cl-h2 { font-size: 32px; }
}
@media (max-width: 767px) {
  .cl-photo { height: 260px; }
  .cl-photo--strip { height: 110px; }
  .cl-titlebox-row { margin-top: -60px; padding: 0 10px; }
  .cl-titlebox { padding: 24px 28px; }
  .cl .cl-titlebox h1 { font-size: 42px; }
  .cl-band { margin-top: 0; padding-top: 25px; }
  .cl-band p { font-size: 17px; }
  .cl .cl-xl { font-size: 32px; }
  .cl .cl-h3 { font-size: 22px; }
  .cl .ally-areas-list { columns: 2; }
}
.ally-classic .ally-legal :is(p, ul, ol, dl, dd) { max-width: none; }
.ally-classic .ally-legal h2 { padding-top: 0; border-top: 0; }
.ally-classic .ally-legal dt { margin: 0; font-size: 17px; font-weight: 700; color: #000; }
.ally-classic .ally-legal dd { margin: 0 0 12px; font-size: 17px; line-height: 1.857; color: #000; }

/* Classic pages run on live's 14px base, so text sized in em matches it. */
.ally-classic .entry-content { font-size: 14px; }
.ally-classic header.entry-header .entry-title { font-weight: 400; }

/* "Need help?" chat launcher (SameDay, inc/chat.php). Live's theme makes
   every button uppercase at line-height 1, and the launcher picks that up. */
#sameday-chat-button { text-transform: uppercase; line-height: 1; }


/* CE pages: the class form as live renders it (labels on the 26px line, SUBMIT button) */
:is(.ally-ce, .ally-ce-al, .ally-ceh) .ally-form label { line-height: 26px; }
:is(.ally-ce, .ally-ce-al, .ally-ceh) .ally-form .ally-form__submit { min-width: 0; font-family: var(--font-text); font-size: 16px; font-weight: 800; text-transform: uppercase; }