/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*  child css  */
/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/*Custom ID and classes*/
/* =========================================================
   na-row-inset — Boxed Magic Module (rounded background row)
   Insets the row background 15px so its edge aligns with the
   content edge of other sections (e.g. Versa Cards).
   Use: CSS Class field on Magic Module → "na-row-inset"
   ========================================================= */
.clean-base.na-row-inset > .container > .row,
.na-row-inset .clean-base > .container > .row {
  margin-left: 15px !important;
  margin-right: 15px !important;
}

/* =========================================================
   na-faq — FAQ accordion inside a Magic Module
   Desktop: answer aligns with question (theme gives question 15px).
   Stacked (<768px): FAQ aligns with the heading and uses full width.
   Use: CSS Class field → "na-row-inset na-faq" (or just "na-faq")
   ========================================================= */
.na-faq .c-accordion .c-accordion-content {
  padding-left: 15px !important;
  padding-right: 25px !important;
}

@media (max-width: 767px) {
  .na-faq .c-col { padding-right: 15px !important; }
  .na-faq .c-col-inner { background-color: transparent !important; }
  .na-faq .c-accordion a.accordion-title { padding-left: 0 !important; }
  .na-faq .c-accordion .c-accordion-content { padding-left: 0 !important; }
}

/* =========================================================
   na-lead — Apple-style lead paragraph
   Grey paragraph; bold words turn navy (the "lead-in").
   Use in rich text: <p class="na-lead"><strong>Lead.</strong> Rest…</p>
   ========================================================= */
.na-lead {
  margin: 0;
  max-width: 860px;
  font-size: 24px;
  line-height: 1.35;
  font-weight: 600;
  color: #6b7280;
}
.na-lead strong,
.na-lead b {
  font-weight: 600;
  color: #14284b;
}
@media (max-width: 991px) { .na-lead { font-size: 21px; } }
@media (max-width: 575px) { .na-lead { font-size: 19px; } }

/* =========================================================
   na-modal-plus — Plain "+" that opens a Magic Module modal
   Use: CSS Class field → add "na-modal-plus"; button type = Modal,
   icon = plus. Label stays for screen readers but is visually hidden.
   44×44px tap area, no circle. Hover: quarter turn.
   Colour is native: set Icon color + Icon hover color on the button.
   ========================================================= */
.na-modal-plus .btn-pop.icon-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0 !important;
  gap: 0 !important;
  column-gap: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 0 !important;
  line-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.na-modal-plus .btn-pop.icon-btn .hs_cos_wrapper_type_icon {
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex;
  line-height: 0;
}
.na-modal-plus .btn-pop.icon-btn svg {
  width: 24px !important;
  height: 24px !important;
  transition: transform .25s ease, fill .2s ease;
}
.na-modal-plus .btn-pop.icon-btn:hover,
.na-modal-plus .btn-pop.icon-btn:focus-visible {
  background: transparent !important;
}
.na-modal-plus .btn-pop.icon-btn:hover svg,
.na-modal-plus .btn-pop.icon-btn:focus-visible svg {
  transform: rotate(90deg);
}

/* =========================================================
   na-modal — Popup content wrapper (Magic Module modal button)
   Use in the modal's rich text (Source code):
     <div class="na-modal">…</div>
         → Sheet (default): slides up from the bottom, 24px top
           corners, blurred page behind, close button that stays
           in the top-right corner while scrolling.
     <div class="na-modal na-modal--dark">…</div>  → dark sheet
     <div class="na-modal na-modal--compact">…</div> → small centred box
   na-modal--full is kept as an alias of the sheet.
   Inside a sheet: H6 eyebrow, then H2 (shown large), then cards:
     <div class="na-card"><p class="na-lead"><strong>Lead.</strong> Rest…</p>
       <img class="na-card__media" src="…" alt=""></div>
   ========================================================= */
.na-modal > :last-child { margin-bottom: 0; }

