@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap');
/* --------------------------------------------
   Global Container and Breakpoints (2025 Modern Layout)
---------------------------------------------*/
:root {
  --site-max-width: 1440px;
  --site-padding: 1rem;
  --footer-bg: #333192;
  --footer-text-color: #ffffff;
  --button-gradient-start: #FF512F;
  --button-gradient-mid: #F09819;
}


/* Base container used for centering sections */
.container,
.container_12,
.cnPrimaryContentContainer {
  width: 100%;
  max-width: var(--site-max-width);
  margin: 0 auto;
  padding: 0 var(--site-padding);
  box-sizing: border-box;
}


/* Ensure inner grid divisions flow full width */
.container_12 > div,
.cnPrimaryContentContainer > div {
  width: auto;
}


/* Breakpoints */
@media (min-width: 640px)  { /* sm */ }
@media (min-width: 768px)  { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }
@media (min-width: 1440px) { /* 2xl */ }


/* --------------------------------------------
   Page Title / H1 Responsiveness
   - Makes the top callout H1 full-width and responsive
---------------------------------------------*/
.wa-cms-page-content .wa-widget-heading h1,
.WaBannerBody h1,
.WaGadgetFirst.WaGadgetContent h1,
.hero__title {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0 0 0.5em 0;
  line-height: 1.1;
  /* Scales between ~28px and ~48px depending on viewport */
  font-size: clamp(1.75rem, 3.2vw + 0.5rem, 3rem);
  /* Nicer multi-line titles */
  text-wrap: balance;
  /* Avoid awkward mid-word breaks */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
}


/* --------------------------------------------
   Footer Styles
---------------------------------------------*/
.footerContentHolder p {
  color: inherit;
}


.cnFooterSeparator {
  display: block;
  visibility: visible;
  background: none;
}
.cnFooterSeparator .d1 {
  width: 100%;
  max-width: var(--site-max-width);
  margin: 0 auto;
}
.cnFooterSeparator .d1 .d1 {
  width: auto;
}


.cnFooterContainer {
  width: 100%;
  max-width: var(--site-max-width);
  margin: 0 auto;
  height: auto;
  padding: 2rem 0;
  background: none;
}


.cnFooterContainer .d1FooterContainer,
.cnFooterContainer .d2FooterContainer,
.cnFooterContainer .d3FooterContainer {
  width: 100%;
}
.cnFooterContainer .d1FooterContainer .d1,
.cnFooterContainer .d2FooterContainer .d2,
.cnFooterContainer .d3FooterContainer .d3 {
  width: auto;
}


.cnFooterContainer .innerFooterContainer {
  float: left;
  width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}
.cnFooterContainer .innerFooterContainer .inner {
  padding: 0;
}


.zoneFooterOuter {
  background-color: var(--footer-bg);
}


.zoneFooterOuter .container_12 > div {
  background-color: var(--footer-bg);
}


.zoneFooterOuter .zoneFooterInner:before,
.zoneFooterOuter .zoneFooterInner:after {
  display: none;
}


.footerContentHolder {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--site-padding);
  background: none;
  box-sizing: border-box;
}
.footerContent {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  background-color: var(--footer-bg);
  color: var(--footer-text-color);
  padding: 2rem;
  box-sizing: border-box;
}


/* --------------------------------------------
   Twitter Widget Reset
---------------------------------------------*/
#twtr-widget-1 {
  background: none;
  color: inherit;
}
#twtr-widget-1 .twtr-avatar {
  display: block;
}
#twtr-widget-1 .twtr-user {
  display: inline;
}
#twtr-widget-1 .twtr-tweet-text {
  margin-left: 40px;
}
#twtr-widget-1 .twtr-doc,
#twtr-widget-1 .twtr-hd a,
#twtr-widget-1 h3,
#twtr-widget-1 h4 {
  background-color: #f15d22 !important;
  color: #ffffff !important;
}
#twtr-widget-1 .twtr-tweet a {
  color: #473d8b !important;
}
#twtr-widget-1 .twtr-bd,
#twtr-widget-1 .twtr-timeline i a,
#twtr-widget-1 .twtr-bd p {
  color: #000000 !important;
}
#twtr-widget-1 .twtr-new-results,
#twtr-widget-1 .twtr-results-inner,
#twtr-widget-1 .twtr-timeline {
  background: #ffffff !important;
}


/* --------------------------------------------
   Forum Button Styles
---------------------------------------------*/
div.forumBtn {
  width: 100%;
  max-width: 200px;
  margin: 1rem auto;
  text-align: center;
}
div.forumBtn a {
  display: inline-block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  background: linear-gradient(to bottom, #eeeeee 0%, #cccccc 100%);
  font-weight: bold;
  color: var(--footer-bg) !important;
  border-radius: 4px;
  transition: background 0.3s, color 0.3s;
}
div.forumBtn a:hover {
  color: #000000 !important;
}


li#idForumMessage_3039347,
li#idForumMessage_3039346,
li#idForumMessage_3039345,
li#idForumMessage_3100311,
li#idForumMessage_3110179,
li#idForumMessage_3110543,
li#idForumMessage_3316749,
li#idForumMessage_3316748,
li#idForumMessage_3316747,
li#idForumMessage_3316746,
div.lastReply span {
  display: none !important;
}


.statPlanForumCerti div#idSubscribe,
#id_FyFBfzY div#idSubscribe {
  visibility: hidden;
}


