/***************************************************
OFFLINE PAGE
***************************************************/
html.offline body {background-image: url(/images/template/offline-background.jpg) !important; background-repeat: no-repeat; background-size: cover;}
html.offline .offline-wrapper {background-color: rgba(255, 145, 77, 0.9); border-radius: 20px; padding: 20px; color: #fff;}
html.offline .offline-wrapper h1.coming-soon-title {display:none;}
html.offline .offline-wrapper h1.coming-soon-message {font-size: 2rem; font-weight: bold; line-height: 3rem; margin-bottom: 50px;}
html.offline .offline-wrapper h2.coming-soon {font-size: 1.5rem; font-weight: normal; line-height: 2rem; margin-bottom: 20px;}
html.offline .offline-wrapper .offline-logo {margin: 100px 0;}
html.offline .offline-wrapper .offline-logo img {margin-left: auto; margin-right: auto;}
/**.coming-soon-login form {display: none !important;}**/
#coming-soon-countdown {display: none !important;}


/***************************************************
GENERAL
***************************************************/
#sp-top-2 {text-align: right;}
.sp-page-title {background: #fff;}
.sp-page-title .container {text-align: center;}
.sp-page-title .sp-page-title-heading, .sp-page-title .sp-page-title-sub-heading {
  font-size: 75px;
  line-height: 97px;
  color:#333333;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.27);
}

.logo-image-phone {height: 50px !important;}

.offcanvas-menu {background: #ff914d;}
.offcanvas-menu .offcanvas-inner .sp-module ul > li a,
.offcanvas-menu .offcanvas-inner .sp-module ul > li span,
.offcanvas-menu .offcanvas-inner .sp-module ul > li.menu-parent > a > .menu-toggler
{color: white;}

/***************************************************
BUTTONS
***************************************************/
.btn-outline-secondary {
  color: #ff914d;
  border-color: #ff914d;
}

.btn-primary:hover {cursor: pointer !important; background-color: #FF8133;}

.btn-secondary {
  border-color: #ff8e23;
  background-color: #fff;
  color: #ff8e23;
  padding: 12px 30px 12px 30px;
  font-size: 16px;
}
.btn-secondary:hover {
  background-color:  #ff914d;
  color: #fff;
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: #ff914d;
  border-color: #ff914d;
}

.pager > li a {
  border: 1px solid #ff914d;
  color: #ff914d;
  font-size: 1rem;
  padding: 0.5rem 2rem;
}
.pager > li a:hover {
  background-color:  #ff914d;
  color: #fff;
}


/***************************************************
MENU TOP BAR
***************************************************/
.sp-custom-login-on{
  position:relative;
  margin-right:15px
}
.sp-custom-login-on .icons-wrap .user-icon{
  font-size:16px;
  margin-right:5px
}
.sp-custom-login-on .icons-wrap .log-text{
  font-size:13px;
  font-weight:500
}
.sp-custom-login-on .arrow-icon{
  font-size:12px;
  margin-left:5px
}
.sp-custom-login-on .form-login-wrap{
  position:absolute;
  top:100%;
  display:none;
  -webkit-animation:fadeInDown 0.5s;
  animation:fadeInDown 0.5s;
  -webkit-transition:0.3s;
  transition:0.3s;
  z-index:10000;
  right:0px;
  padding-top:9px
}
.sp-custom-login-on .form-login-wrap .login-greeting{
  margin-bottom:10px
}
.sp-custom-login-on .form-login-wrap .form-users-wrapper{
  min-width:150px;
  border:1px solid #e0e0e0;
  background:#fff
}
.sp-custom-login-on .form-login-wrap .form-users-wrapper ul.menu{
  list-style:none;
  font-weight:600;
  padding:5px 10px;
  margin-bottom:0;
  border-bottom:1px solid #efeff3
}
.sp-custom-login-on .form-login-wrap .form-users-wrapper ul.menu>li:not(:last-child){
  margin-bottom:5px
}
.sp-custom-login-on .form-login-wrap .form-users-wrapper ul.menu li{
  line-height:normal;
  text-align: left;
}
.sp-custom-login-on .form-login-wrap .form-users-wrapper ul.menu li a{
  color: #000 !important;
  font-size:12px;
  font-weight:normal;
  line-height:normal
}
.sp-custom-login-on .form-login-wrap .form-users-wrapper .logout-button{
  font-weight:600;
  -webkit-transition:0.3s;
  transition:0.3s;
  text-align:center;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center
}
.sp-custom-login-on .form-login-wrap .form-users-wrapper .logout-button:hover,.sp-custom-login-on .form-login-wrap .form-users-wrapper .logout-button:focus{
  cursor:pointer;
  text-decoration:none
}
.sp-custom-login-on .form-login-wrap .form-users-wrapper .logout-button i.fa{
  font-size:16px;
  margin-right:10px
}
.sp-custom-login-on .form-login-wrap .form-users-wrapper .logout-button input[type="submit"]{
  color: #000 !important;
  text-decoration: none;
  font-size:14px;
  font-weight:600;
  cursor:pointer
}
.sp-custom-login-on:hover .form-login-wrap{
  display:block
}

/** OFFCANVAS ICON **/
.burger-icon > span {
  background-color: #ff914d;
  background: #ff914d;
}

/***************************************************
MEGAMENU
***************************************************/
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {padding: 0 10px;}

/***************************************************
OFFCANVAS MENU
***************************************************/
.offcanvas-menu .offcanvas-inner .sp-module ul > li a, .offcanvas-menu .offcanvas-inner .sp-module ul > li span {
  font-size: 1.2rem;
}
.offcanvas-menu .offcanvas-inner .sp-module ul > li a:active,
.offcanvas-menu .offcanvas-inner .sp-module ul > li a:focus,
.offcanvas-menu .offcanvas-inner .sp-module ul > li a:hover {
  color: #333;
}

/***************************************************
EDOCMAN
***************************************************/
.edocman-document-page {margin-top: 125x;}
.edocman_new {display: none;}
#edocman-document-info {display: none;}
.edocman-download-form .text-info {color: rgb(51,51,51) !important}
#form-content {padding: 15px; height: 450px !important; background-color: #fff;}
.edocman-download-form input#edocman-name, .edocman-download-form input#email {height: auto;}


/***************************************************
ACYMAILING MODULE
***************************************************/
.acym_module_form .onefield {display: inline-block; padding-left: 15px; padding-right: 15px;}
.acym_module_form .onefield input {
  max-width: 100%;
  background: #ffffff;
  color: #333333;
  font-size: 16px;
  border-width: 1px 1px 1px 1px;
  border-style: solid;
  border-color: #333333 !important;
  border-radius: 5px;
  padding: 14px 20px 14px 20px;
  transition: .35s;
  height:auto;}
  .acysubbuttons .btn.btn-primary.button.subbutton {
    border: 1px solid #fff;
    height: 41px;
    font-weight: bold;
    padding: 6px 25px;
    width: 150px;
    max-width: 100%;
  }
  #acym__user__edit__email {
    display: inline;
    max-width: 100%;
    width: 100%;
    max-width: 400px;
  }
  .acym_form {margin: 0 auto; text-align: center;}
  .acyfield_2 { padding-right: 5px;}
  
  #acyarchiveview h1.contentheading {text-align: center;}
  fieldset.newsletter_attachments {margin-bottom: 30px;}
  
  /***************************************************
  ARTICLES
  ***************************************************/
  .article-list .article .article-intro-image, .article-list .article .article-featured-video,
  .article-list .article .article-featured-audio, .article-list .article .article-feature-gallery {border-bottom: 0px;}
  .article-list .article-intro-image p.img_caption {font-size: 0.85rem; color: #333;}
  .article-list .tags {display: none;}
  .article-list .article .article-header h1 a, .article-list .article .article-header h2 a {font-weight: 600;}
  .article-list .article .article-header h2 a {font-size: 1.7rem;}
  .article-info {margin-bottom: 0.1rem !important;}
  .article-info > span + span::before {content: "|" !important;}
  .article-list .reading-time, .article-details .reading-time {font-weight: normal !important; font-size: 0.813rem; margin-bottom: 1rem;}
  .article-list .article .article-intro-image, .article-list .article .article-featured-video,
  .article-list .article .article-featured-audio, .article-list .article .article-feature-gallery {margin: 0 0 20px 0;}
  .article-list .tags {margin: 1rem 0 0 0;}
  .article-list .tags::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 5 Free";
    font-weight: 600;
    content: "\f02c";
  }
  .article-list .tags > li a {background: none; padding: 0.5rem; border-radius: 0px;}
  .article-list .article .readmore {margin: 1rem 0 0 0;}
  .article-details .article-header h1 {font-weight: 600;}
  .article-details .article-info, .article-details .reading-time {display: block; text-align: center;}
  .article-details .page-content .sppb-row-container {padding-left: 0px; padding-right: 0px;}
  .article-full-image img {margin-left: auto; margin-right: auto;}
  .article-details .article-header h1, .article-details .article-header h2 {text-align: center;}
  .article-list .article figcaption.caption {text-align: left;}
  
  /***************************************************
  MOBILE
  ***************************************************/
  @media only screen and (max-width: 575px) {
    #sp-top1, #sp-top2 {text-align: center;}
    #sp-top2 {display: none;}
    #sp-header {height: 60px;}
  }
  
  
  /***************************************************
  MEDIA QUERIES
  ***************************************************/
  @media (min-width:1440px) {
    .container, 
    .com-sppagebuilder .sppb-row-container,
    .sp-page-builder .sppb-row-container,   
    .sppb-container {
      max-width: 1360px !important;
      width: 100% !important;
    }
  }

/* Content Blocks companion begin :: blocks.css :: 23dba5878865da87 */
/* ---------------------------------------------------------------------------
   Content Blocks starter blocks — companion stylesheet
   Author:    Bruno Simões <https://www.brunosimoes.pt>
   Copyright: (C) 2026 Simões Labs. All rights reserved.
   License:   GNU General Public License version 2 or later

   THIS FILE DELIBERATELY DOES NOT HAVE A LOOK OF ITS OWN.

   The blocks have to comply with the rest of the site, so every colour, font,
   radius and border here resolves from the template's own custom properties.
   There is not one hardcoded colour in this file. Change your template's
   primary colour, switch it to a dark preset, restyle its headings, and the
   blocks follow, because they are reading the same variables the template's
   own components read.

   That also fixes the hazard the Phase 0 audit found in the older pack, where
   .jb-card and .jb-flip__front hardcoded background:#fff while text colour
   came from --bs-body-color: on a dark template that is light text on white.
   Surfaces below are drawn with a neutral grey at low alpha, which tints
   whatever is behind it and cannot inherit the wrong contrast.

   Bootstrap does most of the work. Helix Ultimate bundles Bootstrap 5, so
   these blocks use .row/.col-md-*, .btn, .card, .alert, .badge, .table,
   .ratio and .lead directly — which is the most literal way to comply with
   the site's styles, since those are the same classes the template itself
   uses. What is defined here is only what Bootstrap has no equivalent for:
   the carousel track, the progress ring, the counter, the countdown, the
   timeline, CSS-only tabs, and a few structural helpers.

   No @import, no url(), no @font-face, no external host, no !important.
   --------------------------------------------------------------------------- */

:root {
	/* Spacing. --jb-gap follows Bootstrap's gutter so a jb- grid lines up with
	   a .row sitting above it. */
	--bs-primary: #ff914d;
	--jb-gap: var(--bs-gutter-x, 1.5rem);
	--jb-block: 3rem;

	/* Everything visual, resolved from the template. The fallbacks are only
	   reached on a template that ships no Bootstrap variables at all, and even
	   then they are neutral rather than opinionated. */
	--jb-accent: var(--bs-primary, currentColor);
	--jb-radius: var(--bs-border-radius, .5rem);
	--jb-line: var(--bs-border-color, rgba(128, 128, 128, .35));

	/* Neutral grey rather than black or white: legible on a light template and
	   on a dark one, which a fixed colour cannot be. */
	--jb-surface: rgba(128, 128, 128, .08);
	--jb-surface-strong: rgba(128, 128, 128, .14);

	/* Consumed by .jb-progress and .jb-ring, which take the value from an
	   inline custom property on the block. Declared here so that a style
	   attribute stripped by Text Filters leaves an empty bar rather than an
	   invalid background declaration and a silently blank element. */
	--jb-pct: 0;

	/* The width of the classic vertical scrollbar, measured by blocks.js and
	   written back here. Zero on a browser with overlay scrollbars, and zero
	   when the script is not installed, which is exactly the old behaviour.
	   Consumed only by the full-bleed rules below — see the note there. */
	--jb-sbw: 0px;
}

/* --- structure ----------------------------------------------------------- */

/* Every block's outermost element. One vertical rhythm for the whole library,
   and collapsing the first and last margins so a block at the top of an
   article does not push the article's own heading around. */
.jb-block {
	margin-block: var(--jb-block);
}

.jb-block:first-child {
	margin-block-start: 10;
}

.jb-block:last-child {
	margin-block-end: 10;
}

.jb-block--tight {
	margin-block: calc(var(--jb-block) / 2);
}

.jb-block p.lead {font-size: 1rem;}

/* A padded panel. Used for icon boxes, quotes, pricing columns and anything
   that needs to read as a distinct surface without a card's full weight. */
.jb-panel {
	padding: var(--jb-gap);
	border: 1px solid var(--jb-line);
	border-radius: var(--jb-radius);
	background: var(--jb-surface);
}

.jb-panel--plain {
	background: none;
}

/* An accent bar under a section heading. Uses the template's primary colour. */
.jb-rule {
	width: 3rem;
	height: 3px;
	margin-block: .75rem;
	border: 0;
	border-radius: 3px;
	background: var(--jb-accent);
	opacity: 1;
}

.jb-rule--center {
	margin-inline: auto;
}

/* Muted supporting text. --bs-secondary-color is Bootstrap 5.3+; the fallback
   keeps it readable on 5.2, which is what Helix Ultimate 2.2.9 bundles. */
.jb-muted {
	color: var(--bs-secondary-color, inherit);
	opacity: var(--jb-muted-opacity, .75);
}

/* --- media --------------------------------------------------------------- */

/* A figure whose image fills the column and whose caption sits under it. The
   aspect ratio is not forced: cropping an author's image is a decision the
   block should not make for them. */
.jb-media {
	margin: 0;
}

.jb-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--jb-radius);
}

.jb-media figcaption {
	margin-block-start: .5rem;
	font-size: .9em;
	color: var(--bs-secondary-color, inherit);
}

/* A fixed-ratio image for grids where uneven heights would break the row.
   object-fit means the image is cropped rather than distorted. */
.jb-media--square img {
	aspect-ratio: 1;
	object-fit: cover;
}

.jb-media--wide img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* --- icon plate ---------------------------------------------------------- */

/* Holds an icon glyph or a single character. Tinted with the template's
   accent, at an alpha that works on either scheme. */
.jb-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin-block-end: 1rem;
	border-radius: var(--jb-radius);
	background: var(--jb-surface-strong);
	color: var(--jb-accent);
	font-size: 1.35rem;
	line-height: 1;
}

