/* htm-pages.css: the template layer, then per-family blocks. Loaded after htm-compat.css.

   TEMPLATE LAYER (cssT). Everything between here and the first FAM marker finishes the
   shared markup vocabulary: .head/.pill, .stats, .grid/.card, .fact-layout, .split,
   .gallery, ol.steps, .faq, aside.readmore, ul.areas, .ticks, guides, legal, thank-you.
   It sits ABOVE the FAM blocks on purpose: a family block with the same specificity
   wins, so a page family can still adjust a template without a fight.

   Why so many !important: htm-brand.css (older, loaded before this file) forces the
   legacy classes with !important. A later rule of equal specificity and equal
   importance wins, so each override below is only as strong as the rule it beats.

   Contents
     1  Dark hero details (buttons, links, focus)
     2  Breadcrumb strip
     3  Section head and pills
     4  Facts strip (.stats)
     5  Cards (.htm-card-grid, .grid) and icon tiles
     6  Photos: fact layout, gallery, split
     7  Steps (ol.steps, .htm-steps-list, process rail)
     8  Lists and link tiles (.ticks, .scope-grid, ul.areas, aside.readmore)
     9  FAQ accordions (nested pages)
    10  Guides (article body, step diagram)
    11  Legal pages and thank-you
    12  Trust strip, closing bands, small fixes
*/

/* 1. DARK HERO DETAILS ------------------------------------------------------
   chrome.css keeps white outline buttons and bright links on the named dark
   bands. .htm-hero is navy too (page-layouts.css) but is not in those lists
   because data-band="dark" is also printed on sections that render light.
   Same recipe, same specificity trick (:root + :is). */

:root .htm-hero :is(a.btn-call, .btn.btn-call, a.btn.ghost.btn-call),
:root .htm-hero a.btn-copper[href^="tel:"] {
  background: transparent;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.65) !important;
}

:root .htm-hero :is(a.btn-call, .btn.btn-call, a.btn.ghost.btn-call):hover,
:root .htm-hero a.btn-copper[href^="tel:"]:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff !important;
  border-color: #fff !important;
}

:root .htm-hero a:not([class]) {
  color: #8ee3ec;
}

:root .htm-hero a:not([class]):hover {
  color: #fff;
}

.htm-hero :focus-visible {
  outline-color: var(--focus-ring-on-dark);
}

/* 2. BREADCRUMB STRIP -------------------------------------------------------
   The trail sits above the hero in a .wrap. On 49 pages that wrap carries
   style="padding:14px 0 0", which zeroes the gutters and puts the trail at the
   screen edge. !important is the only way past an inline style. */

.wrap:has(> nav[aria-label="Breadcrumb"]) {
  padding: 0.875rem 1.5rem 0.625rem !important;
  font-size: 0.9rem !important;
}

[aria-label="Breadcrumb"] ol {
  align-items: center;
  padding-top: 0;
  row-gap: 0;
}

[aria-label="Breadcrumb"] li {
  min-width: 0;
}

