/* ==========================================================================
   KSM Theme 01 - GD
   Colours come only from the Site Settings variables:
   --primary --secondary --accent --light --header-left-bg --header-right-bg
   ========================================================================== */

:root {
  --ksm-gd-bar-h: max(7rem, calc(var(--ksm-gd-logo-h-d, 0px) + 1.6rem)); /* follows the Site Settings logo height */
  --ksm-gd-radius: 1.6rem;
  --ksm-gd-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.12);
  --ksm-gd-line: color-mix(in srgb, var(--secondary) 14%, var(--light));
  --ksm-gd-tint: color-mix(in srgb, var(--primary) 8%, var(--light));
  --ksm-gd-tint-2: color-mix(in srgb, var(--accent) 9%, var(--light));
  --ksm-gd-max: 124rem;
  --ksm-gd-gap: 1rem;
  --ksm-gd-compact-h: 6rem; /* height of the compact header bar (desktop, slides in after the main header scrolls away) */
  --ksm-gd-sticky-gap: 1.6rem; /* breathing space under whatever is stuck at the top */
}

/* Offset for the sticky sidebar on desktop: the compact bar height + gap when the parent's sticky navigation is on (body.ksm-sticky-nav), else only the gap. */
body { --ksm-gd-sidebar-top: var(--ksm-gd-sticky-gap); }
body.ksm-sticky-nav { --ksm-gd-sidebar-top: calc(var(--ksm-gd-compact-h) + var(--ksm-gd-sticky-gap)); }

html { scroll-padding-top: calc(var(--ksm-gd-bar-h) + 3rem); }

body.ksm-gd { color: var(--secondary); background: var(--light); line-height: 1.7; }
body.ksm-gd h1, body.ksm-gd h2, body.ksm-gd h3, body.ksm-gd h4 { line-height: 1.2; }

/* Utilities carried over from the parent header stylesheet (not loaded here). */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
  overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;
}
.skip-link:focus {
  clip: auto; clip-path: none; height: auto; width: auto; margin: 0; padding: 1rem 1.6rem;
  top: 0.8rem; left: 0.8rem; z-index: 100000; background: var(--light); color: var(--secondary);
  outline: 0.3rem solid var(--primary);
}
.pl1 { fill: var(--primary); }
.header-widget { display: block; }
.footer-widget p { margin: 0 0 1rem; }
body.ksm-gd :focus-visible { outline: 0.3rem solid var(--accent); outline-offset: 0.2rem; }

/* ---------- Floating frosted header ---------- */
.ksm-gd-header {
  position: sticky;
  top: var(--ksm-gd-gap);
  z-index: 1000;
  max-width: calc(var(--ksm-gd-max) + 4rem);
  margin: var(--ksm-gd-gap) auto 0;
  border-radius: var(--ksm-gd-radius);
  background: var(--light); /* solid fallback */
  border: 1px solid var(--ksm-gd-line);
  box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.1);
  width: calc(100% - 2.4rem);
}

/* The blur lives on a pseudo-element so it does not become the containing block of the fixed menu overlay. */
.ksm-gd-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ksm-gd-header { background: transparent; }
  .ksm-gd-header::before {
    background: color-mix(in srgb, var(--light) 74%, transparent);
    -webkit-backdrop-filter: blur(1.4rem) saturate(170%);
    backdrop-filter: blur(1.4rem) saturate(170%);
  }
}

body.admin-bar .ksm-gd-header { top: calc(32px + var(--ksm-gd-gap)); }
@media (max-width: 782px) { body.admin-bar .ksm-gd-header { top: calc(46px + var(--ksm-gd-gap)); } }
@media (max-width: 600px) { body.admin-bar .ksm-gd-header { top: var(--ksm-gd-gap); } }

/* Slim strip inside the header (widget area and banner text). Hidden by CSS only; markup always renders. */
.ksm-gd-strip { font-size: 1.2rem; border-bottom: 1px solid var(--ksm-gd-line); }
.ksm-gd-strip__inner { padding: 0.5rem 2.4rem; display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.ksm-gd-strip a { color: var(--primary); }
.ksm-gd-strip .header-widget { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; align-items: baseline; }
.ksm-gd-strip .header-widget h3, .ksm-gd-strip .header-widget p { margin: 0; font-size: inherit; font-weight: 400; color: inherit; }
.ksm-gd-strip .header-widget h3 { font-weight: 600; }
.ksm-gd-strip__banner {
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap;
  padding: 0.2rem 1.2rem; border-radius: 10rem; background: var(--accent); color: var(--light);
}

.ksm-gd-bar { padding: 0 2.4rem; min-height: var(--ksm-gd-bar-h); display: flex; align-items: center; gap: 2rem; }
.ksm-gd-logo { flex: 0 0 auto; padding: 0.8rem 0; }
.ksm-gd-logo .site-logo-link { display: flex; flex-direction: row; align-items: center; gap: 1.2rem; text-decoration: none; }
.ksm-gd-logo .site-logo-link:hover { opacity: 0.85; }
.ksm-gd-logo .site-logo-svg { display: flex; align-items: center; }
/* Logo sizes come straight from Site Settings (parent vars, in px); fallbacks are the parent defaults. max-width: 100% stops overflow. */
.ksm-gd-logo .site-logo-svg img {
  width: auto; height: auto;
  max-width: min(100%, var(--ksm-brand-img-w-desktop, 200px));
  max-height: var(--ksm-brand-img-h-desktop, 80px);
  object-fit: contain;
}
.ksm-gd-logo .site-logo-svg svg { width: auto; height: var(--ksm-svg-h-desktop, 80px); max-width: min(100%, var(--ksm-svg-w-desktop, 200px)); }
.ksm-gd-logo img.ksm-logo-image {
  width: auto; height: auto;
  max-width: min(100%, var(--ksm-logo-img-w-desktop, 220px));
  max-height: var(--ksm-logo-img-h-desktop, 120px);
  object-fit: contain;
}
/* An SVG logo file (img) has no fixed pixel size of its own: set it to the chosen height. */
.ksm-gd-logo .site-logo-svg img[src$=".svg"] { height: var(--ksm-brand-img-h-desktop, 80px); }
.ksm-gd-logo img.ksm-logo-image[src$=".svg"] { height: var(--ksm-logo-img-h-desktop, 120px); }
.ksm-gd-logo .site-logo-title {
  font-family: var(--ksm-gd-font-head);
  font-size: clamp(1.7rem, calc(var(--ksm-title-size-desktop, 2.6rem) * 0.5 + 0.7vw), min(var(--ksm-title-size-desktop, 2.6rem), 2.6rem));
  font-weight: 700; line-height: 1.1;
  text-transform: var(--ksm-title-transform, uppercase);
  letter-spacing: var(--ksm-title-spacing, 0.5px);
  text-align: left;
}
.ksm-gd-logo .site-title-first { color: var(--primary); font-weight: var(--ksm-title-first-weight, inherit); }
.ksm-gd-logo .site-title-rest { color: var(--accent); font-weight: var(--ksm-title-rest-weight, inherit); }

/* ---------- Buttons (pills) ---------- */
.ksm-gd-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 1rem; margin-left: auto; }

