.elementor-kit-7{--e-global-color-primary:#1A0825;--e-global-color-secondary:#54595F;--e-global-color-text:#1A0825;--e-global-color-accent:#55005F;--e-global-color-2f966b3:#F3F3F3;--e-global-color-d63238a:#FFFFFF;--e-global-color-8ed6fce:#61B5B8;--e-global-color-1ecc3c5:#FFFFFF66;--e-global-color-9ef0c70:#55005F;--e-global-color-470a6ea:#00000126;--e-global-typography-primary-font-family:"Metropolis";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Metropolis";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Metropolis";--e-global-typography-text-font-weight:400;--e-global-typography-text-letter-spacing:0px;--e-global-typography-accent-font-family:"Metropolis";--e-global-typography-accent-font-weight:500;background-color:#F3F3F3;font-family:"Metropolis", Sans-serif;letter-spacing:0px;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{font-family:"Metropolis", Sans-serif;}.elementor-kit-7 h1{font-family:"Metropolis", Sans-serif;line-height:1.1em;letter-spacing:-0.02em;}.elementor-kit-7 h2{font-family:"Metropolis", Sans-serif;line-height:1.1em;letter-spacing:-0.02em;}.elementor-kit-7 h3{font-family:"Metropolis", Sans-serif;line-height:1.25em;letter-spacing:-0.02em;}.elementor-kit-7 h4{font-family:"Metropolis", Sans-serif;font-size:20px;line-height:1.25em;letter-spacing:-0.02em;}.elementor-kit-7 h5{font-family:"Metropolis", Sans-serif;line-height:1.35em;letter-spacing:-0.02em;}.elementor-kit-7 h6{font-family:"Metropolis", Sans-serif;line-height:1.35em;letter-spacing:-0.02em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --purple:#61006C; --white:#FFFFFF; --primary_font:Metropolis; --border-shadow:#61006c50; --teal:#61B5B8; --white-80:#FFFFFFCC; --white-40:#FFFFFF66; --white-60:#FFFFFF99; --grey-border-color:#12032233; --text-color:#000001; --bg-grey:#F3F3F3; --dark_purple:#61016C; --box-bg-grey:#F0ECF1; --light-black:#1A0825; --teal-10:#61B5B81A; --teal-25:#61B5B840; --white-15:#FFFFFF26; --white-25:#FFFFFF40; --DUP_primary_font:Metropolis; --DUP_white:#FFFFFF; --DUP_purple:#61006C; --DUP_border-shadow:#61006c50; --DUP_text-color:#000001; --DUP_dark_purple:#61016C; --DUP_bg-grey:#F3F3F3; --DUP_primary_font1:Metropolis; --DUP_white1:#FFFFFF; --DUP_purple1:#61006C; --DUP_border-shadow1:#61006c50; --DUP_text-color1:#000001; --DUP_dark_purple1:#61016C; --DUP_bg-grey1:#F3F3F3; --DUP_bg-grey2:#F3F3F3; --DUP_dark_purple2:#61016C; --DUP_primary_font2:Metropolis; --DUP_white2:#FFFFFF; --DUP_teal:#61B5B8; --DUP_teal-25:#61B5B840; --DUP_text-color2:#000001; --DUP_bg-grey3:#F3F3F3; --DUP_dark_purple3:#61016C; --DUP_primary_font3:Metropolis; --DUP_white3:#FFFFFF; --DUP_teal1:#61B5B8; --DUP_teal-251:#61B5B840; --DUP_text-color3:#000001; --DUP_bg-grey4:#F3F3F3; --DUP_dark_purple4:#61016C; --DUP_primary_font4:Metropolis; --DUP_white4:#FFFFFF; --DUP_teal2:#61B5B8; --DUP_teal-252:#61B5B840; --DUP_text-color4:#000001; --DUP_white5:#FFFFFF; --DUP_bg-grey5:#F3F3F3; --DUP_dark_purple5:#61016C; --DUP_primary_font5:Metropolis; --DUP_teal3:#61B5B8; --DUP_teal-253:#61B5B840; --DUP_text-color5:#000001; --DUP_white6:#FFFFFF; --DUP_bg-grey6:#F3F3F3; --DUP_dark_purple6:#61016C; --DUP_primary_font6:Metropolis; --DUP_teal4:#61B5B8; --DUP_teal-254:#61B5B840; --DUP_text-color6:#000001; --DUP_bg-grey7:#F3F3F3; --DUP_dark_purple7:#61016C; --DUP_primary_font7:Metropolis; --DUP_white7:#FFFFFF; --DUP_teal5:#61B5B8; --DUP_teal-255:#61B5B840; --DUP_text-color7:#000001; --DUP_dark_purple8:#61016C; --DUP_bg-grey8:#F3F3F3; --DUP_dark_purple9:#61016C; --DUP_primary_font8:Metropolis; --DUP_white8:#FFFFFF; --DUP_teal6:#61B5B8; --DUP_teal-256:#61B5B840; --DUP_text-color8:#000001; --DUP_white9:#FFFFFF; --DUP_bg-grey9:#F3F3F3; --DUP_dark_purple10:#61016C; --DUP_primary_font9:Metropolis; --DUP_teal7:#61B5B8; --DUP_teal-257:#61B5B840; --DUP_text-color9:#000001; --DUP_white10:#FFFFFF; --DUP_bg-grey10:#F3F3F3; --DUP_dark_purple11:#61016C; --DUP_primary_font10:Metropolis; --DUP_teal8:#61B5B8; --DUP_teal-258:#61B5B840; --DUP_text-color10:#000001; --DUP_white11:#FFFFFF; --DUP_bg-grey11:#F3F3F3; --DUP_dark_purple12:#61016C; --DUP_primary_font11:Metropolis; --DUP_teal9:#61B5B8; --DUP_teal-259:#61B5B840; --DUP_text-color11:#000001; --DUP_bg-grey12:#F3F3F3; --DUP_dark_purple13:#61016C; --DUP_primary_font12:Metropolis; --DUP_white12:#FFFFFF; --DUP_teal10:#61B5B8; --DUP_teal-2510:#61B5B840; --DUP_text-color12:#000001; --DUP_white13:#FFFFFF; --DUP_bg-grey13:#F3F3F3; --DUP_dark_purple14:#61016C; --DUP_primary_font13:Metropolis; --DUP_teal11:#61B5B8; --DUP_teal-2511:#61B5B840; --DUP_text-color13:#000001; --DUP_bg-grey14:#F3F3F3; --DUP_dark_purple15:#61016C; --DUP_primary_font14:Metropolis; --DUP_white14:#FFFFFF; --DUP_teal12:#61B5B8; --DUP_teal-2512:#61B5B840; --DUP_text-color14:#000001; --DUP_bg-grey15:#F3F3F3; --DUP_dark_purple16:#61016C; --DUP_primary_font15:Metropolis; --DUP_white15:#FFFFFF; --DUP_teal13:#61B5B8; --DUP_teal-2513:#61B5B840; --DUP_text-color15:#000001; --DUP_bg-grey16:#F3F3F3; --DUP_dark_purple17:#61016C; --DUP_primary_font16:Metropolis; --DUP_white16:#FFFFFF; --DUP_teal14:#61B5B8; --DUP_teal-2514:#61B5B840; --DUP_text-color16:#000001; --DUP_dark_purple18:#61016C; --DUP_white17:#FFFFFF; --DUP_bg-grey17:#F3F3F3; --DUP_dark_purple19:#61016C; --DUP_primary_font17:Metropolis; --DUP_teal15:#61B5B8; --DUP_teal-2515:#61B5B840; --DUP_text-color17:#000001; --DUP_bg-grey18:#F3F3F3; --DUP_dark_purple20:#61016C; --DUP_primary_font18:Metropolis; --DUP_white18:#FFFFFF; --DUP_teal16:#61B5B8; --DUP_teal-2516:#61B5B840; --DUP_text-color18:#000001; --DUP_primary_font19:Metropolis; --DUP_white19:#FFFFFF; --DUP_purple2:#61006C; --DUP_border-shadow2:#61006c50; --DUP_text-color19:#000001; --DUP_dark_purple21:#61016C; --DUP_bg-grey19:#F3F3F3; --DUP_white20:#FFFFFF; --DUP_bg-grey20:#F3F3F3; --DUP_dark_purple22:#61016C; --DUP_primary_font20:Metropolis; --DUP_teal17:#61B5B8; --DUP_teal-2517:#61B5B840; --DUP_text-color20:#000001; --DUP_dark_purple23:#61016C; --DUP_bg-grey21:#F3F3F3; --DUP_dark_purple24:#61016C; --DUP_primary_font21:Metropolis; --DUP_white21:#FFFFFF; --DUP_teal18:#61B5B8; --DUP_teal-2518:#61B5B840; --DUP_text-color21:#000001; --DUP_white22:#FFFFFF; --DUP_bg-grey22:#F3F3F3; --DUP_dark_purple25:#61016C; --DUP_primary_font22:Metropolis; --DUP_teal19:#61B5B8; --DUP_teal-2519:#61B5B840; --DUP_text-color22:#000001; --DUP_dark_purple26:#61016C; --DUP_teal20:#61B5B8; --DUP_teal-2520:#61B5B840; --DUP_teal-10:#61B5B81A; --DUP_bg-grey23:#F3F3F3; --DUP_dark_purple27:#61016C; --DUP_white23:#FFFFFF; --DUP_bg-grey24:#F3F3F3; --DUP_dark_purple28:#61016C; --DUP_primary_font23:Metropolis; --DUP_teal21:#61B5B8; --DUP_teal-2521:#61B5B840; --DUP_text-color23:#000001; --DUP_white24:#FFFFFF; --DUP_bg-grey25:#F3F3F3; --DUP_dark_purple29:#61016C; --DUP_primary_font24:Metropolis; --DUP_teal22:#61B5B8; --DUP_teal-2522:#61B5B840; --DUP_text-color24:#000001; --DUP_white25:#FFFFFF; --DUP_bg-grey26:#F3F3F3; --DUP_dark_purple30:#61016C; --DUP_primary_font25:Metropolis; --DUP_teal23:#61B5B8; --DUP_teal-2523:#61B5B840; --DUP_text-color25:#000001; --DUP_dark_purple31:#61016C; --DUP_primary_font26:Metropolis; --DUP_white26:#FFFFFF; --DUP_purple3:#61006C; --DUP_border-shadow3:#61006c50; --DUP_white27:#FFFFFF; --DUP_bg-grey27:#F3F3F3; --DUP_dark_purple32:#61016C; --DUP_primary_font27:Metropolis; --DUP_teal24:#61B5B8; --DUP_teal-2524:#61B5B840; --DUP_text-color26:#000001; --DUP_white28:#FFFFFF; --DUP_bg-grey28:#F3F3F3; --DUP_dark_purple33:#61016C; --DUP_primary_font28:Metropolis; --DUP_teal25:#61B5B8; --DUP_teal-2525:#61B5B840; --DUP_text-color27:#000001; --DUP_white29:#FFFFFF; --DUP_primary_font29:Metropolis; --DUP_purple4:#61006C; --DUP_border-shadow4:#61006c50; --DUP_text-color28:#000001; --DUP_dark_purple34:#61016C; --DUP_white30:#FFFFFF; --DUP_bg-grey29:#F3F3F3; --DUP_dark_purple35:#61016C; --DUP_primary_font30:Metropolis; --DUP_teal26:#61B5B8; --DUP_teal-2526:#61B5B840; --DUP_text-color29:#000001; --DUP_dark_purple36:#61016C; --DUP_primary_font31:Metropolis; --DUP_white31:#FFFFFF; --DUP_purple5:#61006C; --DUP_border-shadow5:#61006c50; --DUP_text-color30:#000001; --DUP_dark_purple37:#61016C; --DUP_bg-grey30:#F3F3F3; --DUP_text-color31:#000001; --DUP_dark_purple38:#61016C; }
/* Start custom CSS *//* --- Metropolis brand font (self-hosted in uploads/fonts/metropolis) --- */
@font-face { font-family: 'Metropolis'; font-style: normal; font-weight: 400; font-display: swap; src: url('/wp-content/uploads/fonts/metropolis/metropolis-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Metropolis'; font-style: normal; font-weight: 500; font-display: swap; src: url('/wp-content/uploads/fonts/metropolis/metropolis-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Metropolis'; font-style: normal; font-weight: 600; font-display: swap; src: url('/wp-content/uploads/fonts/metropolis/metropolis-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Metropolis'; font-style: normal; font-weight: 700; font-display: swap; src: url('/wp-content/uploads/fonts/metropolis/metropolis-latin-700-normal.woff2') format('woff2'); }

/* --- Button rollovers --- */
.elementor { --light_purple: #772481; --dark_teal: #3E9396; }

.elementor .btn-transparent,
.elementor .btn-purple {
  transition: background-color .3s cubic-bezier(.4,0,.2,1),
              border-color .3s cubic-bezier(.4,0,.2,1),
              color .3s cubic-bezier(.4,0,.2,1);
}

/* transparent pill: fills deep purple, text goes white */
.elementor .btn-transparent:hover {
  background-color: var(--dark_purple);
  color: var(--white);
}

/* Arrow circle: geometry shared, colour set per button variant below */
.elementor .btn-arrow { gap: 12px; }
.elementor .btn-arrow::after {
  content: "";
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px;
  transition: background-color .3s cubic-bezier(.4,0,.2,1),
              transform .3s cubic-bezier(.4,0,.2,1);
}
.elementor .btn-arrow:hover::after { transform: translateX(4px); }

/* purple + arrow: light purple circle, the two purples swap on hover */
.elementor .btn-purple.btn-arrow::after { background-color: var(--light_purple); }
.elementor .btn-purple:hover { background-color: var(--light_purple); }
.elementor .btn-purple.btn-arrow:hover::after { background-color: var(--purple); }

/* teal + arrow: dark teal circle, the two teals swap on hover */
.elementor .btn-teal {
  transition: background-color .3s cubic-bezier(.4,0,.2,1),
              border-color .3s cubic-bezier(.4,0,.2,1),
              color .3s cubic-bezier(.4,0,.2,1);
}
.elementor .btn-teal.btn-arrow::after { background-color: var(--dark_teal); }
.elementor .btn-teal:hover { background-color: var(--dark_teal); }
.elementor .btn-teal.btn-arrow:hover::after { background-color: var(--teal); }

@media (prefers-reduced-motion: reduce) {
  .elementor .btn-transparent,
  .elementor .btn-purple,
  .elementor .btn-arrow::after { transition: none; }
}

/* --- Hero image mask (proportional, no distortion) --- */
.elementor .hero-media {
  aspect-ratio: 759 / 698;
  height: auto;
  /* inherits the cap set on .module-hero so the shape fits the height set */
  max-height: inherit;
  -webkit-mask-image: url('/wp-content/uploads/2026/07/hero-image-mask.svg');
  mask-image: url('/wp-content/uploads/2026/07/hero-image-mask.svg');
  /* contain narrows the shape to fit vertically instead of stretching it wide */
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center right;
  mask-position: center right;
}

/* --- Responsive hero & fluid headings --- */
/* Anchored to the designed 76px at 1920 and shrinking steadily below it, so the
   headline stays off a fourth line through the 1280-1460 band. Keyed to the module,
   so every hero on the site scales, not just the homepage. */
body .elementor .module-hero .elementor-widget-heading .elementor-heading-title,
body .elementor .module-hero .e-heading-base {
  font-size: clamp(34px, 3.96vw, 48px);
}
body .elementor-26623 .elementor-element.elementor-element-5921188 .elementor-heading-title,
body .elementor-26623 .elementor-element.elementor-element-cb97884 .elementor-heading-title,
body .elementor-26623 .elementor-element.elementor-element-710e877 .elementor-heading-title,
body .elementor-26623 .elementor-element.elementor-element-24d2edf .elementor-heading-title {
  font-size: clamp(28px, 3.3vw, 42px);
}

@media (max-width: 1024px) {
  /* The min/max height set on .module-hero is for the side-by-side desktop layout.
     Stacked, the hero needs text AND image, so the cap has to come off or the image
     overflows the section and the next module lands on top of it. */
  body .elementor .module-hero,
  body .elementor .module-hero > * {
    min-height: 0;
    max-height: none;
    height: auto;
  }
  body .elementor .hero-row { flex-direction: column; gap: 30px; }
  body .elementor .hero-copy { width: 100%; gap: 25px; }
  /* Stacked, the image used to sit centred below the copy and added ~440px of height,
     so the hero ran to 775px before anything else appeared. It is lifted out of flow
     instead: anchored bottom-right, faded back, and sitting behind the copy. The band
     still grows with the copy, and overflow clips the image to the band edge. */
  /* Only heroes that actually carry an image need this: the 460px band and the clipping
     exist to house the absolutely positioned photo. A text-only hero would just gain dead
     space, which matters now that the text-only variants carry .module-hero too. */
  body .elementor .module-hero:has(.hero-media) {
    position: relative;
    overflow: hidden;
    min-height: 460px;
  }

  /* The row stretches to the full band height, so it is the row that centres the copy —
     centring the band only moves the row, which already fills it. */
  body .elementor .module-hero .hero-row {
    justify-content: center;
  }
  body .elementor .module-hero .hero-copy {
    position: relative;
    z-index: 2;
  }
  body .elementor .module-hero .hero-media {
    position: absolute;
    /* the box fills the band and mask-size: contain centres the shape inside it —
       anchoring the box to the bottom left the blob sitting low with a gap above */
    inset-block: 0;
    inset-inline-end: 0;
    inset-inline-start: auto;
    width: 68%;
    max-width: 460px;
    max-height: none;
    aspect-ratio: auto;
    height: auto;
    margin: 0;
    opacity: .4;
    z-index: 1;
    pointer-events: none;
  }
}

/* --- Reusable gradient card & blob image classes --- */
/* Editor usage: section = `gradient-card` (image left) or `gradient-card-right` + a bg-*-gradient class; image div = `img-blob` / `img-blob-right`. Corner backdrop = the section's own background colour. */
body .elementor .gradient-card,
body .elementor .gradient-card-right {
  display: flex;
  position: relative;
  background-color: var(--bg-grey);
}
body .elementor .gradient-card::before,
body .elementor .gradient-card-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--card-gradient);
}
body .elementor .gradient-card > *,
body .elementor .gradient-card-right > * { position: relative; z-index: 1; }

body .elementor .bg-purple-gradient {
  --card-gradient:
    radial-gradient(ellipse 50% 60% at 100% 0%, #5A126A 0%, rgba(90, 18, 106, 0) 70%),
    radial-gradient(ellipse 55% 70% at 35% 50%, #6E9AAE 0%, rgba(110, 154, 174, 0) 65%),
    linear-gradient(100deg, #6C89A6 0%, #97A5C2 45%, #7B3F8E 100%);
}
body .elementor .bg-teal-gradient {
  --card-gradient: linear-gradient(100deg, #61B5B8 0%, #3E9396 100%);
}
body .elementor .bg-white {
  --card-gradient: linear-gradient(#FFFFFF, #FFFFFF);
}
/* light backgrounds set brand text colour so faq-accordion currentColor resolves */
body .elementor .bg-white { color: var(--text-color); }

/* gradient backgrounds default to white text (elements with explicit colours keep them) */
body .elementor .bg-purple-gradient,
body .elementor .bg-teal-gradient {
  color: var(--white);
}
/* uppercase labels go white on gradients too */
body .elementor .bg-purple-gradient .purple-heading,
body .elementor .bg-teal-gradient .purple-heading {
  color: var(--white);
}
body .elementor .bg-purple-gradient:not(.gradient-card):not(.gradient-card-right),
body .elementor .bg-teal-gradient:not(.gradient-card):not(.gradient-card-right),
body .elementor .bg-white:not(.gradient-card):not(.gradient-card-right) {
  background-image: var(--card-gradient);
}

/* wide screens: true blob, aspect locked so it can never distort */
@media (min-width: 1025px) {
  /* frontend: absolute blob flush with card, cropped off-canvas */
  body:not(.elementor-editor-active) .elementor .img-blob,
  body:not(.elementor-editor-active) .elementor .img-blob-right {
    position: absolute;
    inset-block: 0;
    width: 47%;
    height: auto;
    margin: 0;
    -webkit-mask-size: auto 118%;
    mask-size: auto 118%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  body:not(.elementor-editor-active) .elementor .img-blob {
    inset-inline-start: 0;
    -webkit-mask-image: url('/wp-content/uploads/2026/07/hero-image-mask.svg');
    mask-image: url('/wp-content/uploads/2026/07/hero-image-mask.svg');
    -webkit-mask-position: right center;
    mask-position: right center;
  }
  body:not(.elementor-editor-active) .elementor .img-blob-right {
    inset-inline-end: 0;
    -webkit-mask-image: url('/wp-content/uploads/2026/07/hero-image-mask-flipped.svg');
    mask-image: url('/wp-content/uploads/2026/07/hero-image-mask-flipped.svg');
    -webkit-mask-position: left center;
    mask-position: left center;
  }
  body:not(.elementor-editor-active) .elementor .gradient-card > *:not(.img-blob):not(.img-blob-right) {
    min-width: 0;
    margin-inline-start: 49%;
    margin-inline-end: max(calc((100% - 1300px) / 2), 24px);
    max-width: none;
  }
  body:not(.elementor-editor-active) .elementor .gradient-card-right > *:not(.img-blob):not(.img-blob-right) {
    min-width: 0;
    margin-inline-end: 49%;
    margin-inline-start: max(calc((100% - 1300px) / 2), 24px);
    max-width: none;
  }
}

/* tablet & mobile: stack with a clean rounded image - nothing to distort */
@media (max-width: 1024px) {
  body:not(.elementor-editor-active) .elementor .gradient-card,
  body:not(.elementor-editor-active) .elementor .gradient-card-right { flex-direction: column; }
  body:not(.elementor-editor-active) .elementor .img-blob,
  body:not(.elementor-editor-active) .elementor .img-blob-right {
    order: 0;
    width: calc(100% - 48px);
    aspect-ratio: 16 / 9;
    margin: 24px 24px 0;
    border-radius: 24px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  body:not(.elementor-editor-active) .elementor .gradient-card > *:not(.img-blob):not(.img-blob-right),
  body:not(.elementor-editor-active) .elementor .gradient-card-right > *:not(.img-blob):not(.img-blob-right) {
    width: calc(100% - 48px);
    margin-inline: 24px;
    margin-block: 32px;
    padding-block: 0;
  }
}

/* editor (any width): simple editable layout */
/* editor: simple editable two-column layout, no absolute positioning */
body.elementor-editor-active .elementor .img-blob,
body.elementor-editor-active .elementor .img-blob-right {
  flex: 0 0 auto;
  align-self: stretch;
  width: 40%;
  min-height: 400px;
  border-radius: 24px;
}
body.elementor-editor-active .elementor .gradient-card > *:not(.img-blob):not(.img-blob-right),
body.elementor-editor-active .elementor .gradient-card-right > *:not(.img-blob):not(.img-blob-right) {
  flex: 1;
  min-width: 0;
}

/* --- Footer link rollover (centre-out underline) --- */
body .elementor-26656 a.elementor-item,
body .elementor-26656 a.e-heading-link-base {
  position: relative;
  display: inline-block;
}
body .elementor-26656 a.elementor-item::after,
body .elementor-26656 a.e-heading-link-base::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: currentColor !important;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
body .elementor-26656 a.elementor-item:hover::after,
body .elementor-26656 a.e-heading-link-base:hover::after {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  body .elementor-26656 a.elementor-item::after,
  body .elementor-26656 a.e-heading-link-base::after { transition: none; }
}

/* --- Tablet overflow guard --- */
@media (max-width: 1024px) {
  html, body { overflow-x: clip; }
  body .elementor .box-container-rowise { flex-wrap: wrap; }
}

/* --- FAQ accordion (background-driven colours) --- */
/* Usage: add CSS class `faq-accordion` to a Nested Accordion widget. Numbering is automatic. Colours invert based on the parent bg-* class: light bg = dark questions + gradient open card; gradient bg = white questions + light open card. */
body .elementor .faq-accordion {
  counter-reset: faq;
  --n-accordion-title-normal-color: currentColor;
  --n-accordion-title-hover-color: currentColor;
  --n-accordion-title-active-color: currentColor;
  --n-accordion-icon-normal-color: currentColor;
  --n-accordion-icon-hover-color: currentColor;
  --n-accordion-icon-active-color: currentColor;
}
body .elementor .faq-accordion .e-n-accordion-item {
  counter-increment: faq;
  border-block-end: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
/* the divider directly above an open item would otherwise float above the card */
body .elementor .faq-accordion .e-n-accordion-item:has(+ .e-n-accordion-item[open]) {
  border-block-end: none;
}
body .elementor .faq-accordion .e-n-accordion-item-title {
  padding-block: 20px;
  font-weight: 600;
}
body .elementor .faq-accordion .e-n-accordion-item-title-text::before {
  content: counter(faq, decimal-leading-zero) ".";
  margin-inline-end: 12px;
  opacity: .75;
}
body .elementor .faq-accordion .e-n-accordion-item[open] {
  border-block-end: none;
  border-radius: 14px;
  padding-inline: 24px;
  margin-inline: -24px; /* bleed outward: keeps text + icon on the closed-row grid */
  margin-block: 8px;
  background: var(--faq-open-bg, linear-gradient(100deg, #6C89A6 0%, #7B3F8E 100%));
  color: var(--faq-open-color, var(--white));
}
body .elementor .faq-accordion .e-n-accordion-item > .e-con {
  padding-block-end: 20px;
}
/* inverted open-card on gradient backgrounds */
body .elementor .bg-purple-gradient .faq-accordion .e-n-accordion-item[open],
body .elementor .bg-teal-gradient .faq-accordion .e-n-accordion-item[open] {
  --faq-open-bg: var(--white);
  --faq-open-color: var(--text-color);
}

/* --- Brand heading gradient, defined once and reused --- */
/* Also consumed by .shadded-heading (Customizer CSS) so the stops live in one place. */
body .elementor {
  --heading-gradient: linear-gradient(90deg, #6aa8b8 0%, #686b9e 50%, #745195 100%);
}



/* --- Carousel arrows: tablet and mobile --- */
/* On desktop the arrows are pulled -250px above the carousel so they sit beside the
   section heading. On narrow screens the heading and copy grow taller and the arrows
   land on the text, so here they are pinned into the gap created by the carousel's
   own top margin instead. The swiper box carries 20px/70px padding from the slider
   styles, which is why Elementor's own offsets do not land where you would expect. */
@media (max-width: 1024px) {
  body .elementor .capabilities-carousel .elementor-swiper-button,
  body .elementor .partner-slider .elementor-swiper-button {
    top: 0 !important;
    bottom: auto !important;
    transform: translateY(-100%) !important;
    margin-block-start: -12px;
  }
  body .elementor .capabilities-carousel .elementor-swiper-button-prev,
  body .elementor .partner-slider .elementor-swiper-button-prev {
    left: auto !important;
    right: 62px !important;
  }
  body .elementor .capabilities-carousel .elementor-swiper-button-next,
  body .elementor .partner-slider .elementor-swiper-button-next {
    left: auto !important;
    right: 4px !important;
  }
}


/* equal columns for the named row modules */
body .elementor .stats-row > *,
body .elementor .awards-row > *,
body .elementor .module-3col > * { flex: 1 1 0; min-width: 0; }
@media (max-width: 767px) {
  body .elementor .stats-row > *,
  body .elementor .awards-row > *,
  body .elementor .module-3col > * { width: 100%; flex: 0 0 auto; }
}

/* --- Stats row: eyebrow / big number / copy, with rules between columns --- */
/* Columns are identified by the counter they contain, so no extra class is needed on the
   atomic containers. Colours all resolve from currentColor, so the same markup works on a
   light section and on a gradient. */
body .elementor .stats-row > * {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 36px;
}
body .elementor .stats-row > *:first-child {
  padding-inline-start: 0;
}
body .elementor .stats-row > *:last-child {
  padding-inline-end: 0;
}
body .elementor .stats-row > * + * {
  border-inline-start: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
body .elementor .stats-row {
  border-block-start: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  padding-block-start: 40px;
}
body .elementor .stats-row > * p {
  font-size: 14px;
  line-height: 1.55;
  opacity: .85;
  margin: 0;
}
/* Elementor centres the number by letting prefix and suffix flex-grow into the space.
   Zeroing those growth factors is the only way to left-align it. */
body .elementor .stats-counter .elementor-counter-number-wrapper {
  --counter-prefix-grow: 0;
  --counter-suffix-grow: 0;
  justify-content: flex-start;
  text-align: start;
}
/* the + on the first stat: small, raised, teal. Other suffixes (k, m) stay full size. */
body .elementor .stats-plus .elementor-counter-number-suffix {
  font-size: .42em;
  font-weight: 600;
  color: var(--teal);
  vertical-align: super;
  margin-inline-start: 2px;
}

/* stats row: tablet — keep three across but tighten, numbers scale down */
@media (max-width: 1024px) {
  body .elementor .stats-row > * {
    padding-inline: 20px;
  }
  body .elementor .stats-counter .elementor-counter-number-wrapper { font-size: 40px; }
  body .elementor .stats-row > * p {
    font-size: 13px;
  }
}
/* stats row: mobile — stack, swap the vertical rules for horizontal ones */
@media (max-width: 767px) {
  body .elementor .stats-row {
    flex-direction: column;
    gap: 0;
    padding-block-start: 32px;
  }
  body .elementor .stats-row > * {
    padding-inline: 0;
    padding-block: 24px;
  }
  body .elementor .stats-row > * + * {
    border-inline-start: none;
    border-block-start: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  }
  body .elementor .stats-counter .elementor-counter-number-wrapper { font-size: 44px; }
  body .elementor .stats-row > * p {
    font-size: 14px;
    max-width: none;
  }
}

/* --- FAQ accordion: one geometry, colours switched by the parent bg-* class --- */
/* Defaults assume a light section. Each bg-* context below only overrides colour tokens,
   so layout, sizing and motion are defined exactly once. */
body .elementor .faq-accordion {
  --faq-icon-color: var(--purple);        /* the + bars, closed state */
  --faq-icon-open-bg: var(--white);       /* circle behind the x */
  --faq-icon-open-color: var(--purple);   /* the x itself */
  --faq-title-hover: var(--heading-gradient);
}
/* gradient sections: white +, and the open card inverts to white, so the circle goes purple */
body .elementor .bg-purple-gradient .faq-accordion,
body .elementor .bg-teal-gradient .faq-accordion {
  --faq-icon-color: var(--white);
  --faq-icon-open-bg: var(--purple);
  --faq-icon-open-color: var(--white);
  /* deliberately inert: titles are already white here, so this resolves to no visible
     change. Nothing on the gradient reads well as a hover - teal, purple and blue all sit
     too close to the background. Swap this token if a treatment is wanted later. */
  --faq-title-hover: linear-gradient(var(--white), var(--white));
}

/* titles: gradient (or solid) revealed on hover, closed items only.
   The fill is always painted and clipped to the glyphs; only -webkit-text-fill-color
   animates, which gives a real cross-fade rather than a snap. */
body .elementor .faq-accordion .e-n-accordion-item-title-text {
  background-image: var(--faq-title-hover);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: currentColor;
  transition: -webkit-text-fill-color .3s cubic-bezier(.4,0,.2,1);
}
body .elementor .faq-accordion .e-n-accordion-item-title-text::before {
  -webkit-text-fill-color: currentColor;   /* leading number stays solid */
}
body .elementor .faq-accordion .e-n-accordion-item:not([open]) .e-n-accordion-item-title:hover .e-n-accordion-item-title-text {
  -webkit-text-fill-color: transparent;
}

/* icons: drawn on the always-present container, not Elementor's two swapped spans,
   because display:none cannot be transitioned. Each bar turns 45deg between states,
   so + and x share a centre and morph smoothly both ways. */
body .elementor .faq-accordion .e-n-accordion-item-title-icon {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: transparent;
  transition: background-color .3s cubic-bezier(.4,0,.2,1);
}
body .elementor .faq-accordion .e-n-accordion-item-title-icon > span { display: none !important; }
body .elementor .faq-accordion .e-n-accordion-item-title-icon::before,
body .elementor .faq-accordion .e-n-accordion-item-title-icon::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  width: 13px;
  height: 1.5px;
  border-radius: 2px;
  background-color: var(--faq-icon-color);
  translate: -50% -50%;
  transition: rotate .3s cubic-bezier(.4,0,.2,1), background-color .3s cubic-bezier(.4,0,.2,1);
}
body .elementor .faq-accordion .e-n-accordion-item-title-icon::before { rotate: 0deg; }
body .elementor .faq-accordion .e-n-accordion-item-title-icon::after  { rotate: 90deg; }
body .elementor .faq-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon {
  background-color: var(--faq-icon-open-bg);
}
body .elementor .faq-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon::before,
body .elementor .faq-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon::after {
  background-color: var(--faq-icon-open-color);
}
body .elementor .faq-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon::before { rotate: 45deg; }
body .elementor .faq-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon::after  { rotate: 135deg; }
@media (prefers-reduced-motion: reduce) {
  body .elementor .faq-accordion .e-n-accordion-item-title-text,
  body .elementor .faq-accordion .e-n-accordion-item-title-icon,
  body .elementor .faq-accordion .e-n-accordion-item-title-icon::before,
  body .elementor .faq-accordion .e-n-accordion-item-title-icon::after { transition: none; }
}

/* --- Counters --- */
/* Colour inheritance and alignment apply to every counter, so numbers pick up the
   section's text colour (white on gradients, dark on light). The oversized number is
   opt-in via .stats-counter - previously 56px hit EVERY counter on the site, which is
   why the awards numbers were rendering huge. */
body .elementor .elementor-counter .elementor-counter-number-wrapper {
  color: inherit;
  --counter-prefix-grow: 0;
  --counter-suffix-grow: 0;
  text-align: start;
  justify-content: flex-start;
}
body .elementor .stats-counter .elementor-counter-number-wrapper {
  font-size: 56px;
  font-weight: 600;
}


/* --- Sticky TOC rail (toc-layout / toc-main / toc-rail markers, reusable on any single template) --- */
body .elementor .toc-layout { display: flex; align-items: flex-start; gap: 48px; }
body .elementor .toc-main { flex: 1; min-width: 0; }
body .elementor .toc-rail { flex: 0 0 300px; width: 300px; position: sticky; top: 120px; }
body .elementor .toc-rail .ez-toc-v2_0_75, body .elementor .toc-rail div.ez-toc-container {
  background: var(--bg-grey);
  border: none;
  border-radius: 14px;
  padding: 22px 24px;
  width: 100%;
}
body .elementor .toc-rail .ez-toc-title { font-family: Metropolis, sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--dark_purple); }
body .elementor .toc-rail .ez-toc-list { margin-top: 10px; }
body .elementor .toc-rail .ez-toc-list li { padding-block: 4px; line-height: 1.4; }
body .elementor .toc-rail .ez-toc-list a { color: var(--text-color); opacity: .75; text-decoration: none; font-size: 14px; transition: opacity .2s, color .2s; }
body .elementor .toc-rail .ez-toc-list a:hover { opacity: 1; color: var(--dark_purple); }
body .elementor .toc-rail .ez-toc-list a.active, body .elementor .toc-rail .ez-toc-list li.active > a { opacity: 1; color: var(--dark_purple); font-weight: 600; }
@media (max-width: 1024px) {
  body .elementor .toc-layout { flex-direction: column; gap: 24px; }
  body .elementor .toc-rail { position: static; width: 100%; flex: 1 1 auto; order: -1; }
}

/* --- Breadcrumb styling (site-wide): uppercase, ink links, grey current page, teal dot separator --- */
body .elementor-widget-breadcrumbs #breadcrumbs,
body .elementor-widget-breadcrumbs #breadcrumbs a {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
  font-weight: 500;
  color: #1A0825;
  text-decoration: none;
}
body .elementor-widget-breadcrumbs #breadcrumbs a:hover {
  color: var(--dark_purple);
}
body .elementor-widget-breadcrumbs #breadcrumbs .breadcrumb_last {
  color: rgba(26, 8, 37, .42);
}
body .elementor-widget-breadcrumbs #breadcrumbs .bc-sep {
  display: inline-block;
  vertical-align: middle;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  font-size: 0;
  line-height: 0;
  margin: 0 10px;
  position: relative;
  top: -1px;
}

/* --- Share buttons (site-wide): circles per design, lilac border/fill, dark purple icon --- */
body .elementor-widget-share-buttons .elementor-grid {
  --grid-column-gap: 5px;
  --grid-row-gap: 5px;
}
body .elementor-widget-share-buttons .elementor-share-btn.elementor-share-btn {
  width: 40px;
  height: 40px;
  min-width: 0;
  border-radius: 50%;
  background-color: #ECE7EC;
  border: 1px solid #D0B9D3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background-color .25s ease, border-color .25s ease;
}
body .elementor-widget-share-buttons .elementor-share-btn__icon {
  position: static;
  width: auto;
  height: auto;
  line-height: 1;
  display: flex;
  background: none;
}
body .elementor-widget-share-buttons .elementor-share-btn svg {
  width: 20px;
  height: 20px;
  fill: var(--dark_purple);
  transition: fill .25s ease;
}
body .elementor-widget-share-buttons .elementor-share-btn.elementor-share-btn:hover,
body .elementor-widget-share-buttons .elementor-share-btn.elementor-share-btn:focus-visible {
  background-color: var(--dark_purple);
  border-color: var(--dark_purple);
}
body .elementor-widget-share-buttons .elementor-share-btn:hover svg,
body .elementor-widget-share-buttons .elementor-share-btn:focus-visible svg {
  fill: #fff;
}

/* --- Content links & list bullets (site-wide): teal, replaces hello-elementor red #CC3366 --- */
body .elementor-widget-theme-post-content ul li::marker,
body .elementor-widget-text-editor ul li::marker,
body .e-paragraph ul li::marker,
body .elementor-widget-theme-post-content ol li::marker,
body .elementor-widget-text-editor ol li::marker {
  color: var(--teal);
}
body .elementor-widget-theme-post-content a:not(.elementor-button):not(.e-button-base),
body .elementor-widget-text-editor a:not(.elementor-button):not(.e-button-base),
body p.e-paragraph a {
  color: var(--teal);
}
body .elementor-widget-theme-post-content a:not(.elementor-button):not(.e-button-base):hover,
body .elementor-widget-text-editor a:not(.elementor-button):not(.e-button-base):hover,
body p.e-paragraph a:hover {
  color: var(--dark_teal);
}

/* --- Blog post body: neutralise migrated per-widget text colours (old posts hard-code #61006C) --- */
body .elementor-widget-theme-post-content .elementor-widget.elementor-widget-text-editor,
body .elementor-widget-theme-post-content .elementor-widget.elementor-widget-text-editor p {
  color: inherit;
  font-family: inherit;
}
body .elementor-widget-theme-post-content .elementor-widget-heading .elementor-heading-title.elementor-heading-title {
  font-family: inherit;
}

/* --- Post navigation & related posts (site-wide): prev/next mirror the hero btn-purple.btn-arrow --- */
body .elementor-post-navigation {
  border: none;
  padding: 10px 0;
}
body .elementor-post-navigation .elementor-post-navigation__link a {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  background: var(--dark_purple);
  color: #fff;
  border-radius: 999px;
  padding: 8px 22px;
  font-size: 15px;
  font-weight: 500;
  transition: background-color .3s cubic-bezier(.4,0,.2,1);
}
body .elementor-post-navigation .elementor-post-navigation__link a span {
  color: #fff;
}
body .elementor-post-navigation .elementor-post-navigation__link a:hover {
  background-color: var(--light_purple);
}
body .elementor-post-navigation .elementor-post-navigation__prev a {
  padding-left: 8px;
}
body .elementor-post-navigation .elementor-post-navigation__next a {
  padding-right: 8px;
}
body .elementor-post-navigation .elementor-post-navigation__prev a::before,
body .elementor-post-navigation .elementor-post-navigation__next a::after {
  content: "";
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--light_purple);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px;
  transition: background-color .3s cubic-bezier(.4,0,.2,1),
              transform .3s cubic-bezier(.4,0,.2,1);
}
body .elementor-post-navigation .elementor-post-navigation__prev a::before {
  transform: scaleX(-1);
}
body .elementor-post-navigation .elementor-post-navigation__link a:hover::before,
body .elementor-post-navigation .elementor-post-navigation__link a:hover::after {
  background-color: var(--purple);
}
body .elementor-post-navigation .elementor-post-navigation__next a:hover::after {
  transform: translateX(4px);
}
body .elementor-post-navigation .elementor-post-navigation__prev a:hover::before {
  transform: scaleX(-1) translateX(4px);
}
body .elementor-post-navigation .elementor-post-navigation__link a span.post-navigation__prev--label,
body .elementor-post-navigation .elementor-post-navigation__link a span.post-navigation__next--label {
  color: #fff;
  text-transform: none;
  text-decoration: none;
  font-style: normal;
}
body .elementor-post-navigation .elementor-post-navigation__next {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 767px) {
  body .elementor-post-navigation {
    flex-wrap: wrap;
    gap: 10px;
  }
  body .elementor-post-navigation .elementor-post-navigation__link {
    width: 100%;
  }
  body .elementor-post-navigation .elementor-post-navigation__link a {
    width: 100%;
    justify-content: center;
  }
  body .elementor-post-navigation .elementor-post-navigation__prev a {
    justify-content: flex-start;
  }
  body .elementor-post-navigation .elementor-post-navigation__next a {
    justify-content: flex-end;
  }
}
@media (prefers-reduced-motion: reduce) {
  body .elementor-post-navigation .elementor-post-navigation__link a,
  body .elementor-post-navigation .elementor-post-navigation__prev a::before,
  body .elementor-post-navigation .elementor-post-navigation__next a::after { transition: none; }
}
body .elementor-widget-posts .elementor-post__card {
  background: #fff;
  border: 1px solid #ECE7EC;
  border-radius: 20px;
  padding: 30px;
  height: 100%;
  transition: box-shadow .25s ease, transform .25s ease;
}
body .elementor-widget-posts .elementor-post__card:hover {
  box-shadow: 0 12px 30px rgba(97, 0, 108, .10);
  transform: translateY(-3px);
}
body .elementor-widget-posts .elementor-post__title.elementor-post__title,
body .elementor-widget-posts .elementor-post__title.elementor-post__title a {
  color: #1A0825;
  font-size: 20px;
  line-height: 1.35;
}
body .elementor-widget-posts .elementor-post__title.elementor-post__title a:hover {
  color: var(--dark_purple);
}
body .elementor-widget-posts .elementor-post__excerpt p {
  color: rgba(26, 8, 37, .6);
  font-size: 15px;
}
body .elementor-widget-posts .elementor-post__read-more.elementor-post__read-more {
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .08em;
  font-weight: 600;
  color: var(--teal);
  transition: color .25s ease;
}
body .elementor-widget-posts .elementor-post__read-more.elementor-post__read-more::after {
  content: ' →';
}
body .elementor-widget-posts .elementor-post__read-more.elementor-post__read-more:hover {
  color: var(--dark_teal);
}

/* --- Atomic buttons in post content: inline with the text flow --- */
body .elementor-widget-theme-post-content a.e-button-base {
  display: inline-flex !important;
  width: fit-content;
  align-self: flex-start;
  vertical-align: middle;
}

/* --- Contact module (single templates): gradient band, white form card, GF styling --- */
.contact-module {
  background: linear-gradient(118deg, #6FA9B5 0%, #6D5590 55%, #61006C 100%);
  padding: 90px 8%;
  gap: 60px;
  align-items: center;
}
.contact-module .contact-intro h2.elementor-heading-title {
  color: #fff;
  font-size: clamp(28px, 3.4vw, 40px);
}
.contact-module .contact-intro,
.contact-module .contact-intro p {
  color: rgba(255, 255, 255, .88);
}
.contact-module .contact-intro .e-button-base {
  align-self: flex-start;
  width: fit-content;
}
.contact-module .contact-card {
  background: #FBFBFB;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 24px 60px rgba(26, 8, 37, .28);
}
.contact-module .contact-card h3.elementor-heading-title {
  color: #1A0825;
  font-size: 24px;
  font-weight: 700;
}
.contact-module .contact-card p {
  font-size: 14px;
  color: rgba(26, 8, 37, .65);
}
.contact-card .gform_wrapper.gform-theme .gfield_label {
  font-size: 13px;
  font-weight: 500;
  color: #1A0825;
}
.contact-card .gform_wrapper.gform-theme input[type=text],
.contact-card .gform_wrapper.gform-theme input[type=email],
.contact-card .gform_wrapper.gform-theme select {
  border: 0;
  border-bottom: 1px solid #C9CFD6;
  border-radius: 0;
  background: transparent;
  padding: 8px 2px;
  font-size: 15px;
  color: #1A0825;
}
.contact-card .gform_wrapper.gform-theme input:focus,
.contact-card .gform_wrapper.gform-theme select:focus {
  outline: none;
  border-bottom-color: var(--teal);
}
.contact-card .gform_wrapper.gform-theme textarea {
  border: 1px solid #DDE2E7;
  background: #F5F6F7;
  border-radius: 8px;
  min-height: 120px;
  padding: 12px;
  font-size: 15px;
}
.contact-card .gform_wrapper.gform-theme textarea:focus {
  outline: none;
  border-color: var(--teal);
}
.contact-card .gform_wrapper input[type=checkbox] {
  accent-color: var(--teal);
  width: 18px;
  height: 18px;
}
.contact-card .gform_wrapper.gform-theme .gfield_checkbox label {
  font-size: 13px;
  color: rgba(26, 8, 37, .75);
}
.contact-card .gform_wrapper .gform_footer button.gform_button {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  background: var(--dark_purple) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 10px 12px 10px 26px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  text-transform: none !important;
  cursor: pointer;
  transition: background-color .3s cubic-bezier(.4,0,.2,1);
}
.contact-card .gform_wrapper .gform_footer button.gform_button::after {
  content: "" !important;
  display: inline-flex !important;
  flex: 0 0 auto;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
  background-color: var(--light_purple);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px;
  transition: background-color .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1);
}
.contact-card .gform_wrapper .gform_footer button.gform_button:hover {
  background: var(--light_purple) !important;
}
.contact-card .gform_wrapper .gform_footer button.gform_button:hover::after {
  background-color: var(--purple);
  transform: translateX(4px);
}
@media (max-width: 1024px) {
  .contact-module {
    flex-direction: column;
    padding: 60px 5%;
    gap: 40px;
  }
}

/* --- Gravity Forms required indicator (site-wide, all forms): brand purple instead of red --- */
body .gform_wrapper .gfield_required,
body .gform_wrapper .gfield_required_text,
body .gform_wrapper .gfield_required_asterisk,
body .gform_wrapper legend .gfield_required {
  color: var(--purple);
}

/* --- Gravity Forms brand tokens (site-wide, all forms): focus rings & control accents in brand purple instead of GF blue --- */
body .gform_wrapper.gform-theme {
  --gf-color-primary: #61006C !important;
  --gf-color-primary-rgb: 97, 0, 108 !important;
  --gf-color-primary-darker: #55005F !important;
  --gf-color-primary-lighter: #772481 !important;
  --gf-ctrl-outline-color-focus: rgba(97, 0, 108, .25) !important;
  --gf-ctrl-outline-width-focus: 0 !important;
}

/* --- GF focus glow (site-wide, all forms): soft purple halo that fades out --- */
body .gform_wrapper.gform-theme input:focus,
body .gform_wrapper.gform-theme select:focus,
body .gform_wrapper.gform-theme textarea:focus {
  outline: none !important;
  border-color: var(--purple) !important;
  box-shadow: 0 0 10px rgba(97, 0, 108, .45) !important;
}

/* --- Resource single templates (info sheets, whitepapers...): hero + gated download block --- */
body .elementor .resource-hero {
  min-height: 440px;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  /* trimmed from 26/60: the 60px bottom was slack, and reclaiming it absorbs the
     height the tag line under the CTA adds */
  padding: 18px 0 18px;
}
/* breadcrumbs ride at the top of the band, as on insights */
body .elementor .resource-hero > .elementor-widget-breadcrumbs {
  padding-inline: 24px 0;
}
/* the title block sits centred in whatever space is left */
body .elementor .resource-hero .resource-hero__text {
  margin-block: auto;
}
body .elementor .resource-hero .resource-hero__text {
  gap: 22px;
  padding-inline: 24px 0;
}
body .elementor .resource-hero .e-button-base {
  align-self: flex-start;
  width: fit-content;
}
body .elementor .resource-hero .resource-hero__subtitle {
  font-size: 16px;
  color: rgba(26, 8, 37, .70);
  max-width: 40ch;
  margin: 0;
}
body .elementor .resource-hero h1.elementor-heading-title {
  /* trimmed so long titles fit on fewer lines: these run to 60+ characters in a 485px
     column, which was four lines at 40px. Tighter leading than the 1.1em global too. */
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.08;
  margin: 0;
}
/* Hide the subtitle line entirely when the ACF field is empty. */
body .elementor .resource-hero .resource-hero__subtitle:empty,
body .elementor .resource-hero .resource-hero__subtitle .elementor-heading-title:empty {
  display: none;
}
/* Featured image wears the homepage hero's blob mask: the widget chain must stretch so the image can blob fill the masked area. */
body .elementor .resource-hero .img-blob-right,
body .elementor .resource-hero .img-blob-right > .e-con-inner,
body .elementor .resource-hero .img-blob-right .elementor-widget-theme-post-featured-image,
body .elementor .resource-hero .img-blob-right .elementor-widget-container,
body .elementor .resource-hero .img-blob-right figure {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
body .elementor .resource-hero .img-blob-right img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Gated download block */
body .elementor .resource-body > .e-con-inner {
  max-width: min(970px, calc(100% - 48px));
}
body .elementor .resource-body,
body .elementor .resource-download {
  background-color: #fff;
}
body .elementor .resource-download {
  padding: 90px 0;
}
body .elementor .resource-download__card {
  max-width: min(970px, calc(100% - 48px));
  margin-inline: auto;
  background-image: linear-gradient(118deg, #6FA9B5 0%, #6D5590 55%, #61006C 100%);
  border-radius: 16px;
  padding: 60px;
  gap: 34px;
}
body .elementor .resource-download__head {
  gap: 40px;
  align-items: flex-start;
}
body .elementor .resource-download h2.elementor-heading-title {
  color: #fff;
  font-size: clamp(24px, 3vw, 34px);
  margin: 0;
}
body .elementor .resource-download__head p {
  color: rgba(255, 255, 255, .85);
  font-size: 15px;
  margin: 0;
}
/* Form on the gradient: white underline fields, teal submit. */
body .resource-download .gform_wrapper.gform-theme .gfield_label {
  color: rgba(255, 255, 255, .85);
  font-size: 13px;
  font-weight: 500;
}
body .resource-download .gform_wrapper.gform-theme .gfield_required {
  color: rgba(255, 255, 255, .85);
}
body .resource-download .gform_wrapper.gform-theme input[type=text],
body .resource-download .gform_wrapper.gform-theme input[type=email],
body .resource-download .gform_wrapper.gform-theme select {
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .45);
  border-radius: 0;
  background: transparent;
  color: #fff;
  padding: 8px 2px;
  font-size: 15px;
}
body .resource-download .gform_wrapper.gform-theme select option {
  color: #1A0825;
}
body .resource-download .gform_wrapper.gform-theme input:focus,
body .resource-download .gform_wrapper.gform-theme select:focus {
  outline: none !important;
  border-color: #fff !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, .45) !important;
}
body .resource-download .gform_wrapper .gform_footer button.gform_button {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  background: var(--teal) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 10px 12px 10px 26px !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  text-transform: none !important;
  cursor: pointer;
  transition: background-color .3s cubic-bezier(.4,0,.2,1);
}
body .resource-download .gform_wrapper .gform_footer button.gform_button::after {
  content: "" !important;
  display: inline-flex !important;
  flex: 0 0 auto;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
  background-color: var(--dark_teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 14px;
  transition: background-color .3s cubic-bezier(.4,0,.2,1), transform .3s cubic-bezier(.4,0,.2,1);
}
body .resource-download .gform_wrapper .gform_footer button.gform_button:hover {
  background: var(--dark_teal) !important;
}
body .resource-download .gform_wrapper .gform_footer button.gform_button:hover::after {
  background-color: var(--teal);
  transform: translateX(4px);
}
@media (max-width: 1024px) {
  body .elementor .resource-hero {
    min-height: 0;
  }
  body .elementor .resource-hero .resource-hero__text {
    padding: 0 5%;
  }
  body .elementor .resource-download {
    padding: 60px 0;
  }
  body .elementor .resource-download__card {
    padding: 40px 28px;
  }
  body .elementor .resource-download__head {
    flex-direction: column;
    gap: 16px;
  }
}

/* --- Resource hero blob geometry on a classic container (Elementor's .e-con width would otherwise win) --- */
@media (min-width: 1025px) {
  /* Elementor containers are width:100%, which would add its own width to the blob margins and push the page sideways; let them size to the space the margins leave. */
  body:not(.elementor-editor-active) .elementor .resource-hero > .e-con:not(.img-blob-right) {
    width: auto;
  }
  body:not(.elementor-editor-active) .elementor .resource-hero .img-blob-right {
    width: 47%;
    max-width: 47%;
  }
}

/* --- Form select fields: GF ships a 38px line-height on a 22px content box, which shoves the
       option text out of the field; and appearance:none needs our own chevron back. --- */
body .contact-card .gform_wrapper.gform-theme select,
body .resource-download .gform_wrapper.gform-theme select {
  height: auto !important;
  line-height: 1.4 !important;
  padding: 8px 24px 8px 2px !important;
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 14px;
  appearance: none;
  -webkit-appearance: none;
}
body .resource-download .gform_wrapper.gform-theme select {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
body .contact-card .gform_wrapper.gform-theme select {
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231A0825' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* --- Related resources block: space above the heading --- */
body .elementor .resource-related {
  margin-top: 30px;
  padding-top: 30px;
}

/* --- Download button inside resource body copy --- */
body .elementor .resource-body .e-button-base,
body .elementor .poster-download-cta .e-button-base {
  align-self: flex-start;
  width: fit-content;
}
body .elementor .poster-download-cta {
  padding-top: 10px;
}

/* --- Land the hero on the same rail as the body copy (beats the blob layout's own margin) --- */
@media (min-width: 1025px) {
  body:not(.elementor-editor-active) .elementor .resource-hero.gradient-card-right > *:not(.img-blob):not(.img-blob-right) {
    margin-inline-start: max(calc((100% - 970px) / 2), 24px);
    padding-inline-start: 0;
  }
}

/* --- Fluid heading scale: replaces the theme reset's fixed rem sizes --- */
body .elementor h1 {
  font-size: clamp(32px, 4vw, 48px);
}
body .elementor h2 {
  font-size: clamp(26px, 3vw, 34px);
}
body .elementor h3 {
  font-size: clamp(20px, 2.2vw, 26px);
}

/* --- Fields on the gradient card: textarea and consent row, which default to a solid
       white box and dark label that only work on a light background --- */
body .resource-download .gform_wrapper.gform-theme textarea {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 8px;
  color: #fff;
  min-height: 120px;
  padding: 12px;
  font-size: 15px;
}
body .resource-download .gform_wrapper.gform-theme textarea:focus {
  outline: none !important;
  border-color: #fff !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, .45) !important;
}
body .resource-download .gform_wrapper.gform-theme ::placeholder {
  color: rgba(255, 255, 255, .6);
}
body .resource-download .gform_wrapper.gform-theme .gfield_checkbox label,
body .resource-download .gform_wrapper.gform-theme .gfield_consent_label,
body .resource-download .gform_wrapper.gform-theme .gform-field-label--type-inline {
  color: rgba(255, 255, 255, .85);
  font-size: 13px;
}
body .resource-download .gform_wrapper.gform-theme input[type=checkbox] {
  accent-color: #fff;
  width: 18px;
  height: 18px;
}
body .resource-download .gform_wrapper.gform-theme .gform_validation_errors,
body .resource-download .gform_wrapper.gform-theme .gfield_description {
  color: rgba(255, 255, 255, .85);
}

/* --- Brochures run their interactive embed full width, unlike the other resources --- */
body .elementor .resource-body--full,
body .elementor .resource-body--full > .e-con-inner,
body .elementor .resource-body--full .elementor-section,
body .elementor .resource-body--full .elementor-container,
body .elementor .resource-body--full .e-con,
body .elementor .resource-body--full .e-con > .e-con-inner {
  max-width: none;
  width: 100%;
  padding-inline: 0;
}
body .elementor .resource-body--full iframe {
  display: block;
  width: 100%;
}

/* --- Resource hero without a featured image: drop the blob and let the text use the rail --- */
body.no-featured-image .elementor .resource-hero .img-blob-right {
  background-image: linear-gradient(118deg, #6FA9B5 0%, #6D5590 55%, #61006C 100%);
}


/* --- Resource Centre hub: hero on the gradient, then the filtered listing --- */
body .elementor .resource-hero--hub {
  min-height: 460px;
  color: var(--white);
}
body .elementor .resource-hero--hub h1.elementor-heading-title {
  color: var(--white);
  font-size: clamp(34px, 4.4vw, 56px);
  margin: 0;
}
body .elementor .resource-hero--hub .resource-hero__intro {
  color: rgba(255, 255, 255, .85);
  font-size: 16px;
  max-width: 46ch;
}
/* breadcrumbs sit on the gradient here, so they invert */
body .elementor .resource-hero--hub #breadcrumbs,
body .elementor .resource-hero--hub #breadcrumbs a {
  color: rgba(255, 255, 255, .8);
}
body .elementor .resource-hero--hub #breadcrumbs a:hover {
  color: var(--white);
}
body .elementor .resource-hero--hub #breadcrumbs .breadcrumb_last {
  color: rgba(255, 255, 255, .55);
}

/* Filters + results */
body .elementor .resource-hub {
  gap: 60px;
  align-items: flex-start;
  padding-block: 70px;
  background-color: var(--bg-grey);
}
body .elementor .resource-hub__filters {
  width: 250px;
  flex: 0 0 250px;
  gap: 0;
}
body .elementor .resource-hub__results {
  flex: 1 1 auto;
  min-width: 0;
  gap: 24px;
}
.facet-block .facetwp-facet {
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid rgba(26, 8, 37, .12);
}
.facet-block .facetwp-facet:empty {
  display: none;
}
.resource-hub__filters .facetwp-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  font-size: 14px;
  color: rgba(26, 8, 37, .75);
  cursor: pointer;
  background: none;
  padding-left: 0;
  margin-bottom: 0;
}
/* our own checkbox, since FacetWP draws its default with a background image */
.resource-hub__filters .facetwp-checkbox::before {
  content: "";
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(26, 8, 37, .22);
  border-radius: 3px;
  background: #fff center/11px no-repeat;
  transition: border-color .2s ease, background-color .2s ease;
}
.resource-hub__filters .facetwp-checkbox:hover::before {
  border-color: var(--teal);
}
.resource-hub__filters .facetwp-checkbox.checked::before {
  border-color: var(--teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2361B5B8' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
/* FacetWP dims facets mid-refresh; keep it subtle rather than a grey flash */
body .resource-hub .facetwp-facet.is-loading {
  opacity: .45;
}
.resource-hub__filters .facetwp-checkbox:hover {
  color: var(--dark_purple);
}
.resource-hub__filters .facetwp-checkbox.checked {
  color: var(--dark_purple);
  font-weight: 500;
}
.resource-hub__filters .facetwp-counter {
  color: rgba(26, 8, 37, .45);
  font-size: 12px;
}
.facet-count .facetwp-facet {
  margin: 0;
  font-size: 13px;
  color: rgba(26, 8, 37, .55);
  text-align: right;
}
.facet-loadmore .facetwp-facet {
  margin: 0;
  text-align: center;
}
.facet-loadmore .facetwp-load-more {
  display: inline-block;
  border: 1px solid rgba(26, 8, 37, .2);
  border-radius: 999px;
  background: transparent;
  /* the theme's stock button colour is a red that has no place in this palette */
  color: #1A0825;
  padding: 12px 34px;
  font-size: 14px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.facet-loadmore .facetwp-load-more:hover {
  background: var(--dark_purple);
  border-color: var(--dark_purple);
  color: #fff;
}

/* Result cards, following the homepage carousel cards */
body .elementor .resource-cards .elementor-post__card {
  background: #fff;
  border: 0;
  border-radius: 16px;
  padding: 26px;
  height: 100%;
  box-shadow: 0 6px 20px rgba(26, 8, 37, .06);
  transition: box-shadow .25s ease, transform .25s ease;
}
body .elementor .resource-cards .elementor-post__card:hover {
  box-shadow: 0 14px 34px rgba(97, 0, 108, .12);
  transform: translateY(-3px);
}
body .elementor .resource-cards .elementor-post__text {
  margin: 0;
  padding: 0;
}
body .elementor .resource-cards .elementor-post__title,
body .elementor .resource-cards .elementor-post__title a {
  color: #1A0825;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
}
body .elementor .resource-cards .elementor-post__title a:hover {
  color: var(--dark_purple);
}
body .elementor .resource-cards .elementor-post__read-more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  background: var(--dark_purple);
  color: #fff;
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .25s ease;
}
body .elementor .resource-cards .elementor-post__read-more:hover {
  background: var(--light_purple);
  color: #fff;
}
/* tablet: keep the sidebar, just narrow it — full width reads as a broken layout */
@media (max-width: 1024px) and (min-width: 768px) {
  body .elementor .resource-hub {
    gap: 34px;
    padding-block: 50px;
  }
  body .elementor .resource-hub__filters {
    width: 200px;
    flex: 0 0 200px;
  }
}
/* phones: stack, with the filters above the results */
@media (max-width: 767px) {
  body .elementor .resource-hub {
    flex-direction: column;
    padding-block: 40px;
    gap: 30px;
  }
  body .elementor .resource-hub__filters {
    width: 100%;
    flex: 1 1 auto;
  }
}

/* --- Filter group headings --- */
body .elementor .facet-heading h3.elementor-heading-title {
  font-size: 15px;
  font-weight: 600;
  color: #1A0825;
  margin: 0;
  padding-top: 22px;
}
body .elementor .facet-heading:first-child h3.elementor-heading-title {
  padding-top: 0;
}

/* --- FacetWP prints its stylesheet in the footer, so it wins ties against this file.
       Its .checked rule re-adds the default checkbox PNG, which then tiles across the row
       because the shorthand reset above cleared background-repeat. --- */
body .resource-hub__filters .facetwp-checkbox,
body .resource-hub__filters .facetwp-checkbox.checked,
body .resource-hub__filters .facetwp-radio,
body .resource-hub__filters .facetwp-radio.checked {
  background-image: none !important;
  background-repeat: no-repeat !important;
  padding-left: 0 !important;
}

/* --- Editor preview of the resource hero: the blob mask is frontend-only, so in the
       editor the featured image would render at full size and read as broken. Approximate
       the finished shape instead. --- */
body.elementor-editor-active .elementor .resource-hero .img-blob-right {
  width: 40%;
  max-width: 360px;
  margin-inline-start: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
}
body.elementor-editor-active .elementor .resource-hero .img-blob-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.elementor-editor-active .elementor .resource-hero {
  min-height: 0;
  padding-bottom: 30px;
}

/* --- Resource card image takes the homepage drop-image shape --- */
body .elementor .resource-cards .elementor-post__thumbnail {
  padding-bottom: 0 !important;
  height: 150px;
  border-radius: 100px 100px 100px 20px;
  overflow: hidden;
}
body .elementor .resource-cards .elementor-post__thumbnail img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
body .elementor .resource-cards .elementor-post__thumbnail__link {
  display: block;
  margin-bottom: 18px;
}

/* --- Resource cards (loop item): badge, title, terms, CTA --- */
body .elementor .rcard {
  background: #fff;
  border-radius: 16px;
  padding: 22px;
  margin-top: 70px;
  overflow: visible;
  height: 100%;
  gap: 14px;
  align-items: stretch;
  box-shadow: 0 6px 20px rgba(26, 8, 37, .06);
  transition: box-shadow .25s ease, transform .25s ease;
}
body .elementor .rcard:hover {
  box-shadow: 0 14px 34px rgba(97, 0, 108, .12);
  transform: translateY(-3px);
}
/* card media (image or placeholder), in the homepage drop-image shape */
body .elementor .rcard .rcard__media {
  display: block;
  width: 100%;
}
body .elementor .rcard .rcard__media {
  width: 60%;
  height: 150px;
  margin-top: -70px;
}
body .elementor .rcard .rcard__media img,
body .elementor .rcard .rcard__ph {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 100px 100px 100px 20px;
}
/* no featured image: a brand panel rather than a gap */
body .elementor .rcard .rcard__ph {
  background-image: linear-gradient(160deg, #F0ECF1 0%, #E4DCE7 100%);
}
body .elementor .rcard .card-badge {
  display: inline-block;
  border: 1px solid var(--teal);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
}
body .elementor .rcard .rcard__title h3.elementor-heading-title,
body .elementor .rcard .rcard__title h3.elementor-heading-title a {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  color: #1A0825;
  margin: 0;
}
body .elementor .rcard .rcard__title h3.elementor-heading-title a:hover {
  color: var(--dark_purple);
}
body .elementor .rcard .card-terms {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal);
}
/* CTA reuses the button system, at card scale */
body .elementor .rcard .card-cta {
  margin-top: auto;
  font-size: 13px;
  padding: 7px 8px 7px 20px;
  gap: 10px;
}
body .elementor .rcard .card-cta::after {
  width: 26px;
  height: 26px;
  background-size: 12px;
}
/* the CTA sits at the foot of every card regardless of title length */
body .elementor .rcard > .elementor-widget:last-child {
  margin-top: auto;
}

/* --- badge and CTA hug their content while the rest of the card stretches --- */
body .elementor .rcard .card-badge,
body .elementor .rcard .card-cta {
  align-self: flex-start;
  width: fit-content;
}
body .elementor .rcard .rcard__image,
body .elementor .rcard .rcard__image .elementor-shortcode {
  display: block;
  width: 100%;
  overflow: visible;
}
body .elementor .rcard .rcard__media {
  display: block;
}

/* --- Resource grid: cards size to their content rather than stretching to the tallest in the row --- */
body .elementor .resource-cards .elementor-grid {
  align-items: start;
}
body .elementor .rcard {
  height: auto;
}
body .elementor .rcard > .elementor-widget:last-child {
  margin-top: 4px;
}

/* ---------------------------------------------------------------
   Module sections
   Each importable homepage module carries a module-* marker class, so a
   spacing or colour change here reaches the saved template and every page
   that imported it at once.
   --------------------------------------------------------------- */

body .elementor .module-carousel {
	padding-block: 70px;
}

@media (max-width: 767px) {
	body .elementor .module-carousel {
		padding-block: 40px;
	}
}


/* ---------------------------------------------------------------
   Hero height
   The section carries the min/max height; the row and the masked image inherit it,
   so the shape fits the height set in the editor instead of overflowing it. The
   image keeps its own aspect ratio — mask-size: contain narrows the shape rather
   than stretching it. No heights are repeated here.
   --------------------------------------------------------------- */

body .elementor .module-hero > * {
	min-height: inherit;
	max-height: inherit;
}


/* ---------------------------------------------------------------
   Mobile header & navigation
   Elementor renders the dropdown static inside the nav widget, which on this
   header is only as wide as the burger (~59px) — hence the squashed menu. It is
   lifted out to a full-width overlay that sits over the page rather than pushing
   it down, and coloured from the brand tokens instead of Elementor's defaults.
   --------------------------------------------------------------- */

@media (max-width: 1024px) {

  /* Logo left, burger and CTA together on the right. */
  /* Only the outer header row is positioned, so the panel spans the full viewport.
     The boxed container inside it must stay static or the panel inherits its width. */
  body .elementor-26628 > .e-con {
    position: relative;
  }
  body .elementor-26628 .boxed-container {
    position: static;
    align-items: center;
  }
  body .elementor-26628 .elementor-widget-nav-menu {
    margin-inline-start: auto;
    order: 2;
    /* Elementor makes the nav widget position:relative, which would anchor the panel
       to the burger. Static hands anchoring to the header row instead. */
    position: static;
  }
  body .elementor-26628 .elementor-widget-nav-menu + .e-button-base,
  body .elementor-26628 .e-button-base {
    order: 3;
  }

  /* The CTA is deliberately smaller here than the in-page buttons. */
  body .elementor-26628 .e-button-base {
    font-size: 14px;
    padding: 8px 16px;
  }
  body .elementor-26628 .e-button-base.btn-arrow::after {
    width: 26px;
    height: 26px;
  }

  /* Burger in brand purple rather than Elementor's default grey. */
  body .elementor-26628 .elementor-menu-toggle {
    color: var(--purple);
    background-color: transparent;
    border-radius: 6px;
  }
  body .elementor-26628 .elementor-menu-toggle svg,
  body .elementor-26628 .elementor-menu-toggle i {
    font-size: 26px;
    fill: currentColor;
  }

  /* Full-width overlay panel, anchored to the header rather than the burger. */
  body .elementor-26628 .elementor-nav-menu--dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    background-color: var(--white);
    border-top: 1px solid var(--grey-border-color);
    box-shadow: 0 18px 40px rgba(26, 8, 37, 0.14);
  }

  body .elementor-26628 .elementor-nav-menu--dropdown .elementor-nav-menu a {
    color: var(--e-global-color-primary);
    padding: 16px 24px;
    font-size: 17px;
    border-bottom: 1px solid var(--grey-border-color);
  }
  body .elementor-26628 .elementor-nav-menu--dropdown .elementor-nav-menu li:last-child a {
    border-bottom: 0;
  }
  body .elementor-26628 .elementor-nav-menu--dropdown .elementor-nav-menu a:hover,
  body .elementor-26628 .elementor-nav-menu--dropdown .elementor-nav-menu a:focus,
  body .elementor-26628 .elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item-active {
    color: var(--purple);
    background-color: var(--box-bg-grey);
  }
  /* Submenu items sit inside the same panel, indented and on the tinted ground. */
  body .elementor-26628 .elementor-nav-menu--dropdown .elementor-nav-menu ul a {
    padding-inline-start: 40px;
    background-color: var(--bg-grey);
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  /* Phone widths leave no room for the CTA beside the logo, so it steps aside and the
     burger takes the right edge on its own. It still shows on tablet. */
  body .elementor-26628 .e-button-base {
    display: none;
  }
  body .elementor-26628 .elementor-widget-nav-menu {
    margin-inline-start: auto;
    margin-inline-end: 0;
  }
  body .elementor-26628 .elementor-menu-toggle {
    margin-inline-start: auto;
  }

  /* On a phone the blob shape adds nothing at that size, so the mask comes off and the
     photo fills the whole band behind the copy. aspect-ratio has to stand down for the
     inset to govern the box. */
  body .elementor .module-hero .hero-media {
    /* absolute insets resolve against the padding box, so the 20px module gutter would
       inset the photo. Negative inline insets take it back out to the band edges. */
    inset-block: 0;
    inset-inline: -20px;
    width: auto;
    max-width: none;
    height: auto;
    aspect-ratio: auto;
    -webkit-mask-image: none;
    mask-image: none;
    background-size: cover;
    background-position: center;
  }
}


/* ---------------------------------------------------------------
   Module gutter (stacked layouts)
   Each module carried its own side padding, set at different times, so the page
   stepped between 19px and 40px as you scrolled. One value for all of them —
   possible only because every section now has a module-* marker class.
   --------------------------------------------------------------- */

@media (max-width: 1024px) {
  /* One gutter, carried by the section itself. The layout wrappers beneath it
     (boxed-container, column wrappers) are zeroed so their padding no longer stacks
     on top; anything deeper is content or a card and keeps its own spacing. */
  body .elementor [class*="module-"] {
    padding-inline: 20px;
  }

  /* A module nested inside another band takes no gutter of its own — the outer band
     already provides one, and the two were stacking to 40px. Top-level bands sit
     directly in the document wrapper, so they keep theirs. */
  body .elementor .e-con [class*="module-"] {
    padding-inline: 0;
  }
  body .elementor [class*="module-"] > .e-con,
  body .elementor [class*="module-"] > .e-con > .e-con,
  body .elementor [class*="module-"] > .e-con > .e-con > .e-con {
    padding-inline: 0;
  }

  /* A gradient card inside a module carries its own 24px side inset, which used to be
     its only gutter. That now stacks on the module gutter and pushes the content to 44px
     while every other band sits at 20px, so it is dropped here only. Gradient cards used
     outside a module — the resource heroes — keep theirs. */
  body .elementor [class*="module-"].gradient-card > .e-con.e-atomic-element,
  body .elementor [class*="module-"].gradient-card-right > .e-con.e-atomic-element,
  body .elementor [class*="module-"] .gradient-card > .e-con.e-atomic-element,
  body .elementor [class*="module-"] .gradient-card-right > .e-con.e-atomic-element {
    margin-inline: 0;
    width: auto;
    align-self: stretch;
  }
}


/* ---------------------------------------------------------------
   Person bio modal
   One shell serves every person on the site; content is injected on click.
   Triggered by any link whose href is #person-<slug>.
   --------------------------------------------------------------- */

body .person-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
body .person-modal[hidden] { display: none; }

body .person-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(26, 8, 37, 0.45);
  /* the blur is progressive enhancement — the tint above carries it alone if unsupported */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

body .person-modal__panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 40px;
  border-radius: 24px;
  background-color: var(--white);
  box-shadow: 0 30px 80px rgba(26, 8, 37, 0.28);
}

body .person-modal__close {
  position: absolute;
  top: 22px;
  right: 24px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--purple);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s ease;
}
body .person-modal__close:hover,
body .person-modal__close:focus-visible { background-color: var(--box-bg-grey); }

body .person-modal__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
  padding-right: 40px;
}
body .person-modal__photo {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}
body .person-modal__name {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  color: var(--e-global-color-primary);
}
body .person-modal__role {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--e-global-color-secondary);
}
body .person-modal__bio { color: var(--e-global-color-primary); }
body .person-modal__bio p { margin: 0 0 1em; line-height: 1.6; }
body .person-modal__bio p:last-child { margin-bottom: 0; }

/* stop the page behind scrolling while the dialog is up */
body.person-modal-open { overflow: hidden; }

@media (max-width: 767px) {
  body .person-modal { padding: 14px; }
  body .person-modal__panel { padding: 28px 22px; border-radius: 18px; }
  body .person-modal__head { gap: 14px; margin-bottom: 20px; }
  body .person-modal__photo { width: 52px; height: 52px; flex-basis: 52px; }
  body .person-modal__name { font-size: 19px; }
}

/* ---------------------------------------------------------------
   Bio trigger buttons
   The person cards stack their contents in a column flexbox, whose default
   align-items: normal stretches the button to the full card width. These size to
   their content instead — label + arrow + padding — so the arrow sits beside the
   text as it does elsewhere on the site.
   --------------------------------------------------------------- */

body .elementor a.e-button-base[href^="#person-"],
body .elementor .partner-slider a.e-button-base {
  align-self: flex-start;
  width: fit-content;
  flex: 0 0 auto;
}

/* --- Person modal: open on click, content fades in when it arrives ---------------- */

/* The panel appears on the click itself; if the bio has not landed yet the head and
   body stay transparent for a moment rather than the whole modal being withheld. */
body .person-modal {
  opacity: 0;
  transition: opacity .18s ease;
}
body .person-modal.is-open { opacity: 1; }

body .person-modal__panel {
  transform: translateY(8px) scale(.985);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1);
}
body .person-modal.is-open .person-modal__panel { transform: none; }

body .person-modal__head,
body .person-modal__bio {
  opacity: 0;
  transition: opacity .2s ease;
}
body .person-modal.is-loaded .person-modal__head,
body .person-modal.is-loaded .person-modal__bio { opacity: 1; }

/* No spinner: Elementor's custom-CSS parser drops parts of ::after rules, which left
   the ring painted permanently. The panel simply fades its content in instead. */


/* The close control is focused when the dialog opens, so the ring only shows for
   keyboard users — otherwise it read as an empty circle sitting on the panel. */
body .person-modal__close:focus { outline: none; }
body .person-modal__close:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}
body .person-modal__close svg { display: block; margin: auto; }

@media (prefers-reduced-motion: reduce) {
  body .person-modal,
  body .person-modal__panel,
  body .person-modal__head,
  body .person-modal__bio { transition: none; }
}

/* ---------------------------------------------------------------
   Insight header
   Matches the resource singles, which sit on .resource-hero at 440px. The band
   carries the height itself so the space is part of the header rather than a
   percentage margin on the article, which varied with viewport width.
   --------------------------------------------------------------- */

body .elementor .insight-hero {
	min-height: 440px;
}

/* Breadcrumb pinned to the top as on the resource heroes (26px down), with the share
   buttons and title centred in the space beneath it. The auto margins split the free
   space above and below that pair rather than spreading all three items apart. */
body .elementor .insight-hero > .e-con-inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: inherit;
	padding-top: 26px;
}
body .elementor .insight-hero > .e-con-inner > :first-child,
body .elementor .insight-hero > .e-con-inner > :last-child {
	margin-bottom: auto;
}

@media (max-width: 767px) {
	body .elementor .insight-hero {
		min-height: 320px;
	}
}


/* --- LinkedIn link in the person modal ------------------------------------- */

body .person-modal__linkedin {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	align-self: flex-start;
	padding: 6px 12px 6px 10px;
	border: 1px solid var(--grey-border-color);
	border-radius: 40px;
	color: var(--purple);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease;
}
body .person-modal__linkedin:hover,
body .person-modal__linkedin:focus-visible {
	background-color: var(--box-bg-grey);
	border-color: var(--purple);
}
body .person-modal__linkedin svg {
	display: block;
	flex: 0 0 auto;
}

@media (max-width: 767px) {
	body .person-modal__linkedin-label { display: none; }
	body .person-modal__linkedin { padding: 6px; }
}


/* ---------------------------------------------------------------
   Hero boxed text
   The copy aligns to the 1300px container, like every other section, instead of
   sitting on the 20px viewport gutter — on a wide screen it was 283px adrift.
   The image stays in normal flow - pinning it to the edge cropped the blob, and showing
   it whole is the point of this hero - but it is held to the container on the right so the
   row does not overhang.
   --------------------------------------------------------------- */

@media (min-width: 1025px) {
	body:not(.elementor-editor-active) .elementor .module-hero .hero-copy {
		margin-inline-start: max(calc((100% - 1300px) / 2), 24px);
		padding-inline: 0;
	}
	/* The image ran to the viewport edge, overhanging the container by the same amount the
	   copy is inset. Mirroring the inset on the media holds the whole row to the 1300px
	   column. The blob keeps its aspect ratio, so it narrows rather than cropping. */
	body:not(.elementor-editor-active) .elementor .module-hero .hero-media {
		margin-inline-end: max(calc((100% - 1300px) / 2), 24px);
	}
}

/* ---------------------------------------------------------------
   Resource header tags
   Dosage form and service area, sat under the breadcrumb so the metadata groups
   together and the title block stays the message. Same teal, bullet-separated
   treatment as the Resource Centre cards.
   --------------------------------------------------------------- */

body .elementor .resource-hero__terms {
	/* the column puts a 22px gap above this widget; -8 leaves 14px under the button */
	margin-top: -8px;
	line-height: 1.2;
}
/* Pills, each linking back to the Resource Centre filtered by that term
   (FacetWP deep link, built in upperton-resources.php). */
body .elementor .resource-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 13px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}
body .elementor .resource-terms .resource-term {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	line-height: 1.35;
	color: var(--teal);
	text-decoration: none;
	box-shadow: inset 0 0 0 1px currentColor;
	transition: background-color 0.15s ease, color 0.15s ease;
}
body .elementor .resource-terms .resource-term:hover,
body .elementor .resource-terms .resource-term:focus-visible {
	background: var(--teal);
	color: #fff;
}

/* ---------------------------------------------------------------
   Mega menu full-bleed panel
   The menu sits inside the header-s 1300px boxed container, so a panel positioned
   against it is only as wide as the menu. Making the header row the positioned
   ancestor lets the panel span the full row instead. 100vw is deliberately avoided:
   it includes the scrollbar and forced a horizontal scroll.
   --------------------------------------------------------------- */

@media (min-width: 1025px) {
	body .elementor-26628 > .e-con {
		position: relative;
	}
	body .elementor-26628 .boxed-container,
	body .elementor-26628 .elementor-widget-shortcode,
	body #mega-menu-wrap-menu-1,
	body #mega-menu-wrap-menu-1 #mega-menu-menu-1 {
		position: static;
	}
	body #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-megamenu > ul.mega-sub-menu {
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
	}
}
/* ---------------------------------------------------------------
   Mega menu: page overlay and link descriptions
   The plugin's own Page Overlay hangs a 9999px box-shadow off #mega-menu-wrap-menu-1, but
   that wrapper has to stay position:static for the full-bleed panel above, so the shadow
   paints behind the page and is never seen. Hang the same shadow off the header row instead,
   the element the panel is already anchored to. A box-shadow draws outside the border box,
   so the header itself stays lit and everything around it dims.
   --------------------------------------------------------------- */

@media (min-width: 1025px) {
	body .elementor-26628 > .e-con {
		z-index: 100;
		transition: box-shadow 0.2s ease-in-out;
		transition-delay: 0s;
	}
	body .elementor-26628 > .e-con:has(#mega-menu-menu-1 > li.mega-toggle-on) {
		box-shadow: 0 0 0 9999px rgba(26, 8, 37, 0.34);
		transition-delay: 0.15s;
	}
}

/* Sub-text under a panel link. WordPress calls this the menu item description and the client
   edits it in Appearance > Menus; the plugin gives it no theme controls, so style it here. */
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .mega-description-group .mega-menu-description {
	font-size: 12.5px;
	font-weight: 400;
	font-style: normal;
	line-height: 1.35;
	color: rgb(110, 101, 117);
	text-transform: none;
	letter-spacing: 0;
	margin: 3px 0 0;
}
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-tabbed > ul.mega-sub-menu > li > a.mega-menu-link .mega-description-group .mega-menu-description {
	font-size: 11.5px;
}

/* The plugin's Panel Width (Inner) only reaches grid rows, so the tabbed Solutions panel
   ignores it: the rail spans the whole row and each tab's contents are absolutely positioned
   252px from the panel's left edge. Padding on the panel cannot move either, because an
   absolutely positioned child measures from the padding box, so offset both by hand to line
   the panel up with the site's 1300px column. */
@media (min-width: 1025px) {
	body #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-tabbed > ul.mega-sub-menu {
		padding-block: 26px 30px;
	}
	body #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item {
		width: calc(max((100% - 1300px) / 2, 24px) + 252px);
		padding-left: max((100% - 1300px) / 2, 24px);
	}
	body #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-tabbed > ul.mega-sub-menu > li.mega-menu-item > ul.mega-sub-menu {
		left: calc(max((100% - 1300px) / 2, 24px) + 252px) !important;
		right: max((100% - 1300px) / 2, 24px) !important;
		width: auto !important;
	}
}

