@charset "UTF-8";
html {
  height: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 0;
  margin: 0;
}
body > * {
  flex: 0 0 auto;
}
body > main {
  flex: 1 0 auto;
}

* {
  box-sizing: border-box;
}

footer.wp-block-group {
  margin-bottom: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section {
  display: block;
}

/*
 * Set z-index on main to contain all content layers.
 */
main {
  z-index: 1;
}

button {
  border: 0;
  background: transparent;
}

a,
button {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  transition: all 0.3s;
}

img {
  max-width: 100%;
  height: auto;
}

iframe {
  border: 0;
}

.text-404 {
  padding-top: 8rem;
  padding-bottom: 20rem;
}

/*
 * Page
 */
.no-padding {
  padding: 0;
}

/* Image utils */
.image-fillarea {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* WP fixes */
@media screen and (max-width: 600px) {
  #wpadminbar {
    position: fixed;
    overflow: hidden;
  }
}

.wp-site-blocks {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
}
.wp-site-blocks main {
  flex-grow: 1;
}

/*
 * Mobile clearance for the jQuest contact ribbon.
 */
@media screen and (max-width: 600px) {
  .wp-site-blocks .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: calc(100vw - 4rem);
  }
}
/*
 * A page that opens with the front page hero: the hero sits right under the
 * navigation header, the way the design has it. <main> is a core/group, so
 * theme.json's default group spacing gives it a margin and padding on top -
 * 64px of empty band between the header and the hero on desktop. The hero
 * brings its own top padding, so that band is taken away here. The bottom
 * spacing, above the footer, is left alone.
 *
 * The same goes for a page opening with a full-width section that brings its
 * own background - the Christmas page's festive hero, say: the band would
 * show as a strip of plain page between the header and the section.
 */
main:has(> .entry-content > .wp-block-lohko-hero-showcase:first-child),
main:has(> .entry-content > .wp-block-group.alignfull.has-background:first-child) {
  margin-top: 0;
  padding-top: 0;
}

:root {
  --jcore-font-family: var(--wp--preset--font-family--albert-sans);
  --jcore-heading-font-family: var(--wp--preset--font-family--albert-sans);
}

/* Any heading with pre-text in mini-font-size (use css: "mini" on the H-element for right margins)*/
h1, h2, h3, h4, h5, h6 {
  color: var(--wp--preset--color--white);
}
h1.wp-block-heading.mini, h2.wp-block-heading.mini, h3.wp-block-heading.mini, h4.wp-block-heading.mini, h5.wp-block-heading.mini, h6.wp-block-heading.mini {
  margin-top: 0.5rem;
}

/* Any paragraph with pre-text in mini-font-size (use css: "mini" on the p-element for right margins)*/
p.mini {
  margin-top: 0.5rem;
}

a {
  text-underline-offset: 3px;
  text-decoration-thickness: from-font;
}

.is-style-pre {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--greyblue);
}

/* 
* Add Project Specific Gutenberg Block Styling here! 
*
*/
/* 
* A little hack to cover the whole content column with one link from below. Add the linkall class to the surrounding div, and the the high class to the p contianing the link
*
*/
.linkall {
  position: relative;
}

p.high a::before {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 2;
  content: "";
}

/*
* Gradient text. Select part of a heading and pick "Gradient text" from the text
* colour picker.
*
*/
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .has-gradient-color {
    background-color: transparent;
    /* The design's royal blue to cyan, the same pair as the gradient buttons. */
    background-image: var(--wp--preset--gradient--royalblue-to-cyan);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
  }
  /* The seasonal version: amber through orange into the brand blues. */
  .has-festive-gradient-color {
    background-color: transparent;
    background-image: linear-gradient(110deg, var(--wp--preset--color--amber) 0%, var(--wp--preset--color--orange) 35%, var(--wp--preset--color--royalblue) 70%, var(--wp--preset--color--cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
  }
  /* The Wheel of Fortune's: rose and marigold into the brand blues. */
  .has-spin-gradient-color {
    background-color: transparent;
    background-image: linear-gradient(115deg, color-mix(in srgb, var(--wp--preset--color--rose) 60%, var(--wp--preset--color--white)) 0%, var(--wp--preset--color--marigold) 30%, var(--wp--preset--color--royalblue) 65%, var(--wp--preset--color--cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
  }
}
.wp-block-separator {
  border-top: 1.5px solid !important;
}

/* "Fade" style: a 1px line, strongest across the middle and fading out
   towards both ends - drawn as a background, since a border cannot fade. */
.wp-block-separator.is-style-fade {
  width: 100%;
  max-width: none;
  height: 1px;
  border: 0 !important;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--wp--preset--color--white) 16%, transparent) 20%, color-mix(in srgb, var(--wp--preset--color--white) 16%, transparent) 80%, transparent);
  opacity: 1;
}

/*
* Icon badge option added to Font Awessome icon block
*/
.wp-block-font-awesome-icon.is-style-icon-badge {
  --jcore-icon-badge-size: 2.75rem;
  --jcore-icon-badge-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--jcore-icon-badge-size);
  height: var(--jcore-icon-badge-size);
  border-radius: var(--jcore-icon-badge-radius);
  border: 1.5px solid color-mix(in srgb, currentColor 25%, transparent);
  /* A background colour picked on the block arrives as a
     `has-…-background-color` class, which would lose to this rule - so only
     tint from the icon colour when none is set. */
}
.wp-block-font-awesome-icon.is-style-icon-badge:not(.has-background) {
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.wp-block-font-awesome-icon.is-style-icon-badge svg {
  width: calc(var(--jcore-icon-badge-size) * 0.45);
  height: calc(var(--jcore-icon-badge-size) * 0.45);
}

.gap-small {
  gap: 1rem;
}

/*
* The wide gutter between the text and the visual of a two-column split
* section - a screenshot or illustration beside a heading and its copy.
*/
.gap-large {
  gap: clamp(2rem, 5vw, 4.5rem);
}

/*
* Card grid: at most four per row, wider gaps. blockGap is disabled in
* theme.json, so the gap lives here - and the column formula has to repeat it,
* since the generated one assumes the 24px fallback gap.
*/
.card-grid.is-layout-grid {
  --card-grid-gap: 2rem;
  gap: var(--card-grid-gap);
  grid-template-columns: repeat(auto-fill, minmax(max(min(14rem, 100%), (100% - 3 * var(--card-grid-gap)) / 4), 1fr));
}

.wp-block-buttons {
  gap: 1.25rem;
}

/*
* A column that stays in view while the one beside it scrolls - a section's
* heading and CTA next to a long accordion. Sticks under the site header; on
* one-column layouts it simply scrolls.
*/
@media (min-width: 1024px) {
  .is-sticky {
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 80px + 2.5rem);
    align-self: start;
  }
}
/*
* A column that comes first once the grid is down to one column - the copy
* of a split section whose visual sits on the left on desktop.
*/
@media (max-width: 1023px) {
  .is-first-on-mobile {
    order: -1;
  }
}
/*
* Vertically center column content
*/
.is-vertically-centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/*
* Snowfall: add `has-snow` to a section's group for two layers of slowly
* falling flakes behind its content - the seasonal pages. The flakes are
* repeating dot gradients, so there is nothing to load; the layers sit under
* the content and never take clicks.
*/
@keyframes sq-snow {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 60px 480px;
  }
}
.has-snow {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.has-snow::before, .has-snow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.55), transparent), radial-gradient(1.5px 1.5px at 90px 120px, rgba(255, 255, 255, 0.4), transparent), radial-gradient(2.5px 2.5px at 160px 60px, rgba(255, 255, 255, 0.35), transparent), radial-gradient(1.5px 1.5px at 230px 180px, rgba(255, 255, 255, 0.45), transparent), radial-gradient(2px 2px at 300px 90px, rgba(255, 255, 255, 0.3), transparent);
  background-size: 320px 240px;
  opacity: 0.7;
}
.has-snow::after {
  background-size: 420px 300px;
  opacity: 0.45;
}
@media (prefers-reduced-motion: no-preference) {
  .has-snow::before {
    animation: sq-snow 22s linear infinite;
  }
  .has-snow::after {
    animation: sq-snow 34s linear infinite;
  }
}

/*
 * Where the bar gives way to the full screen panel. Wider than the theme's
 * `lg`: six top level items, the logo and the CTA need about 950px, and this
 * is also where the hero-showcase block switches to its tablet layout.
 * NAV_BREAKPOINT in src/js/jcore.ts must match.
 */
/*
 * Header navigation: views/lohko/navigation (markup) and navInit() in
 * src/js/jcore.ts (behaviour).
 *
 * Desktop: a thin utility bar ("Menu Right" - Contact, language, Login) over
 * the main bar (logo, primary menu, "Book demo"). Top level items with
 * children open a dropdown, simple or advanced (see
 * includes/nav-menu-fields.php).
 *
 * Below $nav-breakpoint the utility bar goes and the primary menu turns
 * into a full screen panel, with the dropdowns as accordions and the utility
 * links as buttons at its foot.
 */
#jcore-nav {
  --jcore-menu-height: 72px;
  --sq-util-height: 36px;
  --sq-nav-bg: var(--wp--preset--color--dark);
  --sq-nav-text: #c9d4e8;
  --sq-nav-muted: #8d9ab2;
  --sq-nav-soft: #b7c6e4;
  --sq-nav-hover: rgb(255 255 255 / 6%);
  --sq-nav-line: rgb(255 255 255 / 8%);
  --sq-nav-accent: var(--wp--preset--color--cyan);
  --sq-seasonal: #f5c26b;
  --sq-dd-bg: #111726;
  --sq-dd-border: rgb(255 255 255 / 12%);
  --sq-dd-radius: 14px;
  --sq-dd-gap: 10px;
  --sq-ease: cubic-bezier(0.2, 0.9, 0.3, 1);
  --sq-duration: 280ms;
  --sq-duration-fast: 150ms;
  /* Full bleed, out of the header's global padding the way `alignfull`
     does it; the rows inside hold the content to the wide size. The id
     outranks the constrained layout's `> .alignwide` max-width. */
  display: block;
  width: auto;
  max-width: none;
  margin-inline: calc(var(--wp--style--root--padding-left, 0px) * -1) calc(var(--wp--style--root--padding-right, 0px) * -1) !important;
}
#jcore-nav a {
  text-decoration: none;
}
#jcore-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#jcore-nav :focus-visible {
  outline: 2px solid var(--sq-nav-accent);
  outline-offset: 2px;
}
#jcore-nav {
  /* A chevron that turns over while its dropdown is open. */
}
#jcore-nav .sq-chevron {
  font-size: 0.625rem;
  transition: transform 200ms ease;
}
#jcore-nav [aria-expanded=true] > .sq-chevron {
  transform: rotate(180deg);
}

/* -------------------------------------------------------------------------
 * Utility bar
 * ---------------------------------------------------------------------- */
.sq-util {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: #03050a;
}

.sq-util__row {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
  max-width: var(--wp--style--global--wide-size);
  height: var(--sq-util-height);
  margin-inline: auto !important;
}

/* A hairline between neighbours, drawn by the item that follows it, so
   items can be added or taken out in the editor without a class of their own. */
.sq-util__item {
  position: relative;
  display: flex;
  align-items: center;
  /* Any visible item before it, so hiding the first one with
     `.hide-on-desktop` leaves no stray line at the start. */
}
.sq-util__item:not(.hide-on-desktop) ~ .sq-util__item::before {
  content: "";
  width: 1px;
  height: 14px;
  margin: 0 4px;
  background: rgba(255, 255, 255, 0.12);
}

.sq-util__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--sq-nav-muted);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--sq-duration-fast) ease, background-color var(--sq-duration-fast) ease;
}
.sq-util__link:hover, .sq-util__link[aria-expanded=true] {
  background: rgba(255, 255, 255, 0.05);
  color: var(--wp--preset--color--white);
}
.sq-util__link .fa-globe {
  font-size: 0.8125rem;
}

/* -------------------------------------------------------------------------
 * Main bar
 * ---------------------------------------------------------------------- */
.sq-bar {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  gap: 36px;
  width: 100%;
  max-width: var(--wp--style--global--wide-size);
  height: var(--jcore-menu-height);
  margin-inline: auto;
}
.sq-bar .brand {
  display: flex;
  flex: none;
  align-items: center;
  height: 100%;
}
.sq-bar .brand a {
  display: flex;
}
.sq-bar .brand img {
  width: auto;
  max-width: 154px;
  height: calc(var(--jcore-menu-height) - 2rem);
  object-fit: contain;
}

.sq-bar__right {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* The pill itself is `.btn-primary`, in blocks/_buttons.scss; the bar only
   trims it to the design's 44px. */
.sq-bar__cta {
  --jcore-button-primary-font-size: 0.9375rem;
  --jcore-button-primary-padding: 0.8125rem 1.5rem;
}

#jcore-nav .menu-0 {
  display: flex;
  align-items: center;
  gap: 2px;
}

#jcore-nav .menu-0 > li {
  position: relative;
}

#jcore-nav .menu-link-0 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 13px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--sq-nav-text);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--sq-duration-fast) ease, background-color var(--sq-duration-fast) ease;
}
#jcore-nav .menu-link-0:hover, #jcore-nav .menu-link-0[aria-expanded=true] {
  background: var(--sq-nav-hover);
  color: var(--wp--preset--color--white);
}

/* The page being read, and the parent of the page being read. */
#jcore-nav .menu-0 > .current-menu-item > .menu-link-0,
#jcore-nav .menu-0 > .current-menu-ancestor > .menu-link-0 {
  color: var(--wp--preset--color--white);
}

/* -------------------------------------------------------------------------
 * Dropdowns, shared between the desktop card and the mobile accordion.
 * Everything that makes them a floating card lives in the desktop block.
 * ---------------------------------------------------------------------- */
.sq-dd__link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #dde5f3;
  font-size: 0.90625rem;
  font-weight: 500;
  transition: color var(--sq-duration-fast) ease, background-color var(--sq-duration-fast) ease;
}
.sq-dd__link:hover {
  color: var(--wp--preset--color--white);
}
.sq-dd__link.is-current {
  color: var(--sq-nav-accent);
  font-weight: 700;
}

.sq-dd__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--wp--preset--color--royalblue) 14%, transparent);
  color: var(--sq-nav-accent);
  font-size: 0.875rem;
}
.is-current > .sq-dd__icon {
  background: color-mix(in srgb, var(--wp--preset--color--cyan) 20%, transparent);
}

.sq-dd__heading {
  /* Padding rather than a top margin: a margin at the top of the second
     column would be dropped at the column break. */
  margin: 0 0 4px 10px;
  padding-top: 6px;
  color: #7f8da8;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sq-dd__heading a {
  color: inherit;
}
.sq-dd__heading a:hover {
  color: var(--wp--preset--color--white);
}

.sq-dd__all {
  align-self: flex-start;
  margin: 8px 0 0 10px;
  color: var(--sq-nav-accent);
  font-size: 0.84375rem;
  font-weight: 700;
}
.sq-dd__all:hover {
  color: var(--wp--preset--color--white);
}

.sq-dd__badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  align-self: flex-start;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(245, 166, 35, 0.12);
  color: var(--sq-seasonal);
  font-size: 0.65625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sq-dd__feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #f5f7fa;
}

.sq-dd__feature-title {
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.25;
}

