/* ==========================================================================
   mon'k Fabric explorer — homepage section (home.html#monk-fabric)

   Lifted from the KAI landing page (preview/kai-landing/style.css) so the
   homepage shows the same live, clickable Fabric explorer instead of the old
   flat diagram image. Everything is namespaced `kai-` / `kai-fab-`, so it
   cannot reach the homepage's own `homepage-` rules. The landing page's
   preview-only header styles and its html/body overscroll rule are removed;
   the other KAI-landing sections' rules remain but match nothing here.
   Keep in step with kai-landing/style.css if the explorer changes there.
   ========================================================================== */

/* ==========================================================================
   KAI landing page — generated from Figma "Kai Landing page" (node 94:572)

   Mobile-first. Everything is namespaced `kai-` (page) and `kai-fab-`
   (the mon'k Fabric explorer, ported from the monk-fabric prototype and
   keeping its own navy/terracotta palette by design).

   Two resets below are written at specificity (0,1,0) on purpose — see the
   comments. The element-qualified form (`.kai-page p, .kai-page h1, …`) is
   (0,1,1) and silently outranks every single-class component rule.
   ========================================================================== */

:root {
  /* page palette ---------------------------------------------------------- */
  --kai-dark:          #02021b;
  --kai-footer:        #03041b;
  --kai-amber:         #ffc600;
  --kai-btn:           #fed719;
  --kai-eyebrow:       #f5b90a;
  --kai-link-gold:     #e4ad45;
  --kai-link-amber:    #d09636;
  --kai-link-orange:   #f6a026;
  --kai-rule-orange:   #ff8601;
  --kai-heading:       #4a4a4a;
  --kai-body:          #414141;
  --kai-body-alt:      #1b1b1b;
  --kai-usecase-bg:    #fbf8f3;
  --kai-video-bg:      rgba(240, 238, 231, 0.6);
  --kai-card-border:   #eaeaea;
  --kai-card-shadow:   0 0 20px -2px rgba(0, 0, 0, 0.15);

  /* type ------------------------------------------------------------------ */
  --kai-font-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --kai-font-body:    'General Sans', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --kai-font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* layout ---------------------------------------------------------------- */
  --kai-container: 1200px;
  --kai-gutter:    16px;
  /* One knob for every section's vertical rhythm. The Figma's band
     boundaries imply 85–105px at desktop, which reads as too airy once the
     sections sit next to each other — this is roughly two-thirds of that.
     Change it here and the whole page moves together. */
  --kai-section-y: 40px;
  --kai-radius:    15px;
  --kai-header-h:  76px;

}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

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

/* (0,1,0) — same weight as the component classes, so source order lets each
   component's own margin win. The element-qualified form would outrank them
   all and flatten the page's vertical rhythm. */
.kai-page *,
.kai-zoom-content * { margin: 0; }

/* `:where()` contributes no specificity, keeping this at (0,1,0) too. */
.kai-page :where(ul, ol),
.kai-zoom-content :where(ul, ol) { padding: 0; list-style: none; }

/* No elastic overscroll. The header is position:fixed, so a touchpad bounce
   at the top drags the banner down beneath it and opens a white gap between
   the two. */


