/* Helium22 Corporate CMS Theme */
:root{
  --h22-primary: #0B5ED7;
  --h22-media-radius: 14px;
  --h22-radius: 6px;
  --h22-nav-bg: #ffffff;
  --h22-nav-text: #111827;
  --h22-nav-hover-bg: rgba(11,94,215,.08);
  --h22-nav-active-bar-color: #0B5ED7;
  --h22-nav-active-bar-height: 100%;
  --h22-nav-active-bar-opacity: .12;
  --h22-nav-active-bar-display: block;
  --h22-nav-active-border-size: 0px;
  --h22-nav-active-border-color: #0B5ED7;
  --h22-submenu-bg: #ffffff;
  --h22-submenu-text: #111827;
  --h22-submenu-hover-bg: rgba(11,94,215,.10);
  --h22-submenu-accent: #0B5ED7;
  --h22-submenu-accent-width: 4px;
  --h22-submenu-outer-padding: 0px;
  --h22-submenu-radius: 10px;
  --h22-submenu-font-size: .95rem;
  --h22-submenu-row-padding-y: .36rem;
  --h22-submenu-row-padding-x: .70rem;
  --h22-submenu-blade-padding-y: .1rem;
  --h22-submenu-blade-padding-x: .6rem;
  --h22-submenu-divider: rgba(17,24,39,.18);
  --h22-submenu-divider-width: 1px;
  --h22-submenu-line-height: 1.1;
  --h22-nav-toggler-invert: 0;
  --h22-nav-toggler-border: rgba(17,24,39,.18);
}

