/* ==========================================================================
   Business pricing / Choose: "Ready to choose?"
   Framer: section 6 (framer-1pryv7a) > Header + Row of Card (dark card framer-ri7x4, light card framer-1s8np7n).
   Page breakpoints for this section: desktop >= 1440, tablet 810-1439.98 (cards stack), phone <= 809.98.
   Text blocks fade in once at 50% visible (js/60-choose.js).
   ========================================================================== */

.nf-bp-choose {
  /* Framer appear: opacity 0 -> 1, ~420ms spring without overshoot, sampled per frame on live */
  --nf-bp-choose-fade-dur: 430ms;
  --nf-bp-choose-fade-ease: linear(0, 0.011 2.8%, 0.062 6.7%, 0.134 10.5%, 0.223 14.4%, 0.317 18.4%, 0.405 22.3%, 0.493 26.3%, 0.574 30%, 0.651 34.2%, 0.707 37.9%, 0.762 41.6%, 0.806 45.6%, 0.846 49.5%, 0.879 53.3%, 0.905 57.2%, 0.927 60.9%, 0.945 64.9%, 0.96 69.3%, 0.969 72.6%, 0.978 76.5%, 0.984 80.5%, 0.99 84.4%, 0.993 88.1%, 0.996 92.1%, 0.998 96%, 1);
  position: relative; display: flex; flex-flow: column; justify-content: flex-start; align-items: flex-start; gap: 32px;
  flex: 0 0 auto; width: 100%; height: 752px; padding: 60px 80px 100px; overflow: clip;
  background-color: var(--nf-white);
}
[data-nf-bp-choose-appear] { opacity: 0; will-change: transform; transition: opacity var(--nf-bp-choose-fade-dur) var(--nf-bp-choose-fade-ease); }
[data-nf-bp-choose-appear].is-in { opacity: 1; }

