/*! BioCollex Refresh · module: contact · Contact page (body.page-id-195)
 * Phone first, then 640px+ (tablets and half-width desktop windows), then 1024px+.
 * The layout comes from this file alone and is keyed to the theme's own markup, so
 * nothing jumps when contact.js runs. contact.js adds the copy buttons, the
 * "Prefer a form?" shortcut, labelled fields with inline errors and the sending state.
 * The theme's Tailwind utilities sit in a cascade layer, so plain rules here win;
 * !important is only used against inline styles and the main file's hover rule.
 */

/* ---------- Page tokens ---------- */
.page-id-195 {
  --bxrf-ct-gut: 16px;
  --bxrf-ct-field: #f6f9fe;
  --bxrf-ct-edge: #d5e1f2;
  --bxrf-ct-err: #b42318;
  --bxrf-ct-err-line: #e0574c;
  --bxrf-ct-err-bg: #fff7f6;
  --bxrf-ct-card: 0 1px 2px rgba(10, 31, 68, .05), 0 22px 44px -28px rgba(26, 58, 120, .45);
  --bxrf-ct-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --bxrf-ct-okic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.4 2.7 2.7L16.2 9.6'/%3E%3C/svg%3E");
  --bxrf-ct-alic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.6v.01'/%3E%3C/svg%3E");
}

/* ---------- Hero: shorter, with room for the contact panel to overlap ---------- */
.page-id-195 main > section:first-child > .relative.z-\[1\] { min-height: 0; }
.page-id-195 main > section:first-child > .relative.z-\[1\] > div {
  width: 100%; max-width: 680px; padding: 16px 16px 60px;
}
.page-id-195 main > section:first-child > .relative.z-\[1\] > div > span:first-child {
  gap: 6px; margin-bottom: 10px; padding: 5px 12px 5px 10px;
  font-size: 11.5px; line-height: 1.3; letter-spacing: .005em;
}
.page-id-195 main > section:first-child > .relative.z-\[1\] > div > span:first-child::before {
  content: ""; flex: none; width: 13px; height: 13px; background: var(--bxrf-blue);
  -webkit-mask: var(--bxrf-ct-clock) center / contain no-repeat; mask: var(--bxrf-ct-clock) center / contain no-repeat;
}
.page-id-195 main > section:first-child h1 {
  font-size: clamp(30px, 8.6vw, 36px) !important;
  line-height: 1.05; letter-spacing: -.035em;
}
.page-id-195 main > section:first-child h1 + p {
  max-width: 31em !important; margin-top: 10px;
  font-size: 14.5px !important; line-height: 1.5; color: #46536a; text-wrap: balance;
}
/* Decorative vials: two, tucked into the top corners on phones and clear of the text everywhere.
   The third sat where the contact panel now overlaps the hero, so it stays hidden. */
.page-id-195 main > section:first-child > div[aria-hidden="true"]:not([data-bx-particles]) > div:nth-child(1) { top: 8px; left: -6px; width: 46px; }
.page-id-195 main > section:first-child > div[aria-hidden="true"]:not([data-bx-particles]) > div:nth-child(2) { top: 6px; right: -2px; width: 42px; }
.page-id-195 main > section:first-child > div[aria-hidden="true"]:not([data-bx-particles]) > div:nth-child(3) { display: none; }

