/* Silverleaf Home Care, Levels of Care page.

   Hero (Micah's mockup, 2026-10-16): navy band, gold leaf art at the left
   and the top right, the copy left, and the four levels right as medallions
   on a gently waving gold line with small beads between them; Level 4 is the
   navy medallion with a gold glow, a little larger than the rest. */

.loc-hero { position: relative; }
.loc-leaf {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: no-repeat center / contain;
}
.loc-leaf-left {
  left: -3rem;
  bottom: -2.5rem;
  width: 25rem;
  aspect-ratio: 1104 / 1330;
  opacity: 0.85;
  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);
}
.loc-leaf-right {
  right: -1rem;
  top: -1rem;
  width: 17rem;
  aspect-ratio: 891 / 1167;
  opacity: 0.85;
  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);
}

.loc-hero .container.loc-split {
  position: relative;
  z-index: 1;
  max-width: 90rem;
  padding-block: 5.5rem;
  display: grid;
  gap: var(--sp-8);
  align-items: center;
}
@media (min-width: 72rem) {
  .loc-hero .container.loc-split { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.5fr); gap: var(--sp-7); }
}

.loc-copy h1 {
  margin: var(--sp-4) 0 var(--sp-5);
  font-size: clamp(2.75rem, 4.6vw, 4.75rem);
  line-height: 1.02;
  color: var(--white);
}
.loc-hairline { display: block; width: 4rem; height: 2px; margin-bottom: var(--sp-5); background: var(--champagne); }
.loc-copy p { margin: 0; max-width: 28rem; font-size: var(--fs-1); line-height: 1.5; color: rgba(244, 240, 235, 0.92); }

/* The track: --loc-mid is the medallions' centre line. */
.loc-track { position: relative; --loc-mid: 4.25rem; }
.loc-line {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: calc(var(--loc-mid) - 1.375rem);
  width: 100%;
  height: 2.5rem;
  overflow: visible;
}
.loc-line path { fill: none; stroke: rgba(216, 184, 144, 0.75); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.loc-bead {
  position: absolute;
  z-index: 0;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--champagne);
  transform: translate(-50%, -50%);
}

.loc-steps { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.loc-step a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: inherit;
  text-decoration: none;
  border-radius: 1rem;
}
.loc-step a:focus-visible { outline: 3px solid var(--champagne); outline-offset: 6px; }
.loc-medal {
  display: grid;
  place-items: center;
  height: 8.5rem;
  margin-bottom: var(--sp-3);
}
.loc-medal img {
  display: block;
  width: 7rem;
  height: 7rem;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
  transition: transform var(--dur) var(--ease-out-expo);
}
.loc-step.is-top .loc-medal img { width: 8.5rem; height: 8.5rem; }
.loc-step a:hover .loc-medal img { transform: translateY(-4px); }

.loc-num {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3vw, 3rem);
  font-weight: 300;
  line-height: 1;
  color: var(--champagne);
}
.loc-name {
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.45vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--white);
}
.nowrap { white-space: nowrap; }
.loc-rule { display: block; width: 1.75rem; height: 2px; margin: var(--sp-4) 0; background: var(--champagne); opacity: 0.85; }
.loc-desc { max-width: 13.5em; font-size: var(--fs-0); line-height: 1.45; color: rgba(244, 240, 235, 0.86); }

/* Tablets: copy above the track. Phones: the four levels two by two, and the
   line and beads step out. */
@media (max-width: 71.9375rem) {
  .loc-hero .container.loc-split { padding-block: 4rem; }
  .loc-copy h1 { max-width: none; }
  .loc-leaf-left { width: 16rem; opacity: 0.6; }
  .loc-leaf-right { width: 11rem; opacity: 0.6; }
}
@media (max-width: 39.9375rem) {
  .loc-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-7); }
  .loc-line, .loc-bead { display: none; }
  .loc-medal { height: 6.5rem; }
  .loc-name { white-space: normal; }
  .loc-medal img { width: 5.5rem; height: 5.5rem; }
  .loc-step.is-top .loc-medal img { width: 6.5rem; height: 6.5rem; }
}