/* --------------------------------------------
   Skills Symposium Table & Accordion
---------------------------------------------*/
table.sksymptable td.head {
  color: #ffffff;
  border-radius: 10px;
  background-color: var(--footer-bg);
  text-align: center;
  font-size: 1rem;
  font-weight: bold;
  padding: 0.5rem;
}
table.sksymptable td.three,
table.sksymptable td.two,
table.sksymptable td.one {
  color: #ffffff;
  border-radius: 10px;
  text-align: left;
  vertical-align: top;
  padding: 0.5rem;
}
table.sksymptable td.three { background-color: #F15C22; }
table.sksymptable td.two   { background-color: var(--footer-bg); }
table.sksymptable td.one   { background-color: #ABACBA; }


table.sksymptable td.three:hover { background-color: #BA3F19; }
table.sksymptable td.two:hover   { background-color: #1B1464; }
table.sksymptable td.one:hover   { background-color: #66676f; }


.sksympaccord {
  background-color: var(--footer-bg);
  padding: 1.125rem;
  width: 100%;
  border: none;
  text-align: left;
  font-size: 0.9375rem;
  transition: background 0.4s;
  color: #ffffff;
}
.sksympaccord:hover,
.sksympaccord.active {
  background-color: #66676F;
}
.sksympaccord:after {
  content: '\002B';
  font-weight: bold;
  float: right;
  margin-left: 0.3125rem;
}
.sksympaccord.active:after {
  content: '\2212';
}
.panel {
  padding: 0 1.125rem;
  background-color: #ffffff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}


/* --------------------------------------------
   List Styling
---------------------------------------------*/
li {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.875rem;
}


/* --------------------------------------------
   Login Button
---------------------------------------------*/
.WaGadgetLoginForm .loginContainerWrapper .loginContainerInnerWrapper {
  position: relative;
  display: inline-block;
  padding: 0.75rem;
  background-color: #F15C22;
  border-radius: 4px;
}
.WaGadgetLoginForm .loginContainerWrapper .loginContainerInnerWrapper .loginLink:before {
  border: 2px solid var(--footer-bg);
  border-radius: 50%;
  background-color: var(--footer-bg);
  color: #ffe2e2;
  content: '\f007';
  display: inline-block;
  font: normal 11px FontAwesome;
  height: 1em;
  margin-right: 0.3125rem;
  padding: 0.1875rem;
  text-align: center;
  width: 1em;
}
.WaGadgetLoginForm .loginContainerWrapper .loginContainerInnerWrapper .loginLink,
.WaGadgetLoginButton .loginBoxLinkContainer .loginBoxLinkButton {
  color: #FFFFFF;
  font-weight: bold;
  font-size: 0.875rem;
  text-decoration: none;
}


/* --------------------------------------------
   Custom Orange Button (Patrick's Style)
---------------------------------------------*/
.button-87 {
  display: inline-block;
  margin: 0.3125rem;
  padding: 0.625rem 1.25rem;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: #ffffff !important;
  border: none;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  box-shadow: 0px 0px 14px -7px var(--button-gradient-mid);
  background-image: linear-gradient(45deg, var(--button-gradient-start) 0%, var(--button-gradient-mid) 51%, var(--button-gradient-start) 100%);
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
}
.button-87:hover {
  background-position: right center;
}
.button-87:active {
  transform: scale(0.95);
}


/* --------------------------------------------
   Responsive Adjustments
---------------------------------------------*/
@media (max-width: 640px) {
  .cnFooterContainer,
  .footerContentHolder,
  div.forumBtn {
    padding: 0.5rem;
  }
}
/* ----------------------------------------------------------
   Make the top banner/header auto-height on small screens
---------------------------------------------------------- */
@media only screen and (max-width: 600px) {
  /* 1) Target the exact container around your H1/P/Button. 
     Below are the three most common Wild Apricot wrappers;
     you may need to tweak this selector if your header’s in a different class. */
  
  /* If your header is inside a “banner” gadget: */
  .WaBannerBody,
  /* If your header is a “GadgetFirst” wrapper: */
  .WaGadgetFirst.WaGadgetContent,
  /* In case it’s inside a generic “content” div: */
  .wa-cms-page-content .wa-widget-heading {
    height: auto !important;
    overflow: visible !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }


  /* 2) Reduce the H1 font size slightly so it doesn’t overflow: */
  .WaBannerBody h1,
  .WaGadgetFirst.WaGadgetContent h1,
  .wa-cms-page-content .wa-widget-heading h1 {
    font-size: 24px !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }


  /* 3) Reduce the paragraph font size so it wraps neatly: */
  .WaBannerBody p,
  .WaGadgetFirst.WaGadgetContent p,
  .wa-cms-page-content .wa-widget-heading p {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin-bottom: 12px !important;
  }


  /* 4) Ensure the “Join Us” button doesn’t sit on top of text: */
  .WaBannerBody .stylizedButton,
  .WaGadgetFirst.WaGadgetContent .stylizedButton,
  .wa-cms-page-content .wa-widget-heading .stylizedButton {
    display: inline-block !important;
    margin-top: 16px !important;
  }
}


/* hide member-only blocks from public, and vice-versa */
.publicContentView .member-only,
.memberContentView .public-only {
  display: none !important;
}


/* show the “Become a member…” button to non-members */
.publicContentView .public-only {
  display: block !important;
}


/* show the “Watch webinar” button to logged-in members */
.memberContentView .member-only {
  display: block !important;
}
/* --- Patrick Solutions Grid --- */
/* ==== SOLUTIONS GRID ==== */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}


.solution-card {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}


.solution-icon img {
  max-width: 200px;
  margin-bottom: 1rem;
}


.solution-title {
  font-size: 1.125rem;
  margin: 0.5rem 0;
}


.solution-title a {
  color: #ff7900;           /* brand link color */
  text-decoration: none;
}


.solution-title a:hover {
  text-decoration: underline;
}


.solution-divider {
  width: 40px;
  border: none;
  height: 2px;
  background-color: #ff7900; /* brand accent */
  margin: 0.75rem auto;
}


.solution-desc {
  font-size: 0.9rem;
  color: #444;
  margin-bottom: 1.25rem;
  line-height: 1.4;
}


.btn-quote {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background-color: #ff7900; /* brand CTA */
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: background-color 0.2s ease;
}


.btn-quote:hover {
  background-color: #e67300; /* darker on hover */
}






/* --- Patrick slider customization ---*/
/* ───────────────────────────────────────────────────
   Law-Programs Slider
──────────────────────────────────────────────────── */
.law-slider {
  margin: 2em auto;
  max-width: 1000px;
}
.slider-title {
  font-size: 1.5rem;
  margin-bottom: 0.5em;
  text-align: center;
  color: #005f9e;
}
/* container for buttons + viewport */
.slider-container {
  position: relative;
}
.slider-viewport {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.slider-track {
  display: flex;
  gap: 1rem;
  padding-bottom: 0.5rem;
  }
.slider-card {
  flex: 0 0 310px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  scroll-snap-align: start;
}
.slider-card img {
  display: block;
  width: 100%;
  height: auto;
}
.card-body {
  padding: 1rem;
}
.card-points {
  display: inline-block;
  font-size: 0.75rem;
  background: #005f9e;
  color: #fff;
  padding: 0.2em 0.6em;
  border-radius: 4px;
  margin-bottom: 0.5em;
}
.card-body h3 {
  font-size: 1rem;
  margin: 0.5em 0;
  line-height: 1.3;
  color: #333;
}
.card-date {
  font-size: 0.85rem;
  color: #666;
  margin-bottom: 0.75em;
}
.card-link {
  font-size: 0.9rem;
  color: #005f9e;
  text-decoration: none;
  font-weight: bold;
}
/* hide native scrollbar */
.slider-viewport::-webkit-scrollbar { display: none; }
.slider-viewport { scrollbar-width: none; -ms-overflow-style: none; }


/* navigation buttons */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,95,158,0.8);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.5em;
  cursor: pointer;
  z-index: 2;
}
.slider-btn.prev { left: 0.5em; }
.slider-btn.next { right: 0.5em; }
/*--- Patrick Slider Start ---*/
/* white-background wrapper */
.logos-carousel-bg-white {
  background: #fff;
  padding: 2em 0;
  overflow: hidden;
}


/* flex container for Slick */
.logos-carousel {
  display: flex;
  align-items: center;
}


/* individual logo slides */
.logos-carousel .logo {
  flex: 0 0 auto;
  margin: 0 1.5em;
}


/* constrain image height */
.logos-carousel .logo img {
  max-height: 60px;
  display: block;
}
/* FAQ accordion styling */
.faq-container {
  max-width: 800px;
  margin: 0 auto;
}


.faq-container h2 {
  font-size: 24pt;
  margin-bottom: 1em;
}


.faq-container details {
  border-bottom: 1px solid #ddd;
  padding: 1em 0;
}


.faq-container summary {
  font-size: 16pt;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  list-style: none;
  padding-right: 1.5em;
}


/* remove default marker in WebKit browsers */
.faq-container summary::-webkit-details-marker {
  display: none;
}


.faq-container summary::after {
  content: "▼";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .2s ease;
  font-size: 12pt;
  color: #f15c22;
}


.faq-container summary[open]::after {
  transform: translateY(-50%) rotate(-180deg);
  color: #f15c22;
}


.faq-container details p {
  margin-top: .5em;
  margin-left: 1em;
  font-size: 12pt;
  line-height: 1.4;
}
/* =========================================
   Custom Patrick Sub-Navigation (.iap2-subnav)
   ========================================= */
  


.iap2-subnav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 319px;
  margin: 0 auto;
  display: table;
  transform: translateY(-50%);
}


.iap2-subnav a {
  position: relative;
  display: table-cell;
  width: 33.333%;
  text-align: left;            /* align text to the left edge */
  padding: 10px 20px;          /* 20px left padding = indent for first letter */
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  color: #ffffff;              /* default link color: white */
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;         /* keep text on one line */
}


/* visited & hover state both orange */
.iap2-subnav a:visited,
.iap2-subnav a:hover {
  color: #f15c22;
}


/* divider between links */
.iap2-subnav a:not(:last-child) {
  padding-right: 20px;         /* extra space to clear the divider */
}
.iap2-subnav a:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 25%;
  right: 10px;
  width: 1px;
  height: 50%;
  background-color: rgba(255,255,255,0.5);
}


/* decorative dots */
.iap2-subnav a::before,
.iap2-subnav a::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.2s ease;
}
.iap2-subnav a::before {
  top: 0; left: 10px;
  width: 6px; height: 6px;
}
.iap2-subnav a::after {
  top: 5px; left: 18px;
  width: 4px; height: 4px;
}


/* dot colors */
.iap2-subnav a:nth-child(1)::before { background: yellow; }
.iap2-subnav a:nth-child(1)::after  { background: red; }
.iap2-subnav a:nth-child(2)::before { background: #00e2ff; }
.iap2-subnav a:nth-child(2)::after  { background: #89ff00; }
.iap2-subnav a:nth-child(3)::before { background: purple; }
.iap2-subnav a:nth-child(3)::after  { background: palevioletred; }


/* reveal dots on hover */
.iap2-subnav a:hover::before,
.iap2-subnav a:hover::after {
  transform: scale(1);
}


/* indicator bar under the first letter */
.iap2-subnav__indicator {
  position: absolute;
  bottom: 0;
  left: 20px;                  /* matches link’s left padding */
  width: 30px;
  height: 3px;
  border-radius: 5px;
  background: #ffffff;
  transition: left 0.2s ease, background 0.2s ease;
}


/* move & recolor indicator on hover */
.iap2-subnav a:nth-child(1):hover ~ .iap2-subnav__indicator {
  left: 20px;
  background: linear-gradient(130deg, yellow, red);
}
.iap2-subnav a:nth-child(2):hover ~ .iap2-subnav__indicator {
  left: calc(33.333% + 33px);
  background: linear-gradient(130deg, #00e2ff, #89ff00);
}
.iap2-subnav a:nth-child(3):hover ~ .iap2-subnav__indicator {
  left: calc(66.666% + 45px);
  background: linear-gradient(130deg, purple, palevioletred);
}
/* Make the description at the top behave like a solution-item */
.solutions-description p {
  display: flex;
  align-items: flex-start;    /* align icon and first line of text */
  text-align: left;           /* text flush left */
  margin: 0 10px 20px;        /* tighten up the spacing */
}
.solutions-description p img {
  flex-shrink: 0;             /* keep icon at natural size */
  margin-right: 10px;         /* space between icon and text */
}


/* Ensure all solution items keep icon/text aligned */
.solution-item {
  display: flex;
  align-items: flex-start;    /* icon + first line of text line up */
  margin-bottom: 20px;
}
.solution-item .icon {
  flex: 0 0 auto;             /* don’t stretch or shrink */
  width: 30px;                /* match your icon size */
  margin-right: 10px;         /* gap to the text */
  text-align: center;
}
.solution-item .icon img {
  width: 100%;
  height: auto;
}
.solution-item .text {
  flex: 1;                    /* use remaining space */
  text-align: left;           /* force left alignment */
  padding: 0;                 /* remove extra left padding */
  font-size: 16px;
  line-height: 1.4;
}


/* Remove any leftover white-space hacks from your HTML */
.solutions-description span,
.solution-item .text span {
  display: none;
}
/* Patrick Hero Customization */
.hero {
  position: relative;
  width: 100%;
  /* make this a min-height so it can grow if text is tall */
  min-height: 450px;
  /* kill the clipping so text never disappears */
  overflow: visible;


  /* use an image name without spaces, or encode them as %20 */
  background-image: url("https://iap2canada.ca/resources/Pictures/Website%20Images/fundamentals-p2.png");
  background-size: cover;
  background-position: left center;    /* anchor the focal point on the left */
  background-repeat: no-repeat;
}


/* wrap all your text elements */
.hero__content {
  position: absolute;
  top: 25%;
  left: 10%;                    /* desktop indent */
  transform: translateY(-50%);
  max-width: 64%;
  color: #ffffff;               /* default text color for any element without an override */
}


/* title, subtitle, description */
.hero__title {
  margin: 0;
  line-height: 1.1;
  font-size: 3rem;
  color: #333192;               /* override to your purple */
}


.hero__subtitle {
  margin: 0.5em 0 0;
  font-size: 1.5rem;
  color: #F15C22;               /* your accent orange */
  opacity: 0.9;
}


.hero__description {
  margin: 1em 0 0;
  font-size: 1rem;
  line-height: 1.4;
  opacity: 0.8;
}


/* if you have a button */
.hero__button {
  display: inline-block;
  margin-top: 1.5em;
  padding: 0.75em 1.5em;
  background-color: #f15c22;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
}


/* tablets / small desktops */
@media (max-width: 992px) {
  .hero__content { left: 7%; max-width: 60%; }
  .hero__title { font-size: 2.5rem; }
  .hero__subtitle { font-size: 1.25rem; }
  .hero__description { font-size: 0.95rem; }
}


/* phones */
@media (max-width: 768px) {
  .hero__content { left: 5%; max-width: 90%; }
  .hero__title { font-size: 2rem; }
  .hero__subtitle { font-size: 1.1rem; }
  .hero__description { font-size: 0.9rem; }
  .hero__button {
    padding: 0.6em 1.2em;
    font-size: 0.9rem;
  }
}
/* Patrick Main Navigation Customization */
/* Base font & page background */
body {
  background: #F9F8FD;
  font-family: Helvetica, Arial, sans-serif;
}


/* NAV WRAPPER */
nav {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  background: #333192;
  border: none;
  border-radius: 0;
  animation: slide-in 1s ease-out;
  z-index: 1000;
}


/* REMOVE BULLETS ON ALL LEVELS */
nav ul,
nav ul ul,
nav ul ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}


/* MAIN NAV FLEX */
nav > ul {
  display: flex;
  flex-wrap: nowrap;
  padding: 0 30px;
  position: relative;
}


/* MAIN ITEMS */
nav > ul > li {
  position: relative;
  margin-right: 40px;
}
nav > ul > li:last-child {
  margin-right: 0;
}
nav > ul > li > a {
  display: block;
  padding: 12px 8px;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 500;
  transition: color 0.2s ease, border-bottom 0.2s ease;
}
nav > ul > li > a:hover {
  color: #ffffff;
  border-bottom: 3px solid #f15c22;
  padding-bottom: 9px;
  text-decoration: none;
}


/* SUB-NAV (level 2) */
nav > ul > li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  background: #333192;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 10;
}
nav > ul > li:hover > ul {
  visibility: visible;
  opacity: 1;
}


/* SUB-NAV ITEMS */
nav > ul > li > ul > li {
  position: relative;
  line-height: 1.6;
}
nav > ul > li > ul > li > a {
  display: block;
  padding: 8px 20px;
  color: #ffffff;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease, border-bottom 0.2s ease;
}
nav > ul > li > ul > li:hover > a {
  color: #ffffff;
  border-bottom: 3px solid #f15c22;
  padding-bottom: 6px;
  text-decoration: none;
}


/* SUB-SUB-NAV (level 3) */
nav > ul > li > ul > li > ul {
  position: absolute;
  top: 0;
  left: 100%;
  background: #333192;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 20;
}
nav > ul > li > ul > li:hover > ul {
  visibility: visible;
  opacity: 1;
}


/* SUB-SUB ITEMS */
nav > ul > li > ul > li > ul > li > a {
  display: block;
  padding: 8px 20px;
  color: #ffffff;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease, border-bottom 0.2s ease;
}
nav > ul > li > ul > li > ul > li:hover > a {
  color: #ffffff;
  border-bottom: 3px solid #f15c22;
  padding-bottom: 6px;
  text-decoration: none;
}


/* ANIMATION KEYFRAMES */
@keyframes slide-in {
  0%   { top: -50px; }
  40%  { top: 20px; }
  70%  { top: 10px; }
  100% { top: 15px; }
}
/* Patrick nav fix */
/* 1. Base resets */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
nav a {
  text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;
}


/* 2. Main nav items */
nav > ul > li {
  position: relative;
  display: inline-block;
  overflow: visible;           /* allow dropdowns to show */
}
nav > ul > li > a {
  display: block;
  padding: 10px 15px;
  color: #ffffff;              /* main nav text */
  background: #333192;         /* main nav background */
  border-radius: 0;            /* no curved corners */
}


/* 3. Sub-nav (level 2) */
nav ul ul {
  display: none;               /* hide by default */
  position: absolute;
  top: 100%; left: 0;
  background: #333192;
  min-width: 200px;
  z-index: 9999;               /* sit on top */
}
nav ul ul li {
  display: block;
}
nav ul ul li > a {
  padding: 8px 12px;
  color: #333333;              /* sub-nav text */
  background: #333192;
}


/* 4. Sub-sub-nav (level 3) */
nav ul ul ul {
  display: none;
  position: absolute;
  top: 0; left: 100%;
  background: #333192;
}


/* 5. Hover to open */
nav ul li:hover > ul {
  display: block;
}
nav ul ul li:hover > ul {
  display: block;
}


/* 6. Hover styles */
nav > ul > li > a:hover,
nav ul ul li > a:hover {
  background: #6b6b6b;         /* hover background */
  color: #ffffff;              /* hover text */
}




/* ==========================================
   Consolidated Nav Styles (override for old blocks)
   ========================================== */


/* remove bullets on all levels */
nav ul,
nav ul ul,
nav ul ul ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* nav wrapper */
nav {
  display: block !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  background: #333192 !important;
  border-radius: 0 !important;
  z-index: 99999 !important;
  width: 100% !important;
}


/* main nav flex */
nav > ul {
  display: flex !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 auto !important;
}


/* main items */
nav > ul > li {
  position: relative !important;
  margin: 0 20px !important;
}
nav > ul > li > a {
  color: #fff !important;
  padding: 10px 15px !important;
  text-decoration: none !important;
}
nav > ul > li > a:hover {
  background: #6b6b6b !important;
}


/* sub-nav */
nav > ul > li > ul {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: #333192 !important;
  z-index: 99999 !important;
}
nav > ul > li:hover > ul {
  display: block !important;
}


/* sub-sub-nav */
nav > ul > li > ul > li > ul {
  display: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;
  background: #333192 !important;
  z-index: 99999 !important;
}
nav > ul > li > ul > li:hover > ul {
  display: block !important;
}


/* Override parent container overflow */
.cnPrimaryContentContainer,
.wa-cms-page-content,
.WaGadgetContent,
.WaGadgetFirst.WaGadgetContent {
  overflow: visible !important;
}






/* ================================
   Navigation Dropdown Fix
   ================================ */


/* Reset and basics */
nav ul,
nav ul ul,
nav ul ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}


nav a {
  text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;
}


/* Nav wrapper */
nav {
  position: relative;
  width: 100%;
  background: #333192;
  z-index: 99999;
}


/* Main nav container */
nav > ul {
  display: flex;
  justify-content: center;
  padding: 0;
  margin: 0 auto;
}


/* Top-level nav items */
nav > ul > li {
  position: relative;
  margin: 0 20px;
}


nav > ul > li > a {
  display: block;
  padding: 10px 15px;
  color: #ffffff;
  font-weight: 500;
  text-transform: uppercase;
  transition: background 0.3s, border-bottom 0.3s;
}


nav > ul > li > a:hover {
  background: #6b6b6b;
  border-bottom: 3px solid #f15c22;
  color: #fff;
}


/* First-level dropdown */
nav > ul > li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  background: #333192;
  display: none;
  min-width: 200px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}


nav > ul > li:hover > ul {
  display: block;
}


/* Dropdown items */
nav > ul > li > ul > li {
  position: relative;
}


nav > ul > li > ul > li > a {
  display: block;
  padding: 10px 20px;
  color: #fff;
  background: #333192;
}


nav > ul > li > ul > li > a:hover {
  background: #6b6b6b;
}


/* Sub-sub menu (3rd level) */
nav > ul > li > ul > li > ul {
  position: absolute;
  top: 0;
  left: 100%;
  background: #333192;
  display: none;
  min-width: 200px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


nav > ul > li > ul > li:hover > ul {
  display: block;
}


/* Sub-sub menu items */
nav > ul > li > ul > li > ul > li > a {
  display: block;
  padding: 10px 20px;
  color: #fff;
}


nav > ul > li > ul > li > ul > li > a:hover {
  background: #6b6b6b;
}






/* ===========================================================
   Responsive Navigation Fixes
   =========================================================== */


/* Responsive Navigation Styles */
nav {
  position: relative;
  background: #333192;
  z-index: 99999;
  width: 100%;
}


nav .nav-toggle {
  display: none;
  background: #f15c22;
  color: #fff;
  padding: 10px 15px;
  font-size: 18px;
  border: none;
  cursor: pointer;
}


nav > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}