.ksm-gd-btn, .ksm-gd-btn:visited {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.8rem;
  padding: 1.1rem 2.2rem; border: 2px solid transparent; border-radius: 10rem;
  font-family: var(--ksm-gd-font-body); font-weight: 600; font-size: 1.5rem; line-height: 1.1;
  text-decoration: none; cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.ksm-gd-btn--call { background: var(--primary); color: var(--light); box-shadow: 0 0.4rem 1.4rem color-mix(in srgb, var(--primary) 40%, transparent); }
.ksm-gd-btn--call:hover { background: var(--accent); color: var(--light); transform: scale(1.04); }
.ksm-gd-btn--quote { background: transparent; color: var(--secondary); border-color: var(--ksm-gd-line); }
.ksm-gd-btn--quote:hover { border-color: var(--primary); color: var(--primary); background: var(--light); }
.ksm-gd-btn--ghost { background: color-mix(in srgb, var(--secondary) 78%, transparent); color: var(--light); border-color: color-mix(in srgb, var(--light) 70%, transparent); -webkit-backdrop-filter: blur(0.6rem); backdrop-filter: blur(0.6rem); }
.ksm-gd-btn--ghost:hover,
.ksm-gd-btn--ghost:focus-visible { background: var(--light); color: var(--secondary); border-color: var(--light); }

/* The parent's .text-link--white a { color: var(--light) !important } forces every hero link white, including these buttons: the ghost hover
   (light background) became white on white. Hero buttons set their own colour with the same !important at higher specificity. */
.ksm-gd-hero__text a.ksm-gd-btn--call,
.ksm-gd-hero__text a.ksm-gd-btn--call:hover,
.ksm-gd-hero__text a.ksm-gd-btn--call:focus-visible,
.ksm-gd-hero__text a.ksm-gd-btn--ghost { color: var(--light) !important; }
.ksm-gd-hero__text a.ksm-gd-btn--ghost:hover,
.ksm-gd-hero__text a.ksm-gd-btn--ghost:focus-visible { color: var(--secondary) !important; }
.ksm-gd-btn--call:focus-visible { background: var(--accent); color: var(--light); }
.ksm-gd-btn--quote:focus-visible { border-color: var(--primary); color: var(--primary); background: var(--light); }
.ksm-gd-hero a.ksm-gd-btn:focus-visible { outline: 0.3rem solid var(--light); outline-offset: 0.3rem; }
.ksm-gd-header .ksm-gd-btn { padding: 1rem 1.8rem; }

/* ---------- Desktop navigation (KSM Menu) ---------- */
.ksm-gd-nav { flex: 1 1 auto; min-width: 0; position: static; }

.ksm-gd-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

@media (min-width: 993px) {
  .ksm-gd-nav { align-self: stretch; display: flex; align-items: center; }

  .ksm-gd .ksm-gd-nav .ksm-navigation--desktop {
    display: flex; flex: 1 1 auto; align-items: center;
    position: static; width: auto; max-width: none; margin: 0; padding: 0; border-radius: 0;
    background: transparent !important;
    color: var(--secondary) !important;
    --ksm-font-hover-color: var(--primary) !important;
    --ksm-font-active-color: var(--primary) !important;
    --ksm-arrow-color: var(--primary) !important;
    --ksm-submenu-bg-color: var(--light) !important;
    --ksm-submenu-font-color: var(--secondary) !important;
    --ksm-submenu-font-hover-color: var(--primary) !important;
    --ksm-submenu-title-font-color: var(--secondary) !important;
    --ksm-submenu-excerpt-font-color: var(--secondary) !important;
  }

  .ksm-gd .ksm-gd-nav .ksm-menu { flex: 1 1 auto; justify-content: center; align-items: center; gap: 0.4rem; flex-wrap: nowrap; }
  .ksm-gd .ksm-gd-nav .ksm-menu__item { display: flex; align-items: center; }

  /* Pill-shaped links */
  .ksm-gd .ksm-gd-nav .ksm-menu__link {
    align-items: center; padding: 0.9rem 1.4rem; border-radius: 10rem;
    font-family: var(--ksm-gd-font-body); font-weight: 600; font-size: 1.5rem;
    text-transform: none !important; color: var(--secondary); border-top: 0;
    transition: color 0.2s ease, background-color 0.2s ease;
  }
  .ksm-gd .ksm-gd-nav .ksm-menu__link:hover,
  .ksm-gd .ksm-gd-nav .ksm-menu__item--hover > .ksm-menu__link { color: var(--primary); background: var(--ksm-gd-tint); }
  .ksm-gd .ksm-gd-nav .ksm-menu__item--current > .ksm-menu__link { color: var(--light); background: var(--primary); border-top: 0; }

  /* Chevron dropdown indicators replace the plugin triangle. */
  .ksm-gd .ksm-gd-nav .ksm-menu__item--has-children > .ksm-menu__link::before { display: none; }
  .ksm-gd .ksm-gd-nav .ksm-menu__item--has-children > .ksm-menu__link::after,
  .ksm-gd .ksm-gd-nav .ksm-menu__item--standard-dropdown.ksm-menu__item--has-children > .ksm-menu__link::after {
    content: ''; position: static; top: auto; left: auto;
    width: 0.8rem; height: 0.8rem; margin-left: 0.9rem;
    border: 0; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
    border-radius: 0 0 0.2rem 0;
    transform: rotate(45deg) translateY(-0.2rem);
    background: none; background-image: none; -webkit-mask: none; mask: none; filter: none;
    opacity: 0.85; transition: transform 0.25s ease;
  }
  .ksm-gd .ksm-gd-nav .ksm-menu__item--has-children:hover > .ksm-menu__link::after,
  .ksm-gd .ksm-gd-nav .ksm-menu__item--hover > .ksm-menu__link::after { transform: rotate(225deg) translateY(-0.1rem); opacity: 1; }

  /* Floating mega panel under the header, with a hover bridge across the gap. */
  .ksm-gd .ksm-gd-nav .ksm-mega-menu {
    left: 0; transform: none; width: 100%; max-width: none; top: calc(100% + 0.8rem);
    background: var(--light); color: var(--secondary);
    border: 1px solid var(--ksm-gd-line); border-radius: var(--ksm-gd-radius);
    box-shadow: var(--ksm-gd-shadow); padding: 2.4rem 0;
  }
  .ksm-gd .ksm-gd-nav .ksm-mega-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
  .ksm-gd .ksm-gd-nav .ksm-mega-menu__container { max-width: var(--ksm-gd-max); }
  .ksm-gd .ksm-gd-nav .ksm-mega-menu__link { border-radius: 1.2rem; }
  .ksm-gd .ksm-gd-nav .ksm-mega-menu__link:hover { background: var(--ksm-gd-tint); color: var(--primary); }
  .ksm-gd .ksm-gd-nav .ksm-mega-menu__excerpt { opacity: 1; color: var(--secondary); }
  .ksm-gd .ksm-gd-nav .ksm-standard-dropdown { background: var(--light); border: 1px solid var(--ksm-gd-line); border-radius: 1.2rem; top: calc(100% + 0.4rem); height: auto; box-shadow: var(--ksm-gd-shadow); }

  /* No-JS: open panels with hover or keyboard focus. The KSM Menu script takes over when JS runs. */
  body:not(.ksm-js-enabled) .ksm-gd-nav .ksm-menu__item--has-children:not(.ksm-menu__item--standard-dropdown):hover > .ksm-mega-menu,
  body:not(.ksm-js-enabled) .ksm-gd-nav .ksm-menu__item--has-children:not(.ksm-menu__item--standard-dropdown):focus-within > .ksm-mega-menu,
  body:not(.ksm-js-enabled) .ksm-gd-nav .ksm-menu__item--standard-dropdown.ksm-menu__item--has-children:hover > .ksm-standard-dropdown,
  body:not(.ksm-js-enabled) .ksm-gd-nav .ksm-menu__item--standard-dropdown.ksm-menu__item--has-children:focus-within > .ksm-standard-dropdown { display: block; }

  /* "Stacked columns" nested mega layout (Site Settings > Mega menu nested layout), moved from the parent header stylesheet. */
  body.ksm-mega-stacked .ksm-mega-menu:has(.ksm-mega-menu__item > .ksm-submenu) { max-height: calc(100vh - var(--ksm-gd-bar-h) - 10rem); overflow-y: auto; }
  body.ksm-mega-stacked .ksm-mega-menu__grid:has(.ksm-mega-menu__item > .ksm-submenu) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 4rem; align-items: start; }
  body.ksm-mega-stacked .ksm-mega-menu__item:has(> .ksm-submenu) { display: block; }
  body.ksm-mega-stacked .ksm-mega-menu__item:has(> .ksm-submenu) > .ksm-mega-menu__link { padding: 0.4rem 0 0.8rem; border-radius: 0; border-bottom: 2px solid var(--primary); transform: none; }
  body.ksm-mega-stacked .ksm-mega-menu__item:has(> .ksm-submenu) > .ksm-submenu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.2rem 2rem; margin: 1rem 0 0; }
  body.ksm-mega-stacked .ksm-mega-menu__item:has(> .ksm-submenu) .ksm-submenu__link { padding: 0.5rem 0.8rem; font-size: 1.4rem; }
}