/* ------------------------------------------------------------------------
   Getting started (Micah's mockup, 2026-10-16): three steps on a gold
   timeline with large outlined ghost numbers and gold ringed icons; the
   photo in a large circle running off the right edge with a fine gold ring
   just outside it; Micah's leaf sprig top left and, turned, bottom right. */

.gs-band { position: relative; --gs-d: min(54rem, 52vw); }
.gs-leaf {
  position: absolute;
  pointer-events: none;
  aspect-ratio: 300 / 478;
  background: no-repeat center / contain;
  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);
}
.gs-leaf-top { z-index: 0; left: -2rem; top: -1.5rem; width: 9.5rem; opacity: 0.85; }
.gs-leaf-bottom { z-index: 3; right: -1rem; bottom: -2.5rem; width: 11rem; opacity: 0.9; transform: scaleX(-1) rotate(-18deg); }

/* The photo circle, centred on the band's height, a quarter off the right. */
.gs-art {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: calc(var(--gs-d) * -0.24);
  width: var(--gs-d);
  aspect-ratio: 1;
  transform: translateY(-50%);
}
.gs-media { position: relative; margin: 0; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.gs-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.gs-ring {
  position: absolute;
  left: -1.75rem;
  top: -1.5rem;
  width: calc(100% + 3rem);
  aspect-ratio: 1;
  border: 1.5px solid rgba(168, 134, 63, 0.7);
  border-radius: 50%;
  pointer-events: none;
}

.gs-wrap { position: relative; z-index: 2; max-width: 90rem; }
.gs-copy { max-width: calc(100% - var(--gs-d) * 0.76 - 2rem); }
.gs-copy h2 { margin: var(--sp-4) 0 var(--sp-6); font-size: clamp(2.75rem, 4.8vw, 5.25rem); line-height: 1.02; }
.gs-gold { color: var(--brass); }

/* Steps: number, icon on the timeline, text. */
.gs-steps { list-style: none; margin: 0; padding: 0; --gs-num: 7.5rem; --gs-node: 5.5rem; --gs-gap: var(--sp-4); }
.gs-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--gs-num) var(--gs-node) minmax(0, 1fr);
  column-gap: var(--gs-gap);
  align-items: center;
  padding-block: var(--sp-5);
}
/* The line runs through the icons' centres; a bead sits above each icon,
   and the line stops at the last icon. */
.gs-step::before {
  content: "";
  position: absolute;
  left: calc(var(--gs-num) + var(--gs-gap) + var(--gs-node) / 2);
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(168, 134, 63, 0.6);
}
.gs-step:last-child::before { bottom: 50%; }
.gs-step::after {
  content: "";
  position: absolute;
  left: calc(var(--gs-num) + var(--gs-gap) + var(--gs-node) / 2);
  top: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--brass);
  transform: translate(-50%, -50%);
}
.gs-num {
  font-family: var(--font-display);
  font-size: 7rem;
  font-weight: 200;
  line-height: 0.9;
  text-align: right;
  color: transparent;
  -webkit-text-stroke: 1.25px rgba(168, 134, 63, 0.55);
}
@supports not (-webkit-text-stroke: 1px) { .gs-num { color: rgba(168, 134, 63, 0.3); } }
.gs-node { position: relative; z-index: 1; display: grid; place-items: center; }
.gs-node img { display: block; width: var(--gs-node); height: var(--gs-node); }
.gs-text h3 { margin: 0 0 var(--sp-2); font-family: var(--font-display); font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.15; }
.gs-text p { margin: 0; max-width: 31rem; font-size: 1.125rem; line-height: 1.55; }

/* Below 1152 px the photo comes into the flow under the steps, whole. */
@media (max-width: 71.9375rem) {
  .gs-band { display: flex; flex-direction: column; --gs-d: min(30rem, 84vw); }
  .gs-art { order: 2; position: relative; top: auto; right: auto; transform: none; margin: var(--sp-7) auto 0; }
  .gs-copy { max-width: none; }
  .gs-leaf-bottom { width: 8rem; }
}
@media (max-width: 39.9375rem) {
  .gs-steps { --gs-num: 0rem; --gs-node: 4rem; --gs-gap: var(--sp-4); }
  .gs-step { grid-template-columns: var(--gs-node) minmax(0, 1fr); }
  .gs-step::before, .gs-step::after { left: calc(var(--gs-node) / 2); }
  .gs-num { display: none; }
  .gs-leaf-top { width: 6rem; }
  .gs-copy h2 .nowrap { white-space: normal; }
}