.jb-icon--round {
	border-radius: 50%;
}

/* A smaller icon plate, for a claim on one line rather than a panel. */
.jb-icon--sm {
	width: 2.25rem;
	height: 2.25rem;
	margin-block-end: 0;
	font-size: 1rem;
}

/* --- marker list --------------------------------------------------------- */

.jb-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jb-list > li {
	position: relative;
	padding-inline-start: 1.75rem;
	margin-block-end: .6rem;
}

.jb-list > li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .45em;
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	background: var(--jb-accent);
}

/* --- statistic ----------------------------------------------------------- */

.jb-stat {
	text-align: center;
}

.jb-stat__value {
	display: block;
	font-size: clamp(2rem, 5vw, 2.75rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--jb-accent);
}

.jb-stat__label {
	display: block;
	margin-block-start: .35rem;
	color: var(--bs-secondary-color, inherit);
}

/* --- progress bar -------------------------------------------------------- */

.jb-progress {
	margin-block-end: 1.25rem;
}

.jb-progress__head {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-block-end: .35rem;
}

.jb-progress__track {
	height: .5rem;
	border-radius: 1rem;
	background: var(--jb-surface-strong);
	overflow: hidden;
}

.jb-progress__bar {
	height: 100%;
	width: calc(var(--jb-pct) * 1%);
	border-radius: inherit;
	background: var(--jb-accent);
}

