/* Silverleaf Home Care, home page sections below the hero.

   Who this is for (Micah's mockup, 2026-10-16): copy left, photo right in a
   frame with the top left and bottom right corners rounded more than the
   other two, the Eldercare leaf ornament behind the photo's right edge, and
   three icon points under the copy, split by thin rules. */

.who-band { position: relative; }
/* Wider than the standard container, as the mockup runs edge to edge. */
.who-split { display: grid; gap: var(--sp-7); align-items: center; max-width: 90rem; }
/* The mockup's proportions from 1400 px up; a little more room for the copy
   below that, so the three points keep to one row down to 1280 px. */
@media (min-width: 60rem) {
  .who-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sp-8); }
}
@media (min-width: 87.5rem) {
  .who-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

.who-copy h2 { margin: var(--sp-3) 0 var(--sp-5); max-width: 16ch; font-size: clamp(2.4rem, 3.6vw, 3.75rem); line-height: 1.08; }
.who-copy p { max-width: 36rem; }

.who-points {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4) 0;
  margin: var(--sp-6) 0;
  padding: 0;
}
.who-points li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-inline: 0.75rem;
  border-left: 1px solid var(--rule);
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-strong);
}
.who-points li:first-child { padding-left: 0; border-left: 0; }
.who-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #F1E2C8; /* champagne, lightened */
  color: var(--ink);
}
.who-ico svg { width: 1.375rem; height: 1.375rem; }
.who-link { font-weight: 600; }

/* The photo: big radius top left and bottom right, small on the other two. */
.who-media {
  position: relative;
  z-index: 1;
  margin: 0;
  aspect-ratio: 655 / 582;
  border-radius: 6rem 1.25rem 6rem 1.25rem;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.who-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
}

/* Leaf line art behind the photo's right edge. */
.textured > .who-orn {
  --orn-w: 17rem;
  --orn-o: 0.6;
  right: -5rem;
  top: 2rem;
}

@media (max-width: 59.9375rem) {
  .who-media { border-radius: 3.5rem 1rem 3.5rem 1rem; aspect-ratio: 4 / 3; }
  .textured > .who-orn { --orn-w: 11rem; top: auto; bottom: 6rem; right: -4rem; --orn-o: 0.4; }
}
@media (max-width: 79.9375rem) {
  /* Below 1280 px the three points no longer fit one row: they stack as a
     list, and the side rules give way. */
  .who-points { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .who-points li { padding-inline: 0; border-left: 0; }
}

/* ------------------------------------------------------------------------
   What home care is (Micah's mockup, 2026-10-16): copy left, ending in an
   outlined "How transitions work" card; on the right, the photo in an arch
   with a gold outline and leaves behind it, its right half tucked under the
   services card, a two by three grid of icons with thin rules between. */

.what-split { display: grid; gap: var(--sp-7); align-items: center; max-width: 90rem; }
.nowrap { white-space: nowrap; }
@media (min-width: 60rem) {
  .what-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--sp-6); }
}

.what-copy h2 { margin: var(--sp-3) 0 var(--sp-5); max-width: 14ch; font-size: clamp(2.4rem, 3.6vw, 3.75rem); line-height: 1.05; }
.what-copy p { max-width: 36rem; }
/* A short brass stroke leading a fine rule. */
.what-rule {
  border: 0;
  height: 1px;
  max-width: 33rem;
  margin: var(--sp-6) 0;
  background: linear-gradient(90deg, var(--brass) 0 3.75rem, var(--rule) 3.75rem);
}

.what-card {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  max-width: 37rem;
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid rgba(168, 134, 63, 0.45);
  border-radius: 1rem;
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease-out-expo), background-color var(--dur) var(--ease-out-expo);
}
.what-card:hover { border-color: var(--brass); background-color: rgba(255, 255, 255, 0.45); }
.what-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.what-card-ico { flex: none; width: 3.5rem; height: 3.5rem; color: var(--brass); }
.what-card-ico svg { width: 100%; height: 100%; }
.what-card-text { display: grid; gap: var(--sp-1); }
.what-card-eyebrow {
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--accent-strong);
}
.what-card-arrow { flex: none; width: 1.75rem; height: 1.75rem; margin-left: auto; color: var(--brass); transition: transform var(--dur) var(--ease-out-expo); }
.what-card:hover .what-card-arrow { transform: translateX(4px); }

