/*
Theme Name: Khwarizm
Theme URI: https://khwarizm.com
Description: Astra child theme for Khwarizm — IT Operations, IT Services, Data Management, Digital Transformation. DXC-inspired: midnight blue on warm canvas, sunset-to-blue gradient accents, pill buttons, rounded cards.
Author: Khwarizm
Template: astra
Version: 2.4.31
Text Domain: khwarizm
*/

/* ---- Fonts (bundled locally, no CDN) ----
   Archivo Expanded stands in for DXC's GT Standard L Expanded;
   Inter is the same body face DXC uses. */
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-expanded-var.woff2") format("woff2");
  font-weight: 700 800;
  font-stretch: 125%;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --kz-ink: #0e1020;        /* midnight blue */
  --kz-ink-soft: #4b4d5d;
  --kz-canvas: #f6f3f0;     /* warm canvas */
  --kz-paper: #ffffff;
  --kz-accent: #ff7e51;     /* melon coral — fills, borders, text on dark */
  --kz-accent-ink: #bd3c0f; /* deepened coral — accent AS TEXT on light grounds
                               (4.98:1 on --kz-canvas; the fill coral is only 2.6:1).
                               Dark sections below reset it back to --kz-accent. */
  --kz-blue: #4995ff;       /* true blue */
  --kz-royal: #004aac;      /* royal blue (links) */
  --kz-gold: #ffae41;
  --kz-muted: #4b4d5d;
  --kz-line: #dcdce0;
  --kz-gradient: linear-gradient(90deg, #ffc271, #ff7e51, #fd7f53, #4995ff);
  --kz-radius-card: 24px;
  --kz-radius-band: 30px;
}

/* Dark sections: the deepened accent-text colour is only needed on light grounds.
   On midnight blue it would read at 3.4:1, so hand --kz-accent-ink back to the
   full-strength coral (7.5:1 on --kz-ink) for anything nested inside a dark band. */
.kz-hero,
.kz-page-hero,
.kz-cta,
.kz-cases,
.kz-case,
.kz-topbar,
.kz-sitemap,
.site-footer {
  --kz-accent-ink: var(--kz-accent);
}

