/*========================================================================
  NSAP Custom Overrides — zzzz-GPH.css - v1.050926
  Loaded last so these rules take precedence over all theme CSS.

  WORKFLOW:
  - Make all CSS changes here during local development.
  - This file lives in App_Themes/NSAP-London-R/ alongside the other
    theme CSS files and must also be added to Website-Themes/NSAP-London-R/
    before zipping and uploading to iMIS.
  - Consider merging rules into the appropriate upstream file (zzz-JC.css,
    zz-SSOverride.css, etc.) once changes are finalised — or keep them
    here permanently for clarity.
========================================================================*/

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ── Utility nav (Create account / Cart / Member Login / Search) ─────── */
/* Mirrors the zzz-JC.css selector group for proper specificity override  */
.nav-auxiliary .nav-aux-cart .nav-text,
.nav-auxiliary .nav-aux-account .nav-text,
.nav-auxiliary a.sign-out-link,
.nav-auxiliary a.sign-in-link,
.header-search label {
  gap: 8px;
  font-size: 14px;
}

/* Flex container for the utility nav row — centers all items vertically */
.UtilityNavigation {
  display: flex;
  align-items: center;
}

/* Zero out browser's default ul padding so spacing around pipes is even  */
.UtilitySection.UtilityNavigationList ul.NavigationUnorderedList {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.UtilitySection.UtilityNavigationList .NavigationListItem {
  display: flex;
  align-items: center;
}

/* Lighter pipe color */
.nav-auxiliary .nav-aux-cart .nav-text,
.nav-auxiliary .nav-aux-account .nav-text,
.nav-auxiliary a.sign-out-link,
.nav-auxiliary a.sign-in-link {
  border-right-color: rgba(0, 0, 0, 0.2);
}

/* No pipe between the last nav item and the search box */
.nav-auxiliary a.sign-in-link,
.nav-auxiliary a.sign-out-link {
  border-right: none !important;
}

.UtilitySection.UtilitySearch {
  margin-left: 8px;
}

/* ── NavigationList sign-in / sign-out items ─────────────────────────── */
/* zzz-JC.css zeros all NavigationLink padding, so !important needed here */
.nav-auxiliary .sign-link {
  margin-left: 0;
}

.nav-auxiliary .sign-link.sign-in {
  padding: 0 8px 0 8px !important;
}

.nav-auxiliary .sign-link.sign-out {
  padding: 0 8px 0 12px !important;
}

.nav-auxiliary .sign-link .NavigationLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 20px;
  padding: 0 !important;
  border-right: none;
  font-size: 14px;
  text-decoration: none;
  color: var(--Dark-70);
}

.nav-auxiliary .sign-link .NavigationLink:hover {
  color: var(--Dark);
}

.nav-auxiliary .sign-link .NavigationLink::before {
  display: block;
  width: 17px;
  height: 17px;
  background-color: currentColor;
  content: "";
  flex-shrink: 0;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Sign-in icon: door on right, arrow pointing right (entering).          */
/* Also overrides zzz-JC.css which uses the same exit icon for sign-in.   */
.nav-auxiliary .sign-link.sign-in .NavigationLink::before,
.nav-auxiliary a.sign-in-link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/%3E%3Cpath d='M10 17l5-5-5-5'/%3E%3Cpath d='M15 12H3'/%3E%3C/svg%3E");
}

/* Sign-out icon: door on left, arrow pointing right (exiting). */
.nav-auxiliary .sign-link.sign-out .NavigationLink::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
}

/* ── Primary nav (About Us / Membership / Events …) ─────────────────── */
.RadMenu.RadMenu_London > .rmHorizontal > .rmItem > a > .rmText {
  padding: 10px 22px;
  font-size: 18px;
}

@media (min-width: 768px) {

  /* Stretch the full container chain so flex can span edge-to-edge */
  .nav-primary,
  .RadMenu.RadMenu_London {
    display: block;
    float: none;
    width: 100%;
  }

  .RadMenu.RadMenu_London > .rmHorizontal {
    display: flex;
    align-items: center;
    width: 100%;
  }

  /* Push rightmost item(s) to the right — rmEnd item when present, Give Now as fallback */
  .RadMenu.RadMenu_London > .rmHorizontal > .rmItem:nth-last-child(1),
  .RadMenu.RadMenu_London > .rmHorizontal > .rmItem:has(a.rmEnd) {
    margin-left: auto;
  }

  /* When rmEnd precedes Give Now, zero out Give Now's auto so there's no gap between them */
  .RadMenu.RadMenu_London > .rmHorizontal > .rmItem:has(a.rmEnd) ~ .rmItem:has(a.rmEnd),
  .RadMenu.RadMenu_London > .rmHorizontal > .rmItem:has(a.rmEnd) ~ .rmItem:nth-last-child(1) {
    margin-left: 0;
  }

  /* Hand-heart icon before "Give Now" */
  .RadMenu.RadMenu_London > .rmHorizontal > .rmItem:nth-last-child(1) > a > .rmText {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 14px;
    /* reduced from 22px — icon+gap fills the visual difference */
  }

  .RadMenu.RadMenu_London > .rmHorizontal > .rmItem:nth-last-child(1) > a > .rmText::before {
    display: block;
    width: 15px;
    height: 15px;
    background-color: currentColor;
    content: "";
    flex-shrink: 0;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 8C12 6.34 13.34 5 15 5C16.66 5 18 6.34 18 8C18 10 15 12.5 12 14C9 12.5 6 10 6 8C6 6.34 7.34 5 9 5C10.66 5 12 6.34 12 8Z'/%3E%3Cpath d='M5 17.5C5 16.12 6.12 15 7.5 15H16.5C17.88 15 19 16.12 19 17.5V19.5C19 20.05 18.55 20.5 18 20.5H6C5.45 20.5 5 20.05 5 19.5V17.5Z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 8C12 6.34 13.34 5 15 5C16.66 5 18 6.34 18 8C18 10 15 12.5 12 14C9 12.5 6 10 6 8C6 6.34 7.34 5 9 5C10.66 5 12 6.34 12 8Z'/%3E%3Cpath d='M5 17.5C5 16.12 6.12 15 7.5 15H16.5C17.88 15 19 16.12 19 17.5V19.5C19 20.05 18.55 20.5 18 20.5H6C5.45 20.5 5 20.05 5 19.5V17.5Z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
  }
}

/* ── Hero section top padding ────────────────────────────────────────── */
.WebPartZone.jcBgColoredLight > .iMIS-WebPart:first-child .container-fluid {
  padding-top: 10rem !important;
}

@media (max-width: 767px) {
  .WebPartZone.jcBgColoredLight > .iMIS-WebPart:first-child .container-fluid {
    padding-top: 5rem !important;
  }
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.jcFooterLogo .jcLogoImg {
  width: clamp(160px, 80%, 269px);
}

.jcFooterNav .jcTagline {
  font-size: 22px !important;
}

.jcContactList,
.footer-copyright p {
  font-size: 14px;
}

/* Email/phone icon scales with the new font-size */
.jcContactItem:before {
  width: 14px;
  height: 14px;
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
/* Text centered by default. On hover: padding shifts (left↓ right↑ by   */
/* equal amounts) so total width is unchanged — text slides left and a    */
/* CSS caret slides in left→right as if pushing the text over.            */

.btn,
.TextButton,
.TextButton:visited,
.RadUpload.RadUpload .ruButton,
.RadUpload.RadUpload .ruButton:visited,
.RadUploadProgressArea.RadUploadProgressArea .ruButton,
.RadUploadProgressArea.RadUploadProgressArea .ruButton:visited,
:is(.account-banner-bg-color-5, .account-banner-bg-color-red, .account-banner-bg-color-purple, .account-banner-bg-color-mps-2) :is(.account-banner, .account-banner-short) :is(.area-top-left, .area-top-bar-left, .area-top-bar-right) .TextButton:not(.PrimaryButton),
.TextButton.PrimaryButton,
.TextButton.TertiaryButton {
  /* symmetric — text centered */
  position: relative;
  justify-content: center;
  padding: 10px 22px;
  font-size: 20px;
  letter-spacing: 0px;
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, padding 0.2s ease;
  overflow: hidden;
}

/* Hover: reduce left by 12, increase right by 12 → same total width,    */
/* text slides left, caret zone opens on the right.                       */
.btn:not(input):hover,
.TextButton:not(input):hover,
.TextButton:not(input):visited:hover,
.RadUpload.RadUpload .ruButton:not(input):hover,
.RadUpload.RadUpload .ruButton:not(input):visited:hover,
.RadUploadProgressArea.RadUploadProgressArea .ruButton:not(input):hover,
.RadUploadProgressArea.RadUploadProgressArea .ruButton:not(input):visited:hover,
:is(.account-banner-bg-color-5, .account-banner-bg-color-red, .account-banner-bg-color-purple, .account-banner-bg-color-mps-2) :is(.account-banner, .account-banner-short) :is(.area-top-left, .area-top-bar-left, .area-top-bar-right) .TextButton:not(input):not(.PrimaryButton):hover,
.TextButton.PrimaryButton:not(input):hover,
.TextButton.TertiaryButton:not(input):hover {
  padding-right: 31px;
  padding-left: 13px;
}

/* Caret character — starts 12px RIGHT of its final spot, slides LEFT     */
/* as the text also moves left, so they track together.                   */
/* Using › (›) avoids any rotation transform entirely.                  */
.btn:not(input)::after,
.TextButton:not(input)::after,
.TextButton:not(input):visited::after,
.RadUpload.RadUpload .ruButton:not(input)::after,
.RadUpload.RadUpload .ruButton:not(input):visited::after,
.RadUploadProgressArea.RadUploadProgressArea .ruButton:not(input)::after,
.RadUploadProgressArea.RadUploadProgressArea .ruButton:not(input):visited::after,
:is(.account-banner-bg-color-5, .account-banner-bg-color-red, .account-banner-bg-color-purple, .account-banner-bg-color-mps-2) :is(.account-banner, .account-banner-short) :is(.area-top-left, .area-top-bar-left, .area-top-bar-right) .TextButton:not(.PrimaryButton)::after,
.TextButton.PrimaryButton:not(input)::after,
.TextButton.TertiaryButton:not(input)::after {
  position: absolute;
  top: 47%;
  right: 3px !important;
  width: auto;
  height: auto;
  margin-right: 0;
  border: none;
  font-size: 1.2em;
  line-height: 1 !important;
  background-color: transparent;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  content: "\203A" !important;
  transform: translateY(-50%) translateX(12px);
  -webkit-mask: none;
  mask: none;
}

/* On hover: caret slides LEFT 12px into position beside the text */
.btn:not(input):hover::after,
.TextButton:not(input):hover::after,
.TextButton:not(input):visited:hover::after,
.RadUpload.RadUpload .ruButton:not(input):hover::after,
.RadUpload.RadUpload .ruButton:not(input):visited:hover::after,
.RadUploadProgressArea.RadUploadProgressArea .ruButton:not(input):hover::after,
.RadUploadProgressArea.RadUploadProgressArea .ruButton:not(input):visited:hover::after,
:is(.account-banner-bg-color-5, .account-banner-bg-color-red, .account-banner-bg-color-purple, .account-banner-bg-color-mps-2) :is(.account-banner, .account-banner-short) :is(.area-top-left, .area-top-bar-left, .area-top-bar-right) .TextButton:not(.PrimaryButton):hover::after,
.TextButton.PrimaryButton:hover:not(input)::after,
.TextButton.TertiaryButton:hover:not(input)::after {
  position: absolute;
  width: auto;
  height: auto;
  margin-right: 0;
  border: none;
  background-color: transparent;
  opacity: 1;
  content: "\203A" !important;
  transform: translateY(-50%) translateX(-12px);
  -webkit-mask: none;
  mask: none;
}

/* ── Site-wide max-width: 1170px → 1280px ────────────────────────────── */
:root {
  --max-width: 1280px;
}

.container,
.header-container,
.SliderPage1 {
  max-width: 1280px;
}

.nav-auxiliary div#WTZone2_Page1 {
  width: clamp(0px, 100%, 1280px);
}

.jumbotron.home h1 span,
.jumbotron.home .ActionButton {
  max-width: 1280px;
}

/* ── Search box — always visible ─────────────────────────────────────── */
/* Label is unnecessary — hide it; keep the input permanently in the nav. */
.header-search label {
  display: none !important;
}

.header-search input[type="button"] {
  display: none !important;
}

/* Default: transparent bg, soft border, light text + light icon mimics placeholder */
.header-search input[type="text"] {
  display: inline-block !important;
  height: 32px !important;
  padding: 0 10px 0 28px !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  font-size: 14px !important;
  color: rgba(0, 0, 0, 0.35) !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 15L21 21M10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17Z' stroke='%23a6a6a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-position: 6px center !important;
  box-shadow: none !important;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

/* Focus/hover: white bg, standard border, dark icon + normal text */
.header-search input[type="text"]:hover,
.header-search input[type="text"]:focus {
  border-color: #ccc !important;
  color: #333 !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 15L21 21M10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10C17 13.866 13.866 17 10 17Z' stroke='%231E1E1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
}

/* ── Panels ──────────────────────────────────────────────────────────── */
.obo-panel {
  margin-bottom: unset;
}

/* Replace sprite-map icon with inline SVG pencil; add right spacing */
a.ste-toggle {
  width: 20px !important;
  height: 20px !important;
  margin-right: 8px !important;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z' stroke='%231E1E1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 14px !important;
}

/* Active/on state — white icon on the existing dark teal background */
a.ste-toggle.on {
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* ── Resource list ───────────────────────────────────────────────────── */
.jc-list-label {
  padding: 2px 12px;
  font-size: 12px;
}

.jc-horizontal .jc-list-text {
  padding: 0px 25px;
}

.jc-resource-list .jc-grey:nth-child(3) {
  font-size: 14px;
  font-weight: 400 !important;
}

/* ── Links ───────────────────────────────────────────────────────────── */
a,
.Link,
.RadGrid.RadGrid .rgRow a,
.RadGrid.RadGrid .rgAltRow a,
.RadGrid.RadGrid .rgEditForm a,
.k-grid.k-grid a,
.RadToolTip.RadToolTip a {
  line-height: 1;
}

/* ================================================================
   NSAP Home Page Redesign — scoped under #rd / rd-* prefix
   Bootstrap 3: container > row > col-*
================================================================ */

/* ── Brand color tokens ────────────────────────────────────────── */
:root {
  --rd-cyan: #00abed;
  --rd-indigo: #2e308f;
  --rd-green: #00a352;
  --rd-yellow: #ffbf00;
  --rd-marigold: #f5911c;
  --rd-vermilion: #ed4036;
  --rd-raspberry: #d91c5c;
  --rd-black: #1e1e1e;
  --rd-white: #ffffff;
  --rd-dark-grey: #5f5f5f;
  --rd-beige: #faf9f7;
  --rd-cream: #efece5;
  --rd-grey: #9c9c9c;
  --jc-beige: #F1EFEA;
}

/* ── Fonts ─────────────────────────────────────────────────────── */
#rd {
  font-family: 'Avenir Next', 'Avenir', Helvetica, Arial, sans-serif;
}

/* ── Section wrappers: padding & backgrounds ────────────────────── */
.rd-section {
  padding: 80px 0;
}

.rd-section-sm {
  padding: 40px 0;
}

.rd-bg-offwhite {
  background-color: #fbf9f7;
}

.rd-bg-white {
  background-color: #ffffff;
}

.rd-bg-beige {
  background-color: #faf9f7;
}

.rd-bg-dark {
  background-color: #1e1e1e;
}

.jcBgBeigeColored {
  background-color: var(--jc-beige);
}

/* Scroll animations */
.rd-animate {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateY(30px);
}

.rd-animate.rd-visible {
  opacity: 1;
  transform: none;
}

/* Directional variants — slide from left or right instead of up */
.rd-animate-left {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateX(-40px);
}

.rd-animate-right {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateX(40px);
}

.rd-animate-left.rd-visible,
.rd-animate-right.rd-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .rd-animate {
    opacity: 1;
    transition: none;
    transform: none;
  }

  .rd-animate-left,
  .rd-animate-right {
    opacity: 1;
    transition: none;
    transform: none;
  }
}

/* ── Row spacing helpers ───────────────────────────────────────── */
.rd-mt-24 {
  margin-top: 24px !important;
}

.rd-mt-40 {
  margin-top: 40px !important;
}

.rd-mt-60 {
  margin-top: 60px !important;
}

/* ── Typography ────────────────────────────────────────────────── */
.rd-eyebrow {
  margin: 0 0 24px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.24;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5f5f5f;
}

.rd-h1 {
  margin: 0 0 24px;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 72px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: none;
  color: #1e1e1e;
}

.rd-h1-hero {
  margin: 0 0 40px;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 110px;
  font-weight: 500;
  line-height: 1.05;
  text-align: center;
  letter-spacing: -0.03em;
  color: #1e1e1e;
}

.rd-h2 {
  margin: 0 0 24px;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 56px;
  font-weight: 500;
  line-height: 1.24;
  text-transform: none;
  color: #1e1e1e;
}

.rd-h5 {
  margin: 0 0 24px;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.24;
  color: #1e1e1e;
}

.rd-subhead {
  margin: 0 0 20px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.24;
  color: #1e1e1e;
}

.rd-body {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  color: #1e1e1e;
}

.rd-body-sm {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #1e1e1e;
}

.rd-overline {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Accent bars ────────────────────────────────────────────────── */
.rd-accent {
  display: block;
  width: 150px;
  height: 4px;
  margin: 0 0 40px;
  overflow: hidden;
}

.rd-accent img {
  display: block;
  width: 150px;
  height: 4px;
  max-width: none;
}

.rd-accent-center {
  margin-right: auto;
  margin-left: auto;
}

/* ── Buttons ────────────────────────────────────────────────────── */
.rd-cta-content .TextButton.PrimaryButton {
  border: 2px solid #fff;
  color: #1e1e1e !important;
  background: #fff;
}

.rd-cta-content .TextButton.PrimaryButton:hover {
  border-color: #f0f0f0;
  background: #f0f0f0;
}

.rd-btn-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
}

/* ── Hero ───────────────────────────────────────────────────────── */
.rd-hero-wrap {
  position: relative;
  padding-bottom: 60px;
  overflow: hidden;
}

.rd-hero-bg {
  position: absolute;
  top: 0;
  right: -15px;
  bottom: 0;
  left: -15px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.rd-hero-bg img {
  position: absolute;
  top: 10%;
  left: 0;
  display: block;
  width: 100%;
}

.rd-hero-content {
  position: relative;
  z-index: 1;
  padding: 0;
  text-align: center;
  /* 40px 0 100px; */
}

/* ── Hero intro overlay ─────────────────────────────────────────── */
.rd-hero-intro {
  position: absolute;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fbf9f7;
  opacity: 1;
  transition: opacity 0.7s ease, transform 0.7s ease;
  inset: 0;
}

@keyframes rd-hero-logo-rise {
  from {
    transform: translateY(120px) rotate(-120deg);
  }

  to {
    transform: translateY(0) rotate(0deg);
  }
}

.rd-hero-intro-logo {
  width: 900px;
  max-width: 90%;
  animation: rd-hero-logo-rise 5.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ── Engine section ─────────────────────────────────────────────── */
@media (min-width: 992px) {
  .rd-engine-text {
    padding-left: 32px;
    border-left: 2px solid #1e1e1e;
  }
}

.rd-engine-img {
  display: block;
  width: calc(100% + 32px);
  max-height: 240px;
  margin-top: 32px;
  margin-right: 0;
  margin-left: -32px;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  object-fit: cover;
}

.rd-engine-img:hover {
  transform: scale(1.01);
}

/* ── 5-column cards (override col-md-2 to 20%) ─────────────────── */
@media (min-width: 992px) {
  .rd-5col {
    float: left;
    width: 20%;
    padding-right: 15px;
    padding-left: 15px;
  }
}

/* ── These Engines section heading ─────────────────────────────── */
.rd-engines-heading {
  margin: 0 0 48px;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  color: #1e1e1e;
}

@media (max-width: 991px) {
  .rd-engines-heading {
    margin-bottom: 32px;
    font-size: 36px;
  }
}

@media (max-width: 767px) {
  .rd-engines-heading {
    font-size: 28px;
  }
}

.rd-category-card {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-rows: 1fr auto 1fr;
  min-height: 440px;
  margin-bottom: 20px;
  padding: 48px 24px;
  border-radius: 16px;
  text-align: center;
  background: #f1efea;
  overflow: hidden;
}

.rd-card-top {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-top: auto;
  padding-bottom: 20px;
}

.rd-card-top .rd-card-title {
  margin: 0;
}

.rd-card-bottom {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: auto;
  padding-top: 20px;
}

.rd-card-bottom .rd-card-desc {
  margin: 0;
}

.rd-category-card .rd-overline {
  margin-bottom: 0;
  color: #1e1e1e;
}

.rd-card-hover-overlay {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 32px 20px;
  border-radius: 16px;
  background: var(--rd-vermilion);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  inset: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.rd-category-card:hover .rd-card-hover-overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.rd-card-hover-title {
  margin: 0 0 14px;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 22px;
  font-weight: 500;
  text-align: center;
  color: #fff;
}

.rd-card-hover-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
}

.rd-card-title {
  margin: 0;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
  color: #1e1e1e;
}

.rd-card-desc {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: #1e1e1e;
}

/* ── Who We Are ────────────────────────────────────────────────── */
.rd-who-right {
  padding-left: 30px;
}

/* ── Purpose image ──────────────────────────────────────────────── */
.rd-purpose-img {
  display: block;
  width: 100%;
  height: 560px;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  object-fit: cover;
}

.rd-purpose-img:hover {
  transform: scale(1.01);
}

/* ── Divider ────────────────────────────────────────────────────── */
.rd-divider {
  margin: 40px 0 60px;
  border: none;
  border-top: 1px solid #d0d0d0;
}

/* ── Quote ──────────────────────────────────────────────────────── */
.rd-quote {
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 44px;
  font-weight: 300;
  line-height: 1.3;
  text-align: center;
  color: #1e1e1e;
}

.rd-quote strong {
  font-weight: 500;
}

/* ── CTA Banner ─────────────────────────────────────────────────── */
.rd-cta-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 400px;
  padding: 80px 0;
  overflow: hidden;
}

.rd-cta-bg {
  position: absolute;
  top: 0;
  right: -15px;
  bottom: 0;
  left: -15px;
  overflow: hidden;
}

.rd-cta-bg img {
  position: absolute;
  top: -100%;
  left: -5%;
  width: 145%;
  height: 260%;
  object-fit: cover;
}

.rd-cta-overlay {
  position: absolute;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0) 75%);
  inset: 0;
}