nav > ul > li {
  position: relative;
  margin: 0 15px;
}


nav > ul > li > a {
  display: block;
  padding: 10px 15px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.3s, border-bottom 0.3s;
}


nav > ul > li > a:hover {
  background: #6b6b6b;
  border-bottom: 3px solid #f15c22;
}


/* Dropdown Level 1 */
nav > ul > li > ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #333192;
  min-width: 200px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}


nav > ul > li:hover > ul {
  display: block;
}


nav > ul > li > ul > li > a {
  display: block;
  padding: 10px 20px;
  color: #fff;
  background: #333192;
  white-space: nowrap;
}


nav > ul > li > ul > li > a:hover {
  background: #6b6b6b;
}


/* Dropdown Level 2 */
nav > ul > li > ul > li > ul {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background: #333192;
  min-width: 200px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}


nav > ul > li > ul > li:hover > ul {
  display: block;
}


nav > ul > li > ul > li > ul > li > a {
  display: block;
  padding: 10px 20px;
  color: #fff;
}


nav > ul > li > ul > li > ul > li > a:hover {
  background: #6b6b6b;
}


/* Responsive Breakpoint */
@media (max-width: 768px) {
  nav .nav-toggle {
    display: block;
  }


  nav > ul {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    background: #333192;
    width: 100%;
  }


  nav.open > ul {
    display: flex;
  }


  nav > ul > li {
    width: 100%;
    margin: 0;
  }


  nav > ul > li > a {
    width: 100%;
    padding: 12px 20px;
    display: block;
    border-top: 1px solid rgba(255,255,255,0.1);
  }


  nav > ul > li > ul {
    position: relative;
    background: #444199;
    box-shadow: none;
  }


  nav > ul > li > ul > li > ul {
    left: 0;
    top: auto;
  }
}


/* =============================================
   FINAL: Hide .main-menu by default on mobile
============================================= */
@media (max-width: 991px) {
  .main-menu {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    background: #333192;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 10001;
    margin: 0;
    padding: 0;
  }


  #nav-toggle:checked + .nav-toggle-label + .main-menu {
    display: flex;
  }


  .main-menu > li {
    width: 100%;
    margin: 0;
  }


  .main-menu > li > a {
    width: 100%;
    padding: 12px 20px;
    display: block;
    border-top: 1px solid rgba(255,255,255,0.1);
  }


  .main-menu > li > ul,
  .main-menu > li > ul > li > ul {
    position: relative;
    background: #444199;
    box-shadow: none;
    width: 100%;
    top: 0;
    left: 0;
  }
}


/* patrick nav fix */


/* === Responsive Hamburger Navigation with Accordion Submenus, Sticky Nav, and Transitions === */
nav {
  position: sticky;
  top: 0;
  background: #333192;
  z-index: 9999;
  width: 100%;
  transition: top 0.3s;
}


/* Hamburger Toggle */
.nav-toggle {
  display: none;
  background: #f15c22;
  color: #fff;
  padding: 12px 20px;
  font-size: 18px;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  text-transform: uppercase;
  font-weight: bold;
}


/* Main Menu */
.main-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #333192;
  transition: max-height 0.3s ease-in-out;
}


/* Menu Items */
.main-menu > li {
  position: relative;
  margin: 0 20px;
}


.main-menu > li > a {
  display: block;
  padding: 10px 15px;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.3s, border-bottom 0.3s;
}


.main-menu > li > a:hover {
  background: #6b6b6b;
  border-bottom: 3px solid #f15c22;
}


/* Dropdown Styles */
.main-menu li ul {
  display: none;
  background: #444199;
  list-style: none;
  padding: 0;
  margin: 0;
  transition: max-height 0.3s ease-out;
  overflow: hidden;
}


.main-menu li ul li a {
  display: block;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
}


.main-menu li ul li a:hover {
  background: #6b6b6b;
}


/* Responsive Behavior */
@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }


  .main-menu {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    display: none;
  }


  nav.open .main-menu {
    display: flex;
  }


  .main-menu > li {
    width: 100%;
    margin: 0;
  }


  .main-menu > li > a {
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.1);
  }


  /* Accordion Style */
  .main-menu li.open > ul {
    display: block;
  }


  .main-menu li ul {
    width: 100%;
  }
}
/* Base styles */
nav {
  background: #333192;
  z-index: 99999;
  width: 100%;
}


.nav-toggle {
  display: none;
  background: #f15c22;
  color: #fff;
  padding: 12px 20px;
  font-size: 18px;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  text-transform: uppercase;
  font-weight: bold;
}


.main-menu {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}


.main-menu > li {
  position: relative;
  margin: 0 20px;
}


.main-menu > li > a {
  display: block;
  padding: 10px 15px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
}


.main-menu > li > a:hover {
  background: #6b6b6b;
}


/* Submenus */
.main-menu .submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #444199;
  list-style: none;
  min-width: 200px;
  padding: 0;
}


.main-menu > li:hover .submenu {
  display: block;
}


/* Responsive */
@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }


  nav:not(.open) .main-menu {
    display: none;
  }


  nav.open .main-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #333192;
    width: 100%;
  }


  .main-menu > li {
    width: 100%;
    margin: 0;
  }


  .main-menu > li > a {
    padding: 12px 20px;
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.1);
  }


  .main-menu .submenu {
    position: relative;
    top: 0;
    left: 0;
    background: #444199;
    width: 100%;
  }


  .main-menu > li.open .submenu {
    display: block;
  }
}


/* NAV WRAPPER */
nav {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  background: #333192;
  border: none;
  border-radius: 0;
  animation: slide-in 1s ease-out;
  z-index: 1000;
}


/* REMOVE BULLETS ON ALL LEVELS */
nav ul,
nav ul ul,
nav ul ul ul {
  list-style: none;
  margin: 0;
  padding: 0;
}


/* ---------------------------------------
   PATRICK DESIGN SYSTEM (scoped)
   Paste this in your Wild Apricot CSS overrides
----------------------------------------*/


/* (Optional) Google Fonts – comment out if you already load fonts globally */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Open+Sans:wght@800&display=swap');


/* Scope wrapper: everything inside .patrick-scope is isolated */
.patrick-scope {
  /* Design tokens */
  --patrick-brand-1: #f3f4f8;   /* light background */
  --patrick-brand-2: #31066f;   /* accent + headings */
  --patrick-text:   #31066f;    /* body text */
  --patrick-bg:     #ffffff;    /* page background */
  --patrick-surface:#31066f;    /* dark footer surface */


  --patrick-font-heading: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  --patrick-font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;


  --patrick-base-size: 24px;   /* per your spec */
  --patrick-lh: 34px;          /* per your spec */


  --patrick-space-1: .25rem;
  --patrick-space-2: .5rem;
  --patrick-space-3: .75rem;
  --patrick-space-4: 1rem;
  --patrick-space-6: 1.5rem;
  --patrick-space-8: 2rem;
  --patrick-space-12: 3rem;


  --patrick-radius: 14px;
  --patrick-shadow: 0 10px 25px rgba(0,0,0,.08);
  --patrick-maxw: 1200px;


  --patrick-bdr: #e5e7eb;      /* neutral border */
}


/* Base inside scope */
.patrick-scope, .patrick-scope * { box-sizing: border-box; }
.patrick-scope { background: var(--patrick-bg); color: var(--patrick-text); font-family: var(--patrick-font-body); font-size: var(--patrick-base-size); line-height: var(--patrick-lh); }
.patrick-scope img { max-width: 100%; height: auto; display: block; }
.patrick-scope a { color: inherit; text-decoration: none; }
.patrick-scope .patrick-container { width: 100%; max-width: var(--patrick-maxw); margin-inline: auto; padding-inline: var(--patrick-space-4); }


/* Header */
.patrick-header { position: sticky; top: 0; z-index: 100; background: var(--patrick-bg); border-bottom: 1px solid var(--patrick-bdr); }
.patrick-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--patrick-space-6); padding-block: var(--patrick-space-4); }
.patrick-brand { display: inline-flex; align-items: center; gap: var(--patrick-space-3); }
.patrick-logo { height: 40px; width: auto; }


/* Nav (desktop) */
.patrick-nav, .patrick-nav ul { list-style: none; margin: 0; padding: 0; }
.patrick-nav { display: none; }
@media (min-width: 768px) { .patrick-nav { display: block; } }


.patrick-nav > ul { display: flex; gap: var(--patrick-space-6); align-items: center; }
.patrick-nav li { position: relative; }
.patrick-nav > ul > li > a {
  display: inline-block; padding: .75rem .5rem; font-weight: 700; color: var(--patrick-text);
  border-radius: 8px;
}
.patrick-nav > ul > li > a:hover,
.patrick-nav > ul > li:focus-within > a { box-shadow: inset 0 -2px 0 var(--patrick-brand-2); }


/* Dropdown base */
.patrick-nav li > ul {
  position: absolute; left: 0; top: calc(100% + .5rem); min-width: 260px;
  background: var(--patrick-bg); border: 1px solid var(--patrick-bdr); border-radius: 12px;
  box-shadow: var(--patrick-shadow); padding: .5rem; display: none; z-index: 1000;
}
.patrick-nav li:hover > ul,
.patrick-nav li:focus-within > ul { display: block; }


.patrick-nav li > ul > li > a {
  display: block; padding: .5rem .75rem; border-radius: 8px; font-weight: 600; color: var(--patrick-text);
}
.patrick-nav li > ul > li > a:hover,
.patrick-nav li > ul > li > a:focus { background: var(--patrick-brand-1); color: var(--patrick-brand-2); }


/* Flyout for level-3 */
.patrick-nav li > ul > li { position: relative; }
.patrick-nav li > ul > li > ul { left: 100%; top: -0.25rem; }


/* Hero */
.patrick-hero {
  position: relative; overflow: hidden;
  background: var(--patrick-brand-1);
  padding-block: var(--patrick-space-12);
}
.patrick-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(49, 6, 111, 0.10) 0%, rgba(49, 6, 111, 0.00) 50%);
  pointer-events: none;
}
.patrick-hero-grid { display: grid; gap: var(--patrick-space-8); align-items: center; }
@media (min-width: 768px) { .patrick-hero-grid { grid-template-columns: 1.1fr .9fr; } }


.patrick-eyebrow { color: var(--patrick-brand-2); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 18px; }
.patrick-h1 { font-family: var(--patrick-font-heading); font-size: 50px; line-height: 1.15; margin: 0 0 var(--patrick-space-4); color: var(--patrick-brand-2); }
.patrick-lede { font-size: 24px; margin: 0 0 var(--patrick-space-6); }


/* Buttons */
.patrick-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.25rem; border-radius: 999px; font-weight: 600; border: 2px solid transparent; cursor: pointer; transition: transform .06s ease, box-shadow .2s ease; }
.patrick-btn:hover { transform: translateY(-1px); }
.patrick-btn--primary { background: var(--patrick-brand-2); color: var(--patrick-brand-1); box-shadow: var(--patrick-shadow); }
.patrick-btn--outline { background: transparent; border-color: var(--patrick-brand-2); color: var(--patrick-brand-2); }
.patrick-hero-actions { display: flex; gap: var(--patrick-space-4); flex-wrap: wrap; align-items: center; }


/* Sections & Footer (optional basics to match look) */
.patrick-section { padding-block: var(--patrick-space-12); }
.patrick-section-title { font-family: var(--patrick-font-heading); font-weight: 800; color: var(--patrick-brand-2); margin: 0 0 var(--patrick-space-6); }


.patrick-footer { background: var(--patrick-surface); color: var(--patrick-brand-1); padding-block: var(--patrick-space-12); margin-top: var(--patrick-space-12); }
.patrick-footer a { color: var(--patrick-brand-1); opacity: .9; }
.patrick-footer a:hover { opacity: 1; }


/* Focus visibility for keyboard users */
.patrick-scope a:focus-visible { outline: 3px solid rgba(49,6,111,.35); outline-offset: 3px; }