/* The visual: the arch shows in the left 31 percent and runs under the card. */
.what-visual { position: relative; display: grid; grid-template-columns: 31% minmax(0, 1fr); }
.what-frame {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 8%;
  bottom: 1%;
  width: 45%;
}
/* The gold outline follows the frame, a hair outside it. Rounded corners,
   not an oval (Micah, 2026-10-16). */
.what-frame::before {
  content: "";
  position: absolute;
  inset: -0.75rem;
  border: 1.5px solid rgba(168, 134, 63, 0.6);
  border-radius: 9.75rem 0 0 9.75rem;
  pointer-events: none;
}
.what-media {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 9rem 0 0 9rem;
}
.what-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 78% 40%; }

/* Leaves behind the arch: a spray over its top, a branch at its lower left. */
.what-visual > .orn { z-index: 0; }
.what-orn-top { --orn-w: 15rem; --orn-o: 0.55; left: 2%; top: -9%; transform: rotate(-28deg); }
.what-orn-low { --orn-w: 7.5rem; --orn-o: 0.5; left: -9%; bottom: 10%; transform: rotate(-12deg); }

.what-services-card {
  position: relative;
  z-index: 2;
  grid-column: 2;
  padding: var(--sp-5);
  background: #FAF7F1;
  border-radius: 1.25rem;
  box-shadow: var(--shadow-card);
}
.what-services { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.what-services li {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
}
.what-services li:nth-child(even) { border-left: 1px solid var(--rule); }
.what-services li:nth-child(n + 3) { border-top: 1px solid var(--rule); }
.what-ico {
  display: grid;
  place-items: center;
  width: 6.5rem;
  height: 6.5rem;
  border-radius: 50%;
  background: #F1E4CF;
  color: var(--brass);
}
.what-ico svg { width: 3.75rem; height: 3.75rem; }
/* Line breaks are set in the markup, as in the mockup. */
.what-label {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--text-strong);
}

/* Below 960 px: the arch becomes a rounded band above the card, the leaves
   step out, and the icons shrink. */
@media (max-width: 59.9375rem) {
  .what-visual { grid-template-columns: 1fr; gap: var(--sp-6); }
  .what-frame { position: relative; inset: auto; width: auto; height: 18rem; margin: 0.75rem; }
  .what-frame::before, .what-media { border-radius: 9rem 9rem 1.25rem 1.25rem; }
  .what-visual > .orn { display: none; }
  .what-services-card { grid-column: 1; padding: var(--sp-3); }
  .what-services li { padding: var(--sp-5) var(--sp-2); gap: var(--sp-3); }
  .what-ico { width: 4.5rem; height: 4.5rem; }
  .what-ico svg { width: 2.25rem; height: 2.25rem; }
  .what-label { font-size: 1.125rem; }
  .what-card { padding: var(--sp-4); gap: var(--sp-4); }
  .what-card-ico { width: 2.75rem; height: 2.75rem; }
}

/* ------------------------------------------------------------------------
   Levels of care (Micah's mockup, 2026-10-16): centered head, a lighter to
   more advanced scale line, four cards whose tops rise into a curved tab
   holding each level's gold medallion, a fine gold line joining the cards,
   Level 4 in navy, and an outlined pill button. Leaf art top left and
   bottom right. */

.lv-band { position: relative; }
.lv-leaf {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  background: no-repeat center / contain;
  opacity: 0.75;
}
.lv-leaf-top {
  left: -3rem;
  top: -2.5rem;
  width: 24rem;
  aspect-ratio: 1;
  background-image: url("../img/levels-of-care-background-leaf-1x.webp");
  background-image: image-set(url("../img/levels-of-care-background-leaf-1x.avif") type("image/avif") 1x, url("../img/levels-of-care-background-leaf-2x.avif") type("image/avif") 2x, url("../img/levels-of-care-background-leaf-1x.webp") type("image/webp") 1x, url("../img/levels-of-care-background-leaf-2x.webp") type("image/webp") 2x);
}
.lv-leaf-bottom {
  right: -2rem;
  bottom: -2rem;
  width: 40rem;
  aspect-ratio: 1448 / 1086;
  background-image: url("../img/levels-of-care-background-bottom-1x.webp");
  background-image: image-set(url("../img/levels-of-care-background-bottom-1x.avif") type("image/avif") 1x, url("../img/levels-of-care-background-bottom-2x.avif") type("image/avif") 2x, url("../img/levels-of-care-background-bottom-1x.webp") type("image/webp") 1x, url("../img/levels-of-care-background-bottom-2x.webp") type("image/webp") 2x);
}