/* On desktop the plugin's hardcoded 15px on each panel item is the column gutter. On mobile
   the columns stack, so it lands on top of the link's own padding and leaves ~30px of dead
   space between every accordion link. Keep the horizontal inset, drop the vertical. */
@media (max-width: 1024px) {
	body #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
		padding: 0 20px;
	}
}

/* Pro's off-canvas adds its own close button at the panel edge, right on top of the burger,
   which has already animated into a cross. Two crosses 20px apart. Keep the burger, since
   that is the control the visitor just tapped. */
@media (max-width: 1024px) {
	body #mega-menu-wrap-menu-1 .mega-menu-toggle.mega-menu-open ~ button.mega-close {
		display: none;
	}
}

/* ---------------------------------------------------------------
   Mega menu panel blocks
   Markup comes from the "Upperton: menu panel block" widget (mu-plugins/upperton-mega-menu.php),
   placed in a grid column so the client edits the copy in the Mega Menu editor. Two layouts:
   `promo` is the card in the narrow right-hand column, `intro` is the lede above the links.
   Sizes follow the prototype.
   --------------------------------------------------------------- */

body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-block p {
	margin: 0;
}
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgb(110, 101, 117);
	line-height: 1.3;
}
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-heading {
	font-size: 19px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: var(--e-global-color-primary, rgb(26, 8, 37));
	text-wrap: balance;
}
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-body {
	font-size: 14px;
	line-height: 1.5;
	color: rgb(110, 101, 117);
}
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--purple, rgb(97, 0, 108));
	text-decoration: none;
}
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-link:hover {
	gap: 11px;
}