@media (min-width: 993px) and (max-width: 1279px) {
  .ksm-gd-btn--quote { display: none; }
  .ksm-gd .ksm-gd-nav .ksm-menu__link { padding: 0.8rem 0.9rem; font-size: 1.4rem; }
}

/* ---------- Mobile: hamburger and drop-down card ---------- */
.ksm-gd-burger { display: none; }

.ksm-gd-burger .ksm-mobile-trigger, .ksm-gd-burger__label {
  display: inline-flex; align-items: center; gap: 0.8rem; padding: 1rem 1.4rem; border: 0; border-radius: 10rem;
  background: var(--secondary); color: var(--light);
  font-family: var(--ksm-gd-font-body); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.04em;
  cursor: pointer; position: relative; z-index: 10001;
}
.ksm-gd-burger .ksm-mobile-trigger__icon { display: flex; flex-direction: column; gap: 0.4rem; width: 1.8rem; }
.ksm-gd-burger .ksm-mobile-trigger__icon span { display: block; height: 2px; background: var(--light); border-radius: 2px; }
.ksm-gd-burger .mobile-bar-menu-text, .ksm-gd-burger__text { color: var(--light); font-size: 1.3rem; font-weight: 600; line-height: 1; }

@media (max-width: 992px) {
  :root { --ksm-gd-bar-h: max(6.2rem, calc(var(--ksm-gd-logo-h-m, 0px) + 1.6rem)); }
  .ksm-gd-header { width: calc(100% - 1.6rem); }
  .ksm-gd-strip { display: none; }
  .ksm-gd-burger { display: block; }
  .ksm-gd-btn--quote { display: none; }
  .ksm-gd-nav { flex: 0 0 0; width: 0; }
  .ksm-gd-bar { gap: 1rem; padding: 0 1.2rem; }
  .ksm-gd-logo { flex: 1 1 auto; min-width: 0; }
  .ksm-gd-logo .site-logo-svg img { max-height: var(--ksm-brand-img-h-mobile, 55px); max-width: min(100%, var(--ksm-brand-img-w-mobile, 170px)); }
  .ksm-gd-logo .site-logo-svg svg { height: var(--ksm-svg-h-mobile, 55px); max-width: min(100%, var(--ksm-svg-w-mobile, 170px)); }
  .ksm-gd-logo img.ksm-logo-image { max-height: var(--ksm-logo-img-h-mobile, 80px); }
  .ksm-gd-logo .site-logo-svg img[src$=".svg"] { height: var(--ksm-brand-img-h-mobile, 55px); }
  .ksm-gd-logo img.ksm-logo-image[src$=".svg"] { height: var(--ksm-logo-img-h-mobile, 80px); }
  .ksm-gd-logo .site-logo-title { font-size: clamp(1.4rem, calc(var(--ksm-title-size-mobile, 2.2rem) * 0.55 + 0.6vw), min(var(--ksm-title-size-mobile, 2.2rem), 2.2rem)); overflow-wrap: anywhere; }
  .ksm-gd-btn--call { padding: 1rem 1.2rem; }
  .ksm-gd-btn--call .ksm-gd-btn__text {
    border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
    overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap;
  }

  /* Rounded card drops down under the floating header. */
  .ksm-gd .ksm-gd-nav .ksm-navigation--mobile {
    position: absolute; top: calc(100% + 0.8rem); left: 0; right: 0; bottom: auto; width: 100%; height: auto;
    max-height: calc(100vh - var(--ksm-gd-bar-h) - 6rem);
    max-height: calc(100dvh - var(--ksm-gd-bar-h) - 6rem);
    background: var(--light) !important; color: var(--secondary) !important;
    --ksm-mobile-title-font-color: var(--secondary) !important;
    --ksm-mobile-submenu-title-font-color: var(--secondary) !important;
    --ksm-mobile-title-font-hover-color: var(--primary) !important;
    --ksm-mobile-submenu-item-active-bg-color: var(--ksm-gd-tint) !important;
    --ksm-mobile-excerpt-font-color: var(--secondary) !important;
    --ksm-arrow-bg-color: var(--ksm-gd-tint) !important;
    border: 1px solid var(--ksm-gd-line); border-radius: var(--ksm-gd-radius);
    box-shadow: var(--ksm-gd-shadow); overflow-y: auto; z-index: 10000;
  }
  .ksm-gd .ksm-gd-nav .ksm-navigation--mobile[class*="ksm-animation--"] { transform: translateY(-1.2rem) scale(0.98); opacity: 0; visibility: hidden; }
  .ksm-gd .ksm-gd-nav .ksm-navigation--mobile[class*="ksm-animation--"].ksm-navigation--visible { transform: none; opacity: 1; visibility: visible; }
  .ksm-gd .ksm-gd-nav .ksm-mobile-overlay { top: 0; z-index: 9999; background: color-mix(in srgb, var(--secondary) 40%, transparent); }
  .ksm-gd .ksm-gd-nav .ksm-mobile-menu__header { display: none; }
  .ksm-gd .ksm-gd-nav .ksm-mobile-menu__link { color: var(--secondary); font-weight: 600; font-family: var(--ksm-gd-font-body); }
  .ksm-gd .ksm-gd-nav .ksm-mobile-menu__item { border-bottom: 1px solid var(--ksm-gd-line); }
  .ksm-gd .ksm-gd-nav .ksm-mobile-menu__arrow { color: var(--primary); }

  /* No-JS: the checkbox drives the card (own checkbox here, or the plugin's from KSM Menu 1.5). */
  body:not(.ksm-js-enabled) .ksm-gd-toggle:checked ~ .ksm-navigation--mobile[class*="ksm-animation--"] { transform: none !important; opacity: 1 !important; visibility: visible !important; display: block; }
  body:not(.ksm-js-enabled) .ksm-gd-toggle:checked ~ .ksm-mobile-overlay { display: block; }
  body:not(.ksm-js-enabled) .ksm-gd-nav .ksm-mobile-menu__submenu { display: block; }
  body:not(.ksm-js-enabled) .ksm-gd-nav .ksm-mobile-menu__toggle { display: none; }
  body:not(.ksm-js-enabled) .ksm-gd-burger--own .ksm-mobile-trigger { display: none; }
  body.ksm-js-enabled .ksm-gd-burger__label { display: none; }
  body:not(.ksm-js-enabled) .ksm-gd-nav .ksm-mobile-menu__close { display: none; }
}

