/* ==========================================================================
   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. */
html,
body { overscroll-behavior-y: none; }

html {
  /* iOS Safari inflates body text when a phone turns landscape */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* anchor jumps without JS (and the browser's own find-in-page) land below
     the fixed header instead of under it */
  scroll-padding-top: calc(var(--kai-header-h) + 12px);
}

.kai-page {
  padding-top: var(--kai-header-h);
  font-family: var(--kai-font-body);
  color: var(--kai-body);
  background: #ffffff;
  /* `hidden` first for Safari < 16, which does not know `clip`; browsers that
     do take the second line, which contains overflow without creating a
     scroll container */
  overflow-x: hidden;
  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;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-family: var(--kai-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--kai-body);
}

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

/* The type label ("Case Study") stays on one line; a long publisher name
   after the divider is what wraps. Squeezed side by side on a phone, both
   used to break mid-phrase. */
.kai-meta-icon + .kai-meta-label { white-space: nowrap; }

/* `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/fbf26/fabric/chevron-step.svg') center / contain no-repeat;
  }
}

/* Tablets and small laptops: the gateway (with its three model columns)
   takes a full row, and the agent library and services share the next one.
   Three columns this narrow shrank each model logo to a few pixels. */
@media (min-width: 768px) {
  .kai-fab-orchestration { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kai-fab-gateway       { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .kai-fab-layer      { padding: 26px 28px 30px; }
  .kai-fab-card       { padding: 18px 16px; }

  .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; }
}

/* The Figma's one-row layouts need the full 1200px container. Below it, four
   app cards left each chip on its own line and every title wrapping. */
@media (min-width: 1200px) {
  .kai-fab-apps { grid-template-columns: repeat(4, minmax(0, 1fr)); }

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

/* ==========================================================================
   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 supplied thumbnails already carry the play button and the duration
   badge as part of the artwork, so this adds neither — a CSS overlay on top
   produced a visible second copy of both. 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; }

/* 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;
}

.kai-carousel-btn--prev { left: 0; }
.kai-carousel-btn--next { right: 0; }

/* Below the desktop breakpoint there is no gutter beside the cards, and
   arrows laid over the track covered the edges of every image. They drop
   into the controls row instead, either side of the dots:  ‹  • • •  ›
   The row is 40px tall and starts 20px under the viewport, so an arrow with
   bottom: -60px sits exactly in it. 40px is a comfortable tap target. */
@media (max-width: 1023px) {
  .js-enabled .kai-carousel-controls { min-height: 40px; margin-top: 20px; }

  .js-enabled .kai-carousel-btn {
    top: auto;
    bottom: -60px;
    transform: none;
    width: 40px; height: 40px;
  }
}

.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; }

/* The dot stays 8px to look at; the ::before below makes the tap target
   24px, since an 8px target is nearly impossible to hit with a finger. */
.kai-carousel-dot {
  position: relative;
  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::before {
  content: '';
  position: absolute;
  inset: -8px -4px;
}

.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.
   Its own class, not .kai-stories: sharing the section's name gave the list
   the section's padding-block and the section the list's margin-top. */
.kai-stories-list { display: grid; gap: 40px; 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;
  /* a safety net on very short screens; the panel below normally fits */
  overflow-y: auto;
}

.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);
}

/* Width is capped by the screen's HEIGHT as well as its width. On a phone
   held sideways a full-width 16:9 player is taller than the screen, which
   pushed the title bar and the player's own controls out of view. 120px is
   the modal's padding plus a two-line title bar. svh follows vh for iOS
   Safari. */
.kai-modal-panel {
  position: relative;
  width: 100%;
  max-width: 960px;
  max-width: min(960px, calc((100vh - 120px) * 16 / 9));
  max-width: min(960px, calc((100svh - 120px) * 16 / 9));
  margin: auto;
  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; }

/* Phones held sideways (roughly 360–430px tall). Every pixel of height goes
   to the player: a slimmer bar, a one-line title, and a width cap worked out
   from the 68px of chrome that is left. */
@media (max-height: 500px) {
  .kai-modal { padding: 8px; }
  .kai-modal-head { align-items: center; padding: 8px 12px; }
  .kai-modal-title {
    min-width: 0;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .kai-modal-panel {
    max-width: min(960px, calc((100vh - 72px) * 16 / 9));
    max-width: min(960px, calc((100svh - 72px) * 16 / 9));
  }
}
.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; }
}

/* ==========================================================================
   fbf26 header + footer — this page's own chrome (header-fbf26.php /
   footer-fbf26.php). The site's shared header, footer and style.css are not
   loaded on this template.
   ========================================================================== */


/* The page's border-box reset is scoped to .kai-page, and this chrome sits
   outside it — without this it falls back to content-box and `width:100%`
   plus padding renders the header wider than the viewport. */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: #ffffff;
}

.fbf26-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: #02021b;
}

.fbf26-header-inner,
.fbf26-footer-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 16px;
}

.fbf26-header-inner { height: 76px; }

.fbf26-brand {
  display: inline-flex;
  align-items: flex-end;
  gap: 9px;
  flex: none;
  line-height: 0;
  text-decoration: none;
}

.fbf26-brand img { display: block; width: auto; height: 54px; }

/* sits on the wordmark's baseline, not the image's bottom edge — the logo
   PNG carries a little clear space beneath the letterforms */
.fbf26-brand-tag {
  padding-bottom: 11px;
  font-family: var(--kai-font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
}

.fbf26-nav { display: none; margin-left: auto; min-width: 0; }

.fbf26-nav ul,
.fbf26-footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 0; padding: 0;
  list-style: none;
}

