/* About page, to Micah's mockup (2026-10-20, Variation B, brand-led).

   Hero: copy and three marks on the left; the ring and branch on the right
   edge with the three short lines inside the ring; faint shadow leaves (the
   Levels of Care branch used as a mask) behind the copy.

   The Silverleaf standard: three columns and the card on the right, a gold
   branch on the left edge, and a ring and leaves on the right edge. */

/* ------------------------------------------------------------------------
   Hero */
.abh { position: relative; }
.abh-art {
  position: absolute;
  z-index: 0;
  right: 0;
  top: 50%;
  width: min(46vw, 56rem);
  aspect-ratio: 1417 / 1074;
  transform: translateY(-55%);
  opacity: 0.88;
  pointer-events: none;
  background: no-repeat right center / contain;
  background-image: url("../img/about-hero-art-1x.webp");
  background-image: image-set(url("../img/about-hero-art-1x.avif") type("image/avif") 1x, url("../img/about-hero-art-2x.avif") type("image/avif") 2x, url("../img/about-hero-art-1x.webp") type("image/webp") 1x, url("../img/about-hero-art-2x.webp") type("image/webp") 2x);
}
.page-hero .abh-tagline {
  position: absolute;
  left: 9%;
  top: 45%;
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.9;
  text-transform: uppercase;
  color: var(--champagne);
}
.abh-tagline::after {
  content: "";
  display: block;
  width: 2.75rem;
  height: 2px;
  margin-top: var(--sp-4);
  background: var(--champagne);
}
.abh-shadow {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  aspect-ratio: 1104 / 1330;
  background: rgba(2, 8, 20, 0.42);
  -webkit-mask: url("../img/loc-hero-left-2x.webp") no-repeat center / contain;
  mask: url("../img/loc-hero-left-2x.webp") no-repeat center / contain;
}
.abh-shadow-left { left: -4rem; top: 0.5rem; width: 20rem; }
.abh-shadow-mid { left: 47%; bottom: -5rem; width: 15rem; opacity: 0.7; transform: scaleX(-1); }

.page-hero .container.abh-inner {
  position: relative;
  z-index: 1;
  max-width: none;
  padding-block: 4rem 4.25rem;
  padding-inline: clamp(1.5rem, 16vw - 5rem, 16rem);
}
.ab-eyebrow { letter-spacing: 0.2em; }
.page-hero .abh-inner h1 {
  max-width: none;
  margin: var(--sp-4) 0 var(--sp-4);
  font-size: clamp(2.6rem, 4.4vw, 4.5rem);
  line-height: 1.05;
}
.abh-em { display: block; font-style: italic; font-weight: 400; color: var(--champagne); }
.page-hero .abh-inner p { max-width: 36rem; margin: 0; line-height: 1.5; text-wrap: pretty; }

.abh-chips { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4) 0; }
.abh-chip { display: flex; align-items: center; gap: var(--sp-3); padding-right: var(--sp-6); }
.abh-chip + .abh-chip { padding-left: var(--sp-6); border-left: 1px solid rgba(216, 184, 144, 0.35); }
.abh-chip img { display: block; width: 3.25rem; height: 3.25rem; flex: none; }
.abh-chip span { font-size: var(--fs-0); line-height: 1.35; color: var(--champagne); }

/* Below desktop the ring steps back behind the copy; on phones the marks sit
   three across with the icon above the words. */
@media (max-width: 79.9375rem) {
  .abh-art { width: min(56vw, 36rem); right: -8rem; opacity: 0.35; }
  .abh-tagline { display: none; }
  .abh-shadow-mid { display: none; }
}
@media (max-width: 47.9375rem) {
  .abh-art { width: 22rem; right: -9rem; top: 0; transform: none; opacity: 0.25; }
  .abh-shadow-left { width: 13rem; }
  .page-hero .container.abh-inner { padding-block: 3.5rem; }
  .abh-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .abh-chip, .abh-chip + .abh-chip { flex-direction: column; text-align: center; padding: 0 var(--sp-2); }
  .abh-br { display: none; }
}

/* ------------------------------------------------------------------------
   The Silverleaf standard */
.abs { position: relative; }
.abs-leaf { position: absolute; z-index: 0; pointer-events: none; background: no-repeat center / contain; }
.abs-leaf-left {
  left: -1.5rem;
  top: 50%;
  width: 12rem;
  aspect-ratio: 680 / 1178;
  transform: translateY(-50%);
  opacity: 0.75;
  background-image: url("../img/level-1-left-background-1x.webp");
  background-image: image-set(url("../img/level-1-left-background-1x.avif") type("image/avif") 1x, url("../img/level-1-left-background-2x.avif") type("image/avif") 2x, url("../img/level-1-left-background-1x.webp") type("image/webp") 1x, url("../img/level-1-left-background-2x.webp") type("image/webp") 2x);
}
.abs-leaf-right {
  right: -1rem;
  bottom: 1.5rem;
  width: 8rem;
  aspect-ratio: 600 / 955;
  opacity: 0.7;
  background-image: url("../img/getting-started-background-1x.webp");
  background-image: image-set(url("../img/getting-started-background-1x.avif") type("image/avif") 1x, url("../img/getting-started-background-2x.avif") type("image/avif") 2x, url("../img/getting-started-background-1x.webp") type("image/webp") 1x, url("../img/getting-started-background-2x.webp") type("image/webp") 2x);
}
.abs-ring {
  position: absolute;
  z-index: 0;
  right: -16rem;
  top: 50%;
  width: 34rem;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border: 2px solid rgba(168, 134, 63, 0.55);
  border-radius: 50%;
  pointer-events: none;
}