/* ---------------------------------------
   PATRICK DESIGN SYSTEM (scoped, appended)
----------------------------------------*/
.patrick-scope {
  --patrick-brand-1: #f3f4f8;
  --patrick-brand-2: #31066f;
  --patrick-text:   #31066f;
  --patrick-bg:     #ffffff;
  --patrick-surface:#31066f;
  --patrick-font-heading: 'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif;
  --patrick-font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --patrick-base-size: 24px;
  --patrick-lh: 34px;
  --patrick-space-1: .25rem; --patrick-space-2: .5rem; --patrick-space-3: .75rem; --patrick-space-4: 1rem;
  --patrick-space-6: 1.5rem; --patrick-space-8: 2rem; --patrick-space-12: 3rem;
  --patrick-radius: 14px; --patrick-shadow: 0 10px 25px rgba(0,0,0,.08); --patrick-maxw: 1200px; --patrick-bdr: #e5e7eb;
}
.patrick-scope, .patrick-scope * { box-sizing: border-box; }
.patrick-scope { background: var(--patrick-bg); color: var(--patrick-text); font-family: var(--patrick-font-body); font-size: var(--patrick-base-size); line-height: var(--patrick-lh); }
.patrick-scope img { max-width: 100%; height: auto; display: block; }
.patrick-scope a { color: inherit; text-decoration: none; }
.patrick-scope .patrick-container { width: 100%; max-width: var(--patrick-maxw); margin-inline: auto; padding-inline: var(--patrick-space-4); }
.patrick-header { position: sticky; top: 0; z-index: 100; background: var(--patrick-bg); border-bottom: 1px solid var(--patrick-bdr); }
.patrick-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--patrick-space-6); padding-block: var(--patrick-space-4); }
.patrick-brand { display: inline-flex; align-items: center; gap: var(--patrick-space-3); }
.patrick-logo { height: 40px; width: auto; }
.patrick-nav, .patrick-nav ul { list-style: none; margin: 0; padding: 0; }
.patrick-nav { display: none; } @media (min-width: 768px) { .patrick-nav { display: block; } }
.patrick-nav > ul { display: flex; gap: var(--patrick-space-6); align-items: center; }
.patrick-nav li { position: relative; }
.patrick-nav > ul > li > a { display: inline-block; padding: .75rem .5rem; font-weight: 700; color: var(--patrick-text); border-radius: 8px; }
.patrick-nav > ul > li > a:hover, .patrick-nav > ul > li:focus-within > a { box-shadow: inset 0 -2px 0 var(--patrick-brand-2); }
.patrick-nav li > ul { position: absolute; left: 0; top: calc(100% + .5rem); min-width: 260px; background: var(--patrick-bg); border: 1px solid var(--patrick-bdr); border-radius: 12px; box-shadow: var(--patrick-shadow); padding: .5rem; display: none; z-index: 1000; }
.patrick-nav li:hover > ul, .patrick-nav li:focus-within > ul { display: block; }
.patrick-nav li > ul > li > a { display: block; padding: .5rem .75rem; border-radius: 8px; font-weight: 600; color: var(--patrick-text); }
.patrick-nav li > ul > li > a:hover, .patrick-nav li > ul > li > a:focus { background: var(--patrick-brand-1); color: var(--patrick-brand-2); }
.patrick-nav li > ul > li { position: relative; }
.patrick-nav li > ul > li > ul { left: 100%; top: -0.25rem; }
.patrick-hero { position: relative; overflow: hidden; background: var(--patrick-brand-1); padding-block: var(--patrick-space-12); }
.patrick-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(49, 6, 111, 0.10) 0%, rgba(49, 6, 111, 0.00) 50%); pointer-events: none; }
.patrick-hero-grid { display: grid; gap: var(--patrick-space-8); align-items: center; }
@media (min-width: 768px) { .patrick-hero-grid { grid-template-columns: 1.1fr .9fr; } }
.patrick-eyebrow { color: var(--patrick-brand-2); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 18px; }
.patrick-h1 { font-family: var(--patrick-font-heading); font-size: 50px; line-height: 1.15; margin: 0 0 var(--patrick-space-4); color: var(--patrick-brand-2); }
.patrick-lede { font-size: 24px; margin: 0 0 var(--patrick-space-6); }
.patrick-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.25rem; border-radius: 999px; font-weight: 600; border: 2px solid transparent; cursor: pointer; transition: transform .06s ease, box-shadow .2s ease; }
.patrick-btn:hover { transform: translateY(-1px); }
.patrick-btn--primary { background: var(--patrick-brand-2); color: var(--patrick-brand-1); box-shadow: var(--patrick-shadow); }
.patrick-btn--outline { background: transparent; border-color: var(--patrick-brand-2); color: var(--patrick-brand-2); }
.patrick-hero-actions { display: flex; gap: var(--patrick-space-4); flex-wrap: wrap; align-items: center; }
.patrick-section { padding-block: var(--patrick-space-12); }
.patrick-section-title { font-family: var(--patrick-font-heading); font-weight: 800; color: var(--patrick-brand-2); margin: 0 0 var(--patrick-space-6); }
.patrick-footer { background: var(--patrick-surface); color: var(--patrick-brand-1); padding-block: var(--patrick-space-12); margin-top: var(--patrick-space-12); }
.patrick-footer a { color: var(--patrick-brand-1); opacity: .9; }
.patrick-footer a:hover { opacity: 1; }
.patrick-scope a:focus-visible { outline: 3px solid rgba(49,6,111,.35); outline-offset: 3px; }

/* =========================================
   PATRICK Website Nav (derived from original)
   - Duplicates your existing nav styles (scoped to .patrick-nav)
   - Font sizes ~3px smaller
=========================================*/
/* navigation buttons */ .slider-btn {position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,95,158,0.8);
  border: none;
  color: #fff;
  font-size: 1.3125rem;
  line-height: 1;
  padding: 0.5em;
  cursor: pointer;
  z-index: 2;}

/* ========================================= Custom Patrick Sub-Navigation (.iap2-subnav) ========================================= */ .iap2-subnav {position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 319px;
  margin: 0 auto;
  display: table;
  transform: translateY(-50%);}

.iap2-subnav a {position: relative;
  display: table-cell;
  width: 33.333%;
  text-align: left;            /* align text to the left edge */
  padding: 10px 20px;          /* 20px left padding = indent for first letter */
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-weight: bold;
  color: #ffffff;              /* default link color: white */
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;         /* keep text on one line */}