/* ---------- Desktop (>= 1440) ---------- */
.nf-bp-choose__header {
  position: relative; display: flex; flex-flow: column; justify-content: center; align-items: center; gap: 20px;
  flex: 0 0 auto; width: 100%; height: min-content; padding: 0; overflow: clip;
}
.nf-bp-choose__title-box, .nf-bp-choose__sub-box, .nf-bp-choose__h-box, .nf-bp-choose__body-box {
  position: relative; flex: 0 0 auto; width: 100%; height: auto;
}
.nf-bp-choose__title-box { max-width: 100%; }
.nf-bp-choose__title, .nf-bp-choose__sub, .nf-bp-choose__h, .nf-bp-choose__body {
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word; text-align: start; text-transform: none;
}
.nf-bp-choose__title {
  font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", sans-serif; font-size: 52px; font-weight: 500;
  line-height: 1.1em; letter-spacing: normal; color: var(--nf-black);
}
.nf-bp-choose__sub {
  font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", sans-serif; font-size: 24px; font-weight: 400;
  line-height: 1.25em; letter-spacing: -0.04em; color: var(--nf-grey-61);
}
.nf-bp-choose__row {
  position: relative; display: flex; flex-flow: row; justify-content: center; align-items: center; gap: 20px;
  flex: 0 0 auto; width: 100%; height: 442px; padding: 0; overflow: clip;
}
.nf-bp-choose__dark-wrap {
  position: relative; display: flex; flex-flow: column; justify-content: center; align-items: center; gap: 10px;
  flex: 1 0 0px; width: 1px; height: 100%; padding: 0; overflow: clip;
}
.nf-bp-choose__card {
  position: relative; display: flex; flex-flow: column; justify-content: flex-start; align-items: flex-start; gap: 32px;
  padding: 32px; overflow: clip; border-radius: 24px; will-change: transform;
}
.nf-bp-choose__card--dark { flex: 1 0 0px; width: 100%; height: 1px; background-color: #000; }
.nf-bp-choose__card--light { flex: 1 0 0px; width: 1px; height: 100%; background-color: rgb(244, 244, 244); }
.nf-bp-choose__content {
  position: relative; display: flex; flex-flow: column; justify-content: flex-start; gap: 20px;
  flex: 1 0 0px; width: 100%; height: 1px; padding: 0; overflow: clip;
}
.nf-bp-choose__content--dark { align-items: center; }
.nf-bp-choose__content--light { align-items: flex-start; }
.nf-bp-choose__h {
  font-family: "SF Pro Display Medium", "SF Pro Display Medium Placeholder", sans-serif; font-size: 42px; font-weight: 500;
  line-height: 1.25em; letter-spacing: normal; color: var(--nf-black);
}
.nf-bp-choose__body {
  font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", sans-serif; font-size: 28px; font-weight: 400;
  line-height: 1.35em; letter-spacing: normal; color: var(--nf-black);
}
.nf-bp-choose__card--dark .nf-bp-choose__h, .nf-bp-choose__card--dark .nf-bp-choose__body { color: var(--nf-white); }

.nf-bp-choose__ctas {
  position: relative; display: flex; flex-flow: column; justify-content: center; align-items: flex-start; gap: 16px;
  flex: 0 0 auto; width: 100%; height: min-content; padding: 0; overflow: clip;
}
.nf-bp-choose__btn-box { position: relative; flex: 0 0 auto; width: auto; height: auto; }
.nf-bp-choose__btn {
  position: relative; display: flex; flex-flow: row; justify-content: center; align-items: center; gap: 10px;
  width: min-content; height: 54px; padding: 16px 24px; overflow: visible; cursor: pointer; text-decoration: none;
  border-radius: 32px; background-color: var(--nf-green); color: rgb(0, 0, 238); /* UA link colour, as computed on live (text colour is on the label) */
  transition: background-color 0.2s ease-out;
}
.nf-bp-choose__btn-text, .nf-bp-choose__link-text {
  position: relative; display: block; flex: 0 0 auto; width: auto; height: auto; white-space: pre;
  font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", sans-serif; font-size: 21px; font-weight: 400;
  line-height: 1.2em; letter-spacing: normal; color: var(--nf-black); text-align: start;
}
.nf-bp-choose__alt {
  position: relative; display: flex; flex-flow: row; justify-content: flex-start; align-items: center; gap: 4px;
  flex: 0 0 auto; width: 100%; height: min-content; padding: 0; overflow: clip;
}
.nf-bp-choose__alt-box { position: relative; flex: 0 0 auto; width: auto; height: auto; }
.nf-bp-choose__alt-text {
  font-family: "SF Pro Display Regular", "SF Pro Display Regular Placeholder", sans-serif; font-size: 21px; font-weight: 400;
  line-height: 1.25em; letter-spacing: -0.04em; color: var(--nf-black); text-align: start; white-space: pre;
}
.nf-bp-choose__link-box { position: relative; flex: 0 0 auto; width: 33%; height: 54px; }
.nf-bp-choose__link {
  /* live "Tier 3 Black": 33% wide, so the label overflows its padding and stays centred */
  position: relative; display: flex; flex-flow: row; justify-content: center; align-items: center; gap: 4px;
  width: 100%; height: 100%; padding: 16px 24px; overflow: visible; cursor: pointer; text-decoration: none;
  border-radius: 32px; background-color: rgba(0, 0, 0, 0); color: rgb(0, 0, 238);
}
.nf-bp-choose__link-text { text-decoration: underline; text-decoration-color: var(--nf-black); }
.nf-bp-choose__arrow { position: relative; display: block; flex: 0 0 auto; width: 24px; height: 24px; overflow: hidden; }
.nf-bp-choose__btn:focus-visible, .nf-bp-choose__link:focus-visible { outline: 2px solid var(--nf-black); outline-offset: 2px; } /* not on live, added for keyboard users */
.nf-bp-choose__btn:active, .nf-bp-choose__link:active { color: rgb(255, 0, 0); } /* UA active link colour, as computed on live (labels stay black) */
@media (hover: hover) and (min-width: 810px) {
  .nf-bp-choose__btn:hover { background-color: rgb(165, 207, 118); }
}
@media (hover: hover) and (min-width: 810px) and (max-width: 1439.98px) {
  /* live: the tablet instance of "Book a Healthy Building Assessment" has no hover state ("Browse Solution" does) */
  .nf-bp-choose__btn--book:hover { background-color: var(--nf-green); }
}

/* ---------- Tablet (810 to 1439.98): cards stack ---------- */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .nf-bp-choose { height: min-content; padding: 60px 60px 80px; }
  .nf-bp-choose__sub { letter-spacing: -0.02em; }
  .nf-bp-choose__row { flex-direction: column; height: min-content; }
  .nf-bp-choose__dark-wrap { flex: 0 0 auto; width: 100%; height: 389px; }
  .nf-bp-choose__body-box--dark { flex: 1 0 0px; height: 1px; }
  .nf-bp-choose__card--light { flex: 0 0 auto; width: 100%; height: min-content; }
  .nf-bp-choose__content--light { flex: 0 0 auto; height: min-content; }
}