/* ---------- Contact panel: the three channel cards become one card over the hero ---------- */
.page-id-195 main > section:has([data-channel-card]) {
  position: relative; z-index: 2;
  margin-top: -44px; padding: 0 var(--bxrf-ct-gut); background: transparent;
}
.page-id-195 main > section:has([data-channel-card]) > div { max-width: 1120px; }
.page-id-195 main div:has(> [data-channel-card]) {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  background: #fff; border: 1px solid rgba(42, 106, 208, .14); border-radius: 22px;
  box-shadow: var(--bxrf-ct-card);
}
.page-id-195 main [data-channel-card] {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  grid-template-areas: "ic txt" "act act";
  align-items: center; gap: 10px 12px;
  min-width: 0; padding: 14px;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  /* rows sit inside one card: no lift, no separate fade-in */
  opacity: 1; transform: none; animation: none;
}
.page-id-195 main [data-channel-card] + [data-channel-card] { border-top: 1px solid var(--bxrf-line); }
.page-id-195 main [data-channel-card][hidden] { display: none !important; }
.page-id-195 main [data-channel-card] > div:first-child {
  grid-area: ic; width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(145deg, #f3f7ff, #e1ebfb) !important;
  box-shadow: inset 0 0 0 1px rgba(42, 106, 208, .1);
  transition: background-color .25s ease;
}
.page-id-195 main [data-channel-card] > div:first-child svg { width: 20px; height: 20px; color: var(--bxrf-blue) !important; stroke: currentColor; }
.page-id-195 main [data-channel-card] > div:nth-child(2) { grid-area: txt; min-width: 0; gap: 1px; }
.page-id-195 main [data-channel-card] h3 {
  margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.25; letter-spacing: -.015em; color: var(--bxrf-ink);
}
.page-id-195 main [data-channel-card] h3 + p { margin: 0; font-size: 13px; line-height: 1.4; letter-spacing: 0; color: var(--bxrf-muted); text-wrap: balance; }

/* The email address / postal address sits in a field with its copy button */
.page-id-195 main [data-channel-card] > div:nth-child(3) {
  grid-area: act; position: relative;
  container: bxrf-ct-act / inline-size;
  display: flex; flex-direction: row; align-items: stretch; gap: 0;
  min-width: 0; min-height: 48px; margin: 0;
  background: var(--bxrf-ct-field); border: 1px solid var(--bxrf-ct-edge); border-radius: 14px;
  transition: border-color .2s ease;
}
.page-id-195 main [data-channel-card] > div:nth-child(3) > a {
  flex: 1 1 auto; display: flex; align-items: center; min-width: 0;
  padding: 0 12px 0 14px; border-radius: 13px 0 0 13px;
  font-size: clamp(14px, 3.85vw, 15px); font-weight: 600; line-height: 1.2; letter-spacing: -.01em;
  color: var(--bxrf-blue); text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, color .2s ease;
}
.page-id-195 main [data-channel-card] > div:nth-child(3) > a:only-child { border-radius: 13px; }
.page-id-195 main [data-channel-card] > div:nth-child(3) > a:active { background: #e6eefc; }
.page-id-195 main [data-channel-card] > div:nth-child(3) > a:focus-visible,
.page-id-195 .bxrf-ct-copy:focus-visible { outline: 2px solid var(--bxrf-blue); outline-offset: -2px; }
.page-id-195 main [data-channel-card] > div:nth-child(3) > address {
  flex: 1 1 auto; align-self: center; min-width: 0; padding: 8px 12px 8px 14px;
  font-size: clamp(14px, 3.85vw, 15px); font-weight: 600; line-height: 1.38; letter-spacing: -.01em; color: var(--bxrf-navy-2);
}

/* Copy button: icon on narrow fields (with a "Copied" bubble), icon + word when there is room */
.page-id-195 .bxrf-ct-copy {
  position: relative; flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 46px; margin: 0; padding: 0 12px;
  border: 0; border-left: 1px solid var(--bxrf-ct-edge); border-radius: 0 13px 13px 0;
  background: transparent; color: var(--bxrf-navy-2);
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1; letter-spacing: 0;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, color .2s ease;
}
.page-id-195 .bxrf-ct-copy:active { background: #e3ecfb; }
.page-id-195 .bxrf-ct-ico { display: flex; }
.page-id-195 .bxrf-ct-ico svg { display: block; }
.page-id-195 .bxrf-ct-copy .bxrf-ct-ok,
.page-id-195 .bxrf-ct-copy-t { display: none; }
.page-id-195 .bxrf-ct-copy.is-done { background: var(--bxrf-ok-bg); color: var(--bxrf-ok); }
.page-id-195 .bxrf-ct-copy.is-done .bxrf-ct-cp { display: none; }
.page-id-195 .bxrf-ct-copy.is-done .bxrf-ct-ok { display: flex; }
.page-id-195 .bxrf-ct-tip {
  position: absolute; left: 50%; bottom: calc(100% + 9px); z-index: 4;
  padding: 6px 9px; border-radius: 8px; background: var(--bxrf-ink); color: #fff;
  font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(-50%, 4px);
  transition: opacity .15s ease, transform .2s var(--bxrf-ease);
}
.page-id-195 .bxrf-ct-tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px;
  border: 5px solid transparent; border-top-color: var(--bxrf-ink);
}
.page-id-195 .bxrf-ct-copy.is-done .bxrf-ct-tip,
.page-id-195 .bxrf-ct-copy.is-sel .bxrf-ct-tip { opacity: 1; transform: translate(-50%, 0); }
@container bxrf-ct-act (min-width: 350px) {
  .page-id-195 .bxrf-ct-copy-t { display: inline; }
  .page-id-195 .bxrf-ct-tip { display: none; }
}
.page-id-195 .bxrf-ct-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* "Prefer a form?" shortcut at the foot of the panel (phones and tablets) */
.page-id-195 .bxrf-ct-jump {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px;
  border-top: 1px solid var(--bxrf-line); border-radius: 0 0 21px 21px;
  background: linear-gradient(180deg, #f9fbff, #f1f6fe);
  font-size: 14px; font-weight: 500; line-height: 1.3; color: #3c4a62; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease;
}
.page-id-195 .bxrf-ct-jump strong { font-weight: 700; color: var(--bxrf-blue); }
.page-id-195 .bxrf-ct-jump-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; color: var(--bxrf-blue); }
.page-id-195 .bxrf-ct-jump > svg { flex: none; margin-left: auto; color: var(--bxrf-blue); }
.page-id-195 .bxrf-ct-jump:active { background: #e6eefc; }
.page-id-195 .bxrf-ct-jump:focus-visible { outline: 2px solid var(--bxrf-blue); outline-offset: -2px; }

/* ---------- Section headings (FAQ and form) ---------- */
.page-id-195 main > section:has(button[aria-expanded]) h2,
.page-id-195 main > section:has(#contact-form) h2 {
  font-size: 23px; font-weight: 800; line-height: 1.15; letter-spacing: -.025em; text-wrap: balance;
}
.page-id-195 main > section:has(button[aria-expanded]) h2 + p,
.page-id-195 main > section:has(#contact-form) h2 + p {
  max-width: 30em; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--bxrf-muted); text-wrap: balance;
}
.page-id-195 main > section:has(button[aria-expanded]) > div > div:first-child,
.page-id-195 main > section:has(#contact-form) > div > div:first-child { margin-bottom: 16px; }
.page-id-195 main > section:has(#contact-form) h2:focus { outline: none; }

/* ---------- FAQ: one card list, + turns into x ---------- */
.page-id-195 main > section:has(button[aria-expanded]) { padding: 30px var(--bxrf-ct-gut) 6px; background: #fff; }
.page-id-195 main > section:has(button[aria-expanded]) > div { max-width: 720px; }
.page-id-195 main > section:has(button[aria-expanded]) .border-t.border-slate-200 {
  overflow: hidden; background: #fff; border: 1px solid var(--bxrf-line); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(10, 31, 68, .04), 0 16px 32px -26px rgba(26, 58, 120, .38);
}
.page-id-195 main > section:has(button[aria-expanded]) .border-t.border-slate-200 > div {
  border-bottom: 1px solid var(--bxrf-line);
  transition: background-color .25s ease, box-shadow .25s ease;
}
.page-id-195 main > section:has(button[aria-expanded]) .border-t.border-slate-200 > div:last-child { border-bottom: 0; }
.page-id-195 main > section:has(button[aria-expanded]) .border-t.border-slate-200 > div:has(> button[aria-expanded="true"]) {
  background: linear-gradient(90deg, #f3f7ff, #fff 70%);
  box-shadow: inset 3px 0 0 var(--bxrf-blue);
}
.page-id-195 main > section:has(button[aria-expanded]) button[aria-expanded] {
  min-height: 56px; gap: 12px; padding: 13px 14px 13px 16px;
}
.page-id-195 main > section:has(button[aria-expanded]) button[aria-expanded] > span {
  flex: 1 1 auto; font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--bxrf-ink);
  transition: color .2s ease;
}
.page-id-195 main > section:has(button[aria-expanded]) button[aria-expanded="true"] > span { color: var(--bxrf-navy); }
/* the list clips its corners, so the keyboard ring sits inside the row */
.page-id-195 main > section:has(button[aria-expanded]) button[aria-expanded]:focus-visible { outline: 2px solid var(--bxrf-blue); outline-offset: -4px; border-radius: 14px; }
.page-id-195 main > section:has(button[aria-expanded]) button[aria-expanded] > svg { display: none; }
.page-id-195 main > section:has(button[aria-expanded]) button[aria-expanded]::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 11px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 11px no-repeat,
    var(--bxrf-mist);
  color: var(--bxrf-navy-2);
  transition: transform .35s var(--bxrf-ease), background-color .2s ease, color .2s ease;
}
.page-id-195 main > section:has(button[aria-expanded]) button[aria-expanded="true"]::after {
  transform: rotate(45deg); background-color: var(--bxrf-navy); color: #fff;
}
/* A closed answer also leaves the tab order and the screen-reader text */
.page-id-195 main > section:has(button[aria-expanded]) button[aria-expanded] + .grid {
  visibility: hidden;
  transition: grid-template-rows .3s var(--bxrf-ease), opacity .25s ease, visibility 0s linear .3s;
}
.page-id-195 main > section:has(button[aria-expanded]) button[aria-expanded="true"] + .grid {
  visibility: visible;
  transition: grid-template-rows .3s var(--bxrf-ease), opacity .25s ease, visibility 0s;
}
.page-id-195 main > section:has(button[aria-expanded]) button[aria-expanded] + .grid p {
  margin: 0; padding: 0 16px 16px; font-size: 14px; line-height: 1.6; color: #46536a;
}
.page-id-195 .bxrf-ct-link {
  font-weight: 600; color: var(--bxrf-blue);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}

/* ---------- Form ---------- */
.page-id-195 main > section:has(#contact-form) { padding: 30px var(--bxrf-ct-gut) 44px; background: #fff; scroll-margin-top: 68px; }
.page-id-195 main > section:has(#contact-form) > div { max-width: 720px; }
.page-id-195 #contact-form {
  display: grid; gap: 14px; margin: 0; padding: 16px;
  background: #fff; border: 1px solid rgba(42, 106, 208, .16); border-radius: 20px;
  box-shadow: var(--bxrf-ct-card);
}
.page-id-195 #contact-form:hover { border-color: rgba(42, 106, 208, .16); }
.page-id-195 #contact-form > * { margin: 0; }
.page-id-195 #contact-form > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
.page-id-195 #contact-form > .grid > div { min-width: 0; }
.page-id-195 #contact-form > .grid > div:nth-child(n+3) { grid-column: 1 / -1; }
.page-id-195 #contact-form div:not([aria-hidden]) > label {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0; margin: 0 0 6px;
  font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #22324d;
}
/* Required and optional markers (the fields keep their own required attribute) */
.page-id-195 #contact-form div:has(> [required]) > label::after {
  content: "*"; content: "*" / ""; margin-left: 3px; font-weight: 700; color: var(--bxrf-blue);
}
.page-id-195 #contact-form div:not([aria-hidden]):has(> input:not([required]), > textarea:not([required])) > label::after {
  content: "Optional"; margin-left: 7px; font-size: 12px; font-weight: 500; color: #7a879b;
}
.page-id-195 #contact-form div:not([aria-hidden]) > input,
.page-id-195 #contact-form div:not([aria-hidden]) > textarea {
  display: block; width: 100%; height: 48px; margin: 0; padding: 0 14px;
  border: 1px solid #cdd8e8; border-radius: 12px; background: #fff;
  font: inherit; font-size: 16px; line-height: 1.3; color: var(--bxrf-ink);
  box-shadow: 0 1px 2px rgba(10, 31, 68, .04);
  -webkit-appearance: none; appearance: none;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.page-id-195 #contact-form div:not([aria-hidden]) > textarea {
  height: auto; min-height: 120px; padding: 12px 14px; line-height: 1.5; resize: none;
}
/* 16px text keeps iOS from zooming; the hint text can be smaller so it fits half-width fields */
.page-id-195 #contact-form div:not([aria-hidden]) > input::placeholder,
.page-id-195 #contact-form div:not([aria-hidden]) > textarea::placeholder { color: #8b98ad; opacity: 1; font-size: 14.5px; }
.page-id-195 #contact-form div:not([aria-hidden]) > input:focus,
.page-id-195 #contact-form div:not([aria-hidden]) > textarea:focus {
  border-color: var(--bxrf-blue); outline: none;
  box-shadow: 0 0 0 4px rgba(42, 106, 208, .16);
}
.page-id-195 #contact-form div:not([aria-hidden]) > input[aria-invalid="true"],
.page-id-195 #contact-form div:not([aria-hidden]) > textarea[aria-invalid="true"] {
  border-color: var(--bxrf-ct-err-line); background: var(--bxrf-ct-err-bg);
}
.page-id-195 #contact-form div:not([aria-hidden]) > input[aria-invalid="true"]:focus,
.page-id-195 #contact-form div:not([aria-hidden]) > textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(224, 87, 76, .16); }
.page-id-195 .bxrf-ct-hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--bxrf-muted); }
.page-id-195 .bxrf-ct-err {
  display: flex; align-items: flex-start; gap: 5px; margin: 6px 0 0;
  font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--bxrf-ct-err);
}
.page-id-195 .bxrf-ct-err[hidden] { display: none; }
.page-id-195 .bxrf-ct-err svg { flex: none; margin-top: 1px; }