/* --- progress ring ------------------------------------------------------- */

.jb-ring {
	display: grid;
	place-items: center;
	width: 8rem;
	height: 8rem;
	margin-inline: auto;
	border-radius: 50%;
	background:
		conic-gradient(var(--jb-accent) calc(var(--jb-pct) * 1%), var(--jb-surface-strong) 0);
}

/* The hole. A pseudo-element rather than a second div, so the markup stays
   short enough for an author to read. */
.jb-ring::before {
	content: "";
	grid-area: 1 / 1;
	width: 6.2rem;
	height: 6.2rem;
	border-radius: 50%;
	background: var(--bs-body-bg, transparent);
}

.jb-ring__value {
	grid-area: 1 / 1;
	font-size: 1.4rem;
	font-weight: 700;
}

/* --- carousel ------------------------------------------------------------ */

/* The root is also the selector blocks.js binds, so it is declared even though
   it needs little: a containing block, so arrows can later be positioned over
   the track without touching any block's markup. */
.jb-carousel {
	position: relative;
}

/* A scroll-snapping track. It works with no JavaScript at all — swipe, shift
   plus wheel, and keyboard scrolling all function — and blocks.js only adds
   the two arrow buttons on top. */
.jb-carousel__track {
	display: flex;
	gap: var(--jb-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-block-end: .5rem;
	/* Room for a focus ring on the items, which overflow would otherwise clip. */
	scrollbar-width: thin;
}

.jb-carousel__item {
	flex: 0 0 min(100%, 22rem);
	scroll-snap-align: start;
}

.jb-carousel__nav {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	margin-block-start: .75rem;
}

/* The arrows are plain buttons; .btn from the template does the styling. This
   only handles the disabled state blocks.js sets at each end of the track. */
.jb-carousel__nav button[disabled] {
	opacity: .4;
}

/* --- countdown ----------------------------------------------------------- */

.jb-countdown {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jb-gap);
}