.rd-cta-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.rd-cta-heading {
  margin: 0 0 40px;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 56px;
  font-weight: 500;
  line-height: 1.24;
  text-transform: none;
  color: #fff;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* ── H3 / H4 headings (mapped consistently with H1/H2) ──────────── */
.rd-h3 {
  margin: 0 0 24px;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 1.24;
  text-transform: none;
  color: #1e1e1e;
}

.rd-h4 {
  margin: 0 0 20px;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 38px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: none;
  color: #1e1e1e;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .rd-h1-hero {
    font-size: 80px;
  }

  .rd-h1 {
    font-size: 56px;
  }

  .rd-h2 {
    font-size: 44px;
  }

  .rd-h3 {
    font-size: 38px;
  }

  .rd-h4 {
    font-size: 30px;
  }

  .rd-quote {
    font-size: 36px;
  }

  .rd-cta-heading {
    font-size: 44px;
  }
}

@media (max-width: 991px) {
  .rd-h1-hero {
    font-size: 56px;
  }

  .rd-h1 {
    font-size: 40px;
  }

  .rd-h2 {
    font-size: 32px;
  }

  .rd-h3 {
    font-size: 28px;
  }

  .rd-h4 {
    font-size: 24px;
  }

  .rd-h5 {
    font-size: 26px;
  }

  .rd-subhead {
    font-size: 20px;
  }

  .rd-body {
    font-size: 18px;
  }

  .rd-body-sm {
    font-size: 16px;
  }

  .rd-quote {
    font-size: 28px;
  }

  .rd-cta-heading {
    font-size: 32px;
  }

  .rd-btn-group {
    gap: 20px;
  }

  .rd-who-right {
    margin-top: 40px;
    padding-left: 0;
  }

  .rd-purpose-img {
    height: 360px;
  }

  .rd-hero-content {
    padding-bottom: 120px;
  }

  .rd-section {
    padding: 50px 0;
  }
}

@media (max-width: 767px) {
  .rd-h1-hero {
    font-size: 40px;
  }

  .rd-engine-img {
    height: 200px;
  }

  .rd-purpose-img {
    height: 260px;
  }

  .rd-cta-heading {
    font-size: 28px;
  }
}

/* ================================================================
   Why NSAP, Why Now? — scoped with .wyn- prefix
================================================================ */

/* ── Hero (split: left text / right photo) ─────────────────────── */
.wyn-hero-row {
  display: flex;
  align-items: stretch;
  margin: 0;
}

.wyn-hero-row > [class*="col-"] {
  float: none;
}

.wyn-hero-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 100px 48px 80px 15px;
}

.wyn-hero-photo-col {
  display: flex;
  min-height: 560px;
  padding: 0;
  overflow: hidden;
}

.wyn-hero-photo {
  display: block;
  flex: 1;
  width: 100%;
  min-height: 0;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  object-fit: cover;
  object-position: left;
}

#ow-early-initiatives .wyn-hero-photo {
  animation: none;
  /* scroll system (rd-animate) handles entrance; no fill-mode conflict with hover */
}

#ow-early-initiatives .wyn-hero-photo-col:hover .wyn-hero-photo {
  transform: scale(1.05);
}