/* Submit row: full-width button on phones, reply-time note under it */
.page-id-195 #contact-form > div:last-child:has(> button[type="submit"]) {
  display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding-top: 2px;
}
.page-id-195 #contact-form button[type="submit"] {
  gap: 8px; width: 100%; min-height: 52px; padding: 0 24px;
  border-radius: 999px; scale: none;
  background: linear-gradient(135deg, var(--bxrf-navy-2), var(--bxrf-blue));
  box-shadow: 0 12px 24px -12px rgba(42, 106, 208, .75);
  font-size: 16px; font-weight: 700; letter-spacing: -.005em;
  transition: transform .2s var(--bxrf-ease), box-shadow .2s ease, opacity .2s ease;
}
.page-id-195 #contact-form button[type="submit"]:hover { transform: none; }
.page-id-195 #contact-form button[type="submit"]:active { transform: scale(.98); }
.page-id-195 #contact-form button[type="submit"]:focus-visible { outline: 2px solid var(--bxrf-navy); outline-offset: 3px; }
/* the theme's arrow only shows on hover; on phones it stays visible */
.page-id-195 #contact-form button[type="submit"] > div { width: 20px; margin: 0; overflow: visible; }
.page-id-195 #contact-form button[type="submit"] > div > svg {
  opacity: 1; translate: none; transform: none; transition: transform .25s var(--bxrf-ease);
}
.page-id-195 #contact-form button[type="submit"].bxrf-ct-sending { cursor: progress; opacity: .92; }
.page-id-195 #contact-form button[type="submit"].bxrf-ct-sending > div > svg { display: none; }
.page-id-195 #contact-form button[type="submit"].bxrf-ct-sending > div::before {
  content: ""; display: block; width: 18px; height: 18px; box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
  animation: bxrf-ct-spin .7s linear infinite;
}
@keyframes bxrf-ct-spin { to { transform: rotate(360deg); } }
.page-id-195 .bxrf-ct-note {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0;
  font-size: 12.5px; line-height: 1.4; color: var(--bxrf-muted); text-align: center; text-wrap: balance;
}
.page-id-195 .bxrf-ct-note svg { display: none; flex: none; color: var(--bxrf-blue); }

