/* Estimate modal. Full page overlay with dark blurred backdrop plus a light glassmorphism panel. */
.modal{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:200;
  display:none;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  padding:clamp(1rem,4vw,2.5rem);
  opacity:0;
  -webkit-transition:opacity .28s ease;
  transition:opacity .28s ease;
}
.modal[data-open="true"]{display:-webkit-box;display:-ms-flexbox;display:flex;opacity:1}

.modal__backdrop{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:rgba(6,6,6,.72);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  backdrop-filter:blur(10px) saturate(140%);
  cursor:pointer;
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .modal__backdrop{background:rgba(6,6,6,.85)}
}

.modal__panel{
  position:relative;
  width:min(560px,100%);
  max-height:calc(100vh - 2rem);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:clamp(1.5rem,3vw,2.25rem);
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.6);
  border-radius:20px;
  -webkit-box-shadow:0 40px 90px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.05);
          box-shadow:0 40px 90px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.05);
  -webkit-transform:scale(.94) translateY(12px);
          transform:scale(.94) translateY(12px);
  -webkit-transition:-webkit-transform .35s ease;
  transition:transform .35s ease;
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .modal__panel{background:#ffffff}
}
.modal[data-open="true"] .modal__panel{-webkit-transform:none;transform:none}

.modal__close{
  position:absolute;top:14px;right:14px;
  width:40px;height:40px;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  background:rgba(0,0,0,.06);
  border:0;border-radius:50%;
  color:var(--rjw-ink);
  cursor:pointer;
  -webkit-appearance:none;appearance:none;
  -webkit-transition:background .2s ease,-webkit-transform .2s ease;
  transition:background .2s ease,transform .2s ease;
  z-index:2;
}
.modal__close:hover{background:var(--rjw-accent);color:#fff;-webkit-transform:rotate(90deg);transform:rotate(90deg)}
.modal__close svg{width:20px;height:20px}

.modal__head{margin-bottom:1.5rem}
.modal__eyebrow{
  display:inline-block;
  padding:.3rem .7rem;
  background:var(--rjw-accent-tint);
  color:var(--rjw-accent-dark);
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.72rem;
  line-height:1;
  letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:1rem;
}
.modal__title{
  font-family:var(--font-display);
  font-size:clamp(1.5rem,2vw + .8rem,2rem);
  font-weight:600;
  margin:0 0 .5rem;
  color:var(--rjw-ink);
  letter-spacing:-.015em;
}
.modal__lead{
  margin:0;
  color:var(--rjw-muted);
  font-size:.95rem;
  line-height:1.5;
}

.modal__form{display:grid;gap:1rem}
.modal__grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:520px){.modal__grid{grid-template-columns:1fr 1fr}}