/* ── Hero entrance animations ─────────────────────────────────── */
@keyframes wyn-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes wyn-hero-text-in {
  from {
    opacity: 0;
    transform: translateX(-60px) translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes wyn-hero-photo-in {
  from {
    opacity: 0;
    transform: translateX(80px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.wyn-hero-text-col {
  animation: wyn-hero-text-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wyn-hero-photo {
  animation: wyn-hero-photo-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

/* ── Body: sidebar + content ──────────────────────────────────── */
.wyn-body-row {
  display: flex;
  align-items: flex-start;
  margin: 0;
}

.wyn-body-row > [class*="col-"] {
  float: none;
}

/* Sidebar */
.wyn-sidebar-col {
  padding: 0;
  align-self: flex-start;
}

.wyn-sidebar-col.wyn-is-sticky {
  position: sticky;
  top: 0;
}

@keyframes wyn-slide-from-left {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.wyn-sidebar-inner {
  padding: 80px 32px 80px 0;
  animation: wyn-slide-from-left 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.wyn-on-this-page {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rd-vermilion, #ed4036);
}

.wyn-sidebar-nav {
  border-left: 2px solid #e0e0e0;
}

.wyn-sidebar-link {
  display: block;
  margin-left: -2px;
  padding: 10px 0 10px 20px;
  border-left: 2px solid transparent;
  font-size: 16px;
  line-height: 1.35;
  text-decoration: none;
  color: #5f5f5f;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.wyn-sidebar-link:hover,
.wyn-sidebar-link:focus {
  text-decoration: none;
  color: #1e1e1e;
  border-left-color: #aaa;
}

.wyn-sidebar-link.active {
  font-weight: 700;
  color: #1e1e1e;
  border-left-color: var(--rd-vermilion, #ed4036);
}

/* Main content column */
.wyn-content-col {
  padding-right: 15px;
  padding-left: 48px;
}

.wyn-section {
  padding: 80px 0;
}

.wyn-section + .wyn-section {
  border-top: 1px solid #e0e0e0;
}

/* ── Numbered callout box ──────────────────────────────────────── */
/* gap: 40px gives equal spacing between col↔sep↔col matching the  */
/* 40px box padding, so all edges and gutters are visually even.    */
.wyn-callout {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-top: 40px;
  padding: 40px;
  background: rgba(95, 95, 95, 0.05);
}

.wyn-callout-col {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.wyn-callout-num {
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 0.9;
  color: #9c9c9c;
  flex-shrink: 0;
}

.wyn-callout-body {
  flex: 1;
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: #5f5f5f;
}

.wyn-callout-sep {
  width: 1px;
  background: #d0d0d0;
  align-self: stretch;
  flex-shrink: 0;
}

/* ── 3-column equal callout (founding story) ───────────────────── */
.wyn-three-callout {
  display: flex;
  align-items: center;
  gap: 40px;
  margin: 32px 0;
  padding: 40px;
  background: rgba(95, 95, 95, 0.05);
}

.wyn-three-item {
  flex: 1;
  font-size: 17px;
  line-height: 1.5;
  text-align: center;
  color: #5f5f5f;
}

.wyn-three-sep {
  width: 1px;
  background: #d0d0d0;
  align-self: stretch;
  flex-shrink: 0;
}

/* ── Founding investment layout ────────────────────────────────── */
.wyn-investment {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin: 40px 0 0;
}

.wyn-invest-label {
  width: 180px;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 34px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  color: #1e1e1e;
  flex-shrink: 0;
}

.wyn-invest-sep {
  width: 2px;
  background: #e0e0e0;
  flex-shrink: 0;
  align-self: stretch;
}

.wyn-invest-text {
  flex: 1;
  font-size: 17px;
  line-height: 1.5;
  color: #5f5f5f;
}

/* ── Large center statement / pull quote ──────────────────────── */
.wyn-statement {
  padding: 48px 0;
  text-align: center;
}

.wyn-statement-text {
  margin: 0;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 36px;
  font-weight: 300;
  line-height: 1.35;
  color: #1e1e1e;
}

.wyn-statement-text strong {
  font-weight: 500;
}

/* ── Professional domains bar ──────────────────────────────────── */
.wyn-domains {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 32px 0;
  padding: 32px 20px;
  background: rgba(95, 95, 95, 0.05);
}

.wyn-domain {
  flex: 1;
  padding: 0 8px;
  font-size: 16px;
  line-height: 1.4;
  text-align: center;
  color: #5f5f5f;
}

.wyn-domain-sep {
  width: 1px;
  height: 48px;
  background: #d0d0d0;
  flex-shrink: 0;
}

/* ── Why NSAP responsive ────────────────────────────────────────── */
@media (max-width: 1199px) {
  .wyn-statement-text {
    font-size: 30px;
  }
}

@media (max-width: 991px) {
  .wyn-hero-row {
    flex-direction: column;
  }

  .wyn-hero-text-col {
    padding: 60px 15px;
  }

  .wyn-hero-photo-col {
    position: relative;
    min-height: 360px;
  }

  .wyn-body-row {
    flex-direction: column;
  }

  .wyn-sidebar-col {
    display: none;
  }

  .wyn-content-col {
    width: 100%;
    padding-left: 15px;
  }

  .wyn-callout {
    flex-direction: column;
    gap: 20px;
  }

  .wyn-callout-sep {
    display: none;
  }

  .wyn-three-callout {
    flex-direction: column;
    gap: 0;
  }

  .wyn-three-sep {
    display: none;
  }

  .wyn-three-item {
    padding: 12px 0;
    border-top: 1px solid #d0d0d0;
    text-align: left;
  }

  .wyn-three-item:first-child {
    border-top: none;
  }

  .wyn-investment {
    flex-direction: column;
  }

  .wyn-invest-label {
    width: auto;
    text-align: left;
  }

  .wyn-invest-sep {
    display: none;
  }

  .wyn-domains {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 16px;
  }

  .wyn-domain-sep {
    display: none;
  }

  .wyn-domain {
    flex: none;
    width: 45%;
    text-align: left;
  }

  .wyn-statement-text {
    font-size: 26px;
  }

  .wyn-section {
    padding: 50px 0;
  }
}

@media (max-width: 767px) {
  .wyn-hero-text-col {
    padding: 40px 15px 32px;
  }

  .wyn-hero-photo-col {
    min-height: 260px;
  }

  .wyn-statement-text {
    font-size: 20px;
  }

  .wyn-domain {
    width: 100%;
  }
}

/* ================================================================
   Our Work page — scoped with .ow- prefix / #rd .ow-* rules
================================================================ */

/* ── CSS-only accent / eyebrow bar (horizontal) ─────────────────── */
.ow-accent {
  display: block;
  width: 150px;
  height: 4px;
  margin: 0 0 40px;
  border-radius: 2px;
  background: var(--rd-green);
  flex-shrink: 0;
}

/* Centered variant */
.ow-accent-center {
  margin-right: auto;
  margin-left: auto;
}

/* ── Vertical accent bar (used inside engine cards) ─────────────── */
.ow-accent-v {
  width: 3px;
  min-height: 60px;
  border-radius: 2px;
  background: var(--rd-green);
  align-self: stretch;
  flex-shrink: 0;
}

/* ── Engine image cards ─────────────────────────────────────────── */
.ow-engine-card {
  position: relative;
  height: 480px;
  margin-bottom: 24px;
  overflow: hidden;
}

.ow-engine-card > img {
  position: absolute;
  display: block;
  width: 100%;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  inset: 0;
  object-fit: cover;
}

/* Beats theme (0,3,1) !important — ID gives us (1,1,1) */
#masterContentArea .ow-engine-card > img {
  height: 100% !important;
}

.ow-engine-card:hover > img {
  transform: scale(1.02);
}

.ow-engine-overlay {
  position: absolute;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 43%, rgba(0, 0, 0, 0.87) 78%);
  inset: 0;
  pointer-events: none;
}

.ow-engine-content {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  gap: 20px;
  padding: 40px;
}

.ow-engine-text {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: #fff;
}

.ow-engine-text strong {
  font-weight: 700;
}

.ow-engine-heading {
  margin: 0 0 10px;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 1.24;
  color: #fff;
}

/* ── "Both engines run on the same fuel" statement ───────────────── */
.ow-fuel-statement {
  margin: 0;
  padding: 30px 0;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 1.3;
  text-align: center;
  color: var(--rd-dark-grey);
}

.ow-fuel-statement strong {
  font-weight: 500;
  color: #1e1e1e;
}

/* ── Council items grid ──────────────────────────────────────────── */
.ow-councils {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  margin: 40px 0 48px;
}

.ow-council-item {
  display: flex;
  align-items: center;
  gap: 16px;
  width: calc(25% - 24px);
  min-width: 220px;
}

.ow-council-icon {
  width: 38px;
  flex-shrink: 0;
  object-fit: contain;
}

/* Beats theme's (0,3,1) !important rule — same specificity, loads last */
.ow-councils .ow-council-item img.ow-council-icon {
  height: 38px !important;
}

.ow-council-label {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
  color: #1e1e1e;
}

/* ── Task force equal-height cards row ───────────────────────────── */
/* Applied as a modifier on Bootstrap .row — inherits its -15px margins */
.ow-task-eq {
  display: flex;
  flex-wrap: wrap;
}

.ow-task-eq > [class*="col-"] {
  display: flex;
  flex-direction: column;
  float: none;
}

.ow-task-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  margin-bottom: 30px;
  padding: 48px;
  border: 1px solid #ddd;
  border-radius: 24px;
  background: #fff;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ow-task-card:hover {
  border-color: rgba(95, 95, 95, 0.05);
  background: rgba(95, 95, 95, 0.05);
  box-shadow: 3px 7px 12px rgba(0, 0, 0, 0.15);
  transform: scale(1.005);
}

.ow-task-title {
  margin: 0 0 24px;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.24;
  text-align: center;
  color: #1e1e1e;
}

.ow-task-card ul {
  margin-bottom: 24px;
  padding-left: 24px;
}

.ow-task-card li {
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 1.5;
  color: #1e1e1e;
}

.ow-task-card li:last-child {
  margin-bottom: 0;
}

/* Pushes the bottom statement to the end of the card */
.ow-task-footer {
  margin-top: auto;
  padding-top: 40px;
}

.ow-task-statement {
  margin: 0;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 32px;
  font-weight: 300;
  line-height: 1.35;
  text-align: center;
  color: var(--rd-dark-grey);
}

.ow-task-statement strong {
  font-weight: 500;
  color: #1e1e1e;
}

/* ── Submit / CTA section ────────────────────────────────────────── */
.ow-submit-body {
  margin: 0 auto 40px;
  text-align: center;
}

/* ── Our Work responsive ─────────────────────────────────────────── */
@media (max-width: 1199px) {
  .ow-fuel-statement {
    font-size: 34px;
  }

  .ow-task-statement {
    font-size: 28px;
  }
}

@media (max-width: 991px) {
  .ow-engine-card {
    height: 380px;
  }

  .ow-fuel-statement {
    padding: 36px 0;
    font-size: 26px;
  }

  .ow-council-item {
    width: calc(50% - 16px);
  }

  .ow-task-card {
    padding: 32px 24px;
  }

  .ow-task-title {
    font-size: 22px;
  }

  .ow-task-statement {
    font-size: 22px;
  }

  .ow-task-eq {
    flex-direction: column;
  }
}

@media (max-width: 767px) {
  .ow-engine-card {
    height: 320px;
  }

  .ow-fuel-statement {
    padding: 28px 0;
    font-size: 22px;
  }

  .ow-council-item {
    width: 100%;
  }

  .ow-task-statement {
    font-size: 20px;
  }
}

/* ================================================================
   Give Now / Donation form
================================================================ */
.max-w-sm {
  max-width: 800px;
}

.give-now {
  padding: 60px 0 0;
}

/* Non-header text bumped by at least 2px                            */
.give-now p,
.give-now label,
.give-now input,
.give-now select,
.give-now textarea,
.give-now li {
  font-size: 15px;
}

.give-now #ctl01_TemplateBody_WebPartManager1_gwpciDonationCreator1_ciDonationCreator1_GiftAmountLabel2,
.give-now #ctl01_TemplateBody_WebPartManager1_gwpciMydetails_6e79d152c5b3411ebea8343590dfc6c4_ciMydetails_6e79d152c5b3411ebea8343590dfc6c4_Panel_Mydetails h4,
.give-now #ctl01_TemplateBody_WebPartManager1_gwpciDonationCreator1_ciDonationCreator1_TransactionOptionsLabel,
.give-now #ctl01_TemplateBody_WebPartManager1_gwpciPaymentCreator_ciPaymentCreator__Head h4 {
  display: block;
  text-transform: capitalize;
}

.give-now #ctl01_TemplateBody_WebPartManager1_gwpciDonationCreator1_ciDonationCreator1_GiftAmountLabel2 {
  margin-top: 30px;
}

.give-now #ctl01_TemplateBody_WebPartManager1_gwpciDonationCreator1_ciDonationCreator1_TransactionOptionsLabel {
  margin-top: 15px;
}

.give-now #ctl01_TemplateBody_WebPartManager1_gwpciMydetails_6e79d152c5b3411ebea8343590dfc6c4_ciMydetails_6e79d152c5b3411ebea8343590dfc6c4_Panel_Mydetails h4 {
  margin-top: 20px;
}

.give-now #ctl01_TemplateBody_WebPartManager1_gwpciPaymentCreator_ciPaymentCreator__Head h4 {
  display: flex;
}

.give-now p.jc-large {
  margin-bottom: 0;
  font-size: 19px;
}

/* One-time / Recurring toggle buttons: 2px black border, no shadow  */
.give-now .radiobutton-btn-group li input + label,
.give-now .radiobutton-btn-group li input:checked + label {
  border: 2px solid #000 !important;
  box-shadow: none !important;
}

.give-now .panel-body,
.give-now .PanelBody {
  padding: 20px 0 0;
}

.give-now .panel-heading.Distinguish,
.give-now .PanelHead.Distinguish,
.give-now .TitleBarCaption,
.give-now div.PanelTitle {
  margin-top: 50px;
  padding-top: 50px !important;
  padding-left: 0;
  border-top: 1px solid #e6e6e6;
}

.give-now .AddPaddingHorizontal {
  padding: 0;
}

.give-now select,
.give-now textarea,
.give-now input[type="text"],
.give-now input[type="password"],
.give-now input[type="datetime"],
.give-now input[type="datetime-local"],
.give-now input[type="date"],
.give-now input[type="month"],
.give-now input[type="time"],
.give-now input[type="week"],
.give-now input[type="number"],
.give-now input[type="email"],
.give-now input[type="url"],
.give-now input[type="search"],
.give-now input[type="tel"],
.give-now input[type="color"],
.give-now .uneditable-input,
.give-now .input-fake,
.give-now .RadPicker .RadInput,
.give-now .RadComboBox.RadComboBox_MetroTouch .rcbInner {
  width: 250px;
  padding: 0.75rem;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
  transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.give-now input#donationAmountFor3DS + div.PanelField.Left {
  display: none;
}

.tabs-wizard-og .RadPicker_Metro,
.give-now .RadPicker_Metro {
  font-family: var(--PrimaryFontFam) !important;
}

.give-now .RadComboBox.RadComboBox_MetroTouch .rcbInput {
  height: 100%;
  padding: 0;
  border: 0;
  box-shadow: unset;
}

.give-now .RadPicker .RadInput > input {
  float: left;
  height: unset !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: unset;
}

.give-now .RadPicker .rcCalPopup,
.give-now .RadPicker .rcTimePopup {
  width: 30px;
  padding: 0;
}

@media (min-width: 480px) {

  .create-account .input-wrapper,
  .create-account .RadComboBox.RadComboBox,
  .give-now .input-wrapper,
  .give-now .RadComboBox.RadComboBox {
    width: unset;
  }
}

@media (min-width: 768px) {

  .create-account .PanelField,
  .give-now .PanelField {
    display: flex;
    align-items: center;
  }

  .create-account .PanelField:has(label[for*="Email"]),
  .give-now .PanelField:has(label[for*="Email"]) {
    display: flex !important;
  }

  .create-account .PanelField:has(div[id*="DivLogonEmail"]) {
    align-items: end;
  }

  .create-account .DisplayNone,
  .create-account .hidden,
  .give-now .DisplayNone,
  .give-now .hidden {
    display: none;
  }

  .give-now #ctl01_TemplateBody_WebPartManager1_gwpciDonationCreator1_ciDonationCreator1_BatchSelectorDisplayDiv {
    display: block;
  }

  .give-now .PanelField label,
  .give-now .PanelField .Label {
    width: 15em !important;
  }

  .give-now #ctl01_TemplateBody_WebPartManager1_gwpciDonationCreator1_ciDonationCreator1_BatchSelectorDisplay1_OverrideDateToggleLabel {
    width: 13.7em !important;
  }

  .give-now label[for*='ctl01_TemplateBody_WebPartManager1_gwpciSubmitDonation_ciSubmitDonation_SuppressEmailCheckbox'] {
    width: 20em !important;
  }

  .give-now .LabelSpacer,
  .give-now .LabelSpacer.PanelField {
    min-height: 1px;
    padding-left: 14.55em;
  }

}

.create-account span[id*=LabelLogon],
.give-now span[id*=LabelLogon] {
  display: inline;
  width: 172px !important;
  margin-top: 20px;
  font-size: 18px;
  font-weight: 500;
}

.create-account .progress,
.give-now .progress {
  margin: 5px 0 !important;
}

.create-account span[id*=PasswordMessage],
.give-now span[id*=PasswordMessage] {
  display: block !important;
  margin-bottom: 10px !important;
  color: #aaa;
}

.create-account a[id*="SelectLink"] {
  margin-right: 0 !important;
}

.create-account input[id*="InfoButton"] {
  width: unset;
  padding: 5px 0 0 5px;
  border: 0;
  box-shadow: unset;
}

.give-now .radiobutton-buttons input[type="radio"] + label {
  width: unset !important;
  padding: 10px 30px;
  border-width: 2px !important;
  font-size: 18px;
}

.give-now .radiobutton-buttons.radiobutton-btn-group {
  gap: 0;
}

.give-now .PanelNoPadding .panel-body {
  padding: 0;
}

.give-now .radiobutton-buttons input:checked + label::after {
  position: relative;
  top: -1px;
  right: -5px;
}

.give-now .InputSmall,
.give-now .InputSmallWrapper input[type='text'],
.give-now .InputSmallWrapper textarea,
.give-now .InputSmallWrapper .RadComboBox {
  width: auto;
}

.create-account .RadComboBox .rcbInner.rcbToggleButtonHidden {
  padding-right: 0;
}

.give-now label,
.give-now .Label,
.give-now .PanelFieldLabelFont {
  font-weight: normal;
}

.jcDonationPage #ctl01_TemplateBody_WebPartManager1_gwpciSubmitDonation_ciSubmitDonation_SuppressEmailInner {
  float: none;
}

/* Bottom padding lives on the CommandBar (submit button area)       */
.jcDonationPage .CommandBar {
  padding-bottom: 60px;
}

@media (max-width: 767px) {
  .give-now {
    padding-top: 30px;
  }

  .jcDonationPage .CommandBar {
    padding-bottom: 30px;
  }
}

.jcDonationPage [id*="PaymentCreator_ciPaymentCreator__Head"] .panel-title::after {
  width: 225px;
  height: 1em;
  background-image: url(/images/NSAP/Content/credit-cards-transparent-background.png);
}

/* ── Give Now — alignment updates ───────────────────────────────────── */

@media (min-width: 768px) {
  .give-now legend + .PanelField {
    justify-content: center;
  }
}

.give-now .radiobutton-buttons.radiobutton-btn-group {
  justify-content: center;
}

.give-now #ctl01_TemplateBody_WebPartManager1_gwpciDonationCreator1_ciDonationCreator1_OtherAmount,
.give-now .panel {
  max-width: 695px;
  margin: auto;
}

.give-now #ctl01_TemplateBody_WebPartManager1_gwpciDonationCreator1_ciDonationCreator1_OtherAmount {
  margin-left: 53px;
}

.give-now #ste_container_ciDonationCreator1 .panel {
  max-width: 800px;
}

.give-now h3,
.give-now h2,
.give-now .media,
.give-now legend,
.give-now h4 {
  text-align: center;
}

.give-now #ctl01_TemplateBody_WebPartManager1_gwpciPaymentCreator_ciPaymentCreator__Head h4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

/* ================================================================
   The Autism Professional page — scoped with .tap- prefix
================================================================ */

/* ── Cyan accent bar ─────────────────────────────────────────────── */
.tap-accent {
  display: block;
  width: 150px;
  height: 4px;
  margin: 0 0 40px;
  border-radius: 2px;
  background: var(--rd-cyan, #00abed);
  flex-shrink: 0;
}

.tap-accent-center {
  margin-right: auto;
  margin-left: auto;
}

/* ── Photo/text split rows ───────────────────────────────────────── */
.tap-split-row {
  display: flex;
  align-items: stretch;
  margin: 0;
}

.tap-split-row > [class*="col-"] {
  float: none;
}

.tap-photo-col {
  display: flex;
  min-height: 520px;
  padding: 0;
  overflow: hidden;
}

.tap-section-photo {
  display: block;
  flex: 1;
  width: 100%;
  min-height: 0;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  object-fit: cover;
}

.tap-photo-col:hover .tap-section-photo {
  transform: scale(1.03);
}

.tap-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 15px 80px 60px;
}

/* Left-photo variant: text col gets padding on the right instead */
.tap-text-col-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 60px 80px 15px;
}

