.booking-collage { display:none; }
.form-page {
  padding-top:5rem;
  position:relative;
  min-height:calc(100svh - 6.75rem);
  grid-template-columns:40% 60%;
  overflow:hidden;
  background:var(--brown);
}
.form-intro {
  min-height:calc(100svh - 6.75rem);
  padding:clamp(2.25rem,3.3vw,3.5rem) clamp(2rem,4.5vw,5rem) 17rem;
  justify-content:flex-start;
  z-index:3;
}
.form-intro h1 {
  margin:clamp(3rem,5vw,5rem) 0 1.75rem;
  font-size:clamp(4.3rem,7vw,7rem);
  line-height:.82;
  overflow-wrap:normal;
}
.form-intro>p:last-of-type {
  max-width:28rem;
  font-family:var(--mono);
  font-weight:400;
  font-size:clamp(.78rem,.95vw,.95rem);
  line-height:1.55;
  letter-spacing:.025em;
}
.form-crown {
  position:absolute;
  top:7.5rem;
  right:3%;
  width:clamp(6rem,9vw,9rem);
  opacity:.7;
}
.booking-collage {
  position:absolute;
  left:0;
  bottom:0;
  width:min(100%,38rem);
  height:21rem;
  background:url("assets/booking-collage-reference.png") left bottom/cover no-repeat;
}
.form-panel {
  position:relative;
  z-index:2;
  align-self:center;
  margin:.75rem 2rem .75rem -1.5rem;
  padding:clamp(4.25rem,5.5vw,5.5rem) clamp(3.25rem,5vw,5rem) clamp(3rem,4.5vw,4.5rem);
  background:transparent;
  color:var(--brown);
}
.form-panel::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:-2.5rem -2rem -2.5rem -2.5rem;
  background:url("assets/booking-paper-cutout.png") center/100% 100% no-repeat;
  filter:drop-shadow(-.4rem .7rem .7rem rgb(20 10 5/.25));
}
.form-title { margin-bottom:clamp(2rem,3vw,3rem); }
.form-note {
  position:absolute;
  top:3.25rem;
  right:4rem;
  font:400 clamp(1rem,1.35vw,1.35rem)/1.1 var(--hand);
  text-transform:uppercase;
  transform:rotate(-7deg);
}
.work-form { gap:1.5rem 2.5rem; }
.work-form input,.work-form select { padding:1rem 0 .8rem; }
.work-form textarea { min-height:7rem; }
.form-bottom {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:2rem;
}
.form-submit {
  width:100%;
  padding:1.25rem 1.5rem;
  border:0;
  background:#77785c;
  color:var(--cream);
  text-align:center;
}
.form-bottom p {
  margin:0;
  padding-left:2rem;
  border-left:1px solid rgb(64 47 33/.35);
  font:700 .72rem/1.45 var(--mono);
  letter-spacing:.05em;
  text-transform:uppercase;
}
.booking-footer { background:var(--cream); color:var(--brown); padding-top:max(4rem,8vw); }
.booking-footer::before { content:""; background-image:url("assets/transition-brown-beige.png"); }
.booking-footer>span:last-child { justify-self:end; }

@media(max-width:600px){
  .home-booking .form-panel { scale:1 !important; transform:none !important; }
}
@media(max-width:850px){
  .booking-footer { position:relative; overflow:visible; padding-top:6rem; }
  .booking-footer::before { content:""; display:block; position:absolute; z-index:4; pointer-events:none; top:-1px; left:0; right:0; height:4.5rem; background:url("assets/transition-brown-beige.png") center top/100% 100% no-repeat; }
}

.form-panel { margin:3rem 0 3rem -1.5rem; padding:7.5rem 8rem 6rem clamp(3.25rem,5vw,5rem); isolation:isolate; }
.booking-contact-links { display:flex; flex-direction:column; align-items:flex-start; gap:1.25rem; margin-top:2rem; }
.form-panel::before { inset:0; }
.booking-strip-eye { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1; }
.booking-star { position:absolute; width:12.5%; height:15%; object-fit:contain; right:0; top:0; pointer-events:none; }
.form-note { display:none; }
.form-intro { padding-bottom:4rem; }