/* Result after the form posts back (?contact=sent / error) */
.page-id-195 #contact-form .bx-contact-status {
  position: relative; display: block; margin: 0; padding: 12px 14px 12px 42px;
  border-radius: 14px; font-size: 14px; font-weight: 600; line-height: 1.45;
}
.page-id-195 #contact-form .bx-contact-status::before {
  content: ""; position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--bxrf-ct-alic) center / contain no-repeat; mask: var(--bxrf-ct-alic) center / contain no-repeat;
}
.page-id-195 #contact-form .bx-contact-status.is-ok { background: var(--bxrf-ok-bg); border: 1px solid #bfe3cb; color: var(--bxrf-ok); }
.page-id-195 #contact-form .bx-contact-status.is-ok::before { -webkit-mask-image: var(--bxrf-ct-okic); mask-image: var(--bxrf-ct-okic); }
.page-id-195 #contact-form .bx-contact-status.is-err { background: #fef3f2; border: 1px solid #fecdca; color: var(--bxrf-ct-err); }
.page-id-195 #contact-form .bx-contact-status:focus { outline: none; }
.page-id-195 #contact-form .bx-contact-status a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* ---------- Closing call to action (shared band): tighter on phones ---------- */
.page-id-195 main > section.cv-auto:has(.bx-cta-band) { content-visibility: visible; }
.page-id-195 main .bx-cta-band { padding-top: 40px; padding-bottom: 92px; }
.page-id-195 main .bx-cta-band > img { display: none; }
.page-id-195 main .bx-cta-band h2 {
  max-width: 21em; font-size: 22px; font-weight: 800; line-height: 1.28; letter-spacing: -.02em; text-wrap: balance;
}