/* ---------- Sheet (default) ---------- */
.jquery-modal.blocker:has(.na-modal:not(.na-modal--compact):not(.na-modal--video)) {
  padding: 40px 24px 0 !important;
  background: rgba(10, 20, 40, .45) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
}
.jquery-modal.blocker:has(.na-modal:not(.na-modal--compact):not(.na-modal--video))::before { display: none !important; }
.jquery-modal.blocker .hhs-modal:has(.na-modal:not(.na-modal--compact):not(.na-modal--video)) {
  display: flex !important;
  flex-direction: column;
  width: 100% !important;
  max-width: 1260px !important;
  min-height: calc(100vh - 40px);
  margin: 0 auto !important;
  padding: 0 !important;
  vertical-align: top !important;
  text-align: left;
  background: #ffffff !important;
  border-radius: 24px 24px 0 0 !important;
  box-shadow: 0 -8px 40px rgba(10, 20, 40, .18) !important;
  overflow: clip;
  animation: na-sheet-in .45s cubic-bezier(.2, .8, .2, 1) both;
}
.jquery-modal.blocker .hhs-modal:has(.na-modal:not(.na-modal--compact):not(.na-modal--video)) > .container,
.jquery-modal.blocker .hhs-modal:has(.na-modal:not(.na-modal--compact):not(.na-modal--video)) > .container > .row,
.jquery-modal.blocker .hhs-modal:has(.na-modal:not(.na-modal--compact):not(.na-modal--video)) > .container > .row > [class*="col"] {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.hhs-modal .na-modal:not(.na-modal--compact):not(.na-modal--video) { padding: 96px 88px 104px; }
@keyframes na-sheet-in {
  from { transform: translateY(48px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .jquery-modal.blocker .hhs-modal:has(.na-modal) { animation: none !important; }
}

/* Close button: round, stays in the top-right corner while scrolling */
.jquery-modal.blocker .hhs-modal:has(.na-modal:not(.na-modal--compact):not(.na-modal--video)) a.close-modal {
  order: -1;
  position: sticky !important;
  top: 20px !important;
  right: auto !important;
  left: auto !important;
  align-self: flex-end;
  flex: none;
  z-index: 10;
  width: 44px !important;
  height: 44px !important;
  margin: 20px 20px -64px 0 !important;
  border-radius: 50%;
  background: #e8ebf0 !important;
  background-image: none !important;
  box-shadow: none !important;
  text-indent: -9999px;
  overflow: hidden;
  transition: background-color .2s ease;
}
.jquery-modal.blocker .hhs-modal:has(.na-modal:not(.na-modal--compact):not(.na-modal--video)) a.close-modal::before,
.jquery-modal.blocker .hhs-modal:has(.na-modal:not(.na-modal--compact):not(.na-modal--video)) a.close-modal::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: #14284b;
  transform: translate(-50%, -50%) rotate(45deg);
}
.jquery-modal.blocker .hhs-modal:has(.na-modal:not(.na-modal--compact):not(.na-modal--video)) a.close-modal::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.jquery-modal.blocker .hhs-modal:has(.na-modal:not(.na-modal--compact):not(.na-modal--video)) a.close-modal:hover {
  background: #d9dee6 !important;
}
.jquery-modal.blocker .hhs-modal:has(.na-modal:not(.na-modal--compact):not(.na-modal--video)) a.close-modal:focus-visible {
  outline: 2px solid #006faa;
  outline-offset: 2px;
}

/* Sheet typography: eyebrow (H6) + large H2 */
.hhs-modal .na-modal:not(.na-modal--compact):not(.na-modal--video) > h2 {
  max-width: 900px;
  margin: 0 0 56px;
  font-size: 56px;
  line-height: 1.07;
  font-weight: 600;
  letter-spacing: -.015em;
}

/* Cards inside the sheet */
.na-card {
  margin: 0 0 24px;
  padding: 64px 88px;
  border-radius: 24px;
  background: #f7f8fa;
  overflow: hidden;
}
.na-card:last-child { margin-bottom: 0; }
.na-card > :last-child { margin-bottom: 0; }
.na-card .na-lead { max-width: 900px; }
.na-card .na-card__media,
.na-card img.na-card__media {
  display: block;
  width: calc(100% + 176px);
  max-width: none;
  height: auto;
  margin: 48px -88px -64px !important;
}

@media (max-width: 991px) {
  .jquery-modal.blocker:has(.na-modal:not(.na-modal--compact):not(.na-modal--video)) { padding: 32px 16px 0 !important; }
  .jquery-modal.blocker .hhs-modal:has(.na-modal:not(.na-modal--compact):not(.na-modal--video)) { min-height: calc(100vh - 32px); }
  .hhs-modal .na-modal:not(.na-modal--compact):not(.na-modal--video) { padding: 80px 48px 80px; }
  .hhs-modal .na-modal:not(.na-modal--compact):not(.na-modal--video) > h2 { font-size: 44px; margin-bottom: 40px; }
  .na-card { padding: 48px 48px; }
  .na-card .na-card__media,
  .na-card img.na-card__media { width: calc(100% + 96px); margin: 40px -48px -48px !important; }
}
@media (max-width: 575px) {
  .jquery-modal.blocker:has(.na-modal:not(.na-modal--compact):not(.na-modal--video)) { padding: 24px 8px 0 !important; }
  .jquery-modal.blocker .hhs-modal:has(.na-modal:not(.na-modal--compact):not(.na-modal--video)) { min-height: calc(100vh - 24px); }
  .jquery-modal.blocker .hhs-modal:has(.na-modal:not(.na-modal--compact):not(.na-modal--video)) a.close-modal {
    top: 14px !important;
    width: 40px !important;
    height: 40px !important;
    margin: 14px 14px -54px 0 !important;
  }
  .hhs-modal .na-modal:not(.na-modal--compact):not(.na-modal--video) { padding: 72px 20px 56px; }
  .hhs-modal .na-modal:not(.na-modal--compact):not(.na-modal--video) > h2 { font-size: 34px; margin-bottom: 32px; }
  .na-card { padding: 40px 24px; margin-bottom: 16px; }
  .na-card .na-card__media,
  .na-card img.na-card__media { width: calc(100% + 48px); margin: 32px -24px -40px !important; }
}

/* ---------- Dark sheet ---------- */
.jquery-modal.blocker .hhs-modal:has(.na-modal.na-modal--dark:not(.na-modal--compact):not(.na-modal--video)) { background: #000000 !important; }
.na-modal--dark,
.na-modal--dark h1, .na-modal--dark h2, .na-modal--dark h3,
.na-modal--dark h4, .na-modal--dark h5, .na-modal--dark h6 { color: #f5f5f7; }
.na-modal--dark p, .na-modal--dark li { color: #d6dde6; }
.na-modal--dark .na-card { background: #1d1d1f; }
.na-modal--dark .na-lead { color: #86868b; }
.na-modal--dark .na-lead strong,
.na-modal--dark .na-lead b { color: #f5f5f7; }
.jquery-modal.blocker .hhs-modal:has(.na-modal.na-modal--dark:not(.na-modal--compact):not(.na-modal--video)) a.close-modal { background: #333336 !important; }
.jquery-modal.blocker .hhs-modal:has(.na-modal.na-modal--dark:not(.na-modal--compact):not(.na-modal--video)) a.close-modal:hover { background: #48484c !important; }
.jquery-modal.blocker .hhs-modal:has(.na-modal.na-modal--dark:not(.na-modal--compact):not(.na-modal--video)) a.close-modal::before,
.jquery-modal.blocker .hhs-modal:has(.na-modal.na-modal--dark:not(.na-modal--compact):not(.na-modal--video)) a.close-modal::after { background: #ffffff; }

/* ---------- Compact: small centred box (and the video modal) ---------- */
.na-modal--compact { padding: 40px 48px 44px; }
@media (max-width: 767px) { .na-modal--compact { padding: 32px 24px; } }
.jquery-modal.blocker:has(.na-modal--compact),
.jquery-modal.blocker:has(.na-modal--video) {
  background: rgba(20, 40, 75, .55) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.hhs-modal:has(.na-modal--compact),
.hhs-modal:has(.na-modal--video) {
  border-radius: 24px !important;
  padding: 0 !important;
  overflow: hidden;
}
.hhs-modal:has(.na-modal--compact) a.close-modal,
.hhs-modal:has(.na-modal--video) a.close-modal {
  top: 16px !important;
  right: 16px !important;
}

/* =========================================================
   na-gap-16 — Tiles: 16px gap between columns (2, 3 or 4 tiles)
   Outer tile edges align with na-row-inset. Stacked: 16px vertical gap.
   Use: CSS Class field → "na-row-inset na-gap-16"
   (tile background + 24px corners are set per column in the module)
   ========================================================= */
@media (min-width: 768px) {
  .clean-base.na-gap-16 > .container > .row > .c-col,
  .na-gap-16 .clean-base > .container > .row > .c-col {
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-bottom: 0 !important;
  }
  .clean-base.na-gap-16 > .container > .row > .c-col:first-child,
  .na-gap-16 .clean-base > .container > .row > .c-col:first-child { padding-left: 0 !important; }
  .clean-base.na-gap-16 > .container > .row > .c-col:last-child,
  .na-gap-16 .clean-base > .container > .row > .c-col:last-child { padding-right: 0 !important; }
  /* 3 tiles: split both 16px gaps evenly so all tiles are equally wide */
  .clean-base.na-gap-16 > .container > .row > .c-col:first-child:nth-last-child(3),
  .na-gap-16 .clean-base > .container > .row > .c-col:first-child:nth-last-child(3) { padding-right: 10.667px !important; }
  .clean-base.na-gap-16 > .container > .row > .c-col:nth-child(2):nth-last-child(2),
  .na-gap-16 .clean-base > .container > .row > .c-col:nth-child(2):nth-last-child(2) { padding-left: 5.333px !important; padding-right: 5.333px !important; }
  .clean-base.na-gap-16 > .container > .row > .c-col:nth-child(3):last-child,
  .na-gap-16 .clean-base > .container > .row > .c-col:nth-child(3):last-child { padding-left: 10.667px !important; }
  /* 4 tiles: split all three 16px gaps evenly */
  .clean-base.na-gap-16 > .container > .row > .c-col:first-child:nth-last-child(4),
  .na-gap-16 .clean-base > .container > .row > .c-col:first-child:nth-last-child(4) { padding-right: 12px !important; }
  .clean-base.na-gap-16 > .container > .row > .c-col:nth-child(2):nth-last-child(3),
  .na-gap-16 .clean-base > .container > .row > .c-col:nth-child(2):nth-last-child(3) { padding-left: 4px !important; padding-right: 8px !important; }
  .clean-base.na-gap-16 > .container > .row > .c-col:nth-child(3):nth-last-child(2),
  .na-gap-16 .clean-base > .container > .row > .c-col:nth-child(3):nth-last-child(2) { padding-left: 8px !important; padding-right: 4px !important; }
  .clean-base.na-gap-16 > .container > .row > .c-col:nth-child(4):last-child,
  .na-gap-16 .clean-base > .container > .row > .c-col:nth-child(4):last-child { padding-left: 12px !important; }
}
@media (max-width: 767px) {
  .clean-base.na-gap-16 > .container > .row > .c-col,
  .na-gap-16 .clean-base > .container > .row > .c-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 16px !important;
  }
  .clean-base.na-gap-16 > .container > .row > .c-col:last-child,
  .na-gap-16 .clean-base > .container > .row > .c-col:last-child { margin-bottom: 0 !important; }
}

/* =========================================================
   na-media-center — Centre images horizontally in their column
   Use: CSS Class field → add "na-media-center"
   ========================================================= */
.clean-base.na-media-center .c-content-con:has(> img),
.na-media-center .clean-base .c-content-con:has(> img) { justify-content: center; }

/* na-lead--sm — slightly smaller lead text for tiles
   Use: <p class="na-lead na-lead--sm">…</p> */
.na-lead--sm { font-size: 22px; }
@media (max-width: 991px) { .na-lead--sm { font-size: 20px; } }
@media (max-width: 575px) { .na-lead--sm { font-size: 18px; } }

/* =========================================================
   na-modal-inline — Panel that opens inside the tile/banner
   Needs the na-modal-inline script in the child theme JS.
   The close button sits exactly where the "+" was; + turns into ×.
   Use: CSS Class field → add "na-modal-inline" (with "na-modal-plus")
   ========================================================= */
.na-inline-panel {
  position: absolute;
  inset: 0;
  z-index: 20;
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(20, 40, 75, .12);
  opacity: 0;
  transform: scale(.98);
  transition: opacity .25s ease, transform .25s ease;
}
.na-inline-panel.is-open { opacity: 1; transform: none; }
.na-inline-panel__body {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: 56px 48px 88px;
}
.na-inline-panel__body .na-modal { padding: 0; }
.na-inline-panel__close {
  position: absolute;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #14284b;
}
.na-inline-panel__close svg {
  width: 24px;
  height: 24px;
  transition: transform .25s ease;
}
.na-inline-panel.is-open .na-inline-panel__close svg { transform: rotate(45deg); }
.na-inline-panel__close:hover,
.na-inline-panel__close:focus-visible { color: #006faa; }
@media (max-width: 767px) { .na-inline-panel__body { padding: 40px 24px 80px; } }

/* =========================================================
   na-media-bleed — Image cut off by the box's bottom edge
   The image block is pushed to the bottom of its column (text stays
   at the top) and runs ~96px (mobile 64px) past the edge, hidden by
   the box. Works on a whole banner and on single tiles.
   Set the bottom padding to 0 in the module (row, or tile column).
   Use: CSS Class field → "na-row-inset na-media-center na-media-bleed"
   ========================================================= */
.clean-base.na-media-bleed > .container > .row,
.na-media-bleed .clean-base > .container > .row { overflow: hidden; }
.clean-base.na-media-bleed .c-col-inner:has(> .c-content-con > img),
.na-media-bleed .clean-base .c-col-inner:has(> .c-content-con > img) {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.clean-base.na-media-bleed .c-content-con:has(> img),
.na-media-bleed .clean-base .c-content-con:has(> img) {
  margin-top: auto;
  margin-bottom: -96px !important;
}
@media (max-width: 767px) {
  .clean-base.na-media-bleed .c-content-con:has(> img),
  .na-media-bleed .clean-base .c-content-con:has(> img) { margin-bottom: -64px !important; }
}

/* =========================================================
   na-gradient-text — Gradient text for a word or phrase
   The class does the technique; colours can be set inline.
   Default: light blue → turquoise (for dark backgrounds)
   Preset:  na-gradient-text--brand (blue → teal, light backgrounds)
   Custom:  add style="--from:#hex; --to:#hex;" on the span
   Use in rich text (Source code):
     <span class="na-gradient-text">then land it.</span>
     <span class="na-gradient-text na-gradient-text--brand">…</span>
     <span class="na-gradient-text" style="--from:#ff9a62; --to:#c084fc;">…</span>
   ========================================================= */
.na-gradient-text {
  --from: #7cc8f2;
  --to: #5fd3c6;
  background-image: linear-gradient(90deg, var(--from) 0%, var(--to) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}
.na-gradient-text--brand {
  --from: #006faa;
  --to: #2c8b87;
}

/* =========================================================
   na-icon-row — Heading with an icon to the left (e.g. a component)
   One row per heading, no bullets. Works on H3, H4, H5 or p.
   Use in rich text (Source code), one line per row:
     <h4 class="na-icon-row"><img src="…icon.svg" alt="" width="32" height="32">Billing</h4>
   ========================================================= */
.na-icon-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
}
.na-icon-row:last-child { margin-bottom: 0; }
.na-icon-row img {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  margin: 0 !important;
}
@media (max-width: 575px) {
  .na-icon-row { gap: 12px; margin-bottom: 14px; }
  .na-icon-row img { width: 28px; height: 28px; flex-basis: 28px; }
}

/* =========================================================
   na-stat — Big number for KPI tiles
   Use in rich text (Source code):
     <p class="na-stat"><span class="na-gradient-text na-gradient-text--brand">98%</span></p>
   ========================================================= */
.na-stat {
  margin: 0 0 12px;
  font-size: 56px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #14284b;
}
@media (max-width: 991px) { .na-stat { font-size: 48px; } }
@media (max-width: 575px) { .na-stat { font-size: 44px; } }

/* =========================================================
   na-play — Large round play button that opens a modal
   Use: CSS Class field → add "na-play"; button type = Modal,
   icon = play. Icon colour is native (Icon color / hover color).
   Label stays for screen readers but is visually hidden.
   ========================================================= */
.na-play .btn-pop.icon-btn {
  width: 88px;
  height: 88px;
  min-width: 88px;
  padding: 0 !important;
  gap: 0 !important;
  column-gap: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 0 !important;
  line-height: 0 !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 8px 24px rgba(20, 40, 75, .25) !important;
  transition: transform .2s ease;
}
.na-play .btn-pop.icon-btn .hs_cos_wrapper_type_icon {
  margin: 0 0 0 4px !important;
  padding: 0 !important;
  display: inline-flex;
  line-height: 0;
}
.na-play .btn-pop.icon-btn svg {
  width: 28px !important;
  height: 28px !important;
}
.na-play .btn-pop.icon-btn:hover,
.na-play .btn-pop.icon-btn:focus-visible {
  transform: scale(1.06);
  background: #ffffff !important;
}
@media (max-width: 767px) {
  .na-play .btn-pop.icon-btn { width: 72px; height: 72px; min-width: 72px; }
  .na-play .btn-pop.icon-btn svg { width: 24px !important; height: 24px !important; }
}

/* =========================================================
   na-modal--video — Wide modal for a video embed
   Use in the modal's rich text:
     <div class="na-modal na-modal--video"> paste the video iframe here </div>
   ========================================================= */
.hhs-modal:has(.na-modal--video) {
  width: 92vw !important;
  max-width: 960px !important;
  background: #000000 !important;
  overflow: hidden;
}
.hhs-modal:has(.na-modal--video) .container,
.hhs-modal:has(.na-modal--video) .row,
.hhs-modal:has(.na-modal--video) [class*="col"] {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
}
.na-modal.na-modal--video { padding: 0; }
.na-modal--video iframe,
.na-modal--video video,
.na-modal--video .na-video-placeholder {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}
.na-modal--video .na-video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #14284b;
  color: #d6dde6;
  font-size: 16px;
}
.hhs-modal:has(.na-modal--video) a.close-modal { filter: invert(1); }


/* =========================================================
   na-slider — Apple-style Hero Slider (CLEAN Pro - Hero Slider)
   Use: CSS Class field on the Hero Slider →
     "na-slider"                    full width (edge to edge)
     "na-slider na-slider--boxed"   boxed like the banners, 24px corners
   Gives: steady height, Apple-style dots in a pill, a pause button
   (needs the na-slider script in the child theme JS), round arrows
   that appear on hover (desktop only).
   Colours stay native: Indicator on/off colour + Arrow colour.
   Per slide (Rich Text, Source code):
     <div class="na-slide-photo">…</div>  text bottom left + navy gradient
     <div class="na-slide-media"><img …></div> (column 2) image cut off at bottom
   ========================================================= */

/* Equal-height slides, content fills the slide */
.na-slider .slick-track { display: flex !important; }
.na-slider .slick-slide {
  float: none !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column;
}
.na-slider .slide-content-wrapper { flex: 1 1 auto; display: flex !important; flex-direction: column; padding: 0 !important; }
.na-slider .slide-content-wrapper > .container { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; }
.na-slider .slide-content-row { flex: 1 1 auto; min-height: 640px; }
.na-slider--boxed .slide-content-row { min-height: 560px; }
@media (max-width: 991px) {
  .na-slider .slide-content-row { min-height: 560px; }
  .na-slider--boxed .slide-content-row { min-height: 480px; }
}
@media (max-width: 575px) {
  .na-slider .slide-content-row { min-height: 520px; }
  .na-slider--boxed .slide-content-row { min-height: 440px; }
}

/* Boxed: same inset and corners as the banners */
.na-slider--boxed .hero-slider-row {
  width: calc(100% - 30px);
  max-width: 1410px;
  margin: 0 auto;
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
}

/* Controls: dots pill + pause button, bottom centre */
.na-slider .slick-dots {
  position: absolute !important;
  left: 50% !important;
  bottom: 24px !important;
  transform: translateX(-50%);
  width: auto !important;
}
.na-slider .na-slider-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.na-slider .na-slider-controls > * { pointer-events: auto; }
.na-slider .na-slider-controls .slick-dots {
  position: static !important;
  transform: none;
}
.na-slider .slick-dots {
  display: flex !important;
  align-items: center;
  gap: 10px;
  height: 44px;
  margin: 0 !important;
  padding: 0 18px !important;
  list-style: none;
  border-radius: 22px;
  background: rgba(20, 40, 75, .38);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
}
.na-slider .slick-dots li {
  position: relative;
  width: 8px !important;
  height: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 4px;
  cursor: pointer;
  transition: width .35s ease, background-color .35s ease;
}
.na-slider .slick-dots li.slick-active { width: 28px !important; }
.na-slider .slick-dots li button {
  position: absolute;
  inset: -18px -5px;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 0 !important;
  color: transparent !important;
  cursor: pointer;
}
.na-slider .slick-dots li button::before { display: none !important; }

.na-slider .na-slider-pause {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--na-ctrl, #ffffff);
  background: rgba(20, 40, 75, .38);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  transition: background-color .2s ease, transform .2s ease;
}
.na-slider .na-slider-pause svg { width: 16px; height: 16px; fill: currentColor; }
.na-slider .na-slider-pause:hover { background: rgba(20, 40, 75, .55); }
.na-slider .na-slider-pause:active { transform: scale(.94); }
.na-slider .na-slider-pause:focus-visible,
.na-slider .slick-dots li button:focus-visible,
.na-slider .slick-arrow:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
}
@media (max-width: 575px) {
  .na-slider .na-slider-controls { bottom: 16px; gap: 10px; }
  .na-slider .slick-dots { bottom: 16px !important; height: 36px; padding: 0 14px !important; }
  .na-slider .na-slider-pause { width: 36px; height: 36px; }
  .na-slider .na-slider-pause svg { width: 14px; height: 14px; }
}

/* Arrows: round, appear on hover (desktop with mouse only) */
.na-slider .hero-slider .slick-arrow {
  position: absolute;
  top: 50% !important;
  z-index: 5;
  width: 44px !important;
  height: 44px !important;
  padding: 0 !important;
  border-width: 0 !important;
  border-style: solid !important;
  border-radius: 50%;
  font-size: 0 !important;
  color: transparent !important;
  background: rgba(20, 40, 75, .38) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  transform: translateY(-50%) !important;
  opacity: 0;
  transition: opacity .25s ease, background-color .2s ease;
}
.na-slider .hero-slider .slick-prev { left: 24px !important; right: auto !important; }
.na-slider .hero-slider .slick-next { right: 24px !important; left: auto !important; }
.na-slider .hero-slider .slick-arrow::before {
  content: "" !important;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-style: solid;
  border-width: 0 0 2px 2px;
  border-color: inherit;
  opacity: 1 !important;
  font-size: 0 !important;
}
.na-slider .hero-slider .slick-prev::before { transform: translate(-30%, -50%) rotate(45deg); }
.na-slider .hero-slider .slick-next::before { transform: translate(-70%, -50%) rotate(-135deg); }
.na-slider .hero-slider .slick-arrow:hover { background: rgba(20, 40, 75, .55) !important; }
@media (hover: hover) and (min-width: 992px) {
  .na-slider .hero-slider:hover .slick-arrow,
  .na-slider .hero-slider .slick-arrow:focus-visible { opacity: 1; }
}
@media (hover: none), (max-width: 991px) {
  .na-slider .hero-slider .slick-arrow { display: none !important; }
}

/* Slide recipe B — photo: text bottom left, navy gradient behind it */
.na-slider .slide-item:has(.na-slide-photo) .slide-background::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(20, 40, 75, .88) 0%, rgba(20, 40, 75, .5) 38%, rgba(20, 40, 75, 0) 72%);
}
.na-slider .slide-content-row:has(.na-slide-photo) { align-items: flex-end !important; }

/* Slide recipe C — split: image in column 2, cut off by the bottom edge */
.na-slider .slide-content-row:has(.na-slide-media) {
  padding-bottom: 0 !important;
  align-items: stretch !important;
}
.na-slider .slide-content-row:has(.na-slide-media) > .slide-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 104px;
}
.na-slider .slide-content-row:has(.na-slide-media) > .slide-column:has(.na-slide-media) {
  justify-content: flex-end;
  padding-bottom: 0;
}
.na-slider .slide-column:has(.na-slide-media) .column-inner { margin-bottom: 0 !important; }
.na-slide-media { display: flex; justify-content: center; align-items: flex-end; }
.na-slide-media img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 0 -48px !important;
  border-radius: 24px;
}
@media (max-width: 991px) {
  .na-slider .slide-content-row:has(.na-slide-media) > .slide-column { padding-bottom: 32px; }
  .na-slide-media img { max-width: 420px; }
}
/* ////////////////////////// */
/* Reusable Netadmin text CTA */
html body .na-text-cta-wrap a.na-text-cta,
html body .na-text-cta-wrap a.na-text-cta:visited,
html body .na-text-cta-wrap a.na-text-cta:hover,
html body .na-text-cta-wrap a.na-text-cta:focus,
html body .na-text-cta-wrap a.na-text-cta:active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0B6FB8 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none !important;
}

html body .na-text-cta-wrap .na-text-cta__label {
  color: inherit !important;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}

html body .na-text-cta-wrap a:hover .na-text-cta__label,
html body .na-text-cta-wrap a:focus-visible .na-text-cta__label {
  border-bottom-color: #0B6FB8;
}

html body .na-text-cta-wrap a.na-text-cta:focus-visible {
  outline: 2px solid #0B6FB8;
  outline-offset: 5px;
}

html body .na-text-cta-wrap .na-text-cta__arrow {
  display: inline-block;
  color: inherit !important;
  transition: transform 180ms ease;
}

html body .na-text-cta-wrap a:hover .na-text-cta__arrow,
html body .na-text-cta-wrap a:focus-visible .na-text-cta__arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  html body .na-text-cta-wrap .na-text-cta__arrow {
    transition: none !important;
    transform: none !important;
  }
}

/* === The Platform – Flexi Tabs: vänsterställda tabbar med egen bredd === */
@media (min-width: 992px) {

  /* tabblisten */
  #hs_cos_wrapper_widget_1791793005175 ul,
  .na-flexi-tabs--left ul {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* varje tabb: bara så bred som texten kräver */
  #hs_cos_wrapper_widget_1791793005175 ul > li,
  .na-flexi-tabs--left ul > li {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0;
    text-align: left;
  }

  /* 16px luft per sida inne i tabben */
  #hs_cos_wrapper_widget_1791793005175 ul > li > a,
  #hs_cos_wrapper_widget_1791793005175 ul > li > button,
  #hs_cos_wrapper_widget_1791793005175 ul > li > span,
  .na-flexi-tabs--left ul > li > a,
  .na-flexi-tabs--left ul > li > button,
  .na-flexi-tabs--left ul > li > span {
    display: inline-block;
    width: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Border radius*/
.border16 {
  border-radius: 16px;
}

/* Changed hamburger icon */

.hamburger-icon:not(.active) {
  padding-top: 24px;
}

.hamburger-icon:not(.active) .line.line-3 {
	left: 0 !important;
}

.hamburger-icon .line {
	width: 24px !important;
  height: 2px !important;
  margin-top: 2px; !important;
}

.hamburger-icon:not(.active) .line.line-2 {
	top: 8px !important;
}
.hamburger-icon:not(.active) .line.line-3 {
	top: 16px !important;
}


.hamburger-icon:not(.active) .line.line-1 {
	width: 0px !important;
  height:0px !important;
  margin-top: 0px; !important;
}


/* Align items menu */

.hhs-extras-ctas {
  margin-top: 12px;
}

.hhs-menu-toggle{
  margin-top:8px;
}

@media (max-width: 568px) {
 .hhs-lang-switch {
  margin-top: 6px;
}
}

.container{
  padding-left: 0px;
padding-right: 0px;
}

@media (max-width: 568px) {
  .container{
    padding-left:8px;
padding-right: 8px;
  }
}


/* Changed color in footer text */

.hhs-foot-copyright{
  color: #6B6C6F !important;
}

/*Nav bar height on desktop and mobile*/
.container-fluid{
    min-height: 60px !important;
}

/* Align logo in navbar */
.logo-sticky, .logo-standard {
  margin-left: 10px;
}
/* align text menu with logo */
.hhs-nav-grid__menu {
    margin-top: 8px;
}


@media (max-width: 568px) {
  .hhs-top-bar.hhs-alt-nav .logo-sticky, .logo-standard {
  margin-top: -2px;
  }
}

@media (max-width: 568px) {
 .hhs-menu-toggle {
  margin-top: 4px;
}
}

@media (max-width: 568px) {
  .hhs-top-bar{
    padding-left:8px !important;
padding-right: 8px !important;
  }
}


/* top mega menu classes stejak@brave */

.menu-col-container {
  display: table;
  width: 100%;
}
.menu-col-left {
  display: table-cell;
  width: 24px;
  vertical-align: top;
  text-align: center;
  padding-top: 5px;
}
.menu-col-right {
  display: table-cell;
  padding-left: 12px;
  vertical-align: top;
  text-align: left;
}

/* Icon and text classes */

.icon-col-container {
  display: table;
  width: 100%;
}
.icon-col-left {
  display: table-cell;
  width: 32px;
  vertical-align: top;
  text-align: center;
  padding-top: 5px;
}
.icon-col-right {
  display: table-cell;
  padding-left: 24px;
  vertical-align: top;
  text-align: left;
}



/* link effect in rich text boxes stejak@brave */
p a  {
  cursor: pointer;
  text-decoration: none;
  color: #333333;
  position: relative;
  padding: 0 0.1em;
}
p a:after {
  cursor: pointer;
  content: "";
  position: absolute;
  bottom: -2px;        
  left: 0;
  width: 100%;
  height: 15%;
  background-color: #bfdbe9;
  z-index: -10;
  -webkit-transition: all .1s linear;
  -moz-transition: all .1s linear;
  transition: all .1s linear;
}
p a:hover:after {
  cursor: pointer;
  background-color: #bfdbe9;
  height: 70%;
}



/* Less padding flex-cards */

/*
.col-12, .hhs-flexi-card-mod {
  padding-right: 0px !important;
  padding-left: 0px !important;
}
*/



/* Border radius "get started today - by stage page" */
.row-number-14, .cell_1639391297404-row-0-vertical-alignment, .cell_1639391297404-row-0-background-color, .dnd-row {
  border-radius: 16px;
}

/* Border radius "blog-post-card" */
.hhs-blog-post-card, .blog-index__post img {
  border-radius: 16px;
  width: 100%;
}
/* Blog header - left col middle */
.post-header .blog-header__inner {
  align-items: center;
}
/*Blog header - Left col padding*/
.col-lg-7 {
  padding-right: 60px !important;
}
@media (min-width: 992px) {
  .col-lg-7 {
    padding-right: 60px;
  }
}

/*Meta summarey in header*/
.blog-post__summary {
  font-size: 20px;
  line-height: 1.5;
  color: #555;
  margin-top: 32px;
  margin-bottom: 32px;
}

/* Border radius "blog-img-card" */
.hhs-post-feat-img, .lazy-background {
  border-radius: 16px;
}

/* Border radius "banner with img-left" */
.hhs-img-text-mod, .show-mobile, .show-tablet, .show-desktop, .hhs-reg-image{
  border-radius: 16px;
}

.cell_16396826100239-background-color {
  border-radius: 16px;
}

/* Padding featured blog post module*/

.reading-minutes {
  padding-top: 16px !important;
}


.fa-chevron-down:before {
  font-size: 0px !important;
}



.blog-index {
  width: 100% !important;
}

.blog-index__post{
  border-radius: 16px !imporant; 
}

/* Blog filter */
.post__category-selector{
  background-color: #ffff !important;
  border-color: rgba(255,255,255,0.3);
  color: #6B6C6F !important;
  padding-right: 50px !important;
}


/* Blog tag */

.hhs-tag-list li a, .blog-post__tag-link {
  padding: 5px 20px !important;
}

.blog-post__tag-link {
  background-color: #F3F5F7;
}

/* Flexi card */

.hhs-flexi-card img {
  border-radius: 16px !important;
}
.hhs-flexi-card a {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

/*
.hhs-card-content {
  padding-top: 24px!important;
}
*/

.hs-fieldtype-checkbox label, .hs-form label {
  letter-spacing: 0px !important;
  text-transform: none !important;
  font-size: 14px;
}

/* filter btns - resources */
.contentFilter button {
  font-family: inter !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  text-transform: none !important;
  background-color: #ffffff !important;
  border-radius: 16px !important;
  padding: 8px 15px !important;
}


.contentFilter button.is-checked {
  font-family: inter !important;
  border-bottom: 0px !important;
  color: blue !important:
}

.contentFilter button:active {
  font-family: inter !important;
  border-bottom: 0px !important;
  color: blue !important:
}

.hhs-tab-wrapper li{
  border-left: 0px !important;
}


/* tabs module */
.tab-to-dropdown {
  width: 1000px !important;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: 768px) {
  .tab-to-dropdown {
  width: 250px !important;
  }
}

/* CTA*/
.col-inner, .hhs-col-overlay {
  border-radius: 16px !important;
}

.col-lg-6, .col-sm-12, .c1 animated {
  margin-bottom: 16px;
}

/* forms */
.hs-input {
  background-color: rgba(196, 196, 196, 0);
  border: 1px solid rgba(107, 108, 111, 1);
  color: rgba(107, 108, 111, 1);
}

/* button hover */
.cta-secondary:hover{
  background-color: #006FAA !important;
  color: white !important;
} 


/* Blog post header
.post-header {
  width: 1000px;
}*/

.text_a_bottom{
  background: #FBFBFD;
}

/* Mobile menu*/
.hhs-side-menu__mobile .sc-site-header__menu{
  padding-top: 24px;
  padding-bottom: 24px !important;
  border-bottom: 0px !important;
}
 

/* padding-bottom profile card */
.hhs-profile-card img{
  margin-bottom: 8px;
}

/* modal pop-up */
.hhs-pop.hhs-modal{
  max-width: 800px;
  border-radius: 16px !important;
}

/*Team Profile Cards*/
.hhs-profile-content h4 {
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 16px;
    text-align: left;
    /*color: #444;*/
    font-size: 14px;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0px;
    line-height: 1.1em;
}
.hhs-profile-content h5 {
    padding-top: 8px;
    text-align: left;
    color: #444;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0px;
    line-height: 1.1em;
}

/*MOBILE HEADER*/

@media (max-width: 568px) {
  .hs-menu-wrapper .hhs-sidebar-nav-toggle * {
    width: auto;
  }
}

/*RETURN TO TOP*/

#return-to-top svg {
  position: absolute;
  top: 16px;
  left: 17px;
}


/*Blog listing page*/

.blog-index__post--small .blog-index__post-image{
  border-radius: 16px !important;
  margin-bottom: 0px;
}


.blog-recent-posts__post, .hhs-blog-card-inner, .blog-index__post--large{
  box-shadow: 0 0 0px 0px rgba(0,0,0,0.0);
}

.blog-index__post-image--large{
  border-radius: 16px !important;
  height: 400px;
}

@media only screen and (min-width: 1100px) {
.blog-index__post--large{
  flex: 1 0 100%;
  flex-direction: row-reverse;
  display: flex;
  justify-items: space-between;
  padding: 17px;
  box-shadow: 0 0 0px 0px rgba(0,0,0,0.0);
}
}

@media only screen and (min-width: 1100px) {
.blog-index__post--large .blog-index__post-content{
  padding: 2rem 1rem 2rem 2rem;
}
}

.blog-index__post-content--small h4.card_post_title a:hover{
  color: #0086CE;
}

.hhs-blog-card-inner .blog-index__post-content{
  padding: 4px;
}

/*Content card*/

@media only screen and (min-width: 1200px){
.content-card{
  margin-bottom: 20px !important;
  height: 400px !important;
  width: 32%;
  border-radius: 16px !important;
}
}

@media only screen and (max-width: 1200px){
.content-card{
  margin-bottom: 20px !important;
  height: 350px !important;
  width: 32%;
  border-radius: 16px !important;
}
}


/*Blog post page*/

/*
@media only screen and (min-width: 1100px) {
  .col-sm-12{
    margin:auto !important;
  }
}
*/

.post-page-full{
  background-color: none;
}

.hhs-blog-card-inner {
Padding-bottom: 0px;
}


.hhs-blog-grid-cards {
background-color: #F3F5F7 !important;
padding-top: 0px !important;
padding-bottom: 80px !important;
}

.related-text {
  padding-top: 80px;
  background-color: #F3F5F7 !important;
}

.hs-blog-social-share{
  border-top: 0px solid rgba(0,0,0,0.2);
  border-bottom: 0px solid rgba(0,0,0,0.2);
}

/*
.blog-index__post-image--small {
  padding-bottom: 100%;
}
*/

@media screen and (min-width: 1000px) {
    .blog-index__post {
        flex:0 0 calc(100%/3);
    }
}

@media screen and (min-width: 922px) {
    .blog-index__post {
        flex:0 0 calc(100%/3);
    }
}

@media screen and (min-width: 922px) {
    .blog-index__post--large {
        flex: 1 0 100%;
        display: flex;
        justify-items:space-between
    }
}
}

/*Mega-menu changes*/

.mega-menu-bottom-background-5{
  background: linear-gradient(180deg, #ffffff 80%, #F3F5F7 20%) !important;
}

.mega-menu-bottom-background-5{
  background: linear-gradient(180deg, #ffffff 80%, #F3F5F7 20%) !important;
}

.mega-menu-bottom-background-4{
  background: linear-gradient(180deg, #ffffff 85%, #F3F5F7 15%) !important;
}

.mega-menu-bottom-background-3{
  background: linear-gradient(180deg, #ffffff 75%, #F3F5F7 25%) !important;
}

.mega-menu-bottom-background-2{
  background: linear-gradient(180deg, #ffffff 85%, #F3F5F7 15%) !important;
}

.mega-menu-bottom-background-1{
  background: linear-gradient(180deg, #ffffff 85%, #F3F5F7 15%) !important;
}

.mega-text-con{
  margin-bottom: 12px;
}

.hhs-flexi-card-mod a.flexi-card-outer{
  height: auto !important;
  display: block;
/* height: 100%; */
-webkit-transition: all .2s ease-in;
-moz-transition: all .1s ease-in;
-ms-transition: all .1s ease-in;
-o-transition: all .1s ease-in;
transition: all .1s ease-in;
}


/*Mobile menu spacing*/
.hhs-side-menu .hs-menu-flow-vertical>ul li.hs-item-has-children ul.hs-menu-children-wrapper.is-open {
      max-height: 100vh;
    opacity: 1;
    margin-top: 20px;
}

/* pop-up video spacing */

#popup_video{
  padding-left:0px !important;
padding-right: 0px !important;
  border-radius: 16px;
}

#video1, .hs-responsive-embed-wrapper .hs-responsive-embed{
  padding: 0px !important;
}

/* Adjust the alignment for the language switch dropdown menu / stejak */
@media only screen and (max-width: 1200px) {
  .lang_list_class:after, .lang_list_class:before {
    margin-left: 24px!important;
  }
}
@media only screen and (min-width: 1201px) {
  .hhs-lang-switch .lang_list_class {
    top: 41px!important;
    left: 26px!important;
  }
}

/* adjust text top postion to not block button in hamburger menu / stejak */
.hhs-side-menu__form, .hhs-side-menu__text {
  padding-top: 30px!important;
}

/* add extra margin on main nav för logo  / stejak */
#hhs-main-nav {
    padding-left: 25px!important;
    padding-right: 25px!important;
}



.grecaptcha-badge { 
  /*
  opacity:0;
  visibility:hidden;
  height: 1px!important;
  position: absolute;
  */
}