/* ============================================================
   pricing.css — PRICING page-specific section styles.
   Shared chrome (nav, footer, buttons, tokens, type, .serif-title,
   .caption, .dot, light-header variant) lives in /site.css.
   ============================================================ */

/* .page-hero and .banner are shared in site.css (used by Pricing + Contact). */

/* ---- FEES ---- */
.fees { padding: 92px 0 104px; }
.fees-lead {
  font-size: 16px; line-height: 24px; color: var(--ink-soft);
  margin-bottom: 56px; max-width: 760px;
}
/* R2-PRICE-02: the schedule is a stack of rows (.fee-group), each an independent
   3-column grid, so a row can be 1, 2 or 3 blocks wide and can carry an overarching
   heading. Column widths stay identical row to row, so the blocks still line up as
   one schedule. A site with no grouping data renders as a single .fee-group, i.e.
   the flat grid this replaced. */
.fees-rows { display: grid; row-gap: 64px; }
.fee-group-title {
  font-family: var(--serif); font-weight: 400;
  font-size: 30px; line-height: 38px; letter-spacing: -0.02em; color: var(--ink);
  margin-bottom: 28px; padding-bottom: 14px;
  border-bottom: 1px solid #e8e4dc;
}
.fees-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: 64px; row-gap: 64px;
}
.fee-block { }
.fee-block h3 {
  font-family: var(--sans); font-weight: 700;
  font-size: 16px; line-height: 22px; letter-spacing: -0.02em; color: var(--ink);
  margin-bottom: 4px;
}
.fee-block .fee-sub {
  font-size: 13px; line-height: 18px; color: var(--cap); margin-bottom: 20px;
}
.fee-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  font-size: 15px; line-height: 22px; color: var(--ink-soft);
  padding: 7px 0;
}
.fee-row .fee-name { max-width: 78%; }
.fee-row .fee-val { white-space: nowrap; flex: none; }
.fee-note {
  margin-top: 16px;
  font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink);
}

/* ---- LOCATION INDEX (National site only — R2-PRICE-01) ----
   The national page carries no schedule of its own; it indexes the four offices'
   pricing pages using the approved "Our Locations" card. The card, its gradient and
   the hover language are shared in site.css, but the section's own layout
   (.location / .location-grid / .loc-label) lives in home.css, which this template
   does not enqueue — so those rules are restated here, scoped to this page.
   QA rework: the section sits on white (was the navy band), so the heading and
   intro use the ink colours like the other light sections (.explore, .fees);
   the cards' overlay text stays white — it sits on the photos' gradient, not
   on the section background. */
.location { padding: 80px 0 96px; }
.location h2 { color: var(--ink); margin-bottom: 28px; }
.location-body { color: var(--ink-soft); max-width: 1000px; margin: 0 auto 44px; }
.location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.location .loc-card { aspect-ratio: 16 / 7; }
.location .loc-label {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%); z-index: 2;
  color: var(--white); font-size: 20px; font-weight: 600; letter-spacing: -0.03em;
}
.location .loc-arrow { right: 20px; }
.location .loc-arrow img { width: 36px; height: 36px; }

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
  .page-hero { padding-top: 124px; }
  .fees-rows { row-gap: 48px; }
  .fee-group-title { font-size: 26px; line-height: 34px; margin-bottom: 22px; }
  .fees-grid { grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 48px; }
  .location { padding: 64px 0 72px; }
  .location-body { margin-bottom: 36px; }
}
@media (max-width: 560px) {
  .fees-rows { row-gap: 40px; }
  .fees-grid { grid-template-columns: 1fr; }
  .location-grid { grid-template-columns: 1fr; }
}