.kai-page {
  padding-top: var(--kai-header-h);
  font-family: var(--kai-font-body);
  color: var(--kai-body);
  background: #ffffff;
  overflow-x: clip;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* `:where()` keeps this at (0,1,0), like the two resets below it. As a plain
   `.kai-page img` it was (0,1,1) and silently outranked every component rule
   setting an explicit height — .kai-banner-img, .kai-forge-bg, .kai-cta-bg
   and .kai-fab-logo all lost their `height` and fell back to `auto`. The
   visible symptom was the banner rendering at its natural 1440x440 ratio
   instead of filling the band, exposing the placeholder grey beneath it. */
.kai-page :where(img) { max-width: 100%; height: auto; }

.kai-container {
  width: 100%;
  max-width: calc(var(--kai-container) + var(--kai-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--kai-gutter);
}

.kai-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.kai-page :focus-visible,
.kai-modal :focus-visible {
  outline: 2px solid var(--kai-amber);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Shared — headings, rules, meta rows, buttons, links
   -------------------------------------------------------------------------- */

.kai-heading {
  font-family: var(--kai-font-display);
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 700;
  line-height: 1.152;
  color: var(--kai-heading);
}

.kai-heading--centred { text-align: center; }
.kai-heading--light   { color: #ffffff; }

.kai-rule {
  display: block;
  width: 54px;
  height: 6px;
  margin-top: 14px;
  background: var(--kai-amber);
}

.kai-rule--centred { margin-inline: auto; }

/* meta row: circled icon + label, with a hairline beneath */
.kai-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--kai-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--kai-body);
}

.kai-meta--sm { font-size: 15px; }

/* `width: max-content` keeps this from being stretched by a column-flex
   parent, which would strand the absolutely-centred glyph off the circle. */
.kai-meta-icon {
  position: relative;
  display: inline-block;
  width: max-content;
  flex: none;
  line-height: 0;
}

.kai-meta-circle { display: block; }

.kai-meta-glyph {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

.kai-meta-divider {
  display: inline-block;
  width: 1px;
  height: 21px;
  background: var(--kai-card-border);
}

.kai-meta-rule {
  display: block;
  height: 1px;
  margin-top: 14px;
  background: var(--kai-rule-orange);
  opacity: 0.55;
}

.kai-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--kai-font-ui);
  font-size: 16px;
  font-weight: 600;
  color: #1e1b4b;
  background: var(--kai-btn);
  border-radius: 8px;
  text-decoration: none;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.kai-btn--lg {
  padding: 13px 34px;
  font-family: var(--kai-font-display);
  font-weight: 500;
  font-size: 18px;
  color: #3c3939;
  border-radius: 5px;
}

.kai-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--kai-font-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--kai-link-amber);
  text-decoration: none;
}

.kai-link--gold { color: var(--kai-link-gold); }
.kai-link img { transition: transform 0.2s ease; }

.kai-viewall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--kai-font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--kai-link-orange);
  text-decoration: none;
  white-space: nowrap;
}

.kai-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ==========================================================================
   1. FRANKFURT BANNER
   ========================================================================== */

.kai-banner {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 300px;
  padding-block: 48px;
  /* the Figma has a #d9d9d9 placeholder rect behind the photo; using the
     page's dark navy instead means any sub-pixel sliver reads as part of the
     banner rather than as a grey stripe */
  background: var(--kai-dark);
  overflow: hidden;
}

.kai-banner-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

.kai-banner-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.07);
}

.kai-banner-inner { position: relative; z-index: 2; }

.kai-banner-title {
  font-family: var(--kai-font-display);
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  line-height: 1.08;
}

.kai-banner-welcome {
  display: block;
  font-size: clamp(18px, 2.4vw, 32px);
  font-weight: 500;
  line-height: 1.5;
}

.kai-banner-line {
  display: block;
  font-size: clamp(34px, 6.2vw, 65px);
}

.kai-banner-line--accent { color: var(--kai-amber); }

.kai-banner-lead {
  margin-top: 20px;
  max-width: 542px;
  font-family: var(--kai-font-display);
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.332;
  color: #ffffff;
}

/* ==========================================================================
   2. MON'K FABRIC
   ========================================================================== */