.sq-dd__feature-text {
  color: var(--sq-nav-muted);
  font-size: 0.78125rem;
  line-height: 1.45;
}

.sq-dd__feature-more {
  margin-top: 4px;
  color: var(--sq-seasonal);
  font-size: 0.8125rem;
  font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Hamburger: a boxed button. The middle bar is a background layer and the
 * outer two are pseudo-elements, so that while the panel is open the middle
 * one can shrink away and the other two swing into an X.
 * ---------------------------------------------------------------------- */
#jcore-nav .hamburger {
  --hamburger-width: 18px;
  --hamburger-weight: 2px;
  --hamburger-gap: 6px;
  position: relative;
  display: none;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.03);
  background-image: linear-gradient(currentColor, currentColor);
  background-position: center;
  background-repeat: no-repeat;
  background-size: var(--hamburger-width) var(--hamburger-weight);
  color: #f5f7fa;
  cursor: pointer;
  transition: background-size var(--sq-duration-fast) ease;
}
#jcore-nav .hamburger::before, #jcore-nav .hamburger::after {
  content: "";
  position: absolute;
  inset-block-start: calc(50% - var(--hamburger-weight) / 2);
  inset-inline-start: calc(50% - var(--hamburger-width) / 2);
  width: var(--hamburger-width);
  height: var(--hamburger-weight);
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--sq-duration) var(--sq-ease);
}
#jcore-nav .hamburger::before {
  transform: translateY(calc(var(--hamburger-gap) * -1));
}
#jcore-nav .hamburger::after {
  transform: translateY(var(--hamburger-gap));
}
#jcore-nav .hamburger[aria-expanded=true] {
  background-size: 0 var(--hamburger-weight);
}
#jcore-nav .hamburger[aria-expanded=true]::before {
  transform: rotate(45deg);
}
#jcore-nav .hamburger[aria-expanded=true]::after {
  transform: rotate(-45deg);
}

/* The panel's foot is the phone layout's; the desktop bar has its own CTA. */
.sq-panel__foot {
  display: none;
}

/* -------------------------------------------------------------------------
 * Desktop
 * ---------------------------------------------------------------------- */
@media (width >= 1180px) {
  #jcore-nav .nav-panel {
    display: flex;
    flex: 1;
    min-width: 0;
  }
  #jcore-nav {
    /*
     * The card hangs 10px under its trigger. The transparent strip above
     * it bridges that gap, so the pointer never leaves the item on its way
     * down and the dropdown stays open.
     */
  }
  #jcore-nav .sq-dd {
    position: absolute;
    inset-block-start: calc(100% + var(--sq-dd-gap));
    inset-inline-start: 0;
    z-index: 50;
    display: none;
    box-sizing: border-box;
    min-width: 220px;
    padding: 8px;
    border: 1px solid var(--sq-dd-border);
    border-radius: var(--sq-dd-radius);
    background: var(--sq-dd-bg);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
    /* Set by navInit() when the card would run off the viewport. */
    translate: var(--sq-dd-shift, 0px) 0;
  }
  #jcore-nav .sq-dd::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc((var(--sq-dd-gap) + 2px) * -1);
    height: calc(var(--sq-dd-gap) + 2px);
  }
  #jcore-nav .is-open > .sq-dd {
    display: block;
    animation: sq-dd-in 180ms ease both;
  }
  #jcore-nav .sq-dd__inner {
    display: flex;
  }
  #jcore-nav .sq-dd--end {
    inset-inline: auto 0;
    min-width: 150px;
  }
  #jcore-nav .sq-dd--simple .sq-dd__links {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  #jcore-nav .sq-dd__link {
    padding: 9px 12px;
    border-radius: 9px;
  }
  #jcore-nav .sq-dd__link:hover {
    background: var(--sq-nav-hover);
  }
  #jcore-nav {
    /* Advanced: two columns of headed groups, and the featured card. */
  }
  #jcore-nav .sq-dd--advanced {
    width: 27.5rem;
    padding: 12px;
  }
  #jcore-nav .sq-dd--advanced.has-feature {
    width: 41.25rem;
  }
  #jcore-nav .sq-dd--advanced .sq-dd__inner {
    gap: 12px;
  }
  #jcore-nav .sq-dd--advanced .sq-dd__link {
    padding: 7px 10px;
  }
  #jcore-nav .sq-dd__main {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    padding: 4px;
  }
  #jcore-nav {
    /* Filled top to bottom, then left to right, like the design's
       columns - with no need to know how many groups there are. */
  }
  #jcore-nav .sq-dd__groups {
    columns: 2;
    column-gap: 8px;
  }
  #jcore-nav .sq-dd__group {
    break-inside: avoid;
    padding-bottom: 14px;
  }
  #jcore-nav .sq-dd__feature {
    flex: 0 0 220px;
    box-sizing: border-box;
    padding: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--sq-dd-radius);
    background: radial-gradient(180px 130px at 100% 0%, rgba(245, 166, 35, 0.14), transparent 70%), radial-gradient(200px 160px at 0% 100%, rgba(190, 45, 70, 0.16), transparent 70%), #0d111c;
    transition: border-color 200ms ease, transform 200ms ease;
  }
  #jcore-nav .sq-dd__feature:hover {
    border-color: rgba(245, 166, 35, 0.35);
    color: #f5f7fa;
    transform: translateY(-1px);
  }
  #jcore-nav .sq-dd__feature-art {
    display: block;
    width: 100%;
    height: auto;
    margin: 4px 0 2px;
  }
}
@keyframes sq-dd-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* -------------------------------------------------------------------------
 * Header: sticky, floating over the hero.
 * ---------------------------------------------------------------------- */
/*
 * WordPress renders every template part inside a plain
 * `<div class="wp-block-template-part">`. That wrapper becomes the sticky
 * header's containing block, and it is only as tall as the header itself - so
 * the header has nowhere to stick and scrolls away with the rest of the page.
 * Collapsing the wrapper's box hands the containing block back to
 * `.wp-site-blocks`, which spans the whole document.
 */
.wp-site-blocks > .wp-block-template-part:has(> .wp-block-jcore-nav-header) {
  display: contents;
}

/*
 * CSS `position: sticky` rather than the jcore-utils `data-jsticky` path,
 * which takes the header out of flow and swaps in a spacer - breaking the
 * hero's 100dvh maths and leaving a gap on first paint.
 *
 * On desktop the header sticks with the utility bar above the viewport's
 * edge: the utility bar scrolls away with the page and the main bar stays.
 *
 * Fully transparent all the way down would leave the menu sitting on top of
 * whatever scrolls past it, so the transparency is traded for a blurred
 * panel once the page moves. jcore-utils drops `.scrollTop` at that point.
 */
.wp-block-jcore-nav-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 10;
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.wp-block-jcore-nav-header:has(.sq-util) {
  /* The utility bar's height plus its 1px bottom border. */
  top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--sq-util-height, 36px) - 1px);
}
.wp-block-jcore-nav-header {
  /*
   * The scrolled treatment sits on a pseudo-element rather than on the
   * header itself: an element with a backdrop-filter becomes the backdrop
   * root for everything inside it, and a fixed descendant (the mobile
   * panel) would take the header as its containing block.
   */
}
.wp-block-jcore-nav-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: transparent;
  transition: background-color 250ms ease, backdrop-filter 250ms ease;
}
.wp-block-jcore-nav-header.scrollActive:not(.scrollTop)::before {
  background-color: color-mix(in srgb, var(--wp--preset--color--dark) 82%, transparent);
  backdrop-filter: blur(18px);
}
.wp-block-jcore-nav-header {
  /* jcore-utils sets this for the first 100ms, before the scroll classes
     settle - without it the panel fades in on every page load. */
}
.wp-block-jcore-nav-header.jcoreLoading::before {
  transition: none;
}

/* -------------------------------------------------------------------------
 * Phones and tablets
 * ---------------------------------------------------------------------- */
@media (width < 1180px) {
  .sq-util {
    display: none;
  }
  .wp-block-jcore-nav-header:has(.sq-util) {
    top: var(--wp-admin--admin-bar--height, 0px);
  }
  #jcore-nav .sq-bar {
    gap: 16px;
  }
  #jcore-nav {
    /* Over the full screen panel, which lies under the whole bar. */
  }
  #jcore-nav .brand,
  #jcore-nav .sq-bar__right {
    position: relative;
    z-index: 2;
  }
  #jcore-nav .sq-bar__cta {
    --jcore-button-primary-font-size: 0.875rem;
    --jcore-button-primary-padding: 0.6875rem 1rem;
  }
  #jcore-nav .hamburger {
    display: block;
  }
  #jcore-nav {
    /*
     * The panel covers the whole screen, the bar included - the bar sits
     * on top of it (z-index above) and the panel's own padding starts
     * the list under it. navInit() measures where the bar ends as the
     * panel opens (`--nav-panel-top`), which also covers the admin bar.
     *
     * The page behind is locked meanwhile (`html.nav-open`, below), so
     * a long menu scrolls inside the panel and nowhere else, and
     * `overscroll-behavior` keeps a scroll that reaches the end of the
     * list from carrying on into the page.
     */
  }
  #jcore-nav .nav-panel {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100vh;
    height: 100dvh;
    /* Side padding lines the list up with the logo above it. */
    padding: calc(var(--nav-panel-top, var(--jcore-menu-height)) + 4px) max(20px, (100vw - var(--wp--style--global--wide-size)) / 2) 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--sq-nav-bg);
    /* Faded rather than slid in; `visibility` keeps a closed panel's
       links out of the tab order, switched once the fade is done. */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--sq-duration) var(--sq-ease), visibility 0s linear var(--sq-duration);
  }
  #jcore-nav .nav-panel > * {
    flex-shrink: 0;
    translate: 0 -8px;
    transition: translate var(--sq-duration) var(--sq-ease);
  }
  #jcore-nav.is-menu-open .nav-panel {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--sq-duration) var(--sq-ease), visibility 0s linear 0s;
  }
  #jcore-nav.is-menu-open .nav-panel > * {
    translate: none;
  }
  #jcore-nav {
    /* The CTA is in the panel's foot while it is open. */
  }
  #jcore-nav.is-menu-open .sq-bar__cta {
    visibility: hidden;
  }
  #jcore-nav {
    /* A flat list: one row per top level item, hairlines between them. */
  }
  #jcore-nav .menu-0 {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  #jcore-nav .menu-0 > li {
    border-bottom: 1px solid var(--sq-nav-line);
  }
  #jcore-nav .menu-link-0 {
    justify-content: space-between;
    width: 100%;
    height: 58px;
    padding: 0 2px;
    border-radius: 0;
    background: none !important;
    color: #f5f7fa !important;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }
  #jcore-nav .menu-link-0 .sq-chevron {
    color: var(--sq-nav-muted);
    font-size: 0.8125rem;
  }
  #jcore-nav .menu-link-0[aria-expanded=true] .sq-chevron {
    color: var(--sq-nav-accent);
  }
  #jcore-nav {
    /*
     * The dropdown becomes an accordion: same markup, none of the card.
     * The 0fr/1fr grid row is what makes the height animatable without
     * measuring the content.
     */
  }
  #jcore-nav .sq-dd {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows var(--sq-duration) var(--sq-ease), visibility 0s linear var(--sq-duration);
  }
  #jcore-nav .sq-dd__inner {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  #jcore-nav .is-open > .sq-dd {
    grid-template-rows: 1fr;
    visibility: visible;
    transition: grid-template-rows var(--sq-duration) var(--sq-ease), visibility 0s linear 0s;
  }
  #jcore-nav {
    /* The advanced dropdown reads as a plain list here: no headings and
       no icons, only a little more room between its groups, and the
       featured card folds in under it as one more link. */
  }
  #jcore-nav .sq-dd__main {
    display: flex;
    flex-direction: column;
  }
  #jcore-nav .sq-dd__links {
    display: flex;
    flex-direction: column;
  }
  #jcore-nav .sq-dd__group + .sq-dd__group {
    margin-top: 6px;
  }
  #jcore-nav .sq-dd__heading,
  #jcore-nav .sq-dd__icon,
  #jcore-nav .sq-dd__feature-art,
  #jcore-nav .sq-dd__feature-text,
  #jcore-nav .sq-dd__feature-more {
    display: none;
  }
  #jcore-nav .sq-dd__link,
  #jcore-nav .sq-dd__feature {
    padding: 10px 0;
    color: var(--sq-nav-soft);
    font-size: 1rem;
    font-weight: 500;
  }
  #jcore-nav .sq-dd__link.is-current,
  #jcore-nav .sq-dd__feature.is-current {
    color: var(--sq-nav-accent);
    font-weight: 500;
  }
  #jcore-nav .sq-dd__all {
    margin: 4px 0 0;
    padding: 10px 0;
  }
  #jcore-nav {
    /* The seasonal card as one more link, its tag beside the title. */
  }
  #jcore-nav .sq-dd__feature {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }
  #jcore-nav .sq-dd__feature .sq-dd__feature-title {
    order: 1;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }
  #jcore-nav .sq-dd__feature .sq-dd__badge {
    order: 2;
    align-self: center;
    height: 20px;
    padding: 0 8px;
    background: rgba(245, 166, 35, 0.14);
    letter-spacing: 0.06em;
  }
  #jcore-nav .sq-dd__inner::after {
    content: "";
    flex: none;
    height: 12px;
  }
  #jcore-nav {
    /* The foot: the CTAs and the language switcher, stuck to the bottom
       of the panel under the thumb. */
  }
  #jcore-nav .sq-panel__foot {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: auto;
    padding: 20px 0 calc(20px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: var(--sq-nav-bg);
  }
  #jcore-nav {
    /* Spaced from the list even when the list fills the panel. */
  }
  #jcore-nav .menu-0 {
    margin-bottom: 24px;
  }
  #jcore-nav .sq-panel__ctas {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 10px;
    /* An odd one out spans the row rather than leaving a hole -
       counting only the buttons `.hide-on-mobile` leaves showing. */
  }
  #jcore-nav .sq-panel__ctas > :nth-last-child(1 of :not(.hide-on-mobile)):nth-child(odd of :not(.hide-on-mobile)) {
    grid-column: 1/-1;
  }
  #jcore-nav .sq-panel__cta {
    --jcore-button-primary-font-size: 0.96875rem;
    --jcore-button-primary-padding: 0 12px;
    justify-content: center;
    box-sizing: border-box;
    height: 52px;
  }
  /*
   * Set by navInit() while the panel is open. On the root only: a hidden
   * overflow on the body as well would make the body a scroll container of
   * its own, and the sticky header would stick to that.
   */
  html.nav-open {
    overflow: hidden;
  }
  /* The bar goes solid over the panel, so the two read as one. */
  .wp-block-jcore-nav-header:has(.is-menu-open)::before {
    background-color: var(--wp--preset--color--dark);
    transition: none;
  }
  /*
   * The jQuest launchers float over everything at the maximum z-index, and
   * over the panel they would cover its links and the CTAs at its foot.
   */
  html.nav-open .jquest-launcher {
    visibility: hidden;
  }
}
/* An outlined pill, the partner of `.btn-primary` in the panel's foot. */
.sq-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  color: #f5f7fa;
  font-size: 0.96875rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background-color 180ms ease;
}
.sq-btn-outline:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #f5f7fa;
}

/* The language switcher in the panel's foot: the codes side by side, the
   current one lit. */
.sq-segment {
  display: flex;
  gap: 2px;
}