/* the lede above a panel's links */
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-intro {
	padding: 0 0 4px;
}
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-intro .upp-panel-eyebrow {
	margin-bottom: 12px;
}
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-intro .upp-panel-heading {
	margin-bottom: 6px;
}

/* the card in the right-hand column */
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-promo {
	background: rgb(246, 242, 246);
	border-radius: 14px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	height: 100%;
}
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-promo .upp-panel-eyebrow {
	color: var(--purple, rgb(97, 0, 108));
}
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-promo .upp-panel-heading {
	font-size: 16px;
}
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-promo .upp-panel-body {
	font-size: 13px;
}
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-promo .upp-panel-link {
	margin-top: auto;
}

/* The plugin gives a widget column the same 15px gutter as a links column; the promo needs a
   rule of its own so the card sits against the panel's right edge with a visible divider. */
@media (min-width: 1025px) {
	body #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column:has(.upp-panel-promo) {
		padding-left: 26px;
		border-left: 1px solid rgb(227, 220, 230);
	}
}

/* ---------------------------------------------------------------
   Mega menu link hover
   The soft pill comes from the theme (second-level hover background + 9/12 padding); the
   plugin has no radius control for it, and the 15px it hardcodes on each panel item would
   push the text 27px in, so both are handled here.
   --------------------------------------------------------------- */