/* Floating label field. Larger tap targets. */
.ff{position:relative}
.ff__input{
  width:100%;
  padding:22px 20px 10px 20px;
  background:#fff;
  color:var(--rjw-ink);
  border:1.5px solid #d0d0d0;
  border-radius:8px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:16px;
  line-height:1.35;
  min-height:56px;
  -webkit-appearance:none;appearance:none;
  -webkit-transition:border-color .2s ease,-webkit-box-shadow .2s ease;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.ff__input--area{padding-top:26px;min-height:130px;resize:vertical;line-height:1.5}
.ff__input::-webkit-input-placeholder{color:transparent}
.ff__input::-moz-placeholder{color:transparent;opacity:1}
.ff__input:-ms-input-placeholder{color:transparent}
.ff__input::-ms-input-placeholder{color:transparent}
.ff__input::placeholder{color:transparent}
.ff__input:focus{
  outline:0;
  border-color:var(--rjw-accent);
  -webkit-box-shadow:0 0 0 4px rgba(200,16,46,.15);
          box-shadow:0 0 0 4px rgba(200,16,46,.15);
}
.ff__input:invalid:not(:placeholder-shown){
  border-color:#d94141;
  -webkit-box-shadow:0 0 0 4px rgba(217,65,65,.12);
          box-shadow:0 0 0 4px rgba(217,65,65,.12);
}
.ff__label{
  position:absolute;
  top:18px;left:20px;
  color:#7a7a7a;
  font-family:var(--font-body);
  font-weight:500;
  font-size:16px;
  line-height:1;
  pointer-events:none;
  background:#fff;
  padding:0 4px;
  -webkit-transition:-webkit-transform .18s ease,color .18s ease;
  transition:transform .18s ease,color .18s ease;
  -webkit-transform-origin:left top;
  transform-origin:left top;
}
.ff__input:focus + .ff__label,
.ff__input:not(:placeholder-shown) + .ff__label{
  -webkit-transform:translateY(-16px) scale(.78);
  transform:translateY(-16px) scale(.78);
  color:var(--rjw-accent);
  font-weight:600;
}
.ff--hp{position:absolute;left:-9999px;top:-9999px}

.modal__submit{
  margin-top:.5rem;
  display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  gap:.5rem;
  min-height:56px;
  padding:16px 24px;
  background:var(--rjw-accent);
  color:#fff;
  border:0;
  border-radius:8px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:16px;
  line-height:1;
  cursor:pointer;
  -webkit-appearance:none;appearance:none;
  -webkit-box-shadow:0 12px 30px -12px rgba(200,16,46,.6);
          box-shadow:0 12px 30px -12px rgba(200,16,46,.6);
  -webkit-transition:-webkit-transform .25s ease,background .2s ease,-webkit-box-shadow .25s ease;
  transition:transform .25s ease,background .2s ease,box-shadow .25s ease;
}
.modal__submit svg{width:18px;height:18px;-webkit-transition:-webkit-transform .25s ease;transition:transform .25s ease}
.modal__submit:hover{background:var(--rjw-accent-dark);-webkit-transform:translateY(-2px);transform:translateY(-2px);-webkit-box-shadow:0 18px 40px -12px rgba(200,16,46,.75);box-shadow:0 18px 40px -12px rgba(200,16,46,.75)}
.modal__submit:hover svg{-webkit-transform:translateX(4px);transform:translateX(4px)}
.modal__submit:disabled{opacity:.65;cursor:wait;-webkit-transform:none;transform:none}

.modal__legal{
  margin:.35rem 0 0;
  text-align:center;
  color:var(--rjw-muted);
  font-size:.8rem;
}

.modal__thanks{text-align:center;padding:1rem 0}
.modal__thanks-icon{
  width:64px;height:64px;
  margin:0 auto 1.25rem;
  display:-webkit-box;display:-ms-flexbox;display:flex;
  -webkit-box-align:center;-ms-flex-align:center;align-items:center;
  -webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;
  background:-webkit-gradient(linear,left top,right bottom,from(var(--rjw-accent)),to(var(--rjw-accent-glow)));
  background:linear-gradient(135deg,var(--rjw-accent),var(--rjw-accent-glow));
  color:#fff;
  border-radius:50%;
  font-size:2rem;font-weight:700;
  -webkit-box-shadow:0 20px 40px -12px rgba(200,16,46,.6);
          box-shadow:0 20px 40px -12px rgba(200,16,46,.6);
  -webkit-animation:thanksPop .55s cubic-bezier(.34,1.56,.64,1);
  animation:thanksPop .55s cubic-bezier(.34,1.56,.64,1);
}
@-webkit-keyframes thanksPop{from{-webkit-transform:scale(0);transform:scale(0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}}
@keyframes thanksPop{from{-webkit-transform:scale(0);transform:scale(0);opacity:0}to{-webkit-transform:none;transform:none;opacity:1}}
.modal__thanks h3{font-family:var(--font-display);font-size:1.6rem;margin:0 0 .5rem;color:var(--rjw-ink)}
.modal__thanks p{color:var(--rjw-muted);margin:0 0 1.5rem;font-size:1.02rem}

body.has-modal-open{overflow:hidden}

@media(prefers-reduced-motion:reduce){
  .modal,.modal__panel{-webkit-transition:none;transition:none}
  .modal__panel{-webkit-transform:none;transform:none}
  .modal__thanks-icon{-webkit-animation:none;animation:none}
}