@media(max-width:950px){
  .form-page { grid-template-columns:1fr; overflow:visible; }
  .form-intro { min-height:48rem; padding-bottom:18rem; }
  .form-panel { margin:0; padding:6rem var(--gutter); }
  .form-panel::before { inset:0; background-size:cover; }
}
@media(max-width:600px){
  .form-intro h1 { font-size:clamp(3.8rem,19vw,5.5rem); }
  .form-crown { top:8rem; width:5rem; }
  .form-panel { padding:6rem 1.5rem 4rem; }
  .form-note { right:1.5rem; }
  .form-bottom { grid-template-columns:1fr; }
  .form-bottom p { border-left:0; padding-left:0; }
  .booking-footer { grid-template-columns:1fr; }
  .booking-footer>span:last-child { justify-self:start; }
}

/* Use the original paper PNG as an alpha mask. This preserves its exact tear
   shape while preventing the browser from painting/shadowing the pseudo-
   element's rectangular bounds. */
.home-booking .form-panel::before {
  background:url("assets/booking-form-white-torn-rectangle.png") center/100% 100% no-repeat;
  -webkit-mask-image:none;
  mask-image:none;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  filter:drop-shadow(-.4rem .7rem .7rem rgb(20 10 5/.25));
}

/* iPhone form fit and native-control stability. */
@media(max-width:850px){
  .home-booking,.form-page { min-width:0; overflow:hidden; }
  .home-booking .form-intro { min-height:auto; padding-top:5rem; padding-bottom:5rem; }
  .form-panel {
    width:100%;
    min-width:0;
    margin:0;
    padding-left:max(var(--gutter),env(safe-area-inset-left));
    padding-right:max(var(--gutter),env(safe-area-inset-right));
  }
  .work-form,.work-form label,.form-bottom { min-width:0; }
  .work-form input,.work-form select,.work-form textarea { min-width:0; font-size:16px; }
}

@media(max-width:600px){
  .home-booking .form-intro { padding-top:4.5rem; padding-bottom:4.5rem; }
  .home-booking .form-intro h2 { font-size:clamp(3.25rem,18vw,5rem); }
  .form-crown { top:4rem; right:max(1rem,env(safe-area-inset-right)); width:4.5rem; }
  .form-panel {
    padding-top:5rem;
    padding-bottom:4.5rem;
    padding-left:max(1.25rem,env(safe-area-inset-left));
    padding-right:max(1.25rem,env(safe-area-inset-right));
  }
  .work-form { gap:1.35rem; }
  .form-bottom { gap:1.25rem; }
  .form-submit { min-height:3.25rem; }
}

/* Responsive form composition. Tablet keeps the efficient two-column form;
   phone stacks it, while both keep the original torn-paper silhouette. */
@media (min-width:601px) and (max-width:850px) {
  .home-booking {
    display:grid;
    grid-template-columns:1fr;
    overflow:clip;
  }
  .home-booking .form-intro {
    min-height:34rem;
    padding-top:5rem;
    padding-bottom:4rem;
  }
  .home-booking .form-panel {
    width:calc(100% - (var(--gutter) * 2));
    max-width:46rem;
    min-height:42rem;
    margin:0 auto 4rem;
    padding:5.75rem clamp(2.5rem,7vw,4.25rem) 5rem;
  }
  .home-booking .work-form {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:1.4rem 2rem;
  }
  .home-booking .form-wide,
  .home-booking .form-bottom { grid-column:1 / -1; }
  .home-booking .work-form textarea { min-height:9rem; }
  .home-booking .booking-strip-eye { object-fit:fill; }

}