html, body { height: 100%; }
body{
  font-family: var(--h22-font);
  background: var(--h22-page-bg, #f6f8fc);
  color: var(--h22-page-text, #111827);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------------------------
 * Page background effects — Admin ▸ Settings ▸ Page colours ▸ Page background.
 * A body class picks the effect, a second class its strength. The flat colour
 * set in Settings always stays underneath, so text contrast is unchanged if a
 * browser does not support backdrop-filter.
 * ------------------------------------------------------------------------- */
body.h22-bgfx-subtle{ --h22-bgfx-blur: 6px;  --h22-bgfx-alpha: .86; --h22-bgfx-ink: .10; }
body.h22-bgfx-medium{ --h22-bgfx-blur: 14px; --h22-bgfx-alpha: .74; --h22-bgfx-ink: .18; }
body.h22-bgfx-strong{ --h22-bgfx-blur: 26px; --h22-bgfx-alpha: .58; --h22-bgfx-ink: .30; }

/* The effect is drawn as a fixed overlay BEHIND the content (z-index:-1) rather
   than by setting body's background-image. The Page background setting may hold
   a full CSS value — this theme stores a gradient — and replacing it would throw
   that away. As an overlay, the chosen background always shows through. */
body.h22-bg-glass::before,
body.h22-bg-gradient::before,
body.h22-bg-glow::before,
body.h22-bg-dots::before,
body.h22-bg-grain::before{
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Soft diagonal wash — light at the top, deeper at the foot. */
body.h22-bg-gradient::before,
body.h22-bg-glass::before{
  background-image: linear-gradient(160deg,
      rgba(255,255,255, var(--h22-bgfx-ink)) 0%,
      transparent 45%,
      rgba(0,0,0, var(--h22-bgfx-ink)) 100%);
}

/* Two off-screen colour blooms. */
body.h22-bg-glow::before{
  background-image:
    radial-gradient(60rem 40rem at 10% -12%, rgba(255,255,255, var(--h22-bgfx-ink)), transparent 62%),
    radial-gradient(52rem 36rem at 104% 12%, var(--h22-primary2, #0B5ED7), transparent 60%);
  opacity: .85;
}

body.h22-bg-dots::before{
  background-image: radial-gradient(rgba(255,255,255, var(--h22-bgfx-ink)) 1px, transparent 1px);
  background-size: 18px 18px;
}

/* Fine film grain, inline so it costs no request. */
body.h22-bg-grain::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: var(--h22-bgfx-ink);
}

/* Frosted glass: panels go translucent and blur whatever sits behind them.
   Bootstrap's .bg-white / .border carry !important, so these must too. */
body.h22-bg-glass .h22-content,
body.h22-bg-glass .h22-pc-title,
body.h22-bg-glass .card{
  background-color: rgba(255,255,255, var(--h22-bgfx-alpha)) !important;
  border-color: rgba(255,255,255,.45) !important;
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  body.h22-bg-glass .h22-content,
  body.h22-bg-glass .h22-pc-title,
  body.h22-bg-glass .card{
    -webkit-backdrop-filter: blur(var(--h22-bgfx-blur)) saturate(140%);
            backdrop-filter: blur(var(--h22-bgfx-blur)) saturate(140%);
  }
}
/* Without backdrop-filter the panel would just look washed out, so keep it solid. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  body.h22-bg-glass .h22-content,
  body.h22-bg-glass .h22-pc-title,
  body.h22-bg-glass .card{ background-color: rgba(255,255,255,.94) !important; }
}

.h22-logo{
  height: 34px;
  width: auto;
}
/* In a navbar the logo is a tight-cropped wordmark — no padding, letters running
   edge to edge — so it reads noticeably larger than its box height suggests.
   Sized down here; the sign-in pages keep 34px, where it sits beside a two-line
   text block that would otherwise tower over it. */
.navbar-brand .h22-logo{ height: 26px; }

.h22-main{ flex: 1 0 auto; }

.h22-topbar .navbar{
  background: var(--h22-nav-bg) !important;
  border-radius: 0;
  box-shadow: var(--h22-nav-bottom-shadow, none);
}
.h22-topbar .navbar .navbar-brand,
.h22-topbar .navbar .navbar-brand span{
  color: var(--h22-nav-text) !important;
}
.h22-topbar .navbar-toggler{
  border-color: var(--h22-nav-toggler-border);
}
.h22-topbar .navbar-toggler-icon{
  filter: invert(var(--h22-nav-toggler-invert));
}

.h22-topbar .nav-link{
  font-family: var(--h22-nav-font-family, var(--h22-font));
  font-size: var(--h22-nav-font-size, 1rem);
  font-weight: 700;
  color: var(--h22-nav-text);
  padding: .65rem .75rem;
  border-radius: 0;
}
/* One text colour for every state — normal, hover, selected. Bootstrap's
   .navbar-nav .nav-link.active (0,3,0) outranks .h22-topbar .nav-link (0,2,0)
   and would otherwise force its own near-black on the selected item, which is
   invisible on a dark bar. Matching its specificity keeps "Top menu text" in
   charge throughout; the selected item is marked by the active bar, not by
   recolouring its text. */
.h22-topbar .navbar-nav .nav-link,
.h22-topbar .navbar-nav .nav-link:hover,
.h22-topbar .navbar-nav .nav-link:focus,
.h22-topbar .navbar-nav .nav-link.active,
.h22-topbar .navbar-nav .nav-link.show{
  color: var(--h22-nav-text);
}
.h22-topbar .nav-link:hover{
  background: var(--h22-nav-hover-bg, rgba(11,94,215,.08));
}


.h22-topbar .nav-link{
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.h22-topbar .nav-link::after{
  content:'';
  position:absolute;
  left:0; right:0;
  bottom:0;
  display: var(--h22-nav-active-bar-display);
  height: var(--h22-nav-active-bar-height);
  background: var(--h22-nav-active-bar-color);
  opacity: var(--h22-nav-active-bar-opacity);
  transform: translateY(110%);
  transition: transform .14s ease-in-out;
  z-index: 0;
}
.h22-topbar .nav-link.active::after{
  transform: translateY(0);
}

/* Optional active border (default off) */
.h22-topbar .nav-link.active::before{
  content:"";
  position:absolute;
  inset:0;
  box-shadow: inset 0 0 0 var(--h22-nav-active-border-size) var(--h22-nav-active-border-color);
  pointer-events:none;
  z-index:0;
}
.h22-topbar .nav-link span,
.h22-topbar .nav-link{
  position: relative;
  z-index: 1;
}
.h22-topbar .nav-link:focus,
.h22-topbar .nav-link:focus-visible{
  outline: none;
  box-shadow: none;
}

.h22-nav-date{
  font-family: var(--h22-nav-font-family, var(--h22-font));
  font-size: calc(var(--h22-nav-font-size, 1rem) * .85);
  font-weight: 400;
  color: var(--h22-nav-text);
  opacity: .88;
  padding: .35rem .25rem;
  white-space: nowrap;
}
@media (max-width: 991.98px){
  .h22-nav-date{ padding: .25rem .75rem; }
}

/* Blade headings in Admin > Menus carry the rows beneath them when dragged,
   so they get a left rule to show where each blade starts, and the rows
   travelling with one are dimmed while the drag is in progress. */
.h22-blade-head{
  border-left: 3px solid var(--h22-primary, #0B5ED7);
}
.h22-blade-moving{
  opacity: .45;
  background: rgba(11,94,215,.06);
}

/* Menu row actions (Admin > Menus): Hide/Show, Edit, Clone, Delete.
   Sized down from btn-sm so five buttons sit comfortably on one row without
   pushing the item's label out of the way. */
.h22-menu-actions .btn{
  padding: .15rem .45rem;
  font-size: .75rem;
  line-height: 1.4;
  white-space: nowrap;
}
.h22-menu-actions .btn i{ font-size: .85em; }

/* Admin sidebar */
.h22-admin-sidebar{
  scrollbar-width: thin;
}
.h22-admin-sidebar .nav-link{
  font-size: .875rem;
  padding: .45rem .65rem;
  border-radius: 6px;
  color: #374151;
  white-space: nowrap;
}
.h22-admin-sidebar .nav-link:hover{
  background: rgba(11,94,215,.06);
  color: #111827;
}
.h22-admin-sidebar .nav-link.active{
  background: var(--h22-primary, #0B5ED7);
  color: #fff;
}
.h22-admin-signedin{
  font-size: .78rem;
  line-height: 1.15;
  word-break: break-word;
}


.dropdown-menu{
  background: var(--h22-submenu-bg);
  background-image: var(--h22-submenu-bg-image, none);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid #334155;
  border-radius: var(--h22-submenu-radius);
  padding: var(--h22-submenu-outer-padding);
  box-shadow: var(--h22-submenu-shadow-x) var(--h22-submenu-shadow-y) var(--h22-submenu-shadow-blur) var(--h22-submenu-shadow-spread) var(--h22-submenu-shadow-color);
}
.dropdown-item{
  border-radius: 0;
  padding: var(--h22-submenu-row-padding-y) var(--h22-submenu-row-padding-x);
  white-space: nowrap;
  font-family: var(--h22-submenu-font-family, var(--h22-font));
  font-weight: 400;
  line-height: var(--h22-submenu-line-height);
  font-size: var(--h22-submenu-font-size);
  color: var(--h22-submenu-text);
}
.dropdown-item b,
.dropdown-item strong{
  font-weight: 700;
}
.dropdown-item:hover{
  background: var(--h22-submenu-hover-bg);
  color: var(--h22-submenu-text);
  box-shadow: inset var(--h22-submenu-accent-width) 0 0 var(--h22-submenu-accent);
}

/* Non-selectable submenu rows */
.dropdown-menu .h22-menu-header{
  padding: .30rem var(--h22-submenu-row-padding-x);
  font-family: var(--h22-submenu-font-family, var(--h22-font));
  font-size: calc(var(--h22-submenu-font-size) * 0.85);
  font-weight: 500;
  color: rgba(17,24,39,.55);
  cursor: default;
  user-select: none;
}
.dropdown-menu .h22-menu-divider{
  margin: .35rem 0;
  border-top-color: var(--h22-submenu-divider, rgba(17,24,39,.18));
}

/* Multi-level dropdown support */
.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu{
  top: 0;
  left: 100%;
  margin-left: .25rem;
  display: none;
}
.dropdown-submenu.h22-open-left > .dropdown-menu{
  left: auto;
  right: 100%;
  margin-left: 0;
  margin-right: .25rem;
}
.dropdown-submenu:hover > .dropdown-menu{ display: block; }

.h22-h1{ font-size: clamp(1.45rem, 1.1vw + 0.95rem, 2.0rem); font-weight: 300; letter-spacing: -0.01em; }
.h22-h2{ font-size: clamp(1.35rem, 1.0vw + 1rem, 1.9rem); font-weight: 500; letter-spacing: -0.01em; }
.h22-h3{ font-size: 1.15rem; font-weight: 500; letter-spacing: -0.005em; }
.h22-h4{ font-size: 1.0rem; font-weight: 500; }

.h22-lead{
  font-size: 1.05rem;
  color: #4b5563;
  line-height: 1.6;
  margin-top: .5rem;
}

.h22-content{
  font-size: 1rem;
  line-height: 1.7;
}
.h22-content::after{ content:""; display:block; clear:both; }
.h22-content h2{ font-size: 1.4rem; margin-top: 1.25rem; }
.h22-content h3{ font-size: 1.15rem; margin-top: 1.1rem; }

.btn-primary{
  background: var(--h22-primary);
  border-color: var(--h22-primary);
}
.btn-outline-primary{
  border-color: rgba(11,94,215,.4);
  color: var(--h22-primary);
}
.btn-outline-primary:hover{
  background: rgba(11,94,215,.08);
  border-color: var(--h22-primary);
  color: var(--h22-primary);
}

/* Media style (configurable defaults via admin) */
.h22-media{
  width: 100%;
  max-height: 360px;
  object-fit: cover;
}
.h22-rounded{ border-radius: calc(var(--h22-radius) + 10px); }
.h22-media.h22-rounded{ border-radius: var(--h22-media-radius); }
.h22-shape-none{ border-radius: 0 !important; }
.h22-media.h22-shape-none{ border-radius: 0 !important; }
.h22-circle{ border-radius: 9999px; }

/* Token image embeds: {img:ref|...} */
.h22-token-img{
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}
.h22-token-img.border{ border-color: rgba(17,24,39,.12)!important; }

/* Token download links: {download:...} */
.h22-token-download{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  text-decoration: underline;
}
.h22-token-download:hover{ text-decoration: none; }

/* Floated token embeds: {img:...|float=left} and {video:...|float=right} */
.h22-float-media{
  max-width: 100%;
  margin: .25rem 0 1rem 0;
}
.h22-float-left{
  float: left;
  margin-right: 1rem;
}
.h22-float-right{
  float: right;
  margin-left: 1rem;
}

.h22-token-video,
.h22-token-video-iframe{
  max-width: 100%;
  border: 0;
  border-radius: var(--h22-media-radius);
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  display: block;
  background: #000;
}

/* "Save video" link shown under a self-hosted video */
.h22-video-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: .4rem;
}
.h22-video-download{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .875rem;
  padding: .25rem .6rem;
  border-radius: var(--h22-page-btn-radius, .5rem);
  border: 1px solid rgba(17,24,39,.18);
  color: var(--h22-primary, #0B5ED7);
  text-decoration: none;
  background: rgba(255,255,255,.65);
}
.h22-video-download:hover,
.h22-video-download:focus{
  background: var(--h22-primary, #0B5ED7);
  border-color: var(--h22-primary, #0B5ED7);
  color: #fff;
}

@media (max-width: 576px){
  .h22-float-left,
  .h22-float-right{ float: none; margin-left: 0; margin-right: 0; }
}

/* Footer */
.h22-footer{
  background: var(--h22-footer);
  color: rgba(255,255,255,.85);
}
.h22-footer .text-muted{ color: rgba(255,255,255,.75)!important; }

/* Footer quick links — horizontal sitemap (SEO) */
.h22-footmap-sec{
  padding-bottom: .8rem;
  margin-bottom: .8rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.h22-footmap-sec:last-child{ border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.h22-footlinks-head{
  font-family: var(--h22-heading-font, var(--h22-font));
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  margin-bottom: .35rem;
}
.h22-footlinks-head a{ color: #ffffff; text-decoration: none; }
.h22-footlinks-head a:hover{ text-decoration: underline; }
.h22-footmap-links{ line-height: 2; }
.h22-footmap-links a{
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: .875rem;
  white-space: nowrap;
  transition: color .15s ease;
}
.h22-footmap-links a:hover{ color: #ffffff; text-decoration: underline; }
.h22-footsep{ color: rgba(255,255,255,.28); margin: 0 .25rem; }
.h22-foot-hr{
  border-top: 1px solid rgba(255,255,255,.14);
  opacity: 1;
  margin: .5rem 0 1.5rem;
}

/* Popup video link inserted by the WYSIWYG editor */
.h22-popup-video{ text-decoration: none; color: inherit; }
.h22-popup-video:hover{ text-decoration: none; }

@media (max-width: 991.98px){
  .dropdown-submenu > .dropdown-menu{
    left: 0;
    margin-left: 0;
    margin-top: .25rem;
  }
  .dropdown-submenu:hover > .dropdown-menu{ display: none; } /* avoid hover-only on touch */
  .dropdown-submenu > a::after{ content: ' (tap)'; font-size: .8em; color: #6b7280; }
}

.rounded-4{ border-radius: var(--h22-radius)!important; }
.rounded-5{ border-radius: calc(var(--h22-radius) + 4px)!important; }

/* Admin menu drag/drop */
.h22-menu-list{ margin: 0; padding-left: 0; }
.h22-menu-list > li.list-group-item{ border-radius: var(--h22-radius); }
/* Darker borders so the (nested) menu layout is easy to see */
.h22-menu-list .list-group-item{
  border-color: rgba(17,24,39,.32);
  --bs-list-group-border-color: rgba(17,24,39,.32);
}
/* Nested child groups: an indent guide line makes the hierarchy obvious */
.h22-menu-list .list-group-item > .mt-2.ms-4{
  border-left: 3px solid rgba(17,24,39,.28);
  padding-left: .85rem;
  margin-left: .75rem !important;
}


/* Legal content preview boxes */
.h22-legal-box{max-height:220px;overflow:auto;border:1px solid rgba(17,24,39,.10);border-radius: var(--h22-radius);padding: .75rem;background:#fff;}


/* Submenu item icon */
.dropdown-menu .dropdown-item .h22-submenu-icon{
  width: var(--h22-submenu-icon-size, 1.15em);
  height: var(--h22-submenu-icon-size, 1.15em);
  object-fit: contain;
  flex: 0 0 auto;
  margin-right: .55rem;
  display: inline-block;
  vertical-align: middle;
}
.dropdown-menu .dropdown-item .h22-submenu-label{
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: 0;
}

/* If ANY row in a submenu has an icon, reserve icon space for ALL rows to keep text aligned */
.dropdown-menu.h22-has-icons .dropdown-item{
  position: relative;
  padding-left: calc(var(--h22-submenu-row-padding-x) + var(--h22-submenu-icon-size, 1.15em) + .55rem);
}
.dropdown-menu.h22-has-icons .dropdown-item .h22-submenu-icon{
  position: absolute;
  left: var(--h22-submenu-row-padding-x);
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0;
}
.dropdown-menu.h22-has-icons .dropdown-item .h22-submenu-label{
  display: block;
}

/* Social icons (header + footer) */
.h22-social-wrap{ white-space: nowrap; }
.h22-social-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--h22-nav-text);
  opacity: .88;
}
.h22-social-link:hover{ opacity: 1; background: rgba(17,24,39,.06); }
.h22-footer .h22-social-link{ color: rgba(255,255,255,.92); }
.h22-footer .h22-social-link:hover{ background: rgba(255,255,255,.08); }
/* Topbar auth icon buttons */
.h22-nav-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:10px;
  text-decoration:none;
  color: var(--h22-nav-text);
  border: 1px solid rgba(17,24,39,.18);
  background: transparent;
}
.h22-nav-icon-btn:hover{ background: rgba(17,24,39,.06); }
.h22-nav-icon-btn i{ font-size: 1.05rem; line-height:1; }
.h22-nav-icon-btn.h22-nav-icon-danger{ color:#b00020; border-color: rgba(176,0,32,.25); }
.h22-nav-icon-btn.h22-nav-icon-danger:hover{ background: rgba(176,0,32,.06); }


.h22-nav-date{white-space:nowrap; font-weight:400;}

/* Block edit modal: keep footer actions visible (esp. with WYSIWYG in a scrollable modal) */
#blockEditModal .modal-footer{
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 5;
}

/* Cookie consent */
.h22-cookie-banner{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1070;
  padding: .75rem;
}
.h22-cookie-banner .alert{
  margin: 0;
  border-radius: 0;
  box-shadow: 0 8px 20px rgba(17,24,39,.18);
}

/* Scroll helper: 3 tiny dots (top/middle/bottom) */
.h22-scroll-dots{
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1060;
  display: none;
}
.h22-scroll-dots .h22-dot-wrap{
  width: 34px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 18px;
  /* Was 10% opaque, which left the white dots to fend for themselves against
     whatever happened to be behind — invisible over light page content, and the
     only reason the old black active dot was ever legible. A solid-enough pill
     makes the widget self-contained at every scroll position. */
  background: rgba(17,24,39,.62);
  backdrop-filter: blur(6px);
  padding: 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.h22-scroll-dots button{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.92);
  padding: 0;
  opacity: .85;
}
.h22-scroll-dots button:hover{ opacity: 1; }


/* Scroll dots: circle around dot + active dot black */
.h22-scroll-dots button{
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.92);
  background: transparent;
  position: relative;
  padding: 0;
}
.h22-scroll-dots button::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:4px;
  height:4px;
  border-radius:999px;
  background: rgba(255,255,255,.55);
  transform: translate(-50%, -50%);
  transition: width .12s ease, height .12s ease, background .12s ease;
}
/* The active dot used to be filled #000. That reads well over light page content
   but disappears at the foot of a page, where the dark footer has scrolled up
   behind the fixed widget — leaving the two INACTIVE dots as the only visible
   ones, which looks like "two dots at the top". The active dot is now the solid,
   larger one, so it is identified by size and weight rather than by a colour
   that only contrasts against half the page. */
.h22-scroll-dots button.active{ border-color: #fff; }
.h22-scroll-dots button.active::after{
  background: #fff;
  width: 9px;
  height: 9px;
}


/* Page Control (media section above body) */
.h22-page-control{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.h22-pc-media{
  position: absolute;
  object-fit: cover;
  max-width: none;
  border-radius: var(--h22-media-radius, 18px);
  opacity: 0;
  animation-duration: var(--h22-pc-dur, .8s);
  animation-fill-mode: both;
  will-change: transform, opacity, filter;
}
.h22-pc-title{
  position: absolute;
  max-width: min(720px, calc(100% - 48px));
  padding: 18px 20px;
  border-radius: 18px;
  backdrop-filter: blur(8px);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.08);
}

.h22-pc-title.h22-pc-title-nobg{
  background: transparent;
  border: 0;
  padding: 0;
  backdrop-filter: none;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.h22-pc-title.h22-pc-title-nobg h1{ color: #fff; }
.h22-pc-title.h22-pc-title-nobg .text-muted{
  color: rgba(255,255,255,.85) !important;
}
@keyframes h22FadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes h22SlideUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes h22ZoomIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } }
@keyframes h22BlurIn { from { opacity: 0; filter: blur(10px); transform: scale(.99); } to { opacity: 1; filter: blur(0); transform: scale(1); } }

.h22-pc-effect-fade{ animation-name: h22FadeIn; }
.h22-pc-effect-slide-up{ animation-name: h22SlideUp; }
.h22-pc-effect-zoom{ animation-name: h22ZoomIn; }
.h22-pc-effect-blur{ animation-name: h22BlurIn; }

/* Responsive: social icons wrap under nav when width is tight */
@media (max-width: 991.98px){
  header .navbar .container{
    flex-wrap: wrap;
  }
  header .navbar .container > .d-flex.align-items-center.gap-3.ms-auto{
    width: 100%;
    justify-content: flex-start;
    margin-top: .5rem;
  }
  .h22-social-wrap{
    flex-wrap: wrap;
  }
}


/* Maintenance notice splash (home) */
.h22-notice-backdrop{
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  padding: 16px;
}
.h22-notice-modal{
  width: min(640px, calc(100% - 32px));
  background: #fff;
  border-radius: 16px;
  padding: 18px 18px 14px;
  box-shadow: 0 18px 70px rgba(0,0,0,0.35);
}
.h22-notice-body{ margin: 0; }
.h22-modal-open{ overflow: hidden !important; }

/* Hover video marker (inserted via AmyEditor) */
.h22-hover-video{
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}



/* --- AmyEditor content helpers (tables, hover effects, collapsible) --- */
.h22-table{
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.98rem;
}
.h22-table th,
.h22-table td{
  border: 1px solid rgba(17,24,39,.12);
  padding: .55rem .65rem;
  vertical-align: top;
}
.h22-table thead th{
  background: #f8fafc;
  font-weight: 700;
}
.h22-hr{ opacity: .95; }

.h22-collapse{
  border: 1px solid rgba(17,24,39,.12);
  border-radius: 14px;
  padding: .55rem .75rem;
  margin: 1rem 0;
  background: #fff;
}
.h22-collapse > summary{
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.h22-collapse > summary::-webkit-details-marker{ display: none; }
.h22-collapse-body{ padding: .5rem .15rem .1rem .15rem; }

.h22-hoverpop{
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  cursor: help;
}

.h22-audiohover{
  text-decoration: underline wavy;
  text-underline-offset: 3px;
  cursor: pointer;
}


.h22-token-audio{
  width: 100%;
  max-width: 100%;
  display: block;
}


/* ============================================================
   v6 — Look & feel refinements (Starlink-inspired)
   Tasks 3 (nicer), 4 (readable menu), 5 (professional fonts),
   6 (footer ticker). Appended so it overrides earlier rules by
   cascade order; everything stays admin/settings driven.
   ============================================================ */

/* --- Typography: Odgers-inspired (Arimo headings + Nunito Sans body) --- */
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--h22-page-text, #1C2431);   /* default page text (admin-configurable) */
  letter-spacing: normal;
}

/* Big display headings use the heading font (Arimo); H3/H4 stay on the body
   font (Nunito Sans) — matching odgers.com. Headings are light (400). */
.h22-h1, .h22-h2,
.h22-content h1, .h22-content h2,
.h22-pc-title h1{
  font-family: var(--h22-heading-font, var(--h22-font));
  color: #3B3B6B;                 /* Helium22 logo dark blue */
  letter-spacing: normal;
}
.h22-h3, .h22-h4,
.h22-content h3, .h22-content h4{
  font-family: var(--h22-font);
  color: #3B3B6B;                 /* Helium22 logo dark blue */
}
/* Body (AmyEditor) content headings use an admin-configurable colour.
   Applies to in-body headings on EVERY page, but NOT the page Title or Excerpt.
   Placed after the rules above so it wins for content headings only. */
.h22-content h1, .h22-content h2, .h22-content h3,
.h22-content h4, .h22-content h5, .h22-content h6,
/* Custom feature pages (booking, manage/verify/skillset) render their own markup
   outside .h22-content — .h22-page-body opts their headings into the same setting. */
.h22-page-body h1, .h22-page-body h2, .h22-page-body h3,
.h22-page-body h4, .h22-page-body h5, .h22-page-body h6{
  color: var(--h22-content-heading-color, #0891b2);
}

/* Odgers-scale: large + light up top */
.h22-h1{ font-size: clamp(1.9rem, 1.4vw + 1.2rem, 2.45rem); font-weight: 400; line-height: 1.25; }
.h22-h2{ font-size: clamp(1.55rem, 1.1vw + 1.05rem, 2.1rem); font-weight: 400; line-height: 1.25; }
.h22-h3{ font-size: 1.35rem; font-weight: 600; line-height: 1.3; }
.h22-h4{ font-size: 1.1rem; font-weight: 600; line-height: 1.35; }
.h22-content h2{ font-family: var(--h22-heading-font, var(--h22-font)); font-size: 1.75rem; font-weight: 400; line-height: 1.25; margin-top: 1.75rem; }
.h22-content h3{ font-size: 1.3rem; font-weight: 600; margin-top: 1.3rem; }

.h22-lead, .lead{
  font-weight: 400;
  color: #4b5563;
  line-height: 1.6;
  letter-spacing: .2px;
}
.h22-content{ font-size: 1.125rem; line-height: 1.65; color: var(--h22-page-text, #1C2431); letter-spacing: .2px; }
.h22-content p{ margin-bottom: 1rem; }

/* --- Menu: normal, readable weight (sizes come from settings) --- */
.h22-topbar .nav-link{
  font-weight: 600;
  letter-spacing: .005em;
}
.h22-topbar .navbar-brand span{
  font-family: var(--h22-heading-font, var(--h22-font));
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* --- Buttons: refined, smooth, high-contrast --- */
.btn{
  font-weight: 500;
  letter-spacing: .01em;
  border-radius: 10px;
  padding: .5rem 1.1rem;
  transition: transform .12s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn-sm{ padding: .34rem .8rem; border-radius: 8px; }
.btn-primary{ box-shadow: 0 4px 14px rgba(11,94,215,.22); }
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 8px 22px rgba(11,94,215,.28); }
.btn-outline-primary:hover{ transform: translateY(-1px); }
.btn:focus-visible{ outline: 2px solid rgba(11,94,215,.5); outline-offset: 2px; box-shadow: none; }

/* --- Cards / surfaces: hairline border + softer shadow --- */
.bg-white.rounded-4.shadow-sm,
.card.shadow-sm{
  border-color: rgba(17,24,39,.08) !important;
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 12px 30px rgba(17,24,39,.06) !important;
}
.p-3.rounded-4.border.bg-light{
  background: #fff !important;
  border-color: rgba(17,24,39,.08) !important;
  transition: transform .14s ease, box-shadow .16s ease, border-color .16s ease;
}
.p-3.rounded-4.border.bg-light:hover{
  transform: translateY(-2px);
  border-color: rgba(11,94,215,.28) !important;
  box-shadow: 0 10px 26px rgba(17,24,39,.08);
}

/* --- Content links --- */
.h22-content a:not(.btn){
  color: var(--h22-primary);
  text-decoration-color: rgba(11,94,215,.35);
  text-underline-offset: 3px;
}
.h22-content a:not(.btn):hover{ text-decoration-color: var(--h22-primary); }

/* --- Page-control hero: a touch more presence --- */
.h22-page-control{ box-shadow: 0 18px 50px rgba(0,0,0,.10); }

/* ============================================================
   Footer ticker (task 6) — admin-managed strip of your sites
   ============================================================ */
.h22-ticker{
  position: relative;
  /* body is a flex column; keep the (thin) ticker from being shrunk below its content */
  flex: 0 0 auto;
  padding: .4rem 0;               /* breathing room around the contained bar */
  --h22-ticker-speed: 45s;
}
.h22-ticker > .container{ width: 100%; }
/* The coloured bar is .h22-ticker__inner — inside the container gutter — so it
   lines up with the page content cards, not the wider raw container box. */
.h22-ticker__inner{
  display: flex;
  align-items: center;
  gap: .9rem;
  min-width: 0;
  overflow: hidden;
  min-height: 2.6rem;
  padding: .55rem .9rem;
  background: var(--h22-ticker-bg, var(--h22-footer, #242930));
  color: var(--h22-ticker-fg, #ffffff);
  border: var(--h22-ticker-border-w, 1px) solid color-mix(in srgb, var(--h22-ticker-fg, #fff) 16%, transparent);
  border-radius: var(--h22-ticker-radius, 10px);
}
.h22-ticker__label{
  flex: 0 0 auto;
  font-family: var(--h22-heading-font, var(--h22-font));
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* Defaults to the ticker text colour, dimmed, so the heading sits behind the
     links. Once an admin picks a colour the dimming is dropped — otherwise the
     colour they chose isn't the colour they get. */
  color: var(--h22-ticker-label, var(--h22-ticker-fg, #fff));
  opacity: var(--h22-ticker-label-opacity, .62);
  padding-left: 4px;
  white-space: nowrap;
}
.h22-ticker__viewport{
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  /* Centre the track properly. As an inline-level box it used to sit on the line
     box's text baseline, which left descender space below it and pushed the links
     ~2.6px lower than the heading beside them. */
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.h22-ticker__track{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;              /* keep its natural width — it must overflow to scroll */
  white-space: nowrap;
  will-change: transform;
  animation: h22TickerScroll var(--h22-ticker-speed) linear infinite;
}
.h22-ticker:hover .h22-ticker__track{ animation-play-state: paused; }
.h22-ticker__item{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0 1.15rem;
  color: var(--h22-ticker-fg, #fff);
  opacity: .85;
  text-decoration: none;
  /* Same face as the "OUR NETWORK" label beside them, so the strip reads as one
     line of type. Size is admin-chosen (Admin » Footer Ticker) and defaults to
     the label's .72rem. Weight stays lighter than the label's 600 so the
     heading still leads. */
  font-family: var(--h22-heading-font, var(--h22-font));
  font-size: var(--h22-ticker-item-size, .72rem);
  font-weight: 500;
  white-space: nowrap;
  transition: opacity .15s ease;
}
.h22-ticker__item::before{
  content:"";
  width: 5px; height: 5px;
  border-radius: 999px;
  background: var(--h22-primary, #0B5ED7);
  opacity: .9;
  flex: 0 0 auto;
}
.h22-ticker__item:hover{ opacity:1; }
.h22-ticker__item:hover span{ text-decoration: underline; text-underline-offset: 3px; }
@keyframes h22TickerScroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  /* Someone who has asked for less motion gets a strip they can scroll by hand
     instead of a marquee. Keep the scrolling, hide the scrollbar itself: Windows
     11 and macOS draw overlay scrollbars that fade away, but Windows 10 paints a
     permanent classic bar, which made the ticker look like a broken scroll box.
     Wheel, touch, drag and keyboard scrolling all still work. */
  .h22-ticker__track{ animation: none; transform: none; }
  .h22-ticker__viewport{
    overflow-x: auto;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* legacy Edge */
  }
  .h22-ticker__viewport::-webkit-scrollbar{ width: 0; height: 0; }  /* Chrome, Edge, Safari */
}

/* ============================================================
   Horizontal "mega" dropdown — each section heading becomes a
   column with a vertical divider, so tall menus go sideways.
   ============================================================ */
.dropdown-menu.h22-mega.show{ display: flex; }
.dropdown-menu.h22-mega{
  flex-flow: row wrap;            /* one row when it fits; wrap columns only if wider than the viewport */
  align-items: stretch;
  width: max-content;            /* fit all columns on one row when possible */
  max-width: 96vw;               /* never exceed the viewport */
  /* Inherit the panel inset from .dropdown-menu (Settings > Submenu edge inset)
     rather than hardcoding it — this rule used to silently override the setting. */
}
.h22-mega-col{
  display: flex;
  flex-direction: column;
  min-width: 165px;
  flex: 0 0 auto;                /* natural width — never shrink columns */
  padding: var(--h22-submenu-blade-padding-y, .1rem) var(--h22-submenu-blade-padding-x, .6rem);
}
/* Menu items stay on a single line — no mid-item wrapping */
.dropdown-menu.h22-mega .dropdown-item{
  white-space: nowrap;
}
/* Blade with an admin-set width (Menus page): the column is fixed at that width,
   text wraps inside it, and the stacked description takes its natural width. */
.h22-mega-col.h22-col-fixed .dropdown-item{ white-space: normal; }
.h22-mega-col.h22-col-fixed .h22-submenu-desc{ width: auto; min-width: 0; }
/* Line partition between each heading/column */
.h22-mega-col + .h22-mega-col{
  border-left: var(--h22-submenu-divider-width, 1px) solid var(--h22-submenu-divider, rgba(17,24,39,.18));
}
/* Section heading sits at the top of its column */
.h22-mega .dropdown-item.h22-mega-head{
  margin-bottom: .2rem;
  padding-bottom: .3rem;
  border-bottom: var(--h22-submenu-divider-width, 1px) solid var(--h22-submenu-divider, rgba(17,24,39,.18));
}
.h22-mega .dropdown-item.h22-mega-head:hover{
  box-shadow: none;              /* headings don't need the hover accent bar */
}
@media (max-width: 991.98px){
  /* On mobile the menu is already vertical/collapsed — stack columns.
     nowrap matters: the desktop rule is "flex-flow: row wrap", and column+wrap
     lays the blades out in several flex lines, so each one stretches only to its
     own line's width and they come out ragged and overhanging. */
  .dropdown-menu.h22-mega{ flex-flow: column nowrap; max-width: 100%; }
  .h22-mega-col + .h22-mega-col{ border-left: 0; border-top: var(--h22-submenu-divider-width, 1px) solid var(--h22-submenu-divider, rgba(17,24,39,.18)); margin-top: .25rem; padding-top: .25rem; }

  /* Blade widths are set per blade as an inline style for the desktop mega menu
     (290px, 320px and so on). Stacked on a phone those fixed widths make the
     blades ragged and push the wider ones past the edge of the menu, so they are
     released here — the !important is unavoidable against an inline style. */
  .h22-mega-col.h22-col-fixed{
    width: auto !important;      /* let the column flex container stretch them; a
                                    literal 100% resolves against the padding box
                                    and pushes each blade past the menu's edge */
    min-width: 0 !important;
    max-width: 100% !important;
    align-self: stretch;
  }

  /* With the blades released the menu would otherwise size to its widest label
     and run off the screen, so it is pinned to the viewport instead. */
  .dropdown-menu.h22-mega{
    width: calc(100vw - 1.75rem) !important;
    max-width: calc(100vw - 1.75rem) !important;
    box-sizing: border-box;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Long labels and their descriptions wrap rather than force the menu wider.
     overflow-wrap MUST be break-word, not anywhere: `anywhere` also shrinks an
     element's min-content width to a single character, and because the row below
     is a flex container its label then collapses to one character per line. */
  .dropdown-menu.h22-mega .dropdown-item,
  .dropdown-menu.h22-mega .h22-submenu-label{
    white-space: normal;
    overflow-wrap: break-word;
    min-width: 0;
  }
  /* The description is "width:0; min-width:100%" in the base rule (zero intrinsic
     width so it never widens a column, full width once laid out), while the
     fixed-blade rule sets "width:auto; min-width:0". Stacked on a phone the two
     combined into width:0 + min-width:0, leaving a box the width of its own
     22px padding — which is why eBooks rendered one character per line. State
     both here so the pair cannot be split again. */
  .dropdown-menu.h22-mega .h22-submenu-desc{
    white-space: normal;
    overflow-wrap: break-word;
    width: auto !important;
    min-width: 0 !important;
  }
  /* The label takes the width the row gives it instead of shrinking to content. */
  .dropdown-menu.h22-mega .dropdown-item > .h22-submenu-label{ flex: 1 1 auto; }

  /* Comfortable thumb targets. Menu rows are the main navigation on a phone. */
  .dropdown-menu.h22-mega .dropdown-item,
  .navbar-nav .nav-link{
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .dropdown-menu.h22-mega .dropdown-item.h22-mega-head{ min-height: 40px; }
}

/* ============================================================
   Profile card (About Us) — photo, grey name band, dark grey
   role band. Centred in its column so it sits midway between
   the page's text edge and the body copy beside it.
   ============================================================ */
.h22-profile-card{
  max-width: 150px;             /* the bands scale with this width */
  margin: 81px auto 0;          /* drops it level with the body copy beside it,
                                   which starts below the heading and its margin */
  border-radius: 3px;
  overflow: hidden;             /* clips the photo to the card's corners */
  box-shadow: 0 2px 10px rgba(17,24,39,.14);
}
.h22-profile-card img{ width: 100%; display: block; }
.h22-profile-role{ white-space: normal; }

/* ============================================================
   Ribbon heading band (home page value cards)
   The band overhangs the card slightly and drops a folded tail
   at each end, so it reads as a ribbon wrapped around the card
   rather than a plain filled rectangle. Each card supplies its
   own --ribbon-bg (metallic gradient) and --ribbon-fold (the
   darker shade the tails are cut from).
   ============================================================ */
.h22-ribbon{
  --ribbon-overhang: 6px;   /* stays inside the 8px column gutter, so neighbouring ribbons never touch */
  --ribbon-fold-h: 9px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -16px calc(-16px - var(--ribbon-overhang)) 20px;
  padding: 10px calc(16px + var(--ribbon-overhang));
  background: var(--ribbon-bg, #132a63);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -2px 5px rgba(0,0,0,.25),
    0 4px 10px rgba(0,0,0,.16);
}
/* The tails: right-angled triangles tucked under each end. */
.h22-ribbon::before,
.h22-ribbon::after{
  content: "";
  position: absolute;
  bottom: calc(var(--ribbon-fold-h) * -1);
  width: 0;
  height: 0;
  border-style: solid;
}
.h22-ribbon::before{
  left: 0;
  border-width: 0 var(--ribbon-overhang) var(--ribbon-fold-h) 0;
  border-color: transparent var(--ribbon-fold, #0a1838) transparent transparent;
}
.h22-ribbon::after{
  right: 0;
  border-width: 0 0 var(--ribbon-fold-h) var(--ribbon-overhang);
  border-color: transparent transparent transparent var(--ribbon-fold, #0a1838);
}
/* Stacked on mobile the cards are full width, so drop the overhang to avoid
   pushing the tails past the container gutter. */
@media (max-width: 575.98px){
  .h22-ribbon{ --ribbon-overhang: 4px; }
}

/* ============================================================
   Page breadcrumbs + Back button bar
   ============================================================ */
.h22-pagebar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.h22-breadcrumb .breadcrumb{ margin-bottom: 0; font-size: 1.05rem; }
/* Breadcrumbs sit on the site background, not on the white content card, so they
   need their own colour once that background is dark. One colour for the whole
   trail — links, separators and the current page alike; the link is still
   distinguishable by its hover underline, so recolouring it adds nothing. */
.h22-breadcrumb .breadcrumb-item + .breadcrumb-item::before,
.h22-breadcrumb .breadcrumb-item a,
.h22-breadcrumb .breadcrumb-item.active{
  color: var(--h22-breadcrumb-text, var(--h22-primary, #0B5ED7));
}
.h22-breadcrumb .breadcrumb-item + .breadcrumb-item::before{ content: "\203A"; }
.h22-breadcrumb .breadcrumb-item a{ text-decoration: none; }
.h22-breadcrumb .breadcrumb-item a:hover{ text-decoration: underline; }
/* Back buttons: identical at top and bottom, black tab attached to the page
   body — top corners curved when above it, bottom corners when below it. */
.h22-back-btn{
  white-space: nowrap;
  font-weight: 500;
  font-size: .875rem;
  line-height: 1.4;
  padding: .35rem .95rem;
  background: #111111;
  border: 1px solid #111111;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.h22-back-btn:hover,
.h22-back-btn:focus{
  background: #000000;
  border-color: #000000;
  color: #ffffff;
}
.h22-back-btn:focus-visible{ outline: 2px solid rgba(17,17,17,.35); outline-offset: 2px; }
.h22-back-top{ border-radius: 2px 2px 0 0; margin-bottom: 0; }
.h22-back-bottom{ border-radius: 0 0 2px 2px; margin-top: 0; }
.h22-back-btn i{ transition: transform .15s ease; }
.h22-back-btn:hover i{ transform: translateX(-3px); }

/* ============================================================
   Members-only gate dialog (task 7)
   ============================================================ */
.h22-gate{
  position: relative;
  background: #fff;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 20px;
  padding: 2.4rem 2rem 2rem;
  text-align: center;
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 24px 60px rgba(17,24,39,.10);
  overflow: hidden;
}
.h22-gate::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:5px;
  background: linear-gradient(90deg, var(--h22-primary, #0B5ED7), var(--h22-primary2, #0A2E73));
}
.h22-gate__badge{
  width: 64px; height: 64px;
  margin: 0 auto 1rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(11,94,215,.10);
  color: var(--h22-primary, #0B5ED7);
  font-size: 1.6rem;
}
.h22-gate__tag{
  display: inline-flex; align-items: center;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--h22-primary, #0B5ED7);
}
.h22-gate__teaser{
  position: relative;
  max-height: 3.2em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent);
          mask-image: linear-gradient(180deg, #000 35%, transparent);
}
.h22-gate .btn-lg{ font-size: 1rem; }
@media (max-width: 575.98px){
  .h22-gate{ padding: 1.8rem 1.2rem 1.4rem; }
  .h22-gate .btn-lg{ width: 100%; }
}

/* ============================================================
   Consultancy availability calendar (ported from holisticmeg)
   ============================================================ */
.hm-cal{ border:1px solid #cbd5e1; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 1px 2px rgba(17,24,39,.04),0 12px 30px rgba(17,24,39,.06); }
.hm-cal-head{ background:#f8fafc; padding:12px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid #e2e8f0; }
.hm-cal-head .hm-cal-title{ font-weight:600; font-size:1rem; color:#1C2431; margin-left:8px; }
.hm-cal-day-header-row{ display:grid; grid-template-columns:64px repeat(7,1fr); position:sticky; top:0; z-index:5; background:#f1f5f9; border-bottom:2px solid #cbd5e1; }
.hm-cal-time-corner{ background:#f1f5f9; border-right:1px solid #cbd5e1; padding:10px 6px; }
.hm-cal-day-h{ background:#f1f5f9; font-weight:600; padding:10px 6px; font-size:.8rem; color:#1C2431; text-align:center; border-left:1px solid #cbd5e1; }
.hm-cal-grid-wrap{ max-height:560px; overflow-y:auto; overflow-x:hidden; }
.hm-cal-grid{ display:grid; grid-template-columns:64px repeat(7,1fr); position:relative; }
.hm-cal-time{ border-bottom:1px solid #e2e8f0; border-right:1px solid #cbd5e1; padding:0 6px; font-size:.72rem; font-weight:500; color:#64748b; display:flex; align-items:center; justify-content:flex-end; background:#fff; }
.hm-cal-cell{ border-bottom:1px solid #eef2f7; border-left:1px solid #e2e8f0; background:#fff; transition:background .12s ease; }
.hm-cal-cell.available{ background:rgba(8,145,178,.10); }
.hm-cal-cell.available:hover{ background:rgba(8,145,178,.28); cursor:pointer; }
.hm-cal-cell.unavailable{ background:#f1f2f4; }
.hm-cal-events-col{ position:relative; }
.hm-cal-event{ position:absolute; left:3px; right:3px; border-radius:8px; padding:4px 8px; font-size:.72rem; line-height:1.25; border:1px solid #cbd5e1; background:#eef2f7; overflow:hidden; box-shadow:0 1px 2px rgba(17,24,39,.08); }
.hm-cal-event.confirmed{ background:#dcfce7; border-color:rgba(34,197,94,.4); }
.hm-cal-event.pending{ background:#fef9c3; border-color:rgba(234,179,8,.5); border-style:dashed; }
.hm-cal-event .t{ font-weight:600; color:#1C2431; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hm-cal-legend{ display:flex; gap:1rem; flex-wrap:wrap; align-items:center; font-size:.85rem; color:#64748b; }
.hm-cal-legend .sw{ display:inline-block; width:14px; height:14px; border-radius:4px; margin-right:.35rem; vertical-align:-2px; border:1px solid #cbd5e1; }

/* About Us tagline (page excerpt) — keep on one line on wider screens.
   Covers both the standard title path (.h22-page-excerpt) and the page-control
   title band (.h22-pc-title .lead) used on About Us. */
@media (min-width: 992px){
  body.h22-slug-about-us .h22-page-excerpt,
  body.h22-slug-about-us .h22-pc-title .lead{ white-space: nowrap; }
}

/* The first element inside a content card must not add its own top margin on top
   of the card's padding — otherwise the first heading sits too far down. */
.h22-content > *:first-child,
.h22-content > section:first-child > *:first-child,
.h22-content .h22-toc + section > *:first-child{ margin-top: 0; }

/* Submenu "Name - description" labels: description stacks on its own smaller
   line underneath (h22_menu_label_stacked), keeping dropdown columns narrow.
   Block layout (icon/name inline, desc block) guarantees the desc line sits
   beneath. In auto mode the desc contributes ZERO intrinsic width (width:0 +
   min-width:100%) so it never widens the column; when the admin caps the
   subitem width, the vars flip so the desc contributes its real width and
   fit-content(cap) on the item sizes each column to content, up to the cap. */
.dropdown-menu .dropdown-item .h22-submenu-label{
  display: block;
  min-width: 0;
}
.dropdown-menu .h22-submenu-desc{
  display: block;
  width: 0;                 /* zero intrinsic width: never stretches auto columns */
  min-width: 100%;          /* ...but spans the full row once laid out */
  font-size: .85em;
  font-weight: 400;
  opacity: .72;
  line-height: 1.25;
  margin-top: 1px;
  white-space: normal;      /* the row itself is nowrap; let the description wrap */
}
/* Indent the description under the name when the row starts with an icon, so it
 * lines up with the name above. Padding (not leading  ) so EVERY line of a
 * wrapped description stays aligned, and in rem so it does not shrink with the
 * description's smaller font. Covers both {img:…} images and {ref} icon glyphs. */
.dropdown-menu .h22-submenu-label > img + b ~ .h22-submenu-desc,
.dropdown-menu .h22-submenu-label > .h22-token-img ~ .h22-submenu-desc,
.dropdown-menu .h22-submenu-label > i.bi ~ .h22-submenu-desc{
  padding-left: var(--h22-submenu-desc-indent, 1.375rem);
}

/* ---------------------------------------------------------------------------
 * Page-content text sizes — admin-configurable
 * (Admin > Settings > Theme > "Text sizes"). Appended last so these win over
 * the fixed sizes set earlier in this file.
 * ------------------------------------------------------------------------- */
.h22-content{ font-size: var(--h22-cbody, 1.125rem); }
.h22-content h1{ font-size: var(--h22-ch1, 2.5rem); }
.h22-content h2{ font-size: var(--h22-ch2, 1.75rem); }
.h22-content h3{ font-size: var(--h22-ch3, 1.3rem); }
.h22-content h4{ font-size: var(--h22-ch4, 1.5rem); }
.h22-content h5{ font-size: var(--h22-ch5, 1.25rem); }
.h22-content h6{ font-size: var(--h22-ch6, 1rem); }

/* ---------------------------------------------------------------------------
 * Admin > Settings: each option in its own box, with a dark-red title, so it's
 * clear which fields belong to which setting.
 * ------------------------------------------------------------------------- */
.h22-settings .tab-content{ padding-top: 1rem; }
/* One box per option */
.h22-settings .tab-pane > .row > [class*="col-"]:not(.h22-set-group){
  border: 1px solid rgba(17,24,39,.18);
  border-radius: 8px;
  padding: .7rem .85rem .75rem;
  background: #fff;
}
/* Option titles — same admin-configurable colour as the public forms.
   (The dark-red styling stays on the SECTION titles below, which head a group
   of options rather than labelling a field.) */
.h22-settings .form-label{
  font-weight: 600;
  margin-bottom: .3rem;
}
.h22-settings .form-check-label{ font-weight: 600; }
.h22-settings .form-text{ color: #6b7280; }
/* Group separators: a labelled rule that starts a new set of related options */
.h22-settings .h22-set-group{
  border: 0 !important;
  background: transparent !important;
  padding: .35rem 0 0 !important;
}
.h22-settings .h22-set-group hr{
  border-top: 2px solid rgba(137,5,55,.28);
  opacity: 1;
  margin: .25rem 0 .5rem;
}
.h22-settings .h22-set-group-title{
  color: #890537;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}


/* ---------------------------------------------------------------------------
 * Partner front-page carousel embedded in a content page (Clear Covenant).
 * Keeps the component at the size it appears on their own site — a panel
 * beside the copy, not a full-width band.
 * ------------------------------------------------------------------------- */
.cc-front-anim{
  max-width: 520px;
  margin: 0 0 1.25rem 0;
}
@media (min-width: 992px){
  .cc-front-anim{
    float: right;
    width: 46%;
    margin: .25rem 0 1.25rem 1.75rem;
  }
}

/* ---------------------------------------------------------------------------
 * SanctionSignal sanctions map, embedded on its product page (mirrors the
 * component on sanctionsignal.com).
 * ------------------------------------------------------------------------- */
.ss-map-container{
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 4px 20px rgba(0,0,0,.06);
}
.ss-map-label{ background: none !important; border: none !important; white-space: nowrap; }
.ss-map-label span{
  font-size: 9px;
  font-weight: 600;
  color: #334155;
  text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff, 0 0 4px #fff;
  letter-spacing: .02em;
}
.ss-step-number{
  width: 40px; height: 40px; line-height: 40px;
  margin: 0 auto;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-weight: 700;
}

/* Page Title + Excerpt sizes — admin-configurable
   (Admin > Settings > Theme > "Text sizes"). Blank in admin keeps the
   built-in responsive defaults. Covers both the standard title block and
   the page-control title band. */
.h22-page-title,
.h22-pc-title h1{ font-size: var(--h22-page-title-size, clamp(1.55rem, 1.1vw + 1.05rem, 2.1rem)); }
.h22-page-excerpt,
.h22-pc-title .lead{ font-size: var(--h22-page-excerpt-size, 1.25rem); }

/* The title/excerpt block sits on the site background rather than the white
   content card, so it takes its own colour — needed once the backdrop is dark.
   .text-muted is overridden because Bootstrap's fixed grey vanishes on colour.

   Deliberately NOT applied to .h22-pc-title: that panel paints its own
   translucent white background over the hero, so it needs dark text. It has its
   own pair of rules — dark on the panel, white in .h22-pc-title-nobg where the
   panel is switched off and the text sits straight on the image. */
.h22-main .h22-page-title{ color: var(--h22-page-header-text, var(--h22-page-text, #1C2431)); }
/* !important is needed to beat Bootstrap's .text-muted, which is itself !important */
.h22-main .h22-page-excerpt,
.h22-main .h22-page-excerpt.text-muted{
  color: var(--h22-page-header-text, var(--h22-page-text, #1C2431)) !important;
  opacity: .85;
}

/* Feature pages (Book a Consultation, Manage my consultation, Verify an email,
   Consultant Skillset) open with a heading and lead paragraph sitting directly
   on the site background, above their white cards — the same band as a normal
   page title. Direct children only, so headings inside the cards keep the
   body-heading colour. */
.h22-page-body > .container > h1,
.h22-page-body > .container > h2{
  color: var(--h22-page-header-text, var(--h22-page-text, #1C2431));
}
.h22-page-body > .container > p.lead,
.h22-page-body > .container > p.lead.text-muted{
  color: var(--h22-page-header-text, var(--h22-page-text, #1C2431)) !important;
  opacity: .85;
}
/* Links in that paragraph inherit it too — Bootstrap's link blue is unreadable
   on a dark backdrop — and keep the underline so they still read as links. */
.h22-page-body > .container > p.lead a{
  color: inherit;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Torus Lookup feature cards (mirrors the "What would you like to do today?"
 * grid on toruslookup.com), embedded on its product page.
 * ------------------------------------------------------------------------- */
.tl-card{
  border: 1px solid #dfeae4;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  height: 100%;
  transition: transform .15s ease, box-shadow .15s ease;
}
.tl-card:hover{ transform: translateY(-3px); box-shadow: 0 8px 22px rgba(20,48,58,.10); }
.tl-card-img{ height: 150px; width: 100%; object-fit: cover; display: block; }
.tl-card-body{ padding: .9rem 1rem 1.05rem; }
.tl-card-body h3{ font-size: 1.05rem; margin: 0 0 .3rem; color: #16323b; }
.tl-card-body p{ margin: 0; font-size: .97rem; color: #5b7078; }
@media (max-width: 575.98px){ .tl-card-img{ height: 130px; } }

/* Large action buttons in page content ("Visit …", "Contact us", "Book a
   Consultation", "Download brochure" …) share one admin-configurable size —
   Admin > Settings > Theme > Text sizes. Small buttons such as the "Jump to"
   links are deliberately excluded. */
.h22-content .btn-lg:not(.btn-sm),
.h22-content .h22-visit-btn{
  font-size: var(--h22-visit-btn-size, 1.25rem);
  border-radius: var(--h22-page-btn-radius, .5rem);
}

/* ---------------------------------------------------------------------------
 * Form field labels on public pages — colour is admin-configurable
 * (Admin > Settings > Theme > "Field label colour").
 * Scoped to .h22-main so the admin's own label styling is untouched.
 * ------------------------------------------------------------------------- */
.h22-main .form-label,
.h22-main .form-check-label,
.h22-main legend{
  color: var(--h22-form-label-color, #0891b2);
}

/* Admin form labels follow the same "Field label colour" setting as the public
   site (Admin > Settings > Theme). Section titles keep their own styling. */
.h22-admin-main .form-label,
.h22-admin-main .form-check-label,
.h22-admin-main legend,
.h22-settings .form-label,
.h22-settings .form-check-label{
  color: var(--h22-form-label-color, #0891b2);
}
/* Standalone admin screens (e.g. the login form) share the same label colour. */
body.h22-admin-standalone .form-label{ color: var(--h22-form-label-color, #0891b2); }

/* Admin size controls: the live sample under each spinner. */
.h22-size-demo{
  border: 1px dashed rgba(17,24,39,.20);
  border-radius: 6px;
  padding: .45rem .6rem;
  background: #fff;
  overflow: hidden;
  min-height: 2.6rem;
  display: flex;
  align-items: center;
  line-height: 1.2;
}
.h22-size-demo > span{ display: inline-block; max-width: 100%; }
.h22-size-demo[data-auto]::after{
  content: 'auto';
  margin-left: .4rem;
  font-size: .72rem;
  color: #6b7280;
}
.h22-size-demo .btn{ white-space: nowrap; }

/* ============================================================
   Phones — measured fixes, not guesses. Each rule below was
   traced to something that actually broke at 320–375px wide.
   ============================================================ */
@media (max-width: 575.98px){
  /* The header's action cluster (social + Login/Register) is nowrap, and on a
     320px screen its children ran 31px past their own parent, widening the whole
     document to 339px so the page panned sideways. Everything else that measured
     "too wide" was a consequence of that, including the fixed cookie banner,
     which stretches to left:0/right:0 of the widened page. */
  .h22-topbar .navbar > .container > .d-flex{
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: .4rem;
  }
  .h22-topbar .navbar > .container > .d-flex > *{ min-width: 0; }

  /* Content "pills" carry an inline white-space:nowrap for the desktop layout.
     The longest (MBCS — The Chartered Institute for IT) is 298px, wider than the
     column it sits in, so it cannot wrap and overhangs. */
  .h22-content span[style*="nowrap"]{ white-space: normal !important; }
}

@media (max-width: 991.98px){
  /* Nothing in page content may force the page wider than the screen. */
  .h22-content img,
  .h22-content video,
  .h22-content iframe{ max-width: 100%; height: auto; }

  /* Wide tables stay readable by scrolling in place, with momentum on touch. */
  .h22-content .table-responsive,
  .h22-content .h22-table-wrap{ -webkit-overflow-scrolling: touch; }

  /* Long unbroken strings (URLs, references) wrap instead of overflowing. */
  .h22-content{ overflow-wrap: break-word; }
}

/* ------------------------------------------------------------------
   Phones: uniform action buttons.
   Measured at 375px, a page's buttons each wrapped onto their own line
   but kept their content widths — GeckoSend showed 181 / 201 / 142px,
   SkillBridge 277 / 142. Full width makes every button on a page match,
   and the row becomes a flex column so one gap value controls the
   spacing (the CTA's ms-2 and any inline whitespace are neutralised).
   .btn-sm is excluded: the "Jump to" chips are meant to sit inline.
   ------------------------------------------------------------------ */
@media (max-width: 575.98px){
  .h22-content p:has(> .btn),
  .h22-content div:has(> .btn){
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* !important is needed here: Bootstrap generates its spacing utilities with
       !important, so the .gap-2 on these rows (8px) otherwise wins. */
    gap: .6rem !important;
  }
  /* Some pages put each button in its own paragraph, where collapsed margins gave
     24px instead of the 10px inside a shared row. Even the two cases up. */
  .h22-content p:has(> .btn){ margin-bottom: .6rem !important; }
  .h22-content p:has(> .btn) + p:has(> .btn){ margin-top: 0 !important; }

  /* The site-wide Contact CTA is merged into the page's button row on some pages
     and emitted as a separate block after the content <section> on others, which
     gave 10px on one page and 24px on the next. Rather than force them together,
     it always sits apart from the page's own actions by the same amount: the
     page's buttons group at 10px, the Contact CTA follows at 24px, everywhere.
     (.9rem + the .6rem row gap = the 24px a separate block already produces.) */
  .h22-content .h22-contact-cta:not(:first-child){ margin-top: .9rem !important; }
  .h22-content p:has(> .btn-sm),
  .h22-content div:has(> .btn-sm){
    flex-direction: row;
    flex-wrap: wrap;
  }
  .h22-content .btn:not(.btn-sm){
    display: block;
    width: 100%;
    text-align: center;
    /* The Contact CTA carries Bootstrap's ms-2 when it joins an existing button
       row, which is !important and so indented it 8px past the button above once
       everything went full width. Only the horizontal margins are reset here —
       zeroing all four would also cancel the CTA's own margin-top rule above,
       since that has equal specificity and loses to a later declaration. */
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0;
  }
}

/* ------------------------------------------------------------------
   Phones: the hero title/excerpt overlay must not be clipped.
   .h22-pc-title is absolutely positioned, so it cannot make the hero
   any taller. On a narrow screen the text wraps to more lines than the
   page control's min-height allows and overflow:hidden cuts the bottom
   off — About Us lost 16px of its strapline, Products 15px. Putting it
   back in normal flow lets the hero grow to fit whatever the text needs;
   the media is absolutely positioned with object-fit:cover, so it still
   fills the resulting height. All three pages that use a page control
   position this overlay top-left, so nothing else shifts.
   ------------------------------------------------------------------ */
@media (max-width: 575.98px){
  .h22-page-control .h22-pc-title{
    /* relative, NOT static: the overlay must stay in normal flow so the hero can
       grow to fit it, but a static element is non-positioned and the absolutely
       positioned video then paints on top of it — the text appeared and then
       vanished as the media's fade-in ran over it. The original stacking relied
       purely on both being absolute with the title later in the DOM; there are no
       z-index values anywhere in this component, so one is set explicitly here. */
    position: relative !important;
    z-index: 2;
    /* The inline left/top from the page-control settings still apply to a
       relative box, shifting it without the hero growing to match — About Us
       (top:24px) hung 3px past the bottom. The margin below provides the inset
       instead, and it is part of the flow so the hero accounts for it. */
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    max-width: 100% !important;
    margin: 20px !important;
  }
}