.sq-segment__option {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  color: #8d9ab2;
  font-size: 0.78125rem;
  font-weight: 700;
}
.sq-segment__option:hover, .sq-segment__option[aria-current] {
  color: var(--wp--preset--color--white);
}

/*
 * Visibility classes for menu items: type them into an item's "CSS Classes"
 * field on the Menus screen (Screen Options -> CSS Classes). "Mobile" is
 * everything below $nav-breakpoint, where the menu is the full screen panel.
 * They work on top level items, dropdown links, headings (the whole group
 * goes), the featured card and "Menu Right" items.
 */
@media (width < 1180px) {
  #jcore-nav .hide-on-mobile {
    display: none !important;
  }
}
@media (width >= 1180px) {
  #jcore-nav .hide-on-desktop {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  #jcore-nav {
    --sq-duration: 1ms;
    --sq-duration-fast: 1ms;
  }
  #jcore-nav .is-open > .sq-dd {
    animation: none;
  }
}
/* jscroll is active on the element. */
.scrollActive {
  transition: margin-top 300ms;
}
.scrollActive.scrollTop, .scrollActive.scrollUp {
  margin-top: 0;
}
.scrollActive.sticky.scrollDown {
  margin-top: calc(var(--jutils-height) * -1);
}

.sticky {
  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0);
  left: 0;
  right: 0;
  z-index: 10;
}

/* WP Fix */
body.admin-bar {
  /* Fix for WP admin-bar */
}
body.admin-bar .navbar.scrollActive,
body.admin-bar .navbar.sticky,
body.admin-bar .skip-to-content a {
  top: 46px;
}
@media screen and (min-width: 781px) {
  body.admin-bar .navbar.scrollActive,
  body.admin-bar .navbar.sticky,
  body.admin-bar .skip-to-content a {
    top: 32px;
  }
}

/*
 * Decorative backdrop for the lohko/hero-front and lohko/hero-showcase blocks,
 * and for a group with the theme's "Hero" style (a split hero built from core
 * blocks): two soft blue glows and a masked dot grid at the top of the page,
 * plus a second, cooler glow behind the closing sections - the design's
 * `#global-ambient-glow` shining through the sections it leaves transparent.
 *
 * It lives on the page rather than inside the block because it has to sit
 * behind the top bar and the navigation header too, which are siblings of
 * <main>. The `:has()` guard keeps it to pages that actually open with a hero,
 * so other pages are free to bring their own accent.
 *
 * The design blurs two positioned circles. Soft-stopped radial gradients land
 * in the same place without a full-viewport `filter: blur()` to repaint - the
 * near-flat first two stops stand in for the blurred disc's solid core, and
 * the radii are the design's (circle radius + blur radius) over its 1440x960
 * frame. Note these are radii, not diameters. The alphas run a little above
 * the design's, because the glows spend part of their cycle dimmed by the
 * breathe animation below.
 *
 * A gradient is clipped at its layer's edge, so a layer that ends anywhere on
 * screen shows a hard seam there. Both glow layers therefore overhang the
 * viewport by 20% on every side they can, and the drift below stays well
 * inside that overhang - every edge, the layer's own and the gradients', is
 * off screen at all times. That overhang is what `overflow-x: clip` further
 * down absorbs. Percentages are consequently stated against a box 1.4x the
 * viewport: a design coordinate p maps to `(p + 20) / 1.4`, and a radius r to
 * `r / 1.4`, which is why the top glows read 28.5%/50% and 18.5%/71.5% here.
 */
/*
 * Drift: a slow diagonal wander with a good deal of swell. `alternate` eases
 * back along the same path instead of snapping at the loop point.
 */
@keyframes sq-glow-drift {
  from {
    transform: translate3d(-6%, -2%, 0) scale(1);
  }
  to {
    transform: translate3d(6%, 2%, 0) scale(1.18);
  }
}
/* The lower glow runs the opposite way, so the two never track each other. */
@keyframes sq-glow-drift-alt {
  from {
    transform: translate3d(5.5%, 2%, 0) scale(1.15);
  }
  to {
    transform: translate3d(-6%, -2%, 0) scale(1);
  }
}
/*
 * Breathe: the "glows a little differently" part. Its period is deliberately
 * out of step with the drift, so a swell rarely lands on the same spot twice.
 */
@keyframes sq-glow-breathe {
  from {
    opacity: 0.42;
  }
  to {
    opacity: 1;
  }
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) {
  /*
   * The glow layers overhang the viewport, so the page must not scroll
   * sideways to reach them. With `html` at the default `visible`, this
   * propagates to the viewport and body itself stays unclipped - `clip`
   * rather than `hidden` so no scroll container appears and the sticky
   * header keeps resolving against the viewport.
   */
  overflow-x: clip;
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) .wp-site-blocks {
  position: relative;
  /* Absolute, so the pseudo-elements stay out of the flex column. */
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) .wp-site-blocks::before, body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) .wp-site-blocks::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) .wp-site-blocks {
  /* Glows: one centred behind the headline, one offset to the right. */
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) .wp-site-blocks::before {
  --hero-glow-1: var(--wp--preset--color--blue);
  --hero-glow-2: var(--wp--preset--color--lightblue);
  inset-block-start: -20dvh;
  inset-inline: -20%;
  height: 140dvh;
  background-image: radial-gradient(ellipse 28.5% 32% at 50% 23.5%, color-mix(in srgb, var(--hero-glow-1) 34%, transparent) 0%, color-mix(in srgb, var(--hero-glow-1) 31%, transparent) 40%, color-mix(in srgb, var(--hero-glow-1) 10%, transparent) 72%, transparent 100%), radial-gradient(ellipse 18.5% 23.5% at 71.5% 33%, color-mix(in srgb, var(--hero-glow-2) 26%, transparent) 0%, color-mix(in srgb, var(--hero-glow-2) 23%, transparent) 38%, color-mix(in srgb, var(--hero-glow-2) 7%, transparent) 74%, transparent 100%);
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) .wp-site-blocks {
  /* Dot grid, faded out towards the edges. It repeats, so it has no edge
   * to give away and can stay pinned to the viewport. */
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) .wp-site-blocks::after {
  inset-block-start: 0;
  inset-inline: 0;
  height: 100dvh;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.6;
  mask-image: radial-gradient(ellipse 900px 600px at 50% 20%, #000 0%, transparent 75%);
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) {
  /*
   * Closing glow, anchored to the bottom of <main> so it lands behind the
   * last sections rather than the footer. `main` already carries `z-index: 1`
   * as a flex item, so it is its own stacking context: the layer sits behind
   * everything in <main> but still above the page background, and any section
   * that brings its own background (the blackblue ones) covers it, exactly as
   * the opaque sections do in the design.
   *
   * These are the design's ambient colours - royalblue and cyan - rather than
   * the hero's, which is what the transparent sections reveal there. Both
   * gradients fade out well inside the layer vertically, with room left for
   * the swell, since the layer's bottom edge sits at the footer seam where an
   * overhang would show.
   */
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) main {
  position: relative;
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) main::before {
  --lower-glow-1: var(--wp--preset--color--royalblue);
  --lower-glow-2: var(--wp--preset--color--cyan);
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: -20%;
  height: 110dvh;
  max-height: 100%;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(ellipse 27.5% 30% at 40% 60%, color-mix(in srgb, var(--lower-glow-1) 28%, transparent) 0%, color-mix(in srgb, var(--lower-glow-1) 24%, transparent) 40%, color-mix(in srgb, var(--lower-glow-1) 9%, transparent) 72%, transparent 100%), radial-gradient(ellipse 19% 18% at 67% 72%, color-mix(in srgb, var(--lower-glow-2) 20%, transparent) 0%, color-mix(in srgb, var(--lower-glow-2) 17%, transparent) 38%, color-mix(in srgb, var(--lower-glow-2) 6%, transparent) 74%, transparent 100%);
}
body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) {
  /*
   * Motion is opt-in: only transform and opacity animate, so both layers stay
   * on the compositor and nothing repaints per frame.
   */
}
@media (prefers-reduced-motion: no-preference) {
  body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) .wp-site-blocks::before {
    animation: sq-glow-drift 16s ease-in-out infinite alternate, sq-glow-breathe 9s ease-in-out infinite alternate;
  }
  body:has(.wp-block-lohko-hero-front, .wp-block-lohko-hero-showcase, .wp-block-group.is-style-hero) main::before {
    animation: sq-glow-drift-alt 20s ease-in-out infinite alternate, sq-glow-breathe 11s ease-in-out infinite alternate;
  }
}

/*
 * Scroll reveal: the page's sections fade and rise into place as they
 * scroll into view, as in the design.
 *
 * Opt-in from src/js/jcore.ts, which only marks sections it is going to
 * watch - so without JavaScript, or with reduced motion asked for, nothing
 * here ever hides anything.
 *
 * `translate` rather than `transform`, and `none` once shown: a transformed
 * ancestor becomes the containing block for everything inside it, which
 * would stop a sticky bar inside a section from sticking.
 */
.sq-reveal {
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), translate 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.sq-reveal:not(.is-visible) {
  opacity: 0;
  translate: 0 28px;
}
.sq-reveal.is-visible {
  translate: none;
}