/* visited & hover state both orange */ .iap2-subnav a:visited, .iap2-subnav a:hover {color: #f15c22;}

/* divider between links */ .iap2-subnav a:not(:last-child) {padding-right: 20px;         /* extra space to clear the divider */}

.iap2-subnav a:not(:last-child)::after {content: "";
  position: absolute;
  top: 25%;
  right: 10px;
  width: 1px;
  height: 50%;
  background-color: rgba(255,255,255,0.5);}

/* decorative dots */ .iap2-subnav a::before, .iap2-subnav a::after {content: "";
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.2s ease;}

.iap2-subnav a::before {top: 0; left: 10px;
  width: 6px; height: 6px;}

.iap2-subnav a::after {top: 5px; left: 18px;
  width: 4px; height: 4px;}

/* dot colors */ .iap2-subnav a:nth-child(1)::before {background: yellow;}

.iap2-subnav a:nth-child(1)::after {background: red;}

.iap2-subnav a:nth-child(2)::before {background: #00e2ff;}

.iap2-subnav a:nth-child(2)::after {background: #89ff00;}

.iap2-subnav a:nth-child(3)::before {background: purple;}

.iap2-subnav a:nth-child(3)::after {background: palevioletred;}

/* reveal dots on hover */ .iap2-subnav a:hover::before, .iap2-subnav a:hover::after {transform: scale(1);}

/* indicator bar under the first letter */ .iap2-subnav__indicator {position: absolute;
  bottom: 0;
  left: 20px;                  /* matches link’s left padding */
  width: 30px;
  height: 3px;
  border-radius: 5px;
  background: #ffffff;
  transition: left 0.2s ease, background 0.2s ease;}

/* move & recolor indicator on hover */ .iap2-subnav a:nth-child(1):hover ~ .iap2-subnav__indicator {left: 20px;
  background: linear-gradient(130deg, yellow, red);}

.iap2-subnav a:nth-child(2):hover ~ .iap2-subnav__indicator {left: calc(33.333% + 33px);
  background: linear-gradient(130deg, #00e2ff, #89ff00);}

.iap2-subnav a:nth-child(3):hover ~ .iap2-subnav__indicator {left: calc(66.666% + 45px);
  background: linear-gradient(130deg, purple, palevioletred);}

/* NAV WRAPPER */ .patrick-nav {position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  background: #333192;
  border: none;
  border-radius: 0;
  animation: slide-in 1s ease-out;
  z-index: 1000;}

/* REMOVE BULLETS ON ALL LEVELS */ .patrick-nav ul, .patrick-nav ul ul, .patrick-nav ul ul ul {list-style: none;
  margin: 0;
  padding: 0;}

/* MAIN NAV FLEX */ .patrick-nav > ul {display: flex;
  flex-wrap: nowrap;
  padding: 0 30px;
  position: relative;}

/* MAIN ITEMS */ .patrick-nav > ul > li {position: relative;
  margin-right: 40px;}

.patrick-nav > ul > li:last-child {margin-right: 0;}

.patrick-nav > ul > li > a {display: block;
  padding: 12px 8px;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 500;
  transition: color 0.2s ease, border-bottom 0.2s ease;}

.patrick-nav > ul > li > a:hover {color: #ffffff;
  border-bottom: 3px solid #f15c22;
  padding-bottom: 9px;
  text-decoration: none;}

/* SUB-NAV (level 2) */ .patrick-nav > ul > li > ul {position: absolute;
  top: 100%;
  left: 0;
  background: #333192;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 10;}

.patrick-nav > ul > li:hover > ul {visibility: visible;
  opacity: 1;}

/* SUB-NAV ITEMS */ .patrick-nav > ul > li > ul > li {position: relative;
  line-height: 1.6;}

.patrick-nav > ul > li > ul > li > a {display: block;
  padding: 8px 20px;
  color: #ffffff;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease, border-bottom 0.2s ease;}

.patrick-nav > ul > li > ul > li:hover > a {color: #ffffff;
  border-bottom: 3px solid #f15c22;
  padding-bottom: 6px;
  text-decoration: none;}

/* SUB-SUB-NAV (level 3) */ .patrick-nav > ul > li > ul > li > ul {position: absolute;
  top: 0;
  left: 100%;
  background: #333192;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 20;}

.patrick-nav > ul > li > ul > li:hover > ul {visibility: visible;
  opacity: 1;}

/* SUB-SUB ITEMS */ .patrick-nav > ul > li > ul > li > ul > li > a {display: block;
  padding: 8px 20px;
  color: #ffffff;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.2s ease, border-bottom 0.2s ease;}

.patrick-nav > ul > li > ul > li > ul > li:hover > a {color: #ffffff;
  border-bottom: 3px solid #f15c22;
  padding-bottom: 6px;
  text-decoration: none;}

/* Patrick .patrick-nav fix */ /* 1. Base resets */ .patrick-nav ul {list-style: none;
  margin: 0;
  padding: 0;}

.patrick-nav a {text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;}

/* 2. Main .patrick-nav items */ .patrick-nav > ul > li {position: relative;
  display: inline-block;
  overflow: visible;           /* allow dropdowns to show */}

.patrick-nav > ul > li > a {display: block;
  padding: 10px 15px;
  color: #ffffff;              /* main nav text */
  background: #333192;         /* main nav background */
  border-radius: 0;            /* no curved corners */}

/* 3. Sub-nav (level 2) */ .patrick-nav ul ul {display: none;               /* hide by default */
  position: absolute;
  top: 100%; left: 0;
  background: #333192;
  min-width: 200px;
  z-index: 9999;               /* sit on top */}

.patrick-nav ul ul li {display: block;}

.patrick-nav ul ul li > a {padding: 8px 12px;
  color: #333333;              /* sub-nav text */
  background: #333192;}

/* 4. Sub-sub-nav (level 3) */ .patrick-nav ul ul ul {display: none;
  position: absolute;
  top: 0; left: 100%;
  background: #333192;}

/* 5. Hover to open */ .patrick-nav ul li:hover > ul {display: block;}

.patrick-nav ul ul li:hover > ul {display: block;}

/* 6. Hover styles */ .patrick-nav > ul > li > a:hover, .patrick-nav ul ul li > a:hover {background: #6b6b6b;         /* hover background */
  color: #ffffff;              /* hover text */}

/* ========================================== Consolidated Nav Styles (override for old blocks) ========================================== */ /* remove bullets on all levels */ .patrick-nav ul, .patrick-nav ul ul, .patrick-nav ul ul ul {list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;}

/* .patrick-nav wrapper */ .patrick-nav {display: block !important;
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  background: #333192 !important;
  border-radius: 0 !important;
  z-index: 99999 !important;
  width: 100% !important;}

/* main .patrick-nav flex */ .patrick-nav > ul {display: flex !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 auto !important;}

/* main items */ .patrick-nav > ul > li {position: relative !important;
  margin: 0 20px !important;}

.patrick-nav > ul > li > a {color: #fff !important;
  padding: 10px 15px !important;
  text-decoration: none !important;}

.patrick-nav > ul > li > a:hover {background: #6b6b6b !important;}

/* sub-nav */ .patrick-nav > ul > li > ul {display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background: #333192 !important;
  z-index: 99999 !important;}

.patrick-nav > ul > li:hover > ul {display: block !important;}

/* sub-sub-nav */ .patrick-nav > ul > li > ul > li > ul {display: none !important;
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;
  background: #333192 !important;
  z-index: 99999 !important;}

.patrick-nav > ul > li > ul > li:hover > ul {display: block !important;}

/* ================================ Navigation Dropdown Fix ================================ */ /* Reset and basics */ .patrick-nav ul, .patrick-nav ul ul, .patrick-nav ul ul ul {list-style: none;
  margin: 0;
  padding: 0;}

.patrick-nav a {text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;}

/* Nav wrapper */ .patrick-nav {position: relative;
  width: 100%;
  background: #333192;
  z-index: 99999;}

/* Main .patrick-nav container */ .patrick-nav > ul {display: flex;
  justify-content: center;
  padding: 0;
  margin: 0 auto;}

/* Top-level .patrick-nav items */ .patrick-nav > ul > li {position: relative;
  margin: 0 20px;}

.patrick-nav > ul > li > a {display: block;
  padding: 10px 15px;
  color: #ffffff;
  font-weight: 500;
  text-transform: uppercase;
  transition: background 0.3s, border-bottom 0.3s;}

.patrick-nav > ul > li > a:hover {background: #6b6b6b;
  border-bottom: 3px solid #f15c22;
  color: #fff;}

/* First-level dropdown */ .patrick-nav > ul > li > ul {position: absolute;
  top: 100%;
  left: 0;
  background: #333192;
  display: none;
  min-width: 200px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;}

.patrick-nav > ul > li:hover > ul {display: block;}

/* Dropdown items */ .patrick-nav > ul > li > ul > li {position: relative;}

.patrick-nav > ul > li > ul > li > a {display: block;
  padding: 10px 20px;
  color: #fff;
  background: #333192;}

.patrick-nav > ul > li > ul > li > a:hover {background: #6b6b6b;}

/* Sub-sub menu (3rd level) */ .patrick-nav > ul > li > ul > li > ul {position: absolute;
  top: 0;
  left: 100%;
  background: #333192;
  display: none;
  min-width: 200px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}

.patrick-nav > ul > li > ul > li:hover > ul {display: block;}

/* Sub-sub menu items */ .patrick-nav > ul > li > ul > li > ul > li > a {display: block;
  padding: 10px 20px;
  color: #fff;}

.patrick-nav > ul > li > ul > li > ul > li > a:hover {background: #6b6b6b;}

/* =========================================================== Responsive Navigation Fixes =========================================================== */ /* Responsive Navigation Styles */ .patrick-nav {position: relative;
  background: #333192;
  z-index: 99999;
  width: 100%;}

.patrick-nav .patrick-nav-toggle {display: none;
  background: #f15c22;
  color: #fff;
  padding: 10px 15px;
  font-size: 15px;
  border: none;
  cursor: pointer;}

.patrick-nav > ul {display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;}

.patrick-nav > ul > li {position: relative;
  margin: 0 15px;}

.patrick-nav > ul > li > a {display: block;
  padding: 10px 15px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.3s, border-bottom 0.3s;}

.patrick-nav > ul > li > a:hover {background: #6b6b6b;
  border-bottom: 3px solid #f15c22;}

/* Dropdown Level 1 */ .patrick-nav > ul > li > ul {display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #333192;
  min-width: 200px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);}

.patrick-nav > ul > li:hover > ul {display: block;}

.patrick-nav > ul > li > ul > li > a {display: block;
  padding: 10px 20px;
  color: #fff;
  background: #333192;
  white-space: nowrap;}

.patrick-nav > ul > li > ul > li > a:hover {background: #6b6b6b;}

/* Dropdown Level 2 */ .patrick-nav > ul > li > ul > li > ul {display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background: #333192;
  min-width: 200px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);}

.patrick-nav > ul > li > ul > li:hover > ul {display: block;}

.patrick-nav > ul > li > ul > li > ul > li > a {display: block;
  padding: 10px 20px;
  color: #fff;}

.patrick-nav > ul > li > ul > li > ul > li > a:hover {background: #6b6b6b;}

.patrick-nav > ul {display: none;
    flex-direction: column;
    align-items: flex-start;
    background: #333192;
    width: 100%;}

.patrick-nav.open > ul {display: flex;}

.patrick-nav > ul > li {width: 100%;
    margin: 0;}

.patrick-nav > ul > li > a {width: 100%;
    padding: 12px 20px;
    display: block;
    border-top: 1px solid rgba(255,255,255,0.1);}

.patrick-nav > ul > li > ul {position: relative;
    background: #444199;
    box-shadow: none;}

.patrick-nav > ul > li > ul > li > ul {left: 0;
    top: auto;}

/* ============================================= FINAL: Hide .patrick-nav > ul by default on mobile ============================================= */ @media (max-width: 991px) {.main-menu {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    background: #333192;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 10001;
    margin: 0;
    padding: 0;}

#nav-toggle:checked + .patrick-nav-toggle-label + .patrick-nav > ul {display: flex;}

.patrick-nav > ul > li {width: 100%;
    margin: 0;}

.patrick-nav > ul > li > a {width: 100%;
    padding: 12px 20px;
    display: block;
    border-top: 1px solid rgba(255,255,255,0.1);}

.patrick-nav > ul > li > ul, .patrick-nav > ul > li > ul > li > ul {position: relative;
    background: #444199;
    box-shadow: none;
    width: 100%;
    top: 0;
    left: 0;}

/* patrick .patrick-nav fix */ /* === Responsive Hamburger Navigation with Accordion Submenus, and Transitions === */ .patrick-nav {position: sticky;
  top: 0;
  background: #333192;
  z-index: 9999;
  width: 100%;
  transition: top 0.3s;}

/* Hamburger Toggle */ .patrick-nav-toggle {display: none;
  background: #f15c22;
  color: #fff;
  padding: 12px 20px;
  font-size: 15px;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  text-transform: uppercase;
  font-weight: bold;}

/* Main Menu */ .patrick-nav > ul {display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  background: #333192;
  transition: max-height 0.3s ease-in-out;}

/* Menu Items */ .patrick-nav > ul > li {position: relative;
  margin: 0 20px;}

.patrick-nav > ul > li > a {display: block;
  padding: 10px 15px;
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.3s, border-bottom 0.3s;}

.patrick-nav > ul > li > a:hover {background: #6b6b6b;
  border-bottom: 3px solid #f15c22;}

/* Dropdown Styles */ .patrick-nav > ul li ul {display: none;
  background: #444199;
  list-style: none;
  padding: 0;
  margin: 0;
  transition: max-height 0.3s ease-out;
  overflow: hidden;}

.patrick-nav > ul li ul li a {display: block;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;}

.patrick-nav > ul li ul li a:hover {background: #6b6b6b;}

.patrick-nav > ul {flex-direction: column;
    align-items: flex-start;
    width: 100%;
    display: none;}

.patrick-nav.open .patrick-nav > ul {display: flex;}

.patrick-nav > ul > li {width: 100%;
    margin: 0;}

.patrick-nav > ul > li > a {width: 100%;
    border-top: 1px solid rgba(255,255,255,0.1);}

/* Accordion Style */ .patrick-nav > ul li.open > ul {display: block;}

.patrick-nav > ul li ul {width: 100%;}

/* Base styles */ .patrick-nav {background: #333192;
  z-index: 99999;
  width: 100%;}

.patrick-nav-toggle {display: none;
  background: #f15c22;
  color: #fff;
  padding: 12px 20px;
  font-size: 15px;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  text-transform: uppercase;
  font-weight: bold;}

.patrick-nav > ul {display: flex;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;}

.patrick-nav > ul > li {position: relative;
  margin: 0 20px;}

.patrick-nav > ul > li > a {display: block;
  padding: 10px 15px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;}

.patrick-nav > ul > li > a:hover {background: #6b6b6b;}

/* Submenus */ .patrick-nav > ul li > ul {display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #444199;
  list-style: none;
  min-width: 200px;
  padding: 0;}

.patrick-nav > ul > li:hover li > ul {display: block;}

.patrick-nav:not(.open) .patrick-nav > ul {display: none;}

.patrick-nav.open .patrick-nav > ul {display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #333192;
    width: 100%;}

.patrick-nav > ul > li {width: 100%;
    margin: 0;}

.patrick-nav > ul > li > a {padding: 12px 20px;
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.1);}

.patrick-nav > ul li > ul {position: relative;
    top: 0;
    left: 0;
    background: #444199;
    width: 100%;}

.patrick-nav > ul > li.open li > ul {display: block;}

/* NAV WRAPPER */ .patrick-nav {position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  background: #333192;
  border: none;
  border-radius: 0;
  animation: slide-in 1s ease-out;
  z-index: 1000;}

/* REMOVE BULLETS ON ALL LEVELS */ .patrick-nav ul, .patrick-nav ul ul, .patrick-nav ul ul ul {list-style: none;
  margin: 0;
  padding: 0;}

/* Nav (desktop) */ .patrick-nav, .patrick-nav ul {list-style: none; margin: 0; padding: 0;}

.patrick-nav {display: none;}

.patrick-nav > ul {display: flex; gap: var(--patrick-space-6); align-items: center;}

.patrick-nav li {position: relative;}

.patrick-nav > ul > li > a {display: inline-block; padding: .75rem .5rem; font-weight: 700; color: var(--patrick-text);
  border-radius: 8px;}

.patrick-nav > ul > li > a:hover, .patrick-nav > ul > li:focus-within > a {box-shadow: inset 0 -2px 0 var(--patrick-brand-2);}

/* Dropdown base */ .patrick-nav li > ul {position: absolute; left: 0; top: calc(100% + .5rem); min-width: 260px;
  background: var(--patrick-bg); border: 1px solid var(--patrick-bdr); border-radius: 12px;
  box-shadow: var(--patrick-shadow); padding: .5rem; display: none; z-index: 1000;}

.patrick-nav li:hover > ul, .patrick-nav li:focus-within > ul {display: block;}

.patrick-nav li > ul > li > a {display: block; padding: .5rem .75rem; border-radius: 8px; font-weight: 600; color: var(--patrick-text);}

.patrick-nav li > ul > li > a:hover, .patrick-nav li > ul > li > a:focus {background: var(--patrick-brand-1); color: var(--patrick-brand-2);}

/* Flyout for level-3 */ .patrick-nav li > ul > li {position: relative;}

.patrick-nav li > ul > li > ul {left: 100%; top: -0.25rem;}

/* ---------------------------------------
   OVERRIDES for aggressive WA themes (last)
----------------------------------------*/
.patrick-scope .patrick-header { background: #ffffff !important; border-bottom: 1px solid #e5e7eb !important; }
.patrick-scope .patrick-bar { background: transparent !important; }
.patrick-scope .patrick-nav a, .patrick-scope .patrick-nav a:link, .patrick-scope .patrick-nav a:visited { color: #31066f !important; background: transparent !important; }
.patrick-scope .patrick-nav li > ul { background: #ffffff !important; border-color: #e5e7eb !important; }
.patrick-scope .patrick-nav li > ul > li > a { color: #31066f !important; }
.patrick-scope .patrick-nav li > ul > li > a:hover, .patrick-scope .patrick-nav li > ul > li > a:focus { background: #f3f4f8 !important; color: #31066f !important; }
.patrick-scope .patrick-btn--primary { background: #31066f !important; border-color: #31066f !important; color: #f3f4f8 !important; }
.patrick-scope .patrick-btn--outline { border-color: #31066f !important; color: #31066f !important; }
.patrick-scope .patrick-header a { color: #31066f !important; }
/* === PATRICK NAV STABILIZER (place LAST) ===================== */
/* Force desktop to horizontal; keep mobile accordion behavior */

/* Base reset inside scope */
.patrick-scope .patrick-nav,
.patrick-scope .patrick-nav ul { list-style: none; margin: 0; padding: 0; }

/* Ensure the nav itself is visible */
.patrick-scope .patrick-nav { display: block !important; background: #333192; }

/* DESKTOP / TABLET ≥768px: horizontal main menu */
@media (min-width: 768px) {
  /* Kill any earlier "display:none" or column layout */
  .patrick-scope .patrick-nav > ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: center;
    gap: 1.25rem; /* fallback if token not present */
  }

  .patrick-scope .patrick-nav > ul > li {
    position: relative;
    margin: 0; /* spacing handled by gap */
  }

  /* Dropdowns: hover/focus to open */
  .patrick-scope .patrick-nav li > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background: #333192;
    box-shadow: 0 4px 8px rgba(0,0,0,.15);
    z-index: 1000;
  }
  .patrick-scope .patrick-nav li:hover > ul,
  .patrick-scope .patrick-nav li:focus-within > ul { display: block; }

  /* Flyout level-3 */
  .patrick-scope .patrick-nav li > ul > li { position: relative; }
  .patrick-scope .patrick-nav li > ul > li > ul {
    top: 0; left: 100%;
    display: none;
  }
  .patrick-scope .patrick-nav li > ul > li:hover > ul,
  .patrick-scope .patrick-nav li > ul > li:focus-within > ul { display: block; }
}

/* MOBILE <768px: keep accordion behavior (optional) */
@media (max-width: 767px) {
  /* Hide menu until toggled open (if you add a toggle later) */
  .patrick-scope .patrick-nav > ul {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    background: #333192;
  }
  .patrick-scope .patrick-nav.open > ul { display: flex; }

  /* Mobile dropdowns inline (no absolute positioning) */
  .patrick-scope .patrick-nav li > ul {
    position: relative;
    top: 0; left: 0;
    width: 100%;
    box-shadow: none;
    background: #444199;
    display: none; /* show when parent li gets .open via small JS, if desired */
  }
  .patrick-scope .patrick-nav li.open > ul { display: block; }
}
/* === END STABILIZER ========================================= */
/* PATRICK NAV — FINAL OVERRIDE (place last) */

/* Desktop/tablet ≥768px: force horizontal */
@media (min-width: 768px) {
  .patrick-scope .patrick-nav > ul[role="menubar"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.25rem !important;
  }
  .patrick-scope .patrick-nav > ul[role="menubar"] > li {
    margin: 0 !important;
    position: relative !important;
  }
  /* dropdowns behave like normal hover menus */
  .patrick-scope .patrick-nav li > ul[role="menu"] {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    min-width: 260px;
    background: #333192;
    box-shadow: 0 4px 8px rgba(0,0,0,.15);
    z-index: 1000;
  }
  .patrick-scope .patrick-nav li:hover > ul[role="menu"],
  .patrick-scope .patrick-nav li:focus-within > ul[role="menu"] { display: block; }
  .patrick-scope .patrick-nav li > ul[role="menu"] > li { position: relative; }
  .patrick-scope .patrick-nav li > ul[role="menu"] > li > ul[role="menu"] {
    top: 0; left: 100%; display: none;
  }
  .patrick-scope .patrick-nav li > ul[role="menu"] > li:hover > ul[role="menu"],
  .patrick-scope .patrick-nav li > ul[role="menu"] > li:focus-within > ul[role="menu"] { display: block; }
}

/* Mobile <768px: keep accordion/column behavior */
@media (max-width: 767px) {
  .patrick-scope .patrick-nav > ul[role="menubar"] {
    display: none;              /* shown when you add .open on the nav */
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    background: #333192;
  }
  .patrick-scope .patrick-nav.open > ul[role="menubar"] { display: flex; }
  .patrick-scope .patrick-nav li > ul[role="menu"] {
    position: relative; top: 0; left: 0; width: 100%;
    box-shadow: none; background: #444199; display: none;
  }
  .patrick-scope .patrick-nav li.open > ul[role="menu"] { display: block; }
}

/* ===========================
   Homepage Banner Carousel
=========================== */
.carousel-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
}
.carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  padding: 3rem;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
}
.carousel-slide-content {
  max-width: 55%;
  color: #fff;
}
.carousel-slide-content h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0 0 0.75rem;
  line-height: 1.2;
}
.carousel-slide-content p {
  font-size: 1rem;
  margin: 0 0 1.5rem;
  opacity: 0.85;
}
/* Prev / Next buttons */
.carousel-prev,
.carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s;
}
.carousel-prev:hover,
.carousel-next:hover { background: rgba(255,255,255,0.35); }
.carousel-prev { left: 1rem; }
.carousel-next { right: 1rem; }
/* Dot indicators */
.carousel-dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.carousel-dot.active {
  background: #fff;
  transform: scale(1.2);
}
@media (max-width: 768px) {
  .carousel-slide-content { max-width: 90%; }
  .carousel-prev { left: 0.5rem; }
  .carousel-next { right: 0.5rem; }
}
/* === IAP2 Banner Carousel === */
.iap2-banner { position: relative; width: 100%; overflow: hidden; border-radius: 8px; }
.iap2-banner-track { display: flex; transition: transform 0.5s ease; }
.iap2-banner-slide { flex: 0 0 100%; min-width: 100%; min-height: 380px; display: flex; align-items: center; padding: 3rem; box-sizing: border-box; background-size: cover; background-position: center; }
.iap2-banner-overlay { background: rgba(51,49,146,0.72); padding: 2.5rem; border-radius: 6px; max-width: 580px; }
.iap2-banner-eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.65); margin: 0 0 0.4rem; }
.iap2-banner-title { font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: bold; color: #fff; margin: 0 0 0.6rem; line-height: 1.2; }
.iap2-banner-desc { font-size: 0.95rem; color: rgba(255,255,255,0.85); margin: 0 0 1.25rem; line-height: 1.5; }
.iap2-banner-prev, .iap2-banner-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.45); color: #fff; width: 42px; height: 42px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background 0.2s; }
.iap2-banner-prev:hover, .iap2-banner-next:hover { background: rgba(255,255,255,0.38); }
.iap2-banner-prev { left: 1rem; }
.iap2-banner-next { right: 1rem; }
.iap2-banner-dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.iap2-banner-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.4); border: none; cursor: pointer; padding: 0; transition: background 0.2s, transform 0.2s; }
.iap2-banner-dot.active { background: #fff; transform: scale(1.3); }
@media (max-width: 600px) {
  .iap2-banner-slide { padding: 1.5rem; min-height: 320px; }
  .iap2-banner-overlay { padding: 1.25rem; }
}


/* ============================================================
   IAP2 Canada — Core Values Awards Page
   Paste the <style> block into your Wild Apricot custom CSS,
   and the HTML below into the page content editor.
   ============================================================ */

:root {
  --iap-purple: #333192;
  --iap-purple-dark: #1B1464;
  --iap-purple-mid: #444199;
  --iap-deep: #31066f;
  --iap-orange: #F15C22;
  --iap-orange2: #F09819;
  --iap-bg: #F9F8FD;
  --iap-bg-white: #ffffff;
  --iap-text: #333333;
  --iap-text-muted: #555555;
  --iap-border: #dddddd;
  --iap-font-body: Inter, Helvetica, Arial, sans-serif;
  --iap-font-head: 'Open Sans', Helvetica, Arial, sans-serif;
}

.cva-wrap {
  font-family: var(--iap-font-body);
  color: var(--iap-text);
  font-size: 15px;
  background: var(--iap-bg);
  padding: 0 0 2rem;
}

/* ── Hero ── */
.cva-hero {
  background: var(--iap-purple);
  padding: 2.75rem 2rem 2.75rem 2.3rem;
  text-align: center;
}
.cva-hero-eye {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.6);
  margin-bottom: .4rem;
}
.cva-hero h1 {
  font-family: var(--iap-font-head);
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: .5rem;
  line-height: 1.15;
}
.cva-hero p {
  font-size: .9rem;
  color: rgba(255,255,255,.82);
  max-width: 540px;
  margin: 0 auto 1.25rem;
  line-height: 1.6;
}
.cva-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.cva-pill {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  padding: 5px 13px;
  border-radius: 20px;
  font-size: 12px;
}
.cva-pill strong { font-weight: 600; }
.cva-hero-ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* button-87 (your existing gradient CTA style) */
.cva-btn-primary {
  display: inline-block;
  padding: 10px 22px;
  text-align: center;
  text-transform: uppercase;
  transition: .5s;
  background-size: 200% auto;
  color: #fff !important;
  border: none;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .03em;
  box-shadow: 0 0 14px -7px #F09819;
  background-image: linear-gradient(45deg, #FF512F 0%, #F09819 51%, #FF512F 100%);
  cursor: pointer;
  border-radius: 4px;
  text-decoration: none;
}
.cva-btn-primary:hover { background-position: right center; }

.cva-btn-ghost {
  display: inline-block;
  padding: 9px 22px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .03em;
  color: #fff;
  border: 2px solid rgba(255,255,255,.55);
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  text-decoration: none;
  transition: background .2s;
}
.cva-btn-ghost:hover { background: rgba(255,255,255,.1); }

/* ── Tab bar ── */
.cva-tab-bar {
  display: flex;
  flex-wrap: wrap;
  background: var(--iap-bg-white);
  border-bottom: 3px solid var(--iap-purple);
  padding-left: 5px;
}
.cva-tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  color: var(--iap-text-muted);
  background: #f0f0f6;
  border: 1px solid var(--iap-border);
  border-bottom: none;
  margin-right: 3px;
  margin-bottom: 0;
  border-radius: 3px 3px 0 0;
  transition: background .15s;
  user-select: none;
}
.cva-tab:hover { background: #e4e2f5; color: var(--iap-purple); }
.cva-tab.active {
  background: var(--iap-bg-white);
  color: var(--iap-purple);
  border-bottom: 3px solid var(--iap-bg-white);
  margin-bottom: -3px;
}

/* ── Panels ── */
.cva-panel { display: none; padding: 1.5rem 1rem 0 1.3rem; }
.cva-panel.active { display: block; }

/* ── Typography ── */
.cva-sec-h {
  font-family: var(--iap-font-head);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--iap-deep);
  margin-bottom: .875rem;
}
.cva-body-p {
  font-size: 14px;
  color: var(--iap-text-muted);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.cva-div {
  border: none;
  border-top: 1px solid var(--iap-border);
  margin: 1.25rem 0;
}

/* ── Category cards ── */
.cva-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}
.cva-cat-card {
  background: var(--iap-bg-white);
  border: 1px solid var(--iap-border);
  border-top: 4px solid var(--iap-purple);
  border-radius: 3px;
  padding: 1rem;
}
.cva-cat-card h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--iap-purple);
  margin-bottom: 5px;
  font-family: var(--iap-font-head);
}
.cva-cat-card p {
  font-size: 13px;
  color: var(--iap-text-muted);
  line-height: 1.5;
}

/* ── Note/callout ── */
.cva-note {
  background: #eeedf8;
  border-left: 4px solid var(--iap-purple);
  border-radius: 0 3px 3px 0;
  padding: .875rem 1rem;
  font-size: 13px;
  color: var(--iap-deep);
  margin-top: 1rem;
  line-height: 1.5;
}
.cva-note strong { font-weight: 700; }

/* ── Why apply grid ── */
.cva-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.cva-why-card {
  background: var(--iap-bg-white);
  border: 1px solid var(--iap-border);
  border-radius: 3px;
  padding: .875rem;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
}
.cva-why-card .cva-ico {
  font-size: 22px;
  color: var(--iap-purple);
  margin-bottom: 6px;
}
.cva-why-card p {
  font-size: 12px;
  color: var(--iap-text-muted);
  line-height: 1.4;
}

/* ── Steps ── */
.cva-steps { display: flex; flex-direction: column; gap: 1rem; }
.cva-step { display: flex; gap: .875rem; align-items: flex-start; }
.cva-sn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--iap-purple);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  font-family: var(--iap-font-head);
}
.cva-step-body h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--iap-deep);
  margin-bottom: 3px;
  font-family: var(--iap-font-head);
}
.cva-step-body p {
  font-size: 13px;
  color: var(--iap-text-muted);
  line-height: 1.55;
}

/* ── Kit cards ── */
.cva-kit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 1.25rem;
}
.cva-kit {
  background: #f3f2fc;
  border: 1px solid #c8c5e8;
  border-radius: 3px;
  padding: 1rem;
}
.cva-kit h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--iap-purple);
  margin-bottom: 6px;
  font-family: var(--iap-font-head);
}
.cva-kit ul { list-style: none; padding: 0; }
.cva-kit li { font-size: 13px; color: var(--iap-text-muted); padding: 2px 0; }
.cva-kit li::before { content: "› "; color: var(--iap-orange); font-weight: 700; }
.cva-kit a {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--iap-orange);
  font-weight: 600;
  text-decoration: underline;
}

/* ── Timeline table ── */
.cva-tl-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cva-tl-table tr { border-bottom: 1px solid var(--iap-border); }
.cva-tl-table tr:last-child { border-bottom: none; }
.cva-tl-table td { padding: .65rem .5rem; vertical-align: top; line-height: 1.5; }
.cva-tl-date {
  width: 135px;
  font-weight: 700;
  color: var(--iap-purple);
  white-space: nowrap;
  font-size: 13px;
}
.cva-tl-evt { color: var(--iap-text); font-size: 14px; }
.cva-tl-sub { font-size: 12px; color: var(--iap-text-muted); margin-top: 2px; }
.cva-tl-key { background: #f3f2fc; }
.cva-tl-key .cva-tl-date { color: var(--iap-orange); }

/* ── Past recipients ── */
.cva-past-wrap { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .75rem; }
.cva-past-yr {
  background: var(--iap-bg-white);
  border: 1px solid var(--iap-border);
  border-radius: 3px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--iap-purple);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.cva-past-yr:hover { background: var(--iap-purple); color: #fff; }

.cva-link-o { color: var(--iap-orange); font-weight: 600; text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .cva-why-grid { grid-template-columns: repeat(2, 1fr); }
  .cva-kit-row { grid-template-columns: 1fr; }
  .cva-tab { font-size: 11px; padding: 8px 10px; }
}
/* fix for CVA page */
.cva-panel {
  max-height: none !important;
  overflow: visible !important;
}
.cva-why-grid {
  display: grid !important;
  max-height: none !important;
  overflow: visible !important;
}
.cva-why-card, .cva-why-card .cva-ico, .cva-why-card p {
  display: block !important;
  visibility: visible !important;
  max-height: none !important;
  overflow: visible !important;
}




//** new 2026 **//
/* ================================================================
   IAP2 CANADA — NEW DESIGN SYSTEM  (Homepage Redesign v2.0)
   ================================================================

   HOW TO USE
   ──────────
   Paste this entire block at the END of your Wild Apricot
   custom CSS editor. Newer rules at the bottom of a stylesheet
   take precedence, so new components will override old ones as
   you migrate each page.

   FONTS
   ─────
   Add this ONE LINE to your Wild Apricot site header
   (Admin › Website › Look & Feel › Custom Code › <head> tag):

   <link href="https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">

   WHAT TO RETIRE FROM OLD CSS AS YOU MIGRATE
   ───────────────────────────────────────────
   Once all pages are on the new design you can delete these
   old blocks (search by the comment label):

   OLD BLOCK                         REPLACED BY
   ── Global Container and Breakpoints ── → :root + .container below
   ── Footer Styles ──────────────────── → footer + .footer-grid below
   ── Twitter Widget Reset ───────────── → no longer needed
   ── Login Button ───────────────────── → .btn-fill / .btn-outline
   ── Custom Orange Button ───────────── → .btn-hero-teal
   ── Patrick Hero Customization ─────── → .hero section below
   ── Patrick Main Navigation ────────── → .navbar section below
   ── Consolidated Nav Styles ────────── → .navbar section below
   (all later nav block duplicates)

   KNOWN CONFLICTS TO WATCH DURING ROLLOUT
   ────────────────────────────────────────
   .container   — This redefines max-width to 1200px (old = 1440px
                  via --site-max-width). Low risk: new homepage HTML
                  uses its own .container div. Once fully migrated,
                  remove the old .container rule.

   footer       — Element selector; Wild Apricot's own footer uses
                  .zoneFooterOuter for its background so direct
                  conflict is minimal. Monitor on rollout.

   GLOBAL RESETS INTENTIONALLY LEFT OUT OF THIS BLOCK
   ────────────────────────────────────────────────────
   The aggressive universal reset ( *, *::before, *::after ) and
   bare element overrides ( a { } / img { } / body { } ) are NOT
   included here because they would affect every existing page
   the moment you paste this CSS. They are handled at the
   component level in the rules below.

   When you fully retire the old CSS and go live on the new
   design, add these back at the very top:

     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     html  { scroll-behavior: smooth; }
     body  { font-family: 'Inter', Helvetica, Arial, sans-serif;
             color: #222222; line-height: 1.6;
             overflow-x: hidden; background: #F9F8FD; }
     a     { text-decoration: none; color: inherit; }
     img   { max-width: 100%; display: block; }

   ================================================================ */


/* ── Design Tokens ─────────────────────────────────────────────
   Added as a second :root block — CSS merges these with any
   existing :root variables; later values win on duplicates.
   ─────────────────────────────────────────────────────────────── */
:root {
  /* IAP2 Canada brand purples */
  --iap-purple-deep:  #1B1464;   /* darkest — hero gradient start, utility bar */
  --iap-purple-main:  #333192;   /* primary — nav, footer, buttons             */
  --iap-purple-mid:   #444199;   /* medium  — dropdowns, hero gradient end      */
  --iap-purple-light: #EEEDF8;   /* tint    — section backgrounds, card bgs    */

  /* IAP2 Canada brand orange */
  --iap-orange:       #F15C22;   /* primary orange accent                       */
  --iap-orange-dark:  #C94A18;   /* hover / active state                        */
  --iap-orange-light: #FEF0E9;   /* light tint for hover backgrounds            */
  --iap-orange-grad:  linear-gradient(45deg, #FF512F 0%, #F09819 51%, #FF512F 100%);

  /* Surfaces */
  --iap-stats-bg:     #EEF0FA;   /* stats strip                                 */
  --iap-body-bg:      #F9F8FD;   /* page background                             */
  --iap-border:       #E2E1EF;   /* subtle borders                              */
  --iap-white:        #FFFFFF;

  /* Typography */
  --iap-text:         #222222;
  --iap-text-muted:   #555555;
  --iap-ff-display:   'Sora',  Helvetica, Arial, sans-serif;
  --iap-ff-body:      'Inter', Helvetica, Arial, sans-serif;

  /* Layout */
  --iap-max-w:        1200px;
}


/* ── Scroll behaviour (safe global add) ──────────────────────── */
html { scroll-behavior: smooth; }


/* ================================================================
   LAYOUT
   ================================================================ */

/* Centered content wrapper for all new sections.
   NOTE: overrides the old .container (1440px → 1200px).
   Old pages are unaffected until they use this class. */
.container {
  max-width: var(--iap-max-w);
  margin: 0 auto;
  padding: 0 36px;
  box-sizing: border-box;
}


/* ================================================================
   UTILITY BAR  (top strip: Français · Contact · My Account)
   ================================================================ */
.util-bar {
  background: var(--iap-purple-deep);
  padding: 7px 0;
  font-size: 12.5px;
  font-family: var(--iap-ff-body);
}
.util-bar .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--iap-max-w);
  margin: 0 auto;
  padding: 0 36px;
}
.util-bar a {
  color: rgba(255,255,255,.70);
  text-decoration: none;
  transition: color .2s;
  margin-left: 22px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.util-bar a:first-child { margin-left: 0; }
.util-bar a:hover { color: var(--iap-orange); }
.util-left {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.42);
  font-size: 12px;
  letter-spacing: .04em;
}
.util-right { display: flex; align-items: center; }


/* ================================================================
   NAVBAR
   ================================================================ */
.navbar {
  background: var(--iap-white);
  border-bottom: 1px solid var(--iap-border);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
  box-sizing: border-box;
}
.nav-inner {
  display: flex;
  align-items: center;
  height: 68px;
  max-width: var(--iap-max-w);
  margin: 0 auto;
  padding: 0 36px;
  gap: 4px;
  box-sizing: border-box;
}

/* Logo */
.nav-logo { text-decoration: none; }
.nav-logo .logo-text {
  font-family: var(--iap-ff-display);
  font-size: 21px;
  font-weight: 800;
  color: var(--iap-purple-main);
  letter-spacing: -.3px;
  white-space: nowrap;
}
.nav-logo .logo-text em {
  color: var(--iap-orange);
  font-style: normal;
}

/* Top-level link list */
.nav-links {
  display: flex;
  list-style: none;
  margin: 0 0 0 20px;
  padding: 0;
  height: 68px;
}
.nav-item {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}
.nav-link {
  padding: 0 14px;
  font-family: var(--iap-ff-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--iap-text);
  cursor: pointer;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color .2s;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  text-decoration: none;
  box-sizing: border-box;
}
.nav-item:hover .nav-link {
  color: var(--iap-purple-main);
  border-bottom-color: var(--iap-orange);
}

/* Chevron icon inside nav-link */
.chev {
  width: 13px;
  height: 13px;
  transition: transform .25s;
  flex-shrink: 0;
}
.nav-item:hover .chev { transform: rotate(180deg); }

/* ── Standard Dropdown ──────────────────────────────────────── */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--iap-white);
  border: 1px solid var(--iap-border);
  border-top: 3px solid var(--iap-purple-main);
  border-radius: 0 0 10px 10px;
  min-width: 210px;
  box-shadow: 0 10px 36px rgba(0,0,0,.10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 1001;
  padding: 6px 0;
}
.nav-item:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown a {
  display: block;
  padding: 9px 20px;
  font-family: var(--iap-ff-body);
  font-size: 13.5px;
  color: var(--iap-text);
  text-decoration: none;
  transition: background .15s, color .15s, padding-left .15s;
}
.dropdown a:hover {
  background: var(--iap-orange-light);
  color: var(--iap-orange);
  padding-left: 26px;
}

/* ── Mega Menu ──────────────────────────────────────────────── */
.mega {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--iap-white);
  border: 1px solid var(--iap-border);
  border-top: 3px solid var(--iap-purple-main);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 14px 48px rgba(0,0,0,.12);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 1001;
  padding: 28px 28px 20px;
  display: grid;
  gap: 4px 28px;
  white-space: normal;
}
.nav-item:hover .mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.mega-3 { grid-template-columns: repeat(3, 1fr); min-width: 680px; }
.mega-2 { grid-template-columns: repeat(2, 1fr); min-width: 440px; }

.mega-col h4 {
  font-family: var(--iap-ff-body);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--iap-orange);
  font-weight: 700;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--iap-border);
}
.mega-col a {
  display: block;
  padding: 7px 10px;
  font-family: var(--iap-ff-body);
  font-size: 13px;
  color: var(--iap-text);
  text-decoration: none;
  border-radius: 6px;
  transition: all .15s;
}
.mega-col a:hover {
  background: var(--iap-orange-light);
  color: var(--iap-orange);
  padding-left: 16px;
}

/* ── Nav CTA Buttons ────────────────────────────────────────── */
.nav-ctas {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}
.btn-outline {
  border: 1.5px solid var(--iap-purple-main);
  color: var(--iap-purple-main);
  padding: 7px 16px;
  border-radius: 7px;
  font-family: var(--iap-ff-body);
  font-size: 13.5px;
  font-weight: 500;
  transition: all .2s;
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
  text-decoration: none;
  box-sizing: border-box;
}
.btn-outline:hover {
  background: var(--iap-purple-main);
  color: white;
}
.btn-fill {
  background: var(--iap-purple-main);
  color: white;
  padding: 7px 18px;
  border-radius: 7px;
  font-family: var(--iap-ff-body);
  font-size: 13.5px;
  font-weight: 600;
  transition: all .2s;
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
  text-decoration: none;
  border: 1.5px solid var(--iap-purple-main);
  box-sizing: border-box;
}
.btn-fill:hover {
  background: var(--iap-purple-deep);
  border-color: var(--iap-purple-deep);
}

/* ── Hamburger (mobile) ─────────────────────────────────────── */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  margin-left: auto;
  padding: 8px;
  background: none;
  border: none;
}
.hamburger span {
  width: 24px;
  height: 2px;
  background: var(--iap-text);
  border-radius: 2px;
  transition: all .3s;
  display: block;
}
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile Nav Panel ───────────────────────────────────────── */
.mobile-nav {
  display: none;
  position: fixed;
  top: 75px;
  left: 0;
  right: 0;
  background: white;
  z-index: 999;
  padding: 16px 0 32px;
  box-shadow: 0 16px 40px rgba(0,0,0,.15);
  overflow-y: auto;
  max-height: calc(100vh - 75px);
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block;
  padding: 11px 24px;
  font-family: var(--iap-ff-body);
  font-size: 14.5px;
  color: var(--iap-text);
  border-bottom: 1px solid var(--iap-border);
  font-weight: 500;
  text-decoration: none;
}
.mobile-nav a.sub {
  padding-left: 40px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--iap-text-muted);
}
.mobile-nav a:hover {
  color: var(--iap-purple-main);
  background: var(--iap-purple-light);
}
.mobile-section-head {
  padding: 13px 24px 5px;
  font-family: var(--iap-ff-body);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--iap-purple-mid);
  font-weight: 700;
  background: var(--iap-purple-light);
}


/* ================================================================
   HERO SECTION
   ================================================================ */
.hero {
  background: linear-gradient(
    140deg,
    var(--iap-purple-deep)  0%,
    var(--iap-purple-main) 55%,
    var(--iap-purple-mid)  100%
  );
  position: relative;
  overflow: hidden;
}

/* Orange glow top-right */
.hero::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(241,92,34,.18) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Soft white glow bottom-centre */
.hero::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: 240px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(255,255,255,.04) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
  align-items: center;
  padding: 84px 0 90px;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

/* Pill eyebrow */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  color: rgba(255,255,255,.90);
  padding: 5px 16px;
  border-radius: 100px;
  font-family: var(--iap-ff-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hero-eyebrow::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--iap-orange);
  border-radius: 50%;
  flex-shrink: 0;
}

/* H1 */
.hero-title {
  font-family: var(--iap-ff-display);
  font-size: 52px;
  font-weight: 800;
  color: white;
  line-height: 1.08;
  letter-spacing: -1.2px;
  margin: 0 0 22px;
}
.hero-title em {
  color: var(--iap-orange);
  font-style: normal;
}

/* Subtext */
.hero-sub {
  font-family: var(--iap-ff-body);
  font-size: 17px;
  color: rgba(255,255,255,.78);
  line-height: 1.75;
  max-width: 520px;
  margin: 0 0 38px;
}

/* CTA row */
.hero-btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Primary CTA — orange gradient (matches your .button-87 style) */
.btn-hero-teal {
  background: var(--iap-orange-grad);
  background-size: 200% auto;
  color: white;
  padding: 14px 30px;
  border-radius: 9px;
  font-family: var(--iap-ff-body);
  font-size: 15px;
  font-weight: 600;
  border: none;
  transition: background-position .4s ease;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 0 18px -6px #F09819;
}
.btn-hero-teal:hover { background-position: right center; }

/* Ghost / outline CTA */
.btn-hero-ghost {
  background: transparent;
  color: white;
  padding: 14px 30px;
  border-radius: 9px;
  font-family: var(--iap-ff-body);
  font-size: 15px;
  font-weight: 600;
  border: 2px solid rgba(255,255,255,.35);
  transition: all .25s;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
}
.btn-hero-ghost:hover {
  background: rgba(255,255,255,.10);
  border-color: white;
}


/* ================================================================
   ANNOUNCEMENT CAROUSEL  (inside hero)
   ================================================================ */
.carousel-wrap {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 18px;
  overflow: hidden;
}
.carousel-hdr {
  padding: 14px 22px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  font-family: var(--iap-ff-body);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: rgba(255,255,255,.45);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.carousel-nav-btns { display: flex; gap: 6px; }
.c-btn {
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 6px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.70);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.c-btn:hover { background: rgba(255,255,255,.18); color: white; }

.carousel-slides { position: relative; min-height: 210px; }
.carousel-slide { display: none; padding: 26px 22px 22px; animation: iap-cfade .45s ease; }
.carousel-slide.active { display: block; }

@keyframes iap-cfade {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.slide-tag {
  display: inline-block;
  background: var(--iap-orange);
  color: white;
  font-family: var(--iap-ff-body);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .10em;
  padding: 3px 11px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.slide-title {
  font-family: var(--iap-ff-display);
  font-size: 17px;
  font-weight: 700;
  color: white;
  line-height: 1.3;
  margin: 0 0 10px;
}
.slide-desc {
  font-family: var(--iap-ff-body);
  font-size: 13px;
  color: rgba(255,255,255,.68);
  line-height: 1.6;
  margin: 0 0 18px;
}
.slide-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--iap-ff-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--iap-orange);
  text-decoration: none;
  transition: gap .2s;
  letter-spacing: .01em;
}
.slide-cta:hover { gap: 10px; }
.slide-cta::after { content: '→'; }

/* Dots footer */
.carousel-ftr {
  padding: 14px 22px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.c-dot {
  height: 6px;
  width: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.28);
  cursor: pointer;
  border: none;
  transition: all .25s;
  padding: 0;
}
.c-dot.active {
  background: var(--iap-orange);
  width: 22px;
}


/* ================================================================
   STATS STRIP  (FindLaw-style numbers on a light band)
   ================================================================ */
.stats {
  background: var(--iap-stats-bg);
  border-bottom: 1px solid #CCCCE8;
  padding: 48px 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  text-align: center;
}
.stat-item {
  padding: 20px 28px;
  border-right: 1px solid #CCCCE8;
  box-sizing: border-box;
}
.stat-item:last-child { border-right: none; }
.stat-num {
  font-family: var(--iap-ff-display);
  font-size: 46px;
  font-weight: 800;
  color: var(--iap-purple-main);
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -1px;
}
.stat-label {
  font-family: var(--iap-ff-body);
  font-size: 14px;
  color: var(--iap-text-muted);
  font-weight: 500;
}
.stat-accent { color: var(--iap-orange); }


/* ================================================================
   SHARED SECTION UTILITIES
   ================================================================ */
.eyebrow {
  font-family: var(--iap-ff-body);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--iap-orange);
  font-weight: 700;
  margin: 0 0 12px;
  display: block;
}
.sec-title {
  font-family: var(--iap-ff-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--iap-text);
  line-height: 1.18;
  margin: 0 0 16px;
  letter-spacing: -.4px;
}
.sec-sub {
  font-family: var(--iap-ff-body);
  font-size: 16px;
  color: var(--iap-text-muted);
  line-height: 1.75;
  margin: 0;
}
.sec-hdr { margin-bottom: 48px; }
.sec-hdr.center { text-align: center; }
.sec-hdr.center .sec-sub { max-width: 600px; margin-left: auto; margin-right: auto; }


/* ================================================================
   WHAT IS P2  (two-column explainer section)
   ================================================================ */
.p2-sec {
  background: white;
  padding: 88px 0;
}
.p2-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.p2-text p {
  font-family: var(--iap-ff-body);
  font-size: 16px;
  color: var(--iap-text-muted);
  line-height: 1.85;
  margin: 0 0 18px;
}
.p2-text p strong { color: var(--iap-text); font-weight: 600; }
.p2-text p em     { color: var(--iap-orange); font-style: italic; font-weight: 500; }

.p2-panel {
  background: linear-gradient(160deg, var(--iap-purple-light) 0%, #E8E7F5 100%);
  border-radius: 20px;
  padding: 36px;
  box-sizing: border-box;
}
.p2-panel h3 {
  font-family: var(--iap-ff-display);
  font-size: 19px;
  font-weight: 700;
  color: var(--iap-purple-main);
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(51,49,146,.15);
}
.p2-card {
  background: white;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 14px;
  box-shadow: 0 2px 14px rgba(51,49,146,.08);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-sizing: border-box;
}
.p2-card:last-child { margin-bottom: 0; }
.p2-card-icon { font-size: 22px; flex-shrink: 0; margin-top: 1px; }
.p2-card h4 {
  font-family: var(--iap-ff-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--iap-purple-main);
  margin: 0 0 5px;
}
.p2-card p {
  font-family: var(--iap-ff-body);
  font-size: 13px;
  color: var(--iap-text-muted);
  line-height: 1.55;
  margin: 0;
}


/* ================================================================
   FLIP CARDS  (HubEngage-style solutions grid)
   ================================================================ */
.solutions-sec {
  background: var(--iap-purple-light);
  padding: 88px 0;
}
.flip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.flip-card {
  height: 240px;
  perspective: 1100px;
  cursor: pointer;
}
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .65s cubic-bezier(.4,0,.2,1);
  transform-style: preserve-3d;
}
.flip-card:hover .flip-inner,
.flip-card:focus .flip-inner  { transform: rotateY(180deg); }

.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 30px;
  box-sizing: border-box;
}

/* Front face */
.flip-front {
  background: white;
  border: 1px solid rgba(51,49,146,.10);
  box-shadow: 0 4px 20px rgba(51,49,146,.07);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow .3s;
}
.flip-card:hover .flip-front { box-shadow: 0 14px 44px rgba(51,49,146,.14); }

/* Back face */
.flip-back {
  background: linear-gradient(145deg, var(--iap-purple-main), var(--iap-purple-deep));
  transform: rotateY(180deg);
  display: flex;
  flex-direction: column;
}

/* Icon badge on front */
.fi {
  width: 46px;
  height: 46px;
  background: var(--iap-purple-light);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--iap-purple-main);
  flex-shrink: 0;
}
.fi svg { width: 22px; height: 22px; }

.ff-title {
  font-family: var(--iap-ff-display);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--iap-text);
  margin: 0;
}
.ff-hint {
  font-family: var(--iap-ff-body);
  font-size: 12px;
  color: var(--iap-text-muted);
  margin-top: auto;
}

/* Back face content */
.fb-title {
  font-family: var(--iap-ff-display);
  font-size: 16px;
  font-weight: 700;
  color: white;
  margin: 0 0 10px;
}
.fb-desc {
  font-family: var(--iap-ff-body);
  font-size: 13px;
  color: rgba(255,255,255,.78);
  line-height: 1.6;
  flex: 1;
  margin: 0;
}
.fb-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--iap-orange);
  color: white;
  padding: 9px 18px;
  border-radius: 7px;
  font-family: var(--iap-ff-body);
  font-size: 13px;
  font-weight: 600;
  margin-top: 16px;
  align-self: flex-start;
  text-decoration: none;
  transition: background .2s;
}
.fb-cta:hover { background: var(--iap-orange-dark); }


