/*
 * Funeral Services page -- normal document-flow scrolling (no snap), same
 * pattern as funeral-parlours.css: reuses the home page's nav/hotline/
 * footer components and color tokens from style.css, and reuses style.css's
 * own .card-grid/.pricing-grid/.timeline/.checklist/.faq-item/.quote-card
 * components directly rather than redefining them. Only the scaffolding
 * (.fpv-*) and the handful of components unique to this page live here.
 */
html, body.fpv-body {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}
.nav { position: fixed; }
.fpv-main { display: block; }

.fpv-inner { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
.fpv-header { max-width: 42rem; margin: 0 auto; text-align: center; }

/* --- Gallery section header -- title needs more room than the usual 42rem
   column so it doesn't wrap to two lines on desktop. --- */
@media (min-width: 1024px) {
  .fpv-header--gallery { max-width: none; }
  .fpv-header--gallery h2 { white-space: nowrap; }
}

.fpv-section { padding: 5rem 0; position: relative; }

/* --- Reveal-on-scroll -- plain IntersectionObserver fade/slide, same as
   funeral-parlours.js. --- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--pc-ease), transform 0.8s var(--pc-ease); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* --- Hero -- static photo, no scroll-scrub canvas needed for a
   content-first SEO page. --- */
.fpv-hero {
  position: relative; min-height: 78vh; min-height: 78svh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 8rem 1.5rem 4rem; text-align: center;
}
.fpv-hero__media { position: absolute; inset: 0; z-index: 0; }
.fpv-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fpv-hero__overlay { position: absolute; inset: 0; z-index: 1; background: rgba(255, 255, 255, 0.55); }
.fpv-hero__content { position: relative; z-index: 2; max-width: 42rem; }
.fpv-hero__content .copy { margin-left: auto; margin-right: auto; }
.fpv-hero {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 6rem), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 6rem), transparent 100%);
}
/* --- Scroll-scrubbed frame-sequence sections -- reuses the site's existing
   hero-scrub frame set as a mid-page "video" moment: pinned briefly while
   the frame drawn to canvas tracks scroll position (see scroll-scrub.js). --- */
.fpv-scrub-section {
  position: relative; height: 100vh; height: 100svh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; padding: 3rem 1.5rem; text-align: center;
  background: var(--pc-ink);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 5rem, #000 calc(100% - 5rem), transparent 100%);
}
.fpv-scrub-section__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  z-index: 0; opacity: 0; transition: opacity 0.5s ease;
}
.fpv-scrub-section.is-loaded .fpv-scrub-section__canvas { opacity: 1; }
.fpv-scrub-section .plc-scrub__loading {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  transition: opacity 0.4s ease; pointer-events: none;
}
.fpv-scrub-section.is-loaded .plc-scrub__loading { opacity: 0; }
.fpv-scrub-section__overlay { position: absolute; inset: 0; z-index: 1; background: rgba(255, 255, 255, 0.55); }
.fpv-scrub-section__content { position: relative; z-index: 2; max-width: 40rem; }
.fpv-scrub-section__content .copy { margin-left: auto; margin-right: auto; }

/* --- Article sections -- comfortable reading column, alternating with the
   visual sections below via the shared white/soft-grey banding. --- */
.fpv-article { max-width: 46rem; margin: 0 auto; text-align: center; }
.fpv-article .copy { max-width: none; text-align: left; margin-top: 1.25rem; }
.fpv-article .copy + .copy { margin-top: 1rem; }

/* --- Service cards -- reuses style.css's .card-grid/.card, just as a real
   link per card instead of a plain div. --- */