/* ------------------------------------------------------------------------
   Level sections (Micah's mockup for Level 1, 2026-10-16). The shared
   layout is .lvx; each level sets its own leaf art (.lvx-1 and so on).
   Copy, three icons and a huge outlined ghost number on the left; the
   services card on the right with a fine gold arc behind it; the Important
   to know bar under the card, reaching back under the left column. */

.lvx { position: relative; }
.lvx-leaf-left, .lvx-leaf-right {
  position: absolute;
  pointer-events: none;
  background: no-repeat center / contain;
}
.lvx-leaf-left { z-index: 0; left: -1.5rem; top: 1rem; width: 11rem; aspect-ratio: 340 / 589; }
.lvx-leaf-right { z-index: 0; right: 1.5rem; top: 3.5rem; width: 12rem; aspect-ratio: 340 / 383; }
.lvx-1 .lvx-leaf-left {
  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);
}
.lvx-1 .lvx-leaf-right {
  background-image: url("../img/level-1-right-background-1x.webp");
  background-image: image-set(url("../img/level-1-right-background-1x.avif") type("image/avif") 1x, url("../img/level-1-right-background-2x.avif") type("image/avif") 2x, url("../img/level-1-right-background-1x.webp") type("image/webp") 1x, url("../img/level-1-right-background-2x.webp") type("image/webp") 2x);
}
.lvx-ghost {
  position: absolute;
  z-index: 0;
  left: -0.5rem;
  bottom: -2.5rem;
  font-family: var(--font-display);
  font-size: clamp(10rem, 17vw, 17rem);
  font-weight: 200;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.25px rgba(168, 134, 63, 0.28);
  pointer-events: none;
}
@supports not (-webkit-text-stroke: 1px) { .lvx-ghost { color: rgba(168, 134, 63, 0.12); } }

.lvx .container.lvx-grid {
  position: relative;
  z-index: 1;
  max-width: 94rem;
  display: grid;
  gap: var(--sp-7);
  align-items: center;
  padding-block: var(--sp-5);
}
@media (min-width: 64rem) {
  .lvx .container.lvx-grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.25fr); column-gap: var(--sp-7); row-gap: var(--sp-6); }
  .lvx-note { grid-column: 2; margin-left: -14rem; }
}

/* The eyebrow here has the short leading rule of the mockup. */
/* The Level N eyebrow: the label alone, no leading rule (Micah, 2026-10-16). */
.lvx-eyebrow { display: block; color: var(--accent-strong); }
.lvx-copy h2 { margin: var(--sp-4) 0 var(--sp-4); font-size: clamp(2.75rem, 4.8vw, 5rem); line-height: 1.02; }
.lvx-lede { margin: 0; max-width: 32rem; font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.45; color: var(--text-strong); }

.lvx-icons { list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-6); }
.lvx-icons li { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); width: 9rem; text-align: center; }
.lvx-ico {
  display: grid;
  place-items: center;
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #FBF6EC 0%, #F3E7D2 100%);
  box-shadow: 0 6px 16px rgba(8, 24, 48, 0.07);
}
.lvx-ico img { display: block; width: 7rem; height: 7rem; }
.lvx-ico-label { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; line-height: 1.5; color: var(--text-strong); }

/* The card and the arc behind its top right. */
.lvx-card-wrap { position: relative; }
.lvx-arc {
  position: absolute;
  z-index: 0;
  right: -10rem;
  top: 50%;
  width: 38rem;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border: 1.5px solid rgba(168, 134, 63, 0.55);
  border-radius: 50%;
  pointer-events: none;
}
/* Glass (Micah, 2026-10-16): the card sits above the leaf art, which shows
   softly through its corners. A frosted, slightly translucent cream with a
   light inner edge; the text stays fully opaque navy on it. Where the
   browser cannot blur, the card falls back to near solid cream so the text
   never sits on a busy background. */