/* The current page repeats the H1 and can be long. One line, ellipsis. */
[aria-label="Breadcrumb"] li:last-child {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[aria-label="Breadcrumb"] a {
  padding-block: 0.375rem;
}

@media (max-width: 768px) {
  .wrap:has(> nav[aria-label="Breadcrumb"]) {
    padding-inline: 1.25rem !important;
  }
}

/* 3. SECTION HEAD AND PILLS -------------------------------------------------
   .head/.pill (Denver, guides) and .section__head/.htm-pill (AZ, trust, home)
   are the same component. htm-brand left .head at 840px, left-aligned, and
   .pill as an inline element that ignored its own margin, so the pill overlapped
   the H2 by 8px. */

.head {
  max-width: 800px;
  margin: 0 auto clamp(2rem, 4vw, 2.75rem) !important;
  text-align: center;
}

.head h2 {
  margin: 0 0 0.875rem !important;
  line-height: 1.15 !important;
}

.head .lead {
  max-width: 62ch;
  margin: 0 auto !important;
  font-size: 1.1875rem !important;
  line-height: 1.6 !important;
  color: var(--text-secondary) !important;
}

.htm-section--dusk .head .lead {
  color: rgba(255, 255, 255, 0.88) !important;
}

.pill {
  display: inline-flex !important;
  align-items: center;
  margin: 0 0 1.125rem !important;
  padding: 0.5rem 1rem !important;
  background: rgba(26, 166, 184, 0.1) !important;
  border: 1px solid var(--htm-pool-deep) !important;
  border-radius: 2rem !important;
  font-size: 0.875rem;
  line-height: 1.2;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  color: var(--htm-pool-text) !important;
}

/* A lead paragraph that sits straight under a head, in the wrap itself. Left
   alone in the article and legal columns, where everything shares one left
   edge. The "Would you rather talk it through?" line carries an inline margin
   that zeroes its sides, hence the !important. */
.htm-section > .wrap:not(.guide-body):not(.htm-legal):not([style*="max-width"]) > p.lead,
.htm-section > .wrap:not(.guide-body):not(.htm-legal):not([style*="max-width"]) > p.section__lead {
  max-width: 68ch;
  margin-inline: auto;
}

.htm-section > .wrap:not(.guide-body):not(.htm-legal):not([style*="max-width"]) > :is(p.lead, p.section__lead)[style*="margin"] {
  margin-inline: auto !important;
  text-align: center;
}

/* 4. FACTS STRIP ------------------------------------------------------------
   Three figures under the hero: a white band with hairlines, dividers between
   the columns. htm-brand forces .stats to a translucent sand and .stat b to
   teal with !important. */

.stats {
  background: var(--bg-white) !important;
  border-block: 1px solid var(--htm-line);
}

.stat {
  padding: 0 clamp(1rem, 2.5vw, 2.25rem);
  border-left: 1px solid var(--htm-line);
}

.stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.stat b {
  color: var(--htm-dusk) !important;
}

.stat span {
  max-width: 34ch;
}

@media (max-width: 760px) {
  .stat,
  .stat:first-child {
    padding: 1.25rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--htm-line);
  }

  .stat:first-child {
    padding-top: 0;
    border-top: 0;
  }
}

/* 5. CARDS ------------------------------------------------------------------
   One card for .htm-card-grid > .htm-clarity-card (AZ, trust) and
   .grid > .card (Denver hubs, guides hub). Layout is in page-layouts.css. */

.htm-card-grid > .htm-clarity-card,
.grid > .card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-width: none;
  margin: 0;
  padding: 1.75rem !important;
  background: var(--bg-white) !important;
  border: 1px solid var(--htm-line) !important;
  border-top: 3px solid var(--htm-pool) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: 0 1px 2px rgba(11, 28, 44, 0.04), 0 10px 28px rgba(11, 28, 44, 0.07) !important;
  text-align: left;
}

.htm-card-grid > .htm-clarity-card h3,
.grid > .card h3 {
  margin: 0 0 0.625rem !important;
  font-size: 1.3125rem !important;
  line-height: 1.28 !important;
  color: var(--htm-dusk) !important;
}

.htm-card-grid > .htm-clarity-card h3 a,
.grid > .card h3 a {
  color: inherit;
  text-decoration: none;
}

.htm-card-grid > .htm-clarity-card h3 a:hover,
.grid > .card h3 a:hover {
  text-decoration: underline;
}

.htm-card-grid > .htm-clarity-card p,
.grid > .card p {
  margin: 0 0 1.25rem !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: var(--text-secondary) !important;
}

/* Icon tile: solid teal, white glyph, the same family as the home deck cards. */
.htm-card-grid .htm-clarity-card .ico,
.grid .card .ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 56px !important;
  height: 56px !important;
  margin: 0 0 1.25rem !important;
  padding: 0 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--htm-pool) 0%, var(--htm-pool-deep) 100%) !important;
  color: #fff;
  box-shadow: 0 4px 12px rgba(26, 166, 184, 0.25);
}

.htm-card-grid .htm-clarity-card .ico svg,
.grid .card .ico svg {
  width: 28px !important;
  height: 28px !important;
  color: #fff !important;
}

/* The link at the foot of a card. The text already carries its arrow, so the
   ::after arrow htm-brand adds would double it. */
.htm-card-grid .htm-clarity-card .more,
.grid .card .more {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin-top: auto;
  padding: 0.75rem 0 0 !important;
  border-top: 1px solid var(--htm-line);
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--htm-pool-text) !important;
  text-decoration: none;
}

.htm-card-grid .htm-clarity-card .more::after,
.grid .card .more::after {
  content: none !important;
}

