/* Burstlikes v12: support / contact page. */
.sp-hero { background: var(--bx-pink); padding: 56px 0 0; overflow: hidden; }
.sp-hero__txt { text-align: center; max-width: 760px; margin: 0 auto; }
html body .sp-hero h1 { font-size: clamp(2.8rem, 6vw, 5.4rem) !important; line-height: .95; margin: 0 0 16px; color: var(--bx-ink) !important; text-shadow: none; }
.sp-hero__txt p { font: 600 1.15rem/1.5 var(--bx-body); color: var(--bx-ink); margin: 0; }
.sp-status { list-style: none; margin: 30px auto 0; padding: 8px; display: grid; gap: 8px; max-width: 460px; background: var(--bx-ink); border-radius: 30px; }
.sp-status li { background: rgba(255, 255, 255, .08); border-radius: 22px; padding: 16px 20px; display: grid; gap: 6px; }
.sp-status strong { display: flex; align-items: center; gap: 10px; font: 400 1.5rem/1 var(--bx-display); text-transform: uppercase; color: #fff; }
.sp-status span { font: 500 .9rem/1.45 var(--bx-body); color: rgba(255, 255, 255, .75); }
.sp-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sp-dot--y { background: var(--bx-yellow); } .sp-dot--g { background: var(--bx-lime); }
.sp-stage { position: relative; max-width: 560px; margin: 40px auto 0; }
.sp-stage__m { position: absolute; bottom: -4px; z-index: 0; width: 300px; height: auto; }
.sp-stage__m--l { left: -300px; }
.sp-stage__m--r { right: -260px; }
.sp-form { position: relative; z-index: 2; background: #fff; border-radius: 44px 44px 0 0; padding: 30px 30px 0; box-shadow: none; }
.sp-form form { display: grid; gap: 8px; padding-bottom: 30px; }
.sp-f { display: block; margin: 0; }
.sp-f input, .sp-f select, .sp-f textarea { width: 100%; border: 2px solid transparent; border-radius: 16px; background: var(--bx-lav); padding: 17px 18px; font: 600 1rem/1.3 var(--bx-body); color: var(--bx-ink); outline: 0; appearance: none; -webkit-appearance: none; resize: vertical; }
.sp-f select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314081f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 44px; }
.sp-f input::placeholder, .sp-f textarea::placeholder { color: #8d8176; font-weight: 500; }
.sp-f input:focus, .sp-f select:focus, .sp-f textarea:focus { border-color: var(--bx-orange); background: #fff; }
.sp-f .is-invalid { border-color: #ff4d4d; }
.sp-form .bx-btn { justify-content: center; height: 58px; width: 100%; margin-top: 6px; }
.sp-err { list-style: none; margin: 4px 0; padding: 0; color: #d12c2c; font: 700 .9rem/1.4 var(--bx-body); }
.sp-form .alert { border: 0; border-radius: 16px; margin-bottom: 14px; }

.sp-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 22px; }
.sp-tabs button { border: 0; background: var(--bx-lav); color: var(--bx-ink); border-radius: 14px; padding: 13px 22px; font: 800 .86rem/1 var(--bx-body); letter-spacing: .03em; text-transform: uppercase; cursor: pointer; }
.sp-tabs button:hover { background: var(--bx-lav-d); }
.sp-tabs button.is-on { background: var(--bx-ink); color: #fff; }

@media (max-width: 1280px) { .sp-stage__m { display: none; } }
@media (max-width: 640px) { .sp-form { padding: 22px 18px 0; border-radius: 32px 32px 0 0; } .sp-hero { padding-top: 36px; } }
html body:has(.sp-hero) header.Otaley-header.bx-head { background: var(--bx-pink) !important; }

/* v2: status cards beside the form */
.sp-stage { max-width: 1180px; margin: 36px auto 0; display: grid; grid-template-columns: 1fr minmax(0, 560px) 1fr; gap: 24px; align-items: end; }
.sp-stage .sp-form { grid-column: 2; grid-row: 1; }
.sp-side { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; align-self: stretch; }
.sp-side--l { grid-column: 1; grid-row: 1; align-items: flex-end; }
.sp-side--r { grid-column: 3; grid-row: 1; align-items: flex-start; }
.sp-card { background: var(--bx-ink); border-radius: 26px; padding: 20px 22px; display: grid; gap: 8px; width: 100%; max-width: 280px; }
.sp-card strong { display: flex; align-items: center; gap: 10px; font: 400 1.6rem/1 var(--bx-display); text-transform: uppercase; color: #fff; }
.sp-card span { font: 500 .92rem/1.45 var(--bx-body); color: rgba(255, 255, 255, .78); }
.sp-side img { width: 100%; max-width: 260px; height: auto; margin-bottom: -4px; }
.sp-side--l img { align-self: flex-end; } .sp-side--r img { align-self: flex-start; }
@media (max-width: 1100px) {
  .sp-stage { grid-template-columns: 1fr 1fr; }
  .sp-side { grid-row: 1; } .sp-side--l { grid-column: 1; align-items: stretch; } .sp-side--r { grid-column: 2; align-items: stretch; }
  .sp-side img { display: none; } .sp-card { max-width: none; }
  .sp-stage .sp-form { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 640px) { .sp-stage { grid-template-columns: 1fr; } .sp-side--l, .sp-side--r { grid-column: 1; grid-row: auto; } .sp-stage .sp-form { grid-row: auto; } }

/* v3: calm layout: support line under the intro, mascots beside the form */
.sp-line { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; background: var(--bx-ink); color: #fff; border-radius: 999px; padding: 11px 20px 11px 16px; font: 700 .92rem/1.3 var(--bx-body); }
.sp-stage { margin-top: 30px; align-items: end; }
.sp-side { justify-content: flex-end; }
.sp-side img { max-width: 300px; }
.sp-side--l img { align-self: flex-end; margin-right: 10px; } .sp-side--r img { align-self: flex-start; margin-left: 10px; }
@media (max-width: 1100px) { .sp-side { display: none; } .sp-stage .sp-form { grid-column: 1 / -1; grid-row: 1; } }