/* ================================================================
   MEMBER BENEFITS CARDS  (hover-lift grid)
   ================================================================ */
.benefits-sec {
  background: white;
  padding: 88px 0;
}
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.benefit-card {
  border: 1px solid var(--iap-border);
  border-radius: 14px;
  padding: 28px;
  transition: all .25s;
  display: block;
  color: inherit;
  text-decoration: none;
  box-sizing: border-box;
}
.benefit-card:hover {
  border-color: var(--iap-orange);
  box-shadow: 0 8px 36px rgba(241,92,34,.10);
  transform: translateY(-4px);
}
.b-icon {
  width: 50px;
  height: 50px;
  background: var(--iap-purple-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--iap-purple-main);
  margin-bottom: 18px;
}
.b-icon svg { width: 24px; height: 24px; }
.b-title {
  font-family: var(--iap-ff-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--iap-text);
  margin: 0 0 9px;
}
.b-desc {
  font-family: var(--iap-ff-body);
  font-size: 13.5px;
  color: var(--iap-text-muted);
  line-height: 1.65;
  margin: 0 0 18px;
}
.b-link {
  font-family: var(--iap-ff-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--iap-orange);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap .2s;
  text-decoration: none;
}
.b-link::after { content: '→'; }
.benefit-card:hover .b-link { gap: 8px; }


