/* Service, location, method, care plan and story pages. Loaded after site.css. */

/* ---------- Shared helpers ---------- */
.accent { color: var(--orange); }
.prose ol { margin: 0 0 .9em; padding-left: 2em; }
.prose ol li + li { margin-top: .9em; }
.prose u { text-decoration: underline; }
.stack > h3 { color: var(--text); line-height: 1.2; }
.stack > .faq, .stack > .carousel, .stack > .check-cols { align-self: stretch; }
.stack > img { margin: 0 auto; }
.section--center .stack > .prose { max-width: 100%; }

/* ---------- Page hero (light gradient) ---------- */
.page-hero {
  padding: 100px 0 140px;
  background: var(--blue-tint) url("/assets/images/Hero-Bg.png") center / cover no-repeat;
  text-align: center;
}
.page-hero .stack { align-items: center; gap: 20px; }
.page-hero .btn { margin-top: 10px; }
.kicker { font-size: 28px; line-height: 1; font-weight: 600; text-transform: capitalize; }
.display { font-size: 60px; line-height: 1.1; font-weight: 700; text-transform: uppercase; color: var(--navy); }
.page-hero .stack > * { max-width: 792px; }
.page-hero--plans .stack > * { max-width: none; }
.upper { text-transform: uppercase; }
.page-hero .prose { max-width: 770px; }
.page-hero--fade { background: linear-gradient(var(--white), var(--blue-tint)); padding-bottom: 60px; }
.page-hero--fade .btn + .display { margin-top: 130px; }
.page-hero--fade img { width: 792px; margin: 10px auto 0; }
.page-hero--fade img + .display { margin-top: 140px; }

/* ---------- Navy section ---------- */
.section--navy { background: var(--navy); color: var(--white); }
.section--navy h2, .section--navy h3 { color: var(--white); }

/* ---------- Check lists ---------- */
.icon-list--check { gap: 18px; }
.icon-list--check svg { width: 25px; height: 25px; fill: var(--sky); }
.icon-list--orange svg { fill: var(--orange); }
.icon-list--navy svg { fill: var(--navy); }
.icon-list--white svg { fill: var(--white); }
.icon-list--white { color: var(--white); font-weight: 600; font-size: 18px; }
.icon-list--navy, .plan .icon-list--orange { color: #000; font-size: 18px; }
.check-cols { display: grid; grid-template-columns: repeat(2, max-content); gap: 18px 30px; justify-content: start; }
.section--center .check-cols { grid-template-columns: repeat(2, minmax(0, 466px)); gap: 18px 0; justify-content: center; text-align: left; margin: 20px 0; }
.stack > .eyebrow { margin: 0; }

/* ---------- Cards (services, process) ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; text-align: left; }
.card { padding: 0 20px 20px; }
.card img { width: auto; height: 46px; }
.card h3 { margin: 28px 0 16px; color: var(--text); font-size: 28px; line-height: 1.2; }
.cards--steps .card img { height: 74px; }
.cards--steps .card h3 { color: var(--white); margin-top: 20px; }

/* ---------- Carousel (scroll-snap row) ---------- */
.carousel {
  display: flex; gap: 20px;
  margin: 20px calc((100% - 100vw) / 2 + 12px) 0;
  padding-bottom: 12px;
  overflow-x: auto; scroll-snap-type: x mandatory;
}
.carousel img { flex: 0 0 calc((100% - 40px) / 3); width: calc((100% - 40px) / 3); height: auto; aspect-ratio: 775 / 900; object-fit: cover; object-position: top; scroll-snap-align: start; }

/* ---------- FAQ accordion ---------- */
.faq { width: 100%; margin-top: 20px; text-align: left; }
.faq details { padding: 0 20px; }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 17px 0; list-style: none; cursor: pointer;
  color: var(--navy); font-size: 20px; line-height: 1.2; font-weight: 700;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 36px; line-height: 20px; font-weight: 700; }