.jb-countdown__unit {
	flex: 1 1 5rem;
	padding: 1rem .5rem;
	border: 1px solid var(--jb-line);
	border-radius: var(--jb-radius);
	background: var(--jb-surface);
	text-align: center;
}

.jb-countdown__value {
	display: block;
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.jb-countdown__label {
	display: block;
	margin-block-start: .25rem;
	font-size: .85em;
	color: var(--bs-secondary-color, inherit);
}

/* Set by blocks.js when the target date passes. Styling it is what makes an
   expired countdown look deliberate rather than broken. */
.jb-countdown[data-jb-finished] .jb-countdown__value {
	opacity: .45;
}

/* --- timeline ------------------------------------------------------------ */

.jb-timeline {
	margin: 0;
	padding: 0;
	list-style: none;
	border-inline-start: 2px solid var(--jb-line);
}

.jb-timeline > li {
	position: relative;
	padding-inline-start: 1.75rem;
	padding-block-end: var(--jb-gap);
}

.jb-timeline > li:last-child {
	padding-block-end: 0;
}

.jb-timeline > li::before {
	content: "";
	position: absolute;
	inset-inline-start: -.5rem;
	inset-block-start: .3em;
	width: .875rem;
	height: .875rem;
	border-radius: 50%;
	background: var(--jb-accent);
	/* Punches the line so the dot reads as a node on it rather than beside it. */
	box-shadow: 0 0 0 4px var(--bs-body-bg, transparent);
}

.jb-timeline__when {
	display: block;
	font-size: .875em;
	font-weight: 600;
	color: var(--jb-accent);
}

/* --- CSS-only tabs ------------------------------------------------------- */

/* Radio inputs and sibling selectors, so tabs need no JavaScript. Bootstrap's
   own tabs need its JS bundle, which an article cannot rely on being present,
   and a tab set that silently shows nothing is worse than no tab set.
   Everything still works with CSS disabled too: the panels are simply all
   visible, in order, each under its own label. */
.jb-tabs__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.jb-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	border-block-end: 1px solid var(--jb-line);
}

.jb-tabs__label {
	padding: .5rem 1rem;
	border: 1px solid transparent;
	border-block-end: 0;
	border-start-start-radius: var(--jb-radius);
	border-start-end-radius: var(--jb-radius);
	cursor: pointer;
	color: var(--bs-secondary-color, inherit);
}

.jb-tabs__label:hover {
	background: var(--jb-surface);
}

.jb-tabs__panel {
	padding-block-start: var(--jb-gap);
}

/* Only the checked tab's panel shows. The rules are written per index because
   :has() is still too new to rely on for something this structural. */
.jb-tabs__panel {
	display: none;
}

.jb-tabs__input:nth-of-type(1):checked ~ .jb-tabs__panels > .jb-tabs__panel:nth-child(1),
.jb-tabs__input:nth-of-type(2):checked ~ .jb-tabs__panels > .jb-tabs__panel:nth-child(2),
.jb-tabs__input:nth-of-type(3):checked ~ .jb-tabs__panels > .jb-tabs__panel:nth-child(3),
.jb-tabs__input:nth-of-type(4):checked ~ .jb-tabs__panels > .jb-tabs__panel:nth-child(4) {
	display: block;
}

.jb-tabs__input:nth-of-type(1):checked ~ .jb-tabs__list > .jb-tabs__label:nth-child(1),
.jb-tabs__input:nth-of-type(2):checked ~ .jb-tabs__list > .jb-tabs__label:nth-child(2),
.jb-tabs__input:nth-of-type(3):checked ~ .jb-tabs__list > .jb-tabs__label:nth-child(3),
.jb-tabs__input:nth-of-type(4):checked ~ .jb-tabs__list > .jb-tabs__label:nth-child(4) {
	border-color: var(--jb-line);
	background: var(--bs-body-bg, transparent);
	color: inherit;
	font-weight: 600;
	margin-block-end: -1px;
}

/* Keyboard focus has to be visible on a label standing in for a control. */
.jb-tabs__input:focus-visible ~ .jb-tabs__list > .jb-tabs__label {
	outline: 2px solid var(--jb-accent);
	outline-offset: 2px;
}