@media (min-width: 1025px) {
	body #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
		padding: 0 0 2px;
	}
	/* the promo column keeps its inset - it is a card, not a link list */
	body #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column:has(.upp-panel-block) > ul.mega-sub-menu > li.mega-menu-item {
		padding: 0;
	}
}
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
	border-radius: 8px;
	transition: background-color 0.14s ease, color 0.14s ease;
}
/* only the title takes the brand colour; the sub-text stays muted, as in the prototype */
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 a.mega-menu-link:hover .mega-description-group .mega-menu-description {
	color: rgb(110, 101, 117);
}

/* ---------------------------------------------------------------
   Mega menu chips
   The prototype's filter/stage "chips" are ordinary menu items - the client adds or removes
   one in Appearance > Menus. A column carrying the class `upp-col-chips` draws its links as
   pills instead of stacked rows. The widget blocks in the same column stay full width.
   The .elementor-kit-7 mirrors the plugin's own (2 ids, 5 classes) because that rule sets
   width: 100% on every panel item; a shorter .elementor-kit-7 loses to it.
   --------------------------------------------------------------- */

body #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column.upp-col-chips > ul.mega-sub-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column.upp-col-chips > ul.mega-sub-menu > li.mega-menu-item {
	width: auto;
	flex: 0 0 auto;
	padding: 0;
}
/* the intro blocks, contact details and the search box need the full row, not a pill */
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column.upp-col-chips > ul.mega-sub-menu > li.mega-menu-item:has(.upp-panel-block),
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column.upp-col-chips > ul.mega-sub-menu > li.mega-menu-item:has(.upp-panel-search) {
	flex: 1 0 100%;
	margin-bottom: 2px;
}
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column.upp-col-chips > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
	display: inline-flex;
	align-items: center;
	padding: 7px 13px;
	border-radius: 999px;
	background: rgb(246, 242, 246);
	box-shadow: inset 0 0 0 1px rgb(227, 220, 230);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
}
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column.upp-col-chips > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link:hover {
	background: rgb(236, 231, 236);
	box-shadow: inset 0 0 0 1px var(--purple, rgb(97, 0, 108));
	color: var(--purple, rgb(97, 0, 108));
}

