.prl {
  --prl-accent: var(--brand-accent, #00b2e8);
  --prl-accent-dark: var(--brand-accent-dark, #0093c4);
  --prl-wash: var(--brand-wash, #eaf7fd);
  --prl-ink: var(--brand-ink, #4a4a4a);
  --prl-heading-weight: var(--brand-heading-weight, 700);
  --prl-dark: #252525;
  --prl-head: #2b2b2b;
  --prl-field: #edf2fc;
  --prl-max: 960px;
  /* the hero runs wider than the body rows so the promo graphic can grow */
  --prl-hero-max: 1080px;
  /* cap on the centred feature-band photo; override per page if needed */
  --prl-feature-img-max: 420px;
  /* how far below the viewport top the sticky hero form stops; raise it per
     client (page or client custom CSS) when the theme has a fixed header */
  --prl-sticky-top: 24px;

  position: relative;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  font-family: var(--brand-font, inherit), sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: var(--prl-ink);
}
body:has(.prl) { overflow-x: clip; }
.prl *, .prl *::before, .prl *::after { box-sizing: border-box; }

.prl h1, .prl h2, .prl h3 { margin: 0 0 16px; line-height: 1.25; letter-spacing: 0; font-weight: var(--prl-heading-weight); color: var(--prl-head); }
.prl p { margin: 0 0 16px; }
.prl ul, .prl ol { margin: 0 0 16px; padding-left: 20px; }
.prl strong, .prl b { font-weight: 700; }
.prl a:not([class]) { color: var(--prl-accent, #00b2e8); }
.prl a:not([class]):hover { color: var(--prl-accent-dark, #0093c4); }
.prl img { display: block; max-width: 100%; height: auto; }
.prl h2 { font-size: clamp(26px, 2.6vw, 32px); }

.prl-wrap { max-width: var(--prl-max, 960px); margin: 0 auto; padding: 0 24px; }

/* ---- button: square-cornered accent block, as on the original ---- */
.prl .prl-btn {
  display: inline-block; margin-top: 8px; padding: 11px 26px; border: 0; border-radius: 2px;
  font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; text-align: center;
  background: var(--prl-accent, #00b2e8) !important; color: #fff !important;
  text-decoration: none !important; box-shadow: none !important; cursor: pointer;
}
.prl .prl-btn:hover, .prl .prl-btn:focus { background: var(--prl-accent-dark, #0093c4) !important; color: #fff !important; }

.prl a:focus-visible, .prl button:focus-visible, .prl input:focus-visible,
.prl select:focus-visible, .prl textarea:focus-visible { outline: 3px solid #f6c445; outline-offset: 2px; }

/* ---- hero ---- */
.prl-hero { background: var(--prl-accent, #00b2e8); color: #fff; padding: 40px 0 96px; }
.prl-hero .prl-wrap { max-width: var(--prl-hero-max, 1080px); }
.prl-logo { display: flex; justify-content: center; margin: 0 0 36px; }
.prl-logo img { width: 76px; height: auto; }
.prl-hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: start; }
@media (min-width: 900px) { .prl-hero-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
/* big display type for a promo with no designed graphic; (0,2,0) beats `.prl p` */
.prl .prl-hero-display {
  margin: 24px 0 20px; color: #fff; font-size: clamp(38px, 4.8vw, 56px);
  line-height: 1.02; font-weight: 800; letter-spacing: -.01em;
}
.prl-hero-promo { width: 100%; max-width: 460px; margin: 0 auto 40px; }
.prl .prl-hero-title { margin: 0 0 14px; font-size: clamp(20px, 1.9vw, 23px); line-height: 1.3; color: #fff; }
.prl-hero-body { font-size: 14px; line-height: 1.65; color: #fff; }
/* the offer terms under the package list read as the emphasis block, so the
   whole note is bold here: field copy is plain text and cannot carry <strong> */
.prl .prl-hero-note { margin-top: 18px; font-weight: 700; }
.prl .prl-hero a:not([class]), .prl .prl-close a:not([class]) { color: #fff; text-decoration: underline; }
.prl .prl-hero a:not([class]):hover, .prl .prl-close a:not([class]):hover { color: #fff; text-decoration: none; }
.prl .prl-fine { margin: 6px 0 0; font-size: 11px; font-style: italic; line-height: 1.4; }
.prl-hero .prl-fine { color: rgba(255,255,255,.92); }

/* ---- hero points: the package contents ---- */
.prl .prl-points { list-style: none; margin: 4px 0 0; padding: 0; }
.prl .prl-points li {
  position: relative; margin: 0 0 6px; padding-left: 20px;
  font-size: 14px; font-weight: 600; line-height: 1.5; color: #fff;
}
.prl .prl-points li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
}

/* ---- hero form card ---- */
.prl-card { background: #fff; border-radius: 8px; padding: 32px 28px 40px; box-shadow: 0 6px 24px rgba(0,0,0,.12); color: var(--prl-head); }
/* STICKY FORM: on desktop the card rides down beside the offer copy and stops
   at the bottom of the hero, because a sticky element never leaves its grid
   cell. align-items:start on .prl-hero-grid is what lets it move (a stretched
   cell has no room). It needs no overflow:hidden/auto ancestor: the
   body:has(.prl) rule uses overflow-x:clip, which does not break sticky.
   Phones keep the static stacked card, where sticky would cover the screen. */
@media (min-width: 900px) {
  .prl-card { margin-top: 32px; position: sticky; top: var(--prl-sticky-top, 24px); }
}
.prl-card .wpforms-field-label { color: var(--prl-head, #2b2b2b) !important; font-size: 13px !important; font-weight: 600 !important; margin-bottom: 6px !important; }
.prl-card .wpforms-required-label { color: #e0433b !important; }
.prl-card input[type="text"], .prl-card input[type="email"], .prl-card input[type="tel"],
.prl-card select, .prl-card textarea {
  width: 100%; max-width: 100% !important; padding: 12px 14px; margin-bottom: 14px; font-size: 14px; font-family: inherit;
  text-align: center; color: var(--prl-head, #2b2b2b); background: var(--prl-field, #edf2fc) !important;
  border: 0 !important; border-radius: 0; box-shadow: none !important;
}
.prl-card textarea { min-height: 110px; text-align: left; }
.prl-card ::placeholder { color: #a3aab8; opacity: 1; }
.prl-card .wpforms-submit-container { text-align: center !important; padding-top: 18px !important; }

/* ---- bottom form ---- */
.prl-close-form { max-width: 850px; margin: 40px auto 0; }
.prl-close-form .wpforms-field-label { color: #fff !important; font-size: 13px !important; font-weight: 600 !important; margin-bottom: 6px !important; }
.prl-close-form .wpforms-required-label { color: #e0433b !important; }
.prl-close-form input[type="text"], .prl-close-form input[type="email"], .prl-close-form input[type="tel"],
.prl-close-form select, .prl-close-form textarea {
  width: 100%; max-width: 100% !important; padding: 11px 14px; margin-bottom: 14px; font-size: 14px; font-family: inherit;
  color: var(--prl-head, #2b2b2b); background: #fff !important; border: 0 !important; border-radius: 2px; box-shadow: none !important;
}
.prl-close-form textarea { min-height: 140px; }
.prl-close-form ::placeholder { color: #a3aab8; opacity: 1; }
.prl-close-form .wpforms-submit-container { text-align: left !important; padding-top: 18px !important; }
.prl-close-form .prl-fine { margin-top: 36px; color: #fff; }

/* ---- FORM SUBMIT (both forms) — locked, see service-page-v3 FORM SUBMIT.
   Here the submit IS accent: the hero card is white and the closer is
   #252525, so an accent button never sits on an accent band. ---- */
.prl .prl-card input[type="submit"], .prl .prl-card button[type="submit"], .prl .prl-card .wpforms-submit,
.prl .prl-close-form input[type="submit"], .prl .prl-close-form button[type="submit"], .prl .prl-close-form .wpforms-submit {
  -webkit-appearance: none !important; appearance: none !important;
  display: inline-block !important; width: auto !important; height: auto !important;
  min-height: 0 !important; margin: 0 !important; padding: 11px 36px !important;
  border: 0 !important; border-radius: 2px !important;
  background: var(--prl-accent, #00b2e8) !important; color: #fff !important;
  box-shadow: none !important; text-shadow: none !important;
  font-family: inherit !important; font-size: 14px !important; font-weight: 600 !important;
  line-height: 1.3 !important; letter-spacing: normal !important; text-transform: none !important; cursor: pointer;
}
.prl .prl-close-form input[type="submit"], .prl .prl-close-form button[type="submit"], .prl .prl-close-form .wpforms-submit {
  padding: 12px 40px !important; font-size: 15px !important; font-weight: 700 !important;
}
.prl .prl-card input[type="submit"]:hover, .prl .prl-card button[type="submit"]:hover, .prl .prl-card .wpforms-submit:hover,
.prl .prl-card input[type="submit"]:focus, .prl .prl-card button[type="submit"]:focus, .prl .prl-card .wpforms-submit:focus,
.prl .prl-close-form input[type="submit"]:hover, .prl .prl-close-form button[type="submit"]:hover, .prl .prl-close-form .wpforms-submit:hover,
.prl .prl-close-form input[type="submit"]:focus, .prl .prl-close-form button[type="submit"]:focus, .prl .prl-close-form .wpforms-submit:focus {
  background: var(--prl-accent-dark, #0093c4) !important; color: #fff !important;
}
.prl .wpforms-submit::after { display: none !important; }
.prl .wpforms-submit[disabled] { opacity: .7; cursor: wait; }

/* ---- body rows ---- */
.prl-body { background: #fff; padding: 96px 0; }
.prl-body + .prl-body { padding-top: 24px; }
.prl-body-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
@media (min-width: 900px) { .prl-body-grid { grid-template-columns: 1fr 1fr; gap: 48px; } }
@media (min-width: 900px) { .prl-flip .prl-body-media { order: 2; } }
/* a row whose optional image is blank (body 5) drops to one centred column */
@media (min-width: 900px) {
  .prl .prl-body-grid:not(:has(.prl-body-media)) { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }
}
.prl-body-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.prl-body h2 { margin-bottom: 14px; color: var(--prl-head, #2b2b2b); }
.prl .prl-lead { margin: 0 0 16px; font-size: 14px; font-weight: 700; color: var(--prl-head, #2b2b2b); }
.prl-copy { font-size: 14px; line-height: 1.7; color: var(--prl-ink, #4a4a4a); margin-bottom: 20px; }

/* ---- feature band ---- */
.prl-feature { background: var(--prl-wash, #eaf7fd); padding: 96px 0; text-align: center; }
.prl-feature-img { width: 100%; max-width: var(--prl-feature-img-max, 420px); aspect-ratio: 3 / 2; object-fit: cover; margin: 0 auto 32px; }
.prl-feature h2 { margin-bottom: 18px; font-weight: 600; }
.prl-feature .prl-copy { max-width: 820px; margin: 0 auto 24px; }

/* ---- bottom CTA ---- */
.prl-close { background: var(--prl-dark, #252525); color: #fff; padding: 100px 0 110px; }
.prl-close-top { text-align: center; max-width: 900px; margin: 0 auto; }
.prl-close-top h2 { margin: 0 0 24px; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.3; color: #fff; }
.prl-close-body { max-width: 720px; margin: 0 auto 26px; font-size: 15px; line-height: 1.65; color: rgba(255,255,255,.9); }
.prl .prl-close-sub { margin: 0 0 14px; font-size: 20px; font-weight: 700; line-height: 1.35; color: #fff; }
.prl .prl-close-points { list-style: none; margin: 0 0 24px; padding: 0; }
.prl .prl-close-points li { margin: 0 0 4px; font-size: 15px; font-weight: 700; line-height: 1.5; color: #fff; }
.prl .prl-close-call { margin: 0; font-size: 15px; color: #fff; }
.prl .prl-tel { color: #fff !important; font-weight: 700; text-decoration: none !important; }
.prl .prl-tel:hover, .prl .prl-tel:focus { color: var(--prl-accent, #00b2e8) !important; }

/* ---- LONG-FORM COPY: keep ACF blank-line paragraph breaks ---- */
.prl-hero-body, .prl-copy, .prl-close-body { white-space: pre-line; }

@media (max-width: 899px) {
  .prl-hero { padding-bottom: 64px; }
  .prl-body, .prl-feature { padding: 64px 0; }
  .prl-body + .prl-body { padding-top: 8px; }
  .prl-close { padding: 72px 0 80px; }
}
@media (prefers-reduced-motion: reduce) { .prl * { transition: none !important; animation: none !important; } }

/* Client CSS */
@media(min-width:991px){
  .spv3-hero{
    padding-bottom: 120px !important;
    margin-top: -130px;
    padding-top: 180px;
  }
}

@media(max-width:990px){
  .spv3-hero{
    padding-top:80px;
  }
}

/* Page CSS */
/* ATI promo cyan for this page only. ATI's brand profile accent is navy (#41639e); the promo pages use the cyan from the October landing page. */
/* ATI's header is fixed at ~120px, so the sticky hero form stops 24px below it instead of sliding under it. */
.sdm-html-page .prl {
  --prl-accent: #00b2e8;
  --prl-accent-dark: #0093c4;
  --prl-wash: #eaf7fd;
  --prl-sticky-top: 144px;
}

#brx-header {
  display: none;
}