/* KAI 5.21 content compositions. */

body.kai-ui-v5210 .wp-block-post-excerpt__more-link,
body.kai-ui-v5210 .wp-block-read-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 8px 0 22px;
  padding: 9px 15px;
  border: 1px solid rgba(178,14,47,.20);
  border-radius: 13px;
  color: var(--kai-v-primary-deep) !important;
  background: var(--kai-v-surface-2);
  font-weight: 800;
  text-decoration: none;
}

body.kai-ui-v5210 .wp-block-post-excerpt__more-link:hover,
body.kai-ui-v5210 .wp-block-read-more:hover {
  border-color: rgba(178,14,47,.38);
  background: #fbe6eb;
}

body.kai-about-page .kai-about-photo {
  overflow: hidden;
  margin: 0 !important;
  border-radius: 30px;
  box-shadow: var(--kai-v-shadow-3);
}

body.kai-about-page .kai-about-photo img {
  width: 100%;
  min-height: 440px;
  object-fit: cover;
}

body.kai-about-page .kai-story-quote {
  margin-block: 28px;
  padding: 22px 24px;
  border: 0;
  border-inline-start: 4px solid var(--kai-v-primary);
  border-radius: 20px;
  color: var(--kai-v-ink);
  background: linear-gradient(145deg,#fff,#fff4f7);
  box-shadow: var(--kai-v-shadow-1);
}

body.kai-about-page .kai-story-quote p {
  margin: 0;
  color: inherit !important;
  font-size: 1.12rem;
  font-weight: 700;
}

body.kai-about-page .kai-about-gallery .kai-proof-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 16px;
}

body.kai-about-page .kai-about-gallery .kai-proof-grid figure {
  min-height: 250px;
  margin: 0 !important;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: var(--kai-v-shadow-2);
}

body.kai-about-page .kai-about-gallery .kai-proof-grid figure:first-child {
  grid-row: span 2;
  min-height: 520px;
}

body.kai-about-page .kai-about-gallery .kai-proof-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.kai-ui-v5210 .kai-lead-section .kai-lead-form,
body.kai-ui-v5210 .kai-dark-section .kai-lead-form {
  margin-top: 30px;
  padding: clamp(22px,3vw,34px);
  color: var(--kai-v-ink) !important;
  background: rgba(255,255,255,.98) !important;
}

body.kai-ui-v5210 :where(.kai-lead-section,.kai-dark-section) .kai-lead-form :where(h2,h3,h4,p,label,small,legend,.kai-field-description) {
  color: var(--kai-v-ink) !important;
}

body.kai-ui-v5210 :where(.kai-lead-section,.kai-dark-section) .kai-lead-form a {
  color: var(--kai-v-primary-deep) !important;
}

body.kai-ui-v5210 .kai-consent-banner {
  padding: 13px 16px !important;
}

body.kai-ui-v5210 .kai-consent-summary {
  gap: 12px;
}

body.kai-ui-v5210 .kai-consent-copy h2 {
  margin: 0 0 2px;
  font-size: 15px !important;
}

body.kai-ui-v5210 .kai-consent-copy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

body.kai-ui-v5210 .kai-consent-actions {
  gap: 8px;
}

body.kai-ui-v5210 .kai-consent-actions button {
  min-height: 40px !important;
  padding: 7px 13px !important;
  border-radius: 12px !important;
  font-size: 13px !important;
}

body.kai-ui-v5210 .kai-consent-actions button[data-consent-accept-all] {
  box-shadow: 0 3px 0 #65061c,0 10px 20px rgba(122,10,34,.16) !important;
}

/*
 * 5.21.1 acceptance hardening.
 * Solid background fallbacks keep text readable when images or gradients fail
 * and allow deterministic WCAG measurement without removing the visual layer.
 */
body.kai-ui-v5210 .kai-skip-link {
  color: #fff !important;
}

body.kai-ui-v5210 .kai-utility-bar .kai-license-verification__record > a {
  color: #fff !important;
}

body.kai-ui-v5210 :where(
  .wp-block-button__link,
  .wp-element-button,
  button[type="submit"],
  input[type="submit"]
) {
  background-color: var(--kai-v-primary-deep) !important;
}

body.kai-front-page .kai-home-path-card {
  background-color: #190810 !important;
}

body.kai-ui-v5210 :where(.kai-dark-section,.kai-lead-section) {
  background-color: #780a22 !important;
}

body.kai-ui-v5210 .kai-floating-contact {
  color: #fff !important;
  background-color: #0b7a51 !important;
}

/*
 * 5.21.12 frontend coherence.
 * These final-layer contracts beat legacy high-specificity fallbacks that can
 * survive briefly in a full-page cache after a theme replacement.
 */
html body.kai-ui-v5210.kai-front-page .kai-home-hero .wp-block-button.is-style-outline .wp-block-button__link {
  color: #fff !important;
  border-color: rgba(255,255,255,.34) !important;
  background-color: rgba(255,255,255,.10) !important;
  background-image: none !important;
}