@media (min-width: 993px) { .ksm-gd-burger { display: none !important; } }

/* ---------- Hero: centred, form card overlapping the image ---------- */
.ksm-gd-hero { position: relative; margin-top: calc(-1 * (var(--ksm-gd-bar-h) + 2.4rem)); padding-bottom: 4rem; }

.ksm-gd-hero__stage {
  position: relative; background: var(--secondary); color: var(--light);
  border-radius: 0 0 3.2rem 3.2rem; overflow: hidden;
}
.ksm-gd-hero__media { position: absolute; inset: 0; }
.ksm-gd-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ksm-gd-hero__overlay {
  position: relative;
  background: linear-gradient(180deg, color-mix(in srgb, var(--secondary) 70%, transparent) 0%, color-mix(in srgb, var(--secondary) 58%, transparent) 55%, color-mix(in srgb, var(--secondary) 82%, transparent) 100%);
}
.ksm-gd-hero__wrap { max-width: 96rem; margin: 0 auto; padding: calc(var(--ksm-gd-bar-h) + 6rem) 2rem 11rem; text-align: center; }
.ksm-gd-hero__text, .ksm-gd-hero__text a { color: var(--light); }
.ksm-gd-hero__title { font-size: clamp(3.2rem, 2.2rem + 3vw, 5.8rem); line-height: 1.1; margin: 1.2rem 0 1.8rem; color: var(--light); }
.ksm-gd-hero #hero-heading::after { display: none; }
.ksm-gd-hero__desc { font-size: clamp(1.7rem, 1.5rem + 0.5vw, 2.1rem); margin: 0 auto 2.8rem; max-width: 70rem; }
.ksm-gd-hero__desc p { margin: 0 0 1.2rem; }
.ksm-gd-hero__cta { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; }
.ksm-gd-hero__cta .ksm-gd-btn { padding: 1.4rem 3rem; font-size: 1.6rem; }
.ksm-gd-hero .breadcrumbs, .ksm-gd-hero .deploy_div_breadcrumb { color: var(--light); font-size: 1.3rem; }
.ksm-gd-hero .breadcrumbs { justify-content: center; }
.ksm-gd-hero .breadcrumbs a { color: var(--light); text-decoration: underline; }

/* Form card */
.ksm-gd-hero__formwrap { position: relative; z-index: 2; margin: -8.5rem auto 0; padding: 0 1.6rem; max-width: 84rem; }
.ksm-gd-card {
  background: var(--light); color: var(--secondary); border-radius: 2.4rem; box-shadow: var(--ksm-gd-shadow);
  padding: 3rem 3.2rem; box-sizing: border-box; border: 1px solid var(--ksm-gd-line);
}
.ksm-gd-card__head { text-align: center; margin-bottom: 1.8rem; }
.ksm-gd-card__title { font-size: clamp(2.2rem, 1.9rem + 0.8vw, 3rem); margin: 0 0 0.6rem; color: var(--secondary); }
.ksm-gd-card__sub { margin: 0; font-size: 1.5rem; color: var(--secondary); }
.ksm-gd-card input, .ksm-gd-card textarea, .ksm-gd-card select { max-width: 100%; box-sizing: border-box; font-family: var(--ksm-gd-font-body); }
.ksm-gd-card input[type="text"], .ksm-gd-card input[type="tel"], .ksm-gd-card input[type="email"], .ksm-gd-card textarea, .ksm-gd-card select {
  border: 1px solid var(--ksm-gd-line); border-radius: 1.2rem; background: var(--ksm-gd-tint); color: var(--secondary);
}

/* Trust box: small frosted pills in one tidy row (two by two on phones) */
.ksm-gd-trust { margin: 2.2rem auto 0; max-width: 92rem; }
.ksm-gd-trust__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; }
.ksm-gd-trust__item {
  display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.5rem 1.1rem; border-radius: 10rem; min-width: 0;
  background: color-mix(in srgb, var(--secondary) 78%, transparent); border: 1px solid color-mix(in srgb, var(--light) 45%, transparent);
  -webkit-backdrop-filter: blur(0.6rem); backdrop-filter: blur(0.6rem);
  font-weight: 600; font-size: 1.3rem; line-height: 1.25; color: var(--light);
}
.ksm-gd-trust__item::before { display: none; }
.ksm-gd-trust__item svg { flex: 0 0 auto; width: 1.7rem; height: 1.7rem; color: var(--light); }
.ksm-gd-trust__label { min-width: 0; overflow-wrap: anywhere; }
.ksm-gd-trust__label--short { display: none; }
.ksm-gd-trust__reviews { display: flex; justify-content: center; margin-top: 1.4rem; }

/* Review badge */
.ksm-gd-hero__reviews--bottom { display: flex; justify-content: center; margin-top: 3rem; }
.ksm-gd-hero__reviews--under { display: flex; justify-content: center; margin-top: 2rem; }
.ksm-gd-badge {
  display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem 1.4rem; padding: 0.9rem 2rem;
  border-radius: 10rem; background: color-mix(in srgb, var(--light) 92%, transparent); color: var(--secondary) !important;
  text-decoration: none; box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.2); transition: transform 0.25s ease;
}
.ksm-gd-badge:hover { transform: translateY(-0.2rem); }
.ksm-gd-badge__stars { color: var(--accent); letter-spacing: 0.1em; font-size: 1.8rem; }
.ksm-gd-badge__text { font-weight: 700; display: inline-flex; gap: 0.8rem; }
.ksm-gd-badge__link { font-weight: 600; color: var(--primary); }