/* ---------- Phone (<= 809.98) ---------- */
@media (max-width: 809.98px) {
  .nf-bp-choose { gap: 20px; height: min-content; padding: 32px 16px; }
  .nf-bp-choose__header { gap: 10px; }
  .nf-bp-choose__title { font-size: 28px; }
  .nf-bp-choose__sub { font-size: 15px; letter-spacing: -0.02em; }
  .nf-bp-choose__row { flex-direction: column; gap: 10px; height: min-content; }
  .nf-bp-choose__dark-wrap { flex: 0 0 auto; width: 100%; height: min-content; }
  .nf-bp-choose__card { gap: 20px; padding: 20px 16px; }
  .nf-bp-choose__card--dark { flex: 0 0 auto; height: min-content; }
  .nf-bp-choose__card--light { flex: 0 0 auto; width: 100%; height: min-content; }
  .nf-bp-choose__content { flex: 0 0 auto; gap: 10px; height: min-content; }
  .nf-bp-choose__h { font-size: 20px; }
  .nf-bp-choose__body { font-size: 15px; line-height: 1.25em; }
  .nf-bp-choose__ctas { gap: 10px; }
  .nf-bp-choose__btn { gap: 5px; height: min-content; max-height: 35px; padding: 16px; }
  .nf-bp-choose__btn:active { background-color: rgb(165, 207, 118); } /* live phone variant: tap shows the hover colour, no hover */
  .nf-bp-choose__btn-text, .nf-bp-choose__link-text { font-size: 15px; }
  .nf-bp-choose__alt-text { font-size: 15px; }
  .nf-bp-choose__link-box { width: 46%; height: 35px; }
  .nf-bp-choose__link { height: 100%; max-height: 35px; padding: 0; }
}

@media (prefers-reduced-motion: reduce) { [data-nf-bp-choose-appear] { transition: none; } }

/* "Not ready to book? Speak to an expert ->" (Danny, 2026-10-26): live gives the link a fixed share of the row (33%,
   46% on phone) and centres the label in it, leaving a wide gap after "Not ready to book?". The link now hugs its label
   and sits 12px after the question (8px on phone); the arrow follows the label 4px later. */
.nf-bp-choose__alt { gap: 12px; }
.nf-bp-choose__link-box { width: auto; }
.nf-bp-choose__link { width: auto; justify-content: flex-start; padding-left: 0; padding-right: 0; }
@media (max-width: 809.98px) {
  .nf-bp-choose__alt { gap: 8px; }
  .nf-bp-choose__link-box { width: auto; }
}

/* ---------- Design pass (Danny 2026-10-27, not on live): office photo behind the dark card ---------- */
.nf-bp-choose__card--dark { position: relative; isolation: isolate; overflow: hidden; }
.nf-bp-choose__card--dark > :not(.nf-bp-choose__bg) { position: relative; z-index: 1; }
.nf-bp-choose__bg { position: absolute !important; inset: 0; z-index: 0 !important; pointer-events: none; }
.nf-bp-choose__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.nf-bp-choose__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.75) 45%, rgba(0, 0, 0, 0.35) 100%); }
.nf-bp-choose__card--light { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); }
@media (max-width: 809.98px) {
  .nf-bp-choose__bg::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.9) 100%); }
}