.lvx-card {
  position: relative;
  z-index: 1;
  padding: var(--sp-6) var(--sp-7) var(--sp-6);
  background: rgba(251, 248, 243, 0.94);
  border: 1px solid rgba(168, 134, 63, 0.3);
  border-radius: 1.25rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 2px 4px rgba(8, 24, 48, 0.04),
    0 18px 40px rgba(8, 24, 48, 0.08);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .lvx-card {
    background: linear-gradient(145deg, rgba(255, 253, 249, 0.6) 0%, rgba(251, 247, 240, 0.42) 100%);
    border-color: rgba(255, 255, 255, 0.65);
    -webkit-backdrop-filter: blur(5px) saturate(1.1);
    backdrop-filter: blur(5px) saturate(1.1);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.85),
      inset 0 0 0 1px rgba(168, 134, 63, 0.18),
      0 2px 4px rgba(8, 24, 48, 0.04),
      0 18px 40px rgba(8, 24, 48, 0.08);
  }
}
.lvx-card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-strong);
}
.lvx-card-head::after { content: ""; flex: 1; height: 1px; background: rgba(168, 134, 63, 0.4); }
/* Two columns, filled top to bottom, so the DOM keeps Parker's grouping. */
.lvx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  column-gap: var(--sp-7);
}
.lvx-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  font-size: var(--fs-1);
  line-height: 1.35;
  color: var(--text-strong);
}
.lvx-list li:nth-child(4n + 2), .lvx-list li:nth-child(4n + 3), .lvx-list li:nth-child(4n + 4) { border-top: 1px solid var(--rule); }
.lvx-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--brass);
  color: var(--white);
}
.lvx-check svg { width: 1.2rem; height: 1.2rem; }

/* Important to know. */
.lvx-note {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-5) var(--sp-6);
  background: #E2D8C6; /* the stone band with a touch of brass, solid so the arc stays behind */
  border-radius: 1.25rem;
}
.lvx-note-ico { flex: none; width: 3.25rem; height: 3.25rem; color: var(--brass); padding-right: var(--sp-6); box-sizing: content-box; border-right: 1px solid rgba(168, 134, 63, 0.55); }
.lvx-note-ico svg { width: 100%; height: 100%; }
.lvx-note-head { margin: 0 0 var(--sp-1); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-strong); }
.lvx-note p:last-child { margin: 0; font-size: var(--fs-1); color: var(--text-strong); }

@media (max-width: 63.9375rem) {
  .lvx-leaf-left { width: 7rem; opacity: 0.7; }
  .lvx-leaf-right { width: 8rem; top: 1rem; }
  .lvx-arc { width: 24rem; right: -8rem; }
}
@media (max-width: 39.9375rem) {
  .lvx-list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .lvx-list li:nth-child(n + 2) { border-top: 1px solid var(--rule); }
  .lvx-list li { font-size: var(--fs-0); }
  .lvx-card { padding: var(--sp-5) var(--sp-4); }
  /* On phones the three icons become a short list, label beside icon, so
     the labels keep their size. */
  .lvx-icons { flex-direction: column; gap: var(--sp-3); }
  .lvx-icons li { width: auto; flex-direction: row; gap: var(--sp-4); text-align: left; }
  .lvx-ico, .lvx-ico img { width: 4rem; height: 4rem; }
  .lvx-ico-label br { display: none; }
  .lvx-note { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .lvx-note-ico { width: 2.5rem; height: 2.5rem; border-right: 0; padding-right: 0; }
  .lvx-note p:last-child { font-size: var(--fs-0); }
}

/* ------------------------------------------------------------------------
   Level 2 (Micah's mockup, 2026-10-16): Level 1 mirrored. .lvx-rev puts the
   card on the left and the copy on the right (the copy stays first in the
   DOM, so the heading still comes before the list), the arc behind the
   card's top left, the ghost number bottom right, and Level 1's leaf art
   swapped side to side and mirrored. .lvx-list-one is a single column. */

.lvx-2 .lvx-leaf-left,
.lvx-2 .lvx-leaf-right { transform: scaleX(-1); }
.lvx-2 .lvx-leaf-left {
  z-index: 0;
  left: 1.5rem;
  right: auto;
  top: 3.5rem;
  width: 12rem;
  aspect-ratio: 340 / 383;
  background-image: url("../img/level-1-right-background-1x.webp");
  background-image: image-set(url("../img/level-1-right-background-1x.avif") type("image/avif") 1x, url("../img/level-1-right-background-2x.avif") type("image/avif") 2x, url("../img/level-1-right-background-1x.webp") type("image/webp") 1x, url("../img/level-1-right-background-2x.webp") type("image/webp") 2x);
}
.lvx-2 .lvx-leaf-right {
  z-index: 0;
  right: -1.5rem;
  left: auto;
  top: 1rem;
  width: 11rem;
  aspect-ratio: 340 / 589;
  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);
}
.lvx-rev .lvx-ghost { left: auto; right: -0.5rem; }
.lvx-rev .lvx-arc { right: auto; left: -10rem; top: 30%; }