html body.kai-ui-v5210.kai-about-page .kai-page-hero + .kai-about-story {
  min-height: 0 !important;
  overflow: visible !important;
}

html body.kai-ui-v5210.kai-about-page .kai-page-hero + .kai-about-story::before {
  content: none !important;
}

html body.kai-ui-v5210.kai-about-page .kai-about-story > .alignwide {
  width: min(calc(100% - 40px), var(--kai-max,1240px)) !important;
  max-width: var(--kai-max,1240px) !important;
  margin-inline: auto !important;
}

html body.kai-ui-v5210.kai-about-page .kai-about-story .wp-block-column {
  min-width: 0 !important;
}

/*
 * 5.21.13 About story layout contract.
 * Gutenberg's inline flex-basis values and older About composition rules can
 * collapse the story copy column. Own the two-column composition explicitly
 * here, while keeping the original block markup and content untouched.
 */
html body.kai-ui-v5210.kai-about-page .kai-about-story > .wp-block-columns {
  display: grid !important;
  grid-template-columns: minmax(0,1.1fr) minmax(320px,.9fr) !important;
  align-items: center !important;
  gap: clamp(34px,5vw,72px) !important;
  direction: rtl !important;
}

html body.kai-ui-v5210.kai-about-page .kai-about-story > .wp-block-columns > .wp-block-column {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  min-width: 0 !important;
}

html body.kai-ui-v5210.kai-about-page .kai-about-story .kai-eyebrow {
  width: auto !important;
  max-width: 100% !important;
  white-space: normal !important;
}

/*
 * About field-gallery containment.
 * The Production visual audit exposed a desktop-only flex/min-content cycle:
 * the 34/66 Gutenberg columns collapsed the copy to ~46px while the image grid
 * expanded the section past 5600px. The explicit grid and definite media rows
 * keep both columns bounded without changing the block content or mobile order.
 */
html body.kai-ui-v5210.kai-about-page .kai-about-gallery > .wp-block-columns.alignwide,
html body.kai-ui-v5210.kai-about-page .kai-about-gallery > .alignwide {
  width: min(calc(100% - 40px), var(--kai-max,1240px)) !important;
  max-width: var(--kai-max,1240px) !important;
  margin-inline: auto !important;
}

html body.kai-ui-v5210.kai-about-page .kai-about-gallery > .wp-block-columns.alignwide,
html body.kai-ui-v5210.kai-about-page .kai-about-gallery > .alignwide > .wp-block-columns {
  display: grid !important;
  grid-template-columns: minmax(300px,.68fr) minmax(0,1.32fr) !important;
  align-items: center !important;
  gap: clamp(30px,4vw,56px) !important;
  direction: rtl !important;
}

html body.kai-ui-v5210.kai-about-page .kai-about-gallery > .wp-block-columns.alignwide > .wp-block-column,
html body.kai-ui-v5210.kai-about-page .kai-about-gallery > .alignwide > .wp-block-columns > .wp-block-column {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  flex-basis: auto !important;
}

html body.kai-ui-v5210.kai-about-page .kai-about-gallery > .wp-block-columns.alignwide > .wp-block-column:first-child,
html body.kai-ui-v5210.kai-about-page .kai-about-gallery > .alignwide > .wp-block-columns > .wp-block-column:first-child {
  min-width: 300px !important;
}

html body.kai-ui-v5210.kai-about-page .kai-about-gallery > .wp-block-columns.alignwide > .wp-block-column:last-child,
html body.kai-ui-v5210.kai-about-page .kai-about-gallery > .alignwide > .wp-block-columns > .wp-block-column:last-child {
  min-width: 0 !important;
}

html body.kai-ui-v5210.kai-about-page .kai-about-gallery .kai-eyebrow {
  width: auto !important;
  max-width: 100% !important;
  white-space: normal !important;
}

html body.kai-ui-v5210.kai-about-page .kai-about-gallery .kai-proof-grid {
  display: grid !important;
  grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr) !important;
  grid-template-rows: repeat(2,minmax(0,250px)) !important;
  align-items: stretch !important;
  gap: 16px !important;
  min-width: 0 !important;
}

html body.kai-ui-v5210.kai-about-page .kai-about-gallery .kai-proof-grid figure {
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  align-self: stretch !important;
}

html body.kai-ui-v5210.kai-about-page .kai-about-gallery .kai-proof-grid figure:first-child {
  grid-row: 1 / span 2 !important;
  min-height: 0 !important;
}

html body.kai-ui-v5210.kai-about-page .kai-about-gallery .kai-proof-grid img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
}

