/* Funeral piper — reference: 05 - Funeral Piper.png (802px mockup ≈ 1440px desktop, ×1.79).
   Calm and dignified: no hover lifts or zooms on this page (body.no-motion also disables reveals). */

.page-funeral .card:hover .card__media img { transform: none; }

/* ---------- Hero: headline over a sunrise sky, lone piper in a churchyard on the right ---------- */
.hero--fun {
  --media-w: 47%; --fade: 10%; --hero-h: clamp(460px, 47vw, 700px); --copy-w: 54%;
  background:
    radial-gradient(ellipse 40% 26% at 18% 20%, rgb(255 255 255 / .85), transparent 70%),
    radial-gradient(ellipse 34% 20% at 44% 8%, rgb(255 255 255 / .7), transparent 70%),
    radial-gradient(ellipse 30% 30% at 46% 60%, rgb(255 236 200 / .55), transparent 70%),
    linear-gradient(180deg, #c3e1f6 0%, #dcedf9 40%, #f2f4ef 75%, #f4efe2 100%);
}
.hero--fun .hero__media img { object-position: 30% 45%; }
.hero--fun .eyebrow { letter-spacing: .26em; margin-bottom: .6rem; }
.hero--fun .display { font-size: clamp(2.8rem, 1rem + 6.4vw, 7rem); line-height: .92; }
.hero--fun .hero__lede--sm { font-size: clamp(1.02rem, .6rem + .95vw, 1.5rem); line-height: 1.3; max-width: 44ch; }
.hero--fun .btn .icon:not(.btn__arrow) { width: 1.15em; height: 1.15em; }
.hero--fun .hero__note { --tilt: -15deg; right: 2.5%; top: 15%; font-size: clamp(1.3rem, .7rem + 1.75vw, 2.5rem); }
.fun-hero__thistle { top: 52%; z-index: 0; width: clamp(50px, 4.6vw, 80px); }
@media (max-width: 900px) {
  .hero--fun { --copy-w: 100%; }
  .hero--fun .hero__note { top: auto; bottom: calc(var(--wave-h) + 1.4rem); right: 1rem; font-size: 1.3rem; }
  .fun-hero__thistle { display: none; }
}

/* ---------- Intro ---------- */
.fun-intro { position: relative; background: var(--paper-tex) 0 0 / 512px, var(--paper-warm); padding-block: clamp(1.4rem, 2.4vw, 2.4rem) clamp(1.2rem, 2vw, 2rem); overflow: hidden; }
.fun-intro__thistle { top: 0; width: clamp(60px, 7.5vw, 130px); }
.fun-intro__inner { text-align: center; max-width: 1100px; }
.fun-intro .h-serif { font-size: clamp(1.55rem, .4rem + 2.95vw, 3.15rem); line-height: 1.05; letter-spacing: -.02em; }
.fun-intro p { margin: .55rem auto 0; max-width: 46em; font-size: clamp(1rem, .7rem + .8vw, 1.45rem); line-height: 1.3; color: var(--text-soft); }

/* ---------- Six stages: slim photo panels with numbered markers ---------- */
.fun-stages { position: relative; background: var(--paper-tex) 0 0 / 512px, var(--paper-warm); padding-bottom: clamp(1.4rem, 2.4vw, 2.4rem); }
.fun-stages__list { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.fun-stages__list::before { /* gentle convex top edge across the photo row */
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: clamp(10px, 1.6vw, 24px); z-index: 2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V22C1100 0 380 -2 0 24Z' fill='%23f8f7f2'/%3E%3C/svg%3E") 0 0 / 100% 100%;
}
.fun-stage { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 0 .4rem; }
.fun-stage + .fun-stage { border-left: 1px solid var(--line-soft); }
.fun-stage__photo { position: relative; width: 100%; margin: 0 0 clamp(1.5rem, 2.4vw, 2.4rem); border-left: 3px solid #fff; }
.fun-stage:first-child .fun-stage__photo { border-left: 0; }
.fun-stage__photo img { width: 100%; aspect-ratio: 240 / 268; object-fit: cover; }
.fun-stage__photo::after { /* soft paper wave along the bottom edge */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(8px, 1.2vw, 18px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 18' preserveAspectRatio='none'%3E%3Cpath d='M0 8C60 2 120 16 240 6V18H0Z' fill='%23f8f7f2'/%3E%3C/svg%3E") 0 0 / 100% 100%;
}
.fun-stage__num {
  position: absolute; left: 14%; bottom: 0; transform: translateY(35%); z-index: 2;
  display: grid; place-items: center; width: clamp(30px, 3.4vw, 50px); height: clamp(30px, 3.4vw, 50px); flex: none; border-radius: 50%;
  background: var(--navy-800); color: #fff; box-shadow: 0 0 0 2px #fff, 0 2px 6px rgb(0 30 63 / .3);
  font-family: var(--font-ui); font-weight: 800; font-size: clamp(.9rem, .6rem + .75vw, 1.4rem);
}
.fun-stage__icon { width: clamp(34px, 3.6vw, 56px); height: clamp(34px, 3.6vw, 56px); color: var(--navy-800); margin-bottom: .4rem; }
.fun-stage .h-card--caps { font-size: clamp(.9rem, .55rem + .78vw, 1.38rem); line-height: 1.1; min-height: 2.2em; display: flex; align-items: center; margin-bottom: .7rem; padding-inline: .4rem; }
.fun-stage p { text-align: left; padding-inline: clamp(.6rem, 1.4vw, 1.6rem); font-size: clamp(.88rem, .62rem + .62vw, 1.26rem); line-height: 1.35; color: var(--text-soft); }
@media (max-width: 1000px) {
  .fun-stages__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.2rem; }
  .fun-stage:nth-child(4) { border-left: 0; }
  .fun-stage:nth-child(4) .fun-stage__photo { border-left: 0; }
}
@media (max-width: 600px) {
  .fun-stages__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fun-stage:nth-child(odd) { border-left: 0; }
  .fun-stage:nth-child(odd) .fun-stage__photo { border-left: 0; }
  .fun-stage:nth-child(4) { border-left: 1px solid var(--line-soft); }
  .fun-stage:nth-child(4) .fun-stage__photo { border-left: 3px solid #fff; }
  .fun-stage p { padding-inline: .7rem; }
}

/* ---------- Repertoire & personal requests ---------- */
.fun-rep { position: relative; padding-top: clamp(.6rem, 1vw, 1rem); background: var(--paper-tex) 0 0 / 512px, #f3f1ea; overflow: hidden; }
.fun-rep__thistle { left: -1%; top: 2%; width: clamp(70px, 9vw, 150px); opacity: .7; }
.fun-rep__thistle-r { right: -1%; bottom: 8%; width: clamp(50px, 6vw, 100px); opacity: .6; transform: scaleX(-1); }
.fun-rep__head {
  position: relative; text-align: center; padding: clamp(1.4rem, 2.6vw, 2.6rem) clamp(1rem, 12vw, 12rem) clamp(1.3rem, 2.2vw, 2.2rem);
  background: var(--paper-tex) 0 0 / 400px, linear-gradient(180deg, #f7f1e2, #f1e8d4);
  box-shadow: 0 2px 4px rgb(60 40 10 / .12), 6px -6px 0 -1px #ebe2cd, 6px -6px 4px -1px rgb(60 40 10 / .08);
  clip-path: polygon(0 4%, 6% 1%, 14% 3%, 25% .5%, 37% 2.5%, 50% .4%, 63% 2.6%, 75% .6%, 86% 2.8%, 94% .5%, 100% 3%, 100% 96%, 92% 99%, 80% 97.2%, 66% 99.6%, 52% 97.4%, 38% 99.5%, 24% 97.3%, 11% 99.4%, 0 97%);
  margin-bottom: clamp(1rem, 1.6vw, 1.6rem);
}
.fun-rep__head .h-serif { font-size: clamp(1.6rem, .5rem + 2.95vw, 3.2rem); line-height: 1.04; letter-spacing: -.02em; }
.fun-rep__head p:not(.script) { margin: .6rem auto 0; max-width: 54em; font-size: clamp(.95rem, .75rem + .5vw, 1.25rem); line-height: 1.3; color: var(--text-soft); }
.fun-rep__note { position: absolute; right: 2%; top: 12%; --tilt: -16deg; font-size: clamp(1.05rem, .6rem + 1.2vw, 1.9rem); }
.fun-rep__cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.6rem, 1vw, 1rem) clamp(.6rem, 1vw, 1rem); padding-inline: clamp(0rem, .6vw, .8rem); }
.fun-tune {
  display: grid; grid-template-columns: minmax(0, .36fr) minmax(0, .64fr); grid-template-areas: "art title" "art notation";
  align-items: center; gap: .3rem clamp(.4rem, .8vw, .9rem); padding: clamp(.7rem, 1.1vw, 1.1rem) clamp(.7rem, 1.3vw, 1.3rem) clamp(.8rem, 1.2vw, 1.2rem);
  background: var(--paper-tex) 0 0 / 300px, #f9f6ee; border-radius: 4px;
  box-shadow: 0 1px 2px rgb(60 40 10 / .12), 0 4px 12px rgb(60 40 10 / .1);
}
.fun-tune__title { grid-area: title; text-align: center; font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.1rem, .7rem + 1vw, 1.75rem); line-height: 1.1; color: var(--navy-800); align-self: end; }
.fun-tune__art { grid-area: art; }
.fun-tune__notation { grid-area: notation; }
.fun-tune img { width: 100%; height: auto; mix-blend-mode: multiply; }
.fun-tune--wide { grid-template-columns: 1fr; grid-template-areas: "title" "art"; }
.fun-tune--wide .fun-tune__title { align-self: auto; }
.fun-rep__ribbon { position: relative; z-index: 2; margin-top: clamp(.4rem, 1vw, 1rem); transform: rotate(1.4deg) scaleX(1.04); }
@media (max-width: 900px) {
  .fun-rep__head { padding-inline: 1.2rem; }
  .fun-rep__note { position: static; display: inline-block; margin-top: 1rem; transform-origin: center; }
  .fun-rep__cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) { .fun-rep__cards { grid-template-columns: 1fr; } }

/* ---------- The Bomber County difference + "Available at short notice" note ---------- */
.fun-diff { position: relative; background: var(--paper-tex) 0 0 / 512px, var(--paper-warm); padding-block: clamp(1.4rem, 2.6vw, 2.6rem) clamp(2.2rem, 3.6vw, 3.6rem); overflow: hidden; }
.fun-diff__thistle { top: 2%; }
.fun-diff__plane { right: 2%; top: clamp(2.6rem, 4.4vw, 4.4rem); width: clamp(110px, 13.5vw, 200px); }
.fun-diff__head { text-align: center; margin-bottom: clamp(1.2rem, 2vw, 2rem); }
.fun-diff__head .h-serif { font-size: clamp(1.7rem, .5rem + 3.2vw, 3.5rem); line-height: 1.02; letter-spacing: -.02em; }
.fun-diff__head p { margin-top: .4rem; font-size: clamp(1rem, .75rem + .65vw, 1.4rem); color: var(--text-soft); }
.fun-diff__grid { display: grid; grid-template-columns: minmax(0, 3.75fr) minmax(0, 1fr); gap: clamp(.8rem, 1.6vw, 1.6rem); align-items: start; }
.fun-diff__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fun-feature { display: flex; flex-direction: column; gap: clamp(.6rem, 1vw, 1rem); padding-inline: clamp(.6rem, 1.2vw, 1.2rem); }
.fun-feature:first-child { padding-left: 0; }
.fun-feature + .fun-feature { border-left: 1px solid var(--line); }
.fun-feature__head { display: flex; align-items: center; gap: clamp(.6rem, 1.4vw, 1.4rem); min-height: clamp(48px, 4.6vw, 72px); }
.fun-feature__icon { flex: none; width: clamp(36px, 4.2vw, 62px); height: clamp(36px, 4.2vw, 62px); color: var(--navy-800); }
.fun-feature .h-card--caps { font-size: clamp(.9rem, .6rem + .7vw, 1.32rem); line-height: 1.12; }
.fun-feature__media { aspect-ratio: 183 / 107; overflow: hidden; box-shadow: var(--shadow-sm); }
.fun-feature__media img { width: 100%; height: 100%; object-fit: cover; }
.fun-feature p { font-size: clamp(.9rem, .74rem + .38vw, 1.13rem); line-height: 1.35; color: var(--text-soft); }

.fun-note {
  position: relative; margin-top: clamp(-1rem, -1vw, -.4rem); padding: clamp(1.6rem, 2.6vw, 2.6rem) clamp(.8rem, 1.4vw, 1.4rem) 0;
  background: var(--paper-tex) 0 0 / 300px, radial-gradient(ellipse at 50% 30%, #f6efdc, #eadcbd 85%);
  box-shadow: 0 2px 4px rgb(60 40 10 / .15), 0 10px 26px rgb(60 40 10 / .16); transform: rotate(-1.5deg);
  clip-path: polygon(1% 2%, 12% 0, 30% 1.4%, 55% .2%, 78% 1.2%, 99% 0, 100% 30%, 98.8% 60%, 100% 99%, 70% 100%, 40% 98.8%, 12% 100%, 0 98%, 1.2% 60%, 0 30%);
  overflow: hidden;
}
.fun-note__pin { position: absolute; top: clamp(.5rem, .9vw, .9rem); left: 50%; width: clamp(14px, 1.3vw, 20px); height: clamp(14px, 1.3vw, 20px); flex: none; border-radius: 50%; transform: translateX(-50%);
  background: radial-gradient(circle at 35% 30%, #f3dfa6, #b08a3a 55%, #6d5220); box-shadow: 0 2px 3px rgb(0 0 0 / .35); }
.fun-note__script { --tilt: -9deg; font-size: clamp(1.25rem, .6rem + 1.6vw, 2.3rem); line-height: 1; transform-origin: center; text-align: center; margin-bottom: .6rem; }
.fun-note__text { font-size: clamp(.95rem, .75rem + .5vw, 1.25rem); line-height: 1.22; color: var(--navy-800); transform: rotate(-3deg); padding-left: .3rem; }
.fun-note__art { margin: .6rem calc(-1 * clamp(.8rem, 1.4vw, 1.4rem)) 0; }
.fun-note__art img { width: 100%; height: auto; mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 85%, transparent); mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 85%, transparent); }
@media (max-width: 1000px) {
  .fun-diff__grid { grid-template-columns: 1fr; }
  .fun-note { max-width: 360px; justify-self: center; margin-top: 1rem; }
}
@media (max-width: 760px) {
  .fun-diff__cols { grid-template-columns: 1fr; row-gap: 2rem; }
  .fun-feature { padding-inline: 0 !important; border-left: 0 !important; }
  .fun-diff__plane { display: none; }
}

/* ---------- Final CTA: sunrise sky, piper on the right ---------- */
.fun-cta {
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(2rem, 3.2vw, 3.2rem) calc(clamp(2.2rem, 3.6vw, 3.6rem) + var(--wave-h) * .5);
  background:
    radial-gradient(ellipse 22% 40% at 72% 30%, rgb(255 236 196 / .9), transparent 70%),
    radial-gradient(ellipse 60% 40% at 40% 100%, rgb(255 255 255 / .75), transparent 70%),
    linear-gradient(180deg, #bcdcf3 0%, #d8eaf7 45%, #e9eef0 75%, #dfe7ee 100%);
}
.fun-cta::before { /* faint town skyline in the mist */
  content: ""; position: absolute; left: 18%; right: 26%; bottom: calc(var(--wave-h) * .4); height: 46%; z-index: -1; opacity: .5;
  background: url("../assets/img/shared/deco-skyline-800.webp") center bottom / contain no-repeat;
}
.fun-cta__media { position: absolute; top: 0; right: 0; bottom: 0; width: 30%; z-index: 0; }
.fun-cta__media img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 45%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%); mask-image: linear-gradient(90deg, transparent 0, #000 30%); }
.fun-cta__thistle { bottom: 0; width: clamp(60px, 6vw, 100px); }
.fun-cta__inner { position: relative; z-index: 1; }
.fun-cta .eyebrow { letter-spacing: .3em; margin-bottom: .4rem; }
.fun-cta .h-serif { font-size: clamp(1.7rem, .6rem + 2.65vw, 3.1rem); line-height: 1.08; letter-spacing: -.02em; max-width: 22em; margin-bottom: clamp(1rem, 1.6vw, 1.6rem); text-shadow: 0 0 18px rgb(255 255 255 / .7); }
.fun-cta .btn-row .btn { min-width: clamp(220px, 23vw, 350px); }
.fun-cta__note { position: absolute; left: 64%; bottom: calc(var(--wave-h) * .5 + clamp(.8rem, 1.6vw, 1.6rem)); --tilt: -11deg; font-size: clamp(1.2rem, .6rem + 1.5vw, 2.2rem); z-index: 2; }
@media (max-width: 900px) {
  .fun-cta { display: flex; flex-direction: column; padding-bottom: 0; }
  .fun-cta__media { position: relative; width: 100%; height: clamp(200px, 50vw, 320px); order: 2; margin-top: 1.4rem; }
  .fun-cta__media img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25%); mask-image: linear-gradient(180deg, transparent 0, #000 25%); }
  .fun-cta__note { left: auto; right: 4%; bottom: 40%; }
  .fun-cta .btn-row .btn { min-width: 0; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .hero--fun { --copy-w: 62%; --media-w: 44%; }
  .hero--fun .display { font-size: clamp(2.8rem, .6rem + 5.6vw, 5rem); }
  .fun-rep__head { padding-inline: 2rem; }
  .fun-rep__note { position: static; display: inline-block; margin-top: .6rem; transform-origin: center; }
}
@media (min-width: 1100px) { #intro-title { white-space: nowrap; font-size: clamp(2.2rem, .4rem + 3.2vw, 3.9rem); } }