/* ================================================================
   EVENTS + NEWSLETTER ROW
   ================================================================ */
.events-sec {
  background: var(--iap-purple-light);
  padding: 88px 0;
}
.events-nl-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 64px;
}

/* Event list */
.events-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-top: 4px;
}
.event-row {
  background: white;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: all .22s;
  border: 1.5px solid transparent;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}
.event-row:hover {
  border-color: var(--iap-orange);
  box-shadow: 0 6px 22px rgba(241,92,34,.12);
  transform: translateX(5px);
}

/* Date badge */
.ev-date { flex-shrink: 0; text-align: center; width: 46px; }
.ev-month {
  font-family: var(--iap-ff-body);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--iap-orange);
}
.ev-day {
  font-family: var(--iap-ff-display);
  font-size: 30px;
  font-weight: 800;
  color: var(--iap-purple-main);
  line-height: 1;
}
.ev-sep { width: 1px; height: 40px; background: var(--iap-border); flex-shrink: 0; }
.ev-info { flex: 1; min-width: 0; }
.ev-type {
  font-family: var(--iap-ff-body);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--iap-text-muted);
  margin-bottom: 3px;
}
.ev-name {
  font-family: var(--iap-ff-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--iap-text);
  line-height: 1.3;
  margin-bottom: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ev-loc {
  font-family: var(--iap-ff-body);
  font-size: 12px;
  color: var(--iap-text-muted);
}
.ev-arr { color: var(--iap-orange); font-size: 20px; transition: transform .2s; flex-shrink: 0; }
.event-row:hover .ev-arr { transform: translateX(4px); }

/* View all link */
.events-all-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  background: transparent;
  border: 2px dashed var(--iap-purple-mid);
  border-radius: 12px;
  color: var(--iap-purple-main);
  font-family: var(--iap-ff-body);
  font-size: 14px;
  font-weight: 600;
  transition: all .2s;
  margin-top: 4px;
  text-decoration: none;
}
.events-all-link:hover {
  background: white;
  border-color: var(--iap-orange);
  color: var(--iap-orange);
}