/* The parent's .text-link--white a { color: var(--light) !important } (parent style.css, specificity 0,1,1) reaches every link in the hero text
   column, including the badge when it sits under the buttons or in the trust box: light text on the light pill. Same !important at higher specificity. */
.ksm-gd-hero a.ksm-gd-badge,
.ksm-gd-hero a.ksm-gd-badge:hover,
.ksm-gd-hero a.ksm-gd-badge:focus-visible { color: var(--secondary) !important; }
.ksm-gd-hero a.ksm-gd-badge:focus-visible { outline: 0.3rem solid var(--light); outline-offset: 0.3rem; }

/* Phones and tablets: the pill is dropped. Transparent on the dark hero, light text and stars, soft shadow behind the text for busy photos. */
@media (max-width: 992px) {
  .ksm-gd-hero a.ksm-gd-badge,
  .ksm-gd-hero a.ksm-gd-badge:hover,
  .ksm-gd-hero a.ksm-gd-badge:focus-visible { background: transparent; box-shadow: none; padding: 0; color: var(--light) !important; text-shadow: 0 0.1rem 0.4rem color-mix(in srgb, var(--secondary) 85%, transparent); }
  .ksm-gd-hero a.ksm-gd-badge:hover { transform: none; text-decoration: underline; }
  .ksm-gd-hero .ksm-gd-badge__stars,
  .ksm-gd-hero .ksm-gd-badge__link { color: var(--light); }
}

/* ---------- Page sections ---------- */
/* The parent sets .set-width { width: 1200px !important; max-width: 100% }. GD 1.0.x replaced max-width with a fixed 124rem here, which
   removed the 100% cap: on phones every .set-width block stayed 1200px wide and post content ran off-screen. Keep the cap. */
.deploy_div_mc .set-width { max-width: min(100%, var(--ksm-gd-max)); }
.deploy_div_mc .set-width-1600 { max-width: 100%; }

/* Long words and URLs wrap; media, embeds, tables and code never exceed their column; flex children may shrink. */
.deploy_div_mc,
.deploy_div_main-content { min-width: 0; }
.content-box,
.page-sidebar,
.entry-content { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.content-box img,
.content-box video,
.content-box iframe,
.content-box embed,
.content-box object,
.entry-content img,
.entry-content iframe { max-width: 100%; height: auto; }
.content-box iframe,
.entry-content iframe { aspect-ratio: 16 / 9; }
.content-box table,
.entry-content table { display: block; max-width: 100%; overflow-x: auto; }
.content-box pre,
.entry-content pre { max-width: 100%; overflow-x: auto; }
.content-box figure,
.content-box .wp-caption,
.entry-content figure,
.entry-content .wp-caption { max-width: 100%; margin-inline: 0; }

.content-box h2 { color: var(--secondary); font-size: clamp(2.4rem, 2rem + 1.2vw, 3.4rem); margin: 3rem 0 1.2rem; padding-left: 1.4rem; border-left: 0.5rem solid var(--accent); }
.content-box h3 { color: var(--primary); font-size: clamp(2rem, 1.8rem + 0.6vw, 2.6rem); margin: 2.4rem 0 1rem; }
.content-box p { margin: 0 0 1.5rem; }
.content-box a { color: var(--primary); text-decoration-thickness: 0.15rem; text-underline-offset: 0.3rem; }
.content-box img { border-radius: var(--ksm-gd-radius); }
.entry-content h2 { color: var(--secondary); }

#related-posts { padding: 4.4rem 1.6rem; margin: 3rem 1.6rem; border-radius: 2.4rem; background: var(--ksm-gd-tint-2); }
#related-posts h3, #related-posts .ksm-gd-section-title { background: transparent; color: var(--secondary); font-size: clamp(2.4rem, 2rem + 1.2vw, 3.4rem); text-transform: none; padding: 0; }
.related-post { border: 0; border-radius: 2rem; background: var(--light); box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.1); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.related-post:hover { transform: translateY(-0.5rem); box-shadow: var(--ksm-gd-shadow); }
.service-link-button { background: color-mix(in srgb, var(--light) 92%, transparent); -webkit-backdrop-filter: blur(0.8rem); backdrop-filter: blur(0.8rem); }
.service-title-button { font-family: var(--ksm-gd-font-head); text-transform: none; font-size: 1.7rem; padding: 1.2rem 1.2rem; color: var(--secondary); }
.service-image-button { background: var(--primary); border-radius: 50%; width: 3.6rem; height: 3.6rem; padding: 0.8rem; margin-right: 1rem; }

#customer_reviews_wrapper { padding: 4rem 2rem; }

/* Why choose us: dark band, two columns of rows */
.ksm-gd-why { margin: 4rem 1.6rem; padding: 5.6rem 2rem; border-radius: 3.2rem; background: var(--secondary); color: var(--light); }
.ksm-gd-why__title { text-align: center; font-size: clamp(2.6rem, 2.1rem + 1.6vw, 3.8rem); margin: 0 0 3.4rem; color: var(--light); }
.ksm-gd-why__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 4rem; }
.ksm-gd-why__card { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); gap: 0 1.8rem; align-items: start; }
.ksm-gd-why__icon { grid-row: 1 / span 2; width: 5.6rem; height: 5.6rem; border-radius: 1.6rem; display: grid; place-items: center; background: var(--accent); color: var(--light); }
.ksm-gd-why__svg { width: 2.8rem; height: 2.8rem; fill: var(--light); }
.ksm-gd-why__svg[stroke] { fill: none; }
.ksm-gd-why__card-title { font-size: 2rem; margin: 0 0 0.5rem; color: var(--light); }
.ksm-gd-why__text { margin: 0; font-size: 1.55rem; color: var(--light); }
.ksm-gd-why a { color: var(--light); }

/* Numbered steps (parent markup, restyled) */
.ksm-steps__heading, .ksm-steps__title { font-family: var(--ksm-gd-font-head); }

/* ---------- Footer ---------- */
.ksm-gd-footer { background: var(--ksm-gd-tint); color: var(--secondary); padding: 5.6rem 1.6rem 3.2rem; margin-top: 4rem; border-radius: 3.2rem 3.2rem 0 0; border-top: 0.5rem solid var(--primary); }
.ksm-gd-footer__grid { max-width: var(--ksm-gd-max); margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; }
.ksm-gd-footer__col { background: var(--light); border-radius: 2rem; padding: 2.4rem 2.6rem; box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.06); }
.ksm-gd-footer a { color: var(--primary); text-underline-offset: 0.3rem; }
.ksm-gd-footer a:hover { color: var(--accent); text-decoration-thickness: 0.2rem; }
/* Footer menus (WordPress nav menu widgets, ul.menu): no underline at rest; underline on hover and keyboard focus. Inline links in text keep theirs. */
.ksm-gd-footer .menu a { text-decoration: none; }
.ksm-gd-footer .menu a:hover,
.ksm-gd-footer .menu a:focus-visible { text-decoration: underline; text-underline-offset: 0.3rem; text-decoration-thickness: 0.2rem; }
.ksm-gd-footer h2, .ksm-gd-footer h3, .ksm-gd-footer h4, .ksm-gd-footer .footer-widget h4 { color: var(--secondary); font-size: 1.9rem; margin: 0 0 1.4rem; padding: 0 0 0 1.2rem; border: 0; border-left: 0.4rem solid var(--accent); }
.ksm-gd-footer ul { list-style: none; margin: 0; padding: 0; }
.ksm-gd-footer li { margin: 0 0 0.8rem; }
.ksm-gd-footer p { margin: 0 0 1rem; }
.ksm-gd-copyright { background: var(--secondary); color: var(--light); padding: 1.6rem 2rem; text-align: center; font-size: 1.3rem; }
.ksm-gd-copyright__text { margin: 0 auto; max-width: var(--ksm-gd-max); }
.ksm-gd-copyright a { color: var(--light); }