/* a widget block sitting in a chips column must not inherit the pill treatment */
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column.upp-col-chips .upp-panel-block {
	white-space: normal;
}

/* a block that follows a run of chips needs air above it (the contact details, for instance) */
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-column.upp-col-chips > ul.mega-sub-menu > li.mega-menu-item:not(:has(.upp-panel-block, .upp-panel-search)) + li.mega-menu-item:has(.upp-panel-block) {
	margin-top: 18px;
}

/* ---------------------------------------------------------------
   Mega menu panel: vertical anchor
   The plugin positions the panel `top: 64px` - the height of the menu list itself. That was
   right when the list was the positioned ancestor, but the full-bleed panel above resolves
   against the 88px header row instead, so the panel opened 24px up inside the header and its
   top padding was swallowed. 100% is the header row's own height, whatever it changes to.
   --------------------------------------------------------------- */

@media (min-width: 1025px) {
	body #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-megamenu > ul.mega-sub-menu,
	body #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-tabbed > ul.mega-sub-menu {
		top: 100% !important;
	}
}

/* ---------------------------------------------------------------
   Mega menu search box
   A plain GET form aimed at /resources/ with FacetWP's `_search` facet name, so it filters
   the existing resources listing - there is no separate results page to build.
   --------------------------------------------------------------- */