/* The chat bubble steps aside while it would cover a copy button or Send (contact.js sets
   bxrf-ct-clear), and on phones and tablets while a form field is in use */
html.bxrf-ct-clear body.page-id-195 #bcx-agent:not(.bcx-open) { opacity: 0; pointer-events: none; transform: scale(.85); }
@media (max-width: 1023.98px) {
  html.bxrf-ct-typing body.page-id-195 #bcx-agent:not(.bcx-open) { opacity: 0; pointer-events: none; transform: scale(.85); }
}

/* Narrow phones (320-374px). The theme zooms the whole page 1.1x, so a 360px phone
   lays out about 327px of content: the email field needs the extra room. */
@media (max-width: 374.98px) {
  .page-id-195 { --bxrf-ct-gut: 12px; }
  .page-id-195 main [data-channel-card] { padding: 12px; gap: 10px; }
  .page-id-195 main [data-channel-card] > div:nth-child(3) > a,
  .page-id-195 main [data-channel-card] > div:nth-child(3) > address { padding-left: 12px; font-size: 13.5px; }
  .page-id-195 #contact-form { padding: 14px; }
}
@media (max-width: 339.98px) {
  .page-id-195 main [data-channel-card] > div:nth-child(3) > a,
  .page-id-195 main [data-channel-card] > div:nth-child(3) > address { font-size: 12.5px; }
}