@media (min-width: 64rem) {
  .lvx-rev .container.lvx-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .lvx-rev .lvx-card-wrap { grid-column: 1; grid-row: 1; }
  .lvx-rev .lvx-copy { grid-column: 2; grid-row: 1; padding-left: var(--sp-4); }
}

.lvx-list.lvx-list-one { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
.lvx-list.lvx-list-one li { padding: var(--sp-3) 0; }
.lvx-list.lvx-list-one li:nth-child(n + 2) { border-top: 1px solid var(--rule); }
.lvx-list.lvx-list-one li:nth-child(4n + 1) { border-top: 1px solid var(--rule); }
.lvx-list.lvx-list-one li:first-child { border-top: 0; }

/* Level 3 (Micah's mockup, 2026-10-16): Level 1's layout without the note
   bar, so extra room below keeps the ghost 03 under the icons, and a
   tighter column gap keeps Parker's longest line to two lines. */
@media (min-width: 64rem) {
  .lvx-3 .container.lvx-grid { padding-bottom: 8rem; }
  .lvx-3 .lvx-list { column-gap: var(--sp-6); }
}

/* Levels 2 and 4: room below so the ghost number sits under the icons. */
@media (min-width: 64rem) {
  .lvx-rev .container.lvx-grid { padding-bottom: 7rem; }
}

/* ------------------------------------------------------------------------
   If care needs change (Micah's mockup, 2026-10-16): copy left with a brass
   button to Silverleaf Eldercare; the same glass card as the levels on the
   right, three circled icons joined by a line, and an italic closing line;
   a gold ring at the right edge and Micah's leaf art at the left. */

.tr-band { position: relative; }
.tr-leaf {
  position: absolute;
  z-index: 0;
  left: -3rem;
  top: 50%;
  width: 11.5rem;
  aspect-ratio: 380 / 742;
  transform: translateY(-50%);
  pointer-events: none;
  background: no-repeat center / contain;
  background-image: url("../img/care-needs-change-background-1x.webp");
  background-image: image-set(url("../img/care-needs-change-background-1x.avif") type("image/avif") 1x, url("../img/care-needs-change-background-2x.avif") type("image/avif") 2x, url("../img/care-needs-change-background-1x.webp") type("image/webp") 1x, url("../img/care-needs-change-background-2x.webp") type("image/webp") 2x);
}
.tr-ring {
  position: absolute;
  z-index: 0;
  right: -9rem;
  top: 50%;
  width: 32rem;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border: 1.5px solid rgba(168, 134, 63, 0.6);
  border-radius: 50%;
  pointer-events: none;
}

.tr-band .container.tr-grid { position: relative; z-index: 1; max-width: 82rem; display: grid; gap: var(--sp-7); align-items: center; }
@media (min-width: 64rem) {
  .tr-band .container.tr-grid { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.28fr); }
}