body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-search {
	display: flex;
	align-items: stretch;
	gap: 0;
	margin: 0 0 18px;
	max-width: 420px;
	border-radius: 999px;
	background: rgb(246, 242, 246);
	box-shadow: inset 0 0 0 1px rgb(227, 220, 230);
	overflow: hidden;
	transition: box-shadow 0.15s ease;
}
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-search:focus-within {
	box-shadow: inset 0 0 0 1px var(--purple, rgb(97, 0, 108));
	background: #fff;
}
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 10px 16px;
	font-size: 13.5px;
	line-height: 1.3;
	color: var(--e-global-color-primary, rgb(26, 8, 37));
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-search input[type="search"]::placeholder {
	color: rgb(110, 101, 117);
	opacity: 1;
}
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-search button {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	padding: 0 16px;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
	color: var(--purple, rgb(97, 0, 108));
}
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-search button:hover {
	background: rgb(236, 231, 236);
}

/* ---------------------------------------------------------------
   Header: the tight band just above the burger breakpoint
   Logo + menu + CTA need about 1085px at full size, but the boxed container is only ~990px
   at 1025px wide, so the nav wrapped to a second row and the header grew to 120px. Trim the
   nav's own padding and type, and the CTA, so it holds one row down to the breakpoint.
   Below 1025 the burger takes over, so nothing here needs to survive further down.
   --------------------------------------------------------------- */