/* Footer copyright bar widget area: copyright left, widgets right on desktop; stacked and centred on phones. */
.ksm-gd-copyright--with-widgets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 3rem;
  padding-inline: max(2rem, calc((100% - var(--ksm-gd-max)) / 2));
  text-align: left;
}

.ksm-gd-copyright--with-widgets .ksm-gd-copyright__text { margin: 0; max-width: none; }
.ksm-gd-copyright__widgets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.6rem; }
.ksm-gd-cw p { margin: 0; }
.ksm-gd-cw__title { font-weight: 700; }
.ksm-gd-copyright__widgets a { color: var(--light); text-decoration: none; }
.ksm-gd-copyright__widgets a:hover,
.ksm-gd-copyright__widgets a:focus-visible { text-decoration: underline; text-underline-offset: 0.3rem; text-decoration-thickness: 0.2rem; }
.ksm-gd-copyright__widgets a:focus-visible { outline: 0.3rem solid var(--light); outline-offset: 0.3rem; }

@media (max-width: 767px) {
  .ksm-gd-copyright--with-widgets { flex-direction: column; justify-content: center; text-align: center; }
  .ksm-gd-copyright__widgets { justify-content: center; }
}

/* Mobile quick-contact pills (CSS only) */
.ksm-gd-mbar { display: none; }

/* ---------- Tablet and mobile ---------- */
@media (max-width: 992px) {
  .ksm-gd-hero { margin-top: calc(-1 * (var(--ksm-gd-bar-h) + 2rem)); }
  .ksm-gd-hero__wrap { padding: calc(var(--ksm-gd-bar-h) + 4rem) 1.6rem 10rem; }
  .ksm-gd-hero__formwrap { margin-top: -7rem; }
  .ksm-gd-card { padding: 2.4rem 1.8rem; }
  .ksm-gd-why__grid { grid-template-columns: minmax(0, 1fr); }
  .ksm-gd-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  .ksm-gd-hero__cta .ksm-gd-btn { flex: 1 1 100%; }
  .ksm-gd-trust__item { font-size: 1.3rem; }
  .ksm-gd-why { margin: 3rem 0.8rem; padding: 4rem 1.6rem; border-radius: 2.4rem; }
  .ksm-gd-why__card { grid-template-columns: 4.6rem minmax(0, 1fr); }
  .ksm-gd-why__icon { width: 4.6rem; height: 4.6rem; }

  .ksm-gd-mbar {
    display: flex; gap: 1rem; position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 900;
  }
  .ksm-gd-mbar__link {
    flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 0.8rem; padding: 1.3rem 1rem;
    border-radius: 10rem; font-family: var(--ksm-gd-font-body); font-weight: 600; font-size: 1.5rem;
    text-decoration: none; color: var(--light); box-shadow: 0 0.6rem 1.8rem rgba(0, 0, 0, 0.28);
  }
  .ksm-gd-mbar__link--call { background: var(--primary); }
  .ksm-gd-mbar__link--quote { background: var(--accent); }
  .ksm-gd-copyright { padding-bottom: 8rem; }
}

/* ---------- Mobile sticky elements (Design Options), below 993px only ----------
   both = sticky header + bottom call bar (default, no extra rules). header = no bottom bar. bar = header scrolls away. */
@media (max-width: 767px) {
  body.ksm-gd-msticky--header .ksm-gd-mbar { display: none; }
  body.ksm-gd-msticky--header .ksm-gd-copyright { padding-bottom: 1.4rem; }
}

@media (max-width: 992px) {
  /* position: relative (not static) keeps the mobile menu panel anchored under the header. */
  body.ksm-gd-msticky--bar .ksm-gd-header { position: relative; top: auto; }
  html:has(body.ksm-gd-msticky--bar) { scroll-padding-top: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ksm-gd *, .ksm-gd *::before, .ksm-gd *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   1.1.0
   ========================================================================== */

/* ---------- Trust strip: soft band below the hero (Design Options > Trust box position) ---------- */
.ksm-gd-strip-band {
  max-width: var(--ksm-gd-max); margin: 0.8rem auto 1.6rem; padding: 1.2rem 2rem;
  border-radius: 10rem; background: var(--ksm-gd-tint); border: 1px solid var(--ksm-gd-line);
  width: calc(100% - 3.2rem); box-sizing: border-box;
}
.ksm-gd-strip-band__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.8rem 2.6rem; }
.ksm-gd-strip-band__item { display: flex; align-items: center; gap: 0.8rem; margin: 0; padding: 0; min-width: 0; font-family: var(--ksm-gd-font-head); font-weight: 700; font-size: 1.5rem; line-height: 1.25; color: var(--secondary); }
.ksm-gd-strip-band__item::before { display: none; }
.ksm-gd-strip-band__item svg { flex: 0 0 auto; width: 2.4rem; height: 2.4rem; padding: 0.4rem; box-sizing: border-box; border-radius: 50%; background: var(--accent); color: var(--light); }
.ksm-gd-strip-band__label { min-width: 0; overflow-wrap: anywhere; }
/* Long label on desktop, short on phones: the inactive one is display:none so screen readers hear one only. */
.ksm-gd-strip-band__label--short { display: none; }

/* Trust items on phones (hero pills and strip): two per row, never an awkward wrap. */
@media (max-width: 767px) {
  .ksm-gd-trust { margin-top: 1.8rem; }
  .ksm-gd-trust__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .ksm-gd-trust__item { justify-content: flex-start; border-radius: 1.2rem; padding: 0.6rem 0.8rem; gap: 0.5rem; font-size: 1.2rem; text-align: left; }
  .ksm-gd-trust__item svg { width: 1.5rem; height: 1.5rem; }
  .ksm-gd-trust__item:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; }
  .ksm-gd-trust__label--long { display: none; }
  .ksm-gd-trust__label--short { display: inline; }

  .ksm-gd-strip-band { border-radius: 2rem; padding: 1rem 1.2rem; }
  .ksm-gd-strip-band__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1rem; justify-items: start; }
  .ksm-gd-strip-band__item { font-size: 1.3rem; gap: 0.6rem; }
  .ksm-gd-strip-band__item svg { width: 2.2rem; height: 2.2rem; padding: 0.35rem; }
  .ksm-gd-strip-band__item:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; }
  .ksm-gd-strip-band__label--long { display: none; }
  .ksm-gd-strip-band__label--short { display: inline; }
}