.kai-fabric { background: #ffffff; padding-block: var(--kai-section-y); }

.kai-fabric-intro {
  max-width: 1037px;
  margin-inline: auto;
  margin-top: 28px;
  font-family: var(--kai-font-body);
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  color: var(--kai-body);
}

.kai-fabric-card {
  margin-top: 40px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: var(--kai-radius);
  box-shadow: var(--kai-card-shadow);
}

/* ==========================================================================
   2b. THE FABRIC DIAGRAM

   Rebuilt from the updated Figma, which replaced the imported prototype
   (navy/terracotta, Droid Serif, clickable deep dives) with a native
   slate-and-amber layout in Poppins and Plus Jakarta Sans. Everything is
   visible at once — there is nothing to expand any more.

   The Figma draws this at a fixed 1198px with absolute positions. Here it is
   grid and flex so it reflows: three layer bands, each collapsing to a single
   column on narrow screens.
   ========================================================================== */

:root {
  --fab-ink:        #393939;
  --fab-body:       #414141;
  --fab-slate:      #0f172a;
  --fab-muted:      #475569;
  --fab-line:       #e5eaf2;
  --fab-chip-bg:    #f8fafc;
  --fab-chip-line:  #e2e8f0;
  --fab-dot:        #cbd5e1;
  --fab-amber:      #e0a901;
  --fab-cream:      #fdfdf3;
  --fab-cream-warm: #fffdfa;
  --fab-cream-deep: #fefdf3;
  --fab-grey:       #f6f6f6;
  --fab-red:        #fb3f3f;
  --fab-badge:      #dc2626;
  --fab-peach:      #fed7aa;
  --fab-jakarta:    'Plus Jakarta Sans', 'Poppins', system-ui, sans-serif;
}

.kai-fab {
  font-family: var(--kai-font-display);
  color: var(--fab-body);
}

/* strapline ---------------------------------------------------------------- */

.kai-fab-strapline {
  padding: 16px 20px;
  font-size: clamp(17px, 2.4vw, 32px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.9px;
  text-align: center;
  color: var(--fab-ink);
  background: var(--fab-grey);
  border: 2px solid var(--fab-line);
  border-radius: 8px;
}

/* numbered steps ----------------------------------------------------------- */

.kai-fab-steps {
  display: grid;
  gap: 18px 24px;
  margin-top: 26px;
}

.kai-fab-step {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}

.kai-fab-step-num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 57px; height: 57px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.9px;
  color: #ffffff;
  background: var(--fab-amber);
  border-radius: 50%;
}

.kai-fab-step p { font-size: clamp(15px, 1.6vw, 18px); line-height: 1.39; color: var(--fab-ink); }
.kai-fab-step strong { font-weight: 700; }

/* layer bands -------------------------------------------------------------- */

.kai-fab-layer {
  margin-top: 22px;
  padding: 22px 18px 24px;
  border: 2px solid var(--fab-line);
  border-radius: 8px;
}

.kai-fab-layer--cream { background: var(--fab-cream); }
.kai-fab-layer--grey  { background: var(--fab-grey); }

.kai-fab-layer-title {
  margin-bottom: 18px;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -0.6px;
  color: var(--fab-ink);
}

/* shared card / box -------------------------------------------------------- */

.kai-fab-card,
.kai-fab-box {
  position: relative;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--fab-line);
  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.03);
}

.kai-fab-card--accent { background: var(--fab-cream-warm); border-color: var(--fab-peach); }

/* any card the script has made zoomable */
[data-kai-fab-card] {
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.kai-fab-badge {
  position: absolute;
  top: -11px; right: 12px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--fab-badge);
  border-radius: 4px;
}

.kai-fab-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--fab-amber);
}

.kai-fab-card-head img { flex: none; }

.kai-fab-card-text {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.65;
  color: var(--fab-body);
}

/* chips -------------------------------------------------------------------- */

.kai-fab-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.kai-fab-chips li {
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--fab-body);
  background: var(--fab-chip-bg);
  border: 1px solid var(--fab-chip-line);
  border-radius: 3px;
}

/* Forge partners ----------------------------------------------------------- */

.kai-fab-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--fab-chip-line);
  font-family: var(--fab-jakarta);
  font-size: 10px;
}

.kai-fab-partner { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: #022c22; }

.kai-fab-partner--boxed {
  padding: 3px 7px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--fab-slate);
  background: #f1f5f9;
  border: 1px solid var(--fab-chip-line);
  border-radius: 4px;
}

.kai-fab-partner--scalepost { font-weight: 700; letter-spacing: -0.3px; color: #1e3a8a; }
.kai-fab-partner--scalepost span { color: #ea580c; }

/* layer 2 ------------------------------------------------------------------ */

.kai-fab-orchestration { display: grid; gap: 14px; }

.kai-fab-box-title { font-size: 17px; font-weight: 700; color: var(--fab-body); }
.kai-fab-box-sub   { margin-top: 2px; font-size: 11px; font-weight: 500; line-height: 1.45; color: var(--fab-body); }

.kai-fab-gateway { text-align: center; }
.kai-fab-gateway .kai-fab-box-title,
.kai-fab-gateway .kai-fab-box-sub { text-align: center; }

.kai-fab-router {
  margin-top: 16px;
  padding: 8px 12px;
  background: #fbf5ee;
}

.kai-fab-router-title { font-size: 13px; font-weight: 700; color: var(--fab-body); }
.kai-fab-router-sub   { font-size: 12px; line-height: 1.45; color: var(--fab-body); }

.kai-fab-models { display: grid; gap: 10px; margin-top: 16px; }

.kai-fab-model {
  padding: 10px;
  background: var(--fab-chip-bg);
  border: 1px solid var(--fab-chip-line);
  border-radius: 3px;
}

.kai-fab-model-title { font-size: 10px; font-weight: 700; color: var(--fab-body); }

/* One logo per row. The column is only about 100px wide, so two chips
   side by side left each wordmark roughly 35px across — the reason they
   read as specks next to the full-width Anthropic mark. */
.kai-fab-model-logos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 10px;
}

.kai-fab-model-logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px 6px;
  background: #ffffff;
  border: 0.5px solid var(--fab-chip-line);
}