@media (min-width: 1025px) and (max-width: 1199px) {
	body #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {
		padding: 0 10px;
		font-size: 15px;
	}
	body .elementor-26628 .btn-purple.btn-arrow {
		padding-inline: 14px;
		font-size: 14px;
	}
	/* the arrow disc is the widest part of the CTA and the least load-bearing */
	body .elementor-26628 .btn-purple.btn-arrow .e-button-icon,
	body .elementor-26628 .btn-purple.btn-arrow svg {
		width: 22px;
		height: 22px;
	}
}

/* With the nav collapsed to a burger, its column still holds the middle of a three-part
   header, leaving the toggle stranded in the centre. Push it to the column's right edge so
   it sits beside the CTA. */
@media (max-width: 1024px) {
	body .elementor-26628 .elementor-widget-shortcode:has(#mega-menu-wrap-menu-1) {
		margin-left: auto;
	}
	body #mega-menu-wrap-menu-1 .mega-menu-toggle {
		justify-content: flex-end;
		margin-right: 16px;
	}
}

/* ---------------------------------------------------------------
   Policy pages
   Long-form legal documents (privacy, whistleblower, criminal offence, ESG) recreated from
   the old site. The header is the text-only hero; the body is a classic section, which
   otherwise sits on Elementor's default content width rather than the site's container.
   --------------------------------------------------------------- */

@media (min-width: 1025px) {
	body .elementor .policy-body {
		padding-inline: max(calc((100% - 1300px) / 2), 24px);
	}
	body .elementor .policy-body > .elementor-container {
		max-width: none;
	}
	/* the column carries Elementor's own 10px, which puts the prose 10px inside the hero */
	body .elementor .policy-body > .elementor-container > .elementor-column > .elementor-widget-wrap {
		padding-inline: 0;
	}
}
/* The hero has no bottom padding of its own, so the prose started hard against it. */
body .elementor .policy-body {
	padding-block: 56px 80px;
}
@media (max-width: 1024px) {
	body .elementor .policy-body {
		padding-block: 40px 60px;
	}
}

/* A 1300px measure is far too wide for continuous prose; cap the column instead. */
body .elementor .policy-body .elementor-widget-text-editor {
	max-width: 820px;
}
body .elementor .policy-body .elementor-widget-text-editor p,
body .elementor .policy-body .elementor-widget-text-editor li {
	line-height: 1.65;
	margin-bottom: 1em;
}
body .elementor .policy-body .elementor-widget-text-editor strong {
	display: inline-block;
	margin-top: 0.6em;
}