@media (max-width:600px) {
  .home-booking {
    display:block;
    overflow:clip;
  }
  .home-booking .form-intro {
    min-height:32rem;
    padding-bottom:4rem;
  }
  .home-booking .form-panel {
    width:calc(100% - 2rem);
    max-width:26rem;
    min-height:0;
    margin:0 auto 3rem;
    padding:5rem 1.25rem 10rem;
  }
  .home-booking .form-panel::before {
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
  }
  .home-booking .work-form {
    grid-template-columns:minmax(0,1fr);
    gap:1.25rem;
  }
  .home-booking .form-wide,
  .home-booking .form-bottom { grid-column:auto; }
  .home-booking .work-form textarea { min-height:10rem; }
  .home-booking .form-bottom {
    grid-template-columns:1fr;
    gap:1.25rem;
  }
  .home-booking .form-bottom p {
    border-left:0;
    padding-left:0;
  }
  .home-booking .booking-strip-eye { object-fit:fill; }

}

/* Keep form copy and controls optically undistorted when the editor changes
   the paper card's width/height independently. */
@media (min-width:601px) and (max-width:850px) {
  .home-booking .form-panel > form,
  .home-booking .form-panel > .w-form-done,
  .home-booking .form-panel > .w-form-fail {
    transform:scale(.90909,1);
    transform-origin:top left;
    width:110%;
  }
}

/* The layout editor previews an iPhone inside a scaled desktop frame, so its
   intersection observer may never fire for the booking artwork. Keep this
   decorative layer present in both the editor and the live page. */
.home-booking .booking-strip-eye.reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

@media (max-width:600px) {
  .home-booking .form-panel > form,
  .home-booking .form-panel > .w-form-done,
  .home-booking .form-panel > .w-form-fail {
    translate:0 16px;
    transform:scale(.90909,1.0989);
    transform-origin:top left;
    width:110%;
  }
}

/* Keep the mobile paper, its controls and the section transition in one
   continuous flow.  The editor can still size the card, but a saved card
   offset must not leave the torn edge floating above the footer. */
@media (max-width:850px) {
  .home-booking .form-panel {
    margin-bottom:0;
  }
  .home-booking .work-form {
    width:calc(100% - 1rem);
    max-width:100%;
  }
  .home-booking .w-form-done,
  .home-booking .w-form-fail {
    width:calc(100% - 1rem);
    max-width:100%;
  }
}

@media (max-width:600px) {
  .home-booking .work-form,
  .home-booking .w-form-done,
  .home-booking .w-form-fail {
    width:calc(100% - 1.25rem);
  }
  .home-booking .form-submit {
    width:100%;
    max-width:100%;
  }
}

/* Restore the iPhone paper proportions saved in the editor. The non-uniform
   scale keeps the form copy readable while bringing back the full cut-paper
   silhouette, including its lower torn edge. */
@media (max-width:600px) {
  .home-booking .form-panel {
    scale: 1.1 .91 !important;
  }

  /* Keep only a short, natural slice of the right-side collage on the phone. */
  .home-booking .booking-strip-eye {
    display: block;
    top: 20%;
    right: 0;
    left: auto;
    width: 30%;
    height: 60%;
    object-fit: cover;
    object-position: right center;
    /* Keep the eye artwork visible above the paper mask on iPhone. */
    z-index: 1;
    /* The layout editor tags this image as a reveal; the phone preview can
       show the form before its observer fires, so keep the artwork present. */
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .home-booking .form-panel > form,
  .home-booking .form-panel > .w-form-done,
  .home-booking .form-panel > .w-form-fail {
    position: relative;
    z-index: 2;
  }

  /* Reintroduce a compact eye detail over the paper edge instead of the full
     height collage strip. */
  .home-booking .booking-black-detail {
    display: none;
  }

  .home-booking .form-panel::before {
    inset: -2.5rem -2rem -2.5rem -2.5rem;
    background-image:url("assets/booking-form-white-torn-iphone.png");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }

  /* This is a pixel-for-pixel crop of the paper's existing top tear, flipped
     vertically once.  Using the cropped strip (rather than squeezing the
     entire paper into a mask) prevents the old lower edge leaking through. */
  .home-booking .form-panel::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: -2.5rem;
    right: -2rem;
    bottom: -2.5rem;
    height: 5.5rem;
    background: url("assets/booking-paper-bottom-strip.png?v=2") center bottom / 100% 100% no-repeat;
    pointer-events: none;
  }
}