.lv-wrap { max-width: 90rem; }
.lv-head { text-align: center; }
.lv-head h2 { margin: var(--sp-3) auto var(--sp-4); }
.lv-sub {
  margin: 0 auto;
  max-width: 44rem;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--text-soft);
}

/* The scale: lighter support to more advanced support. */
.lv-scale {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin: var(--sp-7) 0 var(--sp-8);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.lv-scale-low { color: var(--text-soft); white-space: nowrap; }
.lv-scale-line { flex: 1; height: 1px; background: rgba(168, 134, 63, 0.55); }
.lv-scale-high { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--accent-strong); white-space: nowrap; }
.lv-scale-high svg { width: 1.75rem; height: 1.75rem; }

/* The row: a fine gold line at the cards' top edge joins them; each card
   covers it, so it shows only between cards. */
.lv-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-6);
  padding-top: 3.25rem;
}
.lv-row::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 3.25rem;
  left: 12%;
  right: 12%;
  height: 1px;
  background: rgba(168, 134, 63, 0.6);
}

.lv-card {
  --lv-bg: #FBF8F3;
  --lv-edge: rgba(168, 134, 63, 0.42);
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4.25rem var(--sp-5) var(--sp-6);
  text-align: center;
  background: var(--lv-bg);
  border: 1px solid var(--lv-edge);
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(8, 24, 48, 0.04), 0 14px 30px rgba(8, 24, 48, 0.06);
}
/* The tab the medallion sits in: the card's top edge rising in a curve. */
.lv-bump {
  position: absolute;
  top: calc(-3rem + 1px);
  left: 50%;
  width: 16rem;
  height: 3rem;
  transform: translateX(-50%);
  overflow: visible;
}
.lv-bump-fill { fill: var(--lv-bg); }
.lv-bump-line { fill: none; stroke: var(--lv-edge); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.lv-medal {
  position: absolute;
  top: -3.5rem;
  left: 50%;
  width: 6rem;
  height: 6rem;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 10px rgba(8, 24, 48, 0.16));
}
.lv-medal img { display: block; width: 100%; height: 100%; }

.lv-num {
  margin: 0;
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent-strong);
}
.lv-rule {
  display: block;
  width: 3rem;
  height: 1.5px;
  margin: var(--sp-3) 0 var(--sp-4);
  background: linear-gradient(90deg, rgba(168, 134, 63, 0), var(--brass), rgba(168, 134, 63, 0));
}
.lv-title {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.9vw, 1.875rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-strong);
}
.lv-desc {
  margin: 0;
  max-width: 17em;
  font-family: "Newsreader", Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--text-soft);
}

/* Level 4 in navy with a gold edge. */
.lv-card.is-dark {
  --lv-bg: #0F1E3D;
  --lv-edge: rgba(216, 184, 144, 0.75);
  background: linear-gradient(170deg, #13254A 0%, #0B1834 100%);
}
.lv-card.is-dark .lv-num { color: var(--champagne); }
.lv-card.is-dark .lv-title { color: var(--white); }
.lv-card.is-dark .lv-desc { color: rgba(244, 240, 235, 0.88); }

/* The button: an outlined pill, small tracked capitals. */
.lv-cta-wrap { display: flex; justify-content: center; margin-top: var(--sp-7); }
.lv-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 3.75rem;
  padding: 0 2.75rem;
  border: 1.5px solid rgba(168, 134, 63, 0.75);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0 8px 20px rgba(8, 24, 48, 0.06);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text-strong);
  transition: background-color var(--dur) var(--ease-out-expo), border-color var(--dur) var(--ease-out-expo);
}
.lv-cta svg { width: 1.5rem; height: 1.5rem; color: var(--brass); transition: transform var(--dur) var(--ease-out-expo); }
.lv-cta:hover { background: rgba(255, 255, 255, 0.7); border-color: var(--brass); }
.lv-cta:hover svg { transform: translateX(4px); }
.lv-cta:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Two by two on tablets, one column on phones; the joining line steps out. */
@media (max-width: 71.9375rem) {
  .lv-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 5rem; }
  .lv-row::before { display: none; }
  .lv-leaf-bottom { width: 26rem; }
}
@media (max-width: 39.9375rem) {
  .lv-row { grid-template-columns: 1fr; }
  /* The scale loses its line on phones; the two ends sit apart and may wrap. */
  .lv-scale { justify-content: space-between; gap: var(--sp-4); letter-spacing: 0.12em; }
  .lv-scale-line { display: none; }
  .lv-scale-low, .lv-scale-high { white-space: normal; }
  .lv-scale-high { text-align: right; }
  .lv-sub { font-size: 1.25rem; }
  .lv-leaf-top { width: 14rem; }
  .lv-leaf-bottom { width: 18rem; }
  .lv-cta { padding: 0 var(--sp-5); letter-spacing: 0.14em; gap: var(--sp-3); }
}