/* ---------------------------------------------------------------
   Body copy links
   Teal fails on contrast: 2.15:1 against the page ground, where WCAG AA wants 4.5:1 for
   body text. Brand purple is 10.97:1, so it passes comfortably.
   The underline is not decoration. Purple sits at almost the same lightness as the body ink
   (1.56:1 between them), so colour alone would no longer tell a reader that something is a
   link - teal at least managed that. The underline is what carries the signal.
   Scoped to prose widgets, so buttons, nav, cards and the footer menus keep their own styling.
   --------------------------------------------------------------- */

body .elementor .elementor-widget-text-editor a:not(.e-button-base):not([class*="btn-"]),
body .elementor .e-paragraph a:not(.e-button-base):not([class*="btn-"]),
body .elementor .policy-body a:not(.e-button-base):not([class*="btn-"]) {
	color: var(--purple);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in srgb, var(--purple) 45%, transparent);
	transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
body .elementor .elementor-widget-text-editor a:not(.e-button-base):not([class*="btn-"]):hover,
body .elementor .e-paragraph a:not(.e-button-base):not([class*="btn-"]):hover,
body .elementor .policy-body a:not(.e-button-base):not([class*="btn-"]):hover {
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}
/* Keyboard users get the same affordance, plus the browser's own focus ring. */
body .elementor .elementor-widget-text-editor a:focus-visible,
body .elementor .e-paragraph a:focus-visible,
body .elementor .policy-body a:focus-visible {
	text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------
   Service cards (thank you page)
   Cards built on the Columns module but carrying an icon and a button rather than a counter.
   The :has(> .e-image-base) scope keeps this off the counter-based cards the module is used for
   elsewhere. Note the rendered class is `e-div-block-base`, not the `e-div-block` elType.
   The card is display:block by default, so the button - which is display:flex - stretched to
   the full column width instead of sizing to its label.
   --------------------------------------------------------------- */

body .elementor .e-div-block-base:has(> .e-image-base) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}
/* the old site draws these tiles at ~85px; the default render came out noticeably smaller */
body .elementor .e-div-block-base:has(> .e-image-base) > .e-image-base,
body .elementor .e-div-block-base:has(> .e-image-base) > .e-image-base img {
	width: 84px;
	height: 84px;
}
/* the call to action wants a little air above it, the rest reads as one block */
body .elementor .e-div-block-base:has(> .e-image-base) > .e-button-base {
	width: auto;
	align-self: flex-start;
	margin-top: 8px;
}
/* room between the two rows of cards, matching the 40px they already have side to side */
body .elementor .module-columns:has(.e-div-block-base > .e-image-base) {
	gap: 52px;
}

/* ---------------------------------------------------------------
   Person modal: LinkedIn pill with no URL
   The script correctly sets `hidden` on people who have no LinkedIn, but `display: inline-flex`
   above outranks the browser's own `[hidden] { display: none }`, so the pill still drew as an
   empty 33x33 stub. Anything that sets display on an element that can be hidden needs this.
   --------------------------------------------------------------- */

body .person-modal__linkedin[hidden] {
	display: none !important;
}

/* ===============================================================
   Events: header line, and the body content imported from the old site
   (speaker/expert cards, key points, topic pills, figures, gallery, video).
   Imported as plain HTML into the event's content editor; these rules give it the
   site's look. Only applies inside the event/resource body.
   =============================================================== */

/* hero line under the title: date, then venue and city */
body .elementor .resource-hero .event-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; font-size: 16px; color: rgba(26, 8, 37, .70); }
body .elementor .resource-hero .event-meta__date { font-weight: 600; color: var(--dark_purple); }
body .elementor .resource-hero .event-meta__date + .event-meta__place::before { content: "•"; margin-right: 14px; opacity: .45; }

/* room between the header and the event's content */
body.single-event .elementor .resource-body { padding-block: 64px 48px; }
@media (max-width: 767px) {
	body.single-event .elementor .resource-body { padding-block: 40px 32px; }
}

/* headings in imported copy get room above them */
body .elementor .resource-body .elementor-widget-theme-post-content h2 { margin-top: 1.6em; margin-bottom: .5em; }
body .elementor .resource-body .elementor-widget-theme-post-content > .elementor-widget-container > h2:first-child,
body .elementor .resource-body .elementor-widget-theme-post-content h2:first-child { margin-top: 0; }

/* key topics */
body .resource-body .event-topics { list-style: none; padding: 0; margin: 16px 0 32px; display: flex; flex-wrap: wrap; gap: 8px; }
body .resource-body .event-topics li { margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(97, 0, 108, .08); color: var(--dark_purple); font-size: 13px; font-weight: 500; line-height: 1.4; }

/* reasons to attend / key points */
body .resource-body .event-points { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: 24px 0 40px; }
body .resource-body .event-point { background: var(--bg-grey); border-radius: 16px; padding: 22px 24px; }
body .resource-body .event-point h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.35; color: var(--dark_purple); }
body .resource-body .event-point p { margin: 0; font-size: 15px; }

/* meet our experts / speakers */
body .resource-body .event-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 28px 24px; margin: 24px 0 40px; }
/* speakers with bios: side by side, filling the row, one column only on phones */
body .resource-body .event-people:has(p) { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 32px 40px; }
@media (max-width: 767px) {
	body .resource-body .event-people:has(p) { grid-template-columns: 1fr; }
}
body .resource-body .event-person { margin: 0; }
body .resource-body .event-person figcaption { font-style: normal; }
body .resource-body .event-person img { display: block; width: 96px; height: 96px; margin-bottom: 12px; border-radius: 50%; object-fit: cover; }
body .resource-body .event-person strong { display: block; font-size: 16px; line-height: 1.35; color: #1A0825; }
body .resource-body .event-person span { display: block; margin-top: 2px; font-size: 14px; color: rgba(26, 8, 37, .65); }
body .resource-body .event-person p { margin: 10px 0 0; font-size: 14px; }

/* pictures, quotes, video, gallery */
body .resource-body .event-figure { margin: 24px 0; }
body .resource-body .event-figure img { display: block; border-radius: 20px; }
body .resource-body blockquote { margin: 24px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--dark_purple); }
body .resource-body blockquote cite { display: block; margin-top: 8px; font-size: 14px; font-style: normal; opacity: .7; }
body .resource-body iframe[src*="youtube"], body .resource-body iframe[src*="vimeo"] { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; margin: 24px 0; border-radius: 16px; }
body .resource-body .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; }
body .resource-body .gallery br { display: none; }
body .resource-body .gallery .gallery-item { width: auto !important; margin: 0 !important; }
body .resource-body .gallery img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 0 !important; border-radius: 12px; }
@media (max-width: 767px) {
	body .resource-body .gallery { grid-template-columns: repeat(2, 1fr); }
}
/* Events listing: Event Type filter as a row of pills above the grid */
body .elementor .resource-hub--events .event-filter-row { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 12px 0; }
body .elementor .resource-hub--events .event-filter-row > .elementor-widget { width: auto; max-width: 100%; }
body .elementor .resource-hub--events .event-filter-row .facet-count { margin-left: auto; }
body .resource-hub--events .event-filters .facetwp-facet { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
body .elementor .resource-hub--events .event-filter-row .event-filters--when { margin-right: 12px; padding-right: 20px; border-right: 1px solid rgba(97, 0, 108, .18); }
body .resource-hub--events .event-filters .facetwp-radio,
body .resource-hub--events .event-filters .facetwp-checkbox { display: inline-flex; align-items: center; margin: 0; padding: 8px 16px; border: 1px solid rgba(97, 0, 108, .25); border-radius: 999px; background: #fff none; color: var(--dark_purple); font-size: 14px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
body .resource-hub--events .event-filters .facetwp-checkbox::before, body .resource-hub--events .event-filters .facetwp-checkbox::after { display: none; }
body .resource-hub--events .event-filters .facetwp-checkbox:hover { border-color: var(--dark_purple); }
body .resource-hub--events .event-filters .facetwp-checkbox.checked { background: var(--dark_purple); border-color: var(--dark_purple); color: #fff; }
body .resource-hub--events .event-filters .facetwp-counter { margin-left: 6px; opacity: .6; }
body .resource-hub--events .event-filters .facetwp-toggle { display: none; }

/* =============================================================== end Events */

/* ===============================================================
   bg-purple-gradient: straight diagonal
   Replaces the three-layer version (two radials over a linear), whose top-right radial put a
   hard purple burn in the corner. Brand teal at the top left, blue-grey midpoint, purple at
   the bottom right. Defined last so it overrides the original definition above.
   =============================================================== */
body .elementor .bg-purple-gradient {
	--card-gradient: linear-gradient(135deg, #61B5B8 0%, #7C8AB6 48%, #6A2E80 100%);
}
/* =============================================================== end bg-purple-gradient diagonal */

/* ---------------------------------------------------------------
   Resource Centre search  (container `resource-searchbar`, widget `resource-search`)
   The same pill as the mega menu's search box, run the full width of the listing.
   It lives in a container of its OWN, directly above the listing, so the filters/results row
   below is untouched - that row stays a two-column flex row and must never be made to wrap,
   or the results column drops beneath the filters.
   --------------------------------------------------------------- */
/* The band carries the grey and the top padding the listing used to own, so the vertical
   rhythm either side of the search box is unchanged. */
body .elementor .resource-searchbar {
	background-color: var(--bg-grey);
	padding-block: 70px 0;
}
body .elementor .resource-searchbar .resource-search {
	width: 100%;
}
/* the listing below keeps its own bottom padding, but its top padding becomes the gap
   under the search box */
body .elementor .resource-hub {
	padding-block-start: 34px;
}
body .resource-search .facetwp-facet {
	margin: 0;
	padding: 0;
	border: 0;
}
/* the pill itself - matches the mega menu box, at listing scale */
body .resource-search .facetwp-input-wrap {
	position: relative;
	display: flex;
	align-items: stretch;
	width: 100%;
	border-radius: 999px;
	background: rgb(246, 242, 246);
	box-shadow: inset 0 0 0 1px rgb(227, 220, 230);
	overflow: hidden;
	transition: box-shadow .15s ease, background-color .15s ease;
}
body .resource-search .facetwp-input-wrap:focus-within {
	box-shadow: inset 0 0 0 1px var(--purple, rgb(97, 0, 108));
	background: #fff;
}
body .resource-search input.facetwp-search {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 15px 56px 15px 24px;   /* room on the right for the icon */
	font-size: 15px;
	line-height: 1.3;
	color: var(--e-global-color-primary, rgb(26, 8, 37));
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
body .resource-search input.facetwp-search::placeholder {
	color: rgb(110, 101, 117);
	opacity: 1;
}
/* FacetWP's own icon, moved to the right-hand end and put in brand purple. It doubles as the
   loading spinner, so it is left in place rather than hidden. */
body .resource-search .facetwp-icon {
	position: absolute;
	inset-inline-end: 20px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	color: var(--purple, rgb(97, 0, 108));
}
body .resource-search .facetwp-icon::before {
	color: inherit;
}
@media (max-width: 767px) {
	body .resource-search input.facetwp-search {
		padding: 13px 50px 13px 20px;
		font-size: 14px;
	}
}
/* --------------------------------------------- end Resource Centre search --- */
/* ---------------------------------------------------------------
   Mega menu panel stacking
   The search field and its arrow button inherit the theme's `transition: all .3s` for
   form controls. "all" includes visibility, so when Mega Menu hides a closing panel with
   visibility: hidden, those two controls animated to hidden over 0.3s instead of going
   at once, and lingered over the next panel (Resources -> About us).
   Limit them to the properties that actually change on hover and focus.
   --------------------------------------------------------------- */
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-search input,
body #mega-menu-wrap-menu-1 #mega-menu-menu-1 .upp-panel-search button {
	transition-property: background-color, border-color, color, box-shadow;
	transition-duration: .15s;
	transition-timing-function: ease;
}
/* --------------------------------------------- end Mega menu panel stacking --- */

/* ---------------------------------------------------------------
   Call to Action cards (Elementor Pro widget, used in the old insight posts)
   Imported with the old site's button styling (Manrope, grey, 20px radius, a blue hover),
   saved per widget, so these .elementor-kit-7s are deliberately stronger than the widget's own.
   The cards sit three across in the article column, which left each ~140px wide; the row
   now wraps so a card never drops below 260px (in the article column that stacks them), and the content padding is a little tighter.
   --------------------------------------------------------------- */
body .elementor :is(.e-con, .e-con-inner):has(> .e-con > .elementor-widget-call-to-action) {
	flex-wrap: wrap;
	gap: 20px;
}
body .elementor :is(.e-con, .e-con-inner):has(> .e-con > .elementor-widget-call-to-action) > .e-con {
	flex: 1 1 260px;
	min-width: 0;
}
body .elementor .elementor-widget-call-to-action .elementor-cta .elementor-cta__content {
	padding: 22px 20px 24px;
}
body .elementor .elementor-widget-call-to-action .elementor-cta .elementor-cta__title {
	font-family: inherit;
	margin-bottom: 8px;
}
body .elementor .elementor-widget-call-to-action .elementor-cta .elementor-cta__description {
	margin-bottom: 16px;
}
body .elementor .elementor-widget-call-to-action .elementor-cta .elementor-cta__button.elementor-button {
	display: inline-flex;
	align-items: center;
	padding: 9px 20px;
	border: 0;
	border-radius: 999px;
	background-color: var(--purple, #61006C);
	color: #FFFFFF;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color .25s ease;
}
body .elementor .elementor-widget-call-to-action .elementor-cta:hover .elementor-cta__button.elementor-button {
	background-color: #772481;
	color: #FFFFFF;
}
/* --------------------------------------------- end Call to Action cards --- *//* End custom CSS */