.archive-posts,
.wp-block-jcore-dynamic-archive-posts__inner {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 360px) {
  .archive-posts.columns-2,
  .wp-block-jcore-dynamic-archive-posts__inner.columns-2 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 768px) {
  .archive-posts.columns-3,
  .wp-block-jcore-dynamic-archive-posts__inner.columns-3 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 992px) {
  .archive-posts.columns-3,
  .wp-block-jcore-dynamic-archive-posts__inner.columns-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 360px) {
  .archive-posts.columns-4,
  .wp-block-jcore-dynamic-archive-posts__inner.columns-4 {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 992px) {
  .archive-posts.columns-4,
  .wp-block-jcore-dynamic-archive-posts__inner.columns-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

/* JCORE DYNAMIC ARCHIVE */
.wp-block-jcore-dynamic-archive .wp-block-jcore-dynamic-archive__filters {
  margin-bottom: 3rem;
}
.wp-block-jcore-dynamic-archive .wp-block-jcore-dynamic-archive__filters .wp-block-jcore-dynamic-archive__filters__taxonomies__type h3 {
  font-weight: 400;
  text-transform: uppercase;
}
.wp-block-jcore-dynamic-archive .wp-block-jcore-dynamic-archive__filters .wp-block-jcore-dynamic-archive__filters__taxonomies__type select {
  background-color: var(--wp--preset--color--light);
  border-radius: none;
  border: 1px solid black;
  shadow: none;
  padding: 1rem;
  max-width: 360px;
  min-width: 280px;
  text-transform: uppercase;
}
.wp-block-jcore-dynamic-archive .wp-block-jcore-dynamic-archive__filters .wp-block-jcore-dynamic-archive__filters__taxonomies__type label.wp-block-jcore-dynamic-archive-filters__radio {
  width: max-content;
  padding: 4px 16px;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 1rem;
}
.wp-block-jcore-dynamic-archive .wp-block-jcore-dynamic-archive__filters .wp-block-jcore-dynamic-archive__filters__taxonomies__type input.wp-block-jcore-dynamic-archive-filters__radio__input {
  visibility: hidden;
}
.wp-block-jcore-dynamic-archive .wp-block-jcore-dynamic-archive__filters .wp-block-jcore-dynamic-archive__filters__taxonomies__type.taxonomy-type-category__children {
  margin-top: 1.5rem;
}

/* JCORE Dynamic Archive Pagination */
.wp-block-jcore-dynamic-archive-posts__pagination nav {
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: baseline;
  gap: 0.25rem;
  margin: 4rem 0.25rem 3rem;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav a {
  font-size: 1rem;
  margin: 0rem;
  color: var(--wp--preset--color--dark);
  background: var(--wp--preset--color--light);
  font-weight: 400;
  padding: 0.75rem 1.25rem;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav a.current {
  background: var(--wp--preset--color--success);
}
.wp-block-jcore-dynamic-archive-posts__pagination nav a:hover {
  text-decoration: none;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav {
  /*Pagination first */
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-first {
  background: var(--wp--preset--color--brand);
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-first .wp-block-jcore-dynamic-archive__pagination__link__icon::after {
  content: "\f323";
  font-family: "Font Awesome 6 Sharp";
  font-weight: 400;
  display: inline-block;
  font-size: 12px;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-first .wp-block-jcore-dynamic-archive__pagination__link__text {
  display: none;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav {
  /*Pagination previous */
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-previous {
  background: var(--wp--preset--color--brand);
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-previous .wp-block-jcore-dynamic-archive__pagination__link__icon::after {
  content: "\f053";
  font-family: "Font Awesome 6 Sharp";
  font-weight: 400;
  display: inline-block;
  font-size: 12px;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-previous .wp-block-jcore-dynamic-archive__pagination__link__text {
  display: none;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav {
  /*Pagination next */
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-next {
  background: var(--wp--preset--color--brand);
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-next .wp-block-jcore-dynamic-archive__pagination__link__icon::after {
  content: "\f054";
  font-family: "Font Awesome 6 Sharp";
  font-weight: 400;
  display: inline-block;
  font-size: 12px;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-next .wp-block-jcore-dynamic-archive__pagination__link__text {
  display: none;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav {
  /*Pagination last */
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-last {
  background: var(--wp--preset--color--brand);
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-last .wp-block-jcore-dynamic-archive__pagination__link__icon::after {
  content: "\f324";
  font-family: "Font Awesome 6 Sharp";
  font-weight: 400;
  display: inline-block;
  font-size: 12px;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link-last .wp-block-jcore-dynamic-archive__pagination__link__text {
  display: none;
}
.wp-block-jcore-dynamic-archive-posts__pagination nav {
  /* Current link item */
}
.wp-block-jcore-dynamic-archive-posts__pagination nav .wp-block-jcore-dynamic-archive__pagination__link.is-current {
  background: var(--wp--preset--color--brand);
}

/* JCORE Dynamic Archive load more button */
.wp-block-jcore-dynamic-archive-posts__pagination {
  display: flex;
  justify-content: center;
}
.wp-block-jcore-dynamic-archive-posts__pagination a.wp-block-jcore-dynamic-archive-posts__load_more {
  background-color: var(--wp--preset--color--brand);
  color: var(--wp--preset--color--white);
  width: max-content;
  padding: 0.45rem 2rem;
  margin-top: 3rem;
  font-size: var(--wp--preset--font-size--mini);
  line-height: var(--wp--custom--line-height--sm);
}

.wp-block-jcore-latest-posts__inner {
  grid-template-columns: repeat(1, 1fr);
  display: grid;
  gap: 20px;
}

@media (min-width: 360px) {
  .wp-block-jcore-latest-posts__inner.columns-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .wp-block-jcore-latest-posts__inner.columns-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 360px) {
  .wp-block-jcore-latest-posts__inner.columns-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .wp-block-jcore-latest-posts__inner.columns-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 768px) {
  .wp-block-jcore-latest-posts__inner.columns-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 992px) {
  .wp-block-jcore-latest-posts__inner.columns-5 {
    grid-template-columns: repeat(5, 1fr);
  }
}

.posts-highlight {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: 1fr;
}

.posts-highlight.columns-2 {
  grid-template-columns: 1fr 1fr;
}

.posts-highlight.columns-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

.posts-highlight.columns-4 {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.single-post .wp-block-post-author-name + .wp-block-post-date::before {
  content: "|";
  margin-right: 0.5em;
  color: var(--wp--preset--color--greyblue);
}
.single-post p {
  line-height: 1.6;
}

/*
 * A post tease as an article card, the same tile as the lohko/knowledge-card
 * block: a byline with a round portrait, then the title, a summary and a
 * read-more link pinned to the bottom so cards side by side line up.
 */
.tease {
  --tease-accent: var(--wp--preset--color--royalblue);
  --tease-muted: var(--wp--preset--color--greyblue);
  --tease-faint: var(--wp--preset--color--slateblue);
  --tease-avatar-size: 46px;
  position: relative;
  display: flex;
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 9%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--wp--preset--color--white) 3%, transparent);
  color: var(--wp--preset--color--white);
  text-align: left;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.tease:hover, .tease:focus-within {
  border-color: color-mix(in srgb, var(--wp--preset--color--white) 22%, transparent);
  transform: translateY(-2px);
}

.tease .tease-byline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tease .tease-avatar {
  width: var(--tease-avatar-size);
  height: var(--tease-avatar-size);
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

.tease .tease-identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.tease .post-author {
  font-size: 0.78125rem;
  font-weight: 700;
  line-height: 1.3;
}

.tease .tease-meta {
  color: var(--tease-faint);
  font-size: 0.6875rem;
  line-height: 1.3;
}

.tease .post-term {
  color: var(--tease-accent);
  font-weight: 600;
}

.tease .post-date + .post-term::before {
  margin: 0 0.35em;
  color: var(--tease-faint);
  content: "·";
  font-weight: 400;
}

.tease .tease-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
}

.tease .post-title {
  margin: 0;
  font-size: var(--wp--preset--font-size--heading-4, 1.1875rem);
  font-weight: 700;
  line-height: 1.35;
}

.tease .preview {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  -webkit-box-orient: vertical;
  color: var(--tease-muted);
  font-size: 0.8125rem;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  line-height: 1.6;
}

.tease .tease-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 6px;
  color: var(--tease-accent);
  font-size: 0.84375rem;
  font-weight: 700;
  gap: 6px;
  text-decoration: none;
}

.tease .tease-link-icon {
  transition: transform 0.12s ease;
}

.tease:hover .tease-link-icon {
  transform: translateX(3px);
}

.tease .tease-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .tease,
  .tease .tease-link-icon {
    transition: none;
  }
  .tease:hover,
  .tease:focus-within,
  .tease:hover .tease-link-icon {
    transform: none;
  }
}
.tease .image-container {
  position: relative;
  width: 100%;
  margin-bottom: 1rem;
}

.tease .image-container::after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.tease .image-container img {
  position: absolute;
  -o-object-fit: cover;
  object-fit: cover;
  height: 100%;
  width: 100%;
  font-family: "object-fit: cover;";
}

.tease .image-container.postcard::after {
  padding-bottom: 66%;
}

.block-post_grid .posts-highlight {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 360px) {
  .block-post_grid.columns-2 .posts-highlight {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 768px) {
  .block-post_grid.columns-3 .posts-highlight {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 360px) {
  .block-post_grid.columns-4 .posts-highlight {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 992px) {
  .block-post_grid.columns-4 .posts-highlight {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.masonry-grid {
  display: grid;
  grid-row-gap: 2rem !important;
  grid-template-columns: 1fr;
  grid-auto-rows: 20px;
}
.masonry-grid > * {
  width: auto !important;
  grid-row-end: span 20; /* Somewhat sane default. */
}
@media (min-width: 768px) {
  .masonry-grid {
    grid-row-gap: 3rem !important;
  }
  .masonry-grid.columns-2, .masonry-grid.columns-3, .masonry-grid.columns-4 {
    grid-template-columns: 1fr 1fr;
  }
  .masonry-grid .tease-nr-2 .image-container {
    margin-top: 6rem;
    margin-bottom: 2rem;
  }
}
@media (min-width: 992px) {
  .masonry-grid.columns-3 {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .masonry-grid.columns-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

.error404 h1 {
  font-size: var(--wp--preset--font-size--heading-1);
  margin-top: 3rem;
}
.error404 .home-link {
  max-width: var(--wp--style--global--content-size);
  margin-top: 2rem;
  text-transform: uppercase;
  padding-bottom: 2rem;
  margin-bottom: 5rem;
}

.block-social_share {
  background: var(--wp--preset--color--white);
  border-radius: 10px;
  padding: 1.5rem;
}
@media (min-width: 768px) {
  .block-social_share {
    display: grid;
    grid-template-columns: auto 180px;
    grid-gap: 0.5rem;
    justify-content: end;
    justify-items: end;
    align-items: center;
  }
}
.block-social_share p.share-heading {
  font-family: var(--jcore-heading-font-family);
  text-transform: uppercase;
}
@media (min-width: 768px) {
  .block-social_share p.share-heading {
    margin-bottom: 0;
  }
}
.block-social_share .social-media-share a {
  text-decoration: none;
}
.block-social_share .social-media-share a i {
  margin-right: 0.5rem;
}

/*
 * Yoast FAQ block as an accordion, styled like lohko's jcore/accordions:
 * hairlines between the rows, the question in bold with a cyan chevron at
 * the far end, and the answer sliding open and fading in under it. There is
 * no badge in front of the question.
 *
 * js/yoast-faq.ts builds the markup: the question becomes a button in an
 * h3, and the answer is wrapped in a content region, a clip and a body. The
 * slide is the grid-row trick from lohko's accordion-item/style.scss: the
 * content is a one-row grid whose row goes from 0fr to 1fr, the clip hides
 * what does not fit yet (and turns invisible once closed, so its links drop
 * out of the tab order), and the body carries the padding.
 */
.schema-faq {
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent);
}

.schema-faq-section {
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent);
}
.schema-faq-section .schema-faq-header {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}
.schema-faq-section .schema-faq-question {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  gap: 1rem;
  margin: 0;
  padding: 1.25rem 1.25rem 1.25rem 0;
  border: 0;
  background: none;
  color: var(--wp--preset--color--white);
  font-family: var(--jcore-heading-font-family, inherit);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.schema-faq-section .schema-faq-question:focus-visible {
  outline: 2px solid var(--wp--preset--color--cyan);
  outline-offset: 2px;
}
.schema-faq-section .schema-faq-toggle {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  color: var(--wp--preset--color--cyan);
}
.schema-faq-section .schema-faq-toggle-icon::before {
  display: block;
  font-family: "Font Awesome 6 Sharp";
  font-size: 0.875rem;
  font-weight: 900;
  content: "\f078";
  transition: transform 0.2s ease;
}
.schema-faq-section .schema-faq-content {
  display: grid;
  grid-template-rows: 0fr;
  color: var(--wp--preset--color--greyblue);
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.schema-faq-section .schema-faq-clip {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  /* Visibility waits for the slide to finish before hiding. */
  transition: visibility 0s linear 0.3s;
}
.schema-faq-section .schema-faq-body {
  padding: 0.25rem 0 1.75rem;
}
.schema-faq-section .schema-faq-body > * {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.schema-faq-section .schema-faq-answer {
  margin: 0;
}
.schema-faq-section.active .schema-faq-toggle-icon::before {
  transform: rotate(180deg);
}
.schema-faq-section.active .schema-faq-content {
  grid-template-rows: 1fr;
}
.schema-faq-section.active .schema-faq-clip {
  visibility: visible;
  transition: visibility 0s;
}
.schema-faq-section.active .schema-faq-body > * {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .schema-faq-section .schema-faq-toggle-icon::before,
  .schema-faq-section .schema-faq-content,
  .schema-faq-section .schema-faq-clip, .schema-faq-section.active .schema-faq-clip,
  .schema-faq-section .schema-faq-body > * {
    transition: none;
  }
}
/**
* Gravity Forms minimalistics if using default base theme in GF settings.
* The theme framework uses root settings, if nothing else defined.
* Add more gernral settings to root by inspecting the element styling you want to change.
* The button styling is set from Ilme root button styles found in blocks/buttons.css
*/
/**
* Gravity Forms minimalistics if using default base theme in GF settings.
* The theme framework uses root settings, if nothing else defined.
* Add more gernral settings to root by inspecting the element styling you want to change.
* The button styling is set from Ilme root button styles found in blocks/buttons.css.
* For style changes to take effect: MAKE BUILD!!!
*/
:root .gform-theme--framework {
  --gf-color-primary: var(--wp--preset--color--brand);
  --gf-color-primary-darker: var(--wp--preset--color--orange);
  --gf-ctrl-bg-color: var(--wp--preset--color--white);
  --gf-color-out-ctrl-light-darker: var(--wp--preset--color--lightgrey);
  --gf-ctrl-border-color: var(--wp--preset--color--lightgrey);
  --gf-ctrl-border-color-hover: var(--wp--preset--color--lightgrey);
  --gf-ctrl-radius: 12px;
  --gf-ctrl-textarea-radius: 12px;
  --gf-ctrl-border-width: 1px;
  --gf-ctrl-border-style: solid;
  --gf-ctrl-color: var(--wp--preset--color--black);
  --gf-ctrl-outline-color: var(--wp--preset--color--lightblue);
  --gf-ctrl-outline-color-focus: var(--wp--preset--color--lightblue);
  --gf-ctrl-border-color-focus: var(--wp--preset--color--brand);
  --gf-ctrl-accent-color: var(--wp--preset--color--brand);
  --gf-ctrl-btn-bg-color-ctrl: var(--jcore-button-bg-color);
  --gf-ctrl-btn-color-primary: var(--jcore-button-text-color);
  --gf-ctrl-btn-color-hover-primary: var(--jcore-button-hover-text-color);
  --gf-ctrl-btn-color-hover-ctrl: var(--jcore-button-hover-text-color);
  --gf-ctrl-btn-bg-color-primary: var(--jcore-button-bg-color);
  --gf-ctrl-btn-bg-color-hover-primary: var(--jcore-button-hover-bg-color);
  --gf-ctrl-btn-bg-color-hover-ctrl: var(--jcore-button-hover-bg-color);
  --gf-ctrl-btn-radius: var(--jcore-button-radius);
  --gf-ctrl-btn-font-weight: var(--jcore-button-font-weight);
  --gf-ctrl-btn-text-transform: none;
  --gf-ctrl-btn-font-size: var(--jcore-button-font-size);
  --gf-ctrl-btn-font-style: normal;
  --gf-ctrl-btn-font-family: var(--jcore-heading-font-family);
  --gf-ctrl-btn-font-size-md: var(--wp--preset--font-size--paragraph);
  --gf-ctrl-btn-padding-y: 1rem;
  --gf-ctrl-btn-padding-x-md: 2rem;
  --gf-ctrl-choice-check-color: var(--wp--preset--color--brand);
  --gf-field-pg-prog-bar-bg-color-blue: var(--wp--preset--color--brand);
  --gf-field-pg-prog-bar-bg-color-orange: var(--wp--preset--color--brand);
  --gf-ctrl-label-font-size-primary: var(--wp--preset--font-size--paragraph);
  --gf-ctrl-label-font-size-tertiary: var(--wp--preset--font-size--mini);
  --gf-color-in-ctrl-primary: var(--wp--preset--color--brand);
  --gf-color-in-ctrl-primary-darker: var(--wp--preset--color--brand);
  --gf-ctrl-file-zone-icon-color: var(--wp--preset--color--brand);
  --gf-form-footer-margin-y-start: 2.5rem;
  --gf-field-prod-quant-width: 65px;
}

body .gform_wrapper .gform_fields {
  gap: 1.5rem;
}
@media (min-width: 360px) {
  body .gform_wrapper .gform-footer {
    display: flex;
    justify-content: flex-end;
  }
}
body .gform-theme--framework.prodlist_wrapper .prod {
  max-width: 500px;
}
body .gform-theme--framework .gfield--type-product .ginput_quantity {
  margin-block-end: var(--gf-field-prod-quant-margin-y-end);
  order: 3;
  flex-basis: 10%;
}
body .gform-theme--framework .gfield--type-product .ginput_container_singleproduct {
  display: flex;
  flex-direction: row;
  align-content: center;
}
body .gform-theme--framework .ginput_quantity_label.gform-field-label {
  order: 4;
  flex-basis: 10%;
  font-size: 18px;
  margin-left: 1rem;
  align-self: center;
}
body .gform-theme--framework .gform-field-label.gform-field-label--type-sub-large.ginput_product_price_label {
  display: none;
}
body .gform-theme--framework .gform-field-label.gform-field-label--type-sub-large.ginput_product_price {
  font-size: 20px;
  font-weight: 500;
  color: var(--wp--preset--color--brand);
}
body .gform-theme--framework .ginput_product_price_wrapper {
  flex-basis: 70%;
}

.search-items {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
.search-items article {
  background-color: var(--wp--preset--color--light);
  border-radius: 1rem;
  padding: 1rem;
}

.pagination-block {
  --jcore-button-bg-color: transparent; /* because a-tag is styles here as btn, and .btn is one level up */
  --jcore-button-hover-bg-color: transparent;
  padding: 2rem;
  display: flex;
  justify-content: space-evenly;
}
.pagination-block > section {
  display: flex;
  align-items: center;
}
.pagination-block div {
  padding: 0;
}
.pagination-block div a {
  color: var(--wp--preset--color--black);
  background-color: var(--wp--preset--color--brand);
  border-radius: 0.5rem;
  padding: 0.75rem;
  margin: 1rem;
}
.pagination-block div a:hover {
  text-decoration: none;
  background-color: var(--wp--preset--color--light);
}
.pagination-block div.current a {
  background-color: var(--wp--preset--color--light);
  color: var(--jcore-button-active-txt-color);
}

/*
 * The site footer, rendered from parts/footer.html.
 *
 * Three rows split by hairlines - brand beside the newsletter signup, four
 * link columns, then the bottom bar - over the same near-black the rest of
 * the page sits on. The only thing separating it from the section above is
 * its top border and a blue glow bleeding in from the lower left.
 *
 * The link columns and the legal row are `jco/simple-menu` blocks reading WP
 * menu locations (footer_col_1..4 and footer_bottom, registered in
 * functions.php), so their markup belongs to that block - everything here
 * hangs off `.wp-block-jco-simple-menu` rather than off classes the template
 * part controls. Same for the social icons, which are a core social-links
 * block.
 */
.site-footer {
  /* Design colours mapped onto the palette: the headings' #F5F7FA onto
     white and the muted labels' #6B7686 onto slateblue. The links' #8D9AB2
     sits between greyblue and slateblue - greyblue alone reads noticeably
     brighter than the design - so it is mixed from the two. */
  --site-footer-heading: var(--wp--preset--color--white);
  --site-footer-muted: color-mix(
  	in srgb,
  	var(--wp--preset--color--greyblue) 55%,
  	var(--wp--preset--color--slateblue)
  );
  --site-footer-faint: var(--wp--preset--color--slateblue);
  --site-footer-rule: color-mix(
  	in srgb,
  	var(--wp--preset--color--white) 8%,
  	transparent
  );
  /* Signup errors. `failure` is too dark to read on the footer's black. */
  --site-footer-error: var(--wp--preset--color--coral);
  /* Widens with the viewport; see the breakpoints at the end. */
  --site-footer-column-gap: 36px;
  position: relative;
  /* Contains the glow below, which overhangs on three sides. */
  overflow: hidden;
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 7%, transparent);
  padding-top: var(--wp--custom--spacing-sizes--xlarge);
  padding-bottom: var(--wp--custom--spacing-sizes--medium);
  color: var(--site-footer-muted);
  /*
   * The design blurs a translucent circle at the bottom left. A radial
   * gradient with soft stops lands in the same place without a
   * `filter: blur()` layer for the browser to repaint - the same trade the
   * hero backdrop makes. The gradient's radii are the design's circle radii
   * plus its 120px blur, so the box is 800x620 rather than 560x380, and it
   * is offset by that difference to keep the glow centred where it was.
   */
}
.site-footer::before {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: -310px;
  left: calc(8% - 120px);
  width: 800px;
  height: 620px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--wp--preset--color--royalblue) 9%, transparent) 0%, color-mix(in srgb, var(--wp--preset--color--royalblue) 8%, transparent) 30%, transparent 100%);
  pointer-events: none;
}
.site-footer {
  /* Every row sits above the glow. */
}
.site-footer > * {
  position: relative;
  z-index: 1;
}
.site-footer {
  /* theme.json gives every group a fluid margin and padding, and every
     paragraph a bottom margin. The footer's rows set their own spacing
     below, so clear the defaults once here rather than per block. */
}
.site-footer .wp-block-group {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}
.site-footer p {
  margin: 0;
}
.site-footer {
  /* The design eases every colour change in the footer. */
}
.site-footer a,
.site-footer button {
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .site-footer a,
  .site-footer button {
    transition: none;
  }
}
.site-footer {
  /*
   * Brand + newsletter.
   */
}
.site-footer .site-footer__top {
  gap: var(--wp--custom--spacing-sizes--large);
  padding-bottom: var(--wp--custom--spacing-sizes--large);
  border-bottom: 1px solid var(--site-footer-rule);
}
.site-footer .site-footer__brand {
  gap: 14px;
}
.site-footer .site-footer__tagline {
  font-size: var(--wp--preset--font-size--mini);
  line-height: var(--wp--custom--line-height--lg);
}
.site-footer {
  /* The CTA is the theme's default gradient button; it only needs the
     margins theme.json adds for buttons in running text taken back off. */
}
.site-footer .wp-block-buttons {
  margin: 0;
}
.site-footer {
  /* A size down from the theme's page-level CTA: the footer's button is a
     quiet repeat of the one in the header, not the page's main action. */
}
.site-footer .wp-block-button__link {
  margin: 0;
  padding: 12px 22px;
  font-size: var(--wp--preset--font-size--mini);
}
.site-footer {
  /* Sized explicitly: the signup's own content would shrink the column to
     whatever its widest message happens to be. */
}
.site-footer .site-footer__newsletter {
  width: 100%;
}
.site-footer {
  /*
   * The signup is Gravity Forms form 1 (one email field). The form carries
   * the `gform-theme__disable` CSS class, which switches off GF's framework
   * styles for everything inside it, so the rules here start from bare
   * inputs instead of fighting GF's ID-scoped custom properties. GF's
   * foundation layer (grid, hidden honeypot, spinner) still loads.
   *
   * GF nests the parts as form > body > fields > field > label / input /
   * description, with the submit in a separate footer. Flattening that with
   * `display: contents` lets one grid put the field label on top as the
   * heading, the input and button side by side, and the fine print (field
   * description) plus any validation messages underneath. `order` moves
   * the footer up beside the input.
   */
}
.site-footer .gform_wrapper {
  /* Fill the column rather than shrink to the content, which would
     widen the form whenever an error message appears. */
  align-self: stretch;
  margin: 0;
}
.site-footer .gform_wrapper .gfield_required {
  display: none;
}
.site-footer .gform_wrapper form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 10px;
  margin: 0;
}
.site-footer .gform_wrapper :is(.gform-body, .gform_fields, .gfield) {
  display: contents;
}
.site-footer .gform_wrapper :is(.gfield_label, .gfield_description, .gfield_validation_message) {
  grid-column: 1/-1;
}
.site-footer .gform_wrapper .gform-footer {
  order: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.site-footer .gform_wrapper :is(.gfield_description, .gfield_validation_message) {
  order: 2;
  margin: 0;
  padding: 0;
}
.site-footer .gform_wrapper .gfield_label {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
  line-height: var(--wp--custom--line-height--md);
  color: var(--site-footer-heading);
}
.site-footer {
  /*
   * Input and button share one height and radius so the pair reads as a
   * single control. Both selectors go through `.site-footer__newsletter`
   * and the field / footer wrappers to out-rank GF's framework rules
   * (`.gform-theme--framework.gform-theme.gform_wrapper
   * button.button.gform_button`, 0-5-1), so the look holds even if the
   * form loses its `gform-theme__disable` class, e.g. on a site whose copy
   * of the form was never updated.
   */
}
.site-footer .gform_wrapper {
  --site-footer-signup-height: 44px;
  --site-footer-signup-radius: 12px;
}
.site-footer .site-footer__newsletter .gform_wrapper .ginput_container input[type=email] {
  box-sizing: border-box;
  width: 100%;
  /* `min-width: 0` so the field can shrink below its default intrinsic
     width instead of pushing the button out of the column. */
  min-width: 0;
  height: var(--site-footer-signup-height);
  margin: 0;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 14%, transparent);
  border-radius: var(--site-footer-signup-radius);
  background: color-mix(in srgb, var(--wp--preset--color--white) 3%, transparent);
  box-shadow: none;
  color: var(--site-footer-heading);
  font-family: inherit;
  font-size: var(--wp--preset--font-size--mini);
  line-height: normal;
}
.site-footer .site-footer__newsletter .gform_wrapper .ginput_container input[type=email]::placeholder {
  color: var(--site-footer-faint);
  opacity: 1;
}
.site-footer .site-footer__newsletter .gform_wrapper .ginput_container input[type=email]:focus {
  outline: none;
}
.site-footer .site-footer__newsletter .gform_wrapper .ginput_container input[type=email]:focus-visible {
  outline: 2px solid var(--wp--preset--color--royalblue);
  outline-offset: 2px;
}
.site-footer {
  /*
   * The submit is the theme's default blue button (core/button's default
   * style: theme.json for the gradient, radius and shadow, blocks/_buttons.scss
   * for the hover lift and light sweep), rebuilt here because GF renders a
   * bare <button>. `all: unset` clears everything GF, the browser and the
   * theme's `.btn` class put on it first.
   */
}
.site-footer .site-footer__newsletter .gform_wrapper .gform-footer button.gform_button.button {
  all: unset;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--site-footer-signup-height);
  padding: 0 22px;
  border-radius: var(--site-footer-signup-radius);
  background: var(--wp--preset--gradient--royalblue-to-cyan);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--wp--preset--color--royalblue) 35%, transparent);
  color: var(--wp--preset--color--dark);
  font-family: var(--wp--preset--font-family--albert-sans);
  font-size: var(--wp--preset--font-size--mini);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  /* Light that sweeps across the gradient on hover. */
}
.site-footer .site-footer__newsletter .gform_wrapper .gform-footer button.gform_button.button::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.site-footer .site-footer__newsletter .gform_wrapper .gform-footer button.gform_button.button:hover {
  background: var(--wp--preset--gradient--royalblue-to-cyan);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--wp--preset--color--cyan) 42%, transparent);
  color: var(--wp--preset--color--dark);
  transform: translateY(-2px);
}
.site-footer .site-footer__newsletter .gform_wrapper .gform-footer button.gform_button.button:hover::before {
  transform: translateX(130%);
}
.site-footer .site-footer__newsletter .gform_wrapper .gform-footer button.gform_button.button:active {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--wp--preset--color--royalblue) 32%, transparent);
  transform: translateY(0);
}
.site-footer .site-footer__newsletter .gform_wrapper .gform-footer button.gform_button.button:focus-visible {
  outline: 2px solid var(--wp--preset--color--cyan);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .site-footer .site-footer__newsletter .gform_wrapper .gform-footer button.gform_button.button, .site-footer .site-footer__newsletter .gform_wrapper .gform-footer button.gform_button.button::before {
    transition: none;
  }
  .site-footer .site-footer__newsletter .gform_wrapper .gform-footer button.gform_button.button:hover {
    transform: none;
  }
  .site-footer .site-footer__newsletter .gform_wrapper .gform-footer button.gform_button.button:hover::before {
    transform: translateX(-130%);
  }
}
.site-footer {
  /* The AJAX spinner GF appends after the button. */
}
.site-footer .gform_wrapper .gform-footer img {
  width: 16px;
  height: 16px;
}
.site-footer .gform_wrapper .gfield_description {
  font-size: 12px;
  line-height: var(--wp--custom--line-height--lg);
  color: var(--site-footer-faint);
}
.site-footer {
  /*
   * Errors and the confirmation. GF prints a form-level notice above the
   * form (outside the grid) plus a message under the field; both stay small
   * and use the palette's red on the dark background rather than GF's boxed
   * alert. GF moves focus to the notice after a failed submit so screen
   * readers announce it; it is not focusable otherwise, so the theme's
   * focus ring would only draw a stray red line under it.
   */
}
.site-footer .gform_wrapper .gform_validation_errors {
  margin: 0 0 12px;
  padding: 0;
  outline: none;
  border: 0;
  background: none;
  box-shadow: none;
}
.site-footer .gform_wrapper .gform_validation_errors h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--site-footer-muted);
}
.site-footer .gform_wrapper .gform_validation_errors {
  /* GF's warning icon. */
}
.site-footer .gform_wrapper .gform_validation_errors .gform-icon {
  display: none;
}
.site-footer .gform_wrapper .gfield_validation_message {
  font-size: 12px;
  color: var(--site-footer-error);
}
.site-footer .site-footer__newsletter .gform_wrapper .gfield_error input[type=email] {
  border-color: var(--site-footer-error);
}
.site-footer .gform_confirmation_message {
  font-size: var(--wp--preset--font-size--mini);
  color: var(--site-footer-heading);
}
.site-footer {
  /*
   * Link columns.
   */
}
.site-footer .site-footer__columns {
  /* The flex layout centres items by default, which drops shorter
     columns below the longest one; top-align so the titles line up. */
  align-items: flex-start;
  gap: var(--site-footer-column-gap);
  padding-top: var(--wp--custom--spacing-sizes--medium);
  padding-bottom: var(--wp--custom--spacing-sizes--medium);
}
.site-footer .site-footer__column {
  /* One under the other until there is room for two, then four. */
  flex: 1 1 100%;
  gap: 14px;
}
.site-footer .site-footer__column-title {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: var(--wp--custom--line-height--md);
  text-transform: uppercase;
  color: var(--site-footer-faint);
}
.site-footer {
  /*
   * Menus. The block ships the list reset and the row/column direction; the
   * footer only sets spacing and the link colours, which have to out-specify
   * theme.json's blue underlined default for `a`.
   */
}
.site-footer .wp-block-jco-simple-menu {
  gap: 14px;
}
.site-footer .wp-block-jco-simple-menu li {
  margin: 0;
}
.site-footer .wp-block-jco-simple-menu a {
  font-size: var(--wp--preset--font-size--mini);
  font-weight: 400;
  text-decoration: none;
  color: var(--site-footer-muted);
}
.site-footer .wp-block-jco-simple-menu a:hover {
  text-decoration: none;
  color: var(--site-footer-heading);
}
.site-footer {
  /*
   * Bottom bar: copyright, legal links, social icons.
   */
}
.site-footer .site-footer__bottom {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wp--custom--spacing-sizes--medium);
  padding-top: 24px;
  border-top: 1px solid var(--site-footer-rule);
}
.site-footer .site-footer__copyright p {
  font-size: 13px;
  color: var(--site-footer-faint);
}
.site-footer .site-footer__legal {
  flex-wrap: wrap;
  gap: 16px;
}
.site-footer .site-footer__legal a {
  font-size: 13px;
}
.site-footer {
  /*
   * Social icons: outlined circles rather than the block's filled chips, so
   * `is-style-logos-only` in the template part drops the background and this
   * draws the ring back on.
   */
}
.site-footer .site-footer__social {
  gap: 10px;
}
.site-footer .site-footer__social .wp-social-link {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 12%, transparent);
  border-radius: 50%;
  color: var(--site-footer-muted);
}
.site-footer .site-footer__social .wp-social-link a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.site-footer .site-footer__social .wp-social-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.site-footer .site-footer__social .wp-social-link:hover {
  border-color: color-mix(in srgb, var(--wp--preset--color--white) 30%, transparent);
  background: color-mix(in srgb, var(--wp--preset--color--white) 6%, transparent);
}
.site-footer {
  /*
   * The design's layout is the widest one: brand beside the newsletter, four
   * link columns in a row, and the bottom bar's three groups spread across
   * one line. Narrower viewports walk that back a step at a time - the rules
   * above are the fully stacked end of it.
   */
}
@media (min-width: 768px) {
  .site-footer .site-footer__brand {
    max-width: 340px;
  }
  .site-footer .site-footer__newsletter {
    width: 360px;
  }
  .site-footer .site-footer__column {
    flex-basis: calc(50% - var(--site-footer-column-gap) / 2);
  }
  .site-footer .site-footer__bottom {
    flex-direction: row;
    align-items: center;
  }
  .site-footer .site-footer__legal {
    gap: 28px;
  }
}
@media (min-width: 992px) {
  .site-footer {
    --site-footer-column-gap: 60px;
  }
  .site-footer .site-footer__column {
    /* Equal shares of the row, but never so narrow that a link like
       "Web & technical teams" has to break mid-word. */
    flex: 1 1 160px;
  }
}

/* Buttons, all non-hover styling comes from theme.json (in theme.json they get overridden by Gberg own btn clases..*/
.wp-block-buttons .wp-block-button {
  /* Primary CTA look: the default style and is-style-cta-arrow.
     Gradient, radius and colors come from theme.json, motion lives here. */
}
.wp-block-buttons .wp-block-button:not(.is-style-outline,
.is-style-arrow,
.is-style-arrow-white,
.is-style-solid,
.is-style-monica,
.is-style-outline-arrow) .wp-block-button__link {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
  /* Light that sweeps across the gradient on hover */
}
.wp-block-buttons .wp-block-button:not(.is-style-outline,
.is-style-arrow,
.is-style-arrow-white,
.is-style-solid,
.is-style-monica,
.is-style-outline-arrow) .wp-block-button__link::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.5) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.wp-block-buttons .wp-block-button:not(.is-style-outline,
.is-style-arrow,
.is-style-arrow-white,
.is-style-solid,
.is-style-monica,
.is-style-outline-arrow) .wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--cyan);
  outline-offset: 3px;
}
.wp-block-buttons .wp-block-button:not(.is-style-outline,
.is-style-arrow,
.is-style-arrow-white,
.is-style-solid,
.is-style-monica,
.is-style-outline-arrow):hover .wp-block-button__link {
  color: var(--wp--preset--color--dark);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--wp--preset--color--cyan) 42%, transparent);
  transform: translateY(-2px);
}
.wp-block-buttons .wp-block-button:not(.is-style-outline,
.is-style-arrow,
.is-style-arrow-white,
.is-style-solid,
.is-style-monica,
.is-style-outline-arrow):hover .wp-block-button__link::before {
  transform: translateX(130%);
}
.wp-block-buttons .wp-block-button:not(.is-style-outline,
.is-style-arrow,
.is-style-arrow-white,
.is-style-solid,
.is-style-monica,
.is-style-outline-arrow) .wp-block-button__link:active {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--wp--preset--color--royalblue) 32%, transparent);
  transform: translateY(0);
}
.wp-block-buttons .wp-block-button {
  /* CTA with a trailing arrow that nudges right on hover */
}
.wp-block-buttons .wp-block-button.is-style-cta-arrow .wp-block-button__link::after {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: "Font Awesome 6 Sharp";
  font-weight: 900;
  content: "\f061";
  transition: transform 0.2s ease;
}
.wp-block-buttons .wp-block-button.is-style-cta-arrow:hover .wp-block-button__link::after {
  transform: translateX(0.25rem);
}
.wp-block-buttons .wp-block-button {
  /* Solid blue, the previous default style */
}
.wp-block-buttons .wp-block-button.is-style-solid:hover .wp-block-button__link {
  color: var(--wp--preset--color--blue);
  background: var(--wp--preset--color--black);
  border-color: var(--wp--preset--color--blue);
}
.wp-block-buttons .wp-block-button.is-style-outline:hover .wp-element-button {
  color: var(--wp--preset--color--black);
  background: var(--wp--preset--color--light);
  border-color: var(--wp--preset--color--light);
}
.wp-block-buttons .wp-block-button {
  /* Outline with Monica's portrait in front of the label, in an amber
     ring. Padding (room for the portrait on the left), border and
     radius come from the theme.json `monica` variation, which takes the
     border off the default style's padding so the two sit side by side
     at the same height. The portrait is positioned rather than laid
     out, so the link stays an inline-block like the default style;
     `overflow: hidden` matches that style's too, which moves an inline
     block's baseline to its bottom edge - without it the two wrappers
     differ in height and the row centres them a few pixels apart. */
}
.wp-block-buttons .wp-block-button.is-style-monica .wp-block-button__link {
  position: relative;
  overflow: hidden;
  /* The variation only clears the colour; the default style's
     gradient would still show through. */
  background: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.wp-block-buttons .wp-block-button.is-style-monica .wp-block-button__link::before {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: url("../../assets/images/monica-avatar.jpg") center/112% no-repeat;
  box-shadow: 0 0 0 2px var(--wp--preset--color--amber);
  content: "";
  transform: translateY(-50%);
}
.wp-block-buttons .wp-block-button.is-style-monica .wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--cyan);
  outline-offset: 3px;
}
.wp-block-buttons .wp-block-button.is-style-monica:hover .wp-block-button__link {
  border-color: var(--wp--preset--color--lilyblue);
  background: color-mix(in srgb, var(--wp--preset--color--white) 7%, transparent);
}
.wp-block-buttons .wp-block-button {
  /* Quiet outline pill with the CTA's trailing arrow. Border, padding
     and radius come from the theme.json `outline-arrow` variation. */
}
.wp-block-buttons .wp-block-button.is-style-outline-arrow {
  /* `overflow: hidden` as on monica: it lines the button up with a
     default-style one beside it. */
}
.wp-block-buttons .wp-block-button.is-style-outline-arrow .wp-block-button__link {
  overflow: hidden;
  /* The variation only sets a colour; the default style's
     gradient would still show through. */
  background: color-mix(in srgb, var(--wp--preset--color--white) 2%, transparent);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.wp-block-buttons .wp-block-button.is-style-outline-arrow .wp-block-button__link::after {
  display: inline-block;
  margin-left: 0.5rem;
  font-family: "Font Awesome 6 Sharp";
  font-weight: 900;
  content: "\f061";
  transition: transform 0.2s ease;
}
.wp-block-buttons .wp-block-button.is-style-outline-arrow .wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--cyan);
  outline-offset: 3px;
}
.wp-block-buttons .wp-block-button.is-style-outline-arrow:hover .wp-block-button__link {
  color: var(--wp--preset--color--white);
  border-color: color-mix(in srgb, var(--wp--preset--color--white) 22%, transparent);
  background: color-mix(in srgb, var(--wp--preset--color--white) 7%, transparent);
}
.wp-block-buttons .wp-block-button.is-style-outline-arrow:hover .wp-block-button__link::after {
  transform: translateX(0.25rem);
}
.wp-block-buttons .wp-block-button {
  /* Bare text link with a trailing arrow - no background, no padding.
     Colour, size and weight come from the theme.json `arrow` and
     `arrow-white` variations; `arrow-white` is the same link in white,
     for the rows where cyan would read as a second accent.

     The arrow is a pseudo-element on the link, so it takes the link's
     own colour - which the Colour > Text control sets, but the inline
     text-colour format does not (that one only paints the letters). */
}
.wp-block-buttons .wp-block-button.is-style-arrow .wp-block-button__link, .wp-block-buttons .wp-block-button.is-style-arrow-white .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  text-align: left;
  text-decoration: none;
  transition: color 0.2s ease;
  background: transparent;
}
.wp-block-buttons .wp-block-button.is-style-arrow .wp-block-button__link::after, .wp-block-buttons .wp-block-button.is-style-arrow-white .wp-block-button__link::after {
  color: inherit;
  font-family: "Font Awesome 6 Sharp";
  font-weight: 900;
  content: "\f061";
  transition: transform 0.2s ease;
}
.wp-block-buttons .wp-block-button.is-style-arrow .wp-block-button__link:focus-visible, .wp-block-buttons .wp-block-button.is-style-arrow-white .wp-block-button__link:focus-visible {
  outline: 2px solid var(--wp--preset--color--cyan);
  outline-offset: 3px;
}
.wp-block-buttons .wp-block-button.is-style-arrow, .wp-block-buttons .wp-block-button.is-style-arrow-white {
  /* The hover tint is skipped once a colour has been picked in the
     sidebar, so the arrow and its label do not both jump back to
     the theme's blue halfway through the interaction. */
}
.wp-block-buttons .wp-block-button.is-style-arrow:hover .wp-element-button, .wp-block-buttons .wp-block-button.is-style-arrow-white:hover .wp-element-button {
  background: var(--wp--preset--color--transparent);
  border-color: var(--wp--preset--color--transparent);
}
.wp-block-buttons .wp-block-button.is-style-arrow:hover .wp-element-button::after, .wp-block-buttons .wp-block-button.is-style-arrow-white:hover .wp-element-button::after {
  transform: translateX(0.25rem);
}
.wp-block-buttons .wp-block-button.is-style-arrow:hover .wp-element-button:not(.has-text-color), .wp-block-buttons .wp-block-button.is-style-arrow-white:hover .wp-element-button:not(.has-text-color) {
  color: var(--wp--preset--color--lightblue);
}
.wp-block-buttons .wp-block-button {
  /* White stays white on hover - lightblue would read as the cyan
     variation the style exists to avoid. */
}
.wp-block-buttons .wp-block-button.is-style-arrow-white:hover .wp-element-button:not(.has-text-color) {
  color: var(--wp--preset--color--light);
}

/* The hero-showcase block's secondary button in the Monica style. The block
   writes its own markup rather than a core button, so it cannot take the
   block style; this gives it the same portrait, border and hover. It keeps
   the hero's pill shape and height so it still pairs with the primary button
   beside it. The doubled class beats the block's own `--secondary` rule. */
.wp-block-lohko-hero-showcase .hero-showcase__button.hero-showcase__button--secondary {
  position: relative;
  padding-left: 3.25rem;
  border-color: var(--wp--preset--color--slateblue);
  background-color: transparent;
  color: var(--wp--preset--color--white);
  font-weight: 700;
}
.wp-block-lohko-hero-showcase .hero-showcase__button.hero-showcase__button--secondary::before {
  position: absolute;
  top: 50%;
  left: 0.75rem;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: url("../../assets/images/monica-avatar.jpg") center/112% no-repeat;
  box-shadow: 0 0 0 2px var(--wp--preset--color--amber);
  content: "";
  transform: translateY(-50%);
}
.wp-block-lohko-hero-showcase .hero-showcase__button.hero-showcase__button--secondary:hover {
  border-color: var(--wp--preset--color--lilyblue);
  background-color: color-mix(in srgb, var(--wp--preset--color--white) 7%, transparent);
  color: var(--wp--preset--color--white);
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-buttons .wp-block-button .wp-block-button__link,
  .wp-block-buttons .wp-block-button .wp-block-button__link::before,
  .wp-block-buttons .wp-block-button .wp-block-button__link::after {
    transition: none;
  }
  .wp-block-buttons .wp-block-button:hover .wp-block-button__link {
    transform: none;
  }
  .wp-block-buttons .wp-block-button:hover .wp-block-button__link::before {
    transform: translateX(-130%);
  }
}
/**
* Set buttons colors and font variables for use elsewhere in theme where not G-berg,for example btn-class for form submit or tease-link or pagination?
*/
:root {
  --jcore-button-bg-color: var(--wp--preset--color--blue);
  --jcore-button-border-color: var(--wp--preset--color--blue);
  --jcore-button-text-color: var(--wp--preset--color--black);
  --jcore-button-active-bg-color: var(--wp--preset--color--blue);
  --jcore-button-active-txt-color: var(--wp--preset--color--black);
  --jcore-button-hover-bg-color: var(--wp--preset--color--black);
  --jcore-button-hover-text-color: var(--wp--preset--color--blue);
  --jcore-button-hover-border-color: var(--wp--preset--color--blue);
  --jcore-button-font-size: var(--wp--preset--font-size--paragraph);
  --jcore-button-padding: 1rem 1.75rem;
  --jcore-button-radius: 6px;
}

.btn {
  background-color: var(--jcore-button-bg-color);
  color: var(--jcore-button-text-color);
  border-color: var(--jcore-button-border-color);
  padding: var(--jcore-button-padding);
  font-size: var(--jcore-button-font-size);
  border-radius: var(--jcore-button-radius);
}
.btn:hover {
  background-color: var(--jcore-button-hover-bg-color);
  color: var(--jcore-button-hover-text-color);
  border-color: var(--jcore-button-hover-border-color);
}

/**
* Gradient pill CTA for markup that never passes through a `wp-block-button`
* - the nav's "Book a demo" links today, a form submit or a tease link
* tomorrow. Same gradient, text colour and shadow as the block button's
* default style in theme.json, only rounded all the way.
*/
:root {
  --jcore-button-primary-bg: var(--wp--preset--gradient--royalblue-to-cyan);
  --jcore-button-primary-text-color: var(--wp--preset--color--dark);
  --jcore-button-primary-font-size: 0.9375rem;
  --jcore-button-primary-padding: 0.9375rem 1.75rem;
  --jcore-button-primary-radius: 999px;
  --jcore-button-primary-shadow: 0 12px 28px
  	color-mix(in srgb, var(--wp--preset--color--royalblue) 32%, transparent);
  --jcore-button-primary-shadow-hover: 0 14px 32px
  	color-mix(in srgb, var(--wp--preset--color--royalblue) 45%, transparent);
}

.btn-primary:not(.menu-item) {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 0.5rem;
  /* The nav's own `.menu-link-0` is the full height of the bar, which on a
     999px radius turns the button into a lozenge - the pill sizes itself
     from its padding instead. */
  height: auto;
  padding: var(--jcore-button-primary-padding);
  border: 0;
  border-radius: var(--jcore-button-primary-radius);
  background: var(--jcore-button-primary-bg);
  box-shadow: var(--jcore-button-primary-shadow);
  color: var(--jcore-button-primary-text-color);
  font-size: var(--jcore-button-primary-font-size);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  text-wrap: nowrap;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}
.btn-primary:not(.menu-item):hover {
  color: var(--jcore-button-primary-text-color);
  box-shadow: var(--jcore-button-primary-shadow-hover);
  transform: translateY(-2px);
}
.btn-primary:not(.menu-item):active {
  transform: translateY(0);
}
.btn-primary:not(.menu-item):focus-visible {
  outline: 2px solid var(--wp--preset--color--cyan);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary {
    transition: none;
  }
  .btn-primary:hover {
    transform: none;
  }
}
/*
 * "Snippet" code style: one short line of code - an embed tag, say - set
 * in a small dark chip with a code mark in front, rather than as a full
 * code listing. Wraps rather than scrolls, as a chip has no room for a
 * scrollbar.
 */
.wp-block-code.is-style-snippet {
  display: flex;
  width: fit-content;
  max-width: 100%;
  box-sizing: border-box;
  align-items: center;
  gap: 0.625rem;
  margin-block: 0;
  padding: 0.625rem 0.875rem;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 11%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--wp--preset--color--dark) 70%, transparent);
  color: var(--wp--preset--color--lightblue);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.5;
}
.wp-block-code.is-style-snippet::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: var(--wp--preset--color--teal);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 18l6-6-6-6M8 6l-6 6 6 6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.wp-block-code.is-style-snippet code {
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/*
 * Inline code in running text - a shortcode or an option name in a FAQ
 * answer, marked with the editor's "Inline code" format: a monospace chip
 * on a faint white wash, a notch smaller than the text around it.
 */
:is(p, li) code {
  padding: 1px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--wp--preset--color--white) 7%, transparent);
  color: color-mix(in srgb, var(--wp--preset--color--white) 90%, var(--wp--preset--color--lilyblue));
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9em;
  font-weight: 500;
}