/* ---------- KSM Forms: consent text colours ----------
   KSM Forms sets the privacy text to #fff (it assumes a dark panel). In GD the form sits on the light card (hero), on the page itself,
   or in the light footer cards, so the text and its link use the Site Settings ink colour (--secondary); the link stays underlined.
   Dark panels (Why choose us, copyright bar) keep light text. No KSM Forms edits. */
body.ksm-gd .ksm-contact-form__privacy-text,
body.ksm-gd .ksm-contact-form__label { color: var(--secondary); }
body.ksm-gd .ksm-contact-form__privacy-text a { color: var(--secondary); text-decoration: underline; text-decoration-thickness: 0.15rem; text-underline-offset: 0.3rem; }
body.ksm-gd .ksm-contact-form__privacy-text a:hover,
body.ksm-gd .ksm-contact-form__privacy-text a:focus-visible { color: var(--primary); text-decoration-thickness: 0.2rem; }
body.ksm-gd .ksm-contact-form__input::placeholder,
body.ksm-gd .ksm-contact-form__textarea::placeholder { color: color-mix(in srgb, var(--secondary) 72%, var(--light)); opacity: 1; }
.ksm-gd-why .ksm-contact-form__privacy-text,
.ksm-gd-why .ksm-contact-form__label,
.ksm-gd-why .ksm-contact-form__privacy-text a,
.ksm-gd-copyright .ksm-contact-form__privacy-text,
.ksm-gd-copyright .ksm-contact-form__privacy-text a { color: var(--light); }

/* ---------- Customer reviews panel (Review Collector style 2), scoped to body.ksm-gd-reviews--panel ----------
   Visual overrides only: the plugin's card height, track geometry, clamp and slider rules are left alone. */
body.ksm-gd-reviews--panel #customer_reviews_wrapper { padding: 4.8rem 2rem; }
body.ksm-gd-reviews--panel .ksm-style-2 .ksm-style2-panel {
  background: var(--light); border: 1px solid var(--ksm-gd-line); border-radius: 2.4rem; box-shadow: var(--ksm-gd-shadow); overflow: hidden;
}
body.ksm-gd-reviews--panel .ksm-style-2 .ksm-style2-rail {
  --ksm-rc-rail-text: var(--light);
  background: var(--secondary); border-radius: 0; box-shadow: none;
}
body.ksm-gd-reviews--panel .ksm-style-2 .ksm-style2-rail-word { font-family: var(--ksm-gd-font-head); font-size: 3rem; letter-spacing: 0; }
body.ksm-gd-reviews--panel .ksm-style-2 .ksm-style2-rail-count { font-size: 1.7rem; }
body.ksm-gd-reviews--panel .ksm-style-2 .ksm-review-item[data-source] {
  background-color: var(--light); border: 0; border-radius: 2rem;
  box-shadow: 0 0.4rem 1.8rem rgba(0, 0, 0, 0.1);
}
body.ksm-gd-reviews--panel .ksm-style-2 .ksm-review-item[data-source]::after {
  content: '\201D'; position: absolute; right: 1.8rem; bottom: -2.2rem; font-family: var(--ksm-gd-font-head);
  font-size: 11rem; line-height: 1; color: color-mix(in srgb, var(--primary) 12%, transparent); pointer-events: none; z-index: 0;
}
body.ksm-gd-reviews--panel .ksm-style-2 .ksm-review-item .ksm-name { font-family: var(--ksm-gd-font-head); font-weight: 700; color: var(--secondary); }
body.ksm-gd-reviews--panel .ksm-style-2 .ksm-review-item .ksm-date { color: color-mix(in srgb, var(--secondary) 78%, var(--light)); }
body.ksm-gd-reviews--panel .ksm-style-2 .ksm-review-item .ksm-star.f { color: var(--accent); }
body.ksm-gd-reviews--panel .ksm-style-2 .ksm-review-item .ksm-read-more { color: var(--primary); position: relative; z-index: 1; }
body.ksm-gd-reviews--panel .ksm-style-2 .ksm-controls-line .dot.ksm-active { background-color: var(--accent); }

/* ---------- Related posts: GD cards (rounded, soft shadow, pill call to action with a CSS chevron) ---------- */
.ksm-gd-rel__heading {
  background: transparent; color: var(--secondary); font-family: var(--ksm-gd-font-head);
  font-size: clamp(2.4rem, 2rem + 1.2vw, 3.4rem); text-transform: none; text-align: center; padding: 0; margin: 0 0 2.4rem;
}
.ksm-gd-rel__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 0; margin-bottom: 0; }
@media (min-width: 600px) { .ksm-gd-rel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .ksm-gd-rel__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ksm-gd-rel__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ksm-gd-rel__card { display: flex; background: var(--light); border-radius: 2.4rem; overflow: hidden; box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.1); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.ksm-gd-rel__card:hover,
.ksm-gd-rel__card:focus-within { transform: translateY(-0.5rem); box-shadow: var(--ksm-gd-shadow); }
.ksm-gd-rel__link { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; color: var(--secondary); text-decoration: none; }
.ksm-gd-rel__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ksm-gd-tint); margin: 0.8rem 0.8rem 0; border-radius: 1.8rem; }
.ksm-gd-rel__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform 0.5s ease; }
.ksm-gd-rel__card:hover .ksm-gd-rel__img,
.ksm-gd-rel__card:focus-within .ksm-gd-rel__img { transform: scale(1.06); }
.ksm-gd-rel__body { display: flex; flex-direction: column; gap: 1.2rem; flex: 1 1 auto; padding: 1.6rem 1.8rem 1.9rem; }
.ksm-gd-rel__title { font-family: var(--ksm-gd-font-head); font-weight: 700; font-size: 1.9rem; line-height: 1.2; color: var(--secondary); }
.ksm-gd-rel__cta {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 0.8rem; margin-top: auto; padding: 0.7rem 1.4rem; border-radius: 10rem;
  background: var(--ksm-gd-tint); color: var(--primary); font-weight: 600; font-size: 1.4rem; line-height: 1.2;
  transition: background-color 0.25s ease, color 0.25s ease;
}
.ksm-gd-rel__chev { flex: 0 0 auto; width: 0.7rem; height: 0.7rem; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(-45deg); transition: transform 0.25s ease; }
.ksm-gd-rel__card:hover .ksm-gd-rel__cta,
.ksm-gd-rel__card:focus-within .ksm-gd-rel__cta { background: var(--primary); color: var(--light); }
.ksm-gd-rel__card:hover .ksm-gd-rel__chev,
.ksm-gd-rel__card:focus-within .ksm-gd-rel__chev { transform: translateX(0.3rem) rotate(-45deg); }
.ksm-gd-rel__link:focus-visible { outline-offset: -0.3rem; }
.ksm-gd-rel__card--text .ksm-gd-rel__body { flex-direction: row; align-items: center; justify-content: space-between; padding: 1.6rem 2rem; }
.ksm-gd-rel__card--text .ksm-gd-rel__cta { margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  .ksm-gd-rel__card:hover, .ksm-gd-rel__card:focus-within { transform: none; }
  .ksm-gd-rel__card:hover .ksm-gd-rel__img, .ksm-gd-rel__card:focus-within .ksm-gd-rel__img { transform: none; }
}