/* ── "Who Is" section ────────────────────────────────────────────── */
.tap-who-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 80px 60px 80px 15px;
}

/* ── Bold subhead (32px bold, sits between body paragraphs) ──────── */
.tap-bold-subhead {
  margin: 0 0 24px;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  color: #1e1e1e;
}

/* ── Domain Accordion ────────────────────────────────────────────── */
.tap-domain-accordion {
  margin-top: 8px;
}

.tap-panel {
  border-top: 1px solid #d0d0d0;
}

.tap-panel:last-child {
  border-bottom: 1px solid #d0d0d0;
}

.tap-accordion-toggle {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  padding: 24px 0;
  border: none;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.tap-accordion-toggle:focus {
  outline: none;
}

.tap-accordion-toggle:focus-visible {
  outline: 2px solid var(--rd-cyan, #00abed);
  outline-offset: 2px;
}

.tap-domain-num {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--rd-dark-grey, #5f5f5f);
  flex-shrink: 0;
}

.tap-domain-name {
  flex: 1;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.24;
  color: #1e1e1e;
}

/* Plus/minus toggle icon */
.tap-domain-icon {
  position: relative;
  width: 18px;
  height: 18px;
  margin-left: auto;
  flex-shrink: 0;
}

.tap-domain-icon::before,
.tap-domain-icon::after {
  position: absolute;
  border-radius: 1px;
  background: var(--rd-dark-grey, #5f5f5f);
  transition: transform 0.25s ease, opacity 0.25s ease;
  content: '';
}

.tap-domain-icon::before {
  top: 0;
  left: 8px;
  width: 2px;
  height: 18px;
}

.tap-domain-icon::after {
  top: 8px;
  left: 0;
  width: 18px;
  height: 2px;
}

/* Open state: collapse the vertical bar — Bootstrap manages aria-expanded */
.tap-accordion-toggle[aria-expanded="true"] .tap-domain-icon::before {
  opacity: 0;
  transform: rotate(90deg);
}

.tap-panel-body {
  padding: 0;
  font-size: 18px;
  line-height: 1.6;
  color: #1e1e1e;
}

.tap-panel-body .ow-task-statement {
  padding-bottom: 28px;
}

/* ── Domains intro col ───────────────────────────────────────────── */
.tap-domains-intro {
  padding-right: 48px;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .tap-bold-subhead {
    font-size: 26px;
  }

  .tap-domain-name {
    font-size: 18px;
  }
}

@media (max-width: 991px) {

  .tap-split-row,
  .tap-who-text-col {
    flex-direction: column;
  }

  .tap-split-row > [class*="col-"] {
    width: 100%;
  }

  .tap-photo-col {
    min-height: 360px;
  }

  .tap-text-col,
  .tap-text-col-right {
    padding: 60px 15px;
  }

  .tap-who-text-col {
    width: 100%;
    padding: 60px 15px;
  }

  .tap-bold-subhead {
    font-size: 22px;
  }

  .tap-domain-name {
    font-size: 16px;
  }

  .tap-domains-intro {
    margin-bottom: 40px;
    padding-right: 15px;
  }
}

@media (max-width: 767px) {
  .tap-photo-col {
    min-height: 260px;
  }

  .tap-domain-name {
    font-size: 15px;
  }

  .tap-bold-subhead {
    font-size: 20px;
  }

  .tap-accordion-toggle {
    gap: 16px;
  }
}

/* ================================================================
   Join NSAP page — scoped with .jn- prefix
================================================================ */

/* ── Marigold accent bar ──────────────────────────────────────── */
.jn-accent {
  display: block;
  width: 150px;
  height: 4px;
  margin: 0 0 40px;
  border-radius: 2px;
  background: var(--rd-marigold, #f5911c);
  flex-shrink: 0;
}

.jn-accent-center {
  margin-right: auto;
  margin-left: auto;
}

/* ── Membership cards row (equal height) ──────────────────────── */
.jn-membership-row {
  display: flex;
  align-items: stretch;
  margin: 0;
}

.jn-membership-row > [class*="col-"] {
  display: flex;
  flex-direction: column;
  float: none;
}

.jn-membership-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 60px;
  border: 1px solid #ddd;
  border-radius: 24px;
  text-align: center;
  background: #fff;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.jn-membership-card:hover {
  border-color: rgba(95, 95, 95, 0.05);
  background: rgba(95, 95, 95, 0.05);
  box-shadow: 3px 7px 12px rgba(0, 0, 0, 0.15);
  transform: scale(1.005);
}

.jn-membership-list {
  width: 100%;
  margin: 0;
  padding-left: 28px;
  text-align: left;
  list-style: disc;
}

.jn-membership-list li {
  margin-bottom: 8px;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
  color: #1e1e1e;
}

.jn-membership-list li:last-child {
  margin-bottom: 0;
}

/* ── Why join: left label + right 2×2 grid ───────────────────── */
.jn-why-row {
  display: flex;
  align-items: center;
  margin: 0;
}

.jn-why-row > [class*="col-"] {
  float: none;
}

.jn-why-label-col {
  padding-right: 48px;
}

/* ── 2×2 grid with orange cross borders ─────────────────────── */
.jn-why-grid {
  display: flex;
  flex-wrap: wrap;
}

.jn-why-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  box-sizing: border-box;
  width: 50%;
  min-height: 260px;
  padding: 48px;
  border-width: 0;
  border-style: solid;
  border-color: var(--rd-marigold, #f5911c);
  cursor: default;
}

.jn-why-card-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* opacity covers the rd-animate fade-in; transform covers hover lift + entrance slide */
  transition: opacity 0.5s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.jn-why-card:hover .jn-why-card-text {
  transform: translateY(-6px);
  transition-delay: 0s !important;
}

.jn-why-card:nth-child(1) {
  border-radius: 24px 0 0 0;
  border-right-width: 1px;
  border-bottom-width: 1px;
}

.jn-why-card:nth-child(2) {
  border-radius: 0 24px 0 0;
  border-left-width: 1px;
  border-bottom-width: 1px;
}

.jn-why-card:nth-child(3) {
  border-radius: 0 0 0 24px;
  border-right-width: 1px;
  border-top-width: 1px;
}

.jn-why-card:nth-child(4) {
  border-radius: 0 0 24px 0;
  border-left-width: 1px;
  border-top-width: 1px;
}

.jn-why-num {
  margin: 0;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.24;
  color: #1e1e1e;
}

.jn-why-text {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: #1e1e1e;
}

/* ── "Who it's for" dark hero section ────────────────────────── */
.jn-who-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 580px;
  padding: 120px 0;
  overflow: hidden;
}

.jn-who-bg {
  position: absolute;
  top: 0;
  right: -15px;
  bottom: 0;
  left: -15px;
  overflow: hidden;
}

.jn-who-bg img {
  position: absolute;
  top: -58%;
  left: 0;
  width: 110%;
  height: 210%;
  object-fit: cover;
}

.jn-who-overlay {
  position: absolute;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0) 70%);
  inset: 0;
}

.jn-who-content {
  position: relative;
  z-index: 1;
}

.jn-who-content .rd-h1,
.jn-who-content .rd-body-sm {
  color: #fff;
}

.jn-who-content .TextButton {
  border: 2px solid #fff;
  color: #1e1e1e !important;
  background: #fff;
}

.jn-who-content .TextButton:hover {
  border-color: #f0f0f0;
  background: #f0f0f0;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .jn-why-card {
    padding: 36px;
  }
}

@media (max-width: 991px) {
  .jn-membership-row {
    flex-direction: column;
  }

  .jn-why-row {
    flex-direction: column;
  }

  .jn-why-label-col {
    width: 100%;
    margin-bottom: 40px;
    padding-right: 15px;
  }

  .jn-why-card {
    width: 100%;
    border-width: 0 0 1px 0 !important;
    border-color: var(--rd-marigold, #f5911c) !important;
    border-radius: 0 !important;
  }

  .jn-why-card:first-child {
    border-radius: 24px 24px 0 0 !important;
  }

  .jn-why-card:last-child {
    border-radius: 0 0 24px 24px !important;
    border-bottom-width: 0 !important;
  }

  .jn-membership-card {
    margin-bottom: 24px;
    padding: 40px 24px;
  }

  .jn-who-wrap {
    min-height: 480px;
    padding: 80px 0;
  }
}

@media (max-width: 767px) {
  .jn-why-card {
    padding: 32px 20px;
  }

  .jn-who-wrap {
    min-height: 0;
    padding: 60px 0;
  }

  .jn-membership-card {
    padding: 32px 20px;
  }
}

/* ── Bio block (join-nsap.html) ─────────────────────────────────── */

.jn-bio-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.jn-bio-left-col {
  display: flex;
  align-items: stretch;
}

.jn-bio-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 48px 40px;
  border-radius: 12px;
  background: var(--rd-cream, #efece5);
}

.jn-bio-photo {
  display: block;
  width: 240px;
  height: 240px;
  margin: 0 auto 32px;
  border: 4px solid var(--rd-vermilion, #ed4036);
  border-radius: 50%;
  object-fit: cover;
}

.jn-bio-title {
  margin: 0;
  font-family: 'Jost', sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  color: var(--rd-dark-grey, #5f5f5f);
}

.jn-bio-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 48px;
}

.jn-bio-lead {
  margin-bottom: 24px;
  font-family: 'Jost', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--rd-black, #1e1e1e);
}

@media (max-width: 991px) {
  .jn-bio-content {
    padding-top: 40px;
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .jn-bio-card {
    padding: 40px 24px;
  }

  .jn-bio-photo {
    width: 180px;
    height: 180px;
  }
}

/* ── TAP "You Are" paragraph — split typography + zoom animations ── */

.tap-you-are-para {
  margin-bottom: 20px;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.55;
  color: #1e1e1e;
}

.tap-whatever-para {
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.5;
  color: #1e1e1e;
}

/* Each sentence is inline-block so transform works without affecting flow */
.tap-zw {
  position: relative;
  display: inline-block;
}

/* Four zoom magnitudes */
@keyframes tap-zoom-sm {

  0%,
  100% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.22);
  }
}

@keyframes tap-zoom-md {

  0%,
  100% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.48);
  }
}

@keyframes tap-zoom-lg {

  0%,
  100% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.72);
  }
}

@keyframes tap-zoom-xl {

  0%,
  100% {
    transform: scale(1);
  }

  40% {
    transform: scale(2.05);
  }
}

/*
  Delays are from when rd-visible fires on the parent row.
  The row fade-in transition takes ~0.9s (0.1s stagger + 0.8s transition),
  so all zoom delays begin at ≥ 0.9s to fire after the text is fully visible.
  Order, duration, and peak scale are deliberately varied and non-sequential.
*/
.rd-animate.rd-visible .tap-zw-1 {
  animation: tap-zoom-md 0.50s ease-in-out 0.90s backwards;
}

.rd-animate.rd-visible .tap-zw-2 {
  animation: tap-zoom-sm 0.40s ease-in-out 1.80s backwards;
}

.rd-animate.rd-visible .tap-zw-3 {
  animation: tap-zoom-lg 0.55s ease-in-out 1.30s backwards;
}

.rd-animate.rd-visible .tap-zw-4 {
  animation: tap-zoom-sm 0.42s ease-in-out 2.15s backwards;
}

.rd-animate.rd-visible .tap-zw-5 {
  animation: tap-zoom-xl 0.65s ease-in-out 0.85s backwards;
}

.rd-animate.rd-visible .tap-zw-6 {
  animation: tap-zoom-lg 0.55s ease-in-out 1.95s backwards;
}

.rd-animate.rd-visible .tap-zw-7 {
  animation: tap-zoom-sm 0.45s ease-in-out 2.45s backwards;
}

.rd-animate.rd-visible .tap-zw-8 {
  animation: tap-zoom-lg 0.55s ease-in-out 1.60s backwards;
}

.rd-animate.rd-visible .tap-zw-9 {
  animation: tap-zoom-sm 0.42s ease-in-out 1.10s backwards;
}

.rd-animate.rd-visible .tap-zw-10 {
  animation: tap-zoom-lg 0.60s ease-in-out 2.00s backwards;
}

.rd-animate.rd-visible .tap-zw-11 {
  animation: tap-zoom-md 0.50s ease-in-out 1.45s backwards;
}

.rd-animate.rd-visible .tap-zw-12 {
  animation: tap-zoom-md 0.52s ease-in-out 2.65s backwards;
}

.rd-animate.rd-visible .tap-zw-13 {
  animation: tap-zoom-sm 0.42s ease-in-out 1.20s backwards;
}

.rd-animate.rd-visible .tap-zw-14 {
  animation: tap-zoom-xl 0.70s ease-in-out 2.25s backwards;
}

@media (prefers-reduced-motion: reduce) {
  .rd-animate.rd-visible .tap-zw {
    animation: none;
  }
}

/* ── Give Now form — lighter placeholder text ────────────────────── */
.give-now input::-webkit-input-placeholder,
.give-now input::placeholder,
.give-now select:has(option[value=""]:checked),
.create-account input::-webkit-input-placeholder,
.create-account input::placeholder,
.create-account select:has(option[value=""]:checked),
.tabs-wizard-og input::-webkit-input-placeholder,
.tabs-wizard-og input::placeholder,
.tabs-wizard-og select:has(option[value=""]:checked) {
  color: rgba(0, 0, 0, 0.35);
}

/* ── Invite cards hover (become-a-member) ─────────────────────────── */
.bam-invite-cards > [class*="col-"] {
  overflow: hidden;
}

.reg-invite-card {
  transition: transform 0.35s ease;
}

.reg-invite-card:hover {
  transform: scale(1.04);
}

/* ================================================================
   Sign-in / Account Creation
   ================================================================ */

/* ── Sign-in Page ─────────────────────────── */

.your-information-zone,
.membership-type-zone,
.create-account-zone,
.sign-in-zone {
  padding: 30px 0 60px;
}

.your-information-zone,
.membership-type-zone,
.create-account-zone {
  padding-bottom: 30px;
}

.org-create-account .your-information-zone,
.org-create-account .membership-type-zone {
  padding: 0 0 30px;
}

.org-create-account .panel-body:has([id*=LogOnLink]) {
  padding-top: 0;
}

.org-create-account .panel-heading.Distinguish {
  padding-bottom: 0;
}

.order-summary-zone-header {
  padding-top: 30px;
}

.order-confirmation-header {
  padding: 30px 0 0;
}

.create-account #ctl01_TemplateBody_WebPartManager1_gwpciNewContactAccountCreatorCommon_ciNewContactAccountCreatorCommon_ctl00.panel,
.sign-in-zone .panel {
  max-width: 550px;
  margin: auto;
  padding: 10px 0 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
}

.additional-subscriptions .iMIS-WebPart:nth-of-type(2),
.order-confirmation-zone .panel,
.your-information .tabs-wizard-og > .panel,
.membership-type .panel,
.create-account .nominate-form .panel {
  max-width: 1080px;
  margin: auto;
  padding: 20px 30px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
}

.create-account #ctl01_TemplateBody_WebPartManager1_gwpciNewContactAccountCreatorCommon_ciNewContactAccountCreatorCommon_ctl00.panel {
  max-width: 1080px;
  padding: 20px 30px;
}

.create-account .nominate-form .panel {
  margin: 0 auto 60px auto;
}

.create-account .StandardPanel,
.create-account .nominate-form .panel .panel-body {
  max-width: 585px;
  margin: auto;
  border: 1px solid transparent;
}

.create-account .nominate-form .panel .panel-body {
  max-width: 800px;
}

.create-account .nominate-form .panel .panel-body .ruFakeInput {
  display: none;
}

.create-account .nominate-form .panel .panel-body h2#FB_Header_020 {
  margin-top: 20px;
}

.create-account .nominate-form .panel .panel-body [id*=StatementofInterest_Total] {
  display: block;
  margin-top: 5px;
}