.htm-card-grid .htm-clarity-card .more:hover,
.grid .card .more:hover {
  gap: 0.5rem;
  padding-left: 0 !important;
  color: var(--htm-pool-deep) !important;
  text-decoration: underline;
}

/* 6. PHOTOS: FACT LAYOUT, GALLERY, SPLIT -----------------------------------
   .fact-layout was never a grid, so two 755px photos stacked edge to edge on
   top of the fact boxes. Now a sticky photo column beside the facts. */

.fact-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.75rem, 3.5vw, 2.75rem) !important;
  align-items: start;
  margin-top: 0 !important;
}

.fact-layout > .fact-media {
  position: sticky;
  top: calc(var(--htm-nav-h) + 1.5rem);
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

@media (max-width: 900px) {
  .fact-layout {
    gap: 1.75rem !important;
  }

  .fact-layout > .fact-media {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .fact-layout > .fact-media:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.fact-media .photo-frame,
.gallery .photo-frame,
.split-media .photo-frame {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--htm-line);
  border-radius: 18px !important;
  box-shadow: 0 2px 4px rgba(11, 28, 44, 0.05), 0 12px 32px rgba(11, 28, 44, 0.12) !important;
  transform: none !important;
}

.fact-media .photo-frame:hover,
.gallery .photo-frame:hover,
.split-media .photo-frame:hover {
  transform: none !important;
}

.fact-media .fact-photo,
.gallery .fact-photo,
.split-media .fact-photo {
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: 0 !important;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.5rem !important;
  margin-top: 0 !important;
}

.gallery:has(> :only-child) {
  grid-template-columns: minmax(0, 820px);
  justify-content: center;
}

.gallery:has(> :only-child) .fact-photo {
  aspect-ratio: 16 / 9;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(1.75rem, 4vw, 3.5rem) !important;
  align-items: center;
  margin-top: 0 !important;
}

.split:has(> :only-child) {
  grid-template-columns: minmax(0, 72ch);
  justify-content: center;
}

.split-copy {
  max-width: 68ch;
  min-width: 0;
}

.split-copy p {
  margin-bottom: 1.25rem !important;
  font-size: 1.0625rem !important;
  line-height: 1.75 !important;
}

.split-copy > :last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 900px) {
  .split {
    gap: 1.75rem !important;
  }

  .split:has(> :only-child) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A fact box: one sourced statement. White card, teal spine. On its own the
   grid is two balanced columns (boxes differ in height, so columns, not rows,
   and no box leaves a hole). Beside photos it is one column. */
.facts-grid {
  display: block;
  column-count: 2;
  column-gap: 1.25rem;
}

.facts-grid > .factbox {
  margin: 0 0 1.25rem;
  break-inside: avoid;
}

.fact-layout .facts-grid {
  display: grid;
  column-count: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem !important;
}

.fact-layout .facts-grid > .factbox {
  margin: 0;
}

@media (max-width: 760px) {
  .facts-grid {
    column-count: 1;
  }
}

.factbox {
  padding: 1.125rem 1.375rem !important;
  background: var(--bg-white) !important;
  border: 1px solid var(--htm-line) !important;
  border-left: 4px solid var(--htm-pool) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(11, 28, 44, 0.04);
  line-height: 1.65 !important;
  transform: none !important;
}

.factbox:hover {
  border-left-color: var(--htm-pool-deep) !important;
  box-shadow: 0 6px 20px rgba(11, 28, 44, 0.08) !important;
  transform: none !important;
}

.factbox p {
  margin: 0 0 0.75rem !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
}

.factbox p:last-child {
  margin-bottom: 0 !important;
}

.factbox .src {
  margin-top: 0.75rem !important;
  padding-top: 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
}

.factbox .src a {
  overflow-wrap: anywhere;
}

/* 7. STEPS ------------------------------------------------------------------
   ol.steps and ol.htm-steps-list inside a content section: numbered cards.
   The copy inside .quote-aside is excluded, htm-compat.css owns that one. */

.htm-section ol.steps:not(.quote-aside ol),
.htm-section ol.htm-steps-list:not(.quote-aside ol) {
  display: grid;
  gap: 1rem !important;
  max-width: 860px;
  margin: clamp(1.5rem, 3vw, 2rem) auto 0 !important;
  padding: 0;
  list-style: none;
  counter-reset: stp;
}

.htm-section ol.steps:not(.quote-aside ol) > li,
.htm-section ol.htm-steps-list:not(.quote-aside ol) > li {
  position: relative;
  margin: 0;
  padding: 1.25rem 1.5rem 1.25rem 4.75rem !important;
  background: var(--bg-white) !important;
  border: 1px solid var(--htm-line) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(11, 28, 44, 0.04);
  counter-increment: stp;
  transform: none !important;
}

.htm-section ol.steps:not(.quote-aside ol) > li:hover,
.htm-section ol.htm-steps-list:not(.quote-aside ol) > li:hover {
  border-color: var(--htm-pool-deep) !important;
  box-shadow: 0 6px 20px rgba(11, 28, 44, 0.08) !important;
  transform: none !important;
}

.htm-section ol.steps:not(.quote-aside ol) > li::before,
.htm-section ol.htm-steps-list:not(.quote-aside ol) > li::before {
  content: counter(stp);
  position: absolute;
  top: 1.1rem;
  left: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--htm-dusk) 0%, var(--htm-dusk-rich) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.htm-section ol.steps:not(.quote-aside ol) > li h3,
.htm-section ol.htm-steps-list:not(.quote-aside ol) > li h3 {
  margin: 0 0 0.375rem !important;
  font-size: 1.1875rem !important;
  line-height: 1.3 !important;
  color: var(--htm-dusk) !important;
}

.htm-section ol.steps:not(.quote-aside ol) > li p,
.htm-section ol.htm-steps-list:not(.quote-aside ol) > li p {
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  color: var(--text-secondary) !important;
}

@media (max-width: 640px) {
  .htm-section ol.steps:not(.quote-aside ol) > li,
  .htm-section ol.htm-steps-list:not(.quote-aside ol) > li {
    padding: 1.125rem 1.125rem 1.125rem 3.9rem !important;
  }

  .htm-section ol.steps:not(.quote-aside ol) > li::before,
  .htm-section ol.htm-steps-list:not(.quote-aside ol) > li::before {
    top: 1rem;
    left: 1rem;
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
  }
}

/* Process page: four numbered cards, two by two. The rail on the home page
   (.htm-step-rail__item) is a different component and is not touched. */
.htm-step-rail:has(> .htm-step) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.htm-step {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  padding: 1.75rem;
  background: var(--bg-white);
  border: 1px solid var(--htm-line);
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px rgba(11, 28, 44, 0.04), 0 10px 28px rgba(11, 28, 44, 0.07);
}

.htm-step__number {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--htm-dusk) 0%, var(--htm-dusk-rich) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

.htm-step__content {
  min-width: 0;
}

.htm-step__content h3 {
  margin: 0 0 0.5rem;
  font-size: 1.375rem;
  color: var(--htm-dusk);
}

.htm-step__content p {
  margin: 0;
  line-height: 1.65;
  color: var(--text-secondary);
}

@media (max-width: 968px) {
  .htm-step-rail:has(> .htm-step) {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .htm-step {
    gap: 1rem;
    padding: 1.25rem;
  }

  .htm-step__number {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
  }
}

/* 8. LISTS AND LINK TILES ---------------------------------------------------
   ul.ticks: a drawn check, never a browser disc. */

ul.ticks {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

ul.ticks li {
  position: relative;
  margin: 0.55rem 0;
  padding-left: 1.75rem;
  line-height: 1.6;
}

ul.ticks li::before {
  content: "";
  position: absolute;
  top: 0.45em;
  left: 0.1rem;
  width: 0.7rem;
  height: 0.38rem;
  border-bottom: 2px solid var(--htm-pool-deep);
  border-left: 2px solid var(--htm-pool-deep);
  transform: rotate(-45deg);
}

/* "When you may not need this" and "What is out of scope": two cards. */
.scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.scope-grid > div {
  padding: 1.5rem 1.75rem;
  background: var(--htm-foam);
  border: 1px solid var(--htm-line);
  border-radius: var(--radius-card);
}

.scope-grid h3 {
  margin: 0 0 0.75rem;
  font-size: 1.3rem;
  color: var(--htm-dusk);
}

.scope-grid ul.ticks {
  margin-top: 0;
}

@media (max-width: 760px) {
  .scope-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ul.areas: a list of links shown as tiles (related services, coverage). */
ul.areas,
ul.areas.light {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul.areas:has(> :only-child) {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}

ul.areas li {
  margin: 0;
}

ul.areas li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 56px;
  padding: 1rem 1.25rem;
  background: var(--bg-white);
  border: 1px solid var(--htm-line);
  border-left: 4px solid var(--htm-pool);
  border-radius: 14px;
  color: var(--htm-ink);
  font-weight: 700;
  text-decoration: none;
}

.htm-section[data-band="light"] ul.areas li a {
  background: var(--htm-foam);
}

ul.areas li a::after {
  content: "\2192";
  flex: none;
  color: var(--htm-pool-text);
}

ul.areas li a:hover,
ul.areas li a:focus-visible {
  border-color: var(--htm-pool-text);
  color: var(--htm-pool-text);
}

.htm-section--dusk ul.areas li a {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.28);
  border-left-color: var(--htm-pool-bright);
  color: #fff;
}

.htm-section--dusk ul.areas li a::after {
  color: var(--htm-pool-bright);
}

.htm-section--dusk ul.areas li a:hover,
.htm-section--dusk ul.areas li a:focus-visible {
  border-color: var(--htm-pool-bright);
  color: #fff;
}

/* aside.readmore: "worth reading first". htm-brand paints an off-palette sage
   fill with a 4.06:1 label and links with no underline. */
aside.readmore {
  max-width: 860px;
  margin: clamp(1.75rem, 3vw, 2.5rem) auto 0 !important;
  padding: 1.5rem 1.75rem !important;
  background: var(--bg-white) !important;
  border: 1px solid var(--htm-line) !important;
  border-left: 4px solid var(--htm-pool-text) !important;
  border-radius: 16px !important;
}

aside.readmore .rg-intro {
  margin: 0 0 0.875rem !important;
  font-size: 0.8125rem !important;
  color: var(--htm-pool-text) !important;
}

aside.readmore ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

aside.readmore ul li {
  margin: 0 0 0.625rem !important;
}

aside.readmore ul li:last-child {
  margin-bottom: 0 !important;
}

aside.readmore a {
  color: var(--htm-pool-text) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

aside.readmore a::after {
  content: " \2192";
}

aside.readmore a:hover {
  padding-left: 0 !important;
  color: var(--htm-pool-deep) !important;
  border-bottom-color: transparent;
}

/* 9. FAQ ACCORDIONS (nested pages) -----------------------------------------
   .faq (Denver) and .htm-faq > details (AZ, not the home items). Dark by default, because htm-brand
   paints white type on translucent white and the FAQ lives in a navy band.
   A chevron says it opens; the whole row is the tap target (56px). */

.faq,
.htm-section .htm-faq {
  max-width: 820px;
  margin-inline: auto;
}

.faq details,
.htm-faq > details:not(.htm-faq__item) {
  margin: 0 0 0.75rem !important;
  padding: 0 !important;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 14px !important;
}

.faq details summary,
.htm-faq > details:not(.htm-faq__item) summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  position: relative;
  min-height: 56px;
  padding: 1rem 3.5rem 1rem 1.5rem !important;
  list-style: none;
  cursor: pointer;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  line-height: 1.35;
  color: #fff !important;
}

.faq details summary::-webkit-details-marker,
.htm-faq > details:not(.htm-faq__item) summary::-webkit-details-marker {
  display: none;
}

.faq details summary::after,
.htm-faq > details:not(.htm-faq__item) summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.75rem;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}

.faq details[open] summary,
.htm-faq > details:not(.htm-faq__item)[open] summary {
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.faq details[open] summary::after,
.htm-faq > details:not(.htm-faq__item)[open] summary::after {
  border-color: #8ee3ec;
  transform: translateY(-30%) rotate(-135deg);
}

.faq details summary:focus-visible,
.htm-faq > details:not(.htm-faq__item) summary:focus-visible {
  outline: 3px solid #8ee3ec;
  outline-offset: -6px;
}

.faq details p,
.htm-faq > details:not(.htm-faq__item) p {
  margin: 0 !important;
  padding: 1rem 1.5rem 1.25rem !important;
  font-size: 1rem !important;
  line-height: 1.7 !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

.faq details p a,
.htm-faq > details:not(.htm-faq__item) p a {
  color: #8ee3ec;
}

/* The same FAQ in a light band (a section that is not navy). */
.htm-section:not(.htm-section--dusk) :is(.faq, .htm-faq) > details:not(.htm-faq__item),
.htm-section:not(.htm-section--dusk) .faq details {
  background: var(--bg-white) !important;
  border-color: var(--htm-line) !important;
}

.htm-section:not(.htm-section--dusk) :is(.faq, .htm-faq) > details:not(.htm-faq__item) summary,
.htm-section:not(.htm-section--dusk) .faq details summary {
  color: var(--text-primary) !important;
}

.htm-section:not(.htm-section--dusk) :is(.faq, .htm-faq) > details:not(.htm-faq__item) summary::after,
.htm-section:not(.htm-section--dusk) .faq details summary::after {
  border-color: var(--htm-pool-text);
}

.htm-section:not(.htm-section--dusk) :is(.faq, .htm-faq) > details:not(.htm-faq__item)[open] summary,
.htm-section:not(.htm-section--dusk) .faq details[open] summary {
  color: var(--text-primary) !important;
  border-bottom-color: var(--htm-line);
}

.htm-section:not(.htm-section--dusk) :is(.faq, .htm-faq) > details:not(.htm-faq__item) summary:focus-visible,
.htm-section:not(.htm-section--dusk) .faq details summary:focus-visible {
  outline-color: var(--htm-pool-text);
}

.htm-section:not(.htm-section--dusk) :is(.faq, .htm-faq) > details:not(.htm-faq__item) p,
.htm-section:not(.htm-section--dusk) .faq details p {
  color: var(--text-secondary) !important;
}

.htm-section:not(.htm-section--dusk) :is(.faq, .htm-faq) > details:not(.htm-faq__item) p a,
.htm-section:not(.htm-section--dusk) .faq details p a {
  color: var(--htm-pool-text);
}

@media (max-width: 768px) {
  .faq details summary,
  .htm-faq > details:not(.htm-faq__item) summary {
    padding: 0.875rem 3rem 0.875rem 1.25rem !important;
    font-size: 1rem !important;
  }

  .faq details summary::after,
  .htm-faq > details:not(.htm-faq__item) summary::after {
    right: 1.25rem;
  }

  .faq details p,
  .htm-faq > details:not(.htm-faq__item) p {
    padding: 0.875rem 1.25rem 1.125rem !important;
    font-size: 1rem !important;
  }
}

/* 10. GUIDES ----------------------------------------------------------------
   An article column: 820px, one measure for text, a clear step from the H1
   to the H2s. The attribute selector keeps the pages that still carry the old
   inline max-width looking right until their markup is converted. */

.guide-body, .wrap[style*="max-width:820px"] {
  max-width: 820px;
  margin-inline: auto;
}

/* :where() keeps these at the lowest specificity, so a component inside the
   article (the step diagram, a fact box) can set its own sizes without a fight. */
:where(.guide-body, .wrap[style*="max-width:820px"]) h2 {
  margin: 2.75rem 0 0.75rem;
  font-size: clamp(1.625rem, 2.8vw, 2.125rem);
  line-height: 1.2;
}

:where(.guide-body, .wrap[style*="max-width:820px"]) :is(p, ul, ol, h3) {
  max-width: 68ch;
}

:where(.guide-body, .wrap[style*="max-width:820px"]) p {
  line-height: 1.7;
}

:where(.guide-body, .wrap[style*="max-width:820px"]) h3 {
  margin: 1.75rem 0 0.5rem;
}

:where(.guide-body, .wrap[style*="max-width:820px"]) > :first-child {
  margin-top: 0;
}

:where(.guide-body, .wrap[style*="max-width:820px"]) .lead {
  font-size: 1.1875rem;
  line-height: 1.6;
}

:where(.guide-body, .wrap[style*="max-width:820px"]) .lead strong {
  font-weight: 600;
}

.guide-h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1.12;
}

/* Reconnect and dispose put paragraphs straight in the 1132px wrap under a
   centred head, about 150 characters a line. One reading measure, centred. */
.htm-section > .wrap:not(.guide-body):not(.htm-legal):not([style*="max-width"]) > :is(p:not(.lead):not(.section__lead):not(:has(> .btn)), h3, h4, blockquote) {
  max-width: 42rem;
  margin-inline: auto;
}

/* A paragraph that only holds a button (a "how it works" link under the steps). */
.htm-section > .wrap > p:has(> .btn) {
  max-width: none;
  margin-top: 1.75rem !important;
  text-align: center;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

@media (max-width: 640px) {
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions > a {
    width: 100%;
  }
}

/* The numbered step diagram on the winter and new-house guides. Teal numerals
   and a small owner label per step. */
.diagram {
  margin: 2rem 0;
  padding: 1.75rem 1.75rem 1.25rem;
  background: var(--bg-white);
  border: 1px solid var(--htm-line);
  border-radius: 18px;
}

.diagram .dg-title {
  margin: 0 0 1.25rem;
  font-size: 1.375rem;
  line-height: 1.25;
}

.diagram .dg-flow {
  display: grid;
  max-width: none;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: dg;
}

.diagram .dg-flow > li {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  align-items: start;
  column-gap: 0.875rem;
  row-gap: 0.25rem;
  margin: 0;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--htm-line);
  counter-increment: dg;
}

.diagram .dg-flow > li:last-child {
  padding-bottom: 0.25rem;
  border-bottom: 0;
}

.diagram .dg-flow > li::before {
  content: counter(dg);
  display: flex;
  grid-column: 1;
  grid-row: 1 / span 3;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--htm-pool-text);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}

.diagram .dg-flow > li > * {
  grid-column: 2;
}

.diagram .dg-flow h3 {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.3;
}

.diagram .dg-by {
  display: inline-block;
  justify-self: start;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(26, 166, 184, 0.12);
  color: var(--htm-pool-text);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.diagram .dg-flow p {
  margin: 0;
}

.diagram .dg-caption {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--htm-muted);
}

@media (max-width: 480px) {
  .diagram {
    padding: 1.25rem 1rem 0.75rem;
  }
}

/* 11. LEGAL PAGES AND THANK-YOU --------------------------------------------
   Privacy and Terms: long, numbered-feel sections. A 44px H2 with no top
   margin made them a wall; now a measured column with a rule between topics. */

.htm-legal {
  max-width: 820px;
}

.htm-legal h1 {
  font-size: clamp(2rem, 4.5vw, 3rem);
}

.htm-legal h2 {
  margin: 2.75rem 0 0.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--htm-line);
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
}

.htm-legal h1 + p + h2 {
  margin-top: 2rem;
}

.htm-legal p,
.htm-legal li {
  max-width: 72ch;
  line-height: 1.75;
}

.htm-legal [id] {
  scroll-margin-top: 0.5rem; /* html already reserves the pinned navigation height. */
}

.htm-crumbs {
  padding-top: 14px;
  font-size: 0.9rem;
}

.htm-legal-toc {
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.5rem;
  background: var(--htm-foam);
  border: 1px solid var(--htm-line);
  border-radius: 16px;
  columns: 2;
  column-gap: 2rem;
}

.htm-legal-toc ul,
.htm-legal-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.htm-legal-toc li {
  margin: 0 0 0.4rem;
  break-inside: avoid;
}

@media (max-width: 640px) {
  .htm-legal-toc {
    columns: 1;
  }
}

/* Thank-you: nothing on this page starts a second lead. The quote buttons go,
   the call stays. The check mark above the H1 is drawn here, so the markup
   does not carry an icon. */
body.page-thanks .htm-nav .htm-nav-book,
body.page-thanks .htm-nav__inner > a.htm-nav-book,
body.page-thanks .htm-sticky-ctas {
  display: none !important;
}

body.page-thanks main .htm-section {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

body.page-thanks main h1 {
  font-size: clamp(2rem, 5vw, 3rem);
}

body.page-thanks main h1::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 1.75rem no-repeat,
    linear-gradient(135deg, var(--htm-pool) 0%, var(--htm-pool-deep) 100%);
  box-shadow: 0 6px 16px rgba(26, 166, 184, 0.28);
}

.ty-call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin: 1.5rem 0 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--htm-foam);
  border: 1px solid var(--htm-line);
  border-radius: var(--radius-card);
}