/*
 * "Card" group style: the faint glass panel the marketing sections set their
 * content on - an icon badge, a heading and a few paragraphs or a list.
 *
 * The children are stacked with one gap instead of their own margins, so the
 * theme's heading and paragraph spacing does not open up a card built from
 * plain core blocks. A card in a jcore/grid stretches to the row's height, so
 * the panels in a row line up whatever their text does.
 */
.wp-block-group.is-style-card {
  display: flex;
  box-sizing: border-box;
  height: 100%;
  flex-direction: column;
  gap: 0.875rem;
  margin-block: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.125rem, 2.5vw, 1.625rem);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 8%, transparent);
  border-radius: 16px;
  /* A background picked in the sidebar arrives as a `has-…-background-color`
     class, which would lose to this rule - so only tint when none is set. */
}
.wp-block-group.is-style-card:not(.has-background) {
  background: color-mix(in srgb, var(--wp--preset--color--white) 3%, transparent);
}
.wp-block-group.is-style-card > * {
  margin-block: 0;
}
.wp-block-group.is-style-card {
  /* The icon badge sits at its own size, not stretched across the card. */
}
.wp-block-group.is-style-card > .wp-block-font-awesome-icon {
  align-self: flex-start;
}
.wp-block-group.is-style-card.has-text-align-center > .wp-block-font-awesome-icon {
  align-self: center;
}
.wp-block-group.is-style-card > .wp-block-heading:not(.has-text-color) {
  color: var(--wp--preset--color--white);
}
.wp-block-group.is-style-card > h3 {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.wp-block-group.is-style-card > h4,
.wp-block-group.is-style-card > h5,
.wp-block-group.is-style-card > h6 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}
.wp-block-group.is-style-card > p {
  font-size: var(--wp--preset--font-size--mini);
  line-height: 1.65;
}
.wp-block-group.is-style-card > p:not(.has-text-color) {
  color: var(--wp--preset--color--greyblue);
}
.wp-block-group.is-style-card > .wp-block-list {
  display: flex;
  flex-direction: column;
  gap: 0.5625rem;
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--mini);
}
.wp-block-group.is-style-card > .wp-block-list li {
  margin-bottom: 0;
}
.wp-block-group.is-style-card > .wp-block-table {
  margin: 0;
}

