/* "Get a Free Quote" popup: round on tablets and desktops, softly rounded card on phones. */
html.qp-lock { overflow: hidden; }

.qp-overlay { position: fixed; inset: 0; z-index: 1090; display: grid; place-items: center; padding: 16px; background: rgba(8, 22, 40, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s ease; }
.qp-overlay[hidden] { display: none; }
.qp-overlay.is-open { opacity: 1; }

.qp-dialog { --qp-d: min(92vw, 84vh, 600px); position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; width: var(--qp-d); aspect-ratio: 1; border-radius: 50%; color: var(--ink); font-size: clamp(10px, calc(var(--qp-d) / 46), 15px); box-shadow: 0 40px 100px rgba(0, 0, 0, .5); transform: scale(.7) rotate(-6deg); opacity: 0; transition: transform .5s cubic-bezier(.2, .9, .3, 1.25), opacity .3s ease; }
.qp-overlay.is-open .qp-dialog { transform: none; opacity: 1; }
/* Two layers sit BEHIND the text: the gradient ring (back) and the clean white face (front). */
.qp-dialog:before { content: ''; position: absolute; inset: -14px; z-index: -2; border-radius: inherit; background: conic-gradient(from 0deg, var(--blue), var(--cyan), #8ff3d2, var(--blue)); animation: qp-spin 9s linear infinite; }
.qp-dialog:after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(circle at 50% 22%, #fff 0%, #f7fbff 70%, #eef5fc 100%); border: 6px solid #fff; }
@keyframes qp-spin { to { transform: rotate(360deg); } }

.qp-badge { position: absolute; top: 0; left: 50%; z-index: 3; padding: .5em 1.5em; color: #fff; font-weight: 800; font-size: 1.02em; white-space: nowrap; background: linear-gradient(135deg, var(--cyan), var(--blue)); border: 3px solid #fff; border-radius: 999px; box-shadow: 0 10px 24px rgba(23, 105, 224, .38); transform: translate(-50%, -50%); }
.qp-close { position: absolute; top: calc(var(--qp-d) * .125); right: calc(var(--qp-d) * .125); z-index: 3; display: grid; place-items: center; width: 46px; height: 46px; color: #fff; font-size: 1rem; background: var(--blue); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 8px 20px rgba(16, 42, 67, .35); cursor: pointer; transition: transform .25s ease, background-color .2s ease; }
.qp-close:hover { background: var(--navy); transform: rotate(90deg) scale(1.06); }

.qp-inner { width: 80%; max-height: 80%; padding: 0 .3em; overflow-y: hidden; text-align: center; scrollbar-width: thin; scrollbar-color: rgba(23, 105, 224, .35) transparent; }
.qp-inner.is-scroll { overflow-y: auto; }
.qp-inner > * { margin-top: 0; }
.qp-label { display: inline-block; margin-bottom: .7em; padding: .35em 1em; color: #0b7f89; font-weight: 800; font-size: .84em; background: rgba(25, 184, 197, .13); border: 1px solid rgba(25, 184, 197, .4); border-radius: 999px; }
.qp-intro { max-width: 82%; margin: 0 auto .8em; color: #5a7188; font-size: .92em; line-height: 1.45; }
.qp-title { display: inline-block; margin: 0 0 .75em; padding: .45em 1em; color: #fff; font: 800 1.25em/1.2 'Plus Jakarta Sans', sans-serif; text-transform: uppercase; letter-spacing: .01em; background: linear-gradient(135deg, var(--blue), #0c7fd0); border-radius: .6em; box-shadow: 0 8px 20px rgba(23, 105, 224, .26); }
.qp-subtitle { display: inline-block; margin-bottom: .8em; padding: .45em 1.2em; color: var(--navy); font-weight: 800; font-size: .95em; background: #fff; border: 1.5px dashed var(--cyan); border-radius: .7em; }
.qp-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; margin-bottom: .8em; }
.qp-box { padding: .55em .4em; font-size: .88em; line-height: 1.35; background: #fff; border: 1px solid #dbe8f4; border-radius: .8em; }
.qp-box strong { display: block; margin-bottom: .05em; color: var(--blue); }
.qp-box span { display: block; color: #35506b; }
.qp-note { display: inline-block; margin-bottom: .8em; padding: .45em 1.2em; color: #fff; font-size: .88em; font-weight: 700; background: var(--navy); border-radius: 999px; }
.qp-contact { margin-bottom: .7em; color: #35506b; font-size: .88em; line-height: 1.5; }
.qp-contact a { color: var(--blue); font-weight: 700; text-decoration: none; }
.qp-logo { display: block; max-width: 130px; max-height: 3em; margin: 0 auto .7em; object-fit: contain; }
.qp-cta { display: inline-flex; align-items: center; justify-content: center; gap: .5em; margin-bottom: .2em; padding: .7em 1.6em; color: #fff; font-weight: 800; letter-spacing: .02em; text-decoration: none; background: linear-gradient(135deg, #1769e0, #1288d6); border-radius: 999px; box-shadow: 0 8px 20px rgba(23, 105, 224, .33); transition: transform .25s ease, box-shadow .25s ease; }
.qp-cta:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 14px 28px rgba(23, 105, 224, .45); }

/* Content appears one piece after another when the popup opens. */
.qp-overlay.is-open .qp-inner > * { animation: qp-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.qp-overlay.is-open .qp-inner > :nth-child(1) { animation-delay: .2s; }
.qp-overlay.is-open .qp-inner > :nth-child(2) { animation-delay: .27s; }
.qp-overlay.is-open .qp-inner > :nth-child(3) { animation-delay: .34s; }
.qp-overlay.is-open .qp-inner > :nth-child(4) { animation-delay: .41s; }
.qp-overlay.is-open .qp-inner > :nth-child(5) { animation-delay: .48s; }
.qp-overlay.is-open .qp-inner > :nth-child(n+6) { animation-delay: .55s; }
@keyframes qp-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* "Block" shape (admin choice): a rounded card with the same ring. Phones always use this shape. */
.qp-dialog.is-block { display: block; width: min(94vw, 640px); max-height: 90vh; aspect-ratio: auto; padding: 2.6em 1.8em 1.7em; font-size: 16px; border-radius: 30px; }
.qp-dialog.is-block:before { inset: -9px; animation: none; }
.qp-dialog.is-block:after { border-width: 5px; }
.qp-dialog.is-block .qp-inner { width: 100%; max-height: calc(90vh - 6em); overflow-y: auto; }
.qp-dialog.is-block .qp-close { top: .6rem; right: .6rem; width: 40px; height: 40px; }
@media (max-width: 575px) {
	.qp-dialog { display: block; width: min(92vw, 440px); max-height: 86vh; aspect-ratio: auto; padding: 2.4rem 1rem 1.3rem; font-size: 15px; border-radius: 34px; }
	.qp-dialog:before { inset: -9px; animation: none; }
	.qp-dialog:after { border-width: 5px; }
	.qp-inner { width: 100%; max-height: calc(86vh - 4.6rem); padding: 0 .25rem; overflow-y: auto; }
	.qp-close { top: .55rem; right: .55rem; width: 40px; height: 40px; }
	.qp-badge { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
	.qp-overlay, .qp-dialog, .qp-close, .qp-cta { transition: none; }
	.qp-dialog { transform: none; }
	.qp-dialog:before, .qp-overlay.is-open .qp-inner > * { animation: none; }
}