/* ---------- 640px and up: tablets and half-width desktop windows ---------- */
@media (min-width: 640px) {
  .page-id-195 { --bxrf-ct-gut: 24px; }
  .page-id-195 main > section:first-child > .relative.z-\[1\] > div { max-width: 760px; padding: 28px 24px 76px; }
  .page-id-195 main > section:first-child > .relative.z-\[1\] > div > span:first-child { margin-bottom: 14px; padding: 6px 14px 6px 12px; font-size: 12.5px; }
  .page-id-195 main > section:first-child h1 { font-size: clamp(40px, 5.2vw, 56px) !important; }
  .page-id-195 main > section:first-child h1 + p { max-width: 36em !important; margin-top: 12px; font-size: 16.5px !important; }
  .page-id-195 main > section:first-child > div[aria-hidden="true"]:not([data-bx-particles]) > div:nth-child(1) { top: 16%; left: 5%; width: clamp(56px, 8vw, 104px); }
  .page-id-195 main > section:first-child > div[aria-hidden="true"]:not([data-bx-particles]) > div:nth-child(2) { top: 9%; right: 6%; width: clamp(50px, 7vw, 96px); }

  .page-id-195 main > section:has([data-channel-card]) { margin-top: -56px; }
  .page-id-195 main > section:has([data-channel-card]) > div { max-width: 720px; }
  .page-id-195 main [data-channel-card] { padding: 16px 20px; gap: 12px 14px; }
  .page-id-195 main [data-channel-card] h3 { font-size: 16px; }
  .page-id-195 main [data-channel-card] h3 + p { font-size: 13.5px; }
  .page-id-195 main [data-channel-card] > div:nth-child(3) > a,
  .page-id-195 main [data-channel-card] > div:nth-child(3) > address { font-size: 15px; }
  .page-id-195 .bxrf-ct-jump { padding: 8px 20px; }

  .page-id-195 main > section:has(button[aria-expanded]) { padding-top: 44px; }
  .page-id-195 main > section:has(button[aria-expanded]) h2,
  .page-id-195 main > section:has(#contact-form) h2 { font-size: 30px; }
  .page-id-195 main > section:has(button[aria-expanded]) h2 + p,
  .page-id-195 main > section:has(#contact-form) h2 + p { font-size: 15px; }
  .page-id-195 main > section:has(button[aria-expanded]) > div > div:first-child,
  .page-id-195 main > section:has(#contact-form) > div > div:first-child { margin-bottom: 20px; }
  .page-id-195 main > section:has(button[aria-expanded]) button[aria-expanded] { min-height: 60px; padding: 16px 18px 16px 20px; gap: 16px; }
  .page-id-195 main > section:has(button[aria-expanded]) button[aria-expanded] > span { font-size: 15.5px; }
  .page-id-195 main > section:has(button[aria-expanded]) button[aria-expanded] + .grid p { padding: 0 64px 18px 20px; font-size: 14.5px; }

  .page-id-195 main > section:has(#contact-form) { padding-top: 44px; padding-bottom: 64px; }
  .page-id-195 #contact-form { gap: 18px; padding: 24px; border-radius: 22px; }
  .page-id-195 #contact-form > .grid { gap: 18px 16px; }
  .page-id-195 #contact-form > .grid > div:nth-child(n+3) { grid-column: auto; }
  .page-id-195 #contact-form > div:last-child:has(> button[type="submit"]) {
    flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 16px;
  }
  .page-id-195 #contact-form button[type="submit"] { width: auto; min-width: 220px; }
  .page-id-195 .bxrf-ct-note { justify-content: flex-start; font-size: 13px; text-align: left; }
  .page-id-195 .bxrf-ct-note svg { display: block; }

  .page-id-195 main .bx-cta-band { padding-top: 56px; padding-bottom: 112px; }
  .page-id-195 main .bx-cta-band > img { display: block; }
  .page-id-195 main .bx-cta-band h2 { font-size: clamp(26px, calc(1.8vw + 16px), 38px); }
}
/* Below 1024px the band's two vials ran into the headline: they sit in the lower corners instead */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .page-id-195 main .bx-cta-band > img { top: auto; bottom: 92px; width: 104px; translate: none; transform: none; }
}

/* ---------- 720-1179px: each channel on one line (icon, text, field) ----------
   The field gives up width first (down to 280px, copy icon only) so the text keeps 170px. */
@media (min-width: 720px) and (max-width: 1179.98px) {
  .page-id-195 main [data-channel-card] {
    grid-template-columns: 44px minmax(170px, 1fr) minmax(280px, 360px);
    grid-template-areas: "ic txt act";
    gap: 0 16px; padding: 16px 20px;
  }
  .page-id-195 main [data-channel-card] > div:first-child { width: 44px; height: 44px; }
}

/* ---------- 1024px and up: FAQ beside the form ---------- */
@media (min-width: 1024px) {
  .page-id-195 { --bxrf-ct-gut: 32px; }
  .page-id-195 main > section:first-child > .relative.z-\[1\] > div { padding: 40px 24px 108px; }
  .page-id-195 main > section:first-child > div[aria-hidden="true"]:not([data-bx-particles]) > div:nth-child(1) { top: 18%; left: 10%; width: clamp(80px, 8vw, 120px); }
  .page-id-195 main > section:first-child > div[aria-hidden="true"]:not([data-bx-particles]) > div:nth-child(2) { top: 10%; right: 11%; width: clamp(70px, 7vw, 108px); }
  .page-id-195 main > section:has([data-channel-card]) { margin-top: -72px; }
  .page-id-195 main > section:has([data-channel-card]) > div { max-width: 1120px; }
  .page-id-195 .bxrf-ct-jump { display: none; }
  .page-id-195 main .bx-cta-band { padding-top: 64px; padding-bottom: 128px; }

  .page-id-195 main:has(> section #contact-form):has(> section button[aria-expanded]) {
    display: grid; align-items: start;
    grid-template-columns: minmax(32px, 1fr) minmax(0, 520px) minmax(0, 600px) minmax(32px, 1fr);
  }
  .page-id-195 main:has(> section #contact-form):has(> section button[aria-expanded]) > * { grid-column: 1 / -1; min-width: 0; }
  .page-id-195 main:has(> section #contact-form):has(> section button[aria-expanded]) > section:has(button[aria-expanded]) {
    grid-column: 2; grid-row: 3; padding: 56px 28px 72px 0;
  }
  .page-id-195 main:has(> section #contact-form):has(> section button[aria-expanded]) > section:has(#contact-form) {
    grid-column: 3; grid-row: 3; padding: 56px 0 72px 28px;
  }
  .page-id-195 main:has(> section #contact-form):has(> section button[aria-expanded]) > section:has(.bx-cta-band) { grid-row: 4; }
  .page-id-195 main:has(> section #contact-form):has(> section button[aria-expanded]) > section:has(button[aria-expanded]) > div,
  .page-id-195 main:has(> section #contact-form):has(> section button[aria-expanded]) > section:has(#contact-form) > div { max-width: none; margin: 0; }
  .page-id-195 main:has(> section #contact-form):has(> section button[aria-expanded]) > section:is(:has(button[aria-expanded]), :has(#contact-form)) > div > div:first-child { text-align: left; }
  .page-id-195 main:has(> section #contact-form):has(> section button[aria-expanded]) > section:is(:has(button[aria-expanded]), :has(#contact-form)) > div > div:first-child > p { max-width: 34em; margin-left: 0; margin-right: 0; }
  .page-id-195 main > section:has(button[aria-expanded]) h2,
  .page-id-195 main > section:has(#contact-form) h2 { font-size: 32px; }
}

/* ---------- 1180px and up: the three channels side by side ---------- */
@media (min-width: 1180px) {
  .page-id-195 main div:has(> [data-channel-card]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-id-195 main [data-channel-card] {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "ic h" "p p" "act act";
    align-items: center; gap: 10px 14px; padding: 22px;
  }
  .page-id-195 main [data-channel-card] > div:nth-child(2) { display: contents; }
  .page-id-195 main [data-channel-card] h3 { grid-area: h; font-size: 17px; }
  .page-id-195 main [data-channel-card] h3 + p { grid-area: p; align-self: start; }
  .page-id-195 main [data-channel-card] > div:nth-child(3) { align-self: end; }
  .page-id-195 main [data-channel-card] + [data-channel-card] { border-top: 0; border-left: 1px solid var(--bxrf-line); }
}

/* ---------- Mouse and trackpad ---------- */
@media (hover: hover) and (pointer: fine) {
  .page-id-195 #contact-form div:not([aria-hidden]) > textarea { resize: vertical; }
  .page-id-195 main [data-channel-card]:hover > div:first-child { background: linear-gradient(135deg, var(--bxrf-navy-2), var(--bxrf-blue)) !important; }
  .page-id-195 main [data-channel-card]:hover > div:first-child svg { color: #fff !important; }
  .page-id-195 main [data-channel-card] > div:nth-child(3):hover { border-color: #b8cdee; }
  .page-id-195 main [data-channel-card] > div:nth-child(3) > a:hover { background: #edf3fd; color: var(--bxrf-navy-2); }
  .page-id-195 .bxrf-ct-copy:hover { background: #edf3fd; }
  .page-id-195 .bxrf-ct-copy.is-done:hover { background: var(--bxrf-ok-bg); }
  .page-id-195 .bxrf-ct-copy:hover .bxrf-ct-tip { opacity: 1; transform: translate(-50%, 0); }
  .page-id-195 .bxrf-ct-jump:hover { background: #eef4fe; }
  .page-id-195 main > section:has(button[aria-expanded]) button[aria-expanded]:hover > span { color: var(--bxrf-navy-2); }
  .page-id-195 main > section:has(button[aria-expanded]) button[aria-expanded="false"]:hover::after { background-color: #dfe9fb; }
  .page-id-195 #contact-form div:not([aria-hidden]) > input:hover:not(:focus),
  .page-id-195 #contact-form div:not([aria-hidden]) > textarea:hover:not(:focus) { border-color: #b4c6e2; }
  .page-id-195 #contact-form button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 16px 28px -12px rgba(42, 106, 208, .85); }
  .page-id-195 #contact-form button[type="submit"]:hover > div > svg { transform: translateX(3px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .page-id-195 main > section:first-child [class*="animate-vial"],
  .page-id-195 main .bx-cta-band > img { animation: none; }
  .page-id-195 main [data-channel-card] > div,
  .page-id-195 main [data-channel-card] > div > a,
  .page-id-195 .bxrf-ct-copy,
  .page-id-195 .bxrf-ct-tip,
  .page-id-195 .bxrf-ct-jump,
  .page-id-195 main > section:has(button[aria-expanded]) .border-t.border-slate-200 > div,
  .page-id-195 main > section:has(button[aria-expanded]) button[aria-expanded] > span,
  .page-id-195 main > section:has(button[aria-expanded]) button[aria-expanded]::after,
  .page-id-195 main > section:has(button[aria-expanded]) button[aria-expanded] + .grid,
  .page-id-195 #contact-form div:not([aria-hidden]) > input,
  .page-id-195 #contact-form div:not([aria-hidden]) > textarea,
  .page-id-195 #contact-form button[type="submit"],
  .page-id-195 #contact-form button[type="submit"] > div > svg { transition: none; }
  .page-id-195 #contact-form button[type="submit"]:active,
  .page-id-195 #contact-form button[type="submit"]:hover { transform: none; }
  .page-id-195 #contact-form button[type="submit"].bxrf-ct-sending > div::before { animation: none; border-color: #fff; border-top-color: rgba(255, 255, 255, .35); }
}