/* Design 01 pattern-page styles (single-service / occasion / location / pricing).
   Assembled from the proven services.css geometry + contact.css form section. */

.sec-header { --h: 706px; background: rgba(120,120,120,1); }
.sec-header::before { content: ""; position: absolute; inset: 0; background: url("../images/booth-header-gold.webp") center / cover no-repeat fixed; opacity: 0.55; }
.z-header-1 { left: 203px; top: 227px; width: 794px; color: rgba(247,248,245,1); text-align: center; }
.z-header-0 { left: 203px; top: 275px; width: 794px; color: rgba(247,248,245,1); font-size: 70px; text-align: center; }
.sec-intro { --h: 728px; background: rgba(238,242,244,1); }
.z-intro-11 { left: 71px; top: 103px; width: 317px; }
.z-intro-9 { left: 454px; top: 107px; width: 676px; }
.z-intro-10 { left: 71px; top: 235px; width: 304px; height: 388px; object-fit: cover; }
.z-intro-7 { left: 492px; top: 304px; width: 638px; }
.z-intro-6 { left: 492px; top: 337px; width: 638px; }
.z-intro-4 { left: 492px; top: 421px; width: 638px; }
.z-intro-3 { left: 492px; top: 454px; width: 638px; }
.z-intro-1 { left: 492px; top: 538px; width: 638px; }
.z-intro-0 { left: 492px; top: 571px; width: 638px; }
.sec-services { --h: 1991px; background: rgba(238,242,244,1); }
.z-services-0 { position: absolute; left: 71px; top: 0px; width: 1058px; height: 1884px; }
.z-services-8 { left: 700px; top: 88px; width: 354px; height: 487px; }
.z-services-10 { left: 146px; top: 124px; width: 478px; }
.z-services-9 { left: 146px; top: 192px; width: 478px; }
.z-services-9 p + p { margin-top: 27px; }
.z-services-6 { left: 146px; top: 646px; width: 354px; height: 487px; }
.z-services-7 { left: 576px; top: 710px; width: 478px; }
.z-services-5 { left: 576px; top: 778px; width: 478px; }
.z-services-5 p + p { margin-top: 27px; }
.z-services-2 { left: 700px; top: 1211px; width: 354px; height: 487px; }
.z-services-4 { left: 146px; top: 1271px; width: 478px; }
.z-services-3 { left: 146px; top: 1339px; width: 478px; }
.z-services-3 p + p { margin-top: 27px; }
.z-services-1 { left: 468px; top: 1754px; width: 264px; height: 50px; }
.sec-testimonial { --h: 509px; background: rgba(215,228,224,1); }
.z-testimonial-2 { left: 180px; top: 123px; width: 840px; text-align: center; }
.z-testimonial-1 { left: 180px; top: 298px; width: 840px; text-align: center; }
.z-testimonial-0 { left: 180px; top: 367px; width: 840px; font-size: 12px; text-align: center; }
.sec-process { --h: 893px; background: rgba(247,248,245,1); }
.z-process-0 { left: 775px; top: 0px; width: 425px; height: 893px; }
.z-process-13 { left: 76px; top: 111px; width: 586px; }
.z-process-12 { left: 76px; top: 165px; width: 586px; font-size: 35px; }
.z-process-11 { left: 76px; top: 213px; width: 586px; }
.z-process-10 { left: 76px; top: 294px; width: 586px; }
.z-process-9 { left: 76px; top: 327px; width: 586px; font-size: 35px; }
.z-process-8 { left: 76px; top: 375px; width: 586px; }
.z-process-7 { left: 76px; top: 456px; width: 586px; }
.z-process-6 { left: 76px; top: 490px; width: 586px; font-size: 35px; }
.z-process-5 { left: 76px; top: 538px; width: 586px; }
.z-process-4 { left: 76px; top: 619px; width: 586px; }
.z-process-3 { left: 76px; top: 652px; width: 586px; font-size: 35px; }
.z-process-2 { left: 76px; top: 700px; width: 586px; }
.z-process-1 { left: 76px; top: 781px; width: 586px; }
.sec-faq { --h: 758px; background: rgba(247,248,245,1); }
.z-faq-2 { left: 141px; top: 103px; width: 386px; height: 553px; }
.z-faq-1 { left: 596px; top: 166px; width: 514px; text-align: left; }
.z-faq-3 { left: -126px; top: 215px; width: 207px; height: 329px; }
.sec-call-to-action { --h: 772px; background: rgba(250,240,205,1); }
.z-call-to-action-1 { left: 662px; top: 104px; width: 382px; height: 564px; }
.z-call-to-action-0 { left: 1119px; top: 177px; width: 192px; height: 265px; }
.z-call-to-action-4 { left: 156px; top: 249px; width: 455px; }
.z-call-to-action-5 { left: -93px; top: 348px; width: 175px; height: 253px; }
.z-call-to-action-3 { left: 156px; top: 373px; width: 455px; text-align: justify; }
.z-call-to-action-2 { left: 156px; top: 474px; width: 195px; height: 50px; }


