/* ------------------------------------------------------------------------------------------
   SEO location pages, second version (parts/interior/location-seo.php, docs/seo/41).

   Two more soap bubbles in the hero field, the county's search table on a dark stretch
   inside an orb card with clear bubbles drifting behind it, and the three price bands as
   orb cards. Everything else on the page is the interior system it already uses.
   ------------------------------------------------------------------------------------------ */

/* The hero field: two clear bubbles beside the blurred one, on their own drift cycles. */
.ihero__bubble--near {
  inset-block-start: 10%;
  inset-inline-end: 4%;
  width: clamp(9rem, 16vw, 15rem);
  opacity: 0.72;
  animation: ihero-drift 18s ease-in-out -6s infinite alternate;
}

.ihero__bubble--tiny {
  inset-block-end: 14%;
  inset-inline-end: 31%;
  width: clamp(3rem, 5vw, 5rem);
  opacity: 0.85;
  animation: ihero-drift 13s ease-in-out -3s infinite alternate;
}

@media (max-width: 63.99rem) {
  .ihero__bubble--near {
    inset-inline-end: -4%;
    width: clamp(7rem, 30vw, 11rem);
  }

  .ihero__bubble--tiny {
    inset-inline-end: 12%;
  }
}

/* What the county searches for. */
.demand {
  position: relative;
  overflow: hidden;
  color: var(--bh-white);
}

.demand__bubble {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  animation: pitch-float 16s ease-in-out infinite alternate;
}

.demand__bubble img {
  display: block;
  width: 100%;
  height: auto;
}

.demand__bubble--1 {
  inset-block-start: -4%;
  inset-inline-end: 3%;
  width: clamp(7rem, 13vw, 13rem);
}

.demand__bubble--2 {
  inset-block-end: -10%;
  inset-inline-start: -5rem;
  width: clamp(12rem, 22vw, 22rem);
  opacity: 0.65;
  animation-duration: 13s;
  animation-delay: -5s;
}

.demand__grid {
  position: relative;
  z-index: 1;
  row-gap: var(--bh-space-lg);
}

.demand__head {
  grid-column: 1 / span 7;
}

.demand__eyebrow {
  margin: 0 0 1rem;
  color: var(--bh-cyan);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
}

.demand__intro {
  grid-column: 8 / -1;
  align-self: end;
}

.demand__intro .lede {
  margin: 0;
  color: var(--bh-muted);
}

.demand__panel {
  grid-column: 1 / -1;
  padding: clamp(1.5rem, 3vw, 3rem);
}

.demand__panel > :not(.orb-card__bubble) {
  position: relative;
  z-index: 1;
}

.demand__table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.demand__table th,
.demand__table td {
  padding: 0.9rem 0;
  border-block-end: 1px solid var(--bh-line);
  text-align: left;
}

.demand__table th {
  padding-block-start: 0;
  color: var(--bh-muted);
  font-family: var(--bh-font-mono);
  font-size: var(--bh-step-label);
  font-weight: var(--bh-weight-label);
  letter-spacing: var(--bh-tracking-label);
  line-height: var(--bh-leading-label);
}

.demand__table td {
  font-size: var(--bh-step-body-lg);
}

.demand__table th:last-child,
.demand__table td:last-child {
  text-align: right;
}

.demand__table td:last-child {
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-h3);
  font-weight: var(--bh-weight-heading);
  letter-spacing: var(--bh-tracking-heading);
}

.demand__table tbody tr:last-child td {
  border-block-end: 0;
}

.demand__note {
  margin: 1.25rem 0 0;
  color: var(--bh-muted);
  font-size: var(--bh-step-small);
}

/* The price bands. */
.pricing {
  color: var(--bh-white);
}

.pricing__grid-outer {
  row-gap: var(--bh-space-lg);
}

.pricing__head {
  grid-column: 1 / span 8;
}

.pricing__head .lede {
  margin: 1rem 0 0;
  color: var(--bh-muted);
}

.pricing__grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--bh-grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.price {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 21rem;
  padding: clamp(1.5rem, 2.6vw, 2.4rem);
}

.price__band {
  color: var(--bh-cyan);
  font-size: var(--bh-step-label);
  letter-spacing: var(--bh-tracking-label);
}

.price__figure {
  font-family: var(--bh-font-display);
  font-size: var(--bh-step-figure);
  font-weight: var(--bh-weight-heading);
  letter-spacing: var(--bh-tracking-heading);
  line-height: 1.02;
  text-wrap: balance;
}

.price__for {
  margin: 0;
  color: var(--bh-muted);
}

.price__list {
  display: grid;
  gap: 0.45rem;
  margin: 0.5rem 0 0;
  padding: 0;
  font-size: var(--bh-step-small);
  list-style: none;
}

.price__list li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
}

.price__list li::before {
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--bh-cyan);
  content: "";
  transform: translateY(-0.1rem);
}

.pricing__note {
  grid-column: 1 / span 8;
  margin: 0;
  color: var(--bh-muted);
}

.pricing__note a {
  color: var(--bh-white);
}

@media (max-width: 63.99rem) {
  .demand__head,
  .demand__intro,
  .pricing__head,
  .pricing__note {
    grid-column: 1 / -1;
  }

  .pricing__grid {
    grid-template-columns: 1fr;
  }

  .price {
    min-height: 0;
  }
}

/* Calls to action inside the copy and after the price bands. */
.chapter__cta,
.pricing__cta {
  margin: 2rem 0 0;
}

.pricing__cta {
  grid-column: 1 / -1;
}

.prose .chapter__cta a.pill {
  color: var(--bh-white);
  text-decoration: none;
}