/* MELA 1.0.51 — global booking + Work Tool modal restore
   ---------------------------------------------------------
   These declarations intentionally live outside the legacy/native page styling
   chain. Elementor-built pages skip that chain so Elementor remains the visual
   owner of page sections; the modal layer itself, however, is global UI and must
   always retain fixed viewport positioning, backdrop, panel and form structure. */
body.mela-modal-open{
  overflow:hidden!important;
}
.mela-modal[hidden]{
  display:none!important;
}
.mela-modal{
  position:fixed!important;
  inset:0!important;
  z-index:100000!important;
  width:100vw!important;
  height:100dvh!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  padding:clamp(.75rem,3vw,1.5rem)!important;
  box-sizing:border-box!important;
}
.mela-modal__backdrop{
  position:absolute!important;
  inset:0!important;
  background:rgba(0,0,0,.72)!important;
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}
.mela-modal__panel{
  position:relative!important;
  z-index:1!important;
  width:min(52rem,calc(100vw - 1.5rem))!important;
  max-width:100%!important;
  max-height:calc(100dvh - 1.5rem)!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  margin:0!important;
  padding:clamp(1.6rem,4vw,3.25rem)!important;
  box-sizing:border-box!important;
  background:var(--violet-light)!important;
  color:var(--black)!important;
  box-shadow:0 24px 90px rgba(0,0,0,.32)!important;
  border-radius:0!important;
}
.mela-modal__panel>small,
.mela-modal__panel label>span{
  display:block;
  margin-bottom:.55rem;
  font-family:var(--display);
  font-size:.7rem;
  font-weight:750;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.mela-modal__panel>h2{
  max-width:13ch;
  margin:.65rem 0 1rem;
  font-family:var(--display);
  font-size:clamp(2.5rem,6vw,5.2rem);
  font-weight:700;
  line-height:.94;
  letter-spacing:-.06em;
  text-transform:uppercase;
}
.mela-modal__panel>p{
  max-width:42rem;
  margin:.25rem 0 1rem;
  font-size:1.05rem;
  line-height:1.6;
}
.mela-modal__close{
  position:absolute!important;
  top:1rem!important;
  right:1rem!important;
  z-index:4!important;
  width:2.8rem!important;
  height:2.8rem!important;
  border:1px solid currentColor!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit!important;
  font-size:1.7rem!important;
  line-height:1!important;
  cursor:pointer!important;
}
.mela-modal form{
  display:grid!important;
  gap:1rem!important;
  margin-top:1.5rem!important;
}
.mela-modal__grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:1rem!important;
}
.mela-modal label,
.mela-modal__grid>*{
  min-width:0!important;
  max-width:100%!important;
}
.mela-modal input,
.mela-modal select,
.mela-modal textarea{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:3.5rem;
  border:1px solid currentColor;
  border-radius:0;
  background:rgba(255,255,255,.92);
  color:var(--black);
  padding:.8rem 1rem;
  font:inherit;
}
.mela-modal textarea{
  min-height:7rem;
  resize:vertical;
}
.mela-modal .brand-action{
  max-width:100%;
}
.mela-booking-success,
.mela-download-success{
  padding:1rem 1.15rem;
  border:1px solid currentColor;
  font-weight:650;
}
.mela-download-direct{margin-top:0!important}

/* Restore the original MELA colour relationship between originating card and modal. */
.mela-booking-modal[data-tone="soft"] .mela-modal__panel,
.mela-download-modal[data-tone="soft"] .mela-modal__panel{
  background:var(--violet-light)!important;
  color:var(--black)!important;
  border-left:.55rem solid var(--violet)!important;
}
.mela-booking-modal[data-tone="violet"] .mela-modal__panel,
.mela-download-modal[data-tone="violet"] .mela-modal__panel{
  background:var(--violet)!important;
  color:var(--white)!important;
  border-left:.55rem solid var(--signal)!important;
}
.mela-booking-modal[data-tone="ink"] .mela-modal__panel,
.mela-booking-modal[data-tone="dark"] .mela-modal__panel,
.mela-download-modal[data-tone="ink"] .mela-modal__panel,
.mela-download-modal[data-tone="dark"] .mela-modal__panel{
  background:var(--black)!important;
  color:var(--white)!important;
  border-left:.55rem solid var(--signal)!important;
}
.mela-booking-modal[data-tone="signal"] .mela-modal__panel,
.mela-download-modal[data-tone="signal"] .mela-modal__panel{
  background:var(--signal)!important;
  color:var(--black)!important;
  border-left:.55rem solid var(--violet)!important;
}
.mela-modal[data-tone="dark"] .mela-modal__panel :is(h2,p,small,label,label>span,.inquiry-consent,.inquiry-consent span,.mela-booking-success,.mela-download-success,.inquiry-error),
.mela-modal[data-tone="ink"] .mela-modal__panel :is(h2,p,small,label,label>span,.inquiry-consent,.inquiry-consent span,.mela-booking-success,.mela-download-success,.inquiry-error),
.mela-modal[data-tone="violet"] .mela-modal__panel :is(h2,p,small,label,label>span,.inquiry-consent,.inquiry-consent span,.mela-booking-success,.mela-download-success,.inquiry-error){
  color:var(--white)!important;
  -webkit-text-fill-color:currentColor!important;
}
.mela-modal[data-tone="soft"] .mela-modal__panel :is(h2,p,small,label,label>span,.inquiry-consent,.inquiry-consent span,.mela-booking-success,.mela-download-success,.inquiry-error),
.mela-modal[data-tone="signal"] .mela-modal__panel :is(h2,p,small,label,label>span,.inquiry-consent,.inquiry-consent span,.mela-booking-success,.mela-download-success,.inquiry-error){
  color:var(--black)!important;
  -webkit-text-fill-color:currentColor!important;
}
.mela-modal[data-tone="dark"] .inquiry-consent a,
.mela-modal[data-tone="ink"] .inquiry-consent a,
.mela-modal[data-tone="violet"] .inquiry-consent a{
  color:inherit!important;
}