/* The files are now trimmed to their artwork, so this caps the wordmark
   itself. Before, it capped a canvas that was mostly white space — Gemini's
   mark filled 15% of its height, which at 22px left a 3px logo. Whichever
   limit a given mark meets first wins, so a wide one fills the row and a
   compact one stands 24px tall. */
.kai-fab-model-logos img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 24px;
  object-fit: contain;
}

.kai-fab-model-monk { margin-top: 10px; text-align: center; }
.kai-fab-model-monk img { display: inline-block; width: auto; height: 34px; }
.kai-fab-model-monk span {
  display: block;
  margin-top: 2px;
  font-family: var(--fab-jakarta);
  font-size: 10px;
  font-weight: 500;
  color: var(--fab-muted);
}

/* platform services -------------------------------------------------------- */

.kai-fab-services ul { display: grid; }

.kai-fab-services li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
}

.kai-fab-services li + li { border-top: 1px solid var(--fab-chip-line); }
.kai-fab-services li > img { flex: none; margin-top: 2px; }

.kai-fab-service-title { font-size: 15px; font-weight: 700; line-height: 1.2; color: var(--fab-red); }

.kai-fab-service-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-family: var(--fab-jakarta);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  color: #334155;
}

.kai-fab-dot { color: var(--fab-dot); }
.kai-fab-onetrust { font-weight: 700; color: #047857; }
.kai-fab-service-logo { display: block; width: auto; max-height: 20px; object-fit: contain; }

.kai-fab-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 7px 3px;
  font-weight: 700;
  font-size: 11px;
  border-radius: 4px;
}

.kai-fab-tag--jira { color: #2563eb; background: #eff6ff; border: 1px solid #dbeafe; }
.kai-fab-tag--sp   { color: #ffffff; background: #059669; justify-content: center; min-width: 21px; }

/* layer 1 ------------------------------------------------------------------ */

.kai-fab-infra { display: grid; gap: 16px; align-items: center; }

.kai-fab-cloud { display: block; width: 100%; max-width: 409px; margin-inline: auto; opacity: 0.8; }

.kai-fab-infra-grid { display: grid; gap: 0; padding: 0; }

.kai-fab-infra-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
}

.kai-fab-infra-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 51px;
  background: var(--fab-cream-deep);
  border: 0.5px solid var(--fab-line);
  border-radius: 7px;
}

.kai-fab-infra-title  { font-size: clamp(15px, 1.6vw, 18px); font-weight: 700; line-height: 1.25; color: var(--fab-body); }
.kai-fab-infra-detail { margin-top: 3px; font-size: 11px; line-height: 1.5; color: var(--fab-body); }

/* --------------------------------------------------------------------------
   Fabric breakpoints
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .kai-fab-apps       { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .kai-fab-models     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kai-fab-infra-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* the rules the Figma draws between the four infrastructure cells */
  .kai-fab-infra-item:nth-child(-n+2) { border-bottom: 1px solid var(--fab-chip-line); }
  .kai-fab-infra-item:nth-child(odd)  { border-right: 1px solid var(--fab-chip-line); }
}

@media (min-width: 900px) {
  .kai-fab-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 56px;
  }

  /* chevrons between the three steps, as drawn */
  .kai-fab-step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -38px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 32px;
    background: url('../images/fabric/chevron-step.svg') center / contain no-repeat;
  }
}