/*
 * "Stacked screenshots" group style: two image blocks overlapping on a
 * fixed-height stage - the first at the top left, the second lifted over its
 * lower right corner with a blue edge, so it reads as the detail. Below the
 * "sm" breakpoint they simply stack.
 */
.wp-block-group.is-style-stacked-shots {
  position: relative;
  width: 100%;
  max-width: 520px;
  height: 430px;
  margin-inline: auto;
}
.wp-block-group.is-style-stacked-shots > .wp-block-image {
  position: absolute;
  margin: 0;
}
.wp-block-group.is-style-stacked-shots > .wp-block-image img {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 12%, transparent);
  border-radius: 14px;
  box-shadow: 0 30px 60px color-mix(in srgb, var(--wp--preset--color--black) 45%, transparent);
  object-fit: cover;
}
.wp-block-group.is-style-stacked-shots > .wp-block-image:first-child {
  top: 0;
  left: 0;
  width: 73%;
  height: 60%;
}
.wp-block-group.is-style-stacked-shots > .wp-block-image:nth-child(2) {
  right: 0;
  bottom: 0;
  width: 62%;
  height: 51%;
}
.wp-block-group.is-style-stacked-shots > .wp-block-image:nth-child(2) img {
  border-color: var(--wp--preset--color--royalblue);
}