.abs .container.abs-inner {
  position: relative;
  z-index: 1;
  max-width: none;
  padding-inline: clamp(1.5rem, 16vw - 5rem, 16rem) clamp(1.5rem, 5vw, 6rem);
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}
@media (min-width: 72rem) {
  .abs .container.abs-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: 2.5rem; }
}
.abs-main h2 { margin: var(--sp-3) 0 var(--sp-6); font-size: clamp(2.25rem, 3.4vw, 3.25rem); }
.abs-cols { display: grid; gap: var(--sp-6); }
@media (min-width: 48rem) { .abs-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.abs-col h3 { margin: 0 0 var(--sp-3); font-family: var(--font-body); font-size: var(--fs-0); font-weight: 700; line-height: 1.45; color: var(--text-strong); }
.abs-col p { margin: 0; font-size: var(--fs-0); line-height: 1.55; color: var(--text); }

.abs-card {
  position: relative;
  padding: 1.75rem 2rem 1.5rem;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(16, 27, 55, 0.07);
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(16, 27, 55, 0.07);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.abs-card-kicker { margin: 0 0 var(--sp-5); font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3; color: var(--accent-strong); }
.abs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-5); }
.abs-list li { display: flex; align-items: flex-start; gap: var(--sp-4); font-size: var(--fs-0); line-height: 1.45; color: var(--slate); }
.abs-list strong { display: block; margin-bottom: 0.15rem; font-size: 1.125rem; color: var(--text-strong); }
.abs-ico { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 1.5px solid var(--brass); background: rgba(244, 230, 204, 0.5); color: #8E6F30; }
.abs-ico svg { width: 1.5rem; height: 1.5rem; }
.abs-card-note {
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(168, 134, 63, 0.4);
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.35;
  color: #7C6128; /* deepened brass, AA on the card */
  text-wrap: balance;
}

@media (max-width: 71.9375rem) {
  .abs-leaf-left { width: 9rem; opacity: 0.5; }
  .abs-ring, .abs-leaf-right { display: none; }
}
@media (max-width: 47.9375rem) {
  .abs-leaf-left { display: none; }
  .abs-card { padding: 1.5rem 1.25rem; }
}

/* ------------------------------------------------------------------------
   Our caregivers and the Silverleaf family, to Micah's mockup (2026-10-20):
   copy on the left, a card on the right, gold rings and line leaves at both
   edges. The two bands share one colour, split by a hairline. */
.abx { position: relative; }
.abx { border-top: 1px solid rgba(16, 27, 55, 0.08); }
.abx-ring { position: absolute; z-index: 0; width: 44rem; aspect-ratio: 1; border: 1.5px solid rgba(168, 134, 63, 0.55); border-radius: 50%; pointer-events: none; }
.abx-leaf { position: absolute; z-index: 0; pointer-events: none; opacity: 0.72; background: no-repeat center / contain; }
.abx-leaf-left {
  left: -4rem;
  width: 18rem;
  aspect-ratio: 1104 / 1330;
  background-image: url("../img/loc-hero-left-1x.webp");
  background-image: image-set(url("../img/loc-hero-left-1x.avif") type("image/avif") 1x, url("../img/loc-hero-left-2x.avif") type("image/avif") 2x, url("../img/loc-hero-left-1x.webp") type("image/webp") 1x, url("../img/loc-hero-left-2x.webp") type("image/webp") 2x);
}
.abx-leaf-right {
  right: -2.5rem;
  width: 14rem;
  aspect-ratio: 891 / 1167;
  background-image: url("../img/loc-hero-right-1x.webp");
  background-image: image-set(url("../img/loc-hero-right-1x.avif") type("image/avif") 1x, url("../img/loc-hero-right-2x.avif") type("image/avif") 2x, url("../img/loc-hero-right-1x.webp") type("image/webp") 1x, url("../img/loc-hero-right-2x.webp") type("image/webp") 2x);
}
/* Caregivers: the left ring sweeps down from the top, the right one up
   from the bottom; the family band mirrors it. */
.abx-cg .abx-ring-left { left: -36rem; top: -16rem; }
.abx-cg .abx-leaf-left { top: 50%; transform: translateY(-42%); }
.abx-cg .abx-ring-right { right: -36rem; bottom: -20rem; }
.abx-cg .abx-leaf-right { top: -1rem; }
.abx-fam .abx-ring-left { left: -37rem; bottom: -18rem; }
.abx-fam .abx-leaf-left { bottom: -3rem; }
.abx-fam .abx-ring-right { right: -35rem; top: -10rem; }
.abx-fam .abx-leaf-right { bottom: -2rem; }

.abx .container.abx-inner {
  position: relative;
  z-index: 1;
  max-width: none;
  padding-inline: clamp(1.5rem, 16vw - 5rem, 16rem) clamp(1.5rem, 8vw, 9rem);
  display: grid;
  gap: var(--sp-7);
  align-items: center;
}
@media (min-width: 72rem) {
  .abx .container.abx-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 40rem); gap: 4rem; }
}
.abx-copy h2 { margin: var(--sp-3) 0 var(--sp-5); font-size: clamp(2.5rem, 4vw, 3.75rem); line-height: 1.05; }
.abx-copy p { max-width: 36rem; font-size: var(--fs-1); line-height: 1.5; color: var(--text-strong); }
.abx-copy p:last-child { margin-bottom: 0; }