/* --- disclosure (accordion and FAQ) ------------------------------------- */

/* <details> rather than a scripted accordion, for the same reason as the tabs:
   it works with no JavaScript, it is keyboard accessible without any ARIA, and
   the browser's find-in-page can open it. */
.jb-disclosure {
	border: 1px solid var(--jb-line);
	border-radius: var(--jb-radius);
	margin-block-end: .5rem;
	background: var(--jb-surface);
}

.jb-disclosure > summary {
	padding: .85rem 1rem;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}

.jb-disclosure > summary::-webkit-details-marker {
	display: none;
}

.jb-disclosure > summary::after {
	content: "\002B";
	color: var(--jb-accent);
	font-size: 1.25em;
	line-height: 1;
}

.jb-disclosure[open] > summary::after {
	content: "\2212";
}

.jb-disclosure__body {
	padding: 0 1rem 1rem;
}

/* --- alert --------------------------------------------------------------- */

/* .jb-alert is the hook blocks.js dismisses. The look comes from Bootstrap's
   own .alert classes, so it matches every other alert on the site. */
.jb-alert {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
}

.jb-alert__body {
	flex: 1 1 auto;
}

/* --- modal --------------------------------------------------------------- */

/* A native <dialog>. The UA canvas is light in every browser regardless of
   the page's colour scheme, which is the defect the audit found in the older
   pack — so background and colour are both set from the template. */
.jb-modal {
	max-width: min(40rem, calc(100vw - 2rem));
	padding: 0;
	border: 1px solid var(--jb-line);
	border-radius: var(--jb-radius);
	background: var(--bs-body-bg, Canvas);
	color: var(--bs-body-color, CanvasText);
}

.jb-modal::backdrop {
	background: rgb(0 0 0 / .5);
}

.jb-modal__head,
.jb-modal__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem var(--jb-gap);
}

.jb-modal__head {
	border-block-end: 1px solid var(--jb-line);
}

.jb-modal__foot {
	border-block-start: 1px solid var(--jb-line);
}

.jb-modal__body {
	padding: var(--jb-gap);
}

/* --- logo strip ---------------------------------------------------------- */

.jb-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--jb-block);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jb-logos img {
	display: block;
	max-height: 2.5rem;
	width: auto;
	/* Greyed until hovered, so a row of mismatched logos reads as one band.
	   Colour returns on hover and for anyone who cannot hover. */
	filter: grayscale(1);
	opacity: .7;
	transition: filter .2s, opacity .2s;
}

.jb-logos img:hover,
.jb-logos img:focus {
	filter: none;
	opacity: 1;
}

/* --- gallery ------------------------------------------------------------- */

.jb-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- quote --------------------------------------------------------------- */

.jb-quote {
	margin: 0;
	padding-inline-start: var(--jb-gap);
	border-inline-start: 3px solid var(--jb-accent);
	font-size: 1.15em;
}

.jb-quote footer {
	margin-block-start: .75rem;
	font-size: .85em;
	color: var(--bs-secondary-color, inherit);
}

/* --- pricing ------------------------------------------------------------- */

.jb-price {
	display: flex;
	align-items: baseline;
	gap: .35rem;
	margin-block: 1rem;
}

.jb-price__amount {
	font-size: clamp(2rem, 5vw, 2.5rem);
	font-weight: 700;
	line-height: 1;
}

.jb-price__period {
	color: var(--bs-secondary-color, inherit);
}

/* Plans sit in a Bootstrap row, where three columns of different text lengths
   would otherwise end at three different heights and leave the buttons on a
   ragged line. The column fills the row and the last child is pushed to the
   bottom, so the call to action lines up across all three. */
.jb-plan {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.jb-plan > :last-child {
	margin-block-start: auto;
}

/* The recommended plan. An outline in the accent colour rather than a
   different background, so it reads as emphasis on any template. */
.jb-plan--featured {
	border-color: var(--jb-accent);
	box-shadow: 0 0 0 1px var(--jb-accent);
}

/* --- hero ---------------------------------------------------------------- */

.jb-hero {
	padding: clamp(2rem, 6vw, 4.5rem) var(--jb-gap);
	border-radius: var(--jb-radius);
	background: var(--jb-surface);
	text-align: center;
}

.jb-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
	margin-block-start: var(--jb-gap);
}

/* Full width. The side padding comes from the shared rule above, so only the
   vertical padding and the corners are set here: a band that reaches the edge
   of the window must not have rounded corners, because there is nothing beside
   them for the curve to read against. */
.jb-hero--full {
	padding-block: clamp(2.5rem, 8vw, 6rem);
	border-radius: 0;
}

/* With a photograph behind it.

   The image is an <img> rather than a CSS background for two reasons that both
   matter here: a background-image cannot be replaced from Joomla's media
   manager, which is how every other image in this library is changed, and it
   cannot carry alt text. Absolutely positioned and pulled behind the content
   with a stacking context of its own, so it cannot escape the block. */
.jb-hero--cover {
	position: relative;
	isolation: isolate;
	display: grid;
	align-content: center;
	min-height: min(60vh, 34rem);
	background: none;
}

.jb-hero__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* One of the three deliberate scrims in this file. Every other colour here
   resolves from the template, but text over a photograph is the one case where
   it cannot: the photograph is the background, the template knows nothing
   about it, and an unscrimmed heading is unreadable over half the images
   anybody will use. So the scrim and the text colour are fixed together, and
   they are fixed to each other rather than to the template. */
.jb-hero--cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(rgb(0 0 0 / .55), rgb(0 0 0 / .35));
}