body {
  background: var(--kz-canvas);
  color: var(--kz-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, h3, h4 {
  font-family: "Archivo", "Inter", sans-serif;
  font-stretch: 125%;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.08;
}

a {
  color: var(--kz-royal);
}

a:hover {
  color: var(--kz-accent-ink);
}

/* Buttons: DXC pill shape */
.wp-block-button__link,
.ast-button,
button[type="submit"] {
  background: var(--kz-ink);
  border-radius: 1000px;
  font-weight: 600;
  padding: 0.8rem 1.8rem;
  text-transform: none;
}

.wp-block-button__link:hover {
  background: var(--kz-accent);
  color: var(--kz-ink);
}

/* Outline buttons: extra specificity — Astra's inline CSS loads after this
   sheet and recolors .is-style-outline links otherwise */
.wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent;
  border: 2px solid var(--kz-ink);
  color: var(--kz-ink);
}

/* !important: Astra prints its button palette inline after this sheet */
.kz-hero .wp-block-button.is-style-outline > .wp-block-button__link,
.kz-cta .wp-block-button.is-style-outline > .wp-block-button__link {
  background: transparent !important;
  border-color: var(--kz-paper) !important;
  color: var(--kz-paper) !important;
}

/* Header */
.main-header-bar, .ast-primary-header-bar {
  background: var(--kz-paper);
  border-bottom: 1px solid var(--kz-line);
}

.site-title a, .site-title a:hover {
  color: var(--kz-ink);
  font-family: "Archivo", sans-serif;
  font-stretch: 125%;
  font-weight: 800;
}

.main-header-menu a {
  font-weight: 600;
}

.main-header-menu a:hover {
  color: var(--kz-accent-ink);
}

/* Brand logo in the header. The wordmark already reads "Khwarizm", so Astra's
   site-title text alongside it is redundant. */
/* SVG logo has no fixed pixel width, so Astra's flex branding container collapses
   and its max-width:100% would clamp the mark to a few px. Size it from an explicit
   height and let width follow, ignoring the collapsed parent. */
.custom-logo-link img,
.kz-site-logo {
  height: 60px !important;
  max-height: none !important;
  max-width: none !important;
  width: auto !important;
}

.ast-site-identity .site-title {
  display: none;
}

/* ---- Mega menu ----
   Brief: "only by standing on each tab without clicking, a menu drops like in
   DXC". Astra's default is a narrow boxed dropdown, so the panel is re-based on
   the header bar to span its full width. Desktop only — below Astra's 921px
   breakpoint its accordion behaviour is correct and left alone. */
@media (min-width: 922px) {
  /* The panel resolves against the nearest positioned ancestor, so the header
     bar is made that ancestor and every wrapper between it and the <li> is
     forced static — otherwise the panel anchors to the tab and stays narrow. */
  .ast-primary-header-bar,
  .main-header-bar {
    position: relative;
  }

  .ast-primary-header-bar .ast-builder-layout-element,
  .site-navigation,
  .main-navigation,
  .main-header-menu,
  .main-header-menu > .menu-item-has-children {
    position: static !important;
  }

  .main-header-menu > .menu-item-has-children > .sub-menu {
    background: var(--kz-paper) !important;
    border: 0 !important;
    border-top: 3px solid transparent !important;
    border-image: var(--kz-gradient) 1 !important;
    box-shadow: 0 24px 48px rgba(14, 16, 32, 0.16) !important;
    column-gap: 2.5rem;
    columns: 3;
    display: block !important;
    left: 0 !important;
    opacity: 0;
    padding: 2.25rem clamp(1.5rem, 6vw, 5rem) 2.5rem !important;
    pointer-events: none;
    position: absolute !important;
    right: 0 !important;
    top: 100% !important;
    transform: translateY(-10px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    visibility: hidden;
    width: auto !important;
    z-index: 90;
  }

  /* Hover to open; focus-within keeps it keyboard-reachable */
  .main-header-menu > .menu-item-has-children:hover > .sub-menu,
  .main-header-menu > .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
  }

  .main-header-menu > .menu-item-has-children > .sub-menu > li {
    border: 0 !important;
    break-inside: avoid;
    margin-bottom: 0.35rem;
    width: 100% !important;
  }

  .main-header-menu > .menu-item-has-children > .sub-menu a {
    border: 0 !important;
    color: var(--kz-ink) !important;
    font-size: 1rem;
    line-height: 1.35;
    padding: 0.55rem 0 !important;
  }

  .main-header-menu > .menu-item-has-children > .sub-menu a:hover {
    color: var(--kz-accent-ink) !important;
  }

  /* Panel links line up with the site container rather than the viewport edge */
  .main-header-menu > .menu-item-has-children > .sub-menu {
    padding-left: max(clamp(1.5rem, 6vw, 5rem), calc((100vw - 1200px) / 2)) !important;
    padding-right: max(clamp(1.5rem, 6vw, 5rem), calc((100vw - 1200px) / 2)) !important;
  }
}

/* ---- Top utility bar (Careers + Contact us), above the main header ----
   Actions, not topics, so they sit apart from the six capability tabs. Contact
   us is a rounded-corner box CTA (not a full pill). Rendered in functions.php
   via astra_header_before. */
.kz-topbar {
  background: var(--kz-ink);
}

.kz-topbar-inner {
  align-items: center;
  display: flex;
  gap: 1.5rem;
  justify-content: flex-end;
  padding: 0.45rem clamp(1rem, 3vw, 2rem);
}

.kz-topbar a {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.kz-topbar-link {
  color: var(--kz-paper);
}

.kz-topbar-link:hover {
  color: var(--kz-accent-ink);
}

.kz-topbar-cta {
  background: var(--kz-accent);
  border-radius: 8px;
  color: var(--kz-ink);
  padding: 0.42rem 1.05rem;
}

.kz-topbar-cta:hover {
  background: var(--kz-paper);
  color: var(--kz-ink);
}

/* KC Infotech wordmark replacing its text label in the primary nav */
/* Was 13px, matched to the nav text's cap-height (~12px); bumped 20% to 15.6px
   on request so the wordmark sits slightly prouder than the menu labels.
   Asset is 2x, so it stays crisp. */
.main-header-menu .kz-kc-logo {
  display: block;
  height: 15.6px;
  width: auto;
}

.main-header-menu a:hover .kz-kc-logo {
  opacity: 0.75;
}

/* ---- Footer sitemap (brief section 6) ---- */
.kz-sitemap {
  background: var(--kz-ink);
  color: #c9cad4;
  padding: 3.5rem clamp(1.5rem, 5vw, 4rem) 2.5rem;
}

.kz-sitemap-inner {
  margin: 0 auto;
  max-width: 1200px;
}

.kz-sitemap-brand {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
}

/* Footer brand is the Khwarizm Consulting logo (full colour) in place of the
   former "Khwarizm" / "Power your data" text lockup. The dark footer would swallow
   the mark's grey/red, so it sits in its own white rounded block that hugs it. */
.kz-sitemap-logobox {
  background: #fff;
  border-radius: 12px;
  display: inline-block;
  padding: 12px 18px;
}
.kz-sitemap-logo {
  display: block;
  height: 44px;
  width: auto;
}

/* minmax must stay small enough that all top-level tabs fit inside
   .kz-sitemap-inner's 1200px — otherwise the last column overflows and is lost */
.kz-sitemap-menu {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.kz-sitemap-menu > li > a {
  color: var(--kz-paper);
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 0.95rem;
  font-stretch: 125%;
  font-weight: 700;
  margin-bottom: 0.75rem;
  text-decoration: none;
}

.kz-sitemap-menu .sub-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kz-sitemap-menu .sub-menu a {
  color: #a9abbb;
  display: block;
  font-size: 0.9rem;
  padding: 0.3rem 0;
  text-decoration: none;
}

.kz-sitemap-menu a:hover {
  color: var(--kz-accent-ink);
}

/* ---- Contact form (Contact Form 7) ---- */
.kz-form {
  background: var(--kz-canvas);
  padding: 4rem clamp(1.5rem, 5vw, 3rem);
}

/* Left-aligned so the fields sit under the section heading, not floating centre */
.kz-form .wpcf7 {
  margin: 2rem 0 0;
  max-width: 760px;
}

.kz-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.kz-form-row > p {
  flex: 1 1 240px;
  margin: 0;
}

.kz-form .wpcf7 p {
  margin-bottom: 1rem;
}

.kz-form .wpcf7 label {
  color: var(--kz-ink);
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.kz-form .wpcf7 input[type="text"],
.kz-form .wpcf7 input[type="email"],
.kz-form .wpcf7 input[type="tel"],
.kz-form .wpcf7 select,
.kz-form .wpcf7 textarea {
  background: var(--kz-paper);
  border: 1px solid var(--kz-line);
  border-radius: 12px;
  color: var(--kz-ink);
  font-family: inherit;
  font-size: 1rem;
  padding: 0.8rem 1rem;
  width: 100%;
}

.kz-form .wpcf7 textarea {
  min-height: 140px;
  resize: vertical;
}

.kz-form .wpcf7 input:focus,
.kz-form .wpcf7 select:focus,
.kz-form .wpcf7 textarea:focus {
  border-color: var(--kz-accent);
  outline: 2px solid rgba(255, 126, 81, 0.25);
  outline-offset: 1px;
}

.kz-form .wpcf7 input[type="submit"] {
  background: var(--kz-accent);
  border: 0;
  border-radius: 1000px;
  color: var(--kz-ink);
  cursor: pointer;
  font-weight: 700;
  padding: 0.85rem 2.25rem;
  width: auto;
}

.kz-form .wpcf7 input[type="submit"]:hover {
  background: var(--kz-ink);
  color: var(--kz-paper);
}

.kz-form .wpcf7-spinner {
  vertical-align: middle;
}

/* ---- Reusable section classes (used via block className) ---- */

/* Astra sets explicit heading colors; dark sections must force light headings */
.kz-hero h1,
.kz-page-hero h1,
.kz-cta h2 {
  color: var(--kz-paper);
}

/* Pages carry their own hero blocks — hide Astra's title band above them */
.page .entry-header {
  display: none;
}

/* Full-bleed cinematic hero: scene photo-plate + scrim, centred copy, DXC-style */
.kz-hero {
  align-items: center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 45%, rgba(11, 13, 24, 0.62) 0%, rgba(11, 13, 24, 0) 100%),
    linear-gradient(180deg, rgba(11, 13, 24, 0.72) 0%, rgba(11, 13, 24, 0.3) 52%, rgba(11, 13, 24, 0.16) 100%),
    url("assets/hero-scene.svg") center / cover no-repeat,
    var(--kz-ink);
  border-radius: var(--kz-radius-band);
  color: var(--kz-paper);
  display: flex;
  flex-direction: column;
  margin: 1rem;
  min-height: min(76vh, 660px);
  overflow: hidden;
  padding: 6rem 2.5rem;
  text-align: center;
}

.kz-hero h1 {
  font-size: clamp(2.6rem, 6.5vw, 4.75rem);
  max-width: 24ch;
  text-shadow: 0 2px 24px rgba(11, 13, 24, 0.55);
}

.kz-hero p {
  color: #dcdde6;
  font-size: 1.2rem;
  max-width: 58ch;
  text-shadow: 0 1px 16px rgba(11, 13, 24, 0.6);
}

.kz-hero .wp-block-buttons {
  justify-content: center;
}

.kz-hero .wp-block-button__link {
  background: var(--kz-paper);
  color: var(--kz-ink);
}

.kz-hero .wp-block-button__link:hover {
  background: var(--kz-accent);
}

/* Kicker label above headings */
.kz-kicker {
  color: var(--kz-accent-ink);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Section headings tinted with the kicker accent (e.g. home "Awarded projects",
   "Events and News" after their kickers were removed). */
.kz-accent-h {
  color: var(--kz-accent-ink);
}

/* Stats band: gradient numerals on canvas */
.kz-stats {
  padding: 4rem 1.5rem;
}

/* One size for every stat value, figures and words alike: a row mixing "38+"
   at display size with "PCI-DSS" beside it reads as a mistake, whichever of the
   two is larger. Sized for the words, which is the shorter of the two ceilings. */
.kz-stats h3 {
  color: var(--kz-accent-ink);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1.25;
  margin-bottom: 0.25rem;
  text-wrap: balance;
  width: auto;
}

.kz-stats p {
  color: var(--kz-muted);
  font-weight: 600;
}

/* ---- Section spacing: a consistent 40px of empty space below every block, on
   every page. Transparent sections get 20px top + 20px bottom (they touch, so the
   gap = 40px). Astra forces ~48px on every top-level block via an inline rule, so
   !important is required to beat it. A hero's bottom padding sits inside its band
   (its min-height centers the copy), so the space below a hero comes from a 20px
   margin instead — 20px margin + the next section's 20px top = 40px. The full-bleed
   image hero (kz-solhero) keeps padding:0 for its edge-to-edge image. ---- */
.kz-page-hero,
.kz-cards,
.kz-article,
.kz-solband,
.kz-stats,
.kz-cta {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* Card blocks (incl. Awarded projects / What's new tiles) get a touch more
   breathing room at the top than the shared 20px above. */
.kz-cards {
  padding-top: 30px !important;
}

.kz-page-hero,
.kz-solhero {
  margin-bottom: 20px !important;
}

/* Capability / announcement cards: white, rounded, soft shadow */
.kz-cards {
  padding: 5rem 1.5rem;
}

/* Technology & tools — brand-colour logo strip (one row, wraps on small screens). */
.kz-logostrip {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  justify-content: center;
  margin-top: 1.75rem;
}
.kz-logostrip img {
  display: block;
  height: 34px;
  width: auto;
}
/* Wordmarks (Oracle, Beam) are far wider than the square marks — trim their
   height so they sit in visual balance with the rest of the row. */
.kz-logostrip img.kz-logo-wide {
  height: 26px;
}

.kz-card {
  background: var(--kz-paper);
  border-radius: var(--kz-radius-card);
  box-shadow: 0 2px 12px rgba(14, 16, 32, 0.06);
  /* Flex column so the "Read more" link (.kz-more) can be pinned to the bottom
     with margin-top:auto — this aligns every card's link on one baseline even
     when titles/blurbs differ in length. */
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* Pin the read-more link to the bottom of the card so links line up across the row. */
.kz-card .kz-more {
  margin-bottom: 0;
  margin-top: auto;
  padding-top: 1.25rem;
}

.kz-card:hover {
  box-shadow: 0 16px 36px rgba(14, 16, 32, 0.12);
  transform: translateY(-3px);
}

.kz-card h3 {
  font-size: 1.3rem;
}

/* Project-tile headings vary in length (1–3 lines); reserve 3 lines of height so
   the blurb below each heading starts on the same baseline across the row. */
.kz-tiles .kz-card h3 {
  min-height: 3.9em;
}

.kz-card p {
  color: var(--kz-muted);
}

.kz-card a {
  color: var(--kz-ink);
  font-weight: 600;
}

.kz-card a:hover {
  color: var(--kz-accent-ink);
}

/* Announcement-tile row ("What's new") sits directly on the canvas */
.kz-tiles {
  background: transparent;
}

.kz-tag {
  color: var(--kz-muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

/* Dark CTA band: floating rounded card, mirrored waves */
.kz-cta {
  background: var(--kz-ink);
  color: var(--kz-paper);
  margin: 0;
  overflow: hidden;
  padding: 5rem 2rem;
  text-align: center;
}

.kz-cta h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}

.kz-cta p {
  color: #c9cad4;
}

.kz-cta .wp-block-button__link {
  background: var(--kz-paper);
  color: var(--kz-ink);
}

.kz-cta .wp-block-button__link:hover {
  background: var(--kz-accent);
}

/* Page hero (interior pages) — full-bleed, square corners */
.kz-page-hero {
  background:
    url("assets/hero-waves.svg") right -10% bottom -55% / 45% auto no-repeat,
    var(--kz-ink);
  color: var(--kz-paper);
  margin: 0;
  overflow: hidden;
  /* Same fixed height as kz-solhero so every page hero matches; copy centered. */
  min-height: clamp(340px, 44vh, 560px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 2.5rem;
}

.kz-page-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  max-width: 20ch;
}

.kz-page-hero p {
  color: #c9cad4;
  font-size: 1.15rem;
  max-width: 60ch;
}

/* Split intro (text + media) on the light canvas — used on Careers instead of
   the dark page-hero band. Columns stack automatically below 782px. */
.kz-split {
  gap: clamp(2rem, 5vw, 4rem);
  margin-left: auto;
  margin-right: auto;
  padding: 4rem 1.5rem 2rem;
}

.kz-split h1 {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  max-width: 16ch;
}

.kz-split p:not(.kz-kicker) {
  color: var(--kz-muted);
  font-size: 1.15rem;
  max-width: 46ch;
}

.kz-split .kz-media img {
  border-radius: var(--kz-radius-card);
  display: block;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  width: 100%;
}

/* ---- Home 2 (BD comparison variant) ----
   DXC-style full-bleed photo hero with centred copy over the sky and three
   frosted overlay boxes centred vertically in the image. */
.kz-hero2 {
  /* JPEG first, then the same layers with image-set(): older engines keep the
     JPEG declaration, newer ones take the WebP and save ~20% on the LCP image. */
  background:
    linear-gradient(180deg, rgba(240, 244, 250, 0.85) 0%, rgba(240, 244, 250, 0) 32%, rgba(14, 16, 32, 0.15) 100%),
    url("assets/home-bg-green.jpg") center center / cover no-repeat;
  background:
    linear-gradient(180deg, rgba(240, 244, 250, 0.85) 0%, rgba(240, 244, 250, 0) 32%, rgba(14, 16, 32, 0.15) 100%),
    image-set(url("assets/home-bg-green.webp") type("image/webp"), url("assets/home-bg-green.jpg") type("image/jpeg")) center center / cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(112vh, 1040px);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
  position: relative;
}

.kz-hero2-copy {
  margin: 0 auto;
  max-width: min(1200px, 94vw);
  text-align: center;
}

.kz-hero2-copy h1:not(.kz-sr-only),
.kz-hero2-copy h2 {
  font-size: clamp(1.5rem, 2.4vw, 2.4rem);
  margin: 0.3rem auto 0.5rem;
  /* Two-sentence headline: wrap into balanced lines (breaks at the sentence). */
  max-width: 34ch;
  text-wrap: balance;
}

.kz-hero2-copy p:not(.kz-kicker) {
  color: var(--kz-ink);
  font-size: 1.05rem;
  font-weight: 600;
  margin-left: auto;
  margin-right: auto;
  max-width: 46ch;
  text-shadow: 0 1px 12px rgba(240, 244, 250, 0.9);
}

/* Three cards in a row on the lower hero. A rotating spotlight brings one card
   forward (brighter, scaled up, lifted) for ~5s, then moves to the next — all
   three stay visible. CSS-only; 15s loop. Note: a separate legacy .kz-carousel
   (case-study scroll strip) exists lower in this file — Home 2 uses .kz-trio. */
.kz-trio {
  align-items: stretch;
  gap: clamp(1rem, 2vw, 1.6rem);
  margin: 0 auto;
  max-width: 1160px;
  width: 100%;
}

.kz-trio .wp-block-column {
  display: flex;
}

.kz-glass {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--kz-radius-card);
  color: var(--kz-ink);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.25rem, 2vw, 1.8rem);
  width: 100%;
}

.kz-trio .kz-glass p {
  font-size: 0.92rem;
}

/* Rotating spotlight: each card is focused during its own 5s of the 15s loop. */
.kz-trio .kz-glass {
  animation: kz-focus 15s infinite;
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
}

/* Delay is keyed off the COLUMN position: each .kz-glass is the only child of
   its .wp-block-column, so :nth-child on .kz-glass itself never matches. */
.kz-trio .wp-block-column:nth-child(2) .kz-glass { animation-delay: 5s; }
.kz-trio .wp-block-column:nth-child(3) .kz-glass { animation-delay: 10s; }

@keyframes kz-focus {
  0%   { opacity: 0.55; transform: scale(0.97); box-shadow: 0 8px 18px rgba(14, 16, 32, 0.12); }
  3%   { opacity: 1;    transform: scale(1.045); box-shadow: 0 26px 50px rgba(14, 16, 32, 0.3); }
  30%  { opacity: 1;    transform: scale(1.045); box-shadow: 0 26px 50px rgba(14, 16, 32, 0.3); }
  34%  { opacity: 0.55; transform: scale(0.97); box-shadow: 0 8px 18px rgba(14, 16, 32, 0.12); }
  100% { opacity: 0.55; transform: scale(0.97); box-shadow: 0 8px 18px rgba(14, 16, 32, 0.12); }
}

.kz-glass-link {
  margin-top: auto;
  padding-top: 0.5rem;
}

/* Reduced-motion: show all three equally, no rotating focus. */
@media (prefers-reduced-motion: reduce) {
  .kz-trio .kz-glass {
    animation: none;
    box-shadow: 0 16px 36px rgba(14, 16, 32, 0.16);
    opacity: 1;
    transform: none;
  }
}

/* ---- Home 2 alternative palette (BD comparison) ----
   Scoped to the Home 2 page only (body.kz-alt-palette, set in functions.php).
   Remaps the theme's design tokens so the whole page — header included — renders
   in navy + sage with gold + soft-gray accents, leaving every other page on the
   brand palette. */
body.kz-alt-palette {
  --kz-ink: #202a44;        /* navy blue — primary dark / text / dark bands */
  --kz-ink-soft: #3b455f;
  --kz-canvas: #f4f5f6;     /* clean light neutral */
  --kz-paper: #ffffff;
  --kz-accent: #88b04b;     /* sage green — primary accent */
  --kz-accent-ink: #52741d; /* deepened sage for accent text on light (4.97:1) */
  --kz-blue: #88b04b;
  --kz-royal: #202a44;      /* links → navy */
  --kz-gold: #b88917;       /* gold */
  --kz-muted: #5b6070;      /* muted slate for body copy */
  --kz-line: #e0e0e0;       /* soft gray — borders / dividers */
  --kz-gradient: linear-gradient(90deg, #b88917, #88b04b, #202a44);
}

/* Feature gold on the primary CTAs (energy), with navy labels for contrast.
   Specificity (0,2,1) intentionally beats .kz-cta .wp-block-button__link. */
body.kz-alt-palette .wp-block-button__link {
  background: var(--kz-gold);
  color: var(--kz-ink);
}

body.kz-alt-palette .wp-block-button__link:hover {
  background: var(--kz-accent);
  color: var(--kz-ink);
}

body.kz-alt-palette .kz-topbar-cta {
  background: var(--kz-gold);
  color: var(--kz-ink);
}

body.kz-alt-palette .kz-topbar-cta:hover {
  background: var(--kz-paper);
  color: var(--kz-ink);
}

.kz-glass h3 {
  font-size: 1.2rem;
  text-transform: uppercase;
}

.kz-glass p {
  color: var(--kz-ink);
  font-size: 0.95rem;
}

.kz-glass-link a {
  color: var(--kz-ink);
  font-weight: 600;
}

.kz-glass-link a:hover {
  color: var(--kz-accent-ink);
}

/* Checklist-style offering lists */
.kz-list li {
  border-bottom: 1px solid var(--kz-line);
  list-style: none;
  padding: 0.85rem 0 0.85rem 1.75rem;
  position: relative;
}

.kz-list li::before {
  color: var(--kz-accent-ink);
  content: "\203A";
  font-size: 1.4rem;
  font-weight: 700;
  left: 0;
  line-height: 1;
  position: absolute;
  top: 0.8rem;
}

.kz-list {
  margin: 0;
  padding: 0;
}

/* Ink-marker variant: black chevrons instead of the coral accent */
.kz-list--ink li::before {
  color: var(--kz-ink);
}

/* Case-study cards: midnight, rounded, signature gradient strip */
.kz-cases {
  padding: 5rem 1.5rem;
}

.kz-case {
  background: var(--kz-ink);
  border-radius: var(--kz-radius-card);
  color: var(--kz-paper);
  height: 100%;
  overflow: hidden;
  padding: 2rem;
  position: relative;
}

.kz-case::before {
  border-radius: var(--kz-radius-card) var(--kz-radius-card) 0 0;
  content: "";
  display: block;
  height: 6px;
  margin: -2rem -2rem 1.75rem;
}

.kz-case--ops::before {
  background: linear-gradient(90deg, #a1e6ff, #4995ff);
}

.kz-case--data::before {
  background: linear-gradient(90deg, #ffc982, #ffae41);
}

.kz-case--dx::before {
  background: linear-gradient(90deg, #ffc271, #ff7e51);
}

.kz-case--svc::before {
  background: linear-gradient(90deg, #4995ff, #004aac);
}

.kz-case--fin::before {
  background: var(--kz-gradient);
}

.kz-case-tag {
  color: #9a9aa4;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.kz-case h3 {
  color: var(--kz-paper);
  font-size: 1.3rem;
}

.kz-case p {
  color: #c9cad4;
}

.kz-case-quote {
  border-left: 2px solid var(--kz-accent);
  font-size: 0.9rem;
  font-style: italic;
  margin-top: 1.25rem;
  padding-left: 0.85rem;
}

.kz-case .kz-case-quote {
  color: #9a9aa4;
}

/* Horizontal scroll-snap carousel (DXC-style case-study strip, no JS) */
.kz-carousel {
  display: flex;
  gap: 1.25rem;
  margin-top: 2rem;
  overflow-x: auto;
  padding-bottom: 1.25rem;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--kz-accent) var(--kz-line);
  scrollbar-width: thin;
}

.kz-carousel > .kz-case {
  flex: 0 0 min(340px, 82vw);
  height: auto;
  scroll-snap-align: start;
}

/* Insights row (Latest Posts block): white band on the canvas */
.kz-insights {
  background: var(--kz-paper);
  border-radius: var(--kz-radius-band);
  margin: 1rem;
  padding: 5rem 2rem;
}

.kz-insights-grid.wp-block-latest-posts li {
  background: var(--kz-canvas);
  border-radius: 16px;
  padding: 1.75rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.kz-insights-grid.wp-block-latest-posts li:hover {
  box-shadow: 0 16px 36px rgba(14, 16, 32, 0.12);
  transform: translateY(-3px);
}

.kz-insights-grid .wp-block-latest-posts__post-title {
  color: var(--kz-ink);
  display: block;
  font-family: "Archivo", sans-serif;
  font-size: 1.15rem;
  font-stretch: 125%;
  font-weight: 700;
  line-height: 1.25;
  margin-bottom: 0.5rem;
  text-decoration: none;
}

.kz-insights-grid .wp-block-latest-posts__post-date {
  color: var(--kz-muted);
  font-size: 0.85rem;
}

.kz-insights-grid .wp-block-latest-posts__post-excerpt {
  color: var(--kz-muted);
  font-size: 0.95rem;
}

.kz-insights > p:last-child a {
  font-weight: 600;
}

/* Credentials strip: white pills */
.kz-badges {
  padding: 3rem 1.5rem;
  text-align: center;
}

.kz-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1rem;
}

.kz-badges-row span {
  background: var(--kz-paper);
  border: 1px solid var(--kz-line);
  border-radius: 1000px;
  color: var(--kz-ink-soft);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 1.2rem;
  white-space: nowrap;
}

/* Footer */
.site-footer {
  background: var(--kz-ink);
  color: #c9cad4;
}

.site-footer a {
  color: var(--kz-paper);
}

/* ==================================================================
   Deck build-out (Website.pdf): home hero carousel, solution landing
   heroes, and CSS-only careers vacancy tabs. Components carry their own
   navy so they match the deck without changing the site palette.
   ================================================================== */

/* ---- Home hero carousel ----
   Three full-bleed photo slides that cross-fade. First slide has .is-active
   in markup so it renders before carousel.js loads; the script then drives
   rotation, arrows and dots. Distinct from the legacy .kz-carousel strip. */
.kz-carousel2 {
  color: var(--kz-paper);
  margin: 0;
  min-height: min(78vh, 680px);
  overflow: hidden;
  position: relative;
}

.kz-slide {
  align-items: center;
  display: flex;
  inset: 0;
  /* Cancel WordPress flow-layout block-gap (margin-block-start: 24px) applied to
     every slide except the first. On an inset:0 absolute element that top margin
     shrinks the slide by 24px, leaving a gap under the header on slides 2 and 3. */
  margin: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
  visibility: hidden;
}

/* Only the visible slide is interactive — otherwise the stacked inactive slides
   (slide 3 is last in the DOM, so on top) intercept clicks and every "Know more"
   button resolves to slide 3's target. Delayed visibility keeps the crossfade. */
.kz-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.8s ease, visibility 0s linear 0s;
  visibility: visible;
  z-index: 2;
}

.kz-slide-1 {
  background:
    linear-gradient(90deg, rgba(14, 16, 32, 0.78) 0%, rgba(14, 16, 32, 0.4) 45%, rgba(14, 16, 32, 0.08) 100%),
    url("assets/deck-home-data.jpg") center / cover no-repeat,
    var(--kz-ink);
  background:
    linear-gradient(90deg, rgba(14, 16, 32, 0.78) 0%, rgba(14, 16, 32, 0.4) 45%, rgba(14, 16, 32, 0.08) 100%),
    image-set(url("assets/deck-home-data.webp") type("image/webp"), url("assets/deck-home-data.jpg") type("image/jpeg")) center / cover no-repeat,
    var(--kz-ink);
}

.kz-slide-2 {
  background:
    linear-gradient(90deg, rgba(14, 16, 32, 0.78) 0%, rgba(14, 16, 32, 0.4) 45%, rgba(14, 16, 32, 0.08) 100%),
    url("assets/deck-home-ops.jpg") center / cover no-repeat,
    var(--kz-ink);
  background:
    linear-gradient(90deg, rgba(14, 16, 32, 0.78) 0%, rgba(14, 16, 32, 0.4) 45%, rgba(14, 16, 32, 0.08) 100%),
    image-set(url("assets/deck-home-ops.webp") type("image/webp"), url("assets/deck-home-ops.jpg") type("image/jpeg")) center / cover no-repeat,
    var(--kz-ink);
}

.kz-slide-3 {
  background:
    linear-gradient(90deg, rgba(14, 16, 32, 0.78) 0%, rgba(14, 16, 32, 0.4) 45%, rgba(14, 16, 32, 0.08) 100%),
    url("assets/deck-home-memphis-kde.jpg") center / cover no-repeat,
    var(--kz-ink);
  background:
    linear-gradient(90deg, rgba(14, 16, 32, 0.78) 0%, rgba(14, 16, 32, 0.4) 45%, rgba(14, 16, 32, 0.08) 100%),
    image-set(url("assets/deck-home-memphis-kde.webp") type("image/webp"), url("assets/deck-home-memphis-kde.jpg") type("image/jpeg")) center / cover no-repeat,
    var(--kz-ink);
}

.kz-slide-copy {
  max-width: 820px;
  padding: 0 clamp(1.5rem, 6vw, 5rem);
  text-align: left;
}

.kz-slide-copy h1,
.kz-slide-copy h3 {
  color: var(--kz-paper);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  overflow-wrap: normal;
  text-shadow: 0 2px 24px rgba(11, 13, 24, 0.55);
  text-transform: uppercase;
  word-break: keep-all;
}

.kz-slide-copy p {
  color: #e6e7ef;
  font-size: 1.15rem;
  max-width: 44ch;
  text-shadow: 0 1px 16px rgba(11, 13, 24, 0.6);
}

.kz-carousel2 .wp-block-button__link {
  background: var(--kz-paper);
  color: var(--kz-ink);
}

.kz-carousel2 .wp-block-button__link:hover {
  background: var(--kz-accent);
  color: var(--kz-ink);
}

.kz-slide-badge {
  bottom: clamp(1.5rem, 5vw, 3.5rem);
  filter: drop-shadow(0 2px 10px rgba(255, 255, 255, 0.5));
  position: absolute;
  right: clamp(1.5rem, 5vw, 3.5rem);
  width: clamp(150px, 20vw, 230px);
  z-index: 3;
}

.kz-carousel2-dots {
  bottom: clamp(1.5rem, 4vw, 2.75rem);
  display: flex;
  gap: 0.5rem;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  z-index: 4;
}

.kz-carousel2-dots button {
  background: rgba(255, 255, 255, 0.4);
  border: 0;
  border-radius: 1000px;
  cursor: pointer;
  height: 0.65rem;
  padding: 0;
  transition: width 0.3s ease, background 0.3s ease;
  width: 0.65rem;
}

.kz-carousel2-dots button.is-active {
  background: var(--kz-paper);
  width: 1.6rem;
}

/* ---- Solution landing heroes (Data Services / Operations / Memphis OS /
   Careers): navy copy panel beside a full-bleed image. ---- */
.kz-solhero.wp-block-columns {
  display: grid;                 /* stack the copy over a full-width image */
  grid-template-columns: 1fr;
  grid-template-rows: clamp(340px, 44vh, 560px);   /* fixed height; image covers */
  align-items: stretch;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Both children share one grid cell: image behind, copy on top. */
.kz-solhero > .kz-solhero-copy,
.kz-solhero > .kz-solhero-media {
  grid-area: 1 / 1;
}

.kz-solhero-copy {
  position: relative;
  z-index: 1;
  /* Dark scrim fading to the right so the full-width photo shows through
     while the copy stays readable. */
  background: linear-gradient(90deg, rgba(20, 26, 44, 0.92) 0%, rgba(20, 26, 44, 0.72) 42%, rgba(20, 26, 44, 0.32) 70%, rgba(20, 26, 44, 0) 100%);
  color: var(--kz-paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 6vw, 5rem);
}

.kz-solhero-copy .kz-kicker {
  color: #b9c2d8;
}

.kz-solhero-copy h1 {
  color: var(--kz-paper);
  font-size: clamp(1.9rem, 4vw, 3rem);
  margin: 0.5rem 0 1rem;
}

.kz-solhero-copy p {
  color: #d7dced;
  font-size: 1.12rem;
  max-width: 42ch;
}

/* On the navy solhero panel, a white button reads best. !important beats
   Astra's inline button palette (blue) that loads after this sheet. */
.kz-solhero-copy .wp-block-button__link {
  background: var(--kz-paper) !important;
  color: var(--kz-ink) !important;
}

.kz-solhero-copy .wp-block-button__link:hover {
  background: var(--kz-accent) !important;
  color: var(--kz-ink) !important;
}

.kz-solhero-media {
  z-index: 0;
  padding: 0;
}

.kz-solhero-media .wp-block-image,
.kz-solhero-media figure {
  height: 100%;
  margin: 0;
}

/* <picture> is inline by default, so the img's height:100% below would resolve
   against an auto-height box and the hero would stop filling its cell. */
.kz-solhero-media picture {
  display: block;
  height: 100%;
}

.kz-solhero-media img {
  display: block;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  object-position: top;
  width: 100%;
}

/* One-off: this page's hero crops better centred than from the top. */
.kz-solhero-media--center img {
  object-position: center;
}

/* One-off: show the whole photo top-to-bottom (nothing cropped) and
   stretch it to fill the full width — no letterbox left to fade out. */
.kz-solhero-media--contain img {
  object-fit: fill;
}

/* White band beneath a solution hero */
.kz-solband {
  margin: 0 auto;
  max-width: 1080px;
  padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
}

.kz-solband h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 1rem;
}

/* ---- Careers vacancy tabs — CSS-only (hidden radios + sibling selectors) ---- */
.kz-tabs input[type="radio"] {
  left: -9999px;
  position: absolute;
}

.kz-tabbar {
  border-bottom: 1px solid var(--kz-line);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.5rem, 5vw, 3rem);
  margin-bottom: 1.75rem;
}

.kz-tabbar label {
  border-bottom: 3px solid transparent;
  color: var(--kz-muted);
  cursor: pointer;
  font-weight: 600;
  margin-bottom: -1px;
  padding: 0.65rem 0;
}

.kz-tabbar label:hover {
  color: var(--kz-ink);
}

#kz-vac-ft:checked ~ .kz-tabbar label[for="kz-vac-ft"],
#kz-vac-pt:checked ~ .kz-tabbar label[for="kz-vac-pt"],
#kz-vac-amb:checked ~ .kz-tabbar label[for="kz-vac-amb"] {
  border-bottom-color: var(--kz-accent);
  color: var(--kz-ink);
}

.kz-tabpanel {
  display: none;
}

#kz-vac-ft:checked ~ .kz-tabpanel-ft,
#kz-vac-pt:checked ~ .kz-tabpanel-pt,
#kz-vac-amb:checked ~ .kz-tabpanel-amb {
  display: block;
}

.kz-tab-lead {
  font-weight: 600;
}

.kz-vacancy {
  align-items: center;
  border-top: 1px solid var(--kz-line);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.25rem 0;
}

.kz-vacancy-title {
  font-weight: 700;
}

.kz-vacancy-btn {
  background: var(--kz-ink);
  border-radius: 8px;
  color: var(--kz-paper);
  flex: none;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  text-decoration: none;
}

.kz-vacancy-btn:hover {
  background: var(--kz-accent);
  color: var(--kz-ink);
}

.kz-tab-foot {
  color: var(--kz-muted);
  margin-top: 1.5rem;
}

/* A vacancy that expands to its full description in place, instead of
   linking out — same row layout as .kz-vacancy, via <summary>. */
.kz-vacancy-detail {
  border-top: 1px solid var(--kz-line);
}

.kz-vacancy-detail summary {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  list-style: none;
  padding: 1.25rem 0;
}

.kz-vacancy-detail summary::-webkit-details-marker {
  display: none;
}

.kz-vacancy-body {
  padding-bottom: 1.5rem;
}

.kz-vacancy-body p {
  margin: 0 0 1rem;
}

.kz-vacancy-body .kz-list {
  margin-bottom: 1.25rem;
}

/* ---- Remove the gap between the header and the first section ----
   Astra gives #primary a 60px top margin and adds a default top padding to the
   first top-level block; both push our full-bleed heroes down from the header.
   Zero the top only (the bottom margin before the footer is kept). Astra prints
   this inline after our sheet, so the margin override needs !important. */
body.ast-plain-container #primary {
  margin-top: 0 !important;
}

.entry-content > .wp-block-group:first-child,
.entry-content > .wp-block-columns:first-child {
  padding-top: 0;
}

/* ---- Long-form article / case-study body ----
   Content rendered in the site's own type and palette (Inter body, Archivo
   headings, coral accent) — used for success-story write-ups. */
.kz-article {
  color: var(--kz-ink-soft);
  font-size: 1.075rem;
  line-height: 1.75;
  margin: 0 auto;
  max-width: 760px;
  padding: clamp(2.5rem, 5vw, 4rem) 1.5rem;
}

.kz-article p {
  margin: 0 0 1.25rem;
}

.kz-article strong {
  color: var(--kz-ink);
}

/* Italic standfirst / dek */
.kz-article .kz-lead {
  color: var(--kz-ink);
  font-size: 1.2rem;
  font-style: italic;
  margin-bottom: 2rem;
}

.kz-article h2 {
  color: var(--kz-ink);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin: 2.75rem 0 0.9rem;
}

.kz-article h2::before {
  background: var(--kz-accent);
  content: "";
  display: block;
  height: 3px;
  margin-bottom: 1rem;
  width: 38px;
}

/* Unified block-title size (BD request): every section/block heading renders at
   one, smaller size — ~22px on mobile up to 28px on desktop — instead of the
   four different per-block sizes that grew apart over time. Placed after the
   per-block rules above so it wins on source order at equal specificity.
   (Hero h1s and card h3s are intentionally excluded — they are not block titles.) */
.kz-cards h2,
.kz-cta h2,
.kz-solband h2,
.kz-article h2 {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
}

/* Attributed pull-quotes */
.kz-article .wp-block-quote {
  border-left: 3px solid var(--kz-accent);
  margin: 1.9rem 0;
  padding: 0.2rem 0 0.2rem 1.5rem;
}

.kz-article .wp-block-quote p {
  color: var(--kz-ink);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.5;
  margin: 0 0 0.6rem;
}

.kz-article .wp-block-quote cite {
  color: var(--kz-muted);
  font-family: "Archivo", "Inter", sans-serif;
  font-size: 0.78rem;
  font-stretch: 125%;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Unattributed narrative pull box */
.kz-article .kz-pull {
  background: var(--kz-canvas);
  border-radius: 8px;
  margin: 1.9rem 0;
  padding: 1.4rem 1.5rem;
}

.kz-article .kz-pull p {
  color: var(--kz-ink);
  font-size: 1.2rem;
  font-style: italic;
  line-height: 1.5;
  margin: 0;
}

/* ---- Success-story case study (McKinsey editorial layout) ----------------------
   Shared component for all success stories. A serif reading column on white, with
   an eyebrow, ruled dek, coral-underlined headings, attributed quotes, a canvas
   pull box, and a results stats band. Story files carry only the
   <div class="kz-case-study"> markup — the CSS lives here (no per-page <style>).
   Palette/tokens reuse the theme variables. -------------------------------------- */
.kz-case-study {
  background: #ffffff;
  color: var(--kz-ink-soft);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.125rem;
  line-height: 1.75;
  /* !important so the reading column wins over Astra's .entry-content > * content-width. */
  margin: 0 auto !important;
  max-width: 720px !important;
  padding: 8px 4px 40px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.kz-case-study * { box-sizing: border-box; }
.kz-case-study .kz-eyebrow {
  color: var(--kz-accent-ink);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin: 0 0 14px;
  text-transform: uppercase;
}
.kz-case-study .kz-title {
  color: var(--kz-ink);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.7rem, 4.4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.14;
  margin: 0 0 22px;
}
.kz-case-study .kz-dek {
  border-bottom: 1px solid var(--kz-line);
  border-top: 2px solid var(--kz-ink);
  color: var(--kz-ink);
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.6;
  margin: 0 0 34px;
  padding: 20px 0 22px;
}
.kz-case-study .kz-h2 {
  color: var(--kz-ink);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 44px 0 4px;
  padding-top: 10px;
}
.kz-case-study .kz-h2::before {
  background: var(--kz-accent);
  content: "";
  display: block;
  height: 3px;
  margin-bottom: 16px;
  width: 38px;
}
.kz-case-study p { margin: 0 0 20px; }
.kz-case-study .kz-lead { font-size: 1.06rem; }
.kz-case-study strong { color: var(--kz-ink); font-weight: 700; }
.kz-case-study .kz-quote {
  border-left: 3px solid var(--kz-accent);
  margin: 30px 0;
  padding: 6px 0 6px 26px;
}
.kz-case-study .kz-quote p {
  color: var(--kz-ink);
  font-size: 1.32rem;
  font-style: italic;
  line-height: 1.5;
  margin: 0 0 12px;
}
.kz-case-study .kz-attribution {
  color: var(--kz-muted);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kz-case-study .kz-pull {
  background: var(--kz-canvas);
  border-radius: 2px;
  margin: 30px 0;
  padding: 22px 24px;
}
.kz-case-study .kz-pull p {
  color: var(--kz-ink);
  font-size: 1.22rem;
  font-style: italic;
  line-height: 1.5;
  margin: 0;
}
.kz-case-study .kz-stats {
  border: 1px solid var(--kz-line);
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 30px 0;
  overflow: hidden;
}
.kz-case-study .kz-stat {
  border-right: 1px solid var(--kz-line);
  flex: 1;
  min-width: 180px;
  padding: 20px 22px;
}
.kz-case-study .kz-stat:last-child { border-right: 0; }
.kz-case-study .kz-stat .kz-sn {
  color: var(--kz-accent-ink);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
/* Word values in a results strip, same reasoning as .kz-stat-text in the stats
   band: at the numeral size a phrase like "Mixed OS -> Oracle Linux" out-weighs
   the figures beside it. Stepped down proportionally (the strip's base size is
   already modest), still clearly above the .kz-sl label. */
.kz-case-study .kz-stat .kz-sn.kz-sn-text {
  font-size: 1.15rem;
  line-height: 1.25;
  text-wrap: balance;
}
.kz-case-study .kz-stat .kz-sl {
  color: var(--kz-muted);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.82rem;
  line-height: 1.35;
  margin-top: 6px;
}
@media (max-width: 560px) {
  .kz-case-study .kz-stat {
    border-bottom: 1px solid var(--kz-line);
    border-right: 0;
    flex: 100%;
  }
  .kz-case-study .kz-stat:last-child { border-bottom: 0; }
}

/* ---- Services mega-menu: wide, centred, multi-column dropdown panel ----
   The Services menu item carries .kz-mega (added in provision.sh). Astra hides
   sub-menus with opacity/visibility (display stays block), so switching to a grid
   is safe. Desktop only; mobile keeps Astra's stacked accordion. ---- */
@media (min-width: 922px) {
  .main-header-menu .menu-item.kz-mega > .sub-menu {
    display: grid !important;
    /* Astra forces a large padding-left on sub-menus; both padding and columns
       need !important or the grid collapses to a single track. Fixed 3 columns
       so the nine Services items lay out as a tidy 3x3. */
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.1rem 2rem;
    left: 0;
    right: 0;
    width: auto !important;
    max-width: none;                 /* span the full header width, not a 820px panel */
    margin-inline: 0;
    padding: 1.75rem clamp(2rem, 6vw, 6rem) 2rem !important;
  }

  .main-header-menu .menu-item.kz-mega > .sub-menu > .menu-item {
    width: auto !important;
  }

  .main-header-menu .menu-item.kz-mega > .sub-menu > .menu-item > .menu-link {
    line-height: 1.3;
    white-space: normal;
  }
}

/* ------------------------------------------------------------------ *
 * Clients strip (kz-clients) — "Trusted by" logo wall.
 * Display-only: logos are NOT linked. Each logo sits on a white tile
 * so mixed-polarity assets (transparent PNG/SVG, white-bg JPEG, WebP)
 * all read cleanly on the warm canvas band. Grayscale at rest, full
 * colour on hover, for a calm, uniform wall.
 * ------------------------------------------------------------------ */
.kz-clients {
  background: var(--kz-canvas);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem);
  text-align: center;
}

.kz-clients-title {
  color: var(--kz-ink);
  font-size: clamp(1.1rem, 1.8vw, 1.35rem) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0 auto 2rem !important;
  opacity: 0.75;
}

/* Single-row marquee: the track is the viewport, the inner rail scrolls.
   The logo set is duplicated in the markup, so translating the rail by
   -50% lands exactly on the copy and the loop is seamless. */
.kz-clients-track {
  margin: 0 auto;
  max-width: 1180px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.kz-clients-marquee {
  align-items: center;
  animation: kz-clients-scroll 60s linear infinite;
  display: flex;
  gap: 18px;
  width: max-content;
}

.kz-clients-track:hover .kz-clients-marquee {
  animation-play-state: paused;
}

@keyframes kz-clients-scroll {
  from { transform: translateX(0); }
  /* Half the rail is the duplicate set, plus one gap to keep spacing even. */
  to   { transform: translateX(calc(-50% - 9px)); }
}

@media (prefers-reduced-motion: reduce) {
  .kz-clients-marquee {
    animation: none;
  }
  .kz-clients-track {
    overflow-x: auto;
  }
}

/* Exactly five tiles fill the 1180px track (four 18px gaps between them). */
.kz-client {
  align-items: center;
  background: #fff;
  border: 1px solid var(--kz-line);
  border-radius: 14px;
  display: flex;
  flex: 0 0 auto;
  height: 124px;
  justify-content: center;
  padding: 18px 24px;
  width: calc((min(1180px, 92vw) - 4 * 18px) / 5);
}

.kz-client img {
  display: block;
  filter: grayscale(100%);
  height: auto;
  max-height: 78px;
  max-width: 100%;
  opacity: 0.72;
  transition: filter 0.25s ease, opacity 0.25s ease;
  width: auto;
}

.kz-client:hover img {
  filter: grayscale(0%);
  opacity: 1;
}

/* Narrow screens: three tiles per view keeps the logos legible. */
@media (max-width: 900px) {
  .kz-client {
    height: 100px;
    padding: 14px 18px;
    width: calc((92vw - 2 * 18px) / 3);
  }
  .kz-client img {
    max-height: 60px;
  }
}

@media (max-width: 600px) {
  .kz-client {
    height: 84px;
    padding: 12px 16px;
    width: calc((92vw - 18px) / 2);
  }
  .kz-client img {
    max-height: 48px;
  }
}

/* Industry pages — "the technology behind it" categorized stack table */
.kz-stack-table {
  margin: 1.25rem auto 0;
  max-width: 860px;
}
.kz-stack-table table {
  border-collapse: collapse;
  width: 100%;
}
.kz-stack-table td {
  border: 0;
  border-bottom: 1px solid var(--kz-line);
  padding: 0.7rem 1rem;
  text-align: left;
  vertical-align: top;
}
.kz-stack-table tr:last-child td {
  border-bottom: 0;
}
.kz-stack-table td:first-child {
  color: var(--kz-ink);
  font-weight: 700;
  white-space: nowrap;
  width: 34%;
}
.kz-stack-table td:last-child {
  color: var(--kz-muted);
}
@media (max-width: 600px) {
  .kz-stack-table td:first-child { white-space: normal; }
}

/* Industries hub — McKinsey-style clean index (chevron links, no boxes) */
.kz-index {
  border-top: 1px solid var(--kz-line);
  padding-top: 1.75rem;
}
.kz-index-label {
  color: var(--kz-muted);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin: 0 0 1.5rem;
  text-transform: uppercase;
}
.kz-index-list {
  columns: 2;
  column-gap: 3.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.kz-index-list li {
  break-inside: avoid;
  margin-bottom: 1.6rem;
}
.kz-index-list a {
  color: var(--kz-royal);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none !important;
}
.kz-index-list a::before {
  color: var(--kz-accent-ink);
  content: "\203A";
  font-weight: 700;
  margin-right: 0.55rem;
}
.kz-index-list a:hover {
  color: var(--kz-accent-ink);
}
.kz-index-desc {
  color: var(--kz-muted);
  display: block;
  font-size: 0.92rem;
  line-height: 1.4;
  margin: 0.3rem 0 0 1.2rem;
  max-width: 46ch;
}
.kz-index-soon {
  color: var(--kz-muted);
  opacity: 0.55;
}
@media (max-width: 680px) { .kz-index-list { columns: 1; } }

/* KC Infotec brand mark: logo and strapline on one left-aligned row. */
.kz-brandline {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: flex-start;
  text-align: left;
}

.kz-brandline figure.wp-block-image {
  margin: 0;
}

.kz-brandline p {
  margin: 0;
  text-align: left;
}

/* ------------------------------------------------------------------ *
 * Testimonial rotator (kz-testimonials) — customer quotes lifted from
 * the success stories, one at a time, arrows plus a 5s auto-advance.
 * Slides share one grid cell so the card height never jumps between
 * a short quote and a long one. Without JS, slide 1 stays visible.
 * ------------------------------------------------------------------ */
.kz-testimonials {
  display: flex;
  flex-direction: column;
}

.kz-quote-stage {
  display: grid;
  flex: 1 1 auto;
  margin: 0.35rem 0 0.75rem;
}

.kz-quote-slide {
  border: 0;
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  padding: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  visibility: hidden;
}

.kz-quote-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}

.kz-quote-slide p {
  color: var(--kz-ink);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 0.75rem;
}

.kz-quote-slide .kz-attribution {
  color: var(--kz-ink);
  font-size: 0.85rem;
  font-style: normal;
  opacity: 0.7;
}

/* Newsfeed variant of the rotator: each slide carries its own heading, so the
   card has no fixed h3 above the stage the way the testimonial card does. */
.kz-newsfeed .kz-quote-slide h3 {
  font-size: 1.3rem;
  margin: 0 0 0.5rem;
}

.kz-newsfeed .kz-quote-slide p {
  margin-bottom: 0;
}

.kz-quote-nav {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.kz-quote-nav button {
  background: transparent;
  border: 1px solid var(--kz-line);
  border-radius: 1000px;
  color: var(--kz-ink);
  cursor: pointer;
  font-size: 1.15rem;
  height: 34px;
  line-height: 1;
  padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
  width: 34px;
}

.kz-quote-nav button:hover,
.kz-quote-nav button:focus-visible {
  background: var(--kz-accent);
  border-color: var(--kz-accent);
  color: #fff;
}

.kz-quote-count {
  color: var(--kz-ink);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  opacity: 0.6;
}

/* Visually hidden, still read by screen readers and parsers. Used for the
   photo-hero H1 on the homepage, where the headline lives in the artwork. */
.kz-sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ------------------------------------------------------------------ *
 * FAQ blocks (kz-faq) — native <details> so answers are in the DOM for
 * crawlers and readable without JavaScript. The theme reads these pairs
 * back out as FAQPage JSON-LD.
 * ------------------------------------------------------------------ */
.kz-faq {
  background: var(--kz-canvas);
  padding: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem);
}

.kz-faq-title {
  margin: 0 auto 1.5rem !important;
  max-width: 860px;
}

.kz-faq-list {
  margin: 0 auto;
  max-width: 860px;
}

.kz-faq-item {
  border-bottom: 1px solid var(--kz-line);
  padding: 0.25rem 0;
}

.kz-faq-item summary {
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 600;
  list-style: none;
  padding: 1rem 2rem 1rem 0;
  position: relative;
}

.kz-faq-item summary::-webkit-details-marker {
  display: none;
}

.kz-faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  position: absolute;
  right: 0;
  top: 1rem;
  transition: transform 0.2s ease;
}

.kz-faq-item[open] summary::after {
  content: "–";
}

.kz-faq-item summary:hover,
.kz-faq-item[open] summary {
  color: var(--kz-accent);
}

.kz-faq-a {
  padding: 0 2rem 1.1rem 0;
}

.kz-faq-a p {
  margin: 0;
  opacity: 0.85;
}

/* Breadcrumb trail — mirrors the BreadcrumbList schema the theme emits. */
.kz-crumbs {
  background: var(--kz-paper);
  color: var(--kz-ink-soft);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  padding: 0.9rem 0;
}

/* Flush left against the page, not centred inside a content column: the trail
   starts where the headline below it starts. Each hero family sets its own
   gutter below, since the two indent differently. */
.kz-crumbs-inner {
  margin: 0;
  max-width: none;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  text-align: left;
}

/* Matches .kz-page-hero's fixed 2.5rem padding. */
.kz-hero-ink .kz-crumbs-inner {
  padding-left: 2.5rem;
}

/* Matches .kz-solhero-copy's clamp(2.5rem, 6vw, 5rem). */
.kz-hero-sol .kz-crumbs-inner {
  padding-left: clamp(2.5rem, 6vw, 5rem);
}

/* Above a dark hero the band takes the hero's ground, so the two read as one
   block instead of a white stripe wedged between the header and the art. */
.kz-hero-dark .kz-crumbs {
  background: var(--kz-ink);
  color: #b9c2d8;
}

.kz-crumbs a {
  color: inherit;
  text-decoration: none;
}

.kz-crumbs a:hover {
  color: var(--kz-accent-ink);
  text-decoration: underline;
}

.kz-hero-dark .kz-crumbs a:hover {
  color: var(--kz-accent);
}

.kz-crumbs [aria-current="page"] {
  color: var(--kz-ink);
}

.kz-hero-dark .kz-crumbs [aria-current="page"] {
  color: var(--kz-paper);
}

.kz-crumbs-sep {
  opacity: 0.5;
  padding: 0 0.5rem;
}

/* Related-pages strip — cross-links between a capability and the sectors it
   is proven in (and back). Plain nav so crawlers follow it without JS. */
.kz-related {
  background: var(--kz-canvas);
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem);
}

.kz-related-title {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem) !important;
  margin: 0 auto 1rem !important;
  max-width: 1180px;
  opacity: 0.75;
}

.kz-related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0 auto;
  max-width: 1180px;
  padding: 0;
}

.kz-related-list li {
  margin: 0;
}

.kz-related-list a {
  background: #fff;
  border: 1px solid var(--kz-line);
  border-radius: 1000px;
  color: var(--kz-ink);
  display: inline-block;
  font-size: 0.92rem;
  padding: 0.55rem 1.1rem;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.kz-related-list a:hover,
.kz-related-list a:focus-visible {
  background: var(--kz-accent);
  border-color: var(--kz-accent);
  color: #fff;
}