@media (min-width: 1024px) {
  .kai-fab-layer      { padding: 26px 28px 30px; }
  .kai-fab-apps       { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kai-fab-card       { padding: 18px 16px; }

  .kai-fab-orchestration {
    grid-template-columns: minmax(0, 492fr) minmax(0, 271fr) minmax(0, 343fr);
  }

  .kai-fab-infra { grid-template-columns: minmax(0, 409fr) minmax(0, 723fr); gap: 24px; }

  .kai-fab-strapline { padding: 20px 28px; }
  .kai-fab-steps     { margin-top: 32px; }
}

/* ==========================================================================
   3. FORGE & METER
   ========================================================================== */

.kai-forge {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--kai-section-y);
  background: var(--kai-dark);
}

.kai-forge-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
}

.kai-forge-scrim { position: absolute; inset: 0; z-index: 1; background: rgba(2, 2, 27, 0.6); }

.kai-forge-inner {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 32px;
  align-items: center;
}

.kai-forge-figure {
  padding: 12px;
  background: #ffffff;
  border-radius: var(--kai-radius);
}

.kai-forge-figure img { display: block; width: 100%; }

.kai-forge-text {
  margin-top: 24px;
  font-family: var(--kai-font-body);
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 500;
  line-height: 1.5;
  color: #ffffff;
}

/* ==========================================================================
   4. BROCHURE
   ========================================================================== */

.kai-brochure { background: #ffffff; padding-block: var(--kai-section-y); }

.kai-brochure-grid {
  display: grid;
  gap: 32px;
  margin-top: 40px;
  align-items: center;
}

.kai-brochure-figure img {
  display: block;
  width: 100%;
  border-radius: var(--kai-radius);
}

.kai-brochure-title {
  margin-top: 20px;
  font-family: var(--kai-font-body);
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 700;
  line-height: 1.32;
  color: var(--kai-body);
}

.kai-brochure-text {
  margin-top: 14px;
  font-size: 18px;
  line-height: 1.78;
  color: var(--kai-body);
}

.kai-brochure-body .kai-btn { margin-top: 26px; }

/* ==========================================================================
   5 / 7. CARD SECTIONS + CAROUSEL
   ========================================================================== */

.kai-usecases { background: var(--kai-usecase-bg); padding-block: var(--kai-section-y); }
.kai-videos   { background: var(--kai-video-bg);   padding-block: var(--kai-section-y); }
.kai-stories  { background: #ffffff;               padding-block: var(--kai-section-y); }

.kai-stories-intro {
  margin-top: 24px;
  max-width: 1198px;
  font-size: 18px;
  line-height: 1.78;
  color: var(--kai-heading);
}

.kai-carousel { margin-top: 36px; }

/* The Figma puts the arrows OUTSIDE the card row, in the container gutter and
   vertically centred on the cards, with the dots centred below. The viewport
   is the positioning context: its inline padding is the gutter the arrows sit
   in, so they never overlap a card at desktop. */
.kai-carousel-viewport { position: relative; }

/* The track is a flex row with an EXPLICIT flex-basis per card. This is the
   whole point: `grid-auto-columns: minmax(0, X%)` sets only a growth limit,
   so with a 0 minimum the cards shrink to share the container, nothing
   overflows and the arrows have nothing to scroll. A fixed basis cannot
   collapse that way. */
.kai-carousel-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.kai-carousel-track::-webkit-scrollbar { display: none; }

.kai-carousel-track > .kai-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

/* Trailing run-off, sized by script.js, so a last page that is one card short
   stays short rather than starting on a card the page before already showed.
   Never a snap target — it is empty. */
.kai-carousel-spacer {
  flex: 0 0 auto;
  scroll-snap-align: none;
  pointer-events: none;
}

.kai-card > article {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border-radius: var(--kai-radius);
  box-shadow: var(--kai-card-shadow);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* A use-case card opens its full use-case sheet, so the whole card is the
   target rather than just the photograph. It cannot be a <button> — it holds
   a heading — so it carries role="button" and script.js supplies the keys.
   The lift on hover is already on .kai-card > article. */
.kai-card > article[data-kai-zoom] { cursor: pointer; }

.kai-card > article[data-kai-zoom]:focus-visible {
  outline: 3px solid var(--kai-link-amber);
  outline-offset: 3px;
}

.kai-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 352 / 195;
  object-fit: cover;
}


.kai-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 28px 28px;
}

.kai-card-title {
  margin-top: 20px;
  font-family: var(--kai-font-body);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--kai-body);
}

