/* The inquiry flow shares the site's type and blue action colour. */
.button.primary:not(:disabled):hover { color: #fff; }
#dialog:is([data-kind="quote"],[data-kind="request"]) {
  width: min(1120px,calc(100vw - 64px));
  max-height: calc(100dvh - 48px);
  height: auto;
  border: 1px solid #e2e5e9;
  border-radius: 20px;
  outline: none;
  box-shadow: 0 28px 90px #10203936;
}
#dialog[data-kind="request"] { width: min(620px,calc(100vw - 64px)); height: fit-content; }
#dialog[data-kind="quote"][open] { animation: inquiry-enter .32s cubic-bezier(.22,.7,.3,1) both; }
#dialog:is([data-kind="quote"],[data-kind="request"])::backdrop { background: #11203670; animation: inquiry-backdrop .25s ease both; }
@keyframes inquiry-enter {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes inquiry-backdrop { from { opacity: 0; } to { opacity: 1; } }
#dialog:is([data-kind="quote"],[data-kind="request"]) .dialogtop { grid-template-columns: 1fr auto; gap: 16px; padding: 12px 26px; border-color: #eceef1; }
#dialog:is([data-kind="quote"],[data-kind="request"]) .dialogtop>.iconbutton[data-action="close"] { grid-column: 2; }
#dialog:is([data-kind="quote"],[data-kind="request"]) .backlink { width: fit-content; color: #687587; }
#dialog:is([data-kind="quote"],[data-kind="request"]) .backlink:hover { color: #145df5; }
#dialog[data-kind="quote"] .dialogbody { padding: 30px 32px 34px; }
#dialog[data-kind="quote"] .dialogheading { margin-bottom: 26px; }
#dialog[data-kind="quote"] .dialogheading h2 { font-size: calc(clamp(30px,3vw,38px) + 2px); font-weight: 600; }
#dialog[data-kind="quote"] .dialogheading p { margin-top: 13px; max-width: 60ch; font-size: 16px; line-height: 1.75; }
#dialog[data-kind="quote"] .quotegrid { grid-template-columns: minmax(0,.72fr) minmax(0,1.28fr); gap: 30px; align-items: start; }
#dialog[data-kind="quote"] .quotebasket { padding: 24px; border: 1px solid #eceef2; border-radius: 14px; background: #f6f7f9; }
#dialog[data-kind="quote"] .quotebasket h3 { margin-bottom: 10px; font-size: 23px; font-weight: 600; }
#dialog[data-kind="quote"] .quotebasket>.note { margin-top: 24px; padding: 18px 0 0; border: 0; border-top: 1px solid #dfe3e9; background: transparent; color: #667386; font-size: 14px; line-height: 1.8; }
#quoteform { min-width: 0; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
#quoteform .field { min-width: 0; gap: 8px; color: #566579; font-size: 15px; line-height: 1.5; }
#quoteform .field input,
#quoteform .field textarea,
#quoteform .quote-purpose-trigger {
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid #d9dfe7;
  border-radius: 9px;
  background: #fff;
  color: #192b43;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
#quoteform .field textarea { min-height: 110px; resize: vertical; }
#quoteform .field input::placeholder,
#quoteform .field textarea::placeholder { color: #7c8693; opacity: 1; }
#quoteform .field input:focus,
#quoteform .field textarea:focus,
#quoteform .quote-purpose-trigger:focus,
#quoteform .quote-purpose-trigger[aria-expanded="true"] {
  outline: none;
  outline-offset: 0;
  border-color: #7e8998;
  box-shadow: 0 0 0 3px #192b4309;
}
#quoteform input:autofill { box-shadow: 0 0 0 1000px #fff inset; color: #192b43; }
#quoteform input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset; -webkit-text-fill-color: #192b43; caret-color: #192b43; }
#dialog:is([data-kind="quote"],[data-kind="request"]) :is(button,a,input[type="checkbox"]):focus-visible { outline: 2px solid #747f8e; outline-offset: 3px; }
#quoteform .quote-purpose-trigger:focus-visible { outline: none; }
#quoteform .checkbox { align-items: flex-start; gap: 10px; margin-top: 2px; font-size: 14px; line-height: 1.75; color: #697789; }
#quoteform .checkbox input { width: 16px; height: 16px; flex: 0 0 16px; margin: 3px 0 0; accent-color: #192b43; }
#quoteform .checkbox a { color: #34465d; text-underline-offset: 3px; }
#quoteform .checkbox a:hover { color: #145df5; }
#quoteform .button.primary { min-height: 54px; padding-inline: 22px; gap: 18px; font-size: 16px; font-weight: 600; color: #fff; }
#quoteform .quote-submit .quote-submit-label { display: block; width: auto; height: auto; flex: 0 1 auto; font-size: inherit; line-height: 1.5; }
#quoteform .quote-submit>svg,
.quote-success .button>svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#quoteform .button.primary:not(:disabled):hover { background: #074ad5; color: #fff; }
.quote-purpose { position: relative; }
.quote-purpose-trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: start; }
.quote-purpose-trigger>span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quote-purpose-trigger svg { width: 18px; height: 18px; margin-inline-end: 3px; flex: 0 0 18px; fill: none; stroke: #4b5b70; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; transition: transform .22s; }
.quote-purpose-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.quote-purpose-menu {
  position: absolute;
  top: calc(100% + 7px);
  inset-inline: 0;
  z-index: 12;
  max-height: min(252px,40dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  border: 1px solid #e2e6ec;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 34px #172b4d1c;
  animation: purpose-reveal .2s cubic-bezier(.22,.7,.3,1) both;
}
@keyframes purpose-reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.quote-purpose-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 40px; padding: 9px 12px; border-radius: 7px; color: #34465d; font-size: 15px; line-height: 1.6; text-align: start; transition: background .15s,color .15s; }
.quote-purpose-option>svg { width: 16px; height: 16px; flex: 0 0 16px; opacity: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.quote-purpose-option[aria-selected="true"]>svg { opacity: 1; }
.quote-purpose-option:not(:disabled):hover,
.quote-purpose-option:focus,
.quote-purpose-option[aria-selected="true"] { background: #f0f3f7; color: #17273d; outline: none; }
#quoteform .quote-purpose-option:focus-visible { outline: none; box-shadow: inset 0 0 0 1px #9ba5b3; }
.quote-purpose-error { margin: 0; color: #b33939; font-size: 14px; line-height: 1.5; }
#quoteform .quote-purpose-trigger[aria-invalid="true"] { border-color: #be6666; }
.quote-success { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 350px; padding: 55px 30px 65px; text-align: center; animation: inquiry-enter .3s ease both; }
.quote-success-icon { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #dce7f8; border-radius: 50%; color: #145df5; background: #f3f7ff; }
.quote-success-icon>.icon { width: 28px; height: 28px; stroke-width: 1.8; }
.quote-success h2 { max-width: 19ch; margin: 24px auto 30px; color: #192b43; font-size: calc(clamp(28px,3.3vw,38px) + 2px); font-weight: 600; line-height: 1.2; }
.quote-success h2:focus { outline: none; }
.quote-success .button { min-height: 52px; }
.quote-success .button>span { font-size: inherit; line-height: 1.5; }
@media(max-width:900px) {
  #dialog[data-kind="quote"] .quotegrid { grid-template-columns: minmax(0,1fr); gap: 24px; }
  #dialog[data-kind="quote"] .quotebasket { padding: 20px; }
}
@media(max-width:640px) {
  #dialog:is([data-kind="quote"],[data-kind="request"]) { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); margin: auto; border-radius: 15px; }
  #dialog:is([data-kind="quote"],[data-kind="request"]) .dialogtop { padding: 8px 16px; }
  #dialog[data-kind="quote"] .dialogbody { padding: 25px 20px; }
  #quoteform { grid-template-columns: minmax(0,1fr); gap: 17px; }
  #quoteform .span2 { grid-column: 1; }
  #quoteform .field input, #quoteform .field textarea, #quoteform .quote-purpose-trigger { font-size: 18px; }
  .quote-purpose-option { min-height: 44px; font-size: 16px; }
  .quote-success { min-height: 330px; padding: 42px 23px 50px; }
}
@media(prefers-reduced-motion:reduce) {
  #dialog[data-kind="quote"][open], #dialog:is([data-kind="quote"],[data-kind="request"])::backdrop, .quote-purpose-menu, .quote-success { animation: none; }
  #quoteform .field input, #quoteform .field textarea, #quoteform .quote-purpose-trigger, .quote-purpose-trigger svg, .quote-purpose-option { transition: none; }
}