.fsv-service-card {
  display: block; text-decoration: none;
  padding: 1.3rem 1.2rem; border-radius: 18px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transition: transform 0.35s var(--pc-ease), background-color 0.35s var(--pc-ease);
}
.fsv-service-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.75); }
.fsv-service-card__title { font-size: 1rem; font-weight: 700; color: var(--pc-ink); }
.fsv-service-card__text { margin: 0.4rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--pc-ink-soft); }
.fsv-service-card__link { margin-top: 0.75rem; display: inline-flex; font-size: 0.8rem; font-weight: 700; color: var(--pc-baby-blue-deep); }

/* --- What's included -- icon + title + short description, smaller and
   denser than the service cards since there are 11 of them. --- */
.fsv-included-grid {
  margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem 1.5rem; text-align: left;
}
@media (max-width: 860px) { .fsv-included-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fsv-included-grid { grid-template-columns: 1fr; } }
.fsv-included-item { display: flex; gap: 0.85rem; align-items: flex-start; }
.fsv-included-item__icon {
  flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(39, 211, 245, 0.16); color: var(--pc-baby-blue-deep);
}
.fsv-included-item__title { font-size: 0.92rem; font-weight: 700; color: var(--pc-ink); }
.fsv-included-item__text { margin: 0.25rem 0 0; font-size: 0.82rem; line-height: 1.5; color: var(--pc-ink-soft); }

/* --- Cornerstone guide -- long-form article with a jump-to-section mini
   table of contents (useful for a 3,500+ word page, and gives search
   engines/readers a clear map of the content up front). --- */
.fsv-guide { max-width: 46rem; margin: 0 auto; text-align: left; }
.fsv-guide__intro { text-align: center; }
.fsv-guide__intro .copy { text-align: center; margin-left: auto; margin-right: auto; max-width: 38rem; }
.fsv-guide__toc {
  margin: 2.5rem 0 3rem; padding: 1.5rem 1.75rem; border-radius: 18px;
  background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.8);
}
.fsv-guide__toc-title { margin: 0 0 0.85rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pc-baby-blue-deep); }
.fsv-guide__toc-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 1.5rem; }
@media (max-width: 620px) { .fsv-guide__toc-list { grid-template-columns: 1fr; } }
.fsv-guide__toc-list a { font-size: 0.88rem; color: var(--pc-ink); text-decoration: none; }
.fsv-guide__toc-list a:hover { color: var(--pc-baby-blue-deep); text-decoration: underline; }
.fsv-guide__toc-list li { counter-increment: fsv-toc; }
.fsv-guide__toc-list { counter-reset: fsv-toc; }
.fsv-guide__toc-list li a::before { content: counter(fsv-toc) '. '; font-weight: 700; color: var(--pc-baby-blue-deep); }

.fsv-guide h3 {
  margin: 2.75rem 0 0.9rem; font-size: 1.3rem; font-weight: 700; color: var(--pc-ink);
  scroll-margin-top: 6rem;
}
.fsv-guide h3:first-of-type { margin-top: 0; }
.fsv-guide p { margin: 0 0 1rem; font-size: 0.96rem; line-height: 1.75; color: var(--pc-ink-soft); }
.fsv-guide ul { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--pc-ink-soft); font-size: 0.96rem; line-height: 1.75; }
.fsv-guide li { margin-bottom: 0.35rem; }
.fsv-guide strong { color: var(--pc-ink); }

/* --- Final CTA -- full-width band, distinct from the rest of the page. --- */
.fsv-final-cta {
  text-align: center; border-radius: 28px; padding: 3.5rem 2rem;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.85), rgba(39, 211, 245, 0.22));
  border: 1px solid rgba(255, 255, 255, 0.8);
}
.fsv-final-cta .heading { margin: 0.75rem auto 0; }
.fsv-final-cta .copy { margin: 1rem auto 0; }

/* --- Footer (reuses fp-footer-* panel components from style.css) -- light
   background, matching funeral-parlours' footer treatment. --- */
.fpv-footer { position: relative; padding: 4rem 0 2.5rem; }
.fpv-footer-scroll { display: block; }
.fpv-footer .fp-footer-inner { padding: 0 1.5rem; }