/* Elementor widget modal controls remain authoritative via their CSS variables. */
.mela-modal.mela-modal--elementor-config .mela-modal__panel{
  background:var(--mela-form-bg,var(--violet-light))!important;
  color:var(--mela-form-text,var(--black))!important;
  border-left:.55rem solid var(--mela-form-accent,var(--violet))!important;
}

@media(max-width:819px){
  .mela-modal{
    padding:.5rem!important;
    place-items:end center!important;
  }
  .mela-modal__panel{
    width:100%!important;
    max-height:92dvh!important;
    padding:2.4rem 1.25rem 1.5rem!important;
  }
  .mela-modal__grid,
  .mela-modal__grid--contact{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .mela-modal .inquiry-consent{
    grid-template-columns:1.1rem minmax(0,1fr)!important;
    column-gap:.7rem!important;
  }
  .mela-modal .inquiry-consent>span{
    font-size:.82rem!important;
    line-height:1.5!important;
  }
}

/* ========================================================================
   MELA 1.0.52 — MODAL FORM POLISH + RESPONSIVE HARDENING
   Fixes regressions on Elementor-owned pages where the legacy form system is
   intentionally not loaded: checkbox sizing, honeypot visibility, CTA shape,
   and compact booking/download composition are defined here as global UI.
   ======================================================================== */

/* Honeypot must never participate in layout, even when legacy page CSS is skipped. */
.mela-modal .inquiry-honeypot{
  position:absolute!important;
  left:-10000px!important;
  top:auto!important;
  width:1px!important;
  height:1px!important;
  min-width:1px!important;
  min-height:1px!important;
  max-width:1px!important;
  max-height:1px!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
}

/* Text controls only. Checkboxes/radios/hidden fields must not inherit full-width
   input dimensions from the generic modal field rule above. */
.mela-modal :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
){
  box-sizing:border-box!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  min-height:3.15rem!important;
  margin:0!important;
  border:1px solid currentColor!important;
  border-radius:0!important;
  background:var(--white,#fff)!important;
  color:var(--black,#09090a)!important;
  -webkit-text-fill-color:var(--black,#09090a)!important;
  padding:.72rem .9rem!important;
  font-family:var(--body,inherit)!important;
  font-size:1rem!important;
  line-height:1.3!important;
  box-shadow:none!important;
}
.mela-modal textarea{
  min-height:5.8rem!important;
  padding:.82rem .9rem!important;
  line-height:1.45!important;
}

/* Consent rows: compact native checkbox + readable copy. */
.mela-modal .inquiry-consent{
  display:grid!important;
  grid-template-columns:1.05rem minmax(0,1fr)!important;
  column-gap:.7rem!important;
  row-gap:0!important;
  align-items:start!important;
  width:100%!important;
  min-width:0!important;
  margin:.05rem 0!important;
  padding:0!important;
  font-family:var(--body,inherit)!important;
  font-size:.76rem!important;
  font-weight:500!important;
  line-height:1.45!important;
  letter-spacing:0!important;
  text-transform:none!important;
  cursor:pointer!important;
}
.mela-modal .inquiry-consent>input[type="checkbox"],
.mela-modal input[type="checkbox"]{
  box-sizing:border-box!important;
  display:block!important;
  appearance:auto!important;
  -webkit-appearance:checkbox!important;
  width:1.05rem!important;
  height:1.05rem!important;
  min-width:1.05rem!important;
  min-height:1.05rem!important;
  max-width:1.05rem!important;
  max-height:1.05rem!important;
  margin:.14rem 0 0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  accent-color:var(--violet,#7569d6)!important;
}
.mela-modal .inquiry-consent>span{
  display:block!important;
  min-width:0!important;
  margin:0!important;
  font-family:var(--body,inherit)!important;
  font-size:inherit!important;
  font-weight:inherit!important;
  line-height:inherit!important;
  letter-spacing:0!important;
  text-transform:none!important;
}
.mela-modal .inquiry-consent a{
  color:var(--violet,#7569d6)!important;
  -webkit-text-fill-color:currentColor!important;
  text-decoration-thickness:1px!important;
  text-underline-offset:.16em!important;
}
.mela-modal[data-tone="violet"] .inquiry-consent a,
.mela-modal[data-tone="dark"] .inquiry-consent a,
.mela-modal[data-tone="ink"] .inquiry-consent a{
  color:var(--signal,#d9ff43)!important;
}

/* Consistent modal CTA. Legacy .brand-action is skipped on Elementor pages,
   so the dialog itself owns the button geometry and marker. */
.mela-modal form>button[type="submit"].brand-action{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:1rem!important;
  width:100%!important;
  min-width:0!important;
  min-height:3.45rem!important;
  margin:.35rem 0 0!important;
  padding:.82rem 1rem!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  outline:0!important;
  font-family:var(--display,inherit)!important;
  font-size:.78rem!important;
  font-weight:760!important;
  line-height:1!important;
  letter-spacing:.015em!important;
  text-transform:uppercase!important;
  text-align:left!important;
  cursor:pointer!important;
}
.mela-modal form>button[type="submit"].brand-action::before{
  display:none!important;
  content:none!important;
}
.mela-modal form>button[type="submit"].brand-action::after{
  content:""!important;
  display:block!important;
  position:static!important;
  width:.62rem!important;
  height:.62rem!important;
  min-width:.62rem!important;
  flex:0 0 .62rem!important;
  margin:0!important;
  transform:none!important;
  border:0!important;
  border-radius:0!important;
  opacity:1!important;
}
.mela-modal form>button[type="submit"].brand-action--dark{
  background:var(--black,#09090a)!important;
  color:var(--white,#fff)!important;
  -webkit-text-fill-color:var(--white,#fff)!important;
}
.mela-modal form>button[type="submit"].brand-action--dark::after{
  background:var(--signal,#d9ff43)!important;
}
.mela-modal form>button[type="submit"].brand-action--signal{
  background:var(--signal,#d9ff43)!important;
  color:var(--black,#09090a)!important;
  -webkit-text-fill-color:var(--black,#09090a)!important;
}
.mela-modal form>button[type="submit"].brand-action--signal::after{
  background:var(--black,#09090a)!important;
}
.mela-modal form>button[type="submit"].brand-action--violet{
  background:var(--violet,#7569d6)!important;
  color:var(--white,#fff)!important;
  -webkit-text-fill-color:var(--white,#fff)!important;
}
.mela-modal form>button[type="submit"].brand-action--violet::after{
  background:var(--signal,#d9ff43)!important;
}
.mela-modal form>button[type="submit"].brand-action:hover{
  filter:brightness(.97)!important;
}
.mela-modal form>button[type="submit"].brand-action:focus-visible{
  outline:2px solid currentColor!important;
  outline-offset:3px!important;
}

/* Global dialog geometry: strong MELA heading, but compact enough to keep the
   form visible without turning the modal into a full page. */
.mela-modal__panel{
  width:min(60rem,calc(100vw - 2rem))!important;
  max-width:60rem!important;
  max-height:calc(100dvh - 2rem)!important;
  padding:clamp(1.7rem,2.7vw,2.45rem)!important;
}
.mela-modal__panel>small{
  margin:0 0 .55rem!important;
  font-size:.7rem!important;
  line-height:1.2!important;
}
.mela-modal__panel>h2{
  max-width:12ch!important;
  margin:.25rem 0 .55rem!important;
  font-size:clamp(2.8rem,4.5vw,4.6rem)!important;
  line-height:.9!important;
}
.mela-modal__panel>p{
  margin:.15rem 0 .8rem!important;
  font-size:1rem!important;
  line-height:1.4!important;
}
.mela-modal__close{
  top:1rem!important;
  right:1rem!important;
  width:2.75rem!important;
  height:2.75rem!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  font-family:var(--display,inherit)!important;
  font-size:1.45rem!important;
  font-weight:700!important;
}
.mela-modal form{
  gap:.8rem!important;
  margin-top:.8rem!important;
}
.mela-modal__grid{
  gap:.8rem!important;
}
.mela-modal__panel label:not(.inquiry-consent):not(.inquiry-honeypot)>span{
  margin-bottom:.42rem!important;
  font-size:.7rem!important;
  line-height:1.2!important;
}
.mela-modal .inquiry-error{
  margin:0!important;
  font-size:.78rem!important;
  line-height:1.4!important;
}

/* Work Tool download: balanced medium dialog and full-width CTA. */
.mela-download-modal .mela-modal__panel{
  width:min(58rem,calc(100vw - 2rem))!important;
  max-width:58rem!important;
}
.mela-download-modal .mela-modal__panel>h2{
  font-size:clamp(3rem,5vw,4.8rem)!important;
}
.mela-download-modal form>button[type="submit"].brand-action{
  width:100%!important;
  justify-self:stretch!important;
}

/* Booking: wide on desktop, but no longer four cramped columns plus a tall
   consent area. Schedule and identity sit side-by-side; contact + note span. */
.mela-booking-modal .mela-modal__panel{
  width:min(70rem,calc(100vw - 2rem))!important;
  max-width:70rem!important;
  padding:clamp(1.55rem,2.2vw,2.2rem)!important;
}
.mela-booking-modal .mela-modal__panel>h2{
  max-width:12ch!important;
  font-size:clamp(3rem,4.1vw,4.35rem)!important;
  margin:.2rem 0 .45rem!important;
}
.mela-booking-modal form{
  margin-top:.55rem!important;
  gap:.7rem!important;
}
.mela-booking-modal .mela-booking-grid{
  gap:.7rem!important;
}
.mela-booking-modal textarea{
  min-height:5.1rem!important;
}
.mela-booking-modal form>button[type="submit"].brand-action{
  width:min(100%,27rem)!important;
  justify-self:start!important;
}

@media(min-width:1100px){
  .mela-booking-modal form{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:.9rem!important;
  }
  .mela-booking-modal .mela-booking-grid--schedule{grid-column:1!important}
  .mela-booking-modal .mela-booking-grid--identity{grid-column:2!important}
  .mela-booking-modal .mela-booking-grid--contact,
  .mela-booking-modal form>label:not(.inquiry-consent):not(.inquiry-honeypot),
  .mela-booking-modal form>.inquiry-consent,
  .mela-booking-modal form>.inquiry-error,
  .mela-booking-modal form>.mela-booking-success,
  .mela-booking-modal form>button[type="submit"]{
    grid-column:1/-1!important;
  }
}

/* Compact desktop / tablet: two fields per group, groups stacked. */
@media(min-width:768px) and (max-width:1099px){
  .mela-modal__panel{
    width:min(52rem,calc(100vw - 1.5rem))!important;
    max-width:52rem!important;
    max-height:calc(100dvh - 1.5rem)!important;
  }
  .mela-booking-modal .mela-modal__panel{
    width:min(58rem,calc(100vw - 1.5rem))!important;
    max-width:58rem!important;
  }
  .mela-booking-modal .mela-booking-grid,
  .mela-modal__grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .mela-modal__panel>h2{
    font-size:clamp(2.8rem,7vw,3.7rem)!important;
  }
}

/* Mobile: one strict column, readable copy, compact controls, full-width CTA. */
@media(max-width:767px){
  .mela-modal{
    padding:.45rem!important;
    place-items:center!important;
  }
  .mela-modal__panel,
  .mela-booking-modal .mela-modal__panel,
  .mela-download-modal .mela-modal__panel{
    width:calc(100vw - .9rem)!important;
    max-width:calc(100vw - .9rem)!important;
    max-height:calc(100dvh - .9rem)!important;
    margin:0!important;
    padding:3.15rem 1rem 1.15rem!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
  }
  .mela-modal__close{
    top:.65rem!important;
    right:.65rem!important;
    width:2.45rem!important;
    height:2.45rem!important;
    font-size:1.25rem!important;
  }
  .mela-modal__panel>small{
    font-size:.64rem!important;
  }
  .mela-modal__panel>h2,
  .mela-booking-modal .mela-modal__panel>h2,
  .mela-download-modal .mela-modal__panel>h2{
    max-width:11ch!important;
    margin:.2rem 0 .45rem!important;
    font-size:clamp(2rem,10vw,2.75rem)!important;
    line-height:.92!important;
  }
  .mela-modal__panel>p{
    margin:.1rem 0 .65rem!important;
    font-size:.9rem!important;
  }
  .mela-modal form{
    gap:.68rem!important;
    margin-top:.6rem!important;
  }
  .mela-modal__grid,
  .mela-booking-modal .mela-booking-grid,
  .mela-booking-modal .mela-modal__grid,
  .mela-booking-modal .mela-modal__grid--contact{
    grid-template-columns:minmax(0,1fr)!important;
    gap:.68rem!important;
  }
  .mela-modal :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select,
    textarea
  ){
    min-height:3rem!important;
    padding:.67rem .78rem!important;
    font-size:16px!important;
  }
  .mela-modal textarea,
  .mela-booking-modal textarea{
    min-height:5rem!important;
  }
  .mela-modal .inquiry-consent{
    grid-template-columns:1rem minmax(0,1fr)!important;
    column-gap:.62rem!important;
    font-size:.72rem!important;
    line-height:1.4!important;
  }
  .mela-modal .inquiry-consent>input[type="checkbox"],
  .mela-modal input[type="checkbox"]{
    width:1rem!important;
    height:1rem!important;
    min-width:1rem!important;
    min-height:1rem!important;
    max-width:1rem!important;
    max-height:1rem!important;
  }
  .mela-modal form>button[type="submit"].brand-action,
  .mela-booking-modal form>button[type="submit"].brand-action,
  .mela-download-modal form>button[type="submit"].brand-action{
    width:100%!important;
    min-height:3.35rem!important;
    justify-self:stretch!important;
    font-size:.74rem!important;
  }
}

@media(max-width:390px){
  .mela-modal__panel,
  .mela-booking-modal .mela-modal__panel,
  .mela-download-modal .mela-modal__panel{
    padding:3rem .82rem 1rem!important;
  }
  .mela-modal__panel>h2,
  .mela-booking-modal .mela-modal__panel>h2,
  .mela-download-modal .mela-modal__panel>h2{
    font-size:clamp(1.85rem,10.5vw,2.35rem)!important;
  }
  .mela-modal__panel label:not(.inquiry-consent):not(.inquiry-honeypot)>span{
    font-size:.64rem!important;
  }
  .mela-modal .inquiry-consent{
    font-size:.68rem!important;
  }
}

/* ========================================================================
   MELA 1.0.53 — EDITORIAL MODAL COMPOSITION
   Desktop dialogs use the same calm split rhythm as the MELA site:
   editorial intro on the left, form on the right. Tablet/mobile stack safely.
   ======================================================================== */
.mela-modal__panel{
  --mela-modal-rule:rgba(9,9,10,.14);
}
.mela-modal[data-tone="violet"] .mela-modal__panel,
.mela-modal[data-tone="dark"] .mela-modal__panel,
.mela-modal[data-tone="ink"] .mela-modal__panel{
  --mela-modal-rule:rgba(255,255,255,.24);
}

/* Calm field hierarchy. */
.mela-modal__panel label:not(.inquiry-consent):not(.inquiry-honeypot)>span{
  font-size:.66rem!important;
  letter-spacing:.055em!important;
  margin-bottom:.36rem!important;
}
.mela-modal :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
){
  min-height:3rem!important;
  padding:.68rem .82rem!important;
  font-size:.96rem!important;
}
.mela-modal textarea,
.mela-booking-modal textarea{
  min-height:5.2rem!important;
}
.mela-modal .inquiry-consent{
  font-size:.75rem!important;
  line-height:1.38!important;
}
.mela-modal form>button[type="submit"].brand-action{
  min-height:3.35rem!important;
  font-size:.76rem!important;
}

/* Desktop: editorial split layout. */
@media(min-width:1050px){
  .mela-modal__panel,
  .mela-booking-modal .mela-modal__panel,
  .mela-download-modal .mela-modal__panel{
    width:min(69rem,calc(100vw - 3rem))!important;
    max-width:69rem!important;
    max-height:calc(100dvh - 3rem)!important;
    padding:clamp(1.9rem,2.8vw,2.7rem)!important;
    display:grid!important;
    grid-template-columns:minmax(15rem,.78fr) minmax(0,1.35fr)!important;
    grid-template-rows:auto auto 1fr!important;
    column-gap:clamp(2rem,3vw,3.15rem)!important;
    row-gap:.2rem!important;
    align-items:start!important;
  }
  .mela-modal__panel>small{
    grid-column:1!important;
    grid-row:1!important;
    align-self:start!important;
    margin:0 0 .65rem!important;
  }
  .mela-modal__panel>h2,
  .mela-booking-modal .mela-modal__panel>h2,
  .mela-download-modal .mela-modal__panel>h2{
    grid-column:1!important;
    grid-row:2!important;
    max-width:8.5ch!important;
    margin:.1rem 0 .8rem!important;
    font-size:clamp(3rem,4.1vw,4.15rem)!important;
    line-height:.9!important;
    letter-spacing:-.058em!important;
  }
  .mela-modal__panel>p{
    grid-column:1!important;
    grid-row:3!important;
    max-width:25rem!important;
    margin:.1rem 0 0!important;
    font-size:.98rem!important;
    line-height:1.45!important;
  }
  .mela-modal form,
  .mela-booking-modal form,
  .mela-download-modal form{
    grid-column:2!important;
    grid-row:1 / span 3!important;
    width:100%!important;
    margin:0!important;
    padding:2.15rem 0 0 clamp(1.6rem,2.4vw,2.4rem)!important;
    border-left:1px solid var(--mela-modal-rule)!important;
    align-self:start!important;
  }

  /* Booking stays readable: each logical group is its own two-column row. */
  .mela-booking-modal form{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:.68rem!important;
  }
  .mela-booking-modal .mela-booking-grid,
  .mela-booking-modal .mela-booking-grid--schedule,
  .mela-booking-modal .mela-booking-grid--identity,
  .mela-booking-modal .mela-booking-grid--contact{
    grid-column:auto!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.72rem!important;
  }
  .mela-booking-modal form>label:not(.inquiry-consent):not(.inquiry-honeypot),
  .mela-booking-modal form>.inquiry-consent,
  .mela-booking-modal form>.inquiry-error,
  .mela-booking-modal form>.mela-booking-success,
  .mela-booking-modal form>button[type="submit"]{
    grid-column:auto!important;
  }
  .mela-booking-modal textarea{
    min-height:5.5rem!important;
  }
  .mela-booking-modal form>button[type="submit"].brand-action,
  .mela-download-modal form>button[type="submit"].brand-action{
    width:100%!important;
    justify-self:stretch!important;
    margin-top:.25rem!important;
  }

  /* Download form is intentionally shorter and breathes on the right. */
  .mela-download-modal form{
    display:grid!important;
    gap:.72rem!important;
  }
  .mela-download-modal .mela-modal__grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.72rem!important;
  }

  .mela-modal__close{
    top:1rem!important;
    right:1rem!important;
    width:2.55rem!important;
    height:2.55rem!important;
    font-size:1.25rem!important;
  }
}

/* Tablet / compact desktop: one editorial stack, two fields where useful. */
@media(min-width:768px) and (max-width:1049px){
  .mela-modal__panel,
  .mela-booking-modal .mela-modal__panel,
  .mela-download-modal .mela-modal__panel{
    width:min(48rem,calc(100vw - 1.5rem))!important;
    max-width:48rem!important;
    max-height:calc(100dvh - 1.5rem)!important;
    padding:2rem!important;
    display:block!important;
  }
  .mela-modal__panel>h2,
  .mela-booking-modal .mela-modal__panel>h2,
  .mela-download-modal .mela-modal__panel>h2{
    max-width:10ch!important;
    font-size:clamp(2.8rem,7vw,3.65rem)!important;
    margin:.2rem 0 .5rem!important;
  }
  .mela-modal form,
  .mela-booking-modal form,
  .mela-download-modal form{
    margin-top:1rem!important;
    padding:0!important;
    border:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:.7rem!important;
  }
  .mela-booking-modal .mela-booking-grid,
  .mela-booking-modal .mela-modal__grid,
  .mela-download-modal .mela-modal__grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.72rem!important;
  }
  .mela-booking-modal form>button[type="submit"].brand-action,
  .mela-download-modal form>button[type="submit"].brand-action{
    width:100%!important;
    justify-self:stretch!important;
  }
}

/* Mobile: preserve one-column flow and reduce headline dominance. */
@media(max-width:767px){
  .mela-modal__panel,
  .mela-booking-modal .mela-modal__panel,
  .mela-download-modal .mela-modal__panel{
    display:block!important;
  }
  .mela-modal__panel>h2,
  .mela-booking-modal .mela-modal__panel>h2,
  .mela-download-modal .mela-modal__panel>h2{
    max-width:10ch!important;
    font-size:clamp(1.95rem,9.2vw,2.55rem)!important;
  }
  .mela-modal form,
  .mela-booking-modal form,
  .mela-download-modal form{
    padding:0!important;
    border:0!important;
  }
  .mela-modal .inquiry-consent{
    font-size:.73rem!important;
    line-height:1.38!important;
  }
}

/* ========================================================================
   MELA 1.0.54 — CALM SINGLE-COLUMN MODALS + LARGE DESKTOP CALENDAR
   Reverts the split experiment. Modal copy and form flow vertically again;
   the custom date calendar is deliberately larger and editorial on desktop,
   while phones retain the native platform date picker.
   ======================================================================== */

/* Single-column modal composition on every desktop size. */
@media(min-width:768px){
  .mela-modal__panel,
  .mela-booking-modal .mela-modal__panel,
  .mela-download-modal .mela-modal__panel{
    display:block!important;
    width:min(54rem,calc(100vw - 2rem))!important;
    max-width:54rem!important;
    max-height:calc(100dvh - 2rem)!important;
    padding:clamp(1.8rem,2.7vw,2.55rem)!important;
  }
  .mela-booking-modal .mela-modal__panel{
    width:min(58rem,calc(100vw - 2rem))!important;
    max-width:58rem!important;
  }
  .mela-modal__panel>small,
  .mela-modal__panel>h2,
  .mela-modal__panel>p,
  .mela-modal form,
  .mela-booking-modal form,
  .mela-download-modal form{
    grid-column:auto!important;
    grid-row:auto!important;
  }
  .mela-modal__panel>small{
    margin:0 0 .55rem!important;
  }
  .mela-modal__panel>h2,
  .mela-booking-modal .mela-modal__panel>h2,
  .mela-download-modal .mela-modal__panel>h2{
    max-width:11ch!important;
    margin:.15rem 0 .55rem!important;
    font-size:clamp(2.75rem,4.6vw,4.05rem)!important;
    line-height:.91!important;
    letter-spacing:-.057em!important;
  }
  .mela-modal__panel>p{
    max-width:42rem!important;
    margin:.15rem 0 .95rem!important;
    font-size:1rem!important;
    line-height:1.45!important;
  }
  .mela-modal form,
  .mela-booking-modal form,
  .mela-download-modal form{
    width:100%!important;
    margin:1rem 0 0!important;
    padding:0!important;
    border:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:.78rem!important;
  }
  .mela-booking-modal .mela-booking-grid,
  .mela-booking-modal .mela-booking-grid--schedule,
  .mela-booking-modal .mela-booking-grid--identity,
  .mela-booking-modal .mela-booking-grid--contact,
  .mela-download-modal .mela-modal__grid{
    grid-column:auto!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.8rem!important;
  }
  .mela-booking-modal form>label:not(.inquiry-consent):not(.inquiry-honeypot),
  .mela-booking-modal form>.inquiry-consent,
  .mela-booking-modal form>.inquiry-error,
  .mela-booking-modal form>.mela-booking-success,
  .mela-booking-modal form>button[type="submit"]{
    grid-column:auto!important;
  }
  .mela-booking-modal textarea{
    min-height:6.1rem!important;
  }
  .mela-booking-modal form>button[type="submit"].brand-action{
    width:min(100%,26rem)!important;
    justify-self:start!important;
    margin-top:.3rem!important;
  }
  .mela-download-modal form>button[type="submit"].brand-action{
    width:100%!important;
    justify-self:stretch!important;
  }
}

/* Slightly calmer field proportions. */
.mela-modal :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea
){
  min-height:3.25rem!important;
  padding:.72rem .88rem!important;
  font-size:1rem!important;
}
.mela-modal__panel label:not(.inquiry-consent):not(.inquiry-honeypot)>span{
  font-size:.68rem!important;
  margin-bottom:.38rem!important;
}
.mela-modal .inquiry-consent{
  font-size:.76rem!important;
  line-height:1.42!important;
}

/* ------------------------------------------------------------------------
   Controlled desktop date picker.
   The native macOS/Safari calendar popover cannot be sized with CSS. On
   desktop we therefore render a MELA calendar while retaining the real
   date input as the submitted form value. Mobile keeps the native picker.
   ------------------------------------------------------------------------ */
.mela-booking-date-field{
  position:relative!important;
}
.mela-calendar-trigger,
.mela-calendar-popover{
  display:none;
}
@media(min-width:900px){
  .mela-booking-date-field.is-custom-calendar-ready>input[type="date"]{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    min-width:1px!important;
    min-height:1px!important;
    max-width:1px!important;
    max-height:1px!important;
    opacity:0!important;
    pointer-events:none!important;
    clip-path:inset(50%)!important;
  }
  .mela-booking-date-field.is-custom-calendar-ready .mela-calendar-trigger{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    min-height:3.25rem!important;
    padding:.72rem .88rem!important;
    border:1px solid currentColor!important;
    border-radius:0!important;
    background:var(--white,#fff)!important;
    color:var(--black,#09090a)!important;
    -webkit-text-fill-color:var(--black,#09090a)!important;
    font-family:var(--body,inherit)!important;
    font-size:1rem!important;
    font-weight:500!important;
    text-align:left!important;
    cursor:pointer!important;
  }
  .mela-calendar-trigger::after{
    content:"▾";
    font-family:var(--display,inherit);
    font-size:.82rem;
    margin-left:1rem;
  }
  .mela-booking-date-field.is-calendar-open .mela-calendar-trigger{
    outline:2px solid var(--violet,#7569d6)!important;
    outline-offset:1px!important;
  }
  .mela-calendar-popover{
    position:absolute!important;
    z-index:10030!important;
    left:0!important;
    top:calc(100% + .5rem)!important;
    display:none!important;
    width:min(25rem,calc(100vw - 3rem))!important;
    padding:1rem!important;
    border:1px solid rgba(9,9,10,.18)!important;
    background:var(--white,#fff)!important;
    color:var(--black,#09090a)!important;
    box-shadow:0 18px 55px rgba(0,0,0,.22)!important;
  }
  .mela-booking-date-field.is-calendar-open .mela-calendar-popover{
    display:block!important;
  }
  .mela-calendar-head{
    display:grid!important;
    grid-template-columns:2.65rem 1fr 2.65rem!important;
    align-items:center!important;
    gap:.55rem!important;
    margin-bottom:.8rem!important;
  }
  .mela-calendar-nav{
    display:grid!important;
    place-items:center!important;
    width:2.65rem!important;
    height:2.65rem!important;
    padding:0!important;
    border:1px solid rgba(9,9,10,.18)!important;
    background:transparent!important;
    color:var(--black,#09090a)!important;
    font-family:var(--display,inherit)!important;
    font-size:1rem!important;
    cursor:pointer!important;
  }
  .mela-calendar-nav:disabled{
    opacity:.3!important;
    cursor:not-allowed!important;
  }
  .mela-calendar-month{
    font-family:var(--display,inherit)!important;
    font-size:.83rem!important;
    font-weight:760!important;
    letter-spacing:.04em!important;
    text-transform:uppercase!important;
    text-align:center!important;
  }
  .mela-calendar-weekdays,
  .mela-calendar-days{
    display:grid!important;
    grid-template-columns:repeat(7,minmax(0,1fr))!important;
    gap:.26rem!important;
  }
  .mela-calendar-weekdays{
    margin-bottom:.32rem!important;
  }
  .mela-calendar-weekdays span{
    display:grid!important;
    place-items:center!important;
    min-height:1.65rem!important;
    font-family:var(--display,inherit)!important;
    font-size:.58rem!important;
    font-weight:760!important;
    color:rgba(9,9,10,.58)!important;
  }
  .mela-calendar-day{
    display:grid!important;
    place-items:center!important;
    aspect-ratio:1/1!important;
    min-width:0!important;
    border:1px solid transparent!important;
    background:#f5f5f3!important;
    color:var(--black,#09090a)!important;
    font-family:var(--body,inherit)!important;
    font-size:.95rem!important;
    font-weight:600!important;
    cursor:pointer!important;
  }
  .mela-calendar-day:hover:not(:disabled){
    border-color:var(--violet,#7569d6)!important;
    background:var(--violet-light,#ebe8ff)!important;
  }
  .mela-calendar-day.is-selected{
    background:var(--violet,#7569d6)!important;
    color:var(--white,#fff)!important;
  }
  .mela-calendar-day.is-today:not(.is-selected){
    box-shadow:inset 0 0 0 2px var(--signal,#d9ff43)!important;
  }
  .mela-calendar-day.is-outside{
    background:transparent!important;
    color:rgba(9,9,10,.3)!important;
  }
  .mela-calendar-day:disabled{
    opacity:.25!important;
    cursor:not-allowed!important;
  }
}

@media(max-width:899px){
  .mela-calendar-trigger,
  .mela-calendar-popover{
    display:none!important;
  }
  .mela-booking-date-field>input[type="date"]{
    position:static!important;
    width:100%!important;
    height:auto!important;
    opacity:1!important;
    pointer-events:auto!important;
    clip-path:none!important;
  }
}


/* ========================================================================
   MELA 1.0.55 — CALENDAR CONTRAST + TONE ISOLATION
   The custom calendar is a light utility surface even when the originating
   offer uses violet/ink. WebKit text-fill is inherited, so explicitly reset
   both color and text-fill inside the popover to prevent white-on-white dates.
   ======================================================================== */
@media(min-width:900px){
  .mela-booking-modal .mela-calendar-popover,
  .mela-booking-modal .mela-calendar-popover :is(
    .mela-calendar-head,
    .mela-calendar-month,
    .mela-calendar-nav,
    .mela-calendar-weekdays,
    .mela-calendar-weekdays span,
    .mela-calendar-days,
    .mela-calendar-day
  ){
    color:var(--black,#09090a)!important;
    -webkit-text-fill-color:var(--black,#09090a)!important;
  }
  .mela-booking-modal .mela-calendar-popover{
    background:var(--white,#fff)!important;
    border-color:rgba(9,9,10,.18)!important;
  }
  .mela-booking-modal .mela-calendar-day.is-selected{
    background:var(--violet,#7569d6)!important;
    color:var(--white,#fff)!important;
    -webkit-text-fill-color:var(--white,#fff)!important;
  }
  .mela-booking-modal .mela-calendar-day.is-outside{
    color:rgba(9,9,10,.34)!important;
    -webkit-text-fill-color:rgba(9,9,10,.34)!important;
  }
  .mela-booking-modal .mela-calendar-day:disabled{
    color:rgba(9,9,10,.28)!important;
    -webkit-text-fill-color:rgba(9,9,10,.28)!important;
    opacity:.6!important;
  }
}

/* ========================================================================
   MELA 1.0.56 — CONFIRMATION CTA + TONE LOGIC
   Confirmation states use the same CTA construction and surface contrast rules
   as the rest of MELA. This file is global because Elementor pages deliberately
   skip parts of the legacy page stylesheet chain.
   ======================================================================== */

/* Confirmation accent follows the originating offer / Work Tool tone. */
.mela-modal[data-tone="soft"]{
  --mela-confirm-accent:var(--violet,#7569d6);
}
.mela-modal[data-tone="signal"]{
  --mela-confirm-accent:var(--violet,#7569d6);
}
.mela-modal[data-tone="violet"],
.mela-modal[data-tone="dark"],
.mela-modal[data-tone="ink"]{
  --mela-confirm-accent:var(--signal,#d9ff43);
}

.mela-booking-success,
.mela-download-success{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
.mela-booking-success__kicker{
  color:var(--mela-confirm-accent,var(--violet,#7569d6))!important;
  -webkit-text-fill-color:currentColor!important;
}
.mela-booking-success__kicker::before{
  background:var(--mela-confirm-accent,var(--signal,#d9ff43))!important;
}
.mela-booking-success__note{
  border-left-color:var(--mela-confirm-accent,var(--signal,#d9ff43))!important;
}
.mela-download-modal .mela-download-success::before{
  background:var(--mela-confirm-accent,var(--signal,#d9ff43))!important;
}

/* Canonical MELA CTA geometry for every modal confirmation action. */
.mela-modal .mela-confirmation-action{
  position:relative!important;
  display:inline-flex!important;
  width:min(100%,22rem)!important;
  min-width:0!important;
  min-height:3.55rem!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:1.35rem!important;
  margin:.45rem 0 0!important;
  padding:1rem 1.15rem!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
  font-family:var(--display,inherit)!important;
  font-size:.78rem!important;
  font-weight:700!important;
  line-height:1.15!important;
  letter-spacing:0!important;
  text-align:left!important;
  text-decoration:none!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
  -webkit-text-fill-color:currentColor!important;
}
.mela-modal .mela-confirmation-action::before{
  display:none!important;
  content:none!important;
}
.mela-modal .mela-confirmation-action::after{
  content:""!important;
  position:static!important;
  display:block!important;
  width:.65rem!important;
  height:.65rem!important;
  min-width:.65rem!important;
  flex:0 0 .65rem!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  opacity:1!important;
  transform:none!important;
}

/* 1.0.57 — Elementor custom modal palettes also control confirmation CTAs. */
.mela-modal .mela-confirmation-action[data-mela-confirmation-custom="1"]::after{
  background:var(--mela-confirmation-square,var(--signal,#d9ff43))!important;
}

.mela-modal .mela-confirmation-action.brand-action--dark{
  background:var(--black,#09090a)!important;
  color:var(--white,#fff)!important;
}
.mela-modal .mela-confirmation-action.brand-action--dark::after{
  background:var(--signal,#d9ff43)!important;
}
.mela-modal .mela-confirmation-action.brand-action--signal{
  background:var(--signal,#d9ff43)!important;
  color:var(--black,#09090a)!important;
}
.mela-modal .mela-confirmation-action.brand-action--signal::after{
  background:var(--black,#09090a)!important;
}
.mela-modal .mela-confirmation-action.brand-action--violet{
  background:var(--violet,#7569d6)!important;
  color:var(--white,#fff)!important;
}
.mela-modal .mela-confirmation-action.brand-action--violet::after{
  background:var(--signal,#d9ff43)!important;
}
.mela-modal .mela-confirmation-action:hover{
  filter:brightness(.97)!important;
}
.mela-modal .mela-confirmation-action:focus-visible{
  outline:2px solid currentColor!important;
  outline-offset:3px!important;
}

/* The same surface rule is used by both booking and download confirmations:
   light/soft -> black CTA, violet/black -> signal CTA, signal -> violet CTA. */
.mela-modal[data-tone="soft"] .mela-confirmation-action{
  background:var(--black,#09090a)!important;
  color:var(--white,#fff)!important;
}
.mela-modal[data-tone="soft"] .mela-confirmation-action::after{
  background:var(--signal,#d9ff43)!important;
}
.mela-modal[data-tone="violet"] .mela-confirmation-action,
.mela-modal[data-tone="dark"] .mela-confirmation-action,
.mela-modal[data-tone="ink"] .mela-confirmation-action{
  background:var(--signal,#d9ff43)!important;
  color:var(--black,#09090a)!important;
}
.mela-modal[data-tone="violet"] .mela-confirmation-action::after,
.mela-modal[data-tone="dark"] .mela-confirmation-action::after,
.mela-modal[data-tone="ink"] .mela-confirmation-action::after{
  background:var(--black,#09090a)!important;
}
.mela-modal[data-tone="signal"] .mela-confirmation-action{
  background:var(--violet,#7569d6)!important;
  color:var(--white,#fff)!important;
}
.mela-modal[data-tone="signal"] .mela-confirmation-action::after{
  background:var(--signal,#d9ff43)!important;
}

/* Keep confirmation messages legible in every colour family. */
.mela-modal[data-tone="soft"] :is(.mela-booking-success,.mela-download-success),
.mela-modal[data-tone="signal"] :is(.mela-booking-success,.mela-download-success){
  color:var(--black,#09090a)!important;
  -webkit-text-fill-color:currentColor!important;
}
.mela-modal[data-tone="violet"] :is(.mela-booking-success,.mela-download-success),
.mela-modal[data-tone="dark"] :is(.mela-booking-success,.mela-download-success),
.mela-modal[data-tone="ink"] :is(.mela-booking-success,.mela-download-success){
  color:var(--white,#fff)!important;
  -webkit-text-fill-color:currentColor!important;
}

@media(max-width:767px){
  .mela-modal .mela-confirmation-action{
    width:100%!important;
    min-height:3.35rem!important;
    font-size:.74rem!important;
  }
}