.ty-call-lead {
  flex: 1 1 16rem;
  margin: 0;
}

.ty-call .btn-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 1.5rem;
  border-width: 2px;
  border-style: solid;
  text-decoration: none;
}

.ty-read {
  margin-top: 2rem;
}

.ty-read h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 3vw, 1.875rem);
}

.ty-back {
  margin-top: 1.75rem;
}

/* 12. TRUST STRIP, CLOSING BANDS, SMALL FIXES ------------------------------ */

.trust-grid {
  padding: 1.75rem 0;
}

.trust-strip .trust-item svg {
  width: 28px;
  height: 28px;
}

/* The home hero wash and the coupon card keep their own rules. Everything
   below is a guard: no inline SVG anywhere may balloon to its container. */
main svg:not([width]):not([class]) {
  max-width: 48px;
  max-height: 48px;
}

/* ---- Family blocks. Each fixer edits ONLY its own block between BEGIN/END. ---- */

/* FAM:home BEGIN */
/* FAM:home END */

/* FAM:services BEGIN */
/* FAM:services END */

/* FAM:contactflow BEGIN */
/* FAM:contactflow END */

/* FAM:trust BEGIN */
/* FAM:trust END */

/* FAM:areashub BEGIN */
/* FAM:areashub END */

/* FAM:guides BEGIN */
/* FAM:guides END */