.kai-card-title--lg { font-size: clamp(18px, 2vw, 20px); line-height: 1.5; }

.kai-card-text {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--kai-heading);
}

.kai-card-body .kai-link { margin-top: auto; padding-top: 22px; }

/* video thumb ------------------------------------------------------------- */

/* The original thumbnails carry the play button and the duration badge as
   part of the artwork, so the base class adds neither — a CSS overlay on top
   produced a visible second copy of both. Plain stills opt in to a drawn
   play button with .kai-video-thumb--play (below). The whole thumbnail is the
   button, so the entire image is the click target. */
.kai-video-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.kai-video-thumb .kai-card-img { transition: transform 0.3s ease; }

/* Newer thumbnails are plain stills with no play button baked in. The
   modifier draws one matching the older artwork — amber disc, navy triangle,
   about 18% of the thumb's width — so both kinds sit side by side cleanly.
   Only add it to a card whose image lacks the button, or it will show twice. */
.kai-video-thumb--play::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  z-index: 1;
  width: 18%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--kai-amber)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 5.5v13l10-6.5z' fill='%2302021b'/%3E%3C/svg%3E")
    center / 55% no-repeat;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* carousel controls ------------------------------------------------------- */

/* Both are rendered in the markup but stay hidden until JS takes over, so
   nothing inert is presented to someone with JavaScript disabled. */
.kai-carousel-controls,
.kai-carousel-btn { display: none; }

.js-enabled .kai-carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 26px;
}

.js-enabled .kai-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  padding: 0;
  background: #ffffff;
  border: 1px solid var(--kai-card-border);
  border-radius: 24px;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

/* Below the desktop breakpoint there is no gutter to sit in, so they overlay
   the very edge of the track rather than pushing the cards narrower. */
.kai-carousel-btn--prev { left: 0; }
.kai-carousel-btn--next { right: 0; }

.kai-carousel-btn--next img { transform: rotate(180deg); }
.kai-carousel-btn:disabled { opacity: 0.35; cursor: default; }

/* set by the script when every card already fits — no arrows, no dots */
.kai-carousel--static .kai-carousel-controls,
.kai-carousel--static .kai-carousel-btn { display: none; }

.kai-carousel-dots { display: flex; align-items: center; gap: 8px; }

.kai-carousel-dot {
  width: 8px; height: 8px;
  padding: 0;
  background: #d8d3c9;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.2s ease, width 0.2s ease;
}

.kai-carousel-dot[aria-current='true'] {
  width: 24px;
  border-radius: 4px;
  background: var(--kai-amber);
}

/* Success stories are no longer two cards side by side. The updated Figma
   stacks them as full-width rows — image left, copy right, no card chrome or
   shadow — which gives the long titles somewhere to breathe. */
.kai-stories { display: grid; gap: 30px; margin-top: 36px; }

.kai-story { display: grid; gap: 34px; align-items: center; }

.kai-story-figure { margin: 0; }

.kai-story-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 492 / 338;
  object-fit: cover;
  border-radius: var(--kai-radius);
}

.kai-story-title {
  margin-top: 20px;
  font-family: var(--kai-font-body);
  font-size: clamp(19px, 2.2vw, 22px);
  font-weight: 700;
  line-height: 1.36;
  color: var(--kai-heading);
}

.kai-story-text {
  margin-top: 16px;
  font-size: 18px;
  line-height: 1.56;
  color: var(--kai-heading);
}

.kai-story-body .kai-link { margin-top: 22px; }

/* ==========================================================================
   8. CTA
   ========================================================================== */

.kai-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* the closing section earns a little more room than the rest */
  padding-block: calc(var(--kai-section-y) * 1.3);
  background: #ffffff;
  text-align: center;
}

.kai-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: cover;
  opacity: 0.12;
}

.kai-cta-inner { position: relative; z-index: 1; }

.kai-cta-eyebrow {
  font-family: var(--kai-font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--kai-eyebrow);
}

.kai-cta-title {
  margin-top: 14px;
  font-family: var(--kai-font-display);
  font-size: clamp(25px, 3.6vw, 35px);
  font-weight: 700;
  line-height: 1.43;
  color: var(--kai-heading);
}

.kai-cta-text {
  margin-top: 12px;
  margin-inline: auto;
  max-width: 586px;
  font-family: var(--kai-font-display);
  font-size: 16px;
  line-height: 1.55;
  color: var(--kai-body-alt);
}