.create-account .nominate-form .panel .panel-body .ruButton {
  margin-top: 10px;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  font-size: 13px !important;
  background-color: #fff;
  cursor: pointer;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
  transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.create-account .nominate-form .panel .panel-body input[type=submit] {
  position: relative;
  display: block;
  justify-content: center;
  width: unset !important;
  margin: auto;
  padding: 10px 22px;
  border: 2px solid var(--BtnBgPrimary);
  border: 1px solid #e6e6e6 !important;
  font-size: 20px;
  letter-spacing: 0px;
  color: var(--Light) !important;
  background: var(--BtnBgPrimary);
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
  transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, padding 0.2s ease;
  overflow: hidden;
}

.create-account .nominate-form .panel .panel-body input[type=submit]:hover {
  border-color: var(--BtnBgPrimaryHover);
  text-decoration: none;
  color: var(--Light) !important;
  background: var(--BtnBgPrimaryHover);
}

@media (min-width: 768px) {

  .create-account .nominate-form .panel .panel-body .PanelField label,
  .create-account .nominate-form .panel .panel-body .PanelField .Label {
    width: 15.5em;
  }
}

.create-account-zone .panel-heading.Distinguish,
.sign-in-zone .panel-heading.Distinguish {
  border-top: 0;
}

.create-account-zone h2,
.create-account-zone div[id*=DivLogOnLink],
.sign-in-zone h2 {
  text-align: center;
}

.create-account-zone div[id*=DivLogOnLink] {
  margin-top: -15px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.38);
}

.order-confirmation-zone input[type=text],
.tabs-wizard-og input[type=text],
.tabs-wizard-og select,
.create-account .chosen-container.chosen-container-multi,
.create-account-zone select,
.create-account-zone input,
.create-account .RadComboBox.RadComboBox_MetroTouch,
.sign-in-zone input,
.create-account .nominate-form .panel .panel-body textarea {
  width: 250px;
  padding: 0.75rem;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
  transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.create-account .chosen-container.chosen-container-multi,
.create-account .RadComboBox.RadComboBox_MetroTouch {
  padding: 0;
}

.create-account .chosen-container.chosen-container-multi {
  width: 250px !important;
}

.create-account .RadComboBox.RadComboBox_MetroTouch span,
.create-account .RadComboBox.RadComboBox_MetroTouch input {
  border: unset;
  box-shadow: unset;
}

.create-account .CommandBar {
  display: flex;
  justify-content: center;
  margin: 0 auto 90px auto;
  margin-bottom: 90px;
}

.org-create-account .CommandBar {
  margin-bottom: 30px;
}

.tabs-wizard-og .CommandBar {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.create-account .chosen-container.chosen-container-multi .chosen-choices {
  padding: 0.75rem;
  border: 0;
  box-shadow: unset !important;
}

.create-account .chosen-container.chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  font-family: var(--PrimaryFontFam) !important;
  font-size: 14px;
}

.create-account .chosen-container:after {
  top: 1.25rem;
  right: 0.75rem;
}

.membership-type #ctl01_TemplateBody_WebPartManager1_gwpciNewPanelEditorCommon_ciNewPanelEditorCommon_panelEditor_LocalButtonBar {
  display: flex;
  justify-content: center;
  gap: 9px;
  float: none;
  margin: auto;
}

.membership-type #ste_container_ciNewContentHtml1_e29e1d4a895544a1876bf1fcad5956d5 {
  display: flex;
  justify-content: center;
  margin: auto;
}

.org-create-account .your-information-zone .RadAjaxPanel,
.tabs-wizard-og .RadAjaxPanel {
  width: 780px;
  margin: auto;
}

.tabs-wizard-og .RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsLevel1 {
  display: flex;
  justify-content: center;
}

.org-create-account .your-information-zone label,
.org-create-account .your-information-zone .PanelField .Label,
.tabs-wizard-og label,
.tabs-wizard-og .PanelField .Label {
  width: 18em !important;
  padding-right: 20px;
  overflow-wrap: break-word !important;
}

.org-create-account .your-information-zone label,
.org-create-account .your-information-zone .PanelField .Label {
  width: 20em !important;
}

.tabs-wizard-og label[for*="AgreeToNSAPTermsPolicy"] {
  padding-right: 0;
}

.tabs-wizard-og .CheckBoxList {
  width: 250px !important;
  height: 180px !important;
  border: 0 !important;
}

.tabs-wizard-og .CheckBoxList[id*=PrimaryWorkSetting] {
  width: 400px !important;
  height: 260px !important;
}

.tabs-wizard-og .CheckBoxList[id*=PrimaryDomain] {
  width: 400px !important;
  height: 200px !important;
}

.tabs-wizard-og .CheckBoxList[id*=DisabilityTypes] {
  height: 240px !important;
}

.tabs-wizard-og .CheckBoxList[id*=FluentLanguages] {
  height: 240px !important;
}

.org-create-account .your-information-zone .CheckBoxList {
  width: 450px !important;
  height: 200px !important;
  border: 0 !important;
}

.org-create-account .your-information-zone .CheckBoxList[id*=WorkSetting] {
  height: 260px !important;
}

.tabs-wizard-og .panel-heading.Distinguish {
  margin-top: 10px;
  padding-top: 40px;
  border-color: #ddd;
}

.tabs-wizard-og h2.panel-title {
  margin-bottom: 0;
  padding-bottom: 0;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  text-transform: none;
}

.modal-content:has([id*="contactPicture"]) input[type="checkbox"],
.give-now input[type="checkbox"],
.member-profile .PanelEditorEditForm input[type="checkbox"],
.member-profile .CheckBoxList input[type="checkbox"],
.org-create-account .your-information-zone input[type="checkbox"],
.tabs-wizard-og input[type="checkbox"] {
  position: relative;
  top: -2px;
  right: 2px;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
  appearance: none;
  -webkit-appearance: none;
  vertical-align: middle;
}

.modal-content:has([id*="contactPicture"]) input[type="checkbox"]:checked,
.give-now input[type="checkbox"]:checked,
.member-profile .CheckBoxList input[type="checkbox"]:checked,
.org-create-account .your-information-zone input[type="checkbox"]:checked,
.tabs-wizard-og input[type="checkbox"]:checked {
  border-color: #444;
  background-color: #444;
}

.modal-content:has([id*="contactPicture"]) input[type="checkbox"]:checked::after,
.give-now input[type="checkbox"]:checked::after,
.member-profile .CheckBoxList input[type="checkbox"]:checked::after,
.org-create-account .your-information-zone input[type="checkbox"]:checked::after,
.tabs-wizard-og input[type="checkbox"]:checked::after {
  position: absolute;
  top: -3px;
  left: 2px;
  font-size: 12px;
  color: white;
  content: "\2714";
}

.give-now input[type="checkbox"] {
  top: -4px !important;
}

.modal-content:has([id*="contactPicture"]) input[type="checkbox"] {
  top: -4px;
  right: -2px;
}

.membership-type input[type="radio"],
.tabs-wizard-og input[type="radio"] {
  position: relative;
  top: -2px;
  right: 2px;
  width: 14px;
  height: 14px;
  padding: 0;
  border: 1px solid #e6e6e6;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
  appearance: none;
  -webkit-appearance: none;
  vertical-align: middle;
}

.membership-type input[type="radio"] {
  top: 2px;
  right: 0px;
  flex: none;
  flex-shrink: 0;
}

.membership-type input[type="radio"]:checked,
.tabs-wizard-og input[type="radio"]:checked {
  border-color: #444;

}

.membership-type input[type="radio"]:checked::after,
.tabs-wizard-og input[type="radio"]:checked::after {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #444;
  content: "";
}

.tabs-wizard-og .PanelField:not(:has(.CheckBoxList)) {
  display: flex;
  align-items: center;
}

.tabs-wizard-og .RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsLevel1 {
  border: 0;
}

.tabs-wizard-og .RadMultiPage {
  margin: auto;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
}

