/* 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/header-booth-flower-wall.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: 1280px; background: rgba(247,248,245,1); } /* 855 before the optional package/add-on pickers joined the form; 1120 before this client's 7 typed questions */
/* The form block is FLOW on every width (2026-08-13): it was pinned here at
   630/360 inside the fixed 1280px canvas, which made the portal form editor
   refuse structural edits (fixed_layout) because a longer form would have
   clipped at the section edge. Desktop placement now lives in the flow block
   at the end of this file; a longer form grows the section instead. */
.cform { width: 476px; }
.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: 15px; 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; }

/* ---------- inquiry form: OPTIONAL package select + add-on checkbox group ----
   Only present when the client's onboarding asked for them; both are
   RECONCILED from client_packages (src/site_prices.js), so entries appear and
   disappear with the price list. Toned to the kit's underline fields. */
.cf-sel { appearance: none; height: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--slate) 50%),
                    linear-gradient(135deg, var(--slate) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 10px) 50%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  padding-right: 2.2em; border-radius: 0; }
.addon-picks { border: 1px solid rgba(43, 58, 85, .28); padding: 14px 16px 18px;
  margin-bottom: 24px; }
.addon-picks legend { font-family: var(--font-label, var(--font-body));
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate); padding: 0 6px; }
.addon-picks label { display: flex; align-items: flex-start; gap: 9px;
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  color: var(--slate); margin-top: 9px; cursor: pointer; }
.addon-picks input[type="checkbox"] { width: 15px; height: 15px; flex: 0 0 auto;
  margin-top: 2px; accent-color: var(--slate); }
@media (min-width: 620px) {
  .addon-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
  .addon-picks legend { grid-column: 1 / -1; }
}

.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) {
  /* 16px floor: below it iOS Safari zooms the page on focus */
  .cf-in, .cf-ta { font-size: 16px; }

  /* 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 section, desktop: FLOW (2026-08-13) ==========================
   The right column (heading, paragraph, form) now flows with the same flex +
   order trick the mobile layer above uses, margins copied from the canvas
   render (139 / 7 / 100 / 113), so today's rendering is pixel-identical and
   the section GROWS when the client adds questions in the portal editor.
   The gallery and the drape photo stay pinned: they are top-anchored decor,
   and the min-height floor keeps the section from ever shrinking under them
   (gallery bottom 748 + 113 bottom gap). */
@media (min-width: 901px) {
  .sec-contact-form, .sec-contact-form .cv { height: auto; min-height: 861px; }
  .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; width: 485px; }
  .sec-contact-form .z-contact-form-form-9 { order: 2; margin-top: 7px; width: 485px; }
  .sec-contact-form .cform { order: 3; margin-top: 100px; margin-bottom: 113px; width: 476px; }
}