@media (max-width: 575px) {
  .wp-block-group.is-style-stacked-shots {
    display: flex;
    height: auto;
    flex-direction: column;
    gap: 12px;
  }
  .wp-block-group.is-style-stacked-shots > .wp-block-image {
    position: static;
    width: auto !important;
    height: auto !important;
  }
}
/*
 * "Screenshot with detail" group style: a wide screenshot at its natural
 * size, with a second, smaller one lifted over its right edge - the detail
 * that goes with it - on a soft blue glow. Below the "lg" breakpoint the
 * detail is left out and the main shot stands alone.
 */
.wp-block-group.is-style-shot-detail {
  position: relative;
  isolation: isolate;
}
.wp-block-group.is-style-shot-detail::before {
  position: absolute;
  z-index: -1;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--wp--preset--color--royalblue) 28%, transparent), color-mix(in srgb, var(--wp--preset--color--cyan) 8%, transparent) 45%, transparent 70%);
  content: "";
  filter: blur(30px);
  pointer-events: none;
}
.wp-block-group.is-style-shot-detail > .wp-block-image {
  margin: 0;
}
.wp-block-group.is-style-shot-detail > .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border-radius: 16px;
  box-shadow: 0 40px 80px -30px color-mix(in srgb, var(--wp--preset--color--black) 85%, transparent), 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--white) 8%, transparent);
}
.wp-block-group.is-style-shot-detail > .wp-block-image:nth-child(2) {
  position: absolute;
  z-index: 2;
  top: 52%;
  right: -24px;
  width: 34%;
}
.wp-block-group.is-style-shot-detail > .wp-block-image:nth-child(2) img {
  border-radius: 18px;
}

@media (max-width: 1023px) {
  .wp-block-group.is-style-shot-detail > .wp-block-image:nth-child(2) {
    display: none;
  }
}
/*
 * A hairline between full-width sections: where one full-width section
 * follows another, the second is drawn with a faint line along its top, so
 * sections on the same dark background still read as separate. A section
 * given the "Joined" style carries on from the one above without it. Only
 * sections count - a `div` group between two of them (holding a faded
 * separator, say) breaks the pair, so neither side gets a line.
 */
:is(section.wp-block-group, section.wp-block-cover).alignfull + section.wp-block-group.alignfull:not(.is-style-joined) {
  border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 7%, transparent);
}

/*
 * The "Grid lines" style: a faint 48px line grid behind the section's
 * content, masked to an ellipse around its top centre so it fades out
 * before any edge. It is a pseudo-element under the content, so the
 * section's own background - a glow gradient, say - still shows through.
 */
.wp-block-group.is-style-grid-lines {
  position: relative;
  isolation: isolate;
}
.wp-block-group.is-style-grid-lines::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--wp--preset--color--white) 3.5%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--white) 3.5%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  content: "";
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 80%);
  pointer-events: none;
}

/*
 * The "Toast" style: a small frosted notification - its first paragraph an
 * emoji on a warm tile, the next the message, bold, with a muted second
 * line after a line break ("Let's plan your calendar / Tell us your idea").
 *
 * Right after a "Faded edges" image in the same group, it floats over the
 * photo's lower left: the group becomes the positioning box for it, sized
 * to the photo and pushed to the column's far side.
 */
.wp-block-group.is-style-toast {
  display: flex;
  box-sizing: border-box;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 12px;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 14%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--wp--preset--color--darkestblue) 82%, transparent);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.85);
  color: var(--wp--preset--color--white);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.wp-block-group.is-style-toast > * {
  margin: 0;
}
.wp-block-group.is-style-toast > p:first-child {
  display: flex;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--amber) 25%, transparent), color-mix(in srgb, var(--wp--preset--color--coral) 20%, transparent));
  font-size: 19px;
  line-height: 1;
}
.wp-block-group.is-style-toast > p:not(:first-child) {
  color: var(--wp--preset--color--greyblue);
  font-size: 0.75rem;
  line-height: 1.45;
}
.wp-block-group.is-style-toast > p:not(:first-child) strong {
  color: var(--wp--preset--color--white);
  font-size: 0.84375rem;
}

.wp-block-group:has(> .wp-block-image.is-style-faded + .wp-block-group.is-style-toast) {
  position: relative;
  max-width: 560px;
  margin-inline: auto 0;
}
.wp-block-group:has(> .wp-block-image.is-style-faded + .wp-block-group.is-style-toast) > .wp-block-group.is-style-toast {
  position: absolute;
  bottom: 8%;
  left: 2%;
  z-index: 1;
  margin: 0;
}

/*
 * The "Overlap" style: two illustrations in one stack, the second pulled
 * up over the lower part of the first and out past its left edge, a size
 * smaller and on top - the Toaster wizard in front of the flow editor it
 * builds. Below the "lg" breakpoint it only overlaps a little, and not
 * sideways, so nothing hangs out of the column.
 */
.wp-block-group.is-style-overlap {
  position: relative;
}
.wp-block-group.is-style-overlap > * {
  margin-block: 0;
}
.wp-block-group.is-style-overlap > :nth-child(2) {
  position: relative;
  z-index: 2;
  width: 88%;
  margin: -150px 0 0 -48px;
  filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55));
}

@media (max-width: 1023px) {
  .wp-block-group.is-style-overlap > :nth-child(2) {
    width: 100%;
    margin: -80px 0 0;
  }
}
/* "Chip" paragraph style: a short label in a pill, sized to its text. The
   fill and the text share one colour - purple unless one is picked in the
   sidebar - so the chip recolours from the paragraph's own colour control. */
p.is-style-chip {
  display: inline-block;
  align-self: flex-start;
  margin-block: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 16%, transparent);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.4;
}
p.is-style-chip:not(.has-text-color) {
  color: var(--wp--preset--color--purple);
}

/* "Badge" paragraph style: the eyebrow over a hero headline, in an outlined
   pill behind a small royal-blue dot. The text colour control recolours the
   label; the dot stays blue. */
p.is-style-badge,
p.is-style-badge-festive {
  display: inline-flex;
  box-sizing: border-box;
  max-width: 100%;
  align-items: center;
  align-self: flex-start;
  gap: 9px;
  padding: 8px 18px;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 12%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--wp--preset--color--white) 3%, transparent);
  font-size: 0.71875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}
p.is-style-badge:not(.has-text-color),
p.is-style-badge-festive:not(.has-text-color) {
  color: var(--wp--preset--color--greyblue);
}
p.is-style-badge::before,
p.is-style-badge-festive::before {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--wp--preset--color--royalblue);
  content: "";
}

/* "Badge (festive)": the same pill in the seasonal colours - a glowing
   amber dot, a gold outline and pale gold text. */
p.is-style-badge-festive {
  border-color: color-mix(in srgb, var(--wp--preset--color--amber) 35%, transparent);
}
p.is-style-badge-festive:not(.has-text-color) {
  color: color-mix(in srgb, var(--wp--preset--color--amber) 55%, var(--wp--preset--color--white));
}
p.is-style-badge-festive::before {
  background: var(--wp--preset--color--amber);
  box-shadow: 0 0 12px var(--wp--preset--color--amber);
}

/**
*
*Search in nav that opens search-field 
*AND 
*styles the Gutenberg search-block like Ilme search field. 
*
*/
.toggle-search .fa-search {
  color: var(--wp--preset--color--white);
}

.searchbar-container {
  display: none;
}

.searchbar-container.toggle {
  display: block;
  background-color: var(--wp--preset--color--dark);
}

.searchform, .wp-block-search {
  margin-bottom: 6px;
  margin-top: 6px;
}
.searchform input, .wp-block-search input {
  appearance: none;
  border: 1px solid var(--jcore-button-bg-color);
  flex-grow: 1;
  margin-left: 0;
  margin-right: 0;
  min-width: 3rem;
  padding: 0.45rem 1rem;
  text-decoration: unset !important;
  font-size: var(--jcore-button-font-size);
  margin-bottom: 8px;
  margin-right: 6px;
}
.searchform .wp-block-search__button, .searchform .btn[type=submit], .wp-block-search .wp-block-search__button, .wp-block-search .btn[type=submit] {
  padding: calc(0.45rem + 1px) calc(1rem + 1px);
  font-size: var(--jcore-button-font-size);
  margin-left: 0;
  margin-bottom: 8px;
  background-color: var(--jcore-button-bg-color);
  color: var(--jcore-button-text-color);
}
.searchform .wp-block-search__inside-wrapper, .wp-block-search .wp-block-search__inside-wrapper {
  margin-top: 6px;
  display: flex;
}

/*
* Gutenberg block Details styling as accordion
*
*
*/
/* PDF and CAD special styles, then basics */
details.wp-block-details.pdf summary::marker {
  content: "\f1c1  ";
  font-family: "Font Awesome 6 Sharp";
  font-weight: 300;
  color: var(--wp--preset--color--brand);
}

details.wp-block-details.cad summary::marker {
  content: "\e672  ";
  font-family: "Font Awesome 6 Sharp";
  font-weight: 300;
  color: var(--wp--preset--color--brand);
}

/*
*
* General Details styles Background-color, color, border-radius and shadow can be set in theme.jason, but chose to put it all here instead.
*
*/
details.wp-block-details {
  margin-bottom: 1rem;
  border-radius: 0;
}
details.wp-block-details summary {
  box-sizing: border-box;
  padding: 1rem 2rem 1rem 1rem;
  font-family: var(--jcore-heading-font-family);
  font-size: var(--wp--preset--font-size--heading-5);
  background-color: var(--wp--preset--color--dark);
  font-weight: 400;
  position: relative;
  border-bottom: 1px solid var(--wp--preset--color--light);
}
details.wp-block-details summary + * {
  margin-top: 1rem;
}
details.wp-block-details summary::marker {
  content: none;
}

/* Add a custom transition when opening/closing. -It only "takes" on the padding- */
.wp-block-details {
  transition: all 0.5s ease-in-out;
}

/* Add horizontal margin to nested blocks/elements. */
.wp-block-details > :where(:not(summary)) {
  margin-left: 1rem;
  margin-right: 1rem;
}

/* If open, add some bottom padding to avoid content butting against the bottom. */
.wp-block-details[open] {
  padding-bottom: 1rem;
}

/* Change the background of the `summary` element based on state. */
.wp-block-details[open] summary,
.wp-block-details summary:hover,
.wp-block-details summary:focus {
  background: var(--wp--preset--color--dark);
}

.wp-block-details summary::after {
  content: "\f078  ";
  position: absolute;
  font-family: "Font Awesome 6 Sharp";
  top: 50%;
  right: 0;
  width: 44px;
  height: 44px;
  background: var(--wp--preset--color--dark);
  border-radius: 999px;
  text-align: center;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--wp--preset--font-size--mini);
}

.wp-block-details[open] summary::after {
  content: "\f077  ";
}

/* Wrapper to show videos embedded with Gutenberg responsively Works out of the box for YouTube videos. Add videowrapper class to work with any embedded iframe */
.wp-block-embed-youtube .wp-block-embed__wrapper,
.videowrapper .wp-block-embed__wrapper {
  aspect-ratio: 16/9;
}
.wp-block-embed-youtube .wp-block-embed__wrapper iframe,
.videowrapper .wp-block-embed__wrapper iframe {
  width: 100%;
  height: 100%;
}

/*FILE block*/
.wp-block-file {
  position: relative;
}

.wp-block-file a:hover {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.wp-block-file a.wp-block-file__button {
  border-radius: 0;
  background-color: var(--wp--preset--color--brand);
  font-size: var(--wp--preset--font-size--mini);
  text-transform: uppercase;
  position: relative;
  padding: 0.45rem 2rem 0.45rem 2.5rem;
  color: var(--wp--preset--color--white);
  margin-left: 0;
  width: -moz-max-content;
  width: max-content;
}

.wp-block-file a.wp-block-file__button:hover {
  opacity: 1;
}

.wp-block-file a.wp-block-file__button:before {
  content: "\f019";
  font-family: "Font Awesome 6 Sharp";
  font-weight: 600;
  position: absolute;
  left: 8px;
  font-size: 16px;
  color: var(--wp--preset--color--white);
  top: 5px;
}

/* Media and images */
.wp-block-image.alignleft {
  float: left;
}
.wp-block-image.alignright {
  float: right;
}
.wp-block-image.aligncenter {
  margin-left: auto;
  margin-right: auto;
}
.wp-block-image {
  border-radius: 0;
}
.wp-block-image img {
  border-radius: 0;
}
.wp-block-image img.no-radius {
  border-radius: 0;
}

.wp-block-cover:not(.no-radius) .wp-block-cover__image-background {
  border-radius: 0;
}

/*Lightbox enabled, but no icon on the image on hover.*/
figure button.lightbox-trigger {
  display: none;
}

/*
* A class for zooming images on hover *
*/
.img-hover-zoom {
  overflow: hidden;
}

.img-hover-zoom img {
  transition: transform 0.5s ease;
  filter: brightness(90%);
}

.img-hover-zoom:hover img {
  transform: scale(1.1);
  filter: brightness(100%);
}

/*
* A class for zooming images on hover with brightness reversed compared to normal image-zoom *
*/
.img-hover-zoom-reverse {
  overflow: hidden;
}

.img-hover-zoom-reverse img {
  transition: transform 0.5s ease;
  filter: brightness(100%);
}

.img-hover-zoom-reverse:hover img {
  transform: scale(1.1);
  filter: brightness(85%);
}

/* Gallery */
.blocks-gallery-grid figure.wp-block-image figcaption,
.wp-block-gallery figure.wp-block-image figcaption {
  padding: 1em 0.7em 0.77em;
  font-weight: 300;
  font-size: 16px !important;
}

/*
 * "Screenshot" image style: a product screenshot lifted off the dark page - a
 * rounded frame, a hairline edge and a long soft shadow under it.
 */
.wp-block-image.is-style-screenshot img {
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent);
  border-radius: 18px;
  box-shadow: 0 40px 90px color-mix(in srgb, var(--wp--preset--color--black) 35%, transparent);
}
.wp-block-image.is-style-screenshot figcaption {
  color: var(--wp--preset--color--slateblue);
  font-size: 0.8125rem;
  text-align: center;
}