.jb-hero--cover,
.jb-hero--cover h2,
.jb-hero--cover h3,
.jb-hero--cover p {
	color: rgb(255 255 255);
}

/* Keeps a line of hero text to a readable measure on a wide window, without
   taking the band itself off the edges. */
.jb-hero__content {
	max-width: 46rem;
	margin-inline: auto;
}

/* --- call to action ------------------------------------------------------ */

.jb-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--jb-gap);
	padding: var(--jb-gap);
	border: 1px solid var(--jb-line);
	border-radius: var(--jb-radius);
	background: var(--jb-surface);
}

.jb-cta__body {
	flex: 1 1 20rem;
}

/* --- motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.jb-carousel__track {
		scroll-behavior: auto;
	}

	.jb-logos img {
		transition: none;
	}
}

/* --- before and after ---------------------------------------------------- */

/* Two images stacked, the top one in a box the browser lets you resize. The
   resize grip IS the slider: no script, works with touch and with a keyboard
   once the box has focus, and with CSS off you simply see the "after" image.
   Every JavaScript comparison slider is a reimplementation of this. */
.jb-compare {
	position: relative;
	display: grid;
	border-radius: var(--jb-radius);
	overflow: hidden;
}

.jb-compare img {
	display: block;
	width: 100%;
	height: auto;
}

.jb-compare__after {
	grid-area: 1 / 1;
}

.jb-compare__before {
	grid-area: 1 / 1;
	position: relative;
	width: 50%;
	min-width: 2rem;
	/* max-width rather than 100%: the grip needs somewhere to sit at full width. */
	max-width: calc(100% - 1rem);
	overflow: hidden;
	resize: horizontal;
	border-inline-end: 2px solid var(--bs-body-bg, Canvas);
}

/* The image inside the resizable box must not shrink with it, or both halves
   scale and the comparison is meaningless. */
.jb-compare__before img {
	max-width: none;
	width: var(--jb-compare-width, 100cqw);
}

.jb-compare {
	container-type: inline-size;
}

.jb-compare__label {
	position: absolute;
	inset-block-end: .5rem;
	padding: .15rem .5rem;
	border-radius: var(--jb-radius);
	/* One of two places in this file with a fixed colour, and both are
	   scrims over a photograph rather than surfaces on the page: a label
	   sitting on an image the site does not choose has to be legible
	   whatever that image contains, which a theme variable cannot promise. */
	background: rgb(0 0 0 / .6);
	color: rgb(255 255 255);
	font-size: .8rem;
}

.jb-compare__label--before {
	inset-inline-start: .5rem;
}

.jb-compare__label--after {
	inset-inline-end: .5rem;
}

/* --- responsive comparison table ----------------------------------------- */

/* A real table on desktop. Below the breakpoint each row becomes a card and
   each cell grows its own label from a data attribute, so the header row is
   not lost and nobody has to scroll sideways. */
.jb-matrix {
	width: 100%;
	border-collapse: collapse;
}

.jb-matrix th,
.jb-matrix td {
	padding: .65rem .75rem;
	border-block-end: 1px solid var(--jb-line);
	text-align: start;
	vertical-align: top;
}

.jb-matrix thead th {
	border-block-end-width: 2px;
	font-weight: 600;
}

.jb-matrix .jb-matrix__yes {
	color: var(--jb-accent);
	font-weight: 700;
}

@media (max-width: 767.98px) {
	.jb-matrix thead {
		/* Hidden from sight, not from assistive technology: the labels below
		   carry the same words, so this is a duplicate rather than a loss. */
		display: none;
	}

	.jb-matrix,
	.jb-matrix tbody,
	.jb-matrix tr,
	.jb-matrix td,
	.jb-matrix th {
		display: block;
	}

	.jb-matrix tr {
		margin-block-end: var(--jb-gap);
		border: 1px solid var(--jb-line);
		border-radius: var(--jb-radius);
		overflow: hidden;
	}

	.jb-matrix td {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
		border-block-end: 1px solid var(--jb-line);
	}

	.jb-matrix td:last-child {
		border-block-end: 0;
	}

	.jb-matrix td::before {
		content: attr(data-label);
		font-weight: 600;
		opacity: .75;
	}

	.jb-matrix th[scope="row"] {
		padding: .75rem;
		background: var(--jb-surface);
		font-size: 1.05em;
	}
}

/* --- alternating timeline ------------------------------------------------ */