.kai-cta .kai-btn { margin-top: 26px; }

/* ==========================================================================
   IMAGE LIGHTBOX
   ========================================================================== */

/* the trigger — a real button so it is keyboard reachable and announced */
.kai-zoomable {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.kai-zoomable img { display: block; width: 100%; transition: transform 0.25s ease; }

.kai-zoom {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.kai-zoom[hidden] { display: none; }

.kai-zoom-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 2, 27, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Shrink-wraps the image, so the close button can be anchored to the image's
   own corner rather than the viewport's — on a wide screen a viewport-pinned
   button ends up floating far from the picture it closes. */
/* Shrink-wraps the image, so the close button can be anchored to the image's
   own corner rather than the viewport's — on a wide screen a viewport-pinned
   button ends up floating far from the picture it closes. */
.kai-zoom-panel {
  position: relative;
  z-index: 1;
  display: inline-block;
  max-width: 92vw;
  line-height: 0;
}

.kai-zoom-img {
  display: block;
  max-width: 100%;
  /* svh follows vh so iOS Safari measures the visible viewport, not the one
     hidden behind its toolbars. Leaves room above for the close button. */
  max-height: 80vh;
  max-height: 80svh;
  width: auto;
  height: auto;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

/* Sits OUTSIDE the image, on the backdrop — never over the artwork. Narrow
   screens put it directly above the top-right corner, because there is no
   room beside a picture already using 92vw. */
/* Content mode: the Fabric layers are live markup, not images, so the
   lightbox shows a clone of the band rather than a raster. It keeps its
   desktop layout inside the panel and scrolls if the viewport is narrower
   than the diagram needs. */
.kai-zoom-content {
  max-width: 94vw;
  max-height: 82vh;
  max-height: 82svh;
  /* script.js sizes the clone to fit, so this is only a safety net for a
     viewport too short for the card even unenlarged. The bars themselves are
     hidden — wheel, touch and keyboard still scroll — because a panel that
     already fits should not be framed by empty scroll tracks. */
  overflow: auto;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* legacy Edge */
  padding: 22px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  line-height: normal;
  text-align: left;
}

/* `hidden` only works here if an author rule says so. The browser's own
   [hidden] { display: none } is a user-agent rule, and .kai-zoom-img's
   `display: block` above is an author rule — author beats UA whatever the
   specificity, so without this the image stays laid out while hidden, and a
   src-less <img> paints its alt text across the top of a card popup. */
.kai-zoom-img[hidden]     { display: none; }
.kai-zoom-content[hidden] { display: none; }
.kai-zoom-content::-webkit-scrollbar { display: none; }   /* Chrome, Edge, Safari */

/* The clone is given the source card's exact pixel width by the script, so
   the enlarged view has the same proportions and line breaks as the card on
   the page — only bigger. `zoom` scales the whole subtree including the px
   paddings and borders, which `font-size` alone cannot do. Unsupported
   browsers simply show it at natural size: still correct, just not enlarged.
   1.5 is the ceiling; script.js lowers it inline when the viewport is too
   small to hold the card at that size. */
.kai-zoom-content > * { zoom: 1.5; }

/* hug the card rather than stretching to the image-mode width */
.kai-zoom--content .kai-zoom-panel {
  width: auto;
  max-width: 94vw;
  background: transparent;
  box-shadow: none;
}

/* the clone keeps its own band colour, so drop the outer chrome */
.kai-zoom-content .kai-fab-layer {
  margin-top: 0;
  border: 0;
}

.kai-zoom-close {
  position: absolute;
  top: -50px; right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.2s ease;
}

.kai-zoom-close:hover { background: rgba(255, 255, 255, 0.3); }

@media (min-width: 768px) {
  /* room to the side, so it moves beside the top-right corner. The panel
     gives back the width the button needs, keeping both on screen. */
  .kai-zoom-panel { max-width: calc(92vw - 64px); }
  .kai-zoom-img   { max-height: 88vh; max-height: 88svh; }
  .kai-zoom-close { top: 0; right: -56px; }
}

/* ==========================================================================
   VIDEO MODAL
   ========================================================================== */

.kai-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.kai-modal[hidden] { display: none; }

.kai-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 2, 27, 0.72);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.kai-modal-panel {
  position: relative;
  width: 100%;
  max-width: 960px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
}

.kai-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.kai-modal-title {
  font-family: var(--kai-font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--kai-body);
}

.kai-modal-close {
  flex: none;
  width: 36px; height: 36px;
  padding: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--kai-body);
  background: #f2f2f2;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.kai-modal-frame { aspect-ratio: 16 / 9; background: #000000; }
.kai-modal-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ==========================================================================
   HOVER POLISH — pointer devices only
   ========================================================================== */

@media (hover: hover) {
  .kai-btn:hover                       { filter: brightness(0.95); transform: translateY(-1px); }
  .kai-card > article:hover            { transform: translateY(-4px); box-shadow: 0 10px 26px -4px rgba(0, 0, 0, 0.18); }
  .kai-link:hover img                  { transform: translateX(4px); }
  .kai-viewall:hover                   { text-decoration: underline; }
  .kai-carousel-btn:hover:not(:disabled) { background: #fafafa; }
  /* the affordance the removed play overlay used to provide */
  .kai-video-thumb:hover .kai-card-img,
  .kai-video-thumb:focus-visible .kai-card-img { transform: scale(1.04); }
  .kai-zoomable:hover img,
  .kai-zoomable:focus-visible img { transform: scale(1.02); }
  [data-kai-fab-card]:hover {
    border-color: var(--fab-amber);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09);
    transform: translateY(-2px);
  }
}

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */

@media (min-width: 480px) {
  :root { --kai-gutter: 24px; --kai-section-y: 48px; }
  .kai-banner { min-height: 380px; padding-block: 56px; }
}

@media (min-width: 768px) {
  :root { --kai-gutter: 40px; --kai-section-y: 56px; }

  .kai-banner { min-height: 450px; padding-block: 64px; }

  /* two cards per view */
  .kai-carousel-track > .kai-card { flex-basis: calc((100% - 24px) / 2); }

  /* 492px image against the copy, as drawn */
  .kai-story          { grid-template-columns: minmax(0, 492fr) minmax(0, 691fr); }
  .kai-brochure-grid  { grid-template-columns: minmax(0, 492fr) minmax(0, 663fr); gap: 45px; }
  .kai-forge-inner    { grid-template-columns: minmax(0, 492fr) minmax(0, 634fr); gap: 41px; }

  .kai-fabric-card { padding: 28px; }
}

@media (min-width: 1024px) {
  .kai-banner { min-height: 577px; padding-block: 66px; }

  :root { --kai-section-y: 68px; }

  /* three cards per view — the Figma layout: cards span 1094px of the 1200px
     container, leaving a 53px gutter each side for the arrows to sit in */
  .kai-carousel-viewport { padding-inline: 53px; }
  .kai-carousel-track { gap: 19px; }
  .kai-carousel-track > .kai-card { flex-basis: calc((100% - 38px) / 3); }

  .kai-fabric-card { padding: 36px; }

}

@media (min-width: 1280px) {
  :root { --kai-gutter: 120px; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .kai-page *,
  .kai-page *::before,
  .kai-page *::after,
  .kai-modal * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .kai-card > article:hover,
  .kai-btn:hover { transform: none; }
  .kai-link:hover img { transform: none; }
  .kai-video-thumb:hover .kai-card-img { transform: none; }
  .kai-zoomable:hover img { transform: none; }
  [data-kai-fab-card]:hover { transform: none; }
}




/* --------------------------------------------------------------------------
   Homepage embed overrides
   -------------------------------------------------------------------------- */

/* Here .kai-page wraps one section inside home.html's own <main>, which
   already clears the fixed header — so no second offset, no page background. */
.kai-page--embed {
  padding-top: 0;
  background: transparent;
}

/* No heading or intro above the panel on the homepage, so the gap that
   separated it from them goes too. */
.kai-page--embed .kai-fabric-card {
  margin-top: 0;
}

/* The KAI band below is near-white too, so this section's bottom padding
   stacked with its top padding into a doubled gap (195px at desktop). Let
   the KAI band's own padding do the spacing. */
.kai-page--embed .kai-fabric {
  padding-bottom: 0;
}

/* Landing target for the header's "mon'k Fabric" link. */
.kai-page--embed .kai-fabric {
  scroll-margin-top: var(--kai-header-h);
}