/*
 * "Faded edges" image style: a portrait without a frame, its edges fading
 * into the section behind it - hard on neither side, softest at the bottom.
 * Two masks crossed: one across, one down.
 */
.wp-block-image.is-style-faded {
  max-width: 560px;
  margin: 0 0 0 auto;
}
.wp-block-image.is-style-faded img {
  display: block;
  width: 100%;
  aspect-ratio: 1/1.05;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 68%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 28%, #000 82%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%, #000 68%, transparent 100%);
  mask-composite: intersect;
}

/* Gutenberg media and text block */
.wp-block-media-text .wp-block-media-text__content {
  /* remove the default 7% horizontal padding */
  padding: 0;
}

/* Gutenberg pullquote and blockquote -nothing set int theme.json*/
blockquote.wp-block-quote {
  margin-bottom: 2rem;
}

/* Pullquote */
.wp-block-pullquote {
  margin-bottom: 2rem;
  padding: 0;
}
.wp-block-pullquote blockquote {
  border: none;
  margin-left: 5rem;
}
.wp-block-pullquote blockquote p {
  font-family: var(--jcore-heading-font-family);
  font-size: var(--wp--preset--font-size--heading-3);
  font-style: normal;
  text-align: left;
  font-weight: 300;
  margin-bottom: 2rem;
  line-height: 1.3;
}
.wp-block-pullquote blockquote p:first-of-type:before {
  color: var(--wp--preset--color--brand);
  content: url("../../assets/images/quote-icon.svg");
  position: absolute;
  left: -4.5rem;
  top: 0.25rem;
}
.wp-block-pullquote blockquote p:last-of-type:after {
  content: "";
}
.wp-block-pullquote blockquote cite {
  font-family: var(--jcore-heading-font-family);
  font-style: normal !important;
  font-size: var(--wp--preset--font-size--mini);
  color: var(--wp--preset--color--green);
  text-align: left;
}
.wp-block-pullquote blockquote > * {
  position: relative;
}

/* RSS Feed block */
ul.wp-block-rss {
  list-style: none;
}

.wp-block-rss .wp-block-rss__item {
  background-color: var(--wp--preset--color--light);
  margin-bottom: 0;
  min-height: 150px;
  padding: 1rem;
}

.wp-block-rss .wp-block-rss__item a {
  color: var(--wp--preset--color--brand);
  font-size: var(--wp--preset--font-size--heading-4);
  margin-bottom: 0.75rem;
  text-decoration: none;
}
.wp-block-rss .wp-block-rss__item a::after {
  content: "  \f09e";
  font-family: "Font Awesome 6 Sharp";
  font-weight: 400;
}
.wp-block-rss .wp-block-rss__item a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: from-font;
}

.wp-block-rss .wp-block-rss__item .wp-block-rss__item-publish-date {
  font-weight: bold;
  margin: 0.75rem 0;
  font-size: var(--wp--preset--font-size--mini);
}

.wp-block-rss .wp-block-rss__item:nth-of-type(2n + 1) {
  background-color: var(--wp--preset--color--light);
}

/*WP Block Table, style-variation: stripes */
.wp-block-table.is-style-stripes tbody tr:nth-child(2n+1) {
  background-color: var(--wp--preset--color--white);
}

.wp-block-table.is-style-stripes tbody tr {
  background-color: var(--wp--preset--color--light);
}

.wp-block-table thead {
  border-bottom: none;
}

/*
 * "Matrix" table style: a quiet two- or three-column reference table on the
 * dark sections - a small uppercase header row, a bold white first column
 * naming the thing, muted text explaining it, and hairlines between rows.
 * Meant to sit in a "Card" group, which draws the panel around it.
 *
 * Column alignment and links are the table block's own: right-align a
 * column from the toolbar, and a link in any cell picks up the accent.
 *
 * Below 640px the header row is dropped and each row becomes a stacked
 * entry, so a long explanation never forces the page to scroll sideways.
 */
.wp-block-table.is-style-matrix {
  margin: 0;
  color: var(--wp--preset--color--greyblue);
}
.wp-block-table.is-style-matrix table {
  width: 100%;
  border-collapse: collapse;
  /* New tables default to a fixed layout, which splits the columns
     evenly - the name column wants only what it needs. */
  table-layout: auto;
}
.wp-block-table.is-style-matrix thead {
  border-bottom: 0;
}
.wp-block-table.is-style-matrix th,
.wp-block-table.is-style-matrix td {
  border: 0;
  vertical-align: top;
}
.wp-block-table.is-style-matrix th {
  padding: 0 1rem 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent);
  background: none;
  color: var(--wp--preset--color--slateblue);
  font-size: 0.71875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}
.wp-block-table.is-style-matrix td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 6%, transparent);
  font-size: 0.84375rem;
  line-height: 1.55;
}
.wp-block-table.is-style-matrix td:first-child {
  width: 28%;
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--mini);
  font-weight: 700;
  line-height: 1.4;
}
.wp-block-table.is-style-matrix tbody tr:last-child td {
  border-bottom: 0;
}
.wp-block-table.is-style-matrix td a {
  color: var(--wp--preset--color--cyan);
  font-weight: 700;
  text-decoration: none;
}
.wp-block-table.is-style-matrix td a:hover {
  color: var(--wp--preset--color--lightblue);
}
.wp-block-table.is-style-matrix {
  /* The table block's alignment classes go on the cells; the header row
     follows the column rather than staying left. */
}
.wp-block-table.is-style-matrix th.has-text-align-right {
  text-align: right;
}
.wp-block-table.is-style-matrix th.has-text-align-center {
  text-align: center;
}
.wp-block-table.is-style-matrix figcaption {
  margin-top: 0.75rem;
  color: var(--wp--preset--color--slateblue);
  font-size: 0.75rem;
}
@media (max-width: 640px) {
  .wp-block-table.is-style-matrix thead {
    display: none;
  }
  .wp-block-table.is-style-matrix tr {
    display: block;
    padding: 0.75rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 6%, transparent);
  }
  .wp-block-table.is-style-matrix tbody tr:last-child {
    border-bottom: 0;
  }
  .wp-block-table.is-style-matrix td,
  .wp-block-table.is-style-matrix td:first-child {
    display: block;
    width: 100%;
    padding: 0.125rem 0;
    border-bottom: 0;
    text-align: left;
  }
  .wp-block-table.is-style-matrix td:first-child {
    padding-bottom: 0.25rem;
  }
}

/* 
* YOAST Breadcrumbs block styling on differnet backgrounds
*
*/
.wave .yoast-breadcrumbs {
  color: var(--wp--preset--color--white);
}
.wave .yoast-breadcrumbs span {
  font-size: 12px;
  text-transform: uppercase;
}
.wave .yoast-breadcrumbs a {
  color: var(--wp--preset--color--white);
}

.yoast-breadcrumbs span {
  font-size: 12px;
  text-transform: uppercase;
}
.yoast-breadcrumbs .breadcrumb_last {
  color: var(--wp--preset--color--light);
}
.yoast-breadcrumbs a {
  color: var(--wp--preset--color--black);
}

ul.wp-block-list,
ol.wp-block-list {
  padding-left: 1.5rem;
  margin-bottom: 2rem;
}
ul.wp-block-list li,
ol.wp-block-list li {
  padding-left: 0.25rem;
  margin-bottom: 0.75rem;
}
ul.wp-block-list li > ul,
ul.wp-block-list li > ol,
ol.wp-block-list li > ul,
ol.wp-block-list li > ol {
  margin-bottom: 0 !important;
}
ul.wp-block-list li::marker,
ol.wp-block-list li::marker {
  color: var(--wp--preset--color--white);
}

ul.wp-block-list:not(.wp-block-rss, .arrow-list, .is-style-check-list, .is-style-pills, .is-style-chips, .is-style-chain) li {
  padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
  list-style-type: none;
  position: relative;
}
ul.wp-block-list:not(.wp-block-rss, .arrow-list, .is-style-check-list, .is-style-pills, .is-style-chips, .is-style-chain) li:before {
  content: "";
  position: absolute;
  left: -20px;
  top: 8px;
  background-color: var(--wp--preset--color--white);
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
ul.wp-block-list:not(.wp-block-rss, .arrow-list, .is-style-check-list, .is-style-pills, .is-style-chips, .is-style-chain) li::marker {
  display: none;
}

/* Arrow-list with orange arrows instead of bullets */
ul.wp-block-list.arrow-list {
  padding-left: 0;
}
ul.wp-block-list.arrow-list li {
  position: relative;
  list-style-type: none;
  padding-left: 2rem !important;
}
ul.wp-block-list.arrow-list li:before {
  content: "\f178";
  font-family: "Font Awesome 6 Sharp";
  font-weight: 300;
  position: absolute;
  left: 0;
  font-size: 16px;
  color: var(--wp--preset--color--orange);
}
ul.wp-block-list.arrow-list li:hover {
  text-decoration: none;
}
ul.wp-block-list.arrow-list li:hover:before {
  transform: rotate(-45deg);
}
ul.wp-block-list.arrow-list li::marker {
  display: none !important;
}

/* Check-list: cyan checkmarks with bold near-white text, used for the short
   "what you get" lists in the marketing sections. Registered as a core/list
   block style, so it is picked per list in the editor. */
ul.wp-block-list.is-style-check-list {
  padding-left: 0;
}
ul.wp-block-list.is-style-check-list li {
  position: relative;
  list-style-type: none;
  padding-left: 1.625rem !important;
  margin-bottom: 0.625rem;
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--mini);
  font-weight: 600;
}
ul.wp-block-list.is-style-check-list li:before {
  content: "\f00c";
  font-family: "Font Awesome 6 Sharp";
  font-weight: 900;
  position: absolute;
  left: 0;
  /* Optically centres the glyph against the first text line rather than
     sitting on its baseline, which reads low next to bold copy. */
  top: 0.1em;
  font-size: 0.875rem;
  color: var(--wp--preset--color--cyan);
}
ul.wp-block-list.is-style-check-list li::marker {
  display: none !important;
}
ul.wp-block-list.is-style-check-list li:last-child {
  margin-bottom: 0;
}

/* Pills: each entry a small rounded chip with a dot, wrapping onto as many
   rows as it needs - the event and action tags in the automation flow.

   The accent tints the chip's fill, hairline and dot together. It follows
   `--pill-accent`, so a container such as lohko/flow-step can re-tint every
   list inside it without the editor having to pick a colour per list. */
ul.wp-block-list.is-style-pills {
  --pill-accent: var(--wp--preset--color--cyan);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding-left: 0;
}
ul.wp-block-list.is-style-pills li {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0.4375rem 0.8125rem !important;
  border: 1px solid color-mix(in srgb, var(--pill-accent) 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--pill-accent) 8%, transparent);
  color: var(--wp--preset--color--white);
  font-size: 0.78125rem;
  line-height: 1.3;
  list-style-type: none;
}
ul.wp-block-list.is-style-pills li::before {
  content: "";
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--pill-accent);
}
ul.wp-block-list.is-style-pills li::marker {
  display: none;
}

/* "Chips": larger, neutral pills behind a small gradient dot - the places an
   experience can be published (Website, WordPress, Standalone). */
ul.wp-block-list.is-style-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding-left: 0;
}
ul.wp-block-list.is-style-chips li {
  display: inline-flex;
  height: 40px;
  box-sizing: border-box;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 16px !important;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 12%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--wp--preset--color--white) 3%, transparent);
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--mini);
  font-weight: 600;
  list-style-type: none;
}
ul.wp-block-list.is-style-chips li::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--wp--preset--gradient--royalblue-to-cyan);
}
ul.wp-block-list.is-style-chips li::marker {
  display: none;
}

/* The current pill: an entry whose text is bold - the page's own experience
   type in a "one platform" list of them - is lit in blue, so it reads as
   "you are here". Bolding is the only mark a list item can carry, as
   core/list-item takes no class of its own. */
ul.wp-block-list.is-style-pills li:has(> strong) {
  --pill-accent: var(--wp--preset--color--royalblue);
  border-color: var(--pill-accent);
  background: color-mix(in srgb, var(--pill-accent) 18%, transparent);
}

/* A pill that is not needed: an entry whose text is struck through - the
   embed code and plugin a standalone page does without - is greyed back,
   with the line and the dot in coral. Striking through is the editor's own
   inline format, so no class is needed, as with the bold pill above. */
ul.wp-block-list.is-style-pills li:has(> s) {
  --pill-accent: var(--wp--preset--color--coral);
  border-color: color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent);
  background: transparent;
  color: var(--wp--preset--color--greyblue);
}
ul.wp-block-list.is-style-pills li:has(> s) s {
  text-decoration-color: var(--wp--preset--color--coral);
}

/* Pills in a group whose flex layout centres its content: the list itself is
   that group's one flex item, so the rows inside it have to be centred too,
   or a row that wraps falls back to the left edge. */
.is-content-justification-center > ul.wp-block-list.is-style-pills {
  justify-content: center;
}

/* Chain: the entries as a row of small panels with an arrow between each -
   the modules one experience is built from, read left to right. The last
   entry, or any entry set in bold, is lit in blue as where the chain ends
   up. Wraps onto as many rows as it needs; each arrow sits in the gap in
   front of its entry, so it travels with it. */
ul.wp-block-list.is-style-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem 2.25rem;
  margin: 0;
  padding-left: 0;
}
ul.wp-block-list.is-style-chain li {
  position: relative;
  margin: 0;
  padding: 0.625rem 0.875rem !important;
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--wp--preset--color--white) 3%, transparent);
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--mini);
  font-weight: 600;
  line-height: 1.3;
  list-style-type: none;
}
ul.wp-block-list.is-style-chain li::marker {
  display: none;
}
ul.wp-block-list.is-style-chain li + li::before {
  content: "→";
  position: absolute;
  top: 50%;
  right: calc(100% + 0.625rem);
  color: var(--wp--preset--color--royalblue);
  font-weight: 400;
  translate: 0 -50%;
}
ul.wp-block-list.is-style-chain li:last-child,
ul.wp-block-list.is-style-chain li:has(> strong) {
  border-color: var(--wp--preset--color--royalblue);
  background: color-mix(in srgb, var(--wp--preset--color--royalblue) 16%, transparent);
}

/* Spacer Block XL set to 16px or max mobile height in Gutenberg editor, has css style xl */
.wp-block-spacer.is-style-xl {
  padding-top: var(--wp--custom--spacing-sizes--xlarge);
}

/* Spacer Block LG -set to 16px or max mobile height in Gutenberg editor, has css style lg */
.wp-block-spacer.is-style-lg {
  padding-top: var(--wp--custom--spacing-sizes--large);
}

/* Spacer Block MD -set to 16px or max mobile height in Gutenberg editor, has css style md */
.wp-block-spacer.is-style-md {
  padding-top: var(--wp--custom--spacing-sizes--medium);
}

/* Spacer Block SM -set to 16px or max mobile height in Gutenberg editor, has css style sm */
.wp-block-spacer.is-style-sm {
  padding-top: var(--wp--custom--spacing-sizes--small);
}

#ez-toc-container {
  width: var(--wp--style--global--content-size);
  padding: 2rem;
}
#ez-toc-container.ez-toc-counter nav ul li a::before {
  color: var(--wp--preset--color--white) !important;
}

/*# sourceMappingURL=theme.css.map */