/* The label alone, no leading line (Micah, 2026-10-16). */
.tr-eyebrow { display: block; color: var(--accent-strong); }
.tr-copy h2 { margin: var(--sp-4) 0 var(--sp-5); max-width: 14ch; font-size: clamp(2.5rem, 4vw, 4rem); line-height: 1.05; }
.tr-copy > p:not(.tr-links) { max-width: 34rem; font-size: 1.125rem; line-height: 1.65; }
.tr-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  min-height: 3.5rem;
  padding: 0 2rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #A8863F 0%, #8E6F2E 100%);
  color: var(--white);
  font-size: 1.1875rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(8, 24, 48, 0.14);
}
.tr-btn:hover { background: linear-gradient(180deg, #9A7A36 0%, #7F6227 100%); color: var(--white); }
.tr-btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.tr-btn svg { width: 1.25rem; height: 1.25rem; transition: transform var(--dur) var(--ease-out-expo); }
.tr-btn:hover svg { transform: translateX(4px); }
.tr-links { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-4) 0 0; font-size: var(--fs-small); letter-spacing: 0.18em; text-transform: uppercase; }
.tr-links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--text-soft); text-decoration: none; }
.tr-links a:hover { color: var(--accent-strong); text-decoration: underline; }

/* The card: the levels' glass, laid out as a three step journey. */
.tr-card { padding: var(--sp-7) var(--sp-5) var(--sp-6); }
.tr-steps { position: relative; list-style: none; margin: 0; padding: 0 0 var(--sp-6); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid rgba(168, 134, 63, 0.3); }
.tr-steps::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 16.6%;
  right: 16.6%;
  top: 4rem;
  height: 1.5px;
  background: rgba(168, 134, 63, 0.7);
}
.tr-steps li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.tr-ico {
  display: grid;
  place-items: center;
  width: 8rem;
  height: 8rem;
  margin-bottom: var(--sp-5);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #FDF9F1 0%, #F6EBD8 100%);
}
.tr-ico img { display: block; width: 8rem; height: 8rem; }
.tr-step-title { font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; white-space: nowrap; color: var(--text-strong); }
.tr-step-text { margin-top: var(--sp-2); font-size: var(--fs-0); line-height: 1.45; color: var(--text-strong); }
.tr-tagline {
  margin: var(--sp-5) 0 0;
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.4rem, 1.9vw, 1.75rem);
  line-height: 1.3;
  color: var(--accent-strong);
}

/* Below 1400 px: the step labels may wrap rather than overflow, and the leaf
   steps back so it never sits behind the paragraph. */
@media (max-width: 87.4375rem) {
  .tr-step-title { white-space: normal; }
  .tr-leaf { width: 8rem; left: -3.5rem; opacity: 0.45; }
}
@media (max-width: 39.9375rem) {
  .tr-leaf { width: 7rem; opacity: 0.4; }
  .tr-ring { width: 20rem; right: -10rem; }
  .tr-steps { grid-template-columns: 1fr; gap: var(--sp-6); }
  /* Stacked, the order already reads as a sequence; a line would cross the text. */
  .tr-steps::before { display: none; }
  .tr-ico, .tr-ico img { width: 6rem; height: 6rem; }
  .tr-ico { margin-bottom: var(--sp-4); }
  .tr-step-text br { display: none; }
  .tr-step-title { white-space: normal; }
  .tr-links { letter-spacing: 0.12em; }
}

/* ------------------------------------------------------------------------
   Common questions: two upright gold branches from the site's ornament set
   (neither used elsewhere on this page, and unlike the sweeping leaves in
   the closing band below), top left and, flipped, bottom right. They step
   back on narrower screens so they never crowd the questions. */
.faq-band { position: relative; }
.faq-band .container { position: relative; z-index: 1; }
.textured > .faq-orn-top { --orn-w: 13rem; --orn-o: 0.75; left: -2.5rem; top: -1.5rem; }
.textured > .faq-orn-bottom { --orn-w: 12rem; --orn-o: 0.75; right: -2rem; bottom: -3rem; transform: scaleX(-1); }
@media (max-width: 79.9375rem) {
  .textured > .faq-orn-top { --orn-w: 9rem; --orn-o: 0.55; }
  .textured > .faq-orn-bottom { --orn-w: 8.5rem; --orn-o: 0.55; }
}
@media (max-width: 39.9375rem) {
  .textured > .faq-orn-top { --orn-w: 6rem; --orn-o: 0.4; left: -2rem; }
  .textured > .faq-orn-bottom { --orn-w: 6rem; --orn-o: 0.4; }
}