/* ------------------------------------------------------------------------
   Instant quote and Get in touch (Micah's mockup, 2026-10-16). */


/* Instant quote: copy left, photo right with the steps card over its left
   edge and a fine gold circle behind both. */
.iq-band { position: relative; }
.textured > .iq-leaf-left { --orn-w: 14rem; --orn-o: 0.8; left: -3rem; top: 6%; }
.textured > .iq-leaf-right { --orn-w: 12.5rem; --orn-o: 0.8; right: -3rem; top: 10%; }

.iq-split { display: grid; gap: var(--sp-8); align-items: center; max-width: 90rem; }
@media (min-width: 60rem) {
  .iq-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.iq-copy h2 { margin: var(--sp-4) 0 var(--sp-5); max-width: none; font-size: clamp(2.4rem, 3.6vw, 3.75rem); line-height: 1.06; }
.iq-lede { max-width: 34rem; font-size: var(--fs-1); line-height: 1.5; margin: 0; }
.iq-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-5);
  margin-top: var(--sp-6);
  min-height: 3.75rem;
  padding: 0 2.25rem;
  font-size: var(--fs-1);
  box-shadow: 0 10px 24px rgba(8, 24, 48, 0.22);
}
.iq-btn svg { width: 1.375rem; height: 1.375rem; flex: none; transition: transform var(--dur) var(--ease-out-expo); }
.iq-btn:hover svg { transform: translateX(4px); }

.iq-visual { position: relative; padding-block: 2rem; }
.iq-ring {
  position: absolute;
  z-index: 0;
  left: 3%;
  top: 50%;
  width: 78%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border: 1.5px solid rgba(168, 134, 63, 0.55);
  border-radius: 50%;
  pointer-events: none;
}
.iq-media {
  position: relative;
  z-index: 1;
  margin: 0 0 0 41%;
  aspect-ratio: 375 / 450;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.iq-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.iq-card {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 14%;
  width: 48.5%;
  padding: var(--sp-6) var(--sp-5) var(--sp-4);
  background: #FBF8F3;
  border: 1px solid rgba(168, 134, 63, 0.2);
  border-radius: 1.25rem;
  box-shadow: 0 2px 4px rgba(8, 24, 48, 0.04), 0 18px 36px rgba(8, 24, 48, 0.1);
}
/* Three dots joined by a line; the first is done. */
.iq-dots {
  position: relative;
  list-style: none;
  display: flex;
  justify-content: space-between;
  margin: 0 var(--sp-3) var(--sp-5);
  padding: 0;
}
.iq-dots::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(168, 134, 63, 0.55);
}
.iq-dots li {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1.5px solid rgba(168, 134, 63, 0.7);
  background: #FBF8F3;
}
.iq-dots li.is-done { background: var(--brass); border-color: var(--brass); color: var(--white); }
.iq-dots svg { width: 1rem; height: 1rem; }

.iq-steps { list-style: none; margin: 0; padding: 0; }
.iq-steps li {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  font-size: var(--fs-0);
  line-height: 1.35;
  color: var(--text-strong);
}
.iq-steps li + li { border-top: 1px solid var(--rule); }
.iq-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: 1px solid rgba(168, 134, 63, 0.45);
  color: var(--brass);
}
.iq-ico svg { width: 1.6rem; height: 1.6rem; }

@media (max-width: 59.9375rem) {
  .iq-visual { max-width: 36rem; }
}
@media (max-width: 39.9375rem) {
  /* On phones the photo shows whole and the card overlaps only its foot,
     so it never covers a face. */
  .iq-media { margin-left: 12%; aspect-ratio: 4 / 4.4; }
  .iq-card { position: relative; top: auto; width: 86%; margin-top: -4.5rem; padding: var(--sp-4) var(--sp-4) var(--sp-2); }
  .iq-steps li { gap: var(--sp-3); padding: var(--sp-3) 0; font-size: 0.9375rem; }
  .iq-ico { width: 2.5rem; height: 2.5rem; }
  .iq-ico svg { width: 1.25rem; height: 1.25rem; }
  .iq-ring { width: 92%; left: 0; }
  .textured > .iq-leaf-left, .textured > .iq-leaf-right { --orn-w: 6rem; --orn-o: 0.4; }
}