/* wired form section (from contact.css) */
.sec-contact-form { --h: 980px; background: rgba(247,248,245,1); }
.cform { width: 476px; }
.cf-in.cf-select { color: var(--slate); background: transparent; }
.cf-in, .cf-ta { display: block; width: 100%; border: 0; border-bottom: 1px solid var(--slate);
  background: transparent; font-family: var(--font-body); font-size: 16px; color: var(--slate);
  padding: 4px 0 8px; outline: none; }
.cf-in { height: 32px; margin-bottom: 25px; }
.cf-ta { height: 112px; resize: none; margin-bottom: 24px; }
.cf-in::placeholder, .cf-ta::placeholder { color: var(--slate); opacity: .75; }
.cf-send { position: static; display: inline-flex; width: 122px; height: 50px; }
.z-contact-form-1 { position: absolute; left: 117px; top: 107px; width: 423px; height: 641px; }
.z-contact-form-form-10 { left: 630px; top: 139px; width: 485px; text-align: left; }
.z-contact-form-2 { left: -231px; top: 184px; width: 290px; height: 487px; }
.z-contact-form-form-9 { left: 630px; top: 206px; width: 485px; }

/* ================= MOBILE (≤900px) — additive; desktop untouched. ================= */
@media (max-width: 900px) {

  /* header banner: pin to viewport on mobile like desktop */
  .sec-header { clip-path: inset(0); }
  .sec-header::before { position: fixed; background-attachment: scroll; }
  .sec-header .cv { display: flex; flex-direction: column; text-align: center; padding: 110px 22px; }
  .sec-header .z-header-0 { margin-top: 14px; font-size: clamp(36px, 9.5vw, 46px); }

  /* why book a real booth */
  .sec-intro .cv { display: flex; flex-direction: column; padding: 56px 22px; }
  .sec-intro .z-intro-9 { margin-top: 14px; }
  .sec-intro .z-intro-10 { margin-top: 26px; }
  .sec-intro .z-intro-7, .sec-intro .z-intro-4, .sec-intro .z-intro-1 { margin-top: 26px; }
  .sec-intro .z-intro-6, .sec-intro .z-intro-3, .sec-intro .z-intro-0 { margin-top: 6px; }

  /* three long-form service blocks */
  .sec-services .cv { display: flex; flex-direction: column; padding: 56px 22px; }
  .sec-services .z-services-0 { display: none; }
  .sec-services .z-services-10 { order: 1; }
  .sec-services .z-services-8  { order: 2; margin-top: 20px; height: 380px; }
  .sec-services .z-services-9  { order: 3; margin-top: 20px; }
  .sec-services .z-services-7  { order: 4; margin-top: 46px; }
  .sec-services .z-services-6  { order: 5; margin-top: 20px; height: 380px; }
  .sec-services .z-services-5  { order: 6; margin-top: 20px; }
  .sec-services .z-services-4  { order: 7; margin-top: 46px; }
  .sec-services .z-services-2  { order: 8; margin-top: 20px; height: 380px; }
  .sec-services .z-services-3  { order: 9; margin-top: 20px; }
  .sec-services .z-services-1  { order: 10; margin-top: 34px; }

  /* testimonial */
  .sec-testimonial .cv { display: flex; flex-direction: column; text-align: center; padding: 64px 22px; }
  .sec-testimonial .z-testimonial-1 { margin-top: 22px; }
  .sec-testimonial .z-testimonial-0 { margin-top: 18px; }

  /* process: the four steps, photo last */
  .sec-process .cv { display: flex; flex-direction: column; padding: 56px 22px; }
  .sec-process .z-process-0 { order: 1; margin-top: 34px; height: 320px; }
  .sec-process .z-process-12, .sec-process .z-process-9,
  .sec-process .z-process-6, .sec-process .z-process-3 { margin-top: 24px; font-size: 28px; }
  .sec-process .z-process-11, .sec-process .z-process-8,
  .sec-process .z-process-5, .sec-process .z-process-2 { margin-top: 8px; }
  .sec-process .rule { margin-top: 24px; }

  /* faq */
  .sec-faq .cv { display: flex; flex-direction: column; padding: 56px 22px; }
  .sec-faq .z-faq-1 { order: 1; font-size: clamp(34px, 9.5vw, 44px); }
  .sec-faq .faq-list { order: 2; margin-top: 24px; }
  .sec-faq .z-faq-2 { order: 3; margin-top: 34px; height: 320px; }
  .sec-faq .z-faq-3 { display: none; }

  /* call to action */
  .sec-call-to-action .cv { display: flex; flex-direction: column; padding: 56px 22px; }
  .sec-call-to-action .z-call-to-action-4 { order: 1; }
  .sec-call-to-action .z-call-to-action-3 { order: 2; margin-top: 16px; text-align: left; }
  .sec-call-to-action .z-call-to-action-2 { order: 3; margin-top: 26px; }
  .sec-call-to-action .z-call-to-action-1 { order: 4; margin-top: 34px; height: 400px; }
  .sec-call-to-action .z-call-to-action-0, .sec-call-to-action .z-call-to-action-5 { display: none; }

  .sec-contact-form .cv { display: flex; flex-direction: column; padding: 56px 22px; }
  .sec-contact-form .z-contact-form-form-10 { order: 1; }
  .sec-contact-form .z-contact-form-form-9 { order: 2; margin-top: 16px; }
  /* position:relative: the .gallery-slide children are absolute and must
     resolve against this frame, not the whole .cv */
  .sec-contact-form .z-contact-form-1 { order: 3; position: relative; margin-top: 28px; height: min(120vw, 520px); }
  .sec-contact-form .cform { order: 4; margin-top: 32px; }
  .sec-contact-form .z-contact-form-2 { display: none; }

}

/* ============ CONTACT FORM: DESKTOP FLOW (2026-08-13) ============
   The form section flows on desktop so the portal form editor can add,
   remove and reorder questions (the pinned .cform above was the one rule
   locking the editor to reword-only). Same flex + order mechanism as the
   mobile layer; margins reproduce the pinned geometry exactly (measured
   live: heading 139/h60, paragraph 206/h81, form 300/h528, section 980).
   Decor (.z-contact-form-1 gallery, .z-contact-form-2 photo) stays pinned;
   min-height keeps it from ever clipping if the form shrinks. */
@media (min-width: 901px) {
  .sec-contact-form, .sec-contact-form .cv { height: auto; min-height: 980px; }
  .sec-contact-form .cv { display: flex; flex-direction: column; align-items: flex-start; }
  .sec-contact-form .z-contact-form-form-10, .sec-contact-form .z-contact-form-form-9,
  .sec-contact-form .cform { position: static; margin-left: 630px; }
  .sec-contact-form .z-contact-form-form-10 { order: 1; margin-top: 139px; }
  .sec-contact-form .z-contact-form-form-9 { order: 2; margin-top: 7px; }
  .sec-contact-form .cform { order: 3; margin-top: 13px; margin-bottom: 152px; }
}