/* ── Newsletter Card ────────────────────────────────────────── */
.nl-card {
  background: linear-gradient(145deg, var(--iap-purple-deep) 0%, var(--iap-purple-main) 100%);
  border-radius: 20px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 16px 48px rgba(27,20,100,.30);
  box-sizing: border-box;
}
.nl-card h3 {
  font-family: var(--iap-ff-display);
  font-size: 22px;
  font-weight: 700;
  color: white;
  line-height: 1.3;
  margin: 0;
}
.nl-card p {
  font-family: var(--iap-ff-body);
  font-size: 14px;
  color: rgba(255,255,255,.72);
  line-height: 1.7;
  margin: 0;
}
.nl-row { display: flex; gap: 8px; }
.nl-input {
  flex: 1;
  padding: 11px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.10);
  color: white;
  font-family: var(--iap-ff-body);
  font-size: 13.5px;
  outline: none;
  min-width: 0;
  box-sizing: border-box;
}
.nl-input::placeholder { color: rgba(255,255,255,.45); }
.nl-input:focus { border-color: var(--iap-orange); background: rgba(255,255,255,.15); }

/* Subscribe button */
.btn-teal {
  background: var(--iap-orange);
  color: white;
  padding: 11px 20px;
  border-radius: 8px;
  font-family: var(--iap-ff-body);
  font-size: 13.5px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background .2s;
  white-space: nowrap;
}
.btn-teal:hover { background: var(--iap-orange-dark); }

.nl-divider { height: 1px; background: rgba(255,255,255,.12); }

/* Social icons row */
.socials { display: flex; gap: 10px; }
.soc-btn {
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,.10);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  border: 1px solid rgba(255,255,255,.18);
  transition: background .2s;
  text-decoration: none;
}
.soc-btn:hover { background: rgba(255,255,255,.22); }
.soc-btn svg { width: 17px; height: 17px; }

.nl-newsletter-link {
  font-family: var(--iap-ff-body);
  font-size: 12.5px;
  color: rgba(255,255,255,.50);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  transition: color .2s;
}
.nl-newsletter-link:hover { color: var(--iap-orange); }


/* ================================================================
   FOOTER
   Using .hp-footer div instead of the footer element to avoid
   conflicting with Wild Apricot's own footer element styling.
   ================================================================ */
.hp-footer {
  background: var(--iap-purple-main);
  color: rgba(255,255,255,.65);
  padding: 72px 0 0;
  font-family: var(--iap-ff-body);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  box-sizing: border-box;
}

/* Brand column */
.f-brand .brand-name {
  font-family: var(--iap-ff-display);
  font-size: 22px;
  font-weight: 800;
  color: white;
  margin: 0 0 14px;
}
.f-brand .brand-name em { color: var(--iap-orange); font-style: normal; }
.f-brand p {
  font-size: 13.5px;
  line-height: 1.75;
  margin: 0 0 22px;
}

/* Language switcher button */
.f-lang {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  color: rgba(255,255,255,.80);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  transition: all .2s;
  text-decoration: none;
}
.f-lang:hover { background: rgba(255,255,255,.18); color: white; }
.f-lang svg { width: 14px; height: 14px; }

/* Link columns */
.f-col h4 {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: white;
  margin: 0 0 18px;
}
.f-col a {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,.60);
  padding: 4px 0;
  transition: color .2s;
  text-decoration: none;
}
.f-col a:hover { color: var(--iap-orange); }

/* Bottom bar */
.footer-bottom {
  padding: 22px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom a {
  color: rgba(255,255,255,.50);
  transition: color .2s;
  margin-left: 14px;
  text-decoration: none;
}
.footer-bottom a:hover { color: var(--iap-orange); }
.powered { color: rgba(255,255,255,.35); }


/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */

/* ── Tablet landscape (≤1100px) ─────────────────────────────── */
@media (max-width: 1100px) {
  .hero-title           { font-size: 44px; }
  .hero-grid            { grid-template-columns: 1fr 340px; gap: 44px; }
  .footer-grid          { grid-template-columns: 1fr 1fr 1fr; }
}

/* ── Tablet portrait (≤900px) ───────────────────────────────── */
@media (max-width: 900px) {
  .hero-grid            { grid-template-columns: 1fr; }
  .carousel-wrap        { max-width: 500px; }
  .flip-grid            { grid-template-columns: repeat(2, 1fr); }
  .stats-grid           { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { border-right: 1px solid #CCCCE8; border-top: 1px solid #CCCCE8; }
  .stat-item:nth-child(4) { border-top: 1px solid #CCCCE8; border-right: none; }
  .p2-grid              { grid-template-columns: 1fr; gap: 44px; }
  .events-nl-grid       { grid-template-columns: 1fr; }
  .nl-card              { order: -1; }
}

/* ── Mobile (≤768px) ────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-links, .nav-ctas { display: none; }
  .hamburger            { display: flex; }
  .hero-title           { font-size: 36px; }
  .benefits-grid        { grid-template-columns: 1fr 1fr; }
  .sec-title            { font-size: 30px; }
  .container            { padding: 0 22px; }
  .hero-grid            { padding: 64px 0 68px; }
}

/* ── Small mobile (≤540px) ──────────────────────────────────── */
@media (max-width: 540px) {
  .flip-grid            { grid-template-columns: 1fr; }
  .benefits-grid        { grid-template-columns: 1fr; }
  .stats-grid           { grid-template-columns: 1fr 1fr; }
  .footer-grid          { grid-template-columns: 1fr 1fr; }
  .f-brand              { grid-column: span 2; }
  .hero-title           { font-size: 32px; }
  .hero-btns            { flex-direction: column; }
  .nl-row               { flex-direction: column; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .flip-inner,
  .btn-hero-teal,
  .carousel-slide       { transition: none; animation: none; }
}
/* ================================================================
   NAVBAR CONFLICT OVERRIDES
   Add to the very end of Wild Apricot CSS.
   Uses nav.navbar (specificity 0,1,1) to beat old nav{} rules
   which only have specificity (0,0,1) even with !important.
   ================================================================ */

/* 1. Force navbar to white, sticky, no old nav styles */
nav.navbar {
  background: #ffffff !important;
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  transform: none !important;
  display: block !important;
  border-radius: 0 !important;
  animation: none !important;
  z-index: 1000 !important;
  padding: 0 !important;
  border: none !important;
  border-bottom: 1px solid #E2E1EF !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.06) !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}

/* 2. Nav inner — horizontal flex row */
nav.navbar .nav-inner {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 68px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 36px !important;
  background: transparent !important;
}

/* 3. Nav links list — horizontal */
nav.navbar .nav-links {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  list-style: none !important;
  margin: 0 0 0 20px !important;
  padding: 0 !important;
  height: 68px !important;
  background: transparent !important;
  width: auto !important;
}

/* 4. Nav items */
nav.navbar .nav-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin: 0 !important;
  overflow: visible !important;
  width: auto !important;
  background: transparent !important;
}

/* 5. Nav link text */
nav.navbar .nav-item > a.nav-link {
  color: #222222 !important;
  background: transparent !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  height: 68px !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
  font-weight: 500 !important;
  border-bottom: 3px solid transparent !important;
}
nav.navbar .nav-item:hover > a.nav-link {
  color: #333192 !important;
  background: transparent !important;
  border-bottom-color: #F15C22 !important;
}

/* 6. Hide dropdowns by default, show on hover */
nav.navbar .dropdown {
  display: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
}
nav.navbar .nav-item:hover .dropdown {
  display: block !important;
}

/* 7. Hide mega menus by default, show on hover */
nav.navbar .mega {
  display: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}
nav.navbar .nav-item:hover .mega {
  display: grid !important;
}

/* 8. CTA buttons area */
nav.navbar .nav-ctas {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* 9. Mobile nav — hidden by default always */
.mobile-nav {
  display: none !important;
}
.mobile-nav.open {
  display: block !important;
}

/* 10. Desktop: hide hamburger */
@media (min-width: 769px) {
  nav.navbar .hamburger {
    display: none !important;
  }
}

/* 11. Mobile: hide desktop nav, show hamburger */
@media (max-width: 768px) {
  nav.navbar .hamburger {
    display: flex !important;
  }
  nav.navbar .nav-links,
  nav.navbar .nav-ctas {
    display: none !important;
  }
}

/* 12. Allow dropdowns to escape WA gadget overflow clipping */
.WaGadgetCustomCode,
.WaGadget,
.WaGadgetContent,
.WaGadgetFirst,
[class*="zoneHeader"] {
  overflow: visible !important;
}