.abx-card {
  position: relative;
  padding: 2rem 2.5rem 2.25rem;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(16, 27, 55, 0.07);
  border-radius: 1.25rem;
  box-shadow: 0 12px 34px rgba(16, 27, 55, 0.08);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}
.abx-kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-6);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--accent-strong);
}
.abx-kicker::after { content: ""; flex: 1 1 auto; min-width: 2rem; height: 1px; background: rgba(168, 134, 63, 0.55); }

.abx-cg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-6); }
.abx-cg-list li { display: flex; align-items: center; gap: var(--sp-5); }
.abx-cg-ico { flex: none; }
.abx-cg-ico img { display: block; width: 4.75rem; height: 4.75rem; }
.abx-cg-rule { flex: none; align-self: center; width: 1px; height: 3.25rem; background: rgba(168, 134, 63, 0.55); }
.abx-cg-list strong { display: block; margin-bottom: var(--sp-1); font-family: var(--font-display); font-size: 1.3125rem; font-weight: 600; line-height: 1.25; color: var(--text-strong); }
.abx-cg-list li > span:last-child { font-size: var(--fs-0); line-height: 1.45; color: var(--text); }

/* The continuum: home care, the caregiver who comes along, Eldercare. The
   line is drawn from the middle step out to the edges of the two circles. */
.abx-path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); --ico: 7.5rem; }
.abx-path li { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-inline: var(--sp-2); }
.abx-path-ico img { display: block; width: var(--ico); height: var(--ico); }
.abx-path-leaf { display: grid; place-items: center; height: var(--ico); }
.abx-path-leaf img { display: block; width: 4rem; height: 4rem; }
.abx-path .is-mid::before, .abx-path .is-mid::after {
  content: "";
  position: absolute;
  top: calc(var(--ico) / 2 - 0.25rem);
  height: 0.5rem;
}
.abx-path .is-mid::before {
  left: calc((100% - var(--ico)) / -2 + 0.5rem);
  right: calc(50% + 2.25rem);
  background:
    radial-gradient(circle at 0.25rem 50%, var(--brass) 0.22rem, transparent 0.25rem),
    linear-gradient(var(--brass), var(--brass)) right center / calc(100% - 0.25rem) 1.5px no-repeat;
}
.abx-path .is-mid::after {
  right: calc((100% - var(--ico)) / -2 + 0.5rem);
  left: calc(50% + 2.25rem);
  background:
    radial-gradient(circle at calc(100% - 0.25rem) 50%, var(--brass) 0.22rem, transparent 0.25rem),
    linear-gradient(var(--brass), var(--brass)) left center / calc(100% - 0.25rem) 1.5px no-repeat;
}
.abx-path h4 { margin: var(--sp-4) 0 var(--sp-3); font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2; color: var(--text-strong); }
.abx-path .is-mid h4 { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.14em; color: #7C6128; line-height: 1.5; }
.abx-path p { margin: 0; font-size: var(--fs-0); line-height: 1.4; color: var(--text); }

@media (max-width: 71.9375rem) {
  .abx-ring { display: none; }
  .abx-leaf-left { width: 10rem; opacity: 0.4; }
  .abx-leaf-right { width: 8rem; opacity: 0.4; }
}
@media (max-width: 47.9375rem) {
  .abx-leaf { display: none; }
  .abx-card { padding: 1.5rem 1.25rem 1.75rem; }
  .abx-cg-list li { align-items: flex-start; gap: var(--sp-4); }
  .abx-cg-ico img { width: 3.5rem; height: 3.5rem; }
  .abx-cg-rule { display: none; }
  .abx-path { grid-template-columns: 1fr; gap: var(--sp-4); --ico: 6rem; }
  .abx-path .is-mid::before, .abx-path .is-mid::after { display: none; }
  .abx-path .is-mid .abx-path-leaf { height: 3.5rem; }
}