/* My Way Companions — page-specific styles (14 Oct 2026). Uses the palette tokens from site.css.
   Loaded on every page through the custom_head setting — BEFORE site.css, so rules here that compete with
   site.css need the extra .hero-home / .tick-list in the selector to win. */

/* ── Prices page table ── */
.price-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white, #fff); border: 1px solid var(--line); border-top: 6px solid var(--gold); border-radius: 14px; overflow: hidden; margin: 8px 0 12px; }
.price-table th, .price-table td { padding: 16px 20px; font-size: 1.1rem; line-height: 1.5; vertical-align: top; color: var(--ink); }
.price-table thead th { text-align: left; font-weight: 700; color: var(--teal); border-bottom: 2px solid var(--teal); }
.price-table thead th:last-child, .price-table td:last-child { text-align: right; }
.price-table tbody tr + tr td { border-top: 1px solid var(--line); }
.price-table td:last-child { white-space: nowrap; }
.price-table strong { color: var(--teal); font-size: 1.2rem; }

/* ── Framed photos (About page, Home hero) ── */
.about-photo, .hero-photo { margin: 0; }
.about-photo img, .hero-photo img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%;
  border-radius: 18px; border: 4px solid var(--white, #fff); outline: 3px solid var(--gold); outline-offset: 0;
  box-shadow: 0 10px 30px rgba(47, 93, 98, .18);
}

/* ── Home hero: text left, photo right, trust strip below (the rightathome.co.uk pattern) ── */
.hero-home .hero-grid { grid-template-columns: 1fr 1.05fr; }
.hero-home .tick-list.trust-strip {
  list-style: none; margin: 40px 0 0; padding: 20px 24px !important;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 24px;
  background: var(--white, #fff); border: 1px solid var(--line); border-radius: 14px;
}
.hero-home .tick-list.trust-strip li { margin: 0; font-weight: 700; font-size: 1.05rem; line-height: 1.4; }
.hero-home .tick-list.trust-strip li::before { top: 0; }

@media (max-width: 960px) {
  .hero-home .hero-grid { grid-template-columns: 1fr; }
  .hero-home .tick-list.trust-strip { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .price-table th, .price-table td { padding: 14px 12px; font-size: 1rem; }
  .price-table td:last-child { white-space: normal; }
  .hero-home .tick-list.trust-strip { grid-template-columns: 1fr; margin-top: 28px; padding: 18px 18px !important; }
}