/* 🔴 CROSS-DOCUMENT VIEW TRANSITIONS DISABLED — 11 August 2026.

   This file used to open with:

       @view-transition { navigation: auto; }

   In Chrome 148 that leaves the FIRST PAINT AFTER A NAVIGATION FROZEN. The
   document scrolls — window.scrollY reaches 1500 — but the pixels do not move,
   so a visitor lands on the home page, scrolls, and sees the top of the hero
   with grey below it. It looks like the page is cut in half. The console
   carries the matching error: "AbortError: Transition was skipped".

   PROVEN, not guessed. A/B: the same built page served twice, identical except
   for this rule. With the rule, the first scroll after navigation does not
   repaint. Without it, it repaints immediately, every time.

   ⚠️ THE SISTER SITE HAS THE SAME RULE AND THE SAME FAULT. It was reproduced
   there before changing anything here, so this is inherited, not introduced —
   and it is a launch blocker over there too. Flagged; that project cannot be
   edited from this one.

   This is the one place the two sites deliberately differ on behaviour rather
   than brand. Identical was the instruction, but identical does not extend to
   being identically broken. Restore the rule the moment the sister site's copy
   is fixed and the Chrome bug is gone. */

:root {
  --ksi-fluid-gutter: clamp(1rem, 5vw, 5.625rem);
  --ksi-focus: #72c7ff;
  --ksi-touch-target: 2.75rem;
  --ksi-content-max: 70rem;
  --ksi-content-rail: min(
    calc(100% - (2 * var(--ksi-fluid-gutter))),
    var(--ksi-content-max)
  );
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 20rem;
  overflow-x: clip;
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html:has(.ksi-site-loader) {
  overflow: hidden;
}

.ksi-site-loader {
  display: grid;
  position: fixed;
  z-index: 2147483646;
  inset: 0;
  align-content: center;
  justify-items: center;
  gap: 1.25rem;
  padding: 2rem;
  background: #00001c;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 380ms ease,
    visibility 380ms ease;
}

.ksi-site-loader__logo {
  inline-size: clamp(11rem, 28vw, 24rem);
  animation: ksi-loader-pulse 1.4s ease-in-out infinite;
}

.ksi-site-loader__track {
  position: relative;
  inline-size: clamp(9rem, 20vw, 17rem);
  block-size: 2px;
  overflow: hidden;
  background: rgb(255 255 255 / 20%);
}

.ksi-site-loader__track > span {
  display: block;
  position: absolute;
  inset: 0;
  background: #4d9cd3;
  transform: translateX(-105%);
  animation: ksi-loader-progress 1.15s ease-in-out infinite;
}

.ksi-site-loader__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html.ksi-site-ready {
  overflow: auto;
}

html.ksi-site-ready .ksi-site-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes ksi-loader-pulse {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.985);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ksi-loader-progress {
  0% {
    transform: translateX(-105%);
  }

  55%,
  100% {
    transform: translateX(105%);
  }
}

img,
picture,
svg,
video,
canvas {
  max-inline-size: 100%;
}

img,
video {
  block-size: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

a,
button,
input,
select,
summary,
textarea {
  -webkit-tap-highlight-color: rgb(77 156 211 / 28%);
}

:where(a, button, input, select, summary, textarea):focus-visible {
  outline: 3px solid var(--ksi-focus) !important;
  outline-offset: 4px !important;
  border-radius: 2px;
}

.ea11y-skip-to-content-link,
.ksi-skip-link {
  position: fixed;
  z-index: 2147483647;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  padding: 0.75rem 1rem;
  color: #00001c;
  background: #fff;
  border: 2px solid var(--ksi-focus);
  border-radius: 0.25rem;
  font: 600 0.875rem/1.2 Inter, sans-serif;
  transform: translateY(-200%);
  transition: transform 160ms ease;
}

.ea11y-skip-to-content-link:focus,
.ksi-skip-link:focus {
  transform: translateY(0);
}

/* 🔑 THE CANONICAL CONTAINER — rewritten 11 Aug 2026.
   Francis: "at the home page, can we align everything to the logo?"

   This rule owns where page content starts, so it is the one that had to
   change. It used to centre a `--ksi-content-rail` — a 1120px column with a
   fluid gutter — while the header and footer centre a 1280px box with a 40px
   gutter inside it. Two different box models never agree at more than one
   width, and measurement on the home page showed exactly that:

       viewport 1280px    content  80    logo  40     content 40px RIGHT
       viewport 1440px    content  86    logo 120     content 34px LEFT
       viewport 1920px    content 240    logo 360     content 120px LEFT

   Not just misaligned — it changed direction as the window resized.

   Now identical to .ksi-hd-inner and .ksi-f-inner: a 1280px box with 40px
   inside it. Change one of those three and you must change all three.

   ⚠️ An override appended at the end of this file was tried first and lost:
   this selector is (0,5,0) with !important, that one was (0,3,0). Out-
   specifying the rule that owns the concern would have left two rules fighting
   over the same geometry. Fixed here instead. */
:is(
    .elementor[data-elementor-type="wp-page"],
    .elementor-location-single
  )
  > .e-con.e-parent.e-con-boxed
  > .e-con-inner {
  inline-size: 100%;
  max-inline-size: 1280px;
  margin-inline: auto;
  box-sizing: border-box;
  --padding-inline-start: 40px !important;
  --padding-inline-end: 40px !important;
  padding-inline: 40px !important;
}

/* Drop Elementor outer side padding so header / sections / footer share one rail. */
:is(
    .elementor[data-elementor-type="wp-page"],
    .elementor-location-single
  )
  > .e-con.e-parent {
  --padding-inline-start: 0 !important;
  --padding-inline-end: 0 !important;
  padding-inline: 0 !important;
}

.elementor-element-69ca9806 {
  min-block-size: 72.5625rem !important;
}

.elementor-element-69ca9806 .elementor-background-slideshow {
  min-block-size: 100%;
}

.elementor-nav-menu--dropdown a,
.elementor-button,
button {
  min-block-size: var(--ksi-touch-target);
}

.elementor-widget-text-editor :where(p, li) {
  max-inline-size: 78ch;
}

@media (width <= 64rem) {
  :root {
    --ksi-fluid-gutter: clamp(1.25rem, 4vw, 2.75rem);
  }
}

@media (width >= 64.0625rem) {
  [data-elementor-type="header"]
    .elementor-nav-menu--main
    .menu-item-has-children {
    position: relative;
  }

  [data-elementor-type="header"]
    .elementor-nav-menu--main
    .menu-item-has-children:hover
    > .sub-menu,
  [data-elementor-type="header"]
    .elementor-nav-menu--main
    .menu-item-has-children:focus-within
    > .sub-menu {
    display: block !important;
    position: absolute;
    z-index: 1100;
    inset-block-start: 100%;
    inset-inline-start: 0;
    min-inline-size: max-content;
  }
}

@media (width <= 47.9375rem) {
  [data-elementor-type="header"] > .elementor-element {
    min-block-size: 99px !important;
  }

  :root {
    --ksi-fluid-gutter: clamp(1rem, 5vw, 1.5rem);
  }

  .elementor-element-69ca9806 {
    min-block-size: clamp(32rem, 70svh, 37.5rem) !important;
  }

  .elementor-nav-menu--dropdown a,
  .elementor-button,
  button {
    min-block-size: 3rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .ksi-site-loader__logo,
  .ksi-site-loader__track > span {
    animation: none !important;
  }

  .elementor-invisible {
    visibility: visible !important;
  }

  .elementor-motion-effects-element,
  .elementor-background-slideshow {
    transform: none !important;
  }
}

@media (prefers-contrast: more) {
  :where(a, button):focus-visible {
    outline-color: currentColor !important;
    outline-width: 4px !important;
  }
}

@media (forced-colors: active) {
  :where(a, button, input, select, summary, textarea):focus-visible {
    outline-color: Highlight !important;
  }
}

/* Native static replacements for former page-builder interactions. */
[data-elementor-type="header"] {
  position: sticky;
  z-index: 1000;
  inset-block-start: 0;
}

/* Full-bleed bar; logo/nav sit on the shared content rail via side padding. */
[data-elementor-type="header"] > .elementor-element {
  position: fixed !important;
  inset: 0 0 auto;
  box-sizing: border-box;
  inline-size: 100% !important;
  max-inline-size: none !important;
  width: 100% !important;
  margin-inline: 0 !important;
  margin-block-start: 0 !important;
  --padding-inline-start: max(
    var(--ksi-safe-inline-start),
    calc((100% - var(--ksi-content-rail)) / 2)
  ) !important;
  --padding-inline-end: max(
    var(--ksi-safe-inline-end),
    calc((100% - var(--ksi-content-rail)) / 2)
  ) !important;
  padding-inline:
    max(var(--ksi-safe-inline-start), calc((100% - var(--ksi-content-rail)) / 2))
    max(var(--ksi-safe-inline-end), calc((100% - var(--ksi-content-rail)) / 2)) !important;
  /* Cover subpixel hairlines between the fixed header and page content. */
  box-shadow: 0 2px 0 0 #00001c;
}

[data-elementor-type="wp-page"],
.elementor-location-single {
  margin-block-start: calc(var(--ksi-header-offset, 60px) - 2px);
}

.ksi-static-background {
  background-image: var(--ksi-static-background) !important;
  background-position: center;
  background-size: cover;
}

.elementor-main-swiper {
  position: relative;
  overflow: hidden;
}

.elementor-main-swiper > .swiper-wrapper {
  display: flex;
  transform: translate3d(0, 0, 0);
  transition: transform 400ms ease;
}

.elementor-main-swiper .swiper-slide {
  flex: 0 0 100%;
  inline-size: 100%;
}

.elementor-main-swiper .swiper-pagination {
  display: flex;
  position: absolute;
  z-index: 3;
  inset-block-end: 0.75rem;
  inset-inline: 50% auto;
  gap: 0.4rem;
  transform: translateX(-50%);
}

.elementor-main-swiper .swiper-pagination button {
  min-block-size: 0.65rem;
  inline-size: 0.65rem;
  block-size: 0.65rem;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 50%;
  background: transparent;
}

.elementor-main-swiper .swiper-pagination button[aria-current="true"] {
  background: #fff;
}

.ksi-a11y-toggle {
  display: grid;
  position: fixed;
  z-index: 2000;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: 0;
  place-items: center;
  color: #fff;
  background: #2563eb;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgb(0 0 0 / 30%);
  font: 700 1rem/1 Inter, sans-serif;
}

.ksi-a11y-panel {
  display: none;
  position: fixed;
  z-index: 1999;
  inset-block-end: 4.5rem;
  inset-inline-end: 1rem;
  inline-size: min(19rem, calc(100vw - 2rem));
  padding: 1rem;
  color: #13294b;
  background: #fff;
  border: 1px solid #4d9cd3;
  border-radius: 0.4rem;
  box-shadow: 0 12px 36px rgb(0 0 0 / 28%);
  font: 400 0.875rem/1.4 Inter, sans-serif;
}

.ksi-a11y-panel[aria-hidden="false"] {
  display: grid;
  gap: 0.6rem;
}

.ksi-a11y-panel strong {
  font-size: 1rem;
}

.ksi-a11y-panel button {
  padding: 0.55rem 0.75rem;
  color: #fff;
  background: #13294b;
  border: 0;
  text-align: start;
}

[data-id="2003ba8"],
[data-id="a7c0571"] {
  display: none !important;
}

[data-id="ac0a1a7"] {
  --width: 100% !important;
  flex-basis: 100% !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
}

[data-id="9e9d4ac"] {
  --width: 100% !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  margin-inline: 0 !important;
}

@media (width >= 48rem) {
  [data-id="714440dc"],
  [data-id="5d9884df"] {
    --width: 50% !important;
    flex-basis: 50% !important;
    inline-size: 50% !important;
    max-inline-size: 50% !important;
  }
}

.ksi-sbg-credit {
  color: inherit;
  text-decoration: none;
}

.ksi-sbg-credit:is(:hover, :focus-visible) {
  color: #4d9cd3;
  text-decoration: underline;
}

html.ksi-large-text {
  font-size: 118%;
}

html.ksi-high-contrast {
  filter: contrast(135%);
}

html.ksi-reduce-motion *,
html.ksi-reduce-motion *::before,
html.ksi-reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

@media (width <= 64rem) {
  .elementor-nav-menu__container[aria-hidden="true"] {
    display: none !important;
  }

  .elementor-nav-menu__container.ksi-menu-open {
    display: block !important;
  }

  .elementor-nav-menu__container .sub-menu {
    display: none !important;
  }

  .elementor-nav-menu__container
    .menu-item-has-children.ksi-submenu-open
    > .sub-menu {
    display: block !important;
  }
}

/* Maintained responsive layer for the static site. */
.ksi-retired-page {
  min-width: 0;
  margin: 0;
}

.ksi-retired-page *,
.ksi-retired-page *::before,
.ksi-retired-page *::after {
  box-sizing: border-box;
}

.ksi-retired-page main {
  inline-size: 100%;
  max-inline-size: 100%;
  padding-inline: clamp(1rem, 5vw, 2rem) !important;
}

:where(
    .elementor-widget-text-editor,
    .elementor-widget-theme-post-content,
    .elementor-heading-title,
    .elementor-button-text,
    .elementor-post__title,
    .elementor-post__excerpt,
    .ksi-menu-item-link-5588,
    .ksi-submenu-5588
  ) {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.elementor-heading-title {
  overflow-wrap: break-word;
  word-break: normal;
}

:where(.elementor-widget-image, .elementor-image, .elementor-post__thumbnail) img {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  object-fit: cover;
}

.elementor-posts-container,
.elementor-loop-container,
.elementor-grid {
  min-inline-size: 0;
}

:where(.elementor-posts-container, .elementor-loop-container) > * {
  min-inline-size: 0;
}

.elementor-post__thumbnail__link {
  display: block;
  overflow: hidden;
}

.elementor-widget-theme-post-content
  :where(p, li, blockquote, figcaption),
.elementor-location-single
  :where(.elementor-widget-text-editor, .elementor-widget-theme-post-content)
  :where(p, li) {
  max-inline-size: 72ch;
  line-height: 1.7;
}

.elementor-widget-theme-post-content
  :where(table, pre, code, iframe, embed),
.elementor-widget-text-editor :where(table, pre, code, iframe, embed) {
  max-inline-size: 100%;
}

.elementor-widget-theme-post-content :where(pre, table),
.elementor-widget-text-editor :where(pre, table) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.elementor-widget-theme-post-content a,
.elementor-widget-text-editor a {
  overflow-wrap: anywhere;
}

.e-n-accordion-item > summary,
.elementor-tab-title {
  min-block-size: var(--ksi-touch-target);
  padding-block: max(0.65rem, env(safe-area-inset-top, 0px));
  cursor: pointer;
  overflow-wrap: anywhere;
}

.e-n-accordion-item > summary::marker {
  font-size: 1em;
}

.ksi-service-menu-5588,
.ksi-menu-list-5588,
.ksi-submenu-5588 {
  max-inline-size: 100%;
}

.ksi-menu-list-5588,
.ksi-submenu-5588 {
  padding-inline-start: 0;
  list-style: none;
}

.ksi-menu-item-link-5588,
.ksi-submenu-item-5588 > a {
  display: flex;
  min-block-size: var(--ksi-touch-target);
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 0.75rem;
}

[data-ksi-protected-form] :where(input, select, textarea, button) {
  max-inline-size: 100%;
  min-block-size: var(--ksi-touch-target);
}

[data-ksi-protected-form] :where(input, select, textarea) {
  inline-size: 100%;
}

.ksi-form-honeypot {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  min-block-size: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.ksi-form-message {
  margin-block: 0.75rem;
  font: inherit;
}

@media (width <= 64rem) {
  [data-elementor-type="header"] .elementor-nav-menu__container {
    max-block-size: calc(100svh - 6rem);
    overflow: auto;
    overscroll-behavior: contain;
  }

  [data-elementor-type="header"] .elementor-nav-menu--dropdown {
    inline-size: min(100%, 32rem);
    max-inline-size: 100vw;
  }

  [data-elementor-type="header"] .elementor-menu-toggle {
    min-inline-size: 3rem;
    min-block-size: 3rem;
  }

  [data-elementor-type="header"] .sub-menu a {
    padding-inline-start: clamp(1.5rem, 7vw, 3rem);
    white-space: normal;
  }
}

@media (width <= 47.9375rem) {
  :where(
      .elementor-posts-container,
      .elementor-loop-container
    ) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :where(.e-con, .e-con-inner) {
    min-inline-size: 0;
  }

  .elementor-widget-wrap,
  .elementor-column,
  .elementor-column-wrap {
    min-inline-size: 0;
    max-inline-size: 100%;
  }

  .elementor-button {
    max-inline-size: 100%;
    padding-inline: clamp(1rem, 5vw, 1.5rem);
    white-space: normal;
  }

  .elementor-widget-theme-post-content
    :where(h1, h2, h3, h4, p, li, blockquote),
  .elementor-location-single
    .elementor-widget-text-editor
    :where(h1, h2, h3, h4, p, li, blockquote) {
    max-inline-size: 100%;
  }

  .elementor-post__thumbnail img {
    aspect-ratio: 16 / 10;
  }

  .ksi-service-menu-5588 {
    inline-size: 100%;
  }
}

@media (width <= 30rem) {
  :root {
    --ksi-fluid-gutter: 1rem;
  }

  .ksi-a11y-toggle {
    inset-block-end: max(0.75rem, env(safe-area-inset-bottom));
    inset-inline-end: 0.75rem;
  }

  .ksi-a11y-panel {
    inset-inline: 0.75rem;
    inline-size: auto;
  }
}

/* Responsive and viewport-safety refinements (320px–1920px). */
:root {
  --ksi-header-height: 3.9375rem;
  --ksi-header-offset: calc(
    var(--ksi-header-height) + env(safe-area-inset-top, 0px)
  );
  --ksi-safe-inline-start: env(safe-area-inset-left, 0px);
  --ksi-safe-inline-end: env(safe-area-inset-right, 0px);
}

html {
  scroll-padding-block-start: calc(var(--ksi-header-offset) + 1rem);
}

body {
  min-block-size: 100svh;
  padding-inline:
    var(--ksi-safe-inline-start)
    var(--ksi-safe-inline-end);
}

:where(
    main,
    [data-elementor-type="wp-page"],
    .elementor-location-single,
    [id]
  ) {
  scroll-margin-block-start: calc(var(--ksi-header-offset) + 1rem);
}

[data-elementor-type="header"] > .elementor-element {
  inset-block-start: env(safe-area-inset-top, 0px);
}

[data-elementor-type="header"]
  :where(
    .elementor-item,
    .elementor-sub-item,
    .elementor-menu-toggle,
    .elementor-button
  ),
.elementor-social-icon,
.elementor-cta__button,
.elementor-swiper-button,
.swiper-pagination button {
  min-inline-size: var(--ksi-touch-target);
  min-block-size: var(--ksi-touch-target);
}

[data-elementor-type="header"] .elementor-item,
[data-elementor-type="header"] .elementor-sub-item {
  display: flex;
  align-items: center;
}

[data-elementor-type="header"] .elementor-menu-toggle {
  justify-content: center;
}

[data-elementor-type="header"] img {
  max-block-size: min(3.25rem, calc(var(--ksi-header-height) - 0.75rem));
  inline-size: auto;
  object-fit: contain;
}

[data-elementor-type="header"] .elementor-element-1debc7a5,
[data-elementor-type="header"] .elementor-element-1debc7a5 a {
  display: flex !important;
  justify-content: flex-start !important;
  text-align: start !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

.elementor-main-swiper .swiper-pagination {
  align-items: center;
  gap: 0;
}

.elementor-main-swiper .swiper-pagination button {
  display: grid;
  inline-size: var(--ksi-touch-target);
  block-size: var(--ksi-touch-target);
  border: 0;
  place-items: center;
}

.elementor-main-swiper .swiper-pagination button::before {
  inline-size: 0.65rem;
  block-size: 0.65rem;
  border: 1px solid #fff;
  border-radius: 50%;
  content: "";
}

.elementor-main-swiper
  .swiper-pagination
  button[aria-current="true"] {
  background: transparent;
}

.elementor-main-swiper
  .swiper-pagination
  button[aria-current="true"]::before {
  background: #fff;
}

.ea11y-skip-to-content-link,
.ksi-skip-link {
  min-block-size: var(--ksi-touch-target);
}

.ksi-services-page [data-elementor-type="wp-page"] > .e-con:nth-child(2)
  .e-con-inner {
  align-items: start;
  gap: clamp(1rem, 4vw, 4rem);
}

.ksi-services-page
  [data-elementor-type="wp-page"]
  > .e-con:nth-child(2):has(> .e-con) {
  --width: 100% !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  min-inline-size: 0;
  overflow-x: clip;
}

.ksi-services-page
  [data-elementor-type="wp-page"]
  > .e-con:nth-child(2):has(> .e-con)
  > .e-con {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.elementor-37 .elementor-element.elementor-element-38f776e4 {
  --padding-inline-start: 0 !important;
  --padding-inline-end: 0 !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
  align-self: flex-start !important;
}

/* Home hero: keep "Kreditor Services. USA" paired like the ksi.usa logo. */
.elementor-37
  .elementor-element.elementor-element-103b12f {
  --padding-inline-start: 0 !important;
  --padding-inline-end: 0 !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}

.elementor-37
  .elementor-element.elementor-element-103b12f
  > .e-con-inner {
  flex-wrap: nowrap;
  align-items: baseline;
  column-gap: 0.28em;
  row-gap: 0;
  --padding-inline-start: 0 !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}

.elementor-37 .elementor-element.elementor-element-5a019a4,
.elementor-37 .elementor-element.elementor-element-c6f2f1c {
  --container-widget-width: auto !important;
  inline-size: auto !important;
  max-inline-size: none !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.elementor-37
  .elementor-element.elementor-element-5a019a4
  .elementor-heading-title,
.elementor-37
  .elementor-element.elementor-element-c6f2f1c
  .elementor-heading-title {
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

@media (width <= 85.375rem) {
  .elementor-37
    .elementor-element.elementor-element-5a019a4
    .elementor-heading-title,
  .elementor-37
    .elementor-element.elementor-element-c6f2f1c
    .elementor-heading-title {
    font-size: 26px !important;
  }
}

@media (width <= 64rem) {
  .elementor-37
    .elementor-element.elementor-element-5a019a4
    .elementor-heading-title,
  .elementor-37
    .elementor-element.elementor-element-c6f2f1c
    .elementor-heading-title {
    font-size: 26px !important;
  }
}

@media (width <= 47.9375rem) {
  .elementor-37
    .elementor-element.elementor-element-103b12f
    > .e-con-inner {
    column-gap: 0.22em;
  }

  .elementor-37
    .elementor-element.elementor-element-5a019a4
    .elementor-heading-title,
  .elementor-37
    .elementor-element.elementor-element-c6f2f1c
    .elementor-heading-title {
    font-size: 22px !important;
    line-height: 1.1 !important;
  }
}

:is(
    [data-id="91550e6"],
    [data-id="9270795"],
    [data-id="76f4d64"],
    [data-id="5d0e034"]
  )
  .elementor-heading-title {
  inline-size: 100%;
  block-size: 1px;
  overflow: hidden;
  color: transparent !important;
  background: currentColor;
  border-block-start: 1px solid #030000;
  font-size: 0 !important;
  line-height: 0 !important;
  white-space: nowrap;
}

.ksi-services-page
  [data-elementor-type="wp-page"]
  > .e-con:nth-child(n + 3):has(> .e-con-inner > a.e-con)
  > .e-con-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 2.5vw, 2rem);
}

.ksi-services-page
  [data-elementor-type="wp-page"]
  > .e-con:nth-child(n + 3):has(> .e-con-inner > a.e-con)
  > .e-con-inner
  > a.e-con {
  inline-size: 100% !important;
  min-block-size: clamp(18rem, 32vw, 30rem);
  overflow: hidden;
  background-position: center;
  background-size: cover;
}

.ksi-profile-page [data-elementor-type="wp-page"] > .e-con:nth-child(2) {
  min-inline-size: 0;
}

.ksi-profile-page
  [data-elementor-type="wp-page"]
  > .e-con:nth-child(2)
  > .e-con {
  min-inline-size: 0;
}

.ksi-profile-page
  [data-elementor-type="wp-page"]
  > .e-con:nth-child(2)
  .e-grid {
  grid-template-columns: minmax(0, 1fr);
}

.ksi-profile-page
  [data-elementor-type="wp-page"]
  > .e-con:nth-child(2)
  .elementor-social-icon {
  display: inline-grid;
  place-items: center;
}

.ksi-profile-page
  [data-elementor-type="wp-page"]
  > .e-con:nth-child(2)
  .elementor-widget-text-editor {
  min-inline-size: 0;
}

.ksi-profile-page
  [data-elementor-type="wp-page"]
  > .e-con:nth-child(2)
  .elementor-widget-text-editor
  :where(p, li) {
  max-inline-size: 72ch;
  line-height: 1.65;
}

.ksi-profile-page
  [data-elementor-type="wp-page"]
  > .e-con:nth-child(2)
  > .e-con:last-child
  > .e-con {
  min-block-size: clamp(24rem, 58vw, 52rem);
  background-position: center top;
  background-size: cover;
}

.elementor-location-footer :where(a, .elementor-icon) {
  min-block-size: var(--ksi-touch-target);
}

/* Footer brand mark: 2× the Elementor default render size (~67×21 → ~134×42). */
.elementor-217 .elementor-element.elementor-element-a8c5135 {
  --container-widget-width: 8.375rem !important;
  inline-size: 8.375rem !important;
  width: 8.375rem !important;
  max-inline-size: 8.375rem !important;
  max-width: 8.375rem !important;
}

.elementor-217 .elementor-element.elementor-element-a8c5135 img {
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  block-size: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Compact footer + shared left rail with header / section titles */
.elementor-location-footer.elementor-217 .elementor-element-7b655b6,
.elementor-location-footer.elementor-217 .elementor-element-407bbdd5,
.elementor-location-footer.elementor-217 .elementor-element-3439278a {
  --padding-inline-start: 0 !important;
  --padding-inline-end: 0 !important;
  padding-inline: 0 !important;
}

.elementor-location-footer.elementor-217 .elementor-element-7b655b6 > .e-con-inner,
.elementor-location-footer.elementor-217 .elementor-element-407bbdd5 > .e-con-inner,
.elementor-location-footer.elementor-217 .elementor-element-3439278a > .e-con-inner {
  --content-width: var(--ksi-content-rail) !important;
  --container-max-width: var(--ksi-content-max) !important;
  inline-size: var(--ksi-content-rail) !important;
  width: var(--ksi-content-rail) !important;
  max-inline-size: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

.elementor-location-footer.elementor-217 .elementor-element-407bbdd5 {
  --padding-block-start: 1rem !important;
  --padding-block-end: 0.75rem !important;
  --gap: 0.75rem !important;
  align-items: flex-start !important;
}

.elementor-location-footer.elementor-217 .elementor-element-407bbdd5 > .e-con-inner {
  gap: clamp(1.25rem, 3vw, 2.5rem) !important;
}

.elementor-location-footer.elementor-217 .elementor-element-3439278a > .e-con-inner {
  align-items: center !important;
  column-gap: clamp(1rem, 2.5vw, 2rem) !important;
}

.elementor-location-footer.elementor-217 .elementor-element-617b0ce {
  margin-inline-start: auto !important;
}

/* Kill oversized footer columns / spacers that leave empty blue. */
.elementor-location-footer.elementor-217 .elementor-element-22a70156,
.elementor-location-footer.elementor-217 .elementor-element-7f3da33b,
.elementor-location-footer.elementor-217 .elementor-element-30615412 {
  --min-height: 0 !important;
  min-block-size: 0 !important;
  --padding-block-start: 0 !important;
  --margin-block-start: 0 !important;
}

.elementor-location-footer.elementor-217 .elementor-element-a48a1f3,
.elementor-location-footer.elementor-217 .elementor-element-386368d {
  --spacer-size: 0.75rem !important;
  display: none !important;
}

.elementor-location-footer.elementor-217 .elementor-element-3439278a {
  --min-height: 0 !important;
  --padding-block-start: 0.75rem !important;
  --padding-block-end: 0.75rem !important;
  margin-block-start: 0 !important;
}

.elementor-location-footer .elementor-element-84953d8:empty {
  display: none !important;
}

.elementor-location-footer .elementor-element-99ca9aa,
.elementor-location-footer .elementor-element-99ca9aa :where(p, h5, a) {
  color: #fff !important;
}

.elementor-location-footer .elementor-element-99ca9aa a {
  text-decoration: none;
}

.elementor-location-footer .elementor-element-3439278a > .e-con-inner {
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  row-gap: 0.4rem !important;
}

/* Explore cards: span the same rail as "Explore ksi.usa" */
.elementor-37 .elementor-element-0e90c7d {
  --content-width: 100% !important;
  --container-max-width: 100% !important;
  --width: 100% !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  margin-inline: 0 !important;
}

.elementor-37 .elementor-element-0e90c7d > .e-con-inner {
  --content-width: 100% !important;
  --container-max-width: 100% !important;
  inline-size: 100% !important;
  width: 100% !important;
  max-inline-size: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
}

.elementor-location-footer .ksi-footer-meta {
  flex: 1 1 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.25rem;
  margin-block-start: 0.15rem;
}

.elementor-location-footer .ksi-footer-disclaimer,
.elementor-location-footer .ksi-legal-disclaimer {
  display: block;
  flex: 1 1 auto;
  min-inline-size: 0;
  margin: 0;
  color: rgb(255 255 255 / 72%);
  font-size: 0.6875rem;
  line-height: 1.35;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.elementor-location-footer .ksi-footer-meta .ksi-sbg-credit {
  flex: 0 0 auto;
  margin-inline-start: auto;
  white-space: nowrap;
  color: rgb(255 255 255 / 55%);
  font-size: 0.6875rem;
  line-height: 1.35;
}

.elementor-location-footer .elementor-element-b2e27ca {
  font-size: 0.8rem;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .elementor-location-footer .ksi-footer-disclaimer,
  .elementor-location-footer .ksi-legal-disclaimer {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .elementor-location-footer .ksi-footer-meta {
    flex-wrap: wrap;
  }
}

/* Homepage labels: keep source casing (no small-caps / uppercase). */
.elementor-37 .elementor-nav-menu .elementor-item,
.elementor-37 .elementor-element-0e90c7d h5,
.elementor-37 .elementor-element-5a019a4 .elementor-heading-title,
.elementor-37 .elementor-element-34230ba .elementor-heading-title,
.elementor-37 .elementor-element-30244b2 .elementor-heading-title,
.elementor-37 .elementor-element-c6f2f1c .elementor-heading-title {
  font-variant: normal;
  font-feature-settings: normal;
  text-transform: none;
}

/* .services band (was the Trust Center banner until 10 Oct 2026) */
.elementor-37 .elementor-element-5f38d7d {
  position: relative;
  isolation: isolate;
}

.elementor-37 .elementor-element-5f38d7d::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* The sister site's .practice fade, values copied exactly (Teresa, 10 Oct 2026). The page builder's own blue
     overlay (#1132948C, post-37.css) outranks this rule on specificity, so its colour is switched off here. */
  background: linear-gradient(90deg, rgba(0, 0, 28, 0.88) 0%, rgba(0, 0, 28, 0.62) 48%, rgba(0, 0, 28, 0.28) 100%);
  background-color: transparent !important;
}

.elementor-37 .elementor-element-5f38d7d > .e-con-inner,
.elementor-37 .elementor-element-5f38d7d > .ksi-trust-hit + .e-con-inner {
  position: relative;
  z-index: 2;
}

.elementor-37 .ksi-trust-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.elementor-37 .elementor-element-5f38d7d .e-con-inner {
  pointer-events: none;
}

.elementor-37 .elementor-element-5f38d7d .elementor-button {
  pointer-events: auto;
  position: relative;
  z-index: 4;
}

.elementor-37 .ksi-trust-copy {
  max-inline-size: 36rem;
  margin-block: 0.85rem 0;
  color: rgb(255 255 255 / 92%);
  font-size: clamp(0.95rem, 1.35vw, 1.1rem);
  line-height: 1.55;
  font-weight: 400;
}

.elementor-37 .elementor-element-30244b2 .elementor-heading-title {
  color: #72c7ff;
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  letter-spacing: 0.02em;
}

.elementor-37 .elementor-element-68642a1 .elementor-heading-title {
  max-inline-size: none;
  white-space: nowrap;
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  line-height: 1.15;
  font-weight: 600;
  color: #fff;
}

@media (width <= 30rem) {
  .elementor-37 .elementor-element-68642a1 .elementor-heading-title {
    white-space: normal;
    font-size: clamp(1.45rem, 8vw, 2rem);
  }
}

.elementor-37 .elementor-element-3c7c2fd .elementor-heading-title a {
  color: inherit;
  text-decoration: none;
}

.elementor-37 .elementor-element-3c7c2fd .elementor-heading-title a:hover,
.elementor-37 .elementor-element-3c7c2fd .elementor-heading-title a:focus-visible {
  color: #72c7ff;
}

.screen-reader-text {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (width <= 85.375rem) {
  :is(
      [data-elementor-type="wp-page"],
      .elementor-location-single
    )
    > .e-con:first-child
    > .e-con-inner {
    min-inline-size: 0;
    max-inline-size: 100%;
    flex-wrap: wrap;
  }

  :is(
      [data-elementor-type="wp-page"],
      .elementor-location-single
    )
    > .e-con:first-child
    > .e-con-inner
    > .e-con {
    --width: auto !important;
    min-inline-size: 0;
    max-inline-size: 100%;
    flex: 1 1 auto !important;
  }

  .ksi-services-page
    [data-elementor-type="wp-page"]
    > .e-con:nth-child(2):has(> .e-con) {
    --width: 100% !important;
    --flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start;
  }

  .ksi-services-page
    [data-elementor-type="wp-page"]
    > .e-con:nth-child(2):has(> .e-con)
    > .e-con {
    --width: min(100%, 22rem) !important;
    flex: 1 1 18rem !important;
    max-inline-size: 100%;
  }
}

@media (width >= 90rem) {
  :root {
    --ksi-fluid-gutter: clamp(4rem, 6vw, 7.5rem);
    --ksi-content-max: 90rem;
  }

  :is(
      .elementor[data-elementor-type="wp-page"],
      .elementor-location-single
    )
    > .e-con.e-parent.e-con-boxed
    > .e-con-inner {
    --container-max-width: 90rem;
  }
}

@media (width <= 64rem) {
  :root {
    --ksi-header-height: 6.1875rem;
  }

  .elementor-37
    .elementor-element.elementor-element-0e90c7d
    > .e-con-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 4vw, 2rem);
  }

  .elementor-37
    .elementor-element.elementor-element-0e90c7d
    > .e-con-inner
    > .e-con {
    inline-size: 100% !important;
    max-inline-size: none !important;
    margin: 0 !important;
  }

  .ksi-services-page
    [data-elementor-type="wp-page"]
    > .e-con:nth-child(2):has(> .e-con) {
    --flex-direction: column !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    align-items: stretch;
  }

  .ksi-services-page
    [data-elementor-type="wp-page"]
    > .e-con:nth-child(2):has(> .e-con)
    > .e-con {
    --width: 100% !important;
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    flex: 1 1 100% !important;
    margin-inline: 0 !important;
  }

  [data-elementor-type="header"] .elementor-nav-menu__container {
    max-block-size: calc(
      100dvh - var(--ksi-header-offset) - env(safe-area-inset-bottom, 0px)
    );
    padding-block-end: env(safe-area-inset-bottom, 0px);
  }

  [data-elementor-type="header"] .elementor-nav-menu--dropdown {
    inline-size: 100%;
  }

  [data-elementor-type="header"]
    .elementor-nav-menu--dropdown
    :where(.elementor-item, .elementor-sub-item) {
    min-block-size: 3rem;
    padding-block: 0.75rem;
    padding-inline-end: max(1rem, var(--ksi-safe-inline-end));
  }

  [data-elementor-type="header"] .sub-arrow {
    display: inline-grid;
    min-inline-size: var(--ksi-touch-target);
    min-block-size: var(--ksi-touch-target);
    margin-inline-start: auto;
    place-items: center;
  }
}

@media (width >= 48rem) {
  .ksi-profile-page
    [data-elementor-type="wp-page"]
    > .e-con:nth-child(2) {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
    align-items: stretch;
  }

  .ksi-profile-page
    [data-elementor-type="wp-page"]
    > .e-con:nth-child(2)
    > .e-con {
    inline-size: 100%;
  }
}

@media (width <= 47.9375rem) {
  .elementor-37
    .elementor-element.elementor-element-0e90c7d
    > .e-con-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .ksi-profile-page
    [data-elementor-type="wp-page"]
    > .e-con:nth-child(2) {
    display: flex;
    flex-direction: column;
  }

  .ksi-profile-page
    [data-elementor-type="wp-page"]
    > .e-con:nth-child(2)
    > .e-con:last-child {
    order: -1;
  }

  .ksi-profile-page
    [data-elementor-type="wp-page"]
    > .e-con:nth-child(2)
    > .e-con:last-child
    > .e-con {
    min-block-size: clamp(22rem, 118vw, 38rem);
  }

  .elementor-location-footer .e-con-inner {
    min-inline-size: 0;
  }
}

@media (width <= 22.5rem) {
  :root {
    --ksi-fluid-gutter: 0.875rem;
  }

  .elementor-button,
  .elementor-cta__button {
    inline-size: 100%;
    justify-content: center;
  }

  .ksi-a11y-panel {
    inset-inline:
      max(0.5rem, var(--ksi-safe-inline-start))
      max(0.5rem, var(--ksi-safe-inline-end));
  }
}


/* KSI.P3 pillar headings: prevent Performance crop on resize */
.elementor-325 .elementor-element-36ca06f,
.elementor-325 .elementor-element-5d2bad5,
.elementor-325 .elementor-element-3728a58,
.elementor-325 .elementor-element-146ed9b,
.elementor-325 .elementor-element-b134959 {
  overflow: visible !important;
}

.elementor-325 .elementor-element-a3d0802,
.elementor-325 .elementor-element-7a803d5,
.elementor-325 .elementor-element-990eb21 {
  --container-widget-width: 100% !important;
  width: 100% !important;
  max-width: none !important;
  min-inline-size: 0;
  overflow: visible !important;
}

.elementor-325 .elementor-element-a3d0802 .elementor-heading-title,
.elementor-325 .elementor-element-7a803d5 .elementor-heading-title,
.elementor-325 .elementor-element-990eb21 .elementor-heading-title {
  overflow: visible !important;
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  white-space: nowrap !important;
  max-inline-size: none !important;
  font-size: clamp(1.75rem, 4.8vw, 3.75rem) !important;
  line-height: 1.15 !important;
}

.elementor-325 .elementor-element-679d0071 {
  width: 100% !important;
  max-width: 100% !important;
  --container-widget-width: 100% !important;
  overflow: visible !important;
}

.elementor-325 .elementor-element-679d0071 .elementor-heading-title {
  overflow: visible !important;
  overflow-wrap: break-word;
  white-space: normal;
  max-inline-size: none !important;
  font-size: clamp(1.35rem, 3.2vw, 2.8rem) !important;
}

@media (width <= 48rem) {
  .elementor-325 .elementor-element-a3d0802 .elementor-heading-title,
  .elementor-325 .elementor-element-7a803d5 .elementor-heading-title,
  .elementor-325 .elementor-element-990eb21 .elementor-heading-title {
    white-space: normal !important;
    font-size: clamp(1.5rem, 8vw, 2.25rem) !important;
  }
}

/* .firm page: keep section/partner headers from clipping on resize */
.elementor-313 .elementor-element-61fe5b55,
.elementor-313 .elementor-element-49929de,
.elementor-313 .elementor-element-c8d0ec1,
.elementor-313 .elementor-element-fd27cc6,
.elementor-313 .elementor-element-ee4024d,
.elementor-313 .elementor-element-3b24e97,
.elementor-313 .elementor-element-b2b59d7 {
  overflow: visible !important;
  min-inline-size: 0;
}

/* 🔴 FIXED 2026-08-11 — the `)` closing this `:is(` was missing.
   Consequence, measured not guessed: the CSS parser swallowed the `{` into the
   :is() argument list and then consumed the REST OF THE FILE as one malformed
   selector. Chrome reported 171 parsed rules for a 1,778-line stylesheet, and
   every rule below this point — about 145 lines of .firm and .services layout
   fixes — had never once applied on the live site. It is why the .firm page
   renders as a narrow justified column with an empty right half.
   The defect is pre-existing and uncommitted; it is not in the last commit.
   Deliberately NOT adding `.elementor-element-12bfdc1` here even though the
   near-identical rule 12 lines below lists it — that would be guessing at
   intent. Closing the bracket is the whole fix. */
.elementor-313
  :is(
    .elementor-element-5d87931c,
.elementor-element-fa5c370,
.elementor-element-0e8da9c,
.elementor-element-13ae47a
  ) {
  width: auto !important;
  max-width: 100% !important;
  --container-widget-width: 100% !important;
  overflow: visible !important;
}

.elementor-313
  :is(
    .elementor-element-5d87931c,
.elementor-element-fa5c370,
.elementor-element-0e8da9c,
.elementor-element-13ae47a,
.elementor-element-12bfdc1
  )
  .elementor-heading-title{
  overflow: visible !important;
  overflow-wrap: normal;
  word-break: normal;
  max-inline-size: none !important;
  white-space: nowrap;
  font-size: clamp(1.35rem, 3.4vw, 2.8rem) !important;
  line-height: 1.15 !important;
}

.elementor-313 .elementor-element-5d87931c .elementor-heading-title {
  font-size: clamp(1.75rem, 4.5vw, 2.8rem) !important;
}

/* .firm page: body copy uses more horizontal space */
.elementor-313 .elementor-element-e003b9e > .e-con-inner {
  inline-size: min(
    calc(100% - (2 * var(--ksi-fluid-gutter))),
    72rem
  ) !important;
  max-inline-size: 100% !important;
  width: 100%;
}

.elementor-313 .elementor-element-4a814c9,
.elementor-313 .elementor-element-7905146 {
  --container-widget-width: 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

.elementor-313 .elementor-element-4a814c9 :where(p, li, span),
.elementor-313 .elementor-element-7905146 :where(p, li, span) {
  max-inline-size: none !important;
}

.elementor-313 .elementor-element-e003b9e {
  --content-width: 72rem;
}

@media (width <= 48rem) {
  .elementor-313
    :is(
      .elementor-element-5d87931c,
      .elementor-element-fa5c370,
      .elementor-element-0e8da9c,
      .elementor-element-13ae47a,
      .elementor-element-d77af96,
      .elementor-element-602f936,
      .elementor-element-12bfdc1
    )
    .elementor-heading-title {
    white-space: normal;
    font-size: clamp(1.35rem, 7vw, 2rem) !important;
  }
}

/* Legal policy pages: use more of the page width (less empty right margin) */
.elementor-3 .elementor-element-6a1384ab,
.elementor-1896 .elementor-element-4ea671a3,
.elementor-1903 .elementor-element-6efc2fb {
  width: 100% !important;
  max-width: 100% !important;
}

.elementor-3 .elementor-element-6a1384ab :where(p, li, h2, h3, h4, ul, ol),
.elementor-1896 .elementor-element-4ea671a3 :where(p, li, h2, h3, h4, ul, ol),
.elementor-1903 .elementor-element-6efc2fb :where(p, li, h2, h3, h4, ul, ol) {
  max-inline-size: none !important;
}

.elementor-3 .elementor-element-e6d4a46 > .e-con-inner,
.elementor-1896 .elementor-element-6e34a418 > .e-con-inner,
.elementor-1903 .elementor-element-e6cd728 > .e-con-inner {
  inline-size: min(
    calc(100% - (2 * var(--ksi-fluid-gutter))),
    72rem
  ) !important;
  max-inline-size: 100% !important;
  width: 100%;
}

.elementor-3 .elementor-element-e6d4a46,
.elementor-1896 .elementor-element-6e34a418,
.elementor-1903 .elementor-element-e6cd728 {
  --content-width: 72rem;
}

/* ==========================================================================
   SBG 2026-08-04 — KSI USA compliance updates
   (compliance@kreditorservices.com instructions, 2026-08-03)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Footer — "reduce the size of the footer, too long".
   Done by tightening the footer's own spacing, NOT by removing links: the
   compliance note didn't say which links to drop, and the two <nav> blocks
   in the footer are the desktop/mobile pair (the second is aria-hidden and
   only shows on small screens), so neither is a true duplicate.
   The main footer container carries min-height:485px plus 42px top padding
   and two 50px spacers — that's what makes it so tall.
   -------------------------------------------------------------------------- */
.elementor-element-7f3da33b {
  --min-height: 0px !important;
  --padding-top: 28px !important;
  --padding-bottom: 8px !important;
}
.elementor-element-30615412 {
  --gap: 22px 22px !important;
  --row-gap: 22px !important;
  --column-gap: 22px !important;
}
.elementor-element-7b655b6 {
  --padding-top: 18px !important;
  --padding-bottom: 12px !important;
}
/* The two large spacers top and bottom of the footer. */
.elementor-element-a48a1f3,
.elementor-element-386368d {
  --spacer-size: 8px !important;
}
.elementor-element-a48a1f3 .elementor-spacer-inner,
.elementor-element-386368d .elementor-spacer-inner {
  height: 8px !important;
}




/* ==========================================================================
   NEW KSI DESIGN SYSTEM — HEADER, FOOTER AND SHARED GUARDS
   Ported 2026-08-11 from the KSI sister-site build, which carries the design
   Teresa approved in August 2026 (KSI Home.dc.html / KSI Footer.dc.html).

   WHAT THIS IS: the global chrome only — sticky navy header with the live-text
   logo and the Make a Payment button, the four-column footer, and the
   site-wide conversion guards. Page bodies are untouched; no copy changed.

   WHAT IT IS NOT: the sister site also has 25 pages rebuilt page-by-page to
   Teresa's per-page designs (home, .firm, .practice, .people, contact,
   careers, make-a-payment, the landing pages and the lawyer profiles). Those
   are NOT in this port — they need content decisions, not styling.

   The ported rules below are byte-identical to the sister site apart from the
   brand string. Do not "tidy" them: the comments record measurements, and
   several of the values were arrived at by fixing a defect that came back.
   ========================================================================== */

/* ---- ported from the ksi.usa sister-site design system: FOOTER (lines 1185-1367) ---- */
/* --------------------------------------------------------------------------
   Footer — rebuilt to Teresa's KSI Footer.dc.html design (Aug 2026).
   -------------------------------------------------------------------------- */
.ksi-footer {
  background: #00001c;
  color: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  /* Gutter moved to .ksi-f-inner 2026-08-06 so the footer uses the SAME box
     model as every page hero: a 1280px box with 40px of padding inside it.
     Keeping the gutter out here and the max-width in there put the two on
     different geometry, which is why nothing shared a left edge. */
  padding: 80px 0 0;
  box-sizing: border-box;
}
.ksi-footer a { color: #fff; text-decoration: none; }
.ksi-footer a:hover, .ksi-footer a:focus { color: #4b9cd3; }
.ksi-f-inner {
  /* --- KSI CANONICAL CONTAINER (2026-08-06) ------------------------------
     1280px box, 40px inner gutter → a 1200px content column, centred.
     This is Teresa's exact SiteFooter spec (max-width:1280px; padding:… 40px)
     and it matches every page hero. Header, footer and page titles now share
     one left edge at every viewport. Do not change one of these three without
     changing all of them. */
  max-width: 1280px;
  padding-inline: 40px;
  box-sizing: border-box;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* top row: brand + social + payment */
.ksi-f-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,.14);
  padding-bottom: 36px;
}
.ksi-f-brand { display: flex; flex-direction: column; gap: 12px; }
.ksi-f-logo {
  font-size: 44px; font-weight: 400; letter-spacing: -.03em; line-height: 1;
  display: flex; align-items: flex-start;
}
.ksi-f-logo .blue { color: #4b9cd3; }
.ksi-f-logo .tm { font-size: 15px; letter-spacing: 0; color: #4b9cd3; padding-left: 3px; line-height: 1.1; }
.ksi-f-tagline { font-size: 19px; line-height: 1.45; color: rgba(255,255,255,.72); letter-spacing: .01em; }
.ksi-f-actions { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.ksi-f-social { display: flex; align-items: center; gap: 16px; }
.ksi-f-social a {
  width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.3);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: border-color .2s ease, background .2s ease;
}
.ksi-f-social a:hover, .ksi-f-social a:focus { border-color: #4b9cd3; background: rgba(75,156,211,.14); }
.ksi-f-pay {
  display: flex; align-items: center; gap: 12px;
  background: #fff; color: #00001c !important;
  padding: 18px 30px; font-size: 18px; font-weight: 700; letter-spacing: .01em;
  transition: background .2s ease, color .2s ease;
}
.ksi-f-pay:hover, .ksi-f-pay:focus { background: #4b9cd3; color: #fff !important; }

/* offices + explore */
/* ----------------------------------------------------------------------------
   EXPLORE MUST BE THE FOURTH COLUMN — Teresa's footer spec, 7 August 2026
   Measured defect: Explore was dropping to a second row, leaving the right of
   the footer empty. Not a wrapping quirk — arithmetic:

     four columns at minmax(300px) with gap 48  = 4x300 + 3x48 = 1344px
     available inside the 1280 box (40px gutters)              = 1200px
     1344 > 1200, so auto-fit fell back to THREE columns.

   Teresa's values are minmax(230px) / gap 44 = 4x230 + 3x44 = 1052px, which
   fits with room to spare and resolves to 4 x 287px — matching her render
   exactly. Do not raise the 230px minimum without redoing this sum.
   -------------------------------------------------------------------------- */
.ksi-f-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 44px;
  align-items: start;
}
.ksi-f-office { display: flex; flex-direction: column; gap: 20px; }
.ksi-f-city { font-size: 26px; letter-spacing: -.01em; }
.ksi-f-map {
  position: relative; width: 300px; max-width: 100%; height: 150px;
  overflow: hidden; border: 1px solid rgba(255,255,255,.16); background: #05051c;
}
.ksi-f-map-tiles {
  position: absolute; inset: 0;
  filter: grayscale(1) invert(.9) brightness(.92) contrast(1.05);
  opacity: .7;
}
.ksi-f-map-tiles img { position: absolute; width: 256px; height: 256px; }
.ksi-f-pin {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
  margin: -6px 0 0 -6px; border-radius: 50%; background: #4b9cd3;
  box-shadow: 0 0 0 5px rgba(75,156,211,.3);
}
.ksi-f-addr { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.86); }
.ksi-f-tel { display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.4; }
.ksi-f-tel > div { display: flex; gap: 10px; }
/* 12 Oct 2026: with an email row in both office columns, the 230px address ran ~30px past its 267px column
   and over the next column's label. It now drops under its label when it does not fit beside it, and may
   break inside the address on the narrowest screens — always inside its own column. */
.ksi-f-tel > div { flex-wrap: wrap; row-gap: 2px; }
.ksi-f-tel a { min-width: 0; overflow-wrap: anywhere; }
.ksi-f-tel span {
  color: rgba(255,255,255,.5); letter-spacing: .06em; font-size: 13px;
  text-transform: uppercase; width: 88px; padding-top: 2px; flex: 0 0 88px;
}
.ksi-f-nav { display: flex; flex-direction: column; gap: 2px; }
.ksi-f-navlabel {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.5); padding-bottom: 16px;
}
/* Teresa's spec is 24px / 18px (measured from her render, 66px row height).
   Now 12px / 9px — Francis, 8 Aug: "lower the font to 12, so the explore section
   ends closer to the maps."

   🔑 The PADDING is the lever, not the font. Measured at 1440px, with the office
   columns 383px tall:
       20px type, 18px padding  -> Explore 656px, overhangs the offices by 272px
       12px type, 18px padding  -> Explore 548px, still overhangs by 164px
       12px type,  9px padding  -> Explore 386px, overhangs by 2px  <- level
   He asked for the font; the stated GOAL was ending level with the maps, and
   the font alone gets barely half way. The 9px is OURS — revert it and the
   column grows 162px. Both are on the declare list (NC-029). */
.ksi-f-nav a {
  font-size: 12px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.1);
}
.ksi-f-nav a:last-child { border-bottom: none; }

/* text notices */
.ksi-f-notices {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.14); padding-top: 28px;
}
.ksi-f-notices-label {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #4b9cd3;
}
.ksi-f-notices-body { font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.86); }
.ksi-f-notices-body strong { font-weight: 700; letter-spacing: .02em; }

/* legal row */
.ksi-f-legal {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
  border-top: 1px solid rgba(255,255,255,.14); padding: 28px 0 40px;
}
.ksi-f-legal-links {
  display: flex; gap: 36px; flex-wrap: wrap;
  font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
}
.ksi-f-legal-meta {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-size: 14px; letter-spacing: .06em; color: rgba(255,255,255,.5);
}
.ksi-f-legal-meta a { color: rgba(255,255,255,.5); text-decoration: underline; }

/* Map attribution — recede, do not remove (Teresa's request 2026-08-05).
   The footer maps load live tiles from tile.openstreetmap.org. OSM data is
   ODbL-licensed and their tile usage policy REQUIRES visible attribution, so
   deleting this line would be a licence breach — a poor look on a law firm's
   site that publishes a compliance page and a Vanta trust profile.
   Compromise agreed: keep the credit, dial it back to the same near-invisible
   treatment already used for "Created by SBG". Still selectable, still
   readable on inspection, no longer competing with the legal links.
   If the maps are ever swapped for licensed static images, or removed, this
   line can go with them — not before. */
.ksi-f-legal-meta .ksi-map-credit {
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, 0.13);
}

@media (max-width: 767px) {
  .ksi-footer { padding-top: 48px; }
  .ksi-f-inner { gap: 40px; }
  .ksi-f-logo { font-size: 34px; }
  .ksi-f-grid { gap: 36px; }
  .ksi-f-legal, .ksi-f-top { gap: 20px; }
  .ksi-f-pay { width: 100%; justify-content: center; }
}

/* ---- ported from the ksi.usa sister-site design system: SBG CREDIT (lines 1421-1444) ---- */
/* --------------------------------------------------------------------------
   "Created by SBG" — deliberately near-invisible.
   Francis's request: it should almost blend into the footer background rather
   than sit as bright as the legal links. #00001c is the footer colour, so a
   low-alpha white sits just above it — legible if you look for it, invisible
   if you're not. Comes up slightly on hover so it stays a usable link.
   -------------------------------------------------------------------------- */
.ksi-f-legal-meta .ksi-sbg-credit,
.ksi-footer .ksi-sbg-credit,
a.ksi-sbg-credit {
  color: rgba(255, 255, 255, 0.13) !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  transition: color 0.25s ease;
}
.ksi-f-legal-meta .ksi-sbg-credit:hover,
.ksi-f-legal-meta .ksi-sbg-credit:focus,
.ksi-footer .ksi-sbg-credit:hover,
.ksi-footer .ksi-sbg-credit:focus,
a.ksi-sbg-credit:hover,
a.ksi-sbg-credit:focus {
  color: rgba(255, 255, 255, 0.45) !important;
  text-decoration: underline !important;
}

/* ---- ported from the ksi.usa sister-site design system: HEADER (lines 1446-1547) ---- */
/* ==========================================================================
   Header — rebuilt to Teresa's design (KSI Home.dc.html).
   Her values verbatim: sticky, #00001c, 1px bottom hairline at 10% white,
   1400px inner, 22px vertical padding with a fluid horizontal gutter,
   34px text logo at -0.03em, 19px nav with a fluid 18-40px gap.
   The logo is LIVE TEXT in her design, not the old ksi-dark-bgksi image.
   ========================================================================== */
.ksi-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: #00001c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
/* ALIGNMENT — corrected 2026-08-06.
   The previous note here said the gutter belongs on the OUTER element with
   max-width on the inner. That is fine in isolation, but it is a DIFFERENT box
   model from the page heroes (1280px box with 40px padding inside), so the
   logo and the page H1 never shared a left edge. Measured before the fix: the
   H1 sat +100px right of the logo at 1920px, +62px at 1440px, and −11px at
   1280px — it did not just misalign, it changed direction as the window
   resized.
   Now identical to .ksi-f-inner and every hero: 1280px box, 40px inside. */
.ksi-hd-inner {
  max-width: 1280px;
  padding-inline: 40px;
  box-sizing: border-box;
  margin: 0 auto;
  padding-block: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

/* Logo — her text lockup: white "ksi", blue ".law", blue "tm".
   The Elementor kit sets `.elementor-kit-10 a { color:#13294B }`, which has
   higher specificity than a single class — that made "ksi" render dark navy
   while ".law" (a nested span) stayed blue. Hence the extra specificity and
   !important on the base colour. */
.ksi-header .ksi-hd-logo,
a.ksi-hd-logo {
  font-size: 34px;
  letter-spacing: -0.03em;
  line-height: 1;
  display: flex;
  align-items: flex-start;
  color: #fff !important;
  text-decoration: none;
  flex: 0 0 auto;
}
.ksi-header .ksi-hd-logo .blue,
a.ksi-hd-logo .blue { color: #4b9cd3 !important; }
.ksi-header .ksi-hd-logo .tm,
a.ksi-hd-logo .tm {
  font-size: 12px;
  color: #4b9cd3 !important;
  padding-left: 3px;
  line-height: 1.2;
  letter-spacing: 0;
}
/* Same guard for the nav links. */
.ksi-header .ksi-hd-nav a { color: #fff; }
.ksi-header .ksi-hd-nav a:hover,
.ksi-header .ksi-hd-nav a:focus { color: #4b9cd3; }

/* Nav */
.ksi-hd-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 40px);
  flex-wrap: wrap;
  font-size: 19px;
}
.ksi-hd-nav a {
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
}
.ksi-hd-nav a:hover,
.ksi-hd-nav a:focus { color: #4b9cd3; }


/* Mobile toggle — her design just wraps, but a 6-item nav plus a 34px logo
   needs a real control on phones. */
.ksi-hd-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

/* ---- ported from the ksi.usa sister-site design system: SHARED GUARDS (lines 1548-1616) ---- */
/* ==========================================================================
   DESIGN-CONVERSION GUARDS
   Site-wide protection against traps in the inherited theme CSS. Added
   2026-08-05 after the same bug appeared twice. Keep these — they are cheap,
   and each one prevents a class of defect on every page we build from here.
   ========================================================================== */

/* GUARD 1 — the pink button.
   reset.css styles EVERY button, not just form buttons:
       [type=button],[type=submit],button{border:1px solid #c36;color:#c36;…}
       [type=button]:hover,[type=submit]:focus{background-color:#c36;color:#fff}
   #c36 is pink and belongs to no part of this brand. Any <button> we ship
   inherits it unless overridden — it hit the .practice accordion rows and the
   mobile menu toggle before being caught.
   Deliberately LOW specificity (0,0,1) so real per-component hover styles
   always win; this only catches anything we forget. */
button,
[type='button'],
[type='submit'] {
  border-color: transparent;
  color: inherit;
}
button:hover,
button:focus,
[type='button']:hover,
[type='button']:focus,
[type='submit']:hover,
[type='submit']:focus {
  background-color: transparent;
  color: inherit;
}

/* GUARD 3 — reset.css stretches and rounds every form control:
       input[type=text],select,textarea{ … border-radius:3px; width:100% }
   Two separate defects from one rule:
     • width:100%  — a <select> in a flex bar expands to the full row instead
       of sizing to its content. This is what made the .people practice-area
       dropdown run off to the right edge.
     • border-radius:3px — Teresa's spec is explicit: "Corners are square
       throughout except the two hero compliance badges (8px) and footer
       social circles (50%)."
   The whole site has exactly two form controls (both on .people), so this is
   safe to neutralise globally. Low specificity (0,0,1) — page styles win. */
input,
select,
textarea {
  width: auto;
  border-radius: 0;
}

/* GUARD 2 — `hidden` defeated by an inline display.
   The UA stylesheet implements the hidden attribute as [hidden]{display:none},
   which an inline `display:` in a style attribute overrides. Teresa's design
   exports carry inline display values on nearly everything, so any element we
   toggle with `hidden` renders permanently. This is what made the "N
   highlighted" chip on .people show at all times.
   `!important` is correct here: hidden must always win. */
[hidden] {
  display: none !important;
}

/* Neutralise a legacy reset.css rule (found 2026-08-04):
       [type=button]:focus,[type=button]:hover,[type=submit]:focus,
       [type=submit]:hover { background-color:#c36; color:#fff }
   #c36 is pink and belongs to no part of this brand. It applies to ANY
   <button type="button"> on the site — including this menu toggle on all 97
   pages, where it turned the hamburger pink on tap. It went unnoticed because
   nothing else on the site used a bare typed button until now.
   Keep these declarations; removing them brings the pink back. */

/* ---- ported from the ksi.usa sister-site design system: HEADER MOBILE TOGGLE (lines 1617-1670) ---- */
.ksi-hd-toggle:hover,
.ksi-hd-toggle:focus,
.ksi-hd-toggle:active {
  background: rgba(75, 156, 211, 0.10);
  color: inherit;
}
.ksi-hd-toggle:hover span,
.ksi-hd-toggle:focus span {
  background: #4b9cd3;
}

.ksi-hd-toggle span {
  display: block;
  height: 2px;
  width: 26px;
  background: #fff;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (max-width: 900px) {
  /* 2026-08-06: the outer gutter is gone (it doubled up with the inner 40px)
     and the padding shorthand is split, so the 40px inline gutter survives.
     The heroes carry 40px at every breakpoint, so the header must too — that
     is the whole point of the alignment fix. */
  .ksi-hd-inner { padding-block: 16px; gap: 16px; }
  .ksi-hd-logo { font-size: 27px; }
  .ksi-hd-toggle { display: flex; }
  .ksi-hd-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    font-size: 17px;
  }
  .ksi-hd-nav.is-open { display: flex; }
  .ksi-hd-nav > a {
    width: 100%;
    padding: 13px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .ksi-hd-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .ksi-hd-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .ksi-hd-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* The previous header was position:fixed, so the page body carried a
   compensating top margin (--ksi-header-offset). Teresa's header is sticky and
   therefore in flow — that margin would now show as a gap under the bar. */
body:has(.ksi-header) > [data-elementor-type='wp-page'],
body:has(.ksi-header) > .elementor-location-single {
  margin-block-start: 0;
}
.ksi-header > .elementor-element { position: static !important; }

/* ---- ported from the ksi.usa sister-site design system: HEADER PAY BUTTON (lines 1759-1792) ---- */
/* Header "Make a Payment" — the footer button at header scale.
   Same treatment (white block, dark text, blue on hover) but sized to sit in a
   19px nav row rather than dominate it. */
.ksi-header .ksi-hd-pay {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: #00001c !important;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.ksi-header .ksi-hd-pay:hover,
.ksi-header .ksi-hd-pay:focus {
  background: #4b9cd3;
  color: #00001c !important;
}
.ksi-hd-pay svg { flex: 0 0 auto; }

@media (max-width: 900px) {
  /* In the collapsed menu it becomes a full-width action at the bottom. */
  .ksi-header .ksi-hd-pay {
    width: 100%;
    justify-content: center;
    margin-top: 12px;
    padding: 14px 18px;
    font-size: 15px;
    border-top: none;
  }
}

/* ---- KSI.USA-only additions (not present on the sister site) ---------------
   Everything above this line is the sister-site design system, ported
   unchanged. Everything below exists because KSI.USA's own content needs it.
   Named separately so nobody mistakes it for client-approved design.
   -------------------------------------------------------------------------- */

/* (1) The previous KSI.USA header was `position: fixed`, so the page body
   carried a compensating top margin (--ksi-header-offset). The new header is
   sticky and therefore in flow — that margin now shows as a navy gap under the
   bar on every page.
   The ported rule above uses a child combinator (`body > [wp-page]`). On this
   site the wrapper is not always a direct child of <body> (the a11y skip-link
   nav and the site loader sit between them on some pages), so this descendant
   version is the one that actually lands. Specificity (0,2,1) beats the
   original (0,1,1) at line ~354. */
body:has(.ksi-header) [data-elementor-type="wp-page"],
body:has(.ksi-header) .elementor-location-single {
  margin-block-start: 0;
}

/* (1b) The page-builder's own footer background beats `.ksi-footer`.
   Measured, not guessed — Chrome's matched-rules list for <footer>:
       .elementor-217:not(.elementor-motion-effects-element-type-background)
         { background-color: #F9E0E2 }        specificity (0,2,0)   WINS
       .ksi-footer { background: #00001c }    specificity (0,1,0)   loses
   #F9E0E2 is a pale pink left over from the inherited theme kit, and it turned
   the whole new footer pink with white text on it — invisible.
   Matching (0,2,0) is enough because ksi-modern.css is the last stylesheet in
   the head, so an equal-specificity rule declared later wins. No !important.
   The sister site does not hit this: its own post-217.css carries a dark
   background, so nothing had to beat it there. */
.ksi-footer.elementor-217 {
  background: #00001c;
}
.ksi-header.elementor-3003 {
  background: #00001c;
}

/* (2) The `.about` dropdown was removed on 11 Aug 2026 when the nav was
   flattened to match the sister site (.firm .practice .kloud .intelekt .trust
   .klient). Its rules are gone rather than left inert: dead CSS that matches
   nothing is what makes a stylesheet impossible to reason about later.
   ksi.P3 and .responsible business now live in the footer's Explore column.
   Restore from _backups/ if a dropdown is ever wanted again. */

/* (1c) THE KSI.USA LOGO STAYS. Corrected 11 Aug 2026 — Francis: "the logo
   needs to stay".

   The sister site's header and footer use a live-text lockup, so the port
   reproduced that as text and dropped `/logo-ksi-usa.png`. Wrong call: the
   text lockup is the SISTER SITE's wordmark rendered in Helvetica, not KSI.USA's
   logo, and matching a sister site's design never extends to replacing the
   brand's own artwork. The real asset is back in both places.

   Sized to the type it replaced so the header geometry is unchanged: the
   sister site's logo is 34px (27px on phones) and its footer logo 44px (34px),
   and those are heights, so the image is set to the same and left to keep its
   own 1024x322 aspect. There is also a `logo-ksi-usa.svg`, but it is a
   text-rendered approximation, not the artwork — the PNG is what the old
   header used and what this uses.

   ⚠️ `[data-elementor-type="header"] img` further up this file caps header
   images at min(3.25rem, header-height − 0.75rem). These rules are later and
   equally specific, so they win — but if the logo ever renders smaller than
   expected, that older rule is the first place to look. */
.ksi-header .ksi-hd-logo img {
  display: block;
  /* Teresa, 12 Oct 2026: "logo same size as the Canadian site". The sister site's logo is live 34px text; this
     one is an image with empty margin above and below the letters, so at 34px its letters were ~20% smaller.
     41px makes the visible letters the same height as the sister site's (measured, not guessed). */
  block-size: 41px;
  margin-inline-start: -4px; /* the image's own left margin: its letters now start on the hero text's edge */
  inline-size: auto;
  max-block-size: none;
}
.ksi-footer .ksi-f-logo img {
  display: block;
  block-size: 44px;
  inline-size: auto;
}
@media (max-width: 900px) {
  .ksi-header .ksi-hd-logo img { block-size: 33px; margin-inline-start: -3px; } /* 27 x 41/34, same letter scale */
}
@media (max-width: 767px) {
  .ksi-footer .ksi-f-logo img { block-size: 34px; }
}

/* (2b) Footer link height — matched to the sister site, 11 Aug 2026.
   Francis: "we need to make sure that both site looks identical."

   KSI.USA carried a rule the sister site does not:
       .elementor-location-footer :where(a, .elementor-icon)
         { min-block-size: var(--ksi-touch-target) }   (= 44px)
   It was the ONLY measured difference between the two footers — it made the
   nav rows 44px against 37px, and roughly doubled the legal row, 44px against
   21px. Reported on the first pass and left in place then, pending a decision.
   This is the decision.

   ⚠️ Say the cost out loud: 44px is the WCAG 2.5.8 (AAA) target size, and the
   sister site's 21px legal links do not meet it. Matching the design makes
   those links harder to hit on a phone. Reversing this is deleting the rule
   below — one line, and the tap targets come straight back.

   Scoped to .ksi-footer only, so the 44px minimum still applies anywhere else
   the old page-builder footer markup survives. */
.ksi-footer a {
  /* `auto`, not `0` — both remove the minimum, but `auto` is the initial value
     and therefore what the sister site computes. The comparator diffs computed
     styles, so `0px` vs `auto` reads as a difference even though nothing moves
     on screen. Matching the computed value keeps the check honest and quiet. */
  min-block-size: auto;
}

/* Chip links: the sister site's chips are <span>s, so its inline style string
   carries no text-decoration. Ours are anchors and need one — put in CSS, not
   inline, so the inline string stays byte-identical to the approved design.
   That matters beyond tidiness: the responsive rules match on those strings. */
.ksi-lp-page a.ksi-lp-chip {
  text-decoration: none;
}

/* (3) Certifications column.
   The sister site's footer runs three office columns plus Explore. KSI.USA has
   one office, so the fourth-column arithmetic in the ported grid comment would
   leave the footer half empty. The existing SOC 2 and PCI DSS badges — already
   in the old KSI.USA footer — fill the remaining columns. No new content. */
.ksi-f-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.ksi-f-collabel {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.ksi-f-certs {
  display: flex;
  align-items: center;
  gap: 18px;
}
.ksi-f-certs img {
  height: 68px;
  width: auto;
  display: block;
}
.ksi-f-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}
.ksi-f-contact a {
  color: rgba(255, 255, 255, 0.86);
  overflow-wrap: anywhere;
}
.ksi-f-contact a:hover,
.ksi-f-contact a:focus {
  color: #4b9cd3;
}

/* (4) Footer maps are self-hosted, not fetched from tile.openstreetmap.org.
   The sister site loads its tiles live from OSM — the only third-party request
   on that whole site, and the one thing that fails its own independence audit.
   KSI.USA's two Orlando tiles were downloaded once and are served from
   /images/. Same look, no third-party request, no CSP widening, and the
   independence audit stays green. Attribution stays in the legal row, which
   ODbL requires whether the tiles are proxied or not. */

@media (max-width: 900px) {
}

@media (max-width: 767px) {
  .ksi-f-certs img {
    height: 56px;
  }
}


/* ==========================================================================
   LANDING-PAGE SYSTEM (.ksi-lp-*) — ported 2026-08-11 from the sister build.

   These pages carry their layout in INLINE style attributes, exactly as
   Teresa's design exports do. This block adds only what the exports expressed
   as directives rather than CSS: the hover values as classes, the responsive
   behaviour (the exports are fixed desktop layouts), and the portrait slot.

   🔑 The responsive rules below match on SUBSTRINGS OF THE INLINE STYLE, e.g.
   div[style*="padding:104px 40px 76px"]. That means the markup generator
   (ksi-lp-lib.mjs) must emit these style strings BYTE-IDENTICALLY. Change a
   space or reorder a declaration in the generator and the page silently stops
   being responsive. This is why the sections are generated, not hand-written.

   ⚠️ Do not add colours here. Every colour comes from the inline styles.
   🔴 .ksi-lp-page is WHITE by default; every dark page adds its own #00001c.
   Ship a dark page without that and it renders white-on-white — which is
   exactly what happened on the sister site's first .firm build, and what four
   passing programmatic checks failed to catch.
   ========================================================================== */
/* ==========================================================================
   Lawyer profile pages (14) — built 2026-08-06 (Studio Bananas Group)

   These pages carry their layout in inline style attributes, exactly as
   Teresa's templates do. This block adds only three things the templates
   expressed as directives rather than CSS:
     1. the four style-hover values, as classes
     2. responsive behaviour (the templates are fixed desktop layouts)
     3. the portrait <picture> filling the slot that <image-slot> used to
   ⚠️ Do not add colours here. Every colour on these pages comes from the
   template's own inline styles.
   ========================================================================== */
.ksi-lp-page{background:#ffffff}
.ksi-lp-page :focus-visible{outline:2px solid #4B9CD3;outline-offset:3px}

/* the four style-hover values from the templates, as classes */
.ksi-lp-h-blue{transition:color .15s ease}
.ksi-lp-h-blue:hover,.ksi-lp-h-blue:focus-visible{color:#4B9CD3}
.ksi-lp-h-lightblue{transition:color .15s ease}
.ksi-lp-h-lightblue:hover,.ksi-lp-h-lightblue:focus-visible{color:#8fc3e6}
.ksi-lp-h-white{transition:background .15s ease,color .15s ease}
.ksi-lp-h-white:hover,.ksi-lp-h-white:focus-visible{background:#ffffff}
.ksi-lp-h-border{transition:border-color .15s ease}
.ksi-lp-h-border:hover,.ksi-lp-h-border:focus-visible{border-color:#4B9CD3}
/* the two extra hover styles the executive profile uses, beyond the lawyer set */
.ksi-lp-h-fill{transition:background .15s ease,color .15s ease}
.ksi-lp-h-fill:hover,.ksi-lp-h-fill:focus-visible{background:#4B9CD3;color:#00001c}
.ksi-lp-h-borderwhite{transition:border-color .15s ease,color .15s ease}
.ksi-lp-h-borderwhite:hover,.ksi-lp-h-borderwhite:focus-visible{border-color:#4B9CD3;color:#ffffff}
.ksi-lp-h-tint7{transition:background .15s ease}
.ksi-lp-h-tint7:hover,.ksi-lp-h-tint7:focus-visible{background:rgba(75,156,211,0.07)}
.ksi-lp-h-tint8{transition:background .15s ease}
.ksi-lp-h-tint8:hover,.ksi-lp-h-tint8:focus-visible{background:rgba(75,156,211,0.08)}

/* executive profile — the hero is a 360px portrait column beside the copy */
.ksi-ex-page{background:#00001c}
@media (max-width:1024px){
  .ksi-ex-page div[style*="grid-template-columns:360px minmax(0,1fr)"]{
    grid-template-columns:minmax(0,1fr)!important;gap:36px!important}
  .ksi-ex-page div[style*="aspect-ratio:3/4"]{max-width:360px}
}
@media (max-width:767px){
  .ksi-ex-page div[style*="padding:80px 40px 72px"]{padding:44px 20px 48px!important}
  .ksi-ex-page div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:minmax(0,1fr)!important}
}


/* portrait — replaces <image-slot>, which was absolutely positioned in its box */
.ksi-lp-portrait{display:block}
.ksi-lp-portrait img{width:100%;height:100%;object-fit:cover;display:block}

/* ── responsive ──────────────────────────────────────────────────────────
   The templates are fixed desktop layouts: a 1fr/380px hero and several
   two-column bands. Below 1024px the portrait column would crush the text,
   so the hero stacks and every two-column band becomes one. */
@media (max-width:1024px){
  .ksi-lp-page > div > div[style*="grid-template-columns:minmax(0,1fr) 380px"]{
    grid-template-columns:minmax(0,1fr)!important;gap:0!important}
  /* the portrait column hangs below the hero on desktop; cancel that when stacked */
  .ksi-lp-page div[style*="margin-bottom:-160px"]{
    margin-bottom:0!important;padding-top:0!important;min-height:0!important}
  .ksi-lp-page div[style*="min-height:432px"]{min-height:0!important;aspect-ratio:3/4}
  .ksi-lp-page div[style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"]{
    grid-template-columns:minmax(0,1fr)!important;gap:28px!important}
  /* the pull quote reserves space for the portrait on desktop */
  .ksi-lp-page p[style*="padding:40px 460px 0 0"]{
    padding:0!important;min-height:0!important;font-size:27px!important}
  .ksi-lp-page h1{font-size:clamp(38px,6vw,64px)!important}
  .ksi-lp-page div[style*="padding:52px 0 52px 48px"]{padding:0 0 8px 0!important}
}
@media (max-width:767px){
  .ksi-lp-page div[style*="padding:0 40px"]{padding-left:20px!important;padding-right:20px!important}
  .ksi-lp-page div[style*="padding:72px 40px 0"],
  .ksi-lp-page div[style*="padding:52px 40px 64px"]{
    padding-left:20px!important;padding-right:20px!important}
  .ksi-lp-page h1{font-size:clamp(30px,8vw,42px)!important}
  .ksi-lp-page p[style*="font-size:34px"]{font-size:22px!important}
  .ksi-lp-page div[style*="grid-template-columns:auto auto"]{
    grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
  .ksi-lp-page div[style*="grid-template-columns:96px"]{gap:16px!important}
  .ksi-lp-page div[style*="padding:64px 0 56px"]{padding:40px 0 36px!important}
}
@media (prefers-reduced-motion:reduce){
  .ksi-lp-h-blue,.ksi-lp-h-lightblue,.ksi-lp-h-white,.ksi-lp-h-border{transition:none}
  .ksi-lp-reveal{transition:none!important}
}

/* scroll reveal (michael-thaing). Content is VISIBLE by default and only
   animates once JS confirms it can run — a crawler or a JS failure must never
   be shown an empty section. See Website_Build_Checklist.md section 3c. */
.ksi-lp-js .ksi-lp-reveal{opacity:0;transform:translateY(22px);
  transition:opacity .6s ease,transform .6s ease}
.ksi-lp-js .ksi-lp-reveal.is-in{opacity:1;transform:none}

/* .kloud — hero is a full-bleed photo band; the rest is the shared profile shell */
.ksi-kl-page{background:#00001c}
@media (max-width:1024px){
  .ksi-kl-page div[style*="padding:104px 40px 76px"]{padding:72px 28px 56px!important}
  .ksi-kl-page div[style*="grid-template-columns:repeat(2,minmax(0,1fr))"]{
    grid-template-columns:minmax(0,1fr)!important}
  .ksi-kl-page div[style*="grid-template-columns:repeat(4,minmax(0,1fr))"]{
    grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ksi-kl-page div[style*="grid-template-columns:repeat(3,minmax(0,1fr))"]{
    grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:767px){
  .ksi-kl-page div[style*="padding:104px 40px 76px"]{padding:52px 20px 44px!important}
  .ksi-kl-page div[style*="padding:24px 40px 76px"],
  .ksi-kl-page div[style*="padding:0 40px"]{padding-left:20px!important;padding-right:20px!important}
  .ksi-kl-page h1{font-size:clamp(30px,7.5vw,44px)!important}
  .ksi-kl-page div[style*="grid-template-columns:repeat(4,minmax(0,1fr))"]{
    grid-template-columns:minmax(0,1fr)!important}
  /* the certification stat row is a single flex line on desktop */
  .ksi-kl-page div[style*="display:flex;gap:0;align-items:stretch"] > div{
    padding:14px 0!important;border-left:0!important;
    border-top:1px solid rgba(75,156,211,0.35)!important;width:100%}
  .ksi-kl-page div[style*="display:flex;gap:0;align-items:stretch"] > div:first-child{border-top:0!important}
}

/* .intelekt — hero over a gradient (the photograph is pending a licence) */
.ksi-in-page{background:#00001c}
@media (max-width:1024px){
  .ksi-in-page div[style*="padding:104px 40px 76px"]{padding:72px 28px 56px!important}
  .ksi-in-page div[style*="grid-template-columns:repeat(3,minmax(0,1fr))"]{grid-template-columns:minmax(0,1fr)!important}
  .ksi-in-page div[style*="grid-template-columns:repeat(4,minmax(0,1fr))"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ksi-in-page div[style*="grid-template-columns:repeat(2,minmax(0,1fr))"]{grid-template-columns:minmax(0,1fr)!important}
}
@media (max-width:767px){
  .ksi-in-page div[style*="padding:104px 40px 76px"]{padding:52px 20px 44px!important}
  .ksi-in-page div[style*="padding:0 40px"]{padding-left:20px!important;padding-right:20px!important}
  .ksi-in-page h1{font-size:clamp(30px,7.5vw,44px)!important}
  .ksi-in-page div[style*="grid-template-columns:repeat(4,minmax(0,1fr))"]{grid-template-columns:minmax(0,1fr)!important}
  .ksi-in-page div[style*="display:flex;gap:0;align-items:stretch"] > div{
    padding:14px 0!important;border-left:0!important;border-top:1px solid rgba(75,156,211,0.35)!important;width:100%}
  .ksi-in-page div[style*="display:flex;gap:0;align-items:stretch"] > div:first-child{border-top:0!important}
}

/* ============================================================================
   .firm — rebuilt from firm-page-new/firm.dc.html, 7 August 2026
   ----------------------------------------------------------------------------
   🔴 The background rule is not decoration. `.ksi-lp-page` is WHITE by default;
   every dark page (.ksi-ex-page, .ksi-kl-page, .ksi-in-page) adds its own
   #00001c. Ship .ksi-fm-page without it and the whole page renders white text
   on white — which is exactly what happened on the first build, and what four
   passing programmatic checks failed to catch. See the register, NC-034.

   The responsive block mirrors .ksi-in-page: Teresa's inline grids are fixed
   column counts, so they need overriding by attribute selector. !important is
   required to beat inline styles.
   ========================================================================== */
.ksi-fm-page{background:#00001c}
@media (max-width:1024px){
  .ksi-fm-page div[style*="padding:96px 40px 72px"]{padding:72px 28px 56px!important}
  .ksi-fm-page div[style*="grid-template-columns:repeat(3,minmax(0,1fr))"]{grid-template-columns:minmax(0,1fr)!important}
  .ksi-fm-page div[style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"]{grid-template-columns:minmax(0,1fr)!important;gap:28px!important}
  .ksi-fm-page div[style*="grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)"]{grid-template-columns:minmax(0,1fr)!important}
  .ksi-fm-page div[style*="grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)"]{grid-template-columns:minmax(0,1fr)!important}
  /* "On the record" cells lose their left rules when they stack */
  .ksi-fm-page div[style*="border-left:1px solid #1c2044"][style*="padding:40px"]{
    border-left:0!important;border-top:1px solid #1c2044!important;padding:32px 0!important}
  .ksi-fm-page div[style*="padding:40px 40px 40px 0"]{padding:32px 0!important}
}
@media (max-width:767px){
  .ksi-fm-page div[style*="padding:96px 40px 72px"]{padding:52px 20px 44px!important}
  .ksi-fm-page div[style*="padding:0 40px"]{padding-left:20px!important;padding-right:20px!important}
  .ksi-fm-page h1{font-size:clamp(30px,7.5vw,44px)!important}
  /* hero stat strip: vertical dividers become horizontal ones */
  .ksi-fm-page div[style*="display:flex;gap:0;align-items:stretch"] > div{
    padding:14px 0!important;border-left:0!important;border-top:1px solid rgba(75,156,211,0.35)!important;width:100%}
  .ksi-fm-page div[style*="display:flex;gap:0;align-items:stretch"] > div:first-child{border-top:0!important}
}


/* The canonical container is NOT defined here. It lives with the rule that
   owns page-body geometry, near the top of this file — search for
   "THE CANONICAL CONTAINER". A duplicate block sat here briefly and lost the
   cascade to that rule, which is the good outcome: one concern, one rule.

   The header keeps its 40px inline gutter at every breakpoint, so the body
   does too. A 20px mobile gutter was tried and measured at content 20px
   against a logo at 40px — the same misalignment this work removed,
   reintroduced on the one screen size where it is hardest to see. */



/* --------------------------------------------------------------------------
   Home page: eight heading widgets carry a 4px left indent from the page
   builder, so "Explore ksi.usa", ".trust", "Future Directions" and the four
   Future Directions links all sat 4px right of the logo while their own
   containers were exactly on it.

   Listed by id rather than zeroed across `.elementor-widget-heading`, because
   measuring first showed three different values in use — 4px (these eight, all
   on the home page), and 15px/14px elsewhere which are inside cards and look
   deliberate. A blanket rule would have quietly flattened those too.

   These eight are ours to remove; the 15px ones were left alone.
   -------------------------------------------------------------------------- */
[data-elementor-type='wp-page'] :is(
    .elementor-element-34230ba,
    .elementor-element-30244b2,
    .elementor-element-68642a1,
    .elementor-element-81ad9bd,
    .elementor-element-fecccb2,
    .elementor-element-492cd41,
    .elementor-element-3ca49e9,
    .elementor-element-fcece80
  ) {
  padding-left: 0 !important;
}


/* ==========================================================================
   EXPLORE CARDS — matched to the sister site, 11 August 2026
   Francis, on selecting the home page's Explore row: "needs to be the same
   design as the ones from ksi-law".

   WHAT WAS WRONG. The four cards are page-builder containers, each carrying
   its own alignment, so the type landed in a different place on every card —
   two at the bottom, two at the top — with unequal heights and no scrim. The
   set read as accidental rather than as one row.

   THE REFERENCE, taken from the sister site's built home page, not eyeballed:
       card    position:relative; display:flex; flex-direction:column;
               justify-content:flex-end; min-height:460px; padding:36px;
               border:1px solid rgba(255,255,255,0.1)
       title   30px, letter-spacing -0.02em
       body    18px/1.6, rgba(255,255,255,0.74), 14px above it
       grid    repeat(auto-fit, minmax(280px,1fr)), gap 24px
       scrim   .ksi-xcard::before, ported verbatim below

   `justify-content:flex-end` is the whole fix for the stagger: every card
   bottoms out its content, so the titles sit on one line however tall the
   copy is.

   ⚠️ APPLIES TO ALL 8 PAGES that use this component — the home page and the
   seven service-hub pages that carry the same four cards — not just the home
   page. Counted before writing this: 8 pages × 4 cards. Styling one and
   leaving seven looking different would trade one inconsistency for another.
   ========================================================================== */

/* The row. */
[data-elementor-type='wp-page'] .e-con-inner:has(> a.ksi-static-background) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
}

/* The card. */
[data-elementor-type='wp-page'] a.ksi-static-background {
  position: relative;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  min-height: 460px !important;
  padding: 36px !important;
  --padding-top: 36px !important;
  --padding-bottom: 36px !important;
  --padding-left: 36px !important;
  --padding-right: 36px !important;
  /* Francis, 12 Oct 2026: "on the borders it looks like is not finish". The edge was a 10%-white hairline drawn
     over the artwork, so it lit up on dark pixels and vanished on bright ones — broken bright fragments, worst
     along the bottom. Now: an opaque hairline in the site's own rule colour, the artwork clipped inside it, and
     a soft inner fade so the wave lines settle before the edge instead of running into it. */
  border: 1px solid #1c2044;
  background-clip: padding-box;
  box-shadow: inset 0 0 36px 6px rgba(0, 0, 28, 0.55);
  overflow: hidden;
  isolation: isolate;
  text-decoration: none;
  /* The builder sizes these containers with --container-widget-width, which
     left each card 74px wide inside a 306px grid cell — and because the copy
     then wrapped to ribbons, the row grew to 1942px tall. Measured, not
     guessed. The card must fill its cell. */
  width: 100% !important;
  max-width: 100% !important;
  --container-widget-width: 100% !important;
  flex: initial !important;
  transition:
    border-color 0.25s ease,
    transform 0.25s ease;
}

/* Scrim — ported verbatim. Clear at the top so the artwork shows, solid
   behind the text so the type is legible on every crop. */
/* ⚠️ !important is required, and it is not laziness. The page builder puts its
   OWN overlay on this same pseudo-element:

       .elementor-37 .elementor-element.elementor-element-9e577d9::before
         { background-image: linear-gradient(180deg,#001431 0%,#002B6D 80%) }

   That is (0,3,0) against this rule's (0,2,0), so it wins on specificity no
   matter which stylesheet loads last. It was still winning after the scrim was
   ported, which is why the cards stayed bright blue behind the type while
   every measured dimension already matched. Caught by reading the computed
   ::before background, not by looking at the cards.

   This replaces a blue overlay the client's builder applied with the sister
   site's scrim — a deliberate visual change, made because matching those cards
   was the instruction. */
[data-elementor-type='wp-page'] a.ksi-static-background::before {
  content: '' !important;
  position: absolute;
  inset: 0;
  background-color: transparent !important;
  background-image: linear-gradient(
    180deg,
    rgba(0, 0, 28, 0) 0%,
    rgba(0, 0, 28, 0.08) 42%,
    rgba(0, 0, 28, 0.62) 72%,
    rgba(0, 0, 28, 0.92) 100%
  ) !important;
  pointer-events: none;
  z-index: 0;
}
[data-elementor-type='wp-page'] a.ksi-static-background > * {
  position: relative;
  z-index: 1;
  /* The builder gives these four widgets different align-self values —
     flex-end on two, flex-start on the other two. In a column flex that is the
     HORIZONTAL axis, so the copy started at a different inset on every card:
     measured 68 / 57 / 60 / 63px against a 36px padding. Stretch makes every
     card's text begin on its own padding edge. */
  align-self: stretch !important;
  width: 100% !important;
  /* Francis, 12 Oct 2026, "refine it more": the builder left each card its own inner padding (left 30 / 20 /
     24 / 26px) and a 4% gap between every line, so the copy started at 67 / 57 / 61 / 63px and ".kloud" read
     as three spaced-out paragraphs. The sister site's cards: text on the card's own 36px padding, lines tight. */
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}
/* Titles on one line (Francis, 11 Oct 2026: "align the Explore card titles"). With the copy pinned to the
   bottom, each title sat as high as its own copy was long — 221 / 261 / 250 / 221px measured at 1280. Every
   card's text block now has the same height with the title at its top, and the same top padding (the builder
   gave the ksi.P3 card 30px, the rest 20px). 232px fits the longest copy at every width from 768 up —
   measured, content never taller than the box. Phones keep the original stacked layout. */
@media (min-width: 768px) {
  [data-elementor-type='wp-page'] a.ksi-static-background > * {
    min-height: var(--ksi-card-copy, 160px);
    padding-top: 0 !important;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-start;
  }
}

[data-elementor-type='wp-page'] a.ksi-static-background:hover {
  border-color: #4b9cd3;
  transform: translateY(-3px);
}

/* Card typography. The sister site uses one div for the title and one for the
   body; here the builder emits an <h5> and a run of <p>s, so the spacing is
   put on the first paragraph instead of on a wrapper. */
[data-elementor-type='wp-page'] a.ksi-static-background :is(h5, p) {
  margin: 0;
  max-inline-size: none;
}
[data-elementor-type='wp-page'] a.ksi-static-background h5 {
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.5;
  color: #fff;
}
[data-elementor-type='wp-page'] a.ksi-static-background p {
  font-size: 18px;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.74);
}
[data-elementor-type='wp-page'] a.ksi-static-background h5 + p {
  padding-top: 14px;
}

@media (prefers-reduced-motion: reduce) {
  [data-elementor-type='wp-page'] a.ksi-static-background,
  [data-elementor-type='wp-page'] a.ksi-static-background:hover {
    transition: none;
    transform: none;
  }
}


/* ==========================================================================
   FUTURE DIRECTIONS — matched to the sister site, 11 August 2026
   Francis: "this section needs to be the same as the ksi-law".

   THE SISTER SITE'S DESIGN, read off its built page:
       two columns   repeat(auto-fit, minmax(320px,1fr)), gap clamp(40px,5vw,96px)
       left          the heading, vertically centred
       right         four rows, each a hairline-topped link:
                       padding 22px 0 · border-top 1px rgba(255,255,255,0.28)
                       title 24px / -0.015em · trailing ↗ in #4B9CD3 at 22px
                     with a closing border-bottom under the last row

   WHY THIS IS CSS AND NOT A MARKUP REWRITE. enhance-site.mjs injects all four
   labels at build time by data-id (`replaceElementInnerByDataId`) — the source
   file still carries the sister site's wording (".ksi Newsroom", "Inside ksi.",
   "Careers", "Trendskape") and the build swaps in KSI.USA's four. Rewriting the
   markup would break that injection and silently republish the WRONG SITE'S
   link labels on the home page. The widget ids therefore stay exactly as they
   are and the layout is rebuilt around them.

   The separators are four heading widgets whose content is literally
   "______________________". They are decorative, they are being replaced by
   real 1px rules, and hiding them is named here as ours.
   ========================================================================== */

/* The heading.
   ⚠️ !important throughout this block. The page builder emits THREE competing
   per-element rules for each of these widgets — e.g. for the heading, 28px then
   28px then 26px — all at (0,4,0), inside post-37.css. Anything less loses, and
   it lost silently: the rows rendered at 18px and the heading at 28px while the
   structure already matched. Measured from the computed styles, not the CSS. */
[data-elementor-type='wp-page'] .elementor-element-81ad9bd .elementor-heading-title {
  font-size: clamp(32px, 3.4vw, 52px) !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
}

/* The four rows. */
[data-elementor-type='wp-page'] :is(
    .elementor-element-fecccb2,
    .elementor-element-492cd41,
    .elementor-element-3ca49e9,
    .elementor-element-fcece80
  ) {
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  width: 100% !important;
  max-width: 100% !important;
}
[data-elementor-type='wp-page'] .elementor-element-fcece80 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
[data-elementor-type='wp-page'] :is(
    .elementor-element-fecccb2,
    .elementor-element-492cd41,
    .elementor-element-3ca49e9,
    .elementor-element-fcece80
  ) .elementor-heading-title {
  margin: 0;
  font-size: 24px !important;
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.25 !important;
}
[data-elementor-type='wp-page'] :is(
    .elementor-element-fecccb2,
    .elementor-element-492cd41,
    .elementor-element-3ca49e9,
    .elementor-element-fcece80
  ) .elementor-heading-title a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  color: #fff;
  text-decoration: none;
  transition: color 0.15s ease;
}
[data-elementor-type='wp-page'] :is(
    .elementor-element-fecccb2,
    .elementor-element-492cd41,
    .elementor-element-3ca49e9,
    .elementor-element-fcece80
  ) .elementor-heading-title a::after {
  content: '↗';
  color: #4b9cd3;
  font-size: 22px;
  line-height: 1;
  flex: 0 0 auto;
}
[data-elementor-type='wp-page'] :is(
    .elementor-element-fecccb2,
    .elementor-element-492cd41,
    .elementor-element-3ca49e9,
    .elementor-element-fcece80
  ) .elementor-heading-title a:hover {
  color: #4b9cd3;
}

/* The underscore separators — replaced by the rules above. */
[data-elementor-type='wp-page'] :is(
    .elementor-element-91550e6,
    .elementor-element-9270795,
    .elementor-element-76f4d64,
    .elementor-element-5d0e034
  ) {
  display: none !important;
}

/* Two columns from 900px up; one column below, which is what the sister
   site's auto-fit does at the same width. */
@media (min-width: 900px) {
  [data-elementor-type='wp-page'] .elementor-element-f1187d1 {
    display: grid !important;
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 1fr) !important;
    column-gap: clamp(40px, 5vw, 96px) !important;
    row-gap: 0 !important;
    align-items: center !important;
    /* Francis, 12 Oct 2026: "reduce the space so it doesn't look too much dead space". The band is 555px tall
       and the grid shared that height out, stretching each row to ~175px around ~85-115px of content. Rows now
       take their own height and sit together in the middle of the band. */
    align-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  [data-elementor-type='wp-page'] .elementor-element-81ad9bd {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
  }
  [data-elementor-type='wp-page'] :is(
      .elementor-element-fecccb2,
      .elementor-element-492cd41,
      .elementor-element-3ca49e9,
      .elementor-element-fcece80
    ) {
    grid-column: 2;
  }
}


/* The Future Directions band needs the sister site's scrim, not just its
   layout. Its photograph is a bright dawn skyline, and with the rows moved on
   top of it the white 24px titles sat over open sky — measured worst case
   around 1.9:1 against WCAG's 4.5:1 for body text, i.e. not a taste question.

   Gradient copied from the sister site's own Future Directions section, which
   solves the same problem on the same kind of image:
       #00001c 0% · #00001c 20% · 0.62 at 38% · 0.34 at 60% · 0.72 at 90% · #00001c 100%

   !important for the same reason as the Explore cards: the page builder owns
   this ::before and sets it from --overlay-opacity at higher specificity. */
[data-elementor-type='wp-page'] .elementor-element-3c7c2fd::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background-color: transparent !important;
  background-image: linear-gradient(
    180deg,
    #00001c 0%,
    #00001c 20%,
    rgba(0, 0, 28, 0.62) 38%,
    rgba(0, 0, 28, 0.34) 60%,
    rgba(0, 0, 28, 0.72) 90%,
    #00001c 100%
  ) !important;
  pointer-events: none;
  z-index: 0;
}
[data-elementor-type='wp-page'] .elementor-element-3c7c2fd > .e-con-inner {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   PORTED FROM THE SISTER SITE — 10 Oct 2026 (Teresa: the .kloud, ksi.P3, .intelekt and contact pages
   match it). Every rule below is copied verbatim from its ksi-modern.css, in its order; only
   rules KSI USA did not already have (none of the shared rules differed). Generated, not hand-edited.
   ========================================================================== */
.ksi-ct-page { background:#00001c;color:#e8eaf2 }
.ksi-ct-page a { color:#4B9CD3 }
.ksi-ct-page a:hover,.ksi-ct-page a:focus-visible { color:#8fc3e6 }
.ksi-ct-page :focus-visible { outline:2px solid #4B9CD3;outline-offset:3px }
.ksi-ct-wrap { max-width:1280px;margin:0 auto;padding:0 40px }
.ksi-ct-hero { border-top:1px solid #1c2044 }
.ksi-ct-hero-inner { padding-top:96px;padding-bottom:76px }
.ksi-ct-eyebrow { font-size:13px;letter-spacing:.28em;color:#4B9CD3;font-weight:600 }
.ksi-ct-h1 { margin:26px 0 0;max-width:640px;font-size:52px;font-weight:400;letter-spacing:-.01em;line-height:1.12;color:#fff }
.ksi-ct-lede { margin:24px 0 0;max-width:560px;font-size:15.5px;line-height:1.7;color:#c7cde4;text-wrap:pretty }
.ksi-ct-rule { margin-top:52px;height:1px;background:linear-gradient(90deg,#4B9CD3,rgba(75,156,211,.15) 60%,transparent) }
.ksi-ct-reach { display:flex;gap:44px;align-items:stretch;flex-wrap:wrap;margin-top:44px }
.ksi-ct-reach-item { display:flex;flex-direction:column;gap:12px }
.ksi-ct-reach-label { font-size:10.5px;letter-spacing:.2em;color:#9db4d4 }
.ksi-ct-page .ksi-ct-reach-value { font-size:26px;color:#fff;text-decoration:none;white-space:nowrap }
.ksi-ct-page .ksi-ct-reach-value:hover,.ksi-ct-page .ksi-ct-reach-value:focus-visible { color:#4B9CD3 }
.ksi-ct-reach-div { width:1px;background:#2a3050 }
.ksi-ct-social { display:flex;gap:12px }
.ksi-ct-page .ksi-ct-social a { display:flex;align-items:center;justify-content:center;width:44px;height:44px; border:1px solid #3a3f66;border-radius:50%;color:#fff;text-decoration:none;transition:border-color .16s ease,color .16s ease }
.ksi-ct-page .ksi-ct-social a:hover,.ksi-ct-page .ksi-ct-social a:focus-visible { border-color:#4B9CD3;color:#4B9CD3 }
.ksi-ct-secbar { display:flex;align-items:center;gap:20px;margin-bottom:32px }
.ksi-ct-seclabel { font-size:13px;letter-spacing:.26em;color:#4B9CD3;font-weight:600 }
.ksi-ct-secline { flex:1;height:1px;background:#1c2044 }
.ksi-ct-secnum { font-size:44px;font-weight:700;color:rgba(75,156,211,.16);line-height:1 }
.ksi-ct-secbar-light .ksi-ct-seclabel { color:#2f7cad }
.ksi-ct-secbar-light .ksi-ct-secline { background:#e3e7f0 }
.ksi-ct-secbar-light .ksi-ct-secnum { color:rgba(75,156,211,.16) }
.ksi-ct-standfirst { margin:0 0 36px;max-width:640px;font-size:22px;line-height:1.5;color:#fff;font-weight:400;text-wrap:pretty }
.ksi-ct-kicker { font-size:12px;letter-spacing:.2em;color:#7c86a6 }
.ksi-ct-cards { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px }
.ksi-ct-page .ksi-ct-card { background:#05051f;border:1px solid #1c2044;padding:28px 24px; display:flex;flex-direction:column;gap:14px;min-height:196px;text-decoration:none; transition:border-color .16s ease }
.ksi-ct-page .ksi-ct-card:hover,.ksi-ct-page .ksi-ct-card:focus-visible { border-color:#4B9CD3 }
.ksi-ct-card-title { font-size:20px;line-height:1.3;color:#fff }
.ksi-ct-card-body { font-size:15px;line-height:1.55;color:#c7cde4 }
.ksi-ct-arrow { margin-top:auto;font-size:18px;color:#4B9CD3 }
.ksi-ct-band { background:#fff;color:#14162b;margin-top:76px;scroll-margin-top:24px }
.ksi-ct-band .ksi-ct-wrap { padding-top:72px;padding-bottom:76px }
.ksi-ct-formgrid { display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:start }
.ksi-ct-form { display:flex;flex-direction:column;gap:20px }
.ksi-ct-fields { display:grid;grid-template-columns:1fr 1fr;gap:18px }
.ksi-ct-field { display:flex;flex-direction:column }
.ksi-ct-label { font-size:11px;letter-spacing:.18em;color:#2f7cad;margin-bottom:10px;font-weight:600 }
.ksi-ct-input { width:100%;box-sizing:border-box;background:#fff;border:1px solid #c9d2e4;color:#14162b; font-size:15px;font-family:inherit;padding:14px 16px;outline:none;border-radius:0; transition:border-color .16s ease }
.ksi-ct-input:focus { border-color:#4B9CD3;box-shadow:inset 0 0 0 1px #4B9CD3 }
.ksi-ct-select { cursor:pointer;color:#14162b }
.ksi-ct-textarea { min-height:140px;line-height:1.5;resize:vertical }
.ksi-ct-input::placeholder { color:#5a6284 }
.ksi-ct-hp { position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden }
.ksi-ct-submit-row { display:flex;align-items:center;gap:20px;flex-wrap:wrap }
.ksi-ct-page .ksi-ct-submit { background:#00001c;color:#fff;border:none;font-size:13px;font-weight:600; font-family:inherit;letter-spacing:.08em;padding:16px 30px;cursor:pointer; transition:background .16s ease,color .16s ease }
.ksi-ct-page .ksi-ct-submit:hover,.ksi-ct-page .ksi-ct-submit:focus-visible { background:#4B9CD3;color:#ffffff }
.ksi-ct-error { margin:0;font-size:13.5px;color:#b3244a;font-weight:600 }
.ksi-ct-page .ksi-ct-submit[disabled] { opacity:.65;cursor:progress }
.ksi-ct-sent { background:#f6f8fc;border:1px solid #4B9CD3;padding:44px 40px; display:flex;flex-direction:column;gap:16px;align-self:start }
.ksi-ct-sent:focus { outline:none }
.ksi-ct-sent-kicker { font-size:13px;letter-spacing:.2em;color:#4B9CD3;font-weight:600 }
.ksi-ct-sent-title { margin:0;font-size:24px;color:#00001c }
.ksi-ct-sent-body { margin:0;font-size:15.5px;line-height:1.7;color:#3d4560 }
.ksi-ct-sent-body strong { color:#00001c }
.ksi-ct-page .ksi-ct-sent-body a { color:#4B9CD3 }
.ksi-ct-page .ksi-ct-again { align-self:flex-start;background:none;border:1px solid #4B9CD3;color:#4B9CD3; font-size:12px;font-weight:600;font-family:inherit;letter-spacing:.1em;padding:12px 22px;cursor:pointer; margin-top:8px;transition:background .16s ease,color .16s ease }
.ksi-ct-page .ksi-ct-again:hover,.ksi-ct-page .ksi-ct-again:focus-visible { background:#4B9CD3;color:#00001c }
.ksi-ct-aside { background:#f6f8fc;border:1px solid #e3e7f0;padding:32px; display:flex;flex-direction:column;gap:24px;align-self:start }
.ksi-ct-aside-kicker { font-size:11px;letter-spacing:.2em;color:#2f7cad;font-weight:600 }
.ksi-ct-steps { margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:18px }
.ksi-ct-steps li { display:flex;gap:16px;font-size:15px;line-height:1.55;color:#3d4560 }
.ksi-ct-stepnum { color:#4B9CD3;font-variant-numeric:tabular-nums }
.ksi-ct-aside-div { height:1px;background:#e3e7f0 }
.ksi-ct-legal { margin:0;font-size:13px;line-height:1.6;color:#6b7490 }
.ksi-ct-page .ksi-ct-legal a { color:#4B9CD3 }
.ksi-ct-verify { padding-top:76px;padding-bottom:76px }
.ksi-ct-verifygrid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch }
.ksi-ct-panel { background:#05051f;border:1px solid #1c2044;padding:32px 28px; display:flex;flex-direction:column;gap:16px }
.ksi-ct-bignum { margin:0;font-size:34px;font-weight:700;letter-spacing:.04em;color:#fff;line-height:1.1 }
.ksi-ct-bignum-sm { letter-spacing:.02em }
.ksi-ct-panel-body { margin:0;font-size:15px;line-height:1.6;color:#c7cde4;text-wrap:pretty }
.ksi-ct-panel-body strong { color:#fff }
.ksi-ct-page .ksi-ct-panel-link { margin-top:auto;font-size:13px;letter-spacing:.18em;color:#4B9CD3; text-decoration:none;font-weight:600;white-space:nowrap }
.ksi-ct-access { display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:28px; padding:22px 28px;border:1px solid #1c2044 }
.ksi-ct-access-copy { margin:0;font-size:13px;line-height:1.6;color:#c7cde4;flex:1;min-width:280px }
.ksi-ct-access .ksi-ct-panel-link { margin-top:0 }
@media (max-width:1024px) { .ksi-ct-wrap { padding-left:28px;padding-right:28px } }
@media (max-width:1024px) { .ksi-ct-hero-inner { padding-top:72px;padding-bottom:56px } }
@media (max-width:1024px) { .ksi-ct-h1 { font-size:40px } }
@media (max-width:1024px) { .ksi-ct-cards { grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:1024px) { .ksi-ct-formgrid { grid-template-columns:minmax(0,1fr);gap:32px } }
@media (max-width:1024px) { .ksi-ct-verifygrid { grid-template-columns:minmax(0,1fr) } }
@media (max-width:1024px) { .ksi-ct-reach { gap:28px } }
@media (max-width:767px) { .ksi-ct-wrap { padding-left:20px;padding-right:20px } }
@media (max-width:767px) { .ksi-ct-hero-inner { padding-top:52px;padding-bottom:44px } }
@media (max-width:767px) { .ksi-ct-h1 { font-size:32px } }
@media (max-width:767px) { .ksi-ct-lede { font-size:15px } }
@media (max-width:767px) { .ksi-ct-reach { flex-direction:column;gap:26px } }
@media (max-width:767px) { .ksi-ct-reach-div { display:none } }
@media (max-width:767px) { .ksi-ct-page .ksi-ct-reach-value { font-size:22px } }
@media (max-width:767px) { .ksi-ct-cards { grid-template-columns:minmax(0,1fr) } }
@media (max-width:767px) { .ksi-ct-card { min-height:0 } }
@media (max-width:767px) { .ksi-ct-fields { grid-template-columns:minmax(0,1fr) } }
@media (max-width:767px) { .ksi-ct-secnum { font-size:32px } }
@media (max-width:767px) { .ksi-ct-seclabel { font-size:11.5px;letter-spacing:.18em } }
@media (max-width:767px) { .ksi-ct-standfirst { font-size:19px } }
@media (max-width:767px) { .ksi-ct-band { margin-top:56px } }
@media (max-width:767px) { .ksi-ct-band .ksi-ct-wrap { padding-top:52px;padding-bottom:56px } }
@media (max-width:767px) { .ksi-ct-routing { padding-bottom:0 } }
@media (max-width:767px) { .ksi-ct-verify { padding-top:56px;padding-bottom:56px } }
@media (max-width:767px) { .ksi-ct-aside,.ksi-ct-sent { padding:26px 22px } }
@media (max-width:767px) { .ksi-ct-page .ksi-ct-submit { width:100%;text-align:center } }
@media (max-width:767px) { .ksi-ct-bignum { font-size:30px } }
@media (prefers-reduced-motion:reduce) { .ksi-ct-page .ksi-ct-card,.ksi-ct-page .ksi-ct-submit,.ksi-ct-input, .ksi-ct-page .ksi-ct-again,.ksi-ct-page .ksi-ct-social a { transition:none } }
.ksi-ex-page::after, .ksi-kl-page::after, .ksi-in-page::after { content: ''; display: block; height: 72px; background: #ffffff; }
@media (max-width: 767px) { .ksi-ex-page::after, .ksi-kl-page::after, .ksi-in-page::after { height: 48px; } }
.ksi-in-page::after, .ksi-fm-page::after, .ksi-kl-page::after, .ksi-ex-page::after { content: none; }
body:has(.ksi-in-page) .ksi-footer, body:has(.ksi-fm-page) .ksi-footer, body:has(.ksi-kl-page) .ksi-footer, body:has(.ksi-ex-page) .ksi-footer, body:has(.ksi-practice-page-root) .ksi-footer, body:has(.ksi-mp-page) .ksi-footer, body:has(.ksi-people-page) .ksi-footer, body:has(.ksi-p3-page) .ksi-footer { margin-top: 0; }
@media (max-width:1024px) { .ksi-p3-page div[style*="grid-template-columns:minmax(0,5fr) minmax(0,4fr)"] { grid-template-columns:minmax(0,1fr)!important;gap:40px!important } }
@media (max-width:1024px) { .ksi-p3-page div[style*="padding:96px 40px 80px"] { padding:72px 28px 56px!important } }
@media (max-width:1024px) { .ksi-p3-page div[style*="padding:88px 40px 84px"] { padding:64px 28px 60px!important } }
@media (max-width:1024px) { .ksi-p3-page h1 { font-size:clamp(40px,6vw,72px)!important } }
@media (max-width:767px) { .ksi-p3-page div[style*="grid-template-columns:repeat(3,minmax(0,1fr))"] { grid-template-columns:minmax(0,1fr)!important } }
@media (max-width:767px) { .ksi-p3-page div[style*="padding:96px 40px 80px"] { padding:52px 20px 44px!important } }
@media (max-width:767px) { .ksi-p3-page div[style*="padding:88px 40px 84px"] { padding:48px 20px 44px!important } }
@media (max-width:767px) { .ksi-p3-page h1 { font-size:clamp(30px,7.5vw,44px)!important } }
@media (max-width:767px) { .ksi-p3-page img[src*="p3-hook"] { display:none!important } }

/* KSI USA's contact page has two routing cards, not four (no Make a Payment or Careers card — 10 Oct 2026).
   Wide screens only, so the sister site's own breakpoints still stack them on tablets and phones. */
@media (min-width: 768px) { .ksi-ct-cards.ksi-ct-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }


/* .services (/practice/): the sister site's page-scoped block, verbatim (Francis, 11 Oct 2026). */
/* .practice page — scoped. Values from the design handoff README (2026-08-04).
   Everything structural is inline on the elements, matching the design file;
   this block holds only what inline styles cannot express: hover states,
   the accordion mechanics, and responsive behaviour. */
.ksi-practice-page{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background:#fff}
.ksi-practice-page a{text-decoration:none}

/* accordion row (a <button>, so it is keyboard reachable) */
.ksi-practice-page .ksi-pr-row{display:grid;grid-template-columns:90px minmax(0,1fr) auto;
  gap:24px;align-items:baseline;padding:30px 0;border-top:1px solid #d7dce8;width:100%;
  background:none;border-left:0;border-right:0;border-bottom:0;cursor:pointer;
  text-align:left;font:inherit;color:inherit}
.ksi-practice-page .ksi-pr-row:focus-visible{outline:2px solid #4B9CD3;outline-offset:3px}

/* Row hover.
   NOTE: the rows are <button type="button"> (for keyboard access), which makes
   them match a legacy rule in reset.css:
       [type=button]:hover,[type=submit]:focus{background-color:#c36;color:#fff}
   #c36 is pink — nothing to do with this site's palette, but it applied the
   moment the accordion shipped. The rules below neutralise it and replace it
   with the site's own light blue, matching the nav hover treatment already in
   ksi-modern.css (rgb(77 156 211 / 10%)). Higher specificity than reset.css,
   so no !important needed — but do not remove the background declaration or
   the pink comes straight back. */
.ksi-practice-page .ksi-pr-row:hover,
.ksi-practice-page .ksi-pr-row:focus,
.ksi-practice-page .ksi-pr-row:active{
  background-color:rgba(75,156,211,.08);
  color:inherit;
  transition:background-color .15s ease}
.ksi-practice-page .ksi-pr-row:hover .ksi-pr-title,
.ksi-practice-page .ksi-pr-row:focus .ksi-pr-title{color:#4B9CD3}
.ksi-practice-page .ksi-pr-row:hover .ksi-pr-glyph{color:#2f7cad}
.ksi-practice-page .ksi-pr-title{display:block;font-size:42px;font-weight:700;color:#00001c;
  letter-spacing:-0.015em;line-height:1.1}
.ksi-practice-page .ksi-pr-desc{display:block;font-size:15px;color:#7c86a6;margin-top:8px}
.ksi-practice-page .ksi-pr-glyph{font-size:30px;font-weight:300;color:#4B9CD3;line-height:1}

/* panel — height/opacity transition, per README "welcome production enhancement" */
.ksi-practice-page .ksi-pr-panel{overflow:hidden;transition:height .25s ease,opacity .25s ease}
.ksi-practice-page .ksi-pr-panel[hidden]{display:none}
.ksi-practice-page .ksi-pr-banner{width:100%;height:380px;object-fit:cover;display:block}

.ksi-practice-page .ksi-pr-sub{color:#33364f;transition:color .15s ease}
.ksi-practice-page .ksi-pr-sub:hover{color:#4B9CD3}
.ksi-practice-page .ksi-pr-explore{transition:background .15s ease}
.ksi-practice-page .ksi-pr-explore:hover{background:#4B9CD3!important}
.ksi-practice-page .ksi-pr-badges:hover span{border-color:#2f7cad}

@media (prefers-reduced-motion:reduce){
  .ksi-practice-page .ksi-pr-panel{transition:none}
}

/* ---- responsive. The design is fixed-width; these are the minimum steps
   needed for it to hold together on smaller screens. ---- */
@media (max-width:1000px){
  .ksi-practice-page .ksi-pr-h1{font-size:clamp(38px,6.4vw,64px)}
  .ksi-practice-page .ksi-pr-panel-grid{grid-template-columns:minmax(0,1fr)!important;gap:28px!important}
  .ksi-practice-page .ksi-pr-banner{height:280px;order:-1}
  .ksi-practice-page .ksi-pr-title{font-size:34px}
}
@media (max-width:760px){
  .ksi-practice-page .ksi-pr-hero{padding:64px 20px 52px!important}
  .ksi-practice-page .ksi-pr-h1{font-size:clamp(32px,8vw,44px)}
  .ksi-practice-page .ksi-pr-lede{font-size:16px}
  .ksi-practice-page .ksi-pr-creds{gap:26px!important}
  .ksi-practice-page .ksi-pr-rule{display:none}
  .ksi-practice-page .ksi-pr-row{grid-template-columns:52px minmax(0,1fr) auto;gap:14px;padding:24px 0}
  .ksi-practice-page .ksi-pr-title{font-size:27px}
  .ksi-practice-page .ksi-pr-panel-grid{padding-bottom:34px!important}
  .ksi-practice-page .ksi-pr-cta{padding:26px 22px!important}
}
@media (max-width:520px){
  .ksi-practice-page .ksi-pr-panel-grid .ksi-pr-sub{font-size:14px}
  .ksi-practice-page .ksi-pr-panel-grid > div > div[style*="1fr 1fr"]{grid-template-columns:1fr!important}
}
/* The sister site's site-wide stylesheet also sets the .practice hero to its 1280px grid with 40px
   gutters (lined up with the logo); these are its two rules, .practice parts only (11 Oct 2026). */
.ksi-practice-page .ksi-pr-hero{padding-left:0!important;padding-right:0!important}
.ksi-practice-page.ksi-practice-page .ksi-pr-hero > div[style*="max-width"]{max-width:1280px!important;padding-left:40px!important;padding-right:40px!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box!important}


/* /kreditor-services/: the sister site's page-scoped .ksi-pp block (Francis, 12 Oct 2026: use the template for the
   inside page). Its scroll reveal needs a script this site does not carry, so that one rule is left out; items show. */
body .ksi-pp{all:revert;display:block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;box-sizing:content-box;font-size:medium;font-weight:normal;font-style:normal;line-height:normal;letter-spacing:normal;word-spacing:normal;text-align:start;text-transform:none;text-indent:0;white-space:normal}
body .ksi-pp :where(*:not(svg, svg *)){all:revert}
@media (max-width:760px){
body .ksi-pp [style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr) !important;row-gap:28px !important}
body .ksi-pp [style*="grid-template-columns:minmax(0,1fr) 420px"] > div:empty{display:none}
body .ksi-pp [style*="max-width:1280px"]{padding-left:20px !important;padding-right:20px !important}
body .ksi-pp [style*="padding:36px 40px"]{padding:28px 22px !important}
body .ksi-pp h1{font-size:clamp(34px,9.5vw,44px) !important}
body .ksi-pp [style*="font-size:40px"]{font-size:30px !important}
body .ksi-pp [style*="font-size:34px"]{font-size:22px !important}
body .ksi-pp [style*="height:420px"]{max-width:340px}
body .ksi-pp [style*="white-space:nowrap"]{white-space:normal !important}
body .ksi-pp [style*="text-align:justify"]{text-align:left !important}
body .ksi-pp [style*="margin-bottom:-140px"]{margin-bottom:0 !important;min-height:0 !important;padding-top:28px !important}
body .ksi-pp [style*="margin-bottom:-140px"] > div{min-height:440px !important}
}
.ksi-pp .ksi-pp-h1:hover{color:#ffffff !important}
.ksi-pp .ksi-pp-h2:hover{color:#4B9CD3 !important}
.ksi-pp .ksi-pp-h3:hover{color:#00001c !important}
.ksi-pp .ksi-pp-h4:hover{color:#2f7cad !important}
.ksi-pp .ksi-pp-h5:hover{color:#00001c !important}
.ksi-pp .ksi-pp-h6:hover{color:#00001c !important}
.ksi-pp .ksi-pp-h7:hover{color:#00001c !important}
.ksi-pp .ksi-pp-h8:hover{color:#00001c !important}
.ksi-pp .ksi-pp-h9:hover{background:#ffffff !important}
body .ksi-pp{background:#ffffff;color:#14162b}
body .ksi-pp a{color:#4B9CD3}body .ksi-pp a:hover{color:#2f7cad}

/* Home band: the line under ".kloud" (Francis, 12 Oct 2026). Sits under the link without moving its arrow. */
.ksi-band-sub { margin: -10px 0 0; padding: 0 0 18px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.72); letter-spacing: .01em; }

/* Home .services band. Teresa, 12 Oct 2026: "match font size button" with the sister site's .practice band.
   Values measured from its rendered page at 1280px: heading 43.52px/400/-0.025em, copy 20px at 90% white,
   button 18px/700 dark text on #4B9CD3, 18px 34px padding, square corners, sentence case. */
[data-elementor-type='wp-page'].elementor-37 .elementor-element-30244b2 .elementor-heading-title,
.elementor-37 .elementor-element-30244b2 .elementor-heading-title {
  color: #fff !important;
  font-size: max(32px, 3.4vw) !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.5 !important;
}
.elementor-37 .ksi-trust-copy {
  font-size: max(20px, 1.5vw) !important;
  line-height: 1.5 !important;
  color: rgb(255 255 255 / 90%) !important;
  max-inline-size: 40rem !important;
}
.elementor-37 .elementor-element-8e98f8f .elementor-button {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  color: #00001c !important;
  background-color: #4b9cd3 !important;
  padding: 18px 34px !important;
  line-height: 1.5 !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.elementor-37 .elementor-element-8e98f8f .elementor-button .elementor-button-text { color: inherit !important; }

/* Footer: Privacy Statement only, the copyright beside it (Teresa, 12 Oct 2026). Terms of Service and the
   Accessibility Policy are no longer linked here; their pages stay online (the Privacy Statement refers to the
   Accessibility Policy). */
.ksi-f-legal-links { align-items: baseline; }
.ksi-f-legal-links .ksi-f-copy { text-transform: none; letter-spacing: .06em; color: rgba(255,255,255,.5); }