/* FAM:az BEGIN */
/* FAM:az END */

/* FAM:den1 BEGIN */
/* FAM:den1 END */

/* FAM:den2 BEGIN */
/* FAM:den2 END */

/* Contact details follow the form on a light surface. */
:root #quote[data-band="light"] .contact-detail a {
  color: #14606b;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
:root #quote[data-band="light"] .contact-detail a:hover {
  color: #173b50;
}

@media (min-width: 641px) {
  .gallery:has(> :nth-child(3):last-child),
  .guides-hub .gallery:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

.fact-layout--solo { grid-template-columns: minmax(0, 1fr); }

.htm-source-notes { border-block: 1px solid var(--htm-line); }

.htm-source-notes h2 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); margin: 0 0 1rem; }
.htm-source-notes ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2rem; }
.htm-source-notes li { break-inside: avoid; margin: 0 0 .75rem; font-size: .875rem; line-height: 1.5; }
.htm-source-notes a { text-decoration: underline; text-underline-offset: .18em; }
@media (max-width: 700px) { .htm-source-notes ul { columns: 1; } }

/* Home quote pilot: the offer supports the form instead of dominating it. */
.home-page .htm-offer-dock { padding-block: 3.5rem; }
.home-page .htm-offer-dock__grid { grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 2.5rem; align-items: start; }
.home-page .htm-credit-chip { padding: 1.5rem; text-align: left; box-shadow: none; }
.home-page .htm-credit-chip__amount { margin-block: .75rem .25rem; font-size: 3rem; line-height: 1.1; }
.home-page .htm-credit-chip__label { font-size: 1.375rem; }
.home-page .htm-credit-chip__terms { margin-block: 1rem; padding: 0; border: 0; background: none; font-size: .9375rem; }
.home-page .htm-form-card { padding: 1.75rem; }
@media (max-width: 1024px) {
  .home-page .htm-offer-dock__grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .home-page .htm-credit-chip { padding: 1.25rem; }
  .home-page .htm-credit-chip__amount { margin: 0; }
  .home-page .htm-credit-chip__terms { margin-bottom: 0; }
}
@media (max-width: 640px) {
  .home-page .htm-offer-dock { padding-block: 2rem; }
  .home-page .htm-form-card { padding: 1.25rem; }
}

/* Keep the contact introduction close to its form, with readable support copy. */
.quote-contact-page #quote { padding-block: 2.5rem; }
.quote-contact-page #quote .section__head { margin-bottom: 1.5rem; }
.quote-contact-page #quote .section__head h2 { margin-block: .5rem; font-size: clamp(1.75rem, 3vw, 2.25rem); }
.quote-contact-page #quote .section__head .section__lead { margin-bottom: 0; }

/* Supporting process details stay available without lengthening the initial quiz. */
.quote-followup { margin-top: 1.25rem; border-top: 1px solid var(--htm-line); }
.quote-followup summary { min-height: 48px; padding-block: .875rem; color: var(--htm-ink); font-weight: 700; cursor: pointer; }
.quote-followup summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.quote-followup > ol { margin: .5rem 0 1rem; padding-left: 1.5rem; }
.quote-followup li { margin-block: .75rem; font-size: .9375rem; line-height: 1.5; }
.quote-followup .src { font-size: .875rem; line-height: 1.5; color: var(--htm-muted); }