/* ---- page: fees ----
   Page-specific styles for fees.html. Loaded AFTER main.css.
   Reuses shared bands, splits, botanical icons, faq, and buttons. */

/* Centered hero */
.fees-hero { text-align: center; padding-block: clamp(48px, 6vw, 84px) clamp(40px, 5vw, 64px); }
.fees-hero .eyebrow { display: block; margin-bottom: 16px; }
.fees-hero h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: 4px; }
.fees-hero .hero-sub {
  max-width: 34ch; margin: 22px auto 0; color: var(--body);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
}
.fees-hero__buttons {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center; margin-top: 30px;
}
@media (max-width: 560px) {
  .fees-hero__buttons { flex-direction: column; align-items: stretch; }
  .fees-hero__buttons .btn { width: 100%; }
}

/* Full-bleed photo bands (fees-office, stationery) */
.photo-band img { width: 100%; height: clamp(280px, 40vw, 520px); object-fit: cover; }

/* Centered statement */
.statement { text-align: center; }
.statement .rule { margin: 20px auto 26px; }
.statement p { max-width: 34ch; margin-inline: auto; color: var(--body); }

/* Sage 3-column band: circled icon, title, rule, subline, paragraph */
.fee-col { text-align: center; }
/* The consultation title runs to two lines while the other two fit on one, so
   every element under it used to sit a line lower than its siblings. Subgrid
   pins the five slots (icon / title / rule / value line / body) to shared rows
   across all three columns, so they stay aligned at any title length. */
@media (min-width: 861px) {
  .band-sage .divided-cols.cols-3 { grid-template-rows: repeat(5, auto); }
  .fee-col {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}
.fee-icon {
  width: 66px; height: 66px; margin: 0 auto 22px;
  border: 1px solid rgba(255,255,255,.6); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.fee-icon svg { width: 28px; height: 28px; stroke: var(--ivory); stroke-width: 1.5; fill: none; }
.fee-col h3 { color: var(--ivory); font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: 0; }
.fee-col .rule { background: rgba(255,255,255,.55); margin: 16px auto 18px; }
.fee-col .fee-sub { color: var(--ivory); font-weight: 500; margin-bottom: 10px; }
.fee-col p { color: rgba(251,248,241,.86); font-size: 1rem; }

/* Out-of-Network Benefits split */
.benefits .leaf-divider { margin: 18px 0 24px; }
.benefits h2 { margin-bottom: 0; }
.benefits-text p { max-width: 42ch; }
.benefits-text .btn { margin-top: 26px; }
@media (max-width: 560px) { .benefits-text .btn { width: 100%; } }
.check-list { display: flex; flex-direction: column; }
.check-row {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 4px; border-bottom: 1px solid var(--line);
}
.check-row:first-child { border-top: 1px solid var(--line); }
.check-disc {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--sage-deep);
  display: flex; align-items: center; justify-content: center;
}
.check-disc svg { width: 17px; height: 17px; stroke: var(--ivory); stroke-width: 2; fill: none; }
.check-row span { font-size: 1.05rem; color: var(--ink); font-family: var(--serif); }

/* Sage-tint CTA band with botanical sprig */
.fees-cta { position: relative; background: var(--sage-tint); text-align: center; overflow: hidden; }
.fees-cta .cta-inner { position: relative; z-index: 2; }
.fees-cta h2 { margin-bottom: 4px; }
.fees-cta .cta-sub { max-width: 46ch; margin: 16px auto 0; color: var(--body); }
.fees-cta .rule { margin: 20px auto 28px; }
/* the CTA uses the shared solid sage .btn, exactly like every other page.
   (An outlined, uppercase, letterspaced override lived here; it was the only
   one on the site and failed WCAG AA at 3.80:1.) */
.fees-cta .sprig { position: absolute; z-index: 1; right: 0; bottom: -10px; width: min(230px, 30vw); opacity: .5; pointer-events: none; }
@media (max-width: 620px) { .fees-cta .sprig { width: 140px; opacity: .38; } }
@media (max-width: 560px) { .fees-cta .btn { width: 100%; } }