@media(min-width:901px) {
  html body.kai-ui-v5210.kai-about-page .kai-page-hero {
    display: grid !important;
    direction: ltr !important;
    grid-template-columns: minmax(280px,.76fr) minmax(0,1.24fr) !important;
    grid-template-rows: auto !important;
    align-items: center !important;
  }

  html body.kai-ui-v5210.kai-about-page .kai-page-hero::before {
    content: "" !important;
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    grid-column: 1 !important;
    grid-row: 1 / span 12 !important;
    align-self: center !important;
    width: 100% !important;
    height: clamp(280px,24vw,330px) !important;
    min-height: 0 !important;
    max-height: none !important;
    border-radius: var(--kai-v-radius-xl,34px) !important;
    background-color: var(--kai-v-surface-2,#fff7f9) !important;
    background-image: var(--kai-page-visual) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    transform: none !important;
  }

  html body.kai-ui-v5210.kai-about-page .kai-page-hero::after {
    content: none !important;
  }

  html body.kai-ui-v5210.kai-about-page .kai-page-hero > * {
    position: relative !important;
    z-index: 2 !important;
    direction: rtl !important;
    grid-column: 2 !important;
    width: 100% !important;
    max-width: 760px !important;
    margin-inline: 0 !important;
  }
}

/* Scroll enhancement must never make unreached or partially initialized content unreadable. */
html.kai-v5210-js body:not(.kai-motion-off) .kai-scene {
  opacity: .92;
  transform: translate3d(0,18px,0);
}

html.kai-v5210-js body:not(.kai-motion-off) .kai-scene.is-active {
  opacity: 1;
  transform: none;
}

html[data-kai-theme="dark"] body.kai-ui-v5210 .wp-block-post-excerpt__more-link,
html[data-kai-theme="dark"] body.kai-ui-v5210 .wp-block-read-more {
  color: #ffb4c2 !important;
  border-color: var(--kai-v-dark-border);
  background: var(--kai-v-dark-surface-2);
}

html[data-kai-theme="dark"] body.kai-about-page .kai-story-quote {
  color: var(--kai-v-dark-ink);
  border-color: #ff718c;
  background: linear-gradient(145deg,var(--kai-v-dark-surface-2),var(--kai-v-dark-surface));
}

html[data-kai-theme="dark"] body.kai-ui-v5210 :where(.kai-lead-section,.kai-dark-section) .kai-lead-form {
  color: var(--kai-v-dark-ink) !important;
  border-color: var(--kai-v-dark-border) !important;
  background: var(--kai-v-dark-surface) !important;
}

html[data-kai-theme="dark"] body.kai-ui-v5210 :where(.kai-lead-section,.kai-dark-section) .kai-lead-form :where(h2,h3,h4,p,label,small,legend,.kai-field-description) {
  color: var(--kai-v-dark-ink) !important;
}

html[data-kai-theme="dark"] body.kai-ui-v5210 :where(.kai-lead-section,.kai-dark-section) .kai-lead-form a {
  color: #ff9db0 !important;
}

/*
 * 5.21.9 homepage hero dark-copy contract.
 * The global dark heading token must not replace the exact white copy
 * required over the full-bleed video.
 */
html[data-kai-theme="dark"] body.kai-ui-v5210.kai-front-page .kai-home-hero :where(h1,p,li) {
  color: #fff !important;
}

@media(max-width:900px) {
  html body.kai-ui-v5210.kai-about-page .kai-page-hero {
    display: flex !important;
    direction: rtl !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  html body.kai-ui-v5210.kai-about-page .kai-page-hero::before {
    content: "" !important;
    position: relative !important;
    inset: auto !important;
    order: 2 !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: clamp(240px,66vw,290px) !important;
    min-height: 0 !important;
    margin-top: 28px !important;
    border-radius: 24px !important;
    background-color: var(--kai-v-surface-2,#fff7f9) !important;
    background-image: var(--kai-page-visual) !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    transform: none !important;
  }

  html body.kai-ui-v5210.kai-about-page .kai-page-hero::after {
    content: none !important;
  }

  html body.kai-ui-v5210.kai-about-page .kai-page-hero > * {
    order: 1 !important;
    width: 100% !important;
    max-width: 780px !important;
    margin-inline: auto !important;
    direction: rtl !important;
  }

  html body.kai-ui-v5210.kai-about-page .kai-about-story > .wp-block-columns,
  html body.kai-ui-v5210.kai-about-page .kai-about-gallery > .wp-block-columns.alignwide,
  html body.kai-ui-v5210.kai-about-page .kai-about-gallery > .alignwide > .wp-block-columns {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 30px !important;
  }

  body.kai-about-page .kai-about-photo img { min-height: 340px; }
  body.kai-about-page .kai-about-gallery .kai-proof-grid figure:first-child { min-height: 390px; }
}

@media(max-width:680px) {
  body.kai-about-page .kai-about-photo img { min-height: 280px; }
  html body.kai-ui-v5210.kai-about-page .kai-about-gallery .kai-proof-grid {
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: none !important;
  }
  html body.kai-ui-v5210.kai-about-page .kai-about-gallery .kai-proof-grid figure,
  html body.kai-ui-v5210.kai-about-page .kai-about-gallery .kai-proof-grid figure:first-child {
    grid-row: auto !important;
    height: 260px !important;
    min-height: 260px !important;
  }
  body.kai-ui-v5210 .kai-consent-banner { padding: 12px !important; }
  body.kai-ui-v5210 .kai-consent-actions { display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; }
  body.kai-ui-v5210 .kai-consent-actions button { padding-inline: 6px !important; }
}