.jb-track {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jb-track > li {
	position: relative;
	padding-inline-start: 2rem;
	padding-block-end: var(--jb-gap);
	border-inline-start: 2px solid var(--jb-line);
}

.jb-track > li::before {
	content: "";
	position: absolute;
	inset-inline-start: -.5rem;
	inset-block-start: .3em;
	width: .875rem;
	height: .875rem;
	border-radius: 50%;
	background: var(--jb-accent);
	box-shadow: 0 0 0 4px var(--bs-body-bg, transparent);
}

@media (min-width: 768px) {
	/* Two columns with the line down the middle. The border moves off the
	   items and onto the list, so the line is continuous rather than a stack
	   of segments with seams. */
	.jb-track {
		display: grid;
		grid-template-columns: 1fr 2px 1fr;
		column-gap: 0;
	}

	.jb-track::before {
		content: "";
		grid-column: 2;
		grid-row: 1 / -1;
		background: var(--jb-line);
	}

	.jb-track > li {
		grid-column: 1;
		padding-inline: 0 2rem;
		border-inline-start: 0;
		text-align: end;
	}

	.jb-track > li:nth-child(even) {
		grid-column: 3;
		padding-inline: 2rem 0;
		text-align: start;
	}

	.jb-track > li::before {
		inset-inline-start: auto;
		inset-inline-end: -.44rem;
	}

	.jb-track > li:nth-child(even)::before {
		inset-inline-start: -.44rem;
		inset-inline-end: auto;
	}
}

.jb-track__when {
	display: block;
	font-size: .875em;
	font-weight: 600;
	color: var(--jb-accent);
}

/* --- monthly / yearly switch --------------------------------------------- */

/* The same radio mechanism as the tabs, applied to prices. Two sets of figures
   exist in the markup and CSS shows one, so the page needs no script and a
   reader with CSS off sees both, labelled. */
.jb-switch__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.jb-switch__control {
	display: inline-flex;
	gap: .25rem;
	padding: .25rem;
	margin-block-end: var(--jb-gap);
	border: 1px solid var(--jb-line);
	border-radius: 2rem;
	background: var(--jb-surface);
}

.jb-switch__label {
	padding: .35rem 1rem;
	border-radius: 2rem;
	cursor: pointer;
	font-size: .9rem;
}

.jb-switch__input:nth-of-type(1):checked ~ .jb-switch__control > .jb-switch__label:nth-child(1),
.jb-switch__input:nth-of-type(2):checked ~ .jb-switch__control > .jb-switch__label:nth-child(2) {
	background: var(--jb-accent);
	color: var(--bs-body-bg, Canvas);
	font-weight: 600;
}

.jb-switch__input:nth-of-type(1):checked ~ * .jb-price--yearly,
.jb-switch__input:nth-of-type(2):checked ~ * .jb-price--monthly {
	display: none;
}

.jb-switch__input:focus-visible ~ .jb-switch__control {
	outline: 2px solid var(--jb-accent);
	outline-offset: 2px;
}

/* --- on this page -------------------------------------------------------- */

.jb-toc {
	position: sticky;
	inset-block-start: 1rem;
	padding: var(--jb-gap);
	border: 1px solid var(--jb-line);
	border-radius: var(--jb-radius);
	background: var(--jb-surface);
}

.jb-toc ol {
	margin: 0;
	padding-inline-start: 1.1rem;
}

.jb-toc li {
	margin-block-end: .35rem;
}

/* --- masonry ------------------------------------------------------------- */

/* CSS columns rather than a grid: ragged heights are the point, and columns
   handle them without the layout thrashing a JavaScript masonry does. Reading
   order goes down each column, which is correct for a gallery and would not be
   for prose. */
.jb-masonry {
	columns: 3 14rem;
	column-gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jb-masonry > li {
	break-inside: avoid;
	margin-block-end: .75rem;
}

/* --- logo marquee -------------------------------------------------------- */

.jb-marquee {
	overflow: hidden;
	/* A mask, so only the alpha of these stops matters; the colour is
	   opaque black because a mask has no other meaning for it. */
	mask-image: linear-gradient(90deg, transparent, rgb(0 0 0) 3rem, rgb(0 0 0) calc(100% - 3rem), transparent);
}

.jb-marquee__track {
	display: flex;
	align-items: center;
	gap: var(--jb-block);
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	animation: jb-marquee 30s linear infinite;
}

.jb-marquee:hover .jb-marquee__track,
.jb-marquee:focus-within .jb-marquee__track {
	animation-play-state: paused;
}

@keyframes jb-marquee {
	from { transform: translateX(0); }
	/* Half, because the list is duplicated in the markup: at the halfway point
	   the second copy is exactly where the first started, so the loop is
	   seamless without measuring anything. */
	to { transform: translateX(-50%); }
}

/* --- escaping the article column ----------------------------------------- */

/* Both the full-bleed banner and the full-width hero run to the edges of the
   window from inside the article column, and they do it the same way, so the
   arithmetic is written once.

   Negative side margins rather than width:100vw, because a 100vw element also
   needs centring and the two techniques then disagree about where the middle
   is. The margin is half the difference between the viewport and the column.

   The vw correction is the part an earlier version of this comment got wrong.
   It claimed the margin form could not cause a horizontal scrollbar the way
   100vw does — it can, because the two are the same width: 1vw is one per cent
   of the viewport INCLUDING the classic scrollbar, so on Windows and Linux the
   element comes out about fifteen pixels wider than the space available and
   the page gains a horizontal scrollbar. Mac hides it with overlay scrollbars,
   which is why it is easy to ship. --jb-sbw is that width, measured once by
   blocks.js; the fallback of zero is both the overlay-scrollbar case and the
   no-script case, and neither is worse off than before. */
.jb-bleed,
.jb-hero--full {
	margin-inline: calc(50% - 50vw + var(--jb-sbw) / 2);
}

/* Pushes the contents back in so they line up with the article column above
   and below, rather than with the window. Same correction, opposite sign. */
.jb-bleed,
.jb-hero--full {
	padding-inline: calc(50vw - 50% - var(--jb-sbw) / 2 + var(--jb-gap));
}

/* --- full-bleed banner --------------------------------------------------- */

.jb-bleed {
	padding-block: clamp(2rem, 6vw, 4rem);
	background: var(--jb-surface);
}

/* --- lightbox ------------------------------------------------------------ */

.jb-lightbox {
	max-width: min(64rem, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	padding: 0;
	border: 0;
	border-radius: var(--jb-radius);
	background: var(--bs-body-bg, Canvas);
	color: var(--bs-body-color, CanvasText);
}

.jb-lightbox::backdrop {
	background: rgb(0 0 0 / .8);
}

.jb-lightbox img {
	display: block;
	width: 100%;
	height: auto;
	max-height: calc(100vh - 8rem);
	object-fit: contain;
}

.jb-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .75rem var(--jb-gap);
}

/* A gallery item that opens the lightbox is a button, so it has to lose the
   button chrome without losing the focus ring. */
.jb-zoom {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

/* --- filterable grid ----------------------------------------------------- */

.jb-filter {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-block-end: var(--jb-gap);
}

/* Hidden with the attribute rather than a class, so the state lives where a
   screen reader also reads it. */
.jb-filterable [hidden] {
	display: none;
}

/* --- copyable ------------------------------------------------------------ */

.jb-copy {
	position: relative;
}

.jb-copy pre {
	margin: 0;
	padding: 1rem;
	overflow: auto;
	border: 1px solid var(--jb-line);
	border-radius: var(--jb-radius);
	background: var(--jb-surface);
}

.jb-copy__button {
	position: absolute;
	inset-block-start: .5rem;
	inset-inline-end: .5rem;
}

/* --- motion, once more --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.jb-marquee__track {
		animation: none;
	}
}

/* --- product showcase ---------------------------------------------------- */

/* The opening panel of a home page: brand line, two-tone heading, lead, three
   claims, and a screenshot beside them. Bootstrap's grid does the columns, so
   what is here is only the things it has no equivalent for — the decorative
   background, the two-tone heading and the claim row.

   isolation and the negative z-index keep both decorations behind the content
   without either of them escaping the section: a stacking context of its own
   means a page that puts something above or below this block cannot end up
   underneath its blue quarter-circle. */
.jb-showcase {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(1.5rem, 4vw, 3rem);
	border-radius: var(--jb-radius);
}

/* The quarter-circle. Drawn from the template's primary colour at low alpha
   through color-mix, so it tints rather than repaints and follows a template
   switch like everything else here. Hidden on a narrow screen, where there is
   no room beside the text for it to be decoration rather than interference. */
.jb-showcase::before {
	content: "";
	position: absolute;
	z-index: -2;
	/* Anchored off the right edge and taller than the block, so what shows is the
	   left curve of a circle most of which is outside — which is the shape in the
	   reference and, more usefully, one that cannot end up centred behind the
	   screenshot at some width nobody tested. */
	inset-block: -40%;
	inset-inline-start: 78%;
	inset-inline-end: -22%;
	border-radius: 50%;
	background: color-mix(in srgb, var(--jb-accent) 12%, transparent);
}

/* The dotted grid. A repeating radial gradient rather than an image: no request,
   nothing to replace, and it takes the accent colour with everything else. */
.jb-showcase::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: clamp(1rem, 4vw, 2.5rem);
	inset-inline-end: clamp(1rem, 6vw, 4rem);
	width: 7rem;
	height: 4.5rem;
	background-image: radial-gradient(
		color-mix(in srgb, var(--jb-accent) 45%, transparent) 1.5px,
		transparent 1.6px
	);
	background-size: 1.05rem 1.05rem;
}

@media (max-width: 991.98px) {
	.jb-showcase::before,
	.jb-showcase::after {
		display: none;
	}
}

/* The text column. Positioned, so it sits above the two decorations whatever a
   template's own stacking does, and its lead is capped at a readable measure —
   the column is half a wide screen, which is well past the point where a line
   of prose stops being easy to follow. */
.jb-showcase__body {
	position: relative;
}

.jb-showcase__body .lead {
	max-width: 34rem;
}

/* The brand line above the heading. */
.jb-showcase__brand {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-block-end: clamp(1rem, 3vw, 2rem);
	font-size: clamp(1.1rem, 2.5vw, 1.5rem);
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* Bounded in both directions, and object-fit so a logo of any proportion sits
   inside that box rather than deciding the height of the line it is on. */
.jb-showcase__brand img {
	width: clamp(2rem, 5vw, 3rem);
	height: clamp(2rem, 5vw, 3rem);
	object-fit: contain;
}

/* clamp() rather than a fixed size, because this heading is the largest text on
   the page and a size that works at 1400px is a wall of words at 380px. */
.jb-showcase__heading {
	margin: 0;
	font-size: clamp(1.9rem, 5.5vw, 3.4rem);
	line-height: 1.08;
}

/* The second line of the heading, in the template's own primary colour. Display
   block so it wraps as a line rather than mid-phrase, which is what makes the
   two-tone read as two lines instead of an accident. */
.jb-showcase__accent {
	display: block;
	color: var(--jb-accent);
}

/* The three claims. A row on a wide screen with a divider between them, a
   stacked list on a narrow one — a row of three that has to wrap is worse than
   a list that never pretended to be one. */
/* A stacked list by default and three fixed columns from 576px up.
   NOT flex-wrap. Wrapping was the obvious way to write this and it is wrong: the
   dividers sit on the second and third items, so the moment the row wraps, one
   of them starts a line with a vertical rule hanging off its left. A grid either
   fits three columns or is not a row at all, which is a state that can be
   styled. Labels wrapping onto two lines inside a column is fine — the design
   this came from does exactly that. */
.jb-showcase__claims {
	display: grid;
	gap: .75rem;
	margin: clamp(1.25rem, 3vw, 2rem) 0 0;
	padding: 0;
	list-style: none;
}

.jb-showcase__claims li {
	display: flex;
	align-items: center;
	gap: .6rem;
	font-weight: 600;
}

@media (min-width: 576px) {
	.jb-showcase__claims {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}

	.jb-showcase__claims li + li {
		padding-inline-start: 1rem;
		border-inline-start: 1px solid var(--jb-line);
	}
}

.jb-showcase__figure {
	margin: 0;
}

/* The screenshot. A shadow rather than a border, because a screenshot already
   has edges of its own and two frames read as a mistake. */
.jb-showcase__shot {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--jb-radius);
	box-shadow: 0 1.25rem 2.5rem rgb(0 0 0 / .18);
}
/* Content Blocks companion end */