/* Design 02 pattern-page styles (single-service / occasion / location / pricing).
   Assembled from the proven services.css geometry + contact.css form section.
   The .pat hero variant sizes the h1 for multi-word keyword headlines
   (the donor heroes are single giant words). */

.sec-hero { --h: 800px; background: rgba(19,19,19,1); }
.sec-hero::before { content: ""; position: absolute; inset: 0; background: url("../images/hero-bg.jpg") center / cover no-repeat fixed; opacity: 0.7; }
.z-hero_0 { left: 353px; top: 517px; width: 495px; color: rgba(245,245,245,1); text-align: center; }
.z-hero_1 { left: -121px; top: 286px; width: 1442px; color: rgba(245,245,245,1); font-size: 160px; text-align: center; white-space: nowrap; }
.z-hero_2 { left: 254px; top: 217px; width: 693px; color: rgba(245,245,245,1); text-transform: none; line-height: 1.4; letter-spacing: 0em; font-size: 22px; text-align: center; font-family: 'Poppins'; font-weight: 300; font-style: normal; white-space: nowrap; }
.sec-about { --h: 1140px; background: rgba(247,247,247,1); }
.z-about_0 { left: 680px; top: 370px; width: 461px; height: 632px; }
.z-about_1 { left: 61px; top: 376px; width: 477px; color: rgba(22,22,22,1); text-transform: none; line-height: 1.1; letter-spacing: 0em; font-size: 80px; text-align: left; font-family: 'Nyght Serif Light'; font-weight: 400; font-style: normal; }
.z-about_2 { left: 61px; top: 745px; width: 472px; }
.z-about_3 { left: 61px; top: 611px; width: 503px; color: rgba(22,22,22,1); text-transform: none; line-height: 1.4; letter-spacing: 0em; font-size: 22px; text-align: left; font-family: 'Poppins'; font-weight: 300; font-style: normal; }
.z-about_4 { left: 61px; top: 948px; width: 180px; height: 49px; }
.z-about_5 { left: 808px; top: 130px; width: 333px; line-height: 1.2; letter-spacing: 0em; font-size: 40px; text-align: center; font-family: 'Nyght Serif Light'; font-weight: 400; font-style: normal; }
.z-about_6 { left: 439px; top: 130px; width: 333px; line-height: 1.2; letter-spacing: 0em; font-size: 40px; text-align: center; font-family: 'Nyght Serif Light'; font-weight: 400; font-style: normal; }
.z-about_7 { left: 60px; top: 130px; width: 333px; line-height: 1.2; font-size: 40px; text-align: center; font-family: 'Nyght Serif Light'; font-weight: 400; font-style: normal; }
.sec-content { --h: 910px; background: #282828; }
.z-content_0 { left: 66px; top: 140px; width: 464px; height: 627px; }
.z-content_1 { left: 601px; top: 500px; width: 533px; color: rgba(245,245,245,1); }
.z-content_2 { left: 601px; top: 140px; width: 548px; color: rgba(245,245,245,1); line-height: 1.2; font-size: 50px; }
.sec-step-1 { --h: 1000px; background: rgba(247,247,247,1); position: sticky; top: 0px; }
.z-step-1_0 { left: 60px; top: 440px; width: 1080px; height: 560px; }
.z-step-1_1 { left: 809px; top: 141px; width: 331px; line-height: 1.4; text-align: right; }
.z-step-1_2 { left: 60px; top: 226px; width: 682px; color: rgba(22,22,22,1); }
.z-step-1_3 { left: 60px; top: 85px; width: 1080px; height: 1px; background: currentColor; opacity: .35; }
.z-step-1_4 { left: 230px; top: 26px; width: 910px; text-align: right; }
.z-step-1_5 { left: 60px; top: 26px; width: 170px; color: rgba(22,22,22,1); font-family: 'Nyght Serif Light Italic'; font-weight: 400; font-style: normal; white-space: nowrap; }
.z-step-1_6 { left: 60px; top: 132px; width: 669px; color: rgba(22,22,22,1); text-transform: none; line-height: 1.1; letter-spacing: 0em; font-size: 50px; text-align: left; font-family: 'Nyght Serif Light'; font-weight: 400; font-style: normal; white-space: nowrap; }
.z-step-1_7 { left: 960px; top: 333px; width: 180px; height: 48px; }
.sec-step-2 { --h: 1000px; background: rgba(247,247,247,1); position: sticky; top: 100px; }
.z-step-2_0 { left: 60px; top: 440px; width: 1080px; height: 560px; }
.z-step-2_1 { left: 809px; top: 141px; width: 331px; line-height: 1.4; letter-spacing: 0em; font-size: 22px; text-align: right; }
.z-step-2_2 { left: 60px; top: 85px; width: 1080px; height: 1px; background: currentColor; opacity: .35; }
.z-step-2_3 { left: 230px; top: 26px; width: 910px; text-align: right; }
.z-step-2_4 { left: 60px; top: 26px; width: 170px; font-family: 'Nyght Serif Light Italic'; font-weight: 400; font-style: normal; white-space: nowrap; }
.z-step-2_5 { left: 960px; top: 333px; width: 180px; height: 48px; }
.z-step-2_6 { left: 60px; top: 226px; width: 682px; color: rgba(22,22,22,1); }
.z-step-2_7 { left: 60px; top: 132px; width: 669px; color: rgba(22,22,22,1); text-transform: none; line-height: 1.1; letter-spacing: 0em; font-size: 50px; text-align: left; font-family: 'Nyght Serif Light'; font-weight: 400; font-style: normal; white-space: nowrap; }
.sec-step-3 { --h: 1000px; background: rgba(247,247,247,1); position: sticky; top: 200px; }
.z-step-3_0 { left: 60px; top: 440px; width: 1080px; height: 560px; }
.z-step-3_1 { left: 809px; top: 141px; width: 331px; line-height: 1.4; letter-spacing: 0em; font-size: 22px; text-align: right; }
.z-step-3_2 { left: 60px; top: 85px; width: 1080px; height: 1px; background: currentColor; opacity: .35; }
.z-step-3_3 { left: 230px; top: 26px; width: 910px; text-align: right; white-space: nowrap; }
.z-step-3_4 { left: 60px; top: 26px; width: 170px; font-family: 'Nyght Serif Light Italic'; font-weight: 400; font-style: normal; white-space: nowrap; }
.z-step-3_5 { left: 960px; top: 333px; width: 180px; height: 48px; }
.z-step-3_6 { left: 60px; top: 226px; width: 682px; color: rgba(22,22,22,1); }
.z-step-3_7 { left: 60px; top: 132px; width: 669px; color: rgba(22,22,22,1); text-transform: none; line-height: 1.1; letter-spacing: 0em; font-size: 50px; text-align: left; font-family: 'Nyght Serif Light'; font-weight: 400; font-style: normal; white-space: nowrap; }
.sec-step-4 { --h: 1000px; background: rgba(247,247,247,1); position: sticky; top: 300px; }
.z-step-4_0 { left: 60px; top: 441px; width: 1080px; height: 560px; }
.z-step-4_1 { left: 809px; top: 141px; width: 331px; line-height: 1.4; letter-spacing: 0em; font-size: 22px; text-align: right; }
.z-step-4_2 { left: 60px; top: 85px; width: 1080px; height: 1px; background: currentColor; opacity: .35; }
.z-step-4_3 { left: 230px; top: 28px; width: 910px; text-align: right; white-space: nowrap; }
.z-step-4_4 { left: 60px; top: 28px; width: 170px; font-family: 'Nyght Serif Light Italic'; font-weight: 400; font-style: normal; white-space: nowrap; }
.z-step-4_5 { left: 960px; top: 333px; width: 180px; height: 48px; }
.z-step-4_6 { left: 60px; top: 226px; width: 682px; color: rgba(22,22,22,1); }
.z-step-4_7 { left: 60px; top: 132px; width: 669px; color: rgba(22,22,22,1); text-transform: none; line-height: 1.1; letter-spacing: 0em; font-size: 50px; text-align: left; font-family: 'Nyght Serif Light'; font-weight: 400; font-style: normal; white-space: nowrap; }
.sec-testimonial { --h: 774px; background: #E7E7E7; }
.z-testimonial_0 { left: 186px; top: 192px; width: 830px; color: rgba(22,22,22,1); line-height: 1.2; font-size: 50px; text-align: center; font-family: 'Nyght Serif Light Italic'; font-weight: 400; font-style: normal; }
.z-testimonial_1 { left: 60px; top: 112px; width: 1080px; color: rgba(22,22,22,1); font-size: 22px; text-align: center; white-space: nowrap; }
.z-testimonial_3 { left: 509px; top: 629px; width: 183px; color: rgba(22,22,22,1); line-height: 1.4; font-size: 25px; text-align: center; font-family: 'Nyght Serif Light Italic'; font-weight: 400; font-style: normal; white-space: nowrap; }
.sec-logo-marquee { --h: 200px; background: rgba(247,247,247,1); }
.logo-marquee { left: -60px; top: 52px; width: 1320px; height: 114px; }
.sec-faq { --h: 1308px; background: #1F1F1F; }
.z-faq_0 { left: 720px; top: 972px; width: 420px; color: rgba(245,245,245,1); text-transform: none; font-size: 40px; font-family: 'Nyght Serif Light Italic'; font-weight: 400; font-style: normal; }
.z-faq_1 { left: 720px; top: 341px; width: 420px; height: 571px; }
.z-faq_2 { left: 171px; top: 1064px; width: 419px; color: rgba(245,245,245,1); }
.z-faq_3 { left: 171px; top: 972px; width: 389px; color: rgba(245,245,245,1); font-size: 28px; }
.z-faq_4 { left: 60px; top: 971px; width: 62px; color: rgba(245,245,245,1); line-height: 1.4; font-size: 26px; font-family: 'Nyght Serif Light Italic'; font-weight: 400; font-style: normal; white-space: nowrap; }
.z-faq_5 { left: 171px; top: 752px; width: 419px; color: rgba(245,245,245,1); }
.z-faq_6 { left: 171px; top: 659px; width: 389px; color: rgba(245,245,245,1); font-size: 28px; }
.z-faq_7 { left: 60px; top: 659px; width: 69px; color: rgba(245,245,245,1); line-height: 1.4; font-size: 26px; font-family: 'Nyght Serif Light Italic'; font-weight: 400; font-style: normal; white-space: nowrap; }
.z-faq_8 { left: 171px; top: 439px; width: 419px; color: rgba(245,245,245,1); }
.z-faq_9 { left: 171px; top: 341px; width: 389px; color: rgba(245,245,245,1); font-size: 28px; }
.z-faq_10 { left: 60px; top: 341px; width: 62px; color: rgba(245,245,245,1); line-height: 1.4; font-size: 26px; font-family: 'Nyght Serif Light Italic'; font-weight: 400; font-style: normal; white-space: nowrap; }
.z-faq_11 { left: 60px; top: 125px; width: 1060px; color: rgba(245,245,245,1); text-transform: capitalize; line-height: 1.2; letter-spacing: 0em; font-size: 80px; text-align: left; font-family: 'Nyght Serif Light'; font-weight: 400; font-style: normal; white-space: nowrap; }
.sec-call-to-action { --h: 949px; background: rgba(19,19,19,1); }
.sec-call-to-action::before { content: ""; position: absolute; inset: 0; background: url("../images/cta-bg.jpg") center / cover no-repeat fixed; opacity: 0.7; }
.z-parallax-text_0 { left: 84px; top: 226px; width: 1033px; color: rgba(245,245,245,1); text-transform: uppercase; line-height: 1.1; font-size: 100px; text-align: center; white-space: nowrap; will-change: transform; }
.z-parallax-text_1 { left: 250px; top: 136px; width: 700px; color: rgba(245,245,245,1); text-transform: none; line-height: 1.4; letter-spacing: 0em; font-size: 22px; text-align: center; font-family: 'Poppins'; font-weight: 300; font-style: normal; white-space: nowrap; }
.z-parallax-text_2 { left: 510px; top: 771px; width: 180px; height: 48px; }
.z-parallax-text_3 { left: 941px; top: 367px; width: 339px; color: rgba(245,245,245,1); font-size: 32px; font-family: 'Nyght Serif Light Italic'; font-weight: 400; font-style: normal; white-space: nowrap; }
.z-parallax-text_4 { left: -79px; top: 367px; width: 339px; color: rgba(245,245,245,1); font-size: 32px; text-align: right; font-family: 'Nyght Serif Light Italic'; font-weight: 400; font-style: normal; white-space: nowrap; }
.z-parallax-text_5 { left: 221px; top: 611px; width: 759px; color: rgba(245,245,245,1); text-transform: none; line-height: 1.6; letter-spacing: 0.02em; font-size: 22px; text-align: center; font-family: 'Poppins'; font-weight: 300; font-style: normal; }


/* wired form section (from contact.css) */
.sec-contact-form { --h: 1080px; background: rgba(247,247,247,1); }
.z-contact-form_1 { left: 60px; top: 589px; width: 510px; line-height: 1.4; font-size: 15px; white-space: nowrap; }
.z-contact-form_2 { left: 60px; top: 558px; width: 510px; font-size: 17px; font-family: 'Poppins'; font-weight: 400; font-style: normal; white-space: nowrap; }
.z-contact-form_3 { left: 60px; top: 188px; width: 462px; line-height: 1.2; font-size: 50px; }
.z-contact-form_4 { left: 60px; top: 114px; width: 510px; text-align: left; white-space: nowrap; }

/* pattern hero variant: keyword h1 wraps at display size. Desktop-scoped so
   the higher specificity cannot outrank the mobile reflow blanket. */
.sec-hero.pat { --h: 640px; }
.sec-hero.pat .z-hero_1 { white-space: normal; font-family: 'Nyght Serif Light'; }
@media (min-width: 901px) {
  .sec-hero.pat .z-hero_1 { font-size: 84px; line-height: 1.12;
    left: 100px; width: 1000px; top: 210px; }
  .sec-hero.pat .z-hero_0 { top: 465px; }
  .sec-hero.pat .z-hero_2 { top: 150px; }
}

/* MOBILE (additive layer; see style.css) */
@media (max-width: 900px) {

  .sec-hero { clip-path: inset(0); }
  .sec-hero::before { position: fixed; background-attachment: scroll; }
  .sec-hero .cv { display: flex; flex-direction: column; justify-content: center;
                  min-height: 78svh; padding: 110px 22px 60px; text-align: center; }
  .sec-hero .z-hero_2 { order: 1; font-size: 17px; }
  .sec-hero .z-hero_1 { order: 2; font-size: clamp(46px, 14vw, 58px); margin-top: 10px; }
  .sec-hero .z-hero_0 { order: 3; margin-top: 22px; }

  .sec-about .cv { display: flex; flex-direction: column; padding: 64px 22px; }
  .sec-about .z-about_1 { order: 1; font-size: clamp(38px, 11vw, 48px); }
  .sec-about .z-about_3 { order: 2; font-size: 18px; margin-top: 20px; }
  .sec-about .z-about_2 { order: 3; margin-top: 16px; }
  .sec-about .z-about_4 { order: 4; margin-top: 26px; }
  .sec-about .z-about_7 { order: 5; font-size: 24px; margin-top: 40px; text-align: left; }
  .sec-about .z-about_6 { order: 6; font-size: 24px; margin-top: 18px; text-align: left; }
  .sec-about .z-about_5 { order: 7; font-size: 24px; margin-top: 18px; text-align: left; }
  .sec-about .z-about_0 { order: 8; position: relative; width: 100%; height: auto;
                          aspect-ratio: 3 / 4; margin-top: 36px; }

  .sec-content .cv { display: flex; flex-direction: column; padding: 64px 22px; }
  .sec-content .z-content_2 { order: 1; font-size: 28px; }
  .sec-content .z-content_1 { order: 2; margin-top: 20px; }
  .sec-content .z-content_0 { order: 3; margin-top: 30px; }

  /* sticky package stack → plain stacked sections */
  .stack .sec { position: static; }
  .stack .cv { display: flex; flex-direction: column; padding: 56px 22px; }
  .stack .cv .ph { height: 260px; object-fit: cover; }
  .sec-step-1 .z-step-1_5 { order: 1; font-size: 18px; }
  .sec-step-1 .z-step-1_6 { order: 2; font-size: 28px; margin-top: 10px; }
  .sec-step-1 .z-step-1_2 { order: 3; margin-top: 14px; }
  .sec-step-1 .z-step-1_1 { order: 4; text-align: left; font-size: 17px; margin-top: 18px; }
  .sec-step-1 .z-step-1_7 { order: 5; margin-top: 24px; align-self: flex-start; }
  .sec-step-1 .z-step-1_0 { order: 6; margin-top: 30px; }
  .sec-step-1 .z-step-1_3, .sec-step-1 .z-step-1_4 { display: none; }
  .sec-step-2 .z-step-2_4 { order: 1; font-size: 18px; }
  .sec-step-2 .z-step-2_7 { order: 2; font-size: 28px; margin-top: 10px; }
  .sec-step-2 .z-step-2_6 { order: 3; margin-top: 14px; }
  .sec-step-2 .z-step-2_1 { order: 4; text-align: left; font-size: 17px; margin-top: 18px; }
  .sec-step-2 .z-step-2_5 { order: 5; margin-top: 24px; align-self: flex-start; }
  .sec-step-2 .z-step-2_0 { order: 6; margin-top: 30px; }
  .sec-step-2 .z-step-2_2, .sec-step-2 .z-step-2_3 { display: none; }
  .sec-step-3 .z-step-3_4 { order: 1; font-size: 18px; }
  .sec-step-3 .z-step-3_7 { order: 2; font-size: 28px; margin-top: 10px; }
  .sec-step-3 .z-step-3_6 { order: 3; margin-top: 14px; }
  .sec-step-3 .z-step-3_1 { order: 4; text-align: left; font-size: 17px; margin-top: 18px; }
  .sec-step-3 .z-step-3_5 { order: 5; margin-top: 24px; align-self: flex-start; }
  .sec-step-3 .z-step-3_0 { order: 6; margin-top: 30px; }
  .sec-step-3 .z-step-3_2, .sec-step-3 .z-step-3_3 { display: none; }
  .sec-step-4 .z-step-4_4 { order: 1; font-size: 18px; }
  .sec-step-4 .z-step-4_7 { order: 2; font-size: 28px; margin-top: 10px; }
  .sec-step-4 .z-step-4_6 { order: 3; margin-top: 14px; }
  .sec-step-4 .z-step-4_1 { order: 4; text-align: left; font-size: 17px; margin-top: 18px; }
  .sec-step-4 .z-step-4_5 { order: 5; margin-top: 24px; align-self: flex-start; }
  .sec-step-4 .z-step-4_0 { order: 6; margin-top: 30px; }
  .sec-step-4 .z-step-4_2, .sec-step-4 .z-step-4_3 { display: none; }

  .sec-testimonial .cv { display: flex; flex-direction: column; padding: 60px 22px; text-align: center; }
  .sec-testimonial .z-testimonial_1 { order: 1; font-size: 17px; }
  .sec-testimonial .z-testimonial_0 { order: 2; font-size: 24px; margin-top: 22px; }
  .sec-testimonial .z-testimonial_3 { order: 3; font-size: 19px; margin-top: 22px; }

  .sec-logo-marquee .cv { padding: 26px 0; }
  .sec-logo-marquee .logo-marquee { width: 100%; height: 70px; }

  .sec-faq .cv { display: flex; flex-direction: column; padding: 60px 22px; }
  .sec-faq .z-faq_11 { order: 1; font-size: clamp(32px, 9.5vw, 42px); }
  .sec-faq .z-faq_10 { order: 2; font-size: 17px; margin-top: 30px; }
  .sec-faq .z-faq_9 { order: 3; font-size: 22px; margin-top: 8px; }
  .sec-faq .z-faq_8 { order: 4; margin-top: 12px; }
  .sec-faq .z-faq_7 { order: 5; font-size: 17px; margin-top: 30px; }
  .sec-faq .z-faq_6 { order: 6; font-size: 22px; margin-top: 8px; }
  .sec-faq .z-faq_5 { order: 7; margin-top: 12px; }
  .sec-faq .z-faq_4 { order: 8; font-size: 17px; margin-top: 30px; }
  .sec-faq .z-faq_3 { order: 9; font-size: 22px; margin-top: 8px; }
  .sec-faq .z-faq_2 { order: 10; margin-top: 12px; }
  .sec-faq .z-faq_1 { order: 11; margin-top: 36px; }
  .sec-faq .z-faq_0 { order: 12; font-size: 24px; margin-top: 20px; }

  .sec-call-to-action { clip-path: inset(0); }
  .sec-call-to-action::before { position: fixed; background-attachment: scroll; }
  .sec-call-to-action .cv { display: flex; flex-direction: column; padding: 80px 22px; text-align: center; }
  .sec-call-to-action .px-slide { transform: none !important; will-change: auto; }
  .sec-call-to-action .z-parallax-text_1 { order: 1; font-size: 17px; }
  .sec-call-to-action .z-parallax-text_0 { order: 2; font-size: clamp(30px, 9vw, 40px); margin-top: 18px; }
  .sec-call-to-action .z-parallax-text_3, .sec-call-to-action .z-parallax-text_4 { display: none; }
  .sec-call-to-action .z-parallax-text_5 { order: 3; font-size: 16px; margin-top: 24px; }
  .sec-call-to-action .z-parallax-text_2 { order: 4; margin-top: 28px; }

  .sec-contact-form .cv { display: flex; flex-direction: column; padding: 60px 22px 70px; }
  .sec-contact-form .z-contact-form_4 { order: 1; font-size: 17px; }
  .sec-contact-form .z-contact-form_3 { order: 2; font-size: 28px; margin-top: 14px; }
  .sec-contact-form .z-contact-form_2 { order: 3; font-size: 16px; margin-top: 26px; }
  .sec-contact-form .z-contact-form_1 { order: 4; margin-top: 4px; }
  .sec-contact-form .contact-form { order: 5; margin-top: 34px; }
  .sec-contact-form .cf-view:not([hidden]) { position: static; display: flex;
      flex-direction: column; gap: 20px; }
  .sec-contact-form .field { position: static !important; left: auto !important;
      top: auto !important; width: 100% !important; }
  /* The add-on fieldset carries inline canvas geometry like the fields do, so
     it needs the same neutralising (mirrors css/form.css). Without it the
     fieldset keeps its desktop coordinates on mobile and pushes the contact
     section to 1142px against a 390px screen. */
  .sec-contact-form .addon-picks { position: static !important; left: auto !important;
      top: auto !important; width: 100% !important; }
  .sec-contact-form .cf-form .btn { position: static !important; left: auto !important;
      top: auto !important; width: 100% !important; max-width: 340px; height: 50px;
      margin-top: 8px; align-self: flex-start; }
  .sec-contact-form .cf-success > * { position: static !important; left: auto !important;
      top: auto !important; width: auto !important; }
  .sec-hero.pat .cv { min-height: 58svh; }
  .sec-hero.pat .z-hero_1 { font-size: clamp(32px, 9.5vw, 44px); }
}

/* ======================================================================
   FLOW LAYER (2026-07-18 skeleton rebuild). Shared vocabulary for the
   flowing interior bands the four skeleton pages use between the canvas
   hero and the wired form section. Additive only: index.html never links
   patterns.css, and nothing below touches the canvas classes above. */

/* pattern hero add-ons: CTA pair + optional note line under the lede.
   Markup: <a class="btn z-hero_3">, <a class="btn btn-secondary z-hero_4">,
   <p class="t-paragraph z-hero_5"> (note optional per page). */
.sec-hero.pat { --h: 700px; }
.z-hero_3 { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.z-hero_5 { color: rgba(245,245,245,1); font-size: 14px; text-align: center; }
.z-hero_5 a { color: inherit; }
@media (min-width: 901px) {
  .z-hero_3 { left: 415px; top: 556px; width: 182px; height: 48px; }
  .z-hero_4 { left: 619px; top: 556px; width: 166px; height: 48px; }
  .z-hero_5 { left: 300px; top: 638px; width: 600px; }
}

/* bands */
.fl { position: relative; overflow: hidden; --line: rgba(22,22,22,.25); }
.fl-wrap { max-width: 1200px; margin: 0 auto; padding: 96px 60px 104px; }
.fl-cream { background: var(--cream); }
.fl-stone { background: #E7E7E7; }
.fl-dark  { background: #1F1F1F; color: var(--cream-text); --line: rgba(245,245,245,.28); }
.fl-dark2 { background: #282828; color: var(--cream-text); --line: rgba(245,245,245,.28); }

/* type */
.fl-kicker { margin: 0 0 16px; font-family: var(--font-pop); font-weight: 300;
  font-size: 13px; letter-spacing: .24em; text-transform: uppercase; opacity: .8; }
.fl-title { margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 58px; line-height: 1.08; }
.fl-title em { font-family: var(--font-italic); font-style: normal; }
.fl-lede { margin: 22px 0 0; font-family: var(--font-pop); font-weight: 300;
  font-size: 16px; line-height: 1.6; letter-spacing: .02em; max-width: 620px; }
.fl-num { font-family: var(--font-italic); font-size: 22px; white-space: nowrap; }
.fl-note { margin: 44px 0 0; font-family: var(--font-pop); font-weight: 300;
  font-size: 15px; line-height: 1.6; max-width: 640px; }
.fl-note a, .fl-lede a { color: inherit; }
.fl-cta { margin-top: 40px; }

/* reveal on scroll (observer lives in each page's js) */
.fade-in { opacity: 0; transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease; }
.fade-in.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
}

/* review cards */
.rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 54px; }
.rev-card { margin: 0; padding: 32px 30px 28px; border: 1px solid var(--line);
  display: flex; flex-direction: column; }
.rev-stars { font-size: 13px; letter-spacing: .35em; }
.rev-card blockquote { margin: 18px 0 24px; font-family: var(--font-italic);
  font-size: 21px; line-height: 1.4; }
.rev-card figcaption { margin-top: auto; font-family: var(--font-pop);
  font-weight: 300; font-size: 14px; }
.rev-card figcaption span { display: block; opacity: .65; font-size: 12.5px; margin-top: 4px; }

/* numbered editorial FAQ */
.qa-list { margin-top: 52px; }
.qa-item { display: grid; grid-template-columns: 96px 1fr; gap: 0 44px;
  padding: 30px 0; border-top: 1px solid var(--line); }
.qa-item:last-child { border-bottom: 1px solid var(--line); }
.qa-q { margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 27px; line-height: 1.2; }
.qa-a { grid-column: 2; margin: 12px 0 0; font-family: var(--font-pop);
  font-weight: 300; font-size: 15.5px; line-height: 1.6; max-width: 660px; }

/* interactive guide (venue guide / chapter player / timeline walker) */
.gd-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 44px;
  margin-top: 54px; align-items: stretch; }
.gd-list { display: flex; flex-direction: column; }
.gd-item { display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding: 20px 4px; border: 0; border-top: 1px solid var(--line);
  background: none; color: inherit; text-align: left; cursor: pointer;
  font-family: var(--font-pop); font-weight: 300; opacity: .6;
  transition: opacity .3s ease, padding-left .3s ease; }
.gd-item:last-child { border-bottom: 1px solid var(--line); }
.gd-item.is-on { opacity: 1; padding-left: 14px; }
.gd-name { display: block; font-family: var(--font-serif); font-size: 25px; line-height: 1.15; }
.gd-sub { display: block; font-size: 13px; opacity: .7; margin-top: 5px; letter-spacing: .02em; }
.gd-arrow { font-family: var(--font-italic); font-size: 20px; flex: none; }
.gd-stage { position: relative; min-height: 560px; }
.gd-media { position: absolute; inset: 0; overflow: hidden; }
.gd-media img,
.gd-media video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.gd-media img.is-on,
.gd-media video.is-on { opacity: 1; }
.gd-card { position: absolute; left: 32px; right: 32px; bottom: 32px;
  background: var(--cream); color: var(--ink); padding: 26px 28px 28px; }
.fl-cream .gd-card, .fl-stone .gd-card { background: #1F1F1F; color: var(--cream-text); }
.gd-label { margin: 0 0 12px; font-family: var(--font-pop); font-weight: 300;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; opacity: .75; }
.gd-note { display: none; margin: 0 0 0; font-family: var(--font-pop);
  font-weight: 300; font-size: 15px; line-height: 1.55; }
.gd-note.is-on { display: block; }
.gd-card .btn { margin-top: 20px; }

/* card grids (packages, offers, occasion panels, booth options) */
/* Reconciled list: the card count is the client's package count, not the
   demo's. Flex-wrap + justify-content:center keeps a trailing row of 1 or 2
   centred instead of stranded; a full row renders identically to the grid. */
.card-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 26px; margin-top: 54px; }
.card-grid > * { flex: 0 1 calc((100% - 2 * 26px) / 3 - 0.5px); min-width: 240px; }
.card-grid.two > * { flex: 0 1 calc((100% - 26px) / 2 - 0.5px); }
.pcard { position: relative; border: 1px solid var(--line); display: flex;
  flex-direction: column; padding: 0 0 30px; color: inherit; text-decoration: none; }
.pcard-img,
.pcard-video { height: 300px; overflow: hidden; }
.pcard-img img,
.pcard-video video { width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform .7s ease; }
.pcard:hover .pcard-img img,
.pcard:hover .pcard-video video { transform: scale(1.04); }
.pcard-num { margin: 22px 28px 0; font-family: var(--font-italic); font-size: 19px; }
.pcard h3 { margin: 8px 28px 0; font-family: var(--font-serif);
  font-weight: 400; font-size: 29px; line-height: 1.15; }
.pcard-price { margin: 16px 28px 0; font-family: var(--font-serif); font-size: 38px; line-height: 1; }
.pcard-price small { display: block; font-family: var(--font-pop); font-weight: 300;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  opacity: .65; margin-bottom: 8px; }
.pcard p { margin: 14px 28px 0; font-family: var(--font-pop); font-weight: 300;
  font-size: 14.5px; line-height: 1.6; }
.pcard ul { margin: 16px 28px 0; padding: 0; list-style: none;
  font-family: var(--font-pop); font-weight: 300; font-size: 14px; line-height: 1.5; }
.pcard li { padding: 8px 0 0; }
.pcard li::before { content: "·"; margin-right: 10px; }
.pcard .btn { margin: 24px 28px 0; align-self: flex-start; }
.pcard-link { display: inline-block; margin: 20px 28px 0; font-family: var(--font-pop);
  font-weight: 300; font-size: 14px; color: inherit;
  text-decoration: underline; text-underline-offset: 4px; }
.pcard.is-featured { background: #1F1F1F; color: var(--cream-text);
  border-color: #1F1F1F; }
.pcard-pill { position: absolute; top: 18px; left: 18px; z-index: 1;
  background: var(--cream); color: var(--ink); font-family: var(--font-pop);
  font-weight: 300; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; padding: 8px 14px; }

/* count-up stat rows */
.ct-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; margin-top: 48px; }
.ct-row.three { grid-template-columns: repeat(3, 1fr); }
.ct { border-top: 1px solid var(--line); padding-top: 20px; }
.ct b { display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: 62px; line-height: 1; }
.ct span { display: block; margin-top: 12px; font-family: var(--font-pop);
  font-weight: 300; font-size: 12.5px; letter-spacing: .18em;
  text-transform: uppercase; opacity: .75; }

/* three-point rows (what's included foundations, the case for the booth) */
.pt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 54px; }
.pt { border-top: 1px solid var(--line); padding-top: 22px; }
.pt .fl-num { display: block; margin-bottom: 14px; }
.pt h3 { margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 24px; line-height: 1.2; }
.pt p { margin: 12px 0 0; font-family: var(--font-pop); font-weight: 300;
  font-size: 15px; line-height: 1.6; }

/* two-column included list */
.inc-list { list-style: none; margin: 46px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 60px; }
.inc-list li { padding: 22px 0; border-top: 1px solid var(--line); }
.inc-list b { display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: 22px; line-height: 1.2; }
.inc-list span { display: block; margin-top: 8px; font-family: var(--font-pop);
  font-weight: 300; font-size: 14.5px; line-height: 1.55; opacity: .85; }

/* area chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.chip-row span, .chip-row a { font-family: var(--font-pop); font-weight: 300;
  font-size: 14px; padding: 10px 20px; border: 1px solid var(--line);
  border-radius: 999px; color: inherit; text-decoration: none; }

/* flow-layer mobile (additive; the canvas mobile rules above are untouched) */
@media (max-width: 900px) {
  .sec-hero .z-hero_3 { order: 4; margin-top: 28px; }
  .sec-hero .z-hero_4 { order: 5; margin-top: 12px; }
  .sec-hero .z-hero_5 { order: 6; margin-top: 20px; }
  .fl-wrap { padding: 60px 22px 68px; }
  .fl-title { font-size: clamp(34px, 9.5vw, 44px); }
  .rev-grid, .pt-grid { grid-template-columns: 1fr; margin-top: 36px; }
  .card-grid, .card-grid.two { margin-top: 36px; }
  .card-grid > *, .card-grid.two > * { flex: 1 1 100%; }
  .gd-grid { grid-template-columns: 1fr; gap: 26px; margin-top: 36px; }
  .gd-stage { min-height: 480px; }
  .qa-item { grid-template-columns: 1fr; gap: 0; padding: 24px 0; }
  .qa-item .fl-num { margin-bottom: 8px; }
  .qa-q { font-size: 22px; }
  .qa-a { grid-column: 1; }
  .ct-row, .ct-row.three { grid-template-columns: repeat(2, 1fr); margin-top: 34px; }
  .ct b { font-size: 44px; }
  .inc-list { grid-template-columns: 1fr; margin-top: 30px; }
  .pcard-img,
  .pcard-video { height: 240px; }
}

/* Clamp the kit's decorative edge-bleeds (.social-strip filmstrip) so interior
   pages show no horizontal scrollbar. `clip` (not `hidden`) so position:sticky
   descendants keep working. patterns.css is never linked on index. */
html { overflow-x: clip; }

/* ---------- package cards: count-aware layout (see the JS in services.js) ----
   Four or more package cards turn the row into a one-row slider with arrows.
   At three or fewer nothing here applies and the list renders as designed.
   Recovered from live San Diego 2026-07-28; canonical copy in design-01. */
@media (min-width: 901px) {
  .card-grid.is-slider {
    display: flex; justify-content: flex-start; flex-wrap: nowrap;
    /* BOTH axes hidden, NOT auto: the arrows are the only way the rail moves.
       As an auto scroller with x-mandatory snap it captured trackpad gestures,
       and a lone overflow-x forces overflow-y to compute to auto, so the
       hover/pill headroom (padding-top pulled back by margin) left ~26px of
       vertical overflow: the rail latched the wheel and froze PAGE scrolling
       over the whole section (found live on a client build 2026-08-01). hidden blocks
       user scrolling on both axes; the arrows' scrollTo() keeps working. */
    overflow: hidden;
    padding-top: 22px; margin-top: -22px;
  }
  .card-grid.is-slider > article {
    flex: 0 0 calc((100% - 2 * 26px) / 3);
  }
}
.svc-pkg-shell { position: relative; }
.svc-pkg-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: #fff; border: 1px solid rgba(0, 0, 0, .25); color: inherit;
  font-size: 24px; line-height: 1; display: none;
  align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
  transition: background .35s, color .35s, border-color .35s;
}
@media (min-width: 901px) { .svc-pkg-shell .svc-pkg-arrow { display: inline-flex; } }
.svc-pkg-arrow:hover { background: #111; color: #fff; border-color: #111; }
.svc-pkg-arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.svc-pkg-prev { left: -22px; }
.svc-pkg-next { right: -22px; }