/* ---------- Mobile header controls (below 993px): call button and burger are identical 4.6rem rounded squares ---------- */
@media (max-width: 992px) {
  .ksm-gd-actions { gap: 0.8rem; flex-wrap: nowrap; }
  .ksm-gd-burger { display: flex; align-items: center; }

  .ksm-gd-header .ksm-gd-btn--call,
  .ksm-gd-burger .ksm-mobile-trigger,
  .ksm-gd-burger__label {
    box-sizing: border-box; width: 4.6rem; height: 4.6rem; min-width: 4.6rem; padding: 0; gap: 0; border: 0; border-radius: 1.4rem;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: middle;
  }
  .ksm-gd-header .ksm-gd-btn--call svg { width: 2.2rem; height: 2.2rem; flex: 0 0 auto; }
  .ksm-gd-burger .ksm-mobile-trigger__icon { width: 2.2rem; gap: 0.5rem; }
  .ksm-gd-burger .mobile-bar-menu-text,
  .ksm-gd-burger__text {
    border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px;
    overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap;
  }

  /* Logo shrinks first so the two squares never wrap or overlap. */
  .ksm-gd-bar { flex-wrap: nowrap; }
  .ksm-gd-logo { flex: 1 1 0; min-width: 0; overflow: hidden; }
  .ksm-gd-logo .site-logo-link { min-width: 0; max-width: 100%; }
  .ksm-gd-logo .site-logo-svg { flex: 0 1 auto; min-width: 0; }
  .ksm-gd-logo .site-logo-title { flex: 1 1 auto; min-width: 0; }
  .ksm-gd-actions { flex: 0 0 auto; }
}

/* ---------- Desktop (993px up): the main header is NOT sticky; a separate compact bar slides in after it has scrolled away ---------- */
.ksm-gd-compact { display: none; }

@media (min-width: 993px) {
  .ksm-gd-header,
  body.admin-bar .ksm-gd-header { position: relative; top: auto; }

  html { scroll-padding-top: var(--ksm-gd-sticky-gap); }
  html:has(body.ksm-sticky-nav) { scroll-padding-top: calc(var(--ksm-gd-compact-h) + var(--ksm-gd-sticky-gap)); }
  html:has(body.admin-bar.ksm-sticky-nav) { scroll-padding-top: calc(var(--ksm-gd-compact-h) + var(--ksm-gd-sticky-gap) + 32px); }

  /* Hidden by default: off-screen, not visible, and (in the markup) inert + aria-hidden. Only js/compact-header.js adds --on, so without
     JavaScript the bar is never shown. */
  .ksm-gd-compact {
    display: block; position: fixed; top: 0; left: 0; right: 0; margin-inline: auto; z-index: 1100; box-sizing: border-box;
    width: calc(100% - 2.4rem); max-width: calc(var(--ksm-gd-max) + 4rem); height: var(--ksm-gd-compact-h);
    border-radius: 0 0 var(--ksm-gd-radius) var(--ksm-gd-radius); background: var(--light);
    border: 1px solid var(--ksm-gd-line); border-top: 0; box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.12);
    transform: translateY(-100%); visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
  }
  body.admin-bar .ksm-gd-compact { top: 32px; }
  .ksm-gd-compact--on { transform: none; visibility: visible; transition: transform 0.3s ease, visibility 0s linear 0s; }

  /* Blur on a pseudo-element, as in the main header. */
  .ksm-gd-compact::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .ksm-gd-compact { background: transparent; }
    .ksm-gd-compact::before { background: color-mix(in srgb, var(--light) 74%, transparent); -webkit-backdrop-filter: blur(1.4rem) saturate(170%); backdrop-filter: blur(1.4rem) saturate(170%); }
  }

  .ksm-gd-compact__bar { height: 100%; display: flex; align-items: center; gap: 1.6rem; padding: 0 2rem; box-sizing: border-box; }
  .ksm-gd-compact__logo { flex: 0 0 auto; padding: 0; overflow: visible; }
  .ksm-gd-compact__logo .site-logo-link { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; }
  /* The same logo markup, scaled down (the Site Settings sizes would be far too big for a 6rem bar). */
  .ksm-gd-compact__logo img,
  .ksm-gd-compact__logo svg { height: 4rem !important; max-height: 4rem !important; width: auto !important; max-width: 18rem !important; object-fit: contain; }
  .ksm-gd-compact__logo .site-logo-svg { display: flex; align-items: center; }
  .ksm-gd-compact__logo .site-logo-title { font-size: 1.8rem; }

  .ksm-gd-compact .ksm-gd-nav { flex: 1 1 auto; min-width: 0; }
  .ksm-gd .ksm-gd-nav.ksm-gd-nav--compact .ksm-menu__link { padding: 0.7rem 1.1rem; font-size: 1.4rem; }
  .ksm-gd .ksm-gd-nav.ksm-gd-nav--compact .ksm-mega-menu { top: calc(100% + 0.4rem); }
  .ksm-gd-compact__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 0.8rem; }
  .ksm-gd-compact .ksm-gd-btn { padding: 0.8rem 1.5rem; font-size: 1.4rem; }
  .ksm-gd-compact .ksm-gd-btn svg { width: 1.6rem; height: 1.6rem; }

  /* Sticky sidebar (pages using the parent's show_sidebar layout). The parent gives the aside .sticky (position: sticky; top: 0) but it never
     worked: the parent sets #content { overflow: hidden !important } (parent css/custom.css) and an overflow-hidden ancestor becomes the sticky
     scroll container. overflow-x: clip keeps the horizontal guard without creating a scroll container. No other ancestor of the aside sets
     overflow (.site-container, .content-wrapper, #deploy_div_main_content_wrapper, .set-width, .animate-on-scroll all checked).
     Taller than the screen: it scrolls inside itself. It stops at the end of its row (the flex wrapper around the content box). */
  #content { overflow: visible !important; overflow-x: clip !important; }
  .page-sidebar.sticky {
    position: sticky; top: var(--ksm-gd-sidebar-top); align-self: flex-start; margin-top: 0;
    max-height: calc(100vh - var(--ksm-gd-sidebar-top) - var(--ksm-gd-sticky-gap));
    overflow-y: auto; scrollbar-width: thin;
  }
  body.admin-bar .page-sidebar.sticky {
    top: calc(var(--ksm-gd-sidebar-top) + 32px);
    max-height: calc(100vh - var(--ksm-gd-sidebar-top) - var(--ksm-gd-sticky-gap) - 32px);
  }
}

@media (min-width: 993px) and (max-width: 1279px) {
  .ksm-gd-compact .ksm-gd-btn--quote { display: none; }
  .ksm-gd .ksm-gd-nav.ksm-gd-nav--compact .ksm-menu__link { padding: 0.6rem 0.8rem; font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ksm-gd-compact,
  .ksm-gd-compact--on { transition: none !important; }
}