.member-profile .PanelEditorEditForm .RadPicker .RadInput,
.member-profile .PanelEditorEditForm .RadComboBox.RadComboBox_MetroTouch .rcbInner,
.tabs-wizard-og .RadPicker .RadInput,
.tabs-wizard-og .RadComboBox.RadComboBox_MetroTouch .rcbInner {
  width: 250px;
  padding: 0;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
  transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.member-profile .PanelEditorEditForm input[type="text"],
.member-profile .PanelEditorEditForm .RadInput .riTextBox,
.tabs-wizard-og .RadInput.RadInput.riSingle .riTextBox,
.tabs-wizard-og .RadInput.RadInput .riTextBox,
.RadInput .riTextBox {
  border: 0;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
}

.member-profile .PanelEditorEditForm .RadPicker .rcCalPopup,
.member-profile .PanelEditorEditForm .RadPicker .rcTimePopup,
.tabs-wizard-og .RadPicker .rcCalPopup,
.tabs-wizard-og .RadPicker .rcTimePopup {
  width: 30px;
  padding: 0;
  transition: background-color 0.2s ease;
}

.member-profile .PanelEditorEditForm .RadPicker .rcCalPopup:hover,
.member-profile .PanelEditorEditForm .RadPicker .rcTimePopup:hover,
.tabs-wizard-og .RadPicker .rcCalPopup:hover,
.tabs-wizard-og .RadPicker .rcTimePopup:hover {
  background-color: #eee;
}

.member-profile .RadInput a:before {
  color: #777;
}

.member-profile .PanelEditorEditForm .RadPicker .rcCalPopup,
.member-profile .PanelEditorEditForm .RadPicker .rcTimePopup,
.membership-type .panel-heading[id$="Common__Head"],
.tabs-wizard-og .panel-heading[id$="Common__Head"] {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.create-account-zone h2.panel-title,
.org-create-account .your-information-zone h2.panel-title,
.membership-type .panel-heading[id$="Common__Head"] .panel-title,
.tabs-wizard-og .panel-heading[id$="Common__Head"] .panel-title,
.additional-subscriptions .panel-heading h2.panel-title,
.create-account .nominate-form .panel .panel-body h2 {
  font-size: 20px;
  line-height: 1;
  text-align: center;
}

/* ================================================================
   Order Summary & Confirmation
   ================================================================ */

.order-confirmation-zone .panel {
  margin-bottom: 60px;
}

.order-confirmation-zone .panel-heading[id$="Confirmation__Head"] .panel-title {
  padding-top: 20px;
  font-size: 20px;
  line-height: 1;
  text-align: center;
}

.order-confirmation-zone .panel-heading[id$="Confirmation__Head"] {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.order-confirmation-zone .panel-body {
  padding-top: 0;
}

.org-create-account .your-information-zone .panel-description,
.membership-type .panel-description,
.tabs-wizard-og .panel-description {
  padding: 10px 0 0;
  font-size: 14px;
  text-align: center;
  color: rgba(0, 0, 0, 0.38);
}

.order-summary-zone {
  max-width: 1080px;
  margin: 30px auto 60px auto;
  padding: 20px 30px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
}

.order-summary-zone .pt-3 input[value*="Update"] {
  display: none;
}

.order-summary-zone .panel-body {
  padding: 0;
}

.order-summary-zone .panel-heading.Distinguish {
  padding: 0;
  border: 0 !important;
}

.order-summary-zone h2.panel-title {
  font-size: 22px;
}

.order-confirmation-zone .CartCharges label,
.order-confirmation-zone .CartCharges .Label,
.order-confirmation-zone .CartCharges .PanelFieldValue,
.order-summary-zone .CartCharges .GrandTotal .PanelField .Label,
.order-summary-zone .CartCharges .PanelFieldValue {
  font-size: 16px;
  text-transform: capitalize;
}

.order-summary-zone input[type="text"],
.order-summary-zone select {
  width: 250px;
  padding: 0.75rem;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
  transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.order-summary-zone .input-group:has(input[value*="Apply"]) {
  display: flex;
  gap: 10px;
}

.order-summary-zone input[value*="Apply"] {
  padding: 7.5px 30px;
  font-size: 18px;
}

.order-summary-zone .SubmitCartOrderButtonWrapper {
  display: flex;
  justify-content: center;
}

.WebPartZone.order-summary-zone {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense;
  gap: 1.5rem;
}

.WebPartZone.order-summary-zone > .iMIS-WebPart:not(:has(*)) {
  display: none;
}

/* Items 1, 2, and 10 → full width  (3 removed from this list) */
.WebPartZone.order-summary-zone > .iMIS-WebPart:nth-child(1),
.WebPartZone.order-summary-zone > .iMIS-WebPart:nth-child(2),
.WebPartZone.order-summary-zone > .iMIS-WebPart:nth-child(10) {
  grid-column: 1 / -1;
}

/* Items 3, 4, 5 → left column  (3 added here) */
.WebPartZone.order-summary-zone > .iMIS-WebPart:nth-child(3),
.WebPartZone.order-summary-zone > .iMIS-WebPart:nth-child(4) {
  grid-column: 1;
}

/* Items 6, 7, 8, 9 → right column */
.WebPartZone.order-summary-zone > .iMIS-WebPart:nth-child(5),
.WebPartZone.order-summary-zone > .iMIS-WebPart:nth-child(6),
.WebPartZone.order-summary-zone > .iMIS-WebPart:nth-child(7),
.WebPartZone.order-summary-zone > .iMIS-WebPart:nth-child(8),
.WebPartZone.order-summary-zone > .iMIS-WebPart:nth-child(9) {
  grid-column: 2;
}

@media (max-width: 768px) {
  .WebPartZone.order-summary-zone {
    grid-template-columns: 1fr;
  }

  .WebPartZone.order-summary-zone > .iMIS-WebPart {
    grid-column: 1 !important;
  }
}

.order-confirmation-zone .panel {
  margin-bottom: 60px;
}

.order-confirmation-zone div[id*=EmailConfirmationDiv] {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 8px;
}

.order-confirmation-zone input[id*=EmailButton] {
  margin: 0;
  padding: 8px 30px;
  font-size: 18px;
}

/* ================================================================
   Member Profile
   ================================================================ */

.member-profile-header {
  max-width: 800px;
  margin: auto;
  text-align: center;
}

.member-profile-zone {
  padding-bottom: 30px;
}

.member-profile-zone .RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsLevel1 {
  border: 0;
}

.member-profile-zone .certification-details .panel-body {
  padding: 0 30px;
  font-size: 16px;
}

.member-profile-zone .addresses .panel-body {
  margin: 5px 30px;
  padding: 0;
  border: 1px solid #e6e6e6;
}

.member-profile-zone .addresses .panel-body .panel-body {
  margin: 0;
  padding: 0 0 15px;
  border: 0;
  font-size: 16px;
}

.member-profile-zone div[id*=Accountpagetabs__Head] {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border: 0 !important;
}

.member-profile-zone div[id*="Accountpagetabs_radTab_Top"].RadTabStrip_MetroTouch.RadTabStrip_MetroTouch,
.member-profile-zone div[id*="OrganizationAccountTabs1_radTab_Top"].RadTabStrip_MetroTouch.RadTabStrip_MetroTouch {
  border-radius: 5px 5px 0 0;
}

.member-profile-zone .RadTabStrip .rtsLevel1 .rtsTxt,
.member-profile-zone .RadTabStripVertical .rtsLevel1 .rtsTxt {
  padding: 0 15px;
}

.member-profile-zone .panel-body:not(.panel-body .panel-body) {
  margin: auto;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
}

.organization-profile .member-profile-zone .panel-body:not(.panel-body .panel-body) {
  padding-bottom: 30px;
}

.member-profile-zone .panel-heading[id*="Head"] {
  margin-top: 15px;
  padding: 15px 30px 0 30px;
  border-top: 1px solid #ddd;
}

.member-profile-zone .member-profile-membership .panel-heading[id*="Head"] {
  margin-top: 0;
}

.member-profile-zone *[id*=Accountpagetabs] .ContentItemContainer:nth-of-type(1) .panel-heading[id*="Head"] {
  margin-top: 0;
  border: 0;
}

.member-profile-zone .panel-heading[id*="Head"] .panel-title,
.member-profile-zone #ste_container_ciAccountpagetabs .panel-title,
.member-profile-zone #ste_container_ciAccountpagetabs .panel-title > a {
  padding: 10px;
  border-radius: 5px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  text-transform: none;
  color: var(--Dark);
  background-color: var(--BgLight);
}

.member-profile-zone #ste_container_ciAccountpagetabs .Label {
  font-size: 14px;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  color: #999;
}

.member-profile-zone .PanelEditorReadOnlyForm .PanelFieldValue span {
  font-size: 16px;
}

.member-profile-zone .PanelEditorReadOnlyForm .PanelFieldValue span:empty::after {
  color: rgba(0, 0, 0, 0.1);
  content: "--";
}

.member-profile-sidebar {
  border-radius: 5px;
  background-color: var(--CalloutBg);
}

.member-profile-sidebar .panel-body {
  padding-bottom: 0;
}

.member-profile-sidebar .forgot-password .panel-body,
.member-profile-sidebar div[id*=RenewalButton__Body].panel-body {
  padding-top: 0;
  padding-bottom: 15px;
}

.member-profile-sidebar div[id*=RenewalButton__Body].panel-body .TextButton {
  margin-bottom: 5px;
}

.member-profile-sidebar .forgot-password span[id*=LabelLogon] {
  width: 100%;
  font-size: 11px;
  font-weight: 500;
  font-style: normal;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 1.92px;
  color: var(--PrimaryFontColor);
}

.member-profile-sidebar .forgot-password span[id*=LabelUserName] {
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-transform: lowercase;
  color: var(--Dark-70);
}

.member-profile-sidebar [id*="ciMiniProfile"] .CalloutPart2 .panel-body {
  border-radius: 5px;
}

.member-profile-sidebar span[id*=fullName] {
  z-index: 1;
}

.member-profile-sidebar button[value*="Edit"] {
  z-index: 10;
}

.member-profile-zone .CalloutPart2 .panel-heading,
.member-profile-zone .CalloutPart2 .panel-body {
  background-color: var(--rd-white);
}

.member-profile-zone .member-profile-events .panel-body,
.member-profile-zone .member-profile-giving .panel-body,
.member-profile-zone .member-profile-membership .panel-body {
  margin: 5px 30px 30px;
  padding: 0;
  font-size: 16px;
}

.member-profile-zone .member-profile-transactions .panel-heading[id*="Head"] {
  margin-top: 0;
  padding: 30px 30px 0 30px;
}

.member-profile-zone .member-profile-transactions .panel-body {
  margin: 5px 30px 30px;
  padding: 0;
  font-size: 16px;
}

.member-profile-zone .member-profile-transactions .panel-heading[id*="Head"]:has(+div a[aria-label="View Statement"]) {
  display: none;
}

.PanelNoPadding:has(div a[aria-label="View Statement"]) {
  margin-top: -20px;
  margin-bottom: -10px;
  padding: 0 !important;
}

.member-profile-zone .member-profile-preferences .panel-heading[id*="Head"] {
  margin-top: 5px;
  padding: 30px 30px 0 30px;
}

.member-profile-zone .member-profile-preferences .panel-body {
  margin: 15px 30px 20px;
  padding: 0;
  font-size: 16px;
}

.member-profile-zone .member-profile-preferences .panel-body .panel-body {
  margin: 0;
}

.member-profile-zone .member-profile-preferences .CommunicationPreferencesSection {
  background-color: var(--rd-white);
}

/* ================================================================
   Organization Profile
   ================================================================ */

.org-create-account-zone .RadMultiPage {
  max-width: 1080px;
  margin: auto;
  padding: 20px 30px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
}

.org-create-account.wide .RadMultiPage {
  max-width: unset;
}

.org-create-account input[type="Submit"],
.org-create-account input[value="Finish"],
.org-create-account input[value="Next"],
.org-create-account input[value="Previous"] {
  width: unset !important;
  padding: 10px 22px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
}

.org-create-account-zone *[id*="DivValidateAddress"] {
  margin-bottom: 20px;
}

.org-create-account-zone *[id*="AddressValidationContent"] {
  padding: 10px;
}

.org-create-account-zone *[id*="AddressValidationContent"] input {
  width: unset !important;
}

.org-create-account-zone *[id*="AddressValidationContent"] .PanelField.Right div:nth-child(2) {
  width: 50%;
}

.org-create-account-zone *[id*="AddressValidationContent"] input[type=button] {
  display: block;
  margin: auto;
  padding: 12px 22px;
}

.org-create-account .membership-type .panel {
  border: 0;
  box-shadow: unset;
}

.org-create-account .your-information-zone input[type=submit],
.org-create-account .membership-type .panel input:not([type="radio"]) {
  width: unset;
}

.org-create-account .membership-type .PanelField {
  display: block;
}

.CommandBar input[value="Save & Close"].TextButton.PrimaryButton,
.member-profile input[value="Save"].TextButton.PrimaryButton,
.org-tab-zone input[value="Save"].TextButton.PrimaryButton,
.create-account input[value="Save"].TextButton.PrimaryButton,
.create-account input[value="Next"].TextButton.PrimaryButton,
.org-create-account input[value="Save"].TextButton.PrimaryButton,
.org-create-account input[value="Next"].TextButton.PrimaryButton,
.membership-type input[value="Save"].TextButton.PrimaryButton,
.membership-type input[value="Next"].TextButton.PrimaryButton,
.your-information input[value="Save"].TextButton.PrimaryButton,
.your-information input[value="Next"].TextButton.PrimaryButton {
  border: 1px !important;
}

.ButtonPanel input[title*=Save],
.CommandBar input[value="Cancel"],
.member-profile input[value="Cancel"],
.org-tab-zone input[value="Cancel"],
.create-account input[value="Cancel"],
.create-account input[value="Previous"],
.org-create-account input[value="Cancel"],
.org-create-account input[value="Previous"],
.membership-type input[value="Cancel"],
.membership-type input[value="Previous"],
.your-information input[value="Cancel"],
.your-information input[value="Previous"] {
  width: unset !important;
  padding: 10px 22px;
  border: 1px solid #e6e6e6 !important;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
}

div[id*=Erasure] a[id*=ButtonEraseContact],
.member-profile a[aria-label*="View Trial Balance"],
.member-profile a[aria-label*="View Statement"],
.member-profile a[aria-label*="View Public Profile"] {
  border: 1px solid #e6e6e6 !important;
  background-color: #fff;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
}

div[id*=Erasure] a[id*=ButtonEraseContact]:hover,
.ButtonPanel input[title*=Save]:hover,
.CommandBar input[value="Cancel"]:hover,
.member-profile input[value="Cancel"]:hover,
.org-tab-zone input[value="Cancel"]:hover,
.member-profile a[aria-label*="View Trial Balance"]:hover,
.member-profile a[aria-label*="View Statement"]:hover,
.member-profile a[aria-label*="View Public Profile"]:hover,
.create-account input[value="Cancel"]:hover,
.create-account input[value="Previous"]:hover,
.org-create-account input[value="Cancel"]:hover,
.org-create-account input[value="Previous"]:hover,
.membership-type input[value="Cancel"]:hover,
.membership-type input[value="Previous"]:hover,
.your-information input[value="Cancel"]:hover,
.your-information input[value="Previous"]:hover {
  border: 1px solid #ccc !important;
}

.organization-profile .shadow-box-zone {
  margin-bottom: 10px;
  border: 0;
  background-color: var(--CalloutBg);
  box-shadow: unset;
}

.organization-profile .mini-profile-banner-large .mini-profile-name-section,
.organization-profile .mini-profile-banner-large .mini-profile-address-section {
  background-color: transparent;
}

.organization-profile .mini-profile-banner-large .mini-profile-name-section .SectionLabel {
  margin-bottom: 10px !important;
}

.organization-profile .member-profile-zone .col-sm-12 {
  padding: 0;
}

.organization-profile .member-profile-zone .panel-body {
  padding: 0 30px;
  font-size: 16px;
}

.organization-profile .member-profile-zone .panel-heading[id*="Head"] {
  margin-top: 15px;
  padding: 15px 30px 0 30px;
  border-top: 1px solid #ddd;
}

.organization-profile .member-profile-zone .panel-heading[id*="Head"]:not(:has(*)) {
  border: 0;
}

.organization-profile .member-profile-zone .org-tab-zone .ContentItemContainer:first-child .panel-heading[id*="Head"] {
  margin-top: 0;
  border: 0;
}

.organization-profile .member-profile-zone .shadow-box > .panel > .panel-body-container {
  margin: 0 30px;
  padding: 30px 0 15px 0;
  border-color: #e6e6e6;
  border-radius: 0;
  box-shadow: unset;
}

.organization-profile .member-profile-zone .shadow-box > .panel > .panel-body-container[id*=SocialProfileListCreator__BodyContainer] {
  padding-bottom: 30px;
}

.organization-profile .shadow-box-zone .add-subscriptions a,
.organization-profile .shadow-box-zone:nth-of-type(2) a {
  padding-top: 12px;
  padding-bottom: 12px;
  border: 1px solid #e6e6e6 !important;
  background-color: #fff;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
}

.organization-profile .shadow-box-zone .add-subscriptions [id*=TitlePanel] {
  display: none;
}

.organization-profile .shadow-box-zone .add-subscriptions * {
  padding: 0;
  border: 0 !important;
  background-color: unset;
}

.organization-profile .shadow-box-zone .add-subscriptions a {
  padding: 0 !important;
  text-decoration: none !important;
}

.organization-profile .shadow-box-zone .add-subscriptions a span {
  min-height: unset !important;
  padding: 12px 22px 12px 22px;
}

.organization-profile .shadow-box-zone .add-subscriptions a span:hover {
  padding-right: 31px;
  padding-left: 13px;
}

/* Make the row a flex grid so all cells match height */
.organization-profile .shadow-box-zone:nth-of-type(2) .button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.organization-profile .shadow-box-zone:nth-of-type(2) .button-group > [class*="col-"] {
  display: flex;
  margin: 10px 0;
  /* gap between rows when wrapping */
}

/* Force every iMIS wrapper to stretch full width + height */
.organization-profile .shadow-box-zone:nth-of-type(2) .button-group [class*="col-"] .ContentItemContainer,
.organization-profile .shadow-box-zone:nth-of-type(2) .button-group .WebPartZone,
.organization-profile .shadow-box-zone:nth-of-type(2) .button-group .iMIS-WebPart,
.organization-profile .shadow-box-zone:nth-of-type(2) .button-group [id^="ste_container_"],
.organization-profile .shadow-box-zone:nth-of-type(2) .button-group .no-panel-padding,
.organization-profile .shadow-box-zone:nth-of-type(2) .button-group .panel,
.organization-profile .shadow-box-zone:nth-of-type(2) .button-group .panel-body-container,
.organization-profile .shadow-box-zone:nth-of-type(2) .button-group .panel-body,
.organization-profile .shadow-box-zone:nth-of-type(2) .button-group .QueryTemplateSet,
.organization-profile .shadow-box-zone:nth-of-type(2) .button-group .QueryTemplateSet > section,
.organization-profile .shadow-box-zone:nth-of-type(2) .button-group .QueryTemplateItem {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
}

.organization-profile .button-group [id="e0215e61c3"] .btn,
.organization-profile .button-group [id="1363b6ae7b"] .btn {
  word-spacing: 100vw;
}

.organization-profile .member-profile {
  display: flex;
  justify-content: center;
  align-items: center;
}

.organization-profile .shadow-box-zone .col-sm-7 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.organization-profile div[id*=Membershiptype__Body] {
  padding-bottom: 0;
}

.organization-profile .org-tab-zone div[id*=PreferencesEditorCommon].panel-body-container,
.organization-profile .org-tab-zone div[id*=PreferencesEditorCommon] div.panel-body {
  padding: 0 !important;
  border: 0 !important;
  box-shadow: unset;
}

#ste_container_ciOrganizationAccountTabs1 .PanelField label,
#ste_container_ciAccountpagetabs .PanelField label {
  font-size: 14px !important;
}

.organization-profile div[id*=SelectContainer] {
  display: flex;
  align-items: center;
}

.organization-profile div[id*=SelectContainer] select {
  border: 1px solid #e6e6e6 !important;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
}

.member-profile-zone .address .panel-body {
  margin: 0px 30px;
  padding: 0;
  border: 1px solid #e6e6e6;
}

.member-profile-zone .address .panel-body .panel-body {
  margin: 0;
  padding: 0 0 10px !important;
  border: 0;
}

div[id*=OrganizationProfile] .panel-body-container {
  padding: 5px 0 !important;
}

div[id*=OrganizationProfile] .panel-body-container .panel-body {
  padding: 0 0px !important;
}

div[id*=Viewprofile] .panel-heading:not(:has(*)) {
  margin: 5px !important;
  padding: 0 !important;
}

div[id*=OrganizationProfile] div:has(> span.Label),
div[id*=OrganizationProfile] div span.Label {
  display: block !important;
  width: 100% !important;
  padding-bottom: 4px;
  font-size: 14px;
  font-weight: normal;
  line-height: 1;
  text-transform: none;
  color: #999;
}

/* The button fills its cell and centers its label */
.button-group .btn.LargeButton .organization-profile .shadow-box-zone:nth-of-type(2) {
  /* set whatever uniform height you want */
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 80px;
  text-align: center;
  white-space: normal;
  /* let long labels wrap instead of overflowing */
}

/* ================================================================
   Edit Forms & Pop-up Panels
   ================================================================ */

.member-profile .RadWindow_MetroTouch .rwTable .rwTitlebarControls em {
  padding-top: 0;
  font-size: 20px;
  text-transform: capitalize;
}

div[id*=ContactEdit] div.PanelTitle,
div[id*=AddressEdit] div.PanelTitle,
div[id*=EditPanel] .panel-title {
  min-height: 0;
  padding-top: 5px;
  border-top: 0;
  border-bottom: unset;
  font-size: 20px;
}

div[id*=LogOnPassword] input[type="password"],
div[id*=EditPanel] select,
div[id*=EditPanel] textarea,
div[id*=EditPanel] input[type="text"],
div[id*=EditPanel] input[type="password"],
div[id*=EditPanel] input[type="datetime"],
div[id*=EditPanel] input[type="datetime-local"],
div[id*=EditPanel] input[type="date"],
div[id*=EditPanel] input[type="month"],
div[id*=EditPanel] input[type="time"],
div[id*=EditPanel] input[type="week"],
div[id*=EditPanel] input[type="number"],
div[id*=EditPanel] input[type="email"],
div[id*=EditPanel] input[type="url"],
div[id*=EditPanel] input[type="search"],
div[id*=EditPanel] input[type="tel"],
div[id*=EditPanel] input[type="color"],
div[id*=EditPanel] .uneditable-input,
div[id*=EditPanel] .input-fake {
  width: 250px;
  padding: 0.75rem;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
  transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

div[id*=ContactEdit] select,
div[id*=ContactEdit] textarea,
div[id*=ContactEdit] input[type="text"],
div[id*=ContactEdit] input[type="password"],
div[id*=ContactEdit] input[type="datetime"],
div[id*=ContactEdit] input[type="datetime-local"],
div[id*=ContactEdit] input[type="date"],
div[id*=ContactEdit] input[type="month"],
div[id*=ContactEdit] input[type="time"],
div[id*=ContactEdit] input[type="week"],
div[id*=ContactEdit] input[type="number"],
div[id*=ContactEdit] input[type="email"],
div[id*=ContactEdit] input[type="url"],
div[id*=ContactEdit] input[type="search"],
div[id*=ContactEdit] input[type="tel"],
div[id*=ContactEdit] input[type="color"],
div[id*=ContactEdit] .uneditable-input,
div[id*=ContactEdit] .input-fake {
  padding: 0.75rem;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
  transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

div[id*=LogOnPassword] label {
  text-transform: capitalize;
}

div[id*=LogOnPassword] .PanelFieldValue [id*=currentLogon] {
  text-transform: lowercase;
}

div[id*=OpenInvoices] colgroup col:first-child {
  width: 30px !important;
}

.member-profile #ste_container_ciOrganizationAccountTabs1 .PanelEditorEditForm .PanelField:not(:has(.CheckBoxList)) label,
.member-profile #ste_container_ciAccountpagetabs .PanelEditorEditForm .PanelField:not(:has(.CheckBoxList)) label,
.member-profile .PanelEditorEditForm .PanelField:not(:has(.CheckBoxList)) label,
.organization-profile .PanelEditorEditForm .PanelField:not(:has(.CheckBoxList)) label {
  display: block !important;
  width: 100% !important;
  padding-bottom: 4px;
  font-size: 14px !important;
  font-weight: normal;
  line-height: 13px;
  text-transform: none;
  color: #999;
}

.member-profile .PanelEditorEditForm select,
.member-profile .PanelEditorEditForm textarea,
.member-profile .PanelEditorEditForm input[type="text"],
.member-profile .PanelEditorEditForm input[type="password"],
.member-profile .PanelEditorEditForm input[type="datetime"],
.member-profile .PanelEditorEditForm input[type="datetime-local"],
.member-profile .PanelEditorEditForm input[type="date"],
.member-profile .PanelEditorEditForm input[type="month"],
.member-profile .PanelEditorEditForm input[type="time"],
.member-profile .PanelEditorEditForm input[type="week"],
.member-profile .PanelEditorEditForm input[type="number"],
.member-profile .PanelEditorEditForm input[type="email"],
.member-profile .PanelEditorEditForm input[type="url"],
.member-profile .PanelEditorEditForm input[type="search"],
.member-profile .PanelEditorEditForm input[type="tel"],
.member-profile .PanelEditorEditForm input[type="color"],
.member-profile .PanelEditorEditForm .uneditable-input,
.member-profile .PanelEditorEditForm .input-fake {
  width: 250px;
  padding: 0.75rem;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  font-size: 16px;
  background-color: #fff;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
  transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.member-profile span[id*=Editor_].CheckBoxList {
  line-height: 21px;
}

.member-profile span[id*=Editor_Individual_Demo___PrimaryDomain].CheckBoxList {
  width: 350px !important;
  height: 220px !important;
  border: 0 !important;
}

.member-profile span[id*=Editor_Individual_Demo___PrimaryWorkSetting].CheckBoxList {
  width: 350px !important;
  height: 270px !important;
  border: 0 !important;
}

.member-profile span[id*=Editor_Individual_Demo___DisabilityTypes].CheckBoxList {
  width: 300px !important;
  height: 250px !important;
  border: 0 !important;
}

.member-profile span[id*=Editor_Individual_Demo___FluentLanguages].CheckBoxList {
  width: 300px !important;
  height: 230px !important;
  border: 0 !important;
}

.member-profile span[id*=Editor_Organization_Demographics___PrimaryDomain].CheckBoxList {
  width: 350px !important;
  height: 200px !important;
  border: 0 !important;
}

.member-profile span[id*=Editor_Organization_Demographics___WorkSetting].CheckBoxList {
  width: 350px !important;
  height: 260px !important;
  border: 0 !important;
}

.member-profile span[id*=Individual_Communication___PreferredCommunicationMethod].CheckBoxList {
  width: 300px !important;
  height: 190px !important;
  border: 0 !important;
}

div[id*=ContactEdit] div.PanelTitle,
div[id*=AddressEdit] div.PanelTitle,
div[id*=EditPanel] .panel-title {
  min-height: 0;
  padding-top: 5px;
  border-top: 0;
  border-bottom: unset;
  font-size: 20px;
}

div[id*=ContactEdit] div[id*=Designation],
div[id*=ContactEdit] .PanelFieldValue:has(div[id*=PrimaryOrganization]),
div[id*=ContactEdit] select,
div[id*=ContactEdit] textarea,
div[id*=ContactEdit] input[type="text"],
div[id*=ContactEdit] input[type="password"],
div[id*=ContactEdit] input[type="datetime"],
div[id*=ContactEdit] input[type="datetime-local"],
div[id*=ContactEdit] input[type="date"],
div[id*=ContactEdit] input[type="month"],
div[id*=ContactEdit] input[type="time"],
div[id*=ContactEdit] input[type="week"],
div[id*=ContactEdit] input[type="number"],
div[id*=ContactEdit] input[type="email"],
div[id*=ContactEdit] input[type="url"],
div[id*=ContactEdit] input[type="search"],
div[id*=ContactEdit] input[type="tel"],
div[id*=ContactEdit] input[type="color"],
div[id*=ContactEdit] .uneditable-input,
div[id*=ContactEdit] .input-fake {
  padding: 0.75rem;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
  transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

div[id*=ContactEdit] div[id*=Designation],
div[id*=ContactEdit] .PanelFieldValue:has(div[id*=PrimaryOrganization]),
div[id*=ContactEdit] .PanelFieldValue:has(div[id*=PrimaryOrganization]) div,
div[id*=ContactEdit] .PanelFieldValue:has(div[id*=PrimaryOrganization]) div input,
div[id*=ContactEdit] input[name*=InformalName],
div[id*=ContactEdit] input[name*=OrganizationDisplayName],
div[id*=ContactEdit] input[name*=OrganizationName],
div[id*=ContactEdit] input[name*=MobilePhone] {
  width: 250px !important;
  padding-right: 0;
}

div[id*=ContactEdit] div[id*=Designation],
div[id*=ContactEdit] .PanelFieldValue:has(div[id*=PrimaryOrganization]) {
  padding-top: 0;
  padding-bottom: 0;
}

div[id*=ContactEdit] div[id*=Designation] {
  padding-left: 0;
}

div[id*=ContactEdit] div[id*=Designation] .chosen-choices,
div[id*=ContactEdit] .PanelFieldValue:has(div[id*=PrimaryOrganization]) div span,
div[id*=ContactEdit] .PanelFieldValue:has(div[id*=PrimaryOrganization]) div input {
  padding: 0;
  border: 0;
}

div[id*=ContactEdit] [id*=Title],
div[id*=ContactEdit] [id*=FullName] {
  width: 100% !important;
}

div[id*=ContactEdit] .chosen-container-multi .chosen-choices li.search-field input[type="text"] {
  width: 250px !important;
  height: unset !important;
  margin: 0;
  padding: .75rem;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 14px;
  line-height: 1;
  box-shadow: unset;
}

div[id*=Erasure] .SectionTitle {
  margin-bottom: 10px;
  font-size: 24px;
  line-height: 1;
  text-transform: capitalize;
}

div[id*=Erasure] p:has(a[id*=ButtonEraseContact]) {
  margin-bottom: 0 !important;
}

div[id*=Erasure] a[id*=ButtonEraseContact] {
  margin-bottom: 0;
}

/* Pop-up bar controls */

.RadWindow .rwControlButtons {
  width: 110px !important;
}

.RadWindow.RadWindow_MetroTouch .rwTable ul.rwControlButtons {
  display: flex;
  justify-content: end;
}

/* Pop-up bar buttons */

.CommandBar {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 15px;
}

.CommandBar input[type="button"] {
  margin-bottom: 0 !important;
}

.CommandBar input:first-child {
  margin-left: 15px !important;
}

.CommandBar input:last-child {
  margin-right: 15px !important;
}

/* ================================================================
   Additional Subscriptions
   ================================================================ */

.additional-subscriptions .iMIS-WebPart:nth-of-type(2) {
  margin-bottom: 90px;
}

.additional-subscriptions .panel-heading {
  border: 0 !important;
}

/* ================================================================
   Profile Picture Upload Modal
   ================================================================ */

.modal-content:has([id*="contactPicture"]) {
  border: none;
  border-radius: 0;
}

.modal-content:has([id*="contactPicture"]) .modal-header {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-radius: 0;
  border-bottom: none;
  text-transform: capitalize;
  background-color: #1e1e1e;
}

.modal-content:has([id*="contactPicture"]) .modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
}

.modal-content:has([id*="contactPicture"]) .modal-header .close {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  float: none;
  margin: 0 0 0 auto;
  padding: 1px 5px !important;
  border: 1px solid transparent;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  opacity: 1;
  text-shadow: none;
  aspect-ratio: 1;
}

.modal-content:has([id*="contactPicture"]) .modal-header .close:hover {
  border: 1px solid #fff;
  border-radius: 50%;
  color: #fff;
  opacity: 1;
}

.modal-content:has([id*="contactPicture"]) p span {
  font-size: 16px;
}

.modal-content:has([id*="contactPicture"]) .ruFileWrap.ruStyled {
  display: inline-flex;
  align-items: stretch;
}

.modal-content:has([id*="contactPicture"]) .ruFakeInput {
  width: unset !important;
  border: 1px solid #e6e6e6 !important;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
}

.modal-content:has([id*="contactPicture"]) .ruFakeInput:focus {
  border-color: #aaa;
  outline: none;
}

.modal-content:has([id*="contactPicture"]) .ruButton.ruBrowse {
  width: unset !important;
  padding: 9px 22px;
  border: 1px solid #e6e6e6 !important;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
}

.modal-content:has([id*="contactPicture"]) li:hover .ruButton.ruBrowse,
.modal-content:has([id*="contactPicture"]) .ruButton.ruBrowse.ruButtonHover,
.modal-content:has([id*="contactPicture"]) .ruButton.ruBrowse:hover {
  border: 1px solid #ccc !important;
  color: var(--BtnBorderColorHover) !important;
  background-color: #fff !important;
}

.modal-content:has([id*="contactPicture"]) .TextButton {
  border-width: 1px !important;
}

/* ================================================================
   Forgot Username / Password
   ================================================================ */
body:has(#ctl01_TemplateBody_contactSignIn1_userRequestHeader),
body:has(#ctl01_TemplateBody_contactSignIn1_passwordRequestHeader) {
  background-color: var(--BgLight) !important;
}

body:has(#ctl01_TemplateBody_contactSignIn1_userRequestHeader) .jc-page-header,
body:has(#ctl01_TemplateBody_contactSignIn1_passwordRequestHeader) .jc-page-header {
  display: none;
}

body:has(#ctl01_TemplateBody_contactSignIn1_userRequestHeader) .panel-body,
body:has(#ctl01_TemplateBody_contactSignIn1_passwordRequestHeader) .panel-body {
  max-width: 550px;
  margin: auto;
  margin: 60px auto;
  padding: 10px 0 20px;
  padding: 30px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
}

body:has(#ctl01_TemplateBody_contactSignIn1_userRequestHeader) .panel-body .SectionLabel,
body:has(#ctl01_TemplateBody_contactSignIn1_passwordRequestHeader) .panel-body .SectionLabel {
  display: block;
  text-align: center !important;
}

body:has(#ctl01_TemplateBody_contactSignIn1_userRequestHeader) .panel-body #ctl01_TemplateBody_contactSignIn1_requestUserNameInstructions,
body:has(#ctl01_TemplateBody_contactSignIn1_passwordRequestHeader) .panel-body #ctl01_TemplateBody_contactSignIn1_requestPasswordInstructions {
  font-size: 16px;
}

body:has(#ctl01_TemplateBody_contactSignIn1_userRequestHeader) .panel-body .PanelField label,
.PanelField .Label,
body:has(#ctl01_TemplateBody_contactSignIn1_passwordRequestHeader) .panel-body .PanelField label,
.PanelField .Label {
  width: fit-content !important;
}

body:has(#ctl01_TemplateBody_contactSignIn1_userRequestHeader) .panel-body .PanelField,
body:has(#ctl01_TemplateBody_contactSignIn1_passwordRequestHeader) .panel-body .PanelField,
body:has(#ctl01_TemplateBody_contactSignIn1_userRequestHeader) .panel-body #ctl01_TemplateBody_contactSignIn1_commandButtons,
body:has(#ctl01_TemplateBody_contactSignIn1_passwordRequestHeader) .panel-body #ctl01_TemplateBody_contactSignIn1_commandButtons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

body:has(#ctl01_TemplateBody_contactSignIn1_passwordRequestHeader) .panel-body #ctl01_TemplateBody_contactSignIn1_passwordRequestHeader + * {
  margin-bottom: 0;
}

body:has(#ctl01_TemplateBody_contactSignIn1_passwordRequestHeader) .panel-body #ctl01_TemplateBody_contactSignIn1_passwordUserName {
  margin-top: 16px;
}

body:has(#ctl01_TemplateBody_contactSignIn1_passwordRequestHeader) .panel-body #ctl01_TemplateBody_contactSignIn1_StaffForgotUserNameLink {
  display: block;
  margin-top: 5px;
}

body:has(#ctl01_TemplateBody_contactSignIn1_userRequestHeader) .panel-body input[type="text"],
body:has(#ctl01_TemplateBody_contactSignIn1_passwordRequestHeader) .panel-body input[type="text"] {
  width: 250px;
  padding: 0.75rem;
  border: 1px solid #e6e6e6;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.03), 0px 3px 6px rgba(0, 0, 0, 0.02);
  transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

/* ── Membership pricing tables (join-now) ─────────────────────────────── */
.jn-pricing-category {
  margin-bottom: 2rem;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 4rem;
  font-weight: 700;
  text-align: center;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--Dark, #1e1e1e);
}

.jn-pricing-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin-bottom: 0;
}

.jn-pricing-row > [class*="col-"] {
  display: flex;
  flex-direction: column;
  float: none;
  margin-bottom: 24px;
  padding-top: 40px;
}

.jn-pricing-card {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 32px 28px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.jn-pricing-card:hover {
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.11);
  transform: translateY(-2px);
}

a.jn-pricing-card,
a.jn-pricing-card:visited,
a.jn-pricing-card:hover {
  text-decoration: none;
  color: inherit;
}

/* Founding card is dark — must override the link color reset above */
a.jn-pricing-card.jn-pricing-card--founding,
a.jn-pricing-card.jn-pricing-card--founding:visited,
a.jn-pricing-card.jn-pricing-card--founding:hover {
  color: #fff;
}

.jn-pricing-card--founding {
  position: relative;
  border-color: transparent;
  color: #fff;
  background: #1e1e1e;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
  overflow: visible;
}

.jn-pricing-card--founding:hover {
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.3);
}

.jn-pricing-card-header {
  margin-bottom: 20px;
}

.jn-pricing-badge {
  position: absolute;
  top: -30px;
  left: 28px;
  display: inline-block;
  margin: 0;
  padding: 3px 10px;
  border-radius: 4px;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #fff;
  background: #1e1e1e;
}

.jn-pricing-tier {
  margin: 0 0 8px;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
}

.jn-pricing-eligibility {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--Dark-70, #666);
}

.jn-pricing-card--founding .jn-pricing-eligibility {
  color: rgba(255, 255, 255, 0.6);
}

.jn-pricing-price {
  margin-top: auto;
  padding: 20px 0 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.jn-pricing-card--founding .jn-pricing-price {
  border-color: rgba(255, 255, 255, 0.12);
}

.jn-price-amount {
  display: block;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  color: inherit;
}

.jn-price-period {
  font-size: 14px;
  color: var(--Dark-70, #666);
}

.jn-pricing-card--founding .jn-price-period {
  color: rgba(255, 255, 255, 0.6);
}

.jn-price-renewal {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: var(--Dark-70, #888);
}

.jn-pricing-card--founding .jn-price-renewal {
  color: rgba(255, 255, 255, 0.5);
}

.jn-pricing-benefits {
  flex: 1;
  margin: 0;
  padding: 0 0 16px;
  list-style: none;
}

.jn-pricing-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  line-height: 1.5;
  color: inherit;
}

.jn-pricing-benefits li::before {
  display: block;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  background-color: currentColor;
  opacity: 0.45;
  content: '';
  flex-shrink: 0;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* CTA button at bottom of each pricing card */
.jn-pricing-cta {
  margin-top: 24px;
  text-align: center;
}

.jn-pricing-cta .TextButton.PrimaryButton {
  display: block;
  box-sizing: border-box;
  width: 100%;
  text-align: center;
}

/* Bold "all previous tier" benefits stand out with slightly larger weight */
.jn-pricing-benefits li strong {
  font-weight: 700;
}

/* Disclaimer small print (below orange accent in pricing section header) */
.jn-header-disclaimer {
  max-width: 800px;
  margin: 20px auto 0;
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
  color: rgba(0, 0, 0, 0.38);
}

/* Inverted Join Now button on dark founding cards */
.jn-pricing-card--founding .jn-pricing-cta .TextButton.PrimaryButton {
  border-color: #fff;
  color: #1e1e1e !important;
  background: #fff;
}

.jn-pricing-card--founding .jn-pricing-cta .TextButton.PrimaryButton:hover {
  border-color: rgba(255, 255, 255, 0.85);
  color: #1e1e1e !important;
  background: rgba(255, 255, 255, 0.85);
}

.jn-pricing-card--founding .jn-pricing-cta .TextButton.PrimaryButton::after {
  color: #1e1e1e;
}

/* 2-column layout on tablet */
@media (min-width: 768px) and (max-width: 991px) {
  .jn-pricing-row > [class*="col-"] {
    width: 50%;
  }
}

/* ================================================================
   Create Account — Individual page
   ================================================================ */

/* Page hero */
.ca-ind-hero {
  padding: 52px 0 36px;
  text-align: center;
  background: var(--Pale, #f4f4f1);
}

.ca-ind-hero__title {
  margin: 0 0 12px;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--Dark, #1e1e1e);
}

.ca-ind-hero__sub {
  margin: 0;
  font-size: 1.15rem;
  color: var(--Dark-70, #666);
}

/* Remove extra padding on the outer panel */
.ca-ind-outer-panel > .panel-heading {
  display: none;
}

.ca-ind-outer-panel > .panel-body-container > .panel-body {
  padding-top: 32px;
  padding-bottom: 32px;
}

/* -----------------------------------------------
   Wizard step tab strip
   ----------------------------------------------- */
.top-level-tabs.tabs-wizard .RadTabStrip,
.org-create-account .tabs-wrapper.tabs-wizard .RadTabStrip,
.top-level-tabs.tabs-wizard .RadTabStrip_MetroTouch,
.org-create-account .tabs-wrapper.tabs-wizard .RadTabStrip_MetroTouch {
  margin: 0 0 .9em !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

.top-level-tabs.tabs-wizard .rtsLevel1,
.org-create-account .tabs-wrapper.tabs-wizard .rtsLevel1 {
  padding: 0;
  border: none;
  background: none;
}

.org-create-account .tabs-wrapper .RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsLevel1 .rtsSelected,
.org-create-account .tabs-wrapper .RadTabStrip_MetroTouch.RadTabStrip_MetroTouch .rtsLevel1 .rtsSelected:hover {
  border-bottom: 0 !important;
}

.top-level-tabs.tabs-wizard .rtsUL,
.org-create-account .tabs-wrapper.tabs-wizard .rtsUL {
  position: relative;
  display: flex !important;
  align-items: center !important;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Connector line at the circle mid-point */
.top-level-tabs.tabs-wizard .rtsUL::before,
.org-create-account .tabs-wrapper.tabs-wizard .rtsUL::before {
  position: absolute;
  top: 16px;
  right: 10%;
  left: 10%;
  z-index: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.14);
  content: '';
}

.org-create-account .tabs-wrapper.tabs-wizard .rtsUL::before {
  right: 20%;
  left: 20%;
}

.top-level-tabs.tabs-wizard .rtsLI,
.org-create-account .tabs-wrapper.tabs-wizard .rtsLI {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex: 1 !important;
  justify-content: center !important;
}

.top-level-tabs.tabs-wizard .rtsLink,
.org-create-account .tabs-wrapper.tabs-wizard .rtsLink {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 10px !important;
  border: none !important;
  text-decoration: none !important;
  background: var(--BgLight) !important;
  cursor: default !important;
  box-shadow: none !important;
}

.top-level-tabs.tabs-wizard .rtsLink:hover,
.org-create-account .tabs-wrapper.tabs-wizard .rtsLink:hover,
.top-level-tabs.tabs-wizard .rtsLink:focus,
.org-create-account .tabs-wrapper.tabs-wizard .rtsLink:focus {
  outline: none;
}

/* Telerik wrapper spans — pass-through */
.top-level-tabs.tabs-wizard .rtsOut,
.org-create-account .tabs-wrapper.tabs-wizard .rtsOut,
.top-level-tabs.tabs-wizard .rtsIn,
.org-create-account .tabs-wrapper.tabs-wizard .rtsIn {
  display: contents !important;
}

/* Label row: number circle + text */
.top-level-tabs.tabs-wizard .rtsTxt,
.org-create-account .tabs-wrapper.tabs-wizard .rtsTxt {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 10px;
  font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  background: var(--BgLight);
}

/* Step number circle */
.top-level-tabs.tabs-wizard .tab-step-number,
.org-create-account .tabs-wrapper.tabs-wizard .tab-step-number {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

/* Current / active step */
.top-level-tabs.tabs-wizard .tab-step-current .tab-step-number,
.org-create-account .tabs-wrapper.tabs-wizard .tab-step-current .tab-step-number {
  color: #fff;
  background: var(--Dark, #1e1e1e);
}

.top-level-tabs.tabs-wizard .tab-step-current .rtsTxt,
.org-create-account .tabs-wrapper.tabs-wizard .tab-step-current .rtsTxt {
  color: var(--Dark, #1e1e1e);
}

/* Future / inactive steps */
.top-level-tabs.tabs-wizard .tab-step-complete .tab-step-number,
.org-create-account .tabs-wrapper.tabs-wizard .tab-step-complete .tab-step-number,
.top-level-tabs.tabs-wizard .tab-step-future .tab-step-number,
.org-create-account .tabs-wrapper.tabs-wizard .tab-step-future .tab-step-number {
  border: 2px solid rgba(0, 0, 0, 0.18);
  color: rgba(0, 0, 0, 0.3);
  background: #fff;
}

.top-level-tabs.tabs-wizard .tab-step-complete .tab-step-number,
.org-create-account .tabs-wrapper.tabs-wizard .tab-step-complete .tab-step-number,
.top-level-tabs.tabs-wizard .tab-step-future .rtsTxt,
.org-create-account .tabs-wrapper.tabs-wizard .tab-step-future .rtsTxt {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.38);
}

/* Completed step (for future use when step is done) */
/*
.top-level-tabs.tabs-wizard .tab-step-complete .tab-step-number,
.org-create-account .tabs-wrapper.tabs-wizard .tab-step-complete .tab-step-number {
  background: var(--Green, #2d7a4f);
  color: #fff;
}
*/
.top-level-tabs.tabs-wizard .tab-step-complete .rtsTxt,
.org-create-account .tabs-wrapper.tabs-wizard .tab-step-complete .rtsTxt {
  color: rgba(0, 0, 0, 0.38);
  /* var(--Dark-70, #555); */
}

/* Donation Thank you Image */
.rd-section .row .col-md-12 img.dty-icon {
  display: block;
  width: 93px !important;
  height: 90px !important;
  margin: 0 auto 48px;
}

/* Spinner for Redirect */
.ca-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  animation: ca-spin 0.7s linear infinite;
  border-top-color: var(--Dark, #1e1e1e);
}

@keyframes ca-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Cart */

/* Hide empty cart nav icon */
li:has(span.cartEmpty) {
  display: none !important;
}

/* Hide empty card icon/image */
img[alt*="Product Icon"] {
  display: none;
}

/* Hide/Moidfy success message */
.AsiSuccess {
  /*
  display: none;
  */
  max-width: var(--max-width);
  margin: 20px auto;
}

/* ============================================================
   FORMSTACK THEME — NSAP
   ============================================================ */

/* ---- Variables (scoped to .rd-form so they cascade into the embed) ---- */
.rd-form {
  --fs-color-primary: var(--rd-black, #1e1e1e);
  --fs-color-required: var(--rd-raspberry, #d91c5c);
  --fs-color-border: #98a2ac;
  --fs-color-placeholder: #98a2ac;
  --fs-color-bg-field: #ffffff;
  --fs-color-bg-readonly: #edeff0;
  --fs-color-label: var(--rd-black, #1e1e1e);
  --fs-color-btn: var(--rd-black, #1e1e1e);
  --fs-color-btn-hover: #626262;
  --fs-font-family: 'Jost', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --fs-font-size-base: 14px;
  --fs-font-size-label: 16px;
  --fs-font-size-small: 12px;
  --fs-input-height: 42px;
  --fs-input-padding: 6px 16px 3px 14px;
  --fs-border-radius-btn: 5px;
}

/* ============================================================
   BASE FORM
   ============================================================ */

.fsForm {
  font-family: var(--fs-font-family);
  background-color: transparent !important;
}

.fsform-container {
  margin-top: 0;
}

.fsForm,
.fsform-container > div > div {
  margin-top: 0 !important;
  padding: 0 !important;
}

.fsform-container,
.fsform-container > div,
.fsform-container > div > div {
  overflow: visible;
}

.fsPage {
  min-width: unset !important;
}

.rd-form fieldset {
  margin: 0;
}

/* ============================================================
   LABELS
   ============================================================ */

.rd-form label,
.rd-form .label,
.rd-form [class*="StyledLabel"],
.rd-form [class*="fsLabel"],
.rd-form .fsRequiredLabel {
  margin-top: 5px !important;
  color: var(--fs-color-label) !important;
}

/* Catch plain child spans inside styled-component label wrappers */
.rd-form [class*="StyledLabel"] span,
.rd-form [class*="fsLabel"] span,
.rd-form label span {
  color: var(--fs-color-label) !important;
}

.fsRequiredLabel {
  line-height: 1.3 !important;
  color: var(--fs-color-label) !important;
}

.rd-form form p.header {
  margin: 0;
  font-size: 1rem;
}

.fsSection:has(p.header) {
  margin-top: 0;
  margin-bottom: 0;
}

.fsSection:nth-of-type(1):has(p.header) {
  margin-top: 20px;
}

/* ============================================================
   FIELDS — inputs, selects, textarea
   ============================================================ */

.rd-form form input[type="text"],
.rd-form form input[type="emailaddress"],
.rd-form form input[type="email"],
.rd-form form input[type="tel"] {
  height: var(--fs-input-height);
  padding: var(--fs-input-padding);
  border-color: var(--fs-color-border) !important;
  font-size: var(--fs-font-size-base);
  color: var(--fs-color-primary) !important;
  background-color: var(--fs-color-bg-field);
}

.rd-form form input[type="text"]::placeholder,
.rd-form form input[type="emailaddress"]::placeholder,
.rd-form form input[type="email"]::placeholder,
.rd-form form input[type="tel"]::placeholder {
  color: var(--fs-color-placeholder);
}

.rd-form form textarea {
  padding: 14px !important;
  border-color: var(--fs-color-border) !important;
  font-size: var(--fs-font-size-base) !important;
  line-height: 1.35 !important;
  background-color: var(--fs-color-bg-field) !important;
}

.rd-form form textarea::placeholder {
  color: var(--fs-color-placeholder);
}

.rd-form select {
  height: var(--fs-input-height) !important;
  padding: var(--fs-input-padding) !important;
  border-color: var(--fs-color-border) !important;
  font-size: var(--fs-font-size-base) !important;
  line-height: 16px !important;
  color: var(--fs-color-primary) !important;
  background-color: var(--fs-color-bg-field) !important;
}

/* Placeholder option (no value selected yet) */
.rd-form select:has(> option[value=""]:checked) {
  color: var(--fs-color-placeholder) !important;
}

.rd-form form input[type="checkbox"]:before {
  width: 15px !important;
  height: 15px !important;
  border-color: var(--fs-color-border) !important;
  border-radius: 2px;
}

.rd-form input[type="radio"] + span {
  font-size: var(--fs-font-size-base);
}

.fsFieldCell:last-child {
  margin-bottom: 0;
}

.fsFieldHighlight {
  background-color: var(--fs-color-bg-field) !important;
}

.fsFieldTransparent {
  background-color: transparent !important;
}

.fsFieldReadOnly {
  height: 35px;
  border-color: var(--fs-color-primary);
  font-size: 13px;
  font-weight: 400;
}

.fsHiddenField {
  display: none;
}

.fsSubField {
  min-width: unset !important;
}

/* ============================================================
   NAME FIELD
   ============================================================ */

.fsNameFirst,
.fsNameLast {
  display: flex;
  flex-direction: column;
}

.fsNameFirst label:after,
.fsNameLast label:after {
  color: var(--fs-color-required);
  content: '*';
}

.fsNameFirst label,
.fsNameLast label {
  order: 1;
  margin-bottom: 5px;
  font-size: var(--fs-font-size-label);
  line-height: 1.3;
}

.fsNameFirst input,
.fsNameLast input {
  order: 2;
}

.fsSubFieldGroup .fsSubField:not(:last-child) {
  margin-right: 10px;
}

/* ============================================================
   OPTIONS (checkboxes, radio buttons)
   ============================================================ */

.fsOptionLabel {
  align-items: start;
  font-size: var(--fs-font-size-small);
}

.fsOptionLabel input {
  margin-top: 3px;
  margin-right: 15px;
}

/* ============================================================
   SUBMIT BUTTON & FOOTER
   ============================================================ */

.fsSubmit {
  margin-top: 0 !important;
  color: var(--fs-color-label);
}

/* Inner navigation container — override Formstack's row layout */
.fsSubmit [class*="StyledFormNavigations"] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px;
}

.fsSubmit .fsSubmitButton {
  display: block !important;
  margin: 0 !important;
  padding: 12px 22px !important;
  border: 2px solid var(--fs-color-btn);
  border-radius: var(--fs-border-radius-btn);
  font-family: var(--fs-font-family) !important;
  font-size: 20px !important;
  font-weight: 500;
  line-height: 1.6;
  text-transform: none !important;
  color: #ffffff;
  background-color: var(--fs-color-btn);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.fsSubmit .fsSubmitButton:hover {
  border-color: var(--fs-color-btn-hover);
  text-decoration: none;
  background-color: var(--fs-color-btn-hover);
}

.required-fields {
  margin-top: 15px;
  font-size: var(--fs-font-size-base);
}

/* ============================================================
   ERROR STATES
   ============================================================ */

[class*="StyledErrorBannerText"] {
  font-size: var(--fs-font-size-small);
}

[class*="StyledErrorBannerText"] div:nth-of-type(2) {
  padding: 3px 0 0 0;
}

[class^="StyledErrorBanner"]:has(+ .fsPage) {
  display: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
  .fsform-container {
    margin-block-start: 0 !important;
  }

  .fsNameFirst,
  .fsNameLast {
    width: 100% !important;
  }

  .fsSubmitButton {
    font-size: 16px;
    line-height: 1.1;
    text-wrap: wrap;
  }

  .fsNameLast label {
    margin-top: 20px !important;
  }

  .fsSubFieldGroup .fsSubField:not(:last-child) {
    margin-right: 0;
  }
}

@media (max-width: 40em) {

  .fsLabel,
  .fsLabelVertical,
  .fsSubFieldGroup,
  .rd-form label,
  .rd-form form input[type="text"],
  .rd-form form input[type="emailaddress"],
  .rd-form form input[type="email"],
  .rd-form form input[type="tel"] {
    width: 100% !important;
  }

  .fsSubmit {
    margin-top: 0 !important;
  }
}