.fbf26-nav a {
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* `.is-active` is what the scrollspy sets; `aria-current` is set alongside it
   and is also how a WordPress menu marks the current item. */
.fbf26-nav a.is-active,
.fbf26-nav a[aria-current] { color: #ffc600; font-weight: 700; }

.fbf26-nav a:hover { color: #ffc600; }

.fbf26-cta {
  flex: none;
  margin-left: auto;
  padding: 12px 22px;
  font-size: 16px;
  font-weight: 700;
  color: #000000;
  background: #ffc600;
  border-radius: 5px;
  text-decoration: none;
}

.fbf26-footer { background: #03041b; padding-block: 24px; }
.fbf26-footer-inner { flex-wrap: wrap; }
.fbf26-footer-inner .fbf26-brand img { height: 40px; }
.fbf26-footer-tagline { margin: 0; font-size: 14px; color: #ffffff; }
/* same white as the sentence it sits in; the underline is what marks it
   as a link */
.fbf26-footer-tagline a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; }
/* the site's yellow on hover, as the header and footer links */
.fbf26-footer-tagline a:hover,
.fbf26-footer-tagline a:focus-visible { color: #ffc600; }
.fbf26-footer-nav { width: 100%; }
.fbf26-footer-nav a { font-size: 15px; font-weight: 500; color: #ffffff; text-decoration: none; white-space: nowrap; }
.fbf26-footer-nav a.is-active,
.fbf26-footer-nav a[aria-current] { color: #ffc600; font-weight: 700; }

@media (min-width: 1024px) {
  .fbf26-nav { display: block; }
  .fbf26-cta { margin-left: 0; }
  .fbf26-header-inner,
  .fbf26-footer-inner { padding-inline: 40px; }
  .fbf26-footer-nav { width: auto; margin-left: auto; }

  /* logo + "at Frankfurt" + six links + the CTA is a lot for one bar; these
     gaps are what keep it off the viewport edge between 1024 and 1280 */
  .fbf26-header-inner { gap: 16px; }
  .fbf26-nav ul { gap: 14px; }
}

@media (min-width: 1280px) {
  .fbf26-header-inner,
  .fbf26-footer-inner { padding-inline: 114px; }
  .fbf26-nav ul, .fbf26-footer-nav ul { gap: 24px; }
}
/* end fbf26 header + footer */


/* --------------------------------------------------------------------------
   Header menu — the hamburger and dropdown from header-fbf26.php.

   Added on top of the rules above rather than replacing them, so 1200px and
   up is exactly as before. Below 1200px the six section links become a
   dropdown under the bar: logo, tag, links and button need about 1150px on
   one line, and at 1024 the last link wrapped onto a second row. Below 560px
   the button moves into the dropdown too, having run off the right edge at
   320–375px. The dropdown rules wait for .js-enabled (set by fbf26.js), so
   if the script never runs the header behaves as it did before.
   -------------------------------------------------------------------------- */

.fbf26-nav-cta,
.fbf26-nav-toggle { display: none; }

.fbf26-nav-toggle {
  flex: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.fbf26-nav-toggle span[aria-hidden] {
  display: block;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* the three bars turn into a cross while the menu is open */
.fbf26-nav-toggle[aria-expanded='true'] span[aria-hidden]:nth-of-type(2) { transform: translateY(7px) rotate(45deg); }
.fbf26-nav-toggle[aria-expanded='true'] span[aria-hidden]:nth-of-type(3) { opacity: 0; }
.fbf26-nav-toggle[aria-expanded='true'] span[aria-hidden]:nth-of-type(4) { transform: translateY(-7px) rotate(-45deg); }

/* tablets: header and footer content 40px in from the edge, as on laptops */
@media (min-width: 768px) and (max-width: 1023px) {
  .fbf26-header-inner,
  .fbf26-footer-inner { padding-inline: 40px; }
}

@media (max-width: 1199px) {
  /* wrapped footer links: tighter rows than the 18px column gap */
  .fbf26-footer-nav ul { row-gap: 12px; }

  .js-enabled .fbf26-header-inner { gap: 12px; }
  .js-enabled .fbf26-nav-toggle { display: inline-flex; }
  .js-enabled .fbf26-cta--bar { margin-left: auto; }

  .js-enabled .fbf26-nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    margin: 0;
    max-height: calc(100vh - 76px);
    max-height: calc(100svh - 76px);
    overflow-y: auto;
    padding: 8px 16px 20px;
    background: #02021b;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
  }

  .js-enabled .fbf26-nav.is-open { display: block; }

  .js-enabled .fbf26-nav ul {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
  }

  .js-enabled .fbf26-nav a { display: block; padding: 12px 0; font-size: 16px; }
  .js-enabled .fbf26-nav li + li { border-top: 1px solid rgba(255, 255, 255, 0.08); }

  .js-enabled .fbf26-nav .fbf26-nav-cta a {
    display: inline-block;
    padding: 12px 22px;
    font-weight: 700;
    color: #000000;
  }
}

/* line the dropdown links up with the logo, which sits 40px in from 768 */
@media (min-width: 768px) and (max-width: 1199px) {
  .js-enabled .fbf26-nav { padding-inline: 40px; }
}

@media (max-width: 559px) {
  .js-enabled .fbf26-cta--bar { display: none; }
  .js-enabled .fbf26-nav-cta  { display: block; padding-top: 16px; }
  .js-enabled .fbf26-nav-toggle { margin-left: auto; margin-right: -10px; }
}

@media (max-width: 399px) {
  .js-enabled .fbf26-header-inner .fbf26-brand img { height: 44px; }
  .js-enabled .fbf26-brand-tag { font-size: 15px; padding-bottom: 9px; }
}


/* Logged-in editors: keep the fixed header below the WordPress admin bar. */
.admin-bar .fbf26-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .fbf26-header { top: 46px; }
}