.faq details[open] summary { color: #000; }
.faq details[open] summary::after { content: "\2212"; }
.faq .prose { padding: 0 0 15px; color: #000; }
.section--navy .faq summary, .section--navy .faq .prose { color: var(--white); }
.section--navy .faq details[open] summary { color: var(--blue); }

/* ---------- Form with map ---------- */
.form-map { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.form-map .stack { align-items: center; text-align: center; }
.form-map .follow { margin-top: 20px; }
.map { width: 100%; height: 100%; min-height: 500px; border: 0; }

/* ---------- Ryse pillars ---------- */
.pillars { display: flex; flex-direction: column; gap: 100px; }
.pillar {
  display: grid; grid-template-columns: 586fr 440fr; gap: 0 20px; align-items: center;
  padding: 50px 56px; background: var(--white); border: 1px solid var(--navy); border-radius: 10px;
}
.pillar--num-first { grid-template-columns: 382fr 586fr; }
.pillar .stack { gap: 20px; }
.pillar .stack > .prose + .prose { margin-top: 10px; }
.pillar .icon-list--check { gap: 20px; font-size: 15px; line-height: 1.6; }
.pillar .icon-list--check svg { width: 24px; height: 24px; }
.pillar__num { margin: 0; color: var(--navy); font-size: 500px; line-height: 1.04; font-weight: 700; text-align: center; }
.pillar-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  padding: 40px 95px; border-radius: 10px; background: linear-gradient(var(--blue), var(--navy));
}
.pillar-cta h2 { color: var(--white); }
.pillar-cta .section-cta { margin-top: 0; flex: none; }

/* ---------- Care plans ---------- */
.page-hero--plans { padding: 100px 0 120px; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; margin-top: 20px; text-align: center; }
.plans:has(> .plan:nth-child(2):last-child) { grid-template-columns: repeat(2, 382px); justify-content: center; }
.plan { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 25px 20px 40px; background: var(--white); border-radius: 20px; }
.plan--dark { background: var(--navy); color: var(--white); }
.plan--tint { background: var(--blue-tint); }
.plan__name { font-size: 30px; line-height: 1.1; text-transform: capitalize; }
.plan--dark .plan__name, .plan--dark .plan__price { color: var(--blue); }
.plan__tag { color: #000; font-size: 18px; line-height: 1; }
.plan--dark .plan__tag { color: var(--white); }
.plan__price { margin: 0; color: var(--navy); font-size: 75px; line-height: 1; font-weight: 700; }
.plan__period { margin: 0; color: #000; font-size: 16px; line-height: 1; }
.plan--dark .plan__period { color: var(--white); font-weight: 700; }
.plan .icon-list { gap: 15px; text-align: left; }
.plan .icon-list svg { width: 22px; height: 22px; }
.plan--dark .icon-list { align-self: stretch; }
.plan__note { text-align: left; color: var(--white); }
.section .plans + .section-cta, .page-hero--plans .plans + .btn { margin-top: 25px; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  .display { font-size: 50px; }
  .pillar__num { font-size: 300px; }
}
@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .carousel img { flex-basis: calc((100% - 20px) / 2); }
  .plans, .plans:has(> .plan:nth-child(2):last-child) { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 880px) {
  .display { font-size: 40px; }
  .kicker { font-size: 22px; }
  .page-hero { padding: 80px 0; }
  .card h3 { font-size: 22px; }
  .form-map { grid-template-columns: 1fr; }
  .pillar, .pillar--num-first { grid-template-columns: 1fr; padding: 30px 20px; }
  .pillar__num { order: -1; font-size: 200px; }
  .pillars { gap: 50px; }
  .pillar-cta { flex-direction: column; align-items: flex-start; padding: 30px 20px; }
}
@media (max-width: 767px) {
  .display { font-size: 30px; }
  .kicker { font-size: 20px; }
  .page-hero { padding: 30px 0 50px; }
  .section--center:not(.form-section) .narrow.stack { align-items: flex-start; text-align: left; }
  .pillar .stack { font-size: 13px; }
  .pillar .icon-list--check { font-size: 13px; gap: 14px; }
  .pillar__num { font-size: 150px; }
  .plan__name { font-size: 22px; }
  .plan__price { font-size: 55px; }
  .plan .icon-list { font-size: 15px; gap: 12px; }
  .plan__note { font-size: 13px; }
  .cards { grid-template-columns: 1fr; }
  .card { padding: 0 0 10px; }
  .check-cols, .section--center .check-cols { grid-template-columns: 1fr; justify-content: start; }
  .carousel img { flex-basis: 85%; }
  .faq details { padding: 0; }
  .faq summary { font-size: 18px; }
  .page-hero--fade img { width: 100%; }
  .page-hero--fade .btn + .display, .page-hero--fade img + .display { margin-top: 60px; }
  .pillar-cta .section-cta { align-self: stretch; }
}
.split .prose ol li + li { margin-top: 0; }