/* ===========================================================================
   FIS Brandbook — navigable styleguide layout.
   Consumes the design-system tokens (../styles.css). Class-based & semantic
   so it converts cleanly to a WordPress theme (sections → template parts,
   this file → theme stylesheet, data-i18n → Polylang/WPML strings).
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* --- Reusable text atoms ------------------------------------------------- */
.bb-eyebrow {
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0 0 var(--space-4);
}
.bb-h2 {
  font-size: clamp(2rem, 4vw, var(--text-h2));
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-5);
}
.bb-h3 {
  font-size: var(--text-h5);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
}
.bb-lede {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 64ch;
  margin: 0 0 var(--space-8);
}
.bb-label {
  font-size: var(--text-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.bb-mono { font-family: var(--font-mono); font-size: var(--text-body-sm); }

/* =========================================================================
   Top bar
   ========================================================================= */
.bb-topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--space-6);
  height: 64px; padding: 0 var(--space-8);
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.bb-topbar__logo { height: 26px; width: auto; }
.bb-topbar__title {
  font-size: var(--text-body-sm); font-weight: var(--fw-medium);
  color: var(--text-muted); letter-spacing: var(--tracking-tight);
}
.bb-topbar__sep { width: 1px; height: 22px; background: var(--border-strong); }
.bb-topbar__spacer { flex: 1; }

/* Language toggle (segmented) */
.bb-lang {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  overflow: hidden; background: var(--neutral-0);
}
.bb-lang__btn {
  appearance: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--text-body-sm); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-2) var(--space-4);
  background: transparent; color: var(--text-muted);
  transition: background var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard);
}
.bb-lang__btn[aria-pressed="true"] { background: var(--fis-navy); color: var(--text-inverse); }
.bb-lang__btn:not([aria-pressed="true"]):hover { color: var(--text-primary); }

/* Reading-progress hairline under the bar */
.bb-progress {
  position: sticky; top: 64px; z-index: 49;
  height: 2px; background: transparent;
}
.bb-progress__fill { height: 100%; width: 0%; background: var(--fis-gradient); }

/* =========================================================================
   Shell — sidebar + content
   ========================================================================= */
.bb-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  max-width: var(--container-2xl);
  margin: 0 auto;
}
.bb-sidebar {
  position: sticky; top: 66px; align-self: start;
  height: calc(100vh - 66px);
  overflow-y: auto;
  padding: var(--space-10) var(--space-6) var(--space-10) var(--space-8);
  border-right: 1px solid var(--border);
}
.bb-nav { display: flex; flex-direction: column; gap: 2px; }
.bb-nav__group {
  font-size: var(--text-caption); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--text-faint);
  margin: var(--space-6) 0 var(--space-2);
}
.bb-nav__group:first-child { margin-top: 0; }
.bb-nav__link {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm); font-weight: var(--fw-medium);
  color: var(--text-secondary); text-decoration: none;
  border-left: 2px solid transparent;
  transition: background var(--dur-1) var(--ease-standard), color var(--dur-1) var(--ease-standard);
}
.bb-nav__link:hover { background: var(--surface-subtle); color: var(--text-primary); }
.bb-nav__link.is-active {
  color: var(--fis-navy); background: var(--fis-blue-100);
  border-left-color: var(--accent);
}
.bb-nav__num {
  font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-faint);
  min-width: 1.4em;
}
.bb-nav__link.is-active .bb-nav__num { color: var(--accent-strong); }

.bb-main { min-width: 0; }

/* =========================================================================
   Hero / cover
   ========================================================================= */
.bb-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 540px;
  display: flex; align-items: center;
  padding: 0;
  color: var(--text-inverse);
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(91,194,229,0.12), transparent 55%),
    linear-gradient(150deg, #0a3a5c 0%, var(--fis-navy) 58%, #052a41 100%);
}
/* signature FIS blade holding a cyan-duotone photo (ref: Cover.svg) */
.bb-hero__blade {
  position: absolute; top: 0; bottom: 0; left: 0;
  height: 100%; width: auto; display: block;
}
.bb-hero__content {
  position: relative; z-index: 1;
  margin-left: 380px; max-width: 620px;
  padding: var(--space-12) var(--space-16) var(--space-12) 0;
}
.bb-hero__mark { height: 52px; width: auto; margin-bottom: var(--space-10); }
.bb-hero__kicker {
  font-size: var(--text-caption); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--fis-blue); margin: 0 0 var(--space-4);
}
.bb-hero__title {
  font-size: clamp(2.2rem, 3.4vw, 3rem); font-weight: var(--fw-light);
  letter-spacing: var(--tracking-tighter); line-height: 1.04;
  margin: 0 0 var(--space-6); text-wrap: balance;
  color: #fff;
}
.bb-hero__title em { font-style: normal; font-weight: var(--fw-light); color: var(--fis-blue); }
.bb-hero__sub {
  font-size: var(--text-body-lg); line-height: var(--leading-relaxed);
  color: rgba(255,255,255,0.80); max-width: 40ch; margin: 0 0 var(--space-10);
}
.bb-hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-8);
  padding-top: var(--space-8); border-top: 1px solid rgba(91,194,229,0.30);
}
.bb-hero__meta div { display: flex; flex-direction: column; gap: 3px; }
.bb-hero__meta dt {
  font-size: 0.6875rem; letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--fis-blue-200);
}
.bb-hero__meta dd { margin: 0; font-size: var(--text-body-sm); font-weight: var(--fw-medium); color: #fff; }

@media (prefers-reduced-motion: no-preference) {
  .bb-hero__content > * { animation: bbHeroIn 0.7s cubic-bezier(0.16,1,0.3,1) both; }
  .bb-hero__mark   { animation-delay: 0.02s; }
  .bb-hero__kicker { animation-delay: 0.08s; }
  .bb-hero__title  { animation-delay: 0.15s; }
  .bb-hero__sub    { animation-delay: 0.23s; }
  .bb-hero__meta   { animation-delay: 0.31s; }
}
@keyframes bbHeroIn { from { transform: translateY(16px); } to { transform: none; } }

@media (max-width: 900px) {
  .bb-hero { aspect-ratio: auto; min-height: 0; max-height: none; flex-direction: column; align-items: flex-start; gap: var(--space-8); padding: var(--space-10) var(--space-8); }
  .bb-hero__blade { position: relative; left: auto; top: auto; bottom: auto; height: 200px; }
  .bb-hero__content { margin-left: 0; max-width: 100%; padding: 0; }
}

/* =========================================================================
   Sections
   ========================================================================= */
.bb-section {
  padding: var(--space-24) var(--space-16);
  border-top: 1px solid var(--border);
  scroll-margin-top: 80px;
}
.bb-section:first-of-type { border-top: 0; }
.bb-section__head { max-width: 72ch; margin-bottom: var(--space-12); }
.bb-block { margin-top: var(--space-16); }
.bb-block__title {
  display: flex; align-items: baseline; gap: var(--space-3);
  font-size: var(--text-h5); font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-6);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--border);
}
.bb-block__title .bb-mono { color: var(--text-faint); font-weight: var(--fw-regular); }
.bb-note {
  font-size: var(--text-body-sm); line-height: var(--leading-normal);
  color: var(--text-muted); max-width: 60ch; margin-top: var(--space-4);
}

/* Do / Don't */
.bb-rules { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-8); }
.bb-rule { padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-card); }
.bb-rule__tag { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-caption); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: var(--space-3); }
.bb-rule--do .bb-rule__tag { color: var(--success); }
.bb-rule--dont .bb-rule__tag { color: var(--danger); }
.bb-rule--do { border-left: 3px solid var(--success); }
.bb-rule--dont { border-left: 3px solid var(--danger); }
.bb-rule ul { margin: 0; padding-left: 1.1em; }
.bb-rule li { font-size: var(--text-body-sm); line-height: var(--leading-relaxed); color: var(--text-secondary); }

/* =========================================================================
   Color specimens
   ========================================================================= */
.bb-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.bb-swatch { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-card); }
.bb-swatch__chip { height: 92px; }
.bb-swatch__meta { padding: var(--space-3) var(--space-4); }
.bb-swatch__name { font-size: var(--text-body-sm); font-weight: var(--fw-semibold); }
.bb-swatch__hex { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-muted); text-transform: uppercase; }
.bb-swatch__pantone { font-size: var(--text-caption); color: var(--text-faint); }
.bb-gradient-bar { height: 120px; border-radius: var(--radius-md); background: var(--fis-gradient); margin-top: var(--space-6); position: relative; overflow: hidden; }
.bb-gradient-bar span { position: absolute; bottom: var(--space-4); font-family: var(--font-mono); font-size: var(--text-caption); color: #fff; }
.bb-gradient-bar span:first-child { left: var(--space-5); }
.bb-gradient-bar span:last-child { right: var(--space-5); color: var(--fis-navy); }

/* =========================================================================
   Typography specimens
   ========================================================================= */
.bb-typespec { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-6); }
.bb-typerow { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-6); align-items: baseline; padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.bb-typerow__meta { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-muted); line-height: var(--leading-normal); }
.bb-typerow__sample { color: var(--text-primary); letter-spacing: var(--tracking-tight); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-weights { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-6); }
.bb-weight { font-size: var(--text-h3); letter-spacing: var(--tracking-tight); }
.bb-weight small { display: block; font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-muted); letter-spacing: 0; margin-top: var(--space-2); }

/* =========================================================================
   Icon & shape grids
   ========================================================================= */
.bb-iconcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); margin-top: var(--space-4); align-items: stretch; }
.bb-iconcol { display: flex; flex-direction: column; align-items: center; gap: var(--space-7); padding: var(--space-8) var(--space-6) var(--space-7); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.bb-iconcol__grid { flex: 1; display: grid; justify-items: center; align-content: center; }
.bb-iconcol__grid--line { grid-template-columns: repeat(3, 64px); gap: var(--space-10) var(--space-8); }
.bb-iconcol__grid--hex { grid-template-columns: repeat(3, 72px); gap: var(--space-8) var(--space-6); }
.bb-ic { width: 52px; height: 52px; object-fit: contain; }
.bb-hx { position: relative; width: 72px; aspect-ratio: 66.35 / 74.66; display: grid; place-items: center; }
.bb-hx__bg { position: absolute; inset: 0; -webkit-mask: url(assets/shapes/hexagon.svg) center / contain no-repeat; mask: url(assets/shapes/hexagon.svg) center / contain no-repeat; }
.bb-hx--blue .bb-hx__bg { background: var(--fis-blue); }
.bb-hx--navy .bb-hx__bg { background: var(--fis-navy); }
.bb-hx__ic { position: relative; z-index: 1; width: 48%; aspect-ratio: 1 / 1; object-fit: contain; }
.bb-hx--navy .bb-hx__ic { filter: brightness(0) saturate(100%) invert(70%) sepia(35%) saturate(560%) hue-rotate(158deg) brightness(95%) contrast(89%); }
.bb-iconcol__label { font-size: var(--text-caption); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); text-align: center; }
.bb-note--center { text-align: center; max-width: 58ch; margin: var(--space-8) auto 0; }

.bb-shapegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.bb-shapecard { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-card); }
.bb-shapecard__art { height: 130px; display: grid; place-items: center; background: var(--surface-subtle); padding: var(--space-5); }
.bb-shapecard__art .fill { width: 100%; height: 100%; background: var(--fis-navy); }
.bb-shapecard__art .fill.grad { background: var(--fis-gradient-diagonal); }
.bb-shapecard__cap { padding: var(--space-3) var(--space-4); }
.bb-shapecard__cap b { display: block; font-size: var(--text-body-sm); font-weight: var(--fw-semibold); }
.bb-shapecard__cap span { font-size: var(--text-caption); color: var(--text-muted); }
/* Official FIS frames — rendered from the toolkit SVGs via CSS mask, so they
   recolour to navy / gradient / image while keeping the exact vector geometry */
.bb-frame { width: 100%; background: var(--fis-navy);
  -webkit-mask: var(--s) center / contain no-repeat; mask: var(--s) center / contain no-repeat; }
.bb-frame--grad { background: var(--fis-gradient-diagonal); }
.bb-frame--img { background: none; position: relative; overflow: hidden; }
.bb-frame--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.bb-origin { display: flex; align-items: center; gap: var(--space-10); flex-wrap: wrap;
  padding: var(--space-8) var(--space-10); background: var(--surface-subtle);
  border: 1px solid var(--border); border-radius: var(--radius-md); }
.bb-origin__item { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.bb-deriv { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; padding: var(--space-8); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); }
.bb-deriv__cell { position: relative; width: 128px; height: 128px; display: grid; place-items: center; }
.bb-deriv__ghost { width: 96px; height: auto; opacity: 0.12; }
.bb-deriv__rule { position: absolute; top: 20px; bottom: 20px; width: 1px; background: var(--fis-navy); left: 40px; }
.bb-deriv__rule--r { left: auto; right: 40px; }
.bb-deriv__chev { position: absolute; height: 52px; aspect-ratio: 1304.9 / 2423.5; -webkit-mask: var(--s) center / contain no-repeat; mask: var(--s) center / contain no-repeat; }
.bb-deriv__chev--big { position: relative; height: 92px; }
.bb-deriv__n { position: absolute; bottom: 0; right: 4px; font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-muted); }
.bb-deriv__h { font-size: var(--text-h5); font-weight: var(--fw-semibold); margin: var(--space-8) 0 var(--space-4); }
.bb-shapeex { display: grid; grid-template-columns: 0.6fr 1.2fr 1.2fr; gap: var(--space-4); }
.bb-shapeex__tile { position: relative; height: 120px; border-radius: var(--radius-sm); overflow: hidden; display: flex; align-items: center; }
.bb-shapeex__measure { background: var(--surface-card); border: 1px solid var(--border); justify-content: center; }
.bb-shapeex__banner { background: var(--fis-navy); padding: 0 var(--space-6); }
.bb-shapeex__chev { height: 84px; aspect-ratio: 1304.9 / 2423.5; -webkit-mask: var(--s) center / contain no-repeat; mask: var(--s) center / contain no-repeat; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
.bb-shapeex__chev--c { position: relative; right: auto; top: auto; transform: none; }
.bb-shapeex__chev--l { right: auto; left: 16px; height: 30px; }
.bb-shapeex__txt { position: relative; z-index: 1; }
.bb-shapeex__txt--in { margin-left: 44px; }
.bb-shapeex__txt b { display: block; color: #fff; font-size: var(--text-h5); font-weight: var(--fw-light); }
.bb-shapeex__txt span { color: var(--fis-blue-200); font-size: var(--text-caption); }

/* 2.5.1 Origin — official diagram figure */
.bb-origin-fig { margin: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-8) var(--space-10); }
.bb-origin-fig img { display: block; width: 100%; max-width: 760px; margin: 0 auto; height: auto; }

/* =========================================================================
   Application mockups v2 — faithful to PDF pages 29–38
   ========================================================================= */
.mk2-cap { display: flex; justify-content: space-between; width: 300px; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); margin-top: -6px; }
.mk2-stack { display: flex; flex-direction: column; gap: 16px; align-items: center; }

/* 3.4 Business card */
.mk2-bc { width: 300px; aspect-ratio: 85/55; background: #fff; border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.mk2-bc__panel { position: absolute; right: 0; top: 0; bottom: 0; width: 55%; clip-path: polygon(26% 0, 100% 0, 100% 100%, 6% 100%); background: linear-gradient(135deg, #cfe7f2, #a9d2e6); overflow: hidden; }
.mk2-bc__panel img { width: 100%; height: 100%; object-fit: cover; }
.mk2-bc__mono { position: absolute; top: 14px; right: 16px; height: 24px; z-index: 3; }
.mk2-bc__info { position: absolute; left: 0; top: 0; bottom: 0; width: 60%; padding: 18px 0 14px 18px; display: flex; flex-direction: column; z-index: 2; color: var(--fis-navy); }
.mk2-bc__name b { display: block; font-size: 11px; font-weight: var(--fw-semibold); line-height: 1.2; }
.mk2-bc__name span { font-size: 9px; }
.mk2-bc__c { margin-top: 13px; display: flex; flex-direction: column; }
.mk2-bc__c span { font-size: 6.5px; line-height: 1.55; }
.mk2-bc__co { margin-top: 11px; display: flex; flex-direction: column; }
.mk2-bc__co b { font-size: 6.5px; font-weight: var(--fw-semibold); }
.mk2-bc__co span { font-size: 6.5px; line-height: 1.55; }
.mk2-bc__web { margin-top: 9px; font-size: 6.5px; color: var(--fis-blue-500); font-weight: var(--fw-semibold); }
.mk2-bc--back { display: grid; place-items: center; }
.mk2-bc__back { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mk2-bc__back img { height: 30px; }
.mk2-bc__back span { font-size: 8px; color: var(--fis-navy); font-weight: var(--fw-semibold); text-align: center; line-height: 1.3; }

/* 3.5 Badge */
.mk2-bg { width: 300px; aspect-ratio: 85/55; border-radius: 6px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; border: 1px solid var(--border); }
.mk2-bg--emp { background: linear-gradient(120deg, #d2e9f3, #b6d6e8); }
.mk2-bg--emp::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #d2e9f3 16%, transparent 50%); z-index: 1; }
.mk2-bg__mol { position: absolute; left: -4%; top: 0; height: 100%; width: auto; }
.mk2-bg__head { position: absolute; top: 14px; left: 16px; display: flex; align-items: center; gap: 7px; z-index: 3; }
.mk2-bg__head img { height: 24px; }
.mk2-bg__head span { font-size: 6.5px; font-weight: var(--fw-semibold); color: var(--fis-navy); line-height: 1.2; }
.mk2-bg__photo { position: absolute; right: 22px; top: 50%; transform: translateY(-36%); width: 74px; height: 74px; background: rgba(232,237,240,0.92); display: grid; place-items: center; font-size: 9px; color: var(--fis-navy); z-index: 2; }
.mk2-bg__id { position: absolute; left: 16px; bottom: 15px; z-index: 3; color: var(--fis-navy); }
.mk2-bg__id b { display: block; font-size: 11px; font-weight: var(--fw-regular); line-height: 1.15; }
.mk2-bg__id span { font-size: 10px; }
.mk2-bg--vis { background: #fff; }
.mk2-bg__wave { position: absolute; inset: 0; background: linear-gradient(125deg, #a9d6ec 0%, #1f8fc6 72%); clip-path: path('M150 0 L300 0 L300 194 L176 194 C120 140 232 70 150 0 Z'); }

/* 3.6.1 PPT cover */
.mk2-cover { width: 340px; aspect-ratio: 16/9; border-radius: 6px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; background: var(--fis-navy); }
.mk2-cover__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk2-cover__v2 { position: absolute; inset: 0; background: rgba(6,51,81,0.42); clip-path: polygon(0 0, 62% 0, 74% 50%, 62% 100%, 0 100%); }
.mk2-cover__v1 { position: absolute; inset: 0; background: var(--fis-navy); clip-path: polygon(0 0, 50% 0, 62% 50%, 50% 100%, 0 100%); }
.mk2-cover__logo { position: absolute; top: 18px; left: 20px; height: 22px; z-index: 3; }
.mk2-cover__t { position: absolute; left: 20px; bottom: 20px; z-index: 3; }
.mk2-cover__t b { display: block; font-size: 22px; font-weight: var(--fw-light); color: #fff; line-height: 1.02; letter-spacing: var(--tracking-tight); }
.mk2-cover__t span { display: block; margin-top: 14px; font-size: 9px; color: #fff; font-weight: var(--fw-semibold); line-height: 1.4; }
.mk2-cover__t small { font-weight: var(--fw-regular); color: var(--fis-blue-200); }
.mk2-cover__cap { text-align: center; font-size: var(--text-caption); color: var(--text-muted); margin: var(--space-3) 0 0; }

/* 3.6.2 PPT dividers */
.mk2-divgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }
.mk2-div { position: relative; aspect-ratio: 16/9; }
.mk2-div__shape { position: absolute; inset: 0; -webkit-mask: url(assets/shapes/wide-box.svg) center / 100% 100% no-repeat; mask: url(assets/shapes/wide-box.svg) center / 100% 100% no-repeat; transform: scaleY(-1); }
.mk2-div__shape--navy { background: var(--fis-navy); }
.mk2-div__shape--blue { background: var(--fis-blue); }
.mk2-div__shape--grad { background: linear-gradient(115deg, var(--fis-navy) 35%, var(--fis-blue)); }
.mk2-div__shape--img { background: none; overflow: hidden; }
.mk2-div__shape--img img { width: 100%; height: 100%; object-fit: cover; transform: scaleY(-1); }
.mk2-div__shape--img::after { content: ""; position: absolute; inset: 0; background: rgba(6,51,81,0.30); }
.mk2-div__t { position: absolute; left: 15px; top: 15px; z-index: 2; }
.mk2-div__t b { display: block; font-size: 13px; font-weight: var(--fw-semibold); color: #fff; line-height: 1.1; }
.mk2-div__t span { font-size: 7px; color: rgba(255,255,255,0.82); }
.mk2-div__mono { position: absolute; top: 13px; right: 13px; height: 15px; z-index: 2; }
.bb-origin__arrow { font-size: var(--text-h3); color: var(--fis-blue); line-height: 1; }
.bb-shape-cap { font-size: var(--text-caption); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }

.bb-framegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-6) var(--space-5); margin-top: var(--space-6); align-items: end; }
.bb-framecard { margin: 0; }
.bb-framecard figcaption { margin-top: var(--space-4); font-size: var(--text-body-sm); font-weight: var(--fw-medium); color: var(--text-secondary); }

.bb-cutrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); max-width: 540px; }
.bb-cut { position: relative; aspect-ratio: 134 / 146.4; background: var(--fis-blue); border-radius: 2px; overflow: hidden; }
.bb-cut::after { content: ""; position: absolute; inset: 0; background: var(--fis-navy);
  -webkit-mask: var(--s) center / contain no-repeat; mask: var(--s) center / contain no-repeat; }

/* =========================================================================
   Photography
   ========================================================================= */
.bb-photogrid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 200px; gap: var(--space-4); margin-top: var(--space-6); }
.bb-photogrid figure { margin: 0; position: relative; border-radius: var(--radius-md); overflow: hidden; }
.bb-photogrid figure:first-child { grid-row: span 2; }
.bb-photogrid img { width: 100%; height: 100%; object-fit: cover; }
/* 2.7 — page-24 layout: 2 photos over 3 */
.bb-photogrid--p24 { grid-template-columns: repeat(6, 1fr); grid-auto-rows: auto; }
.bb-photogrid--p24 figure:first-child { grid-row: auto; }
.bb-photogrid--p24 .pg-a, .bb-photogrid--p24 .pg-b { grid-column: span 3; aspect-ratio: 16 / 10; }
.bb-photogrid--p24 .pg-c, .bb-photogrid--p24 .pg-d, .bb-photogrid--p24 .pg-e { grid-column: span 2; aspect-ratio: 4 / 3; }
.bb-photogrid figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-6) var(--space-4) var(--space-3); font-size: var(--text-caption); color: #fff; background: linear-gradient(transparent, rgba(6,51,81,0.78)); }

/* =========================================================================
   Component demos
   ========================================================================= */
.bb-demo { border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-top: var(--space-6); }
.bb-demo__stage { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); padding: var(--space-8); background: var(--surface-subtle); }
.bb-demo__stage.dark { background: var(--fis-navy); }
.bb-demo__cap { padding: var(--space-3) var(--space-5); font-size: var(--text-caption); color: var(--text-muted); border-top: 1px solid var(--border); background: var(--surface-card); }

/* Buttons (recreated to spec — no runtime needed) */
.fb-btn { appearance: none; border: 1px solid transparent; cursor: pointer; font: inherit; font-weight: var(--fw-medium); font-size: var(--text-body-sm); display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); transition: background var(--dur-1) var(--ease-standard), transform var(--dur-1) var(--ease-standard); }
.fb-btn:active { transform: translateY(1px); }
.fb-btn--primary { background: var(--fis-navy); color: #fff; }
.fb-btn--primary:hover { background: var(--fis-navy-900); }
.fb-btn--accent { background: var(--fis-blue); color: var(--fis-navy); }
.fb-btn--accent:hover { background: var(--fis-blue-500); }
.fb-btn--secondary { background: transparent; color: var(--fis-navy); border-color: var(--border-strong); }
.fb-btn--secondary:hover { background: var(--surface-sunken); }
.fb-btn--ghost { background: transparent; color: var(--fis-navy-600); }
.fb-btn--ghost:hover { background: var(--surface-sunken); }
.fb-btn--cut { border-radius: 0; clip-path: var(--clip-tr); padding-right: var(--space-6); }

/* Card */
.fb-card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); width: 260px; box-shadow: var(--shadow-sm); }
.fb-card--rail { border-top: 3px solid var(--accent); }
.fb-card h4 { margin: 0 0 var(--space-2); font-size: var(--text-body-lg); font-weight: var(--fw-semibold); }
.fb-card p { margin: 0; font-size: var(--text-body-sm); line-height: var(--leading-normal); color: var(--text-secondary); }

/* Stat */
.fb-stat { background: var(--fis-navy); color: #fff; border-radius: var(--radius-md); padding: var(--space-6); width: 200px; position: relative; overflow: hidden; }
.fb-stat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--fis-gradient); }
.fb-stat b { display: block; font-size: var(--text-h2); font-weight: var(--fw-light); letter-spacing: var(--tracking-tight); }
.fb-stat span { font-size: var(--text-caption); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fis-blue-200); }
.fb-stat em { font-style: normal; font-family: var(--font-mono); font-size: var(--text-caption); color: var(--fis-blue); }

/* Tags & badges */
.fb-tag { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-caption); font-weight: var(--fw-medium); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--text-secondary); }
.fb-tag--solid { background: var(--fis-navy); color: #fff; }
.fb-tag--cut { clip-path: var(--clip-tr); border-radius: 0; padding-right: var(--space-4); background: var(--fis-blue-100); color: var(--fis-navy); }
.fb-badge { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-caption); font-weight: var(--fw-semibold); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); }
.fb-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fb-badge--success { background: var(--success-surface); color: var(--success); }
.fb-badge--warning { background: var(--warning-surface); color: var(--warning); }
.fb-badge--info { background: var(--info-surface); color: var(--info); }
.fb-badge--danger { background: var(--danger-surface); color: var(--danger); }

/* Form bits */
.fb-field { display: flex; flex-direction: column; gap: var(--space-2); width: 240px; }
.fb-field label { font-size: var(--text-body-sm); font-weight: var(--fw-medium); }
.fb-input { font: inherit; font-size: var(--text-body-sm); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: #fff; }
.fb-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); }

/* =========================================================================
   Footer
   ========================================================================= */
.bb-footer { background: var(--fis-navy); color: rgba(255,255,255,0.7); padding: var(--space-16); }
.bb-footer img { height: 30px; margin-bottom: var(--space-6); }
.bb-footer p { font-size: var(--text-body-sm); line-height: var(--leading-relaxed); max-width: 60ch; margin: 0 0 var(--space-2); }
.bb-footer a { color: var(--fis-blue); text-decoration: none; }
.bb-footer__legal { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,0.16); font-size: var(--text-caption); color: rgba(255,255,255,0.5); }

/* i18n visibility helper (JS toggles [data-i18n]; fallback hides inactive) */
[hidden] { display: none !important; }

/* =========================================================================
   Mobile menu toggle (hidden on desktop)
   ========================================================================= */
.bb-menu-toggle { display: none; flex-direction: column; gap: 4px; width: 34px; height: 34px; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--neutral-0); cursor: pointer; padding: 0; }
.bb-menu-toggle span { display: block; width: 16px; height: 2px; background: var(--fis-navy); }

/* =========================================================================
   Part dividers (full-bleed navy bands — like the PDF's part covers)
   ========================================================================= */
.bb-part {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: var(--space-8);
  padding: var(--space-16);
  background: var(--fis-navy); color: #fff;
  scroll-margin-top: 80px;
}
.bb-part::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 140% at 100% 0%, rgba(91,194,229,0.22), transparent 60%); }
.bb-part__num { font-size: clamp(5rem, 14vw, 11rem); font-weight: var(--fw-extralight, 200); line-height: 0.8; letter-spacing: -0.04em; color: rgba(255,255,255,0.16); }
.bb-part__body { display: flex; flex-direction: column; gap: var(--space-2); }
.bb-part__kicker { font-size: var(--text-caption); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--fis-blue-200); font-weight: var(--fw-semibold); }
.bb-part__title { font-size: clamp(2rem, 5vw, var(--text-h1)); font-weight: var(--fw-bold, 700); letter-spacing: var(--tracking-tight); margin: 0; color: #ffffff; }
.bb-part__blade { position: absolute; top: 0; right: 0; height: 100%; width: auto; opacity: 1; z-index: 0; pointer-events: none; }
.bb-part__num, .bb-part__body { position: relative; z-index: 1; }

/* =========================================================================
   Prose + trio (1.1 brand core)
   ========================================================================= */
.bb-prose { max-width: 70ch; }
.bb-prose p { font-size: var(--text-body-lg); line-height: var(--leading-relaxed); color: var(--text-secondary); margin: 0 0 var(--space-5); }
.bb-prose p:last-child { margin-bottom: 0; }
.bb-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-12); }
.bb-trio__item { padding: var(--space-6); border-top: 2px solid var(--accent); background: var(--surface-card); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.bb-trio__n { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--accent-strong); }
.bb-trio__item h4 { margin: var(--space-2) 0 var(--space-2); font-size: var(--text-h5); font-weight: var(--fw-semibold); }
.bb-trio__item p { margin: 0; font-size: var(--text-body-sm); line-height: var(--leading-normal); color: var(--text-secondary); }

/* =========================================================================
   Feature statement (1.2 purpose)
   ========================================================================= */
.bb-feature { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--space-12); align-items: center; }
.bb-feature__aside p { font-size: var(--text-body); line-height: var(--leading-relaxed); color: var(--text-secondary); margin: 0 0 var(--space-4); }
.bb-statement { font-size: clamp(1.8rem, 4vw, var(--text-h1)); font-weight: var(--fw-light); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--fis-navy); margin: 0; text-wrap: balance; }
.bb-statement::first-letter { color: inherit; }

/* =========================================================================
   Dark section (1.3 payoff)
   ========================================================================= */
.bb-section--dark { background: var(--fis-navy); color: #fff; }
.bb-eyebrow--on-dark { color: var(--fis-blue-200); }
.bb-lede--on-dark { color: rgba(255,255,255,0.78); }
.bb-payoff-lockup { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: var(--fw-light); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-6); color: #fff; }
.bb-payoff-lockup em { font-style: normal; }
.bb-payoff-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); margin-top: var(--space-12); padding-top: var(--space-10); border-top: 1px solid rgba(255,255,255,0.18); }
.bb-payoff-half h4 { font-size: var(--text-h5); font-weight: var(--fw-semibold); margin: 0 0 var(--space-3); color: var(--fis-blue); }
.bb-payoff-half p { font-size: var(--text-body); line-height: var(--leading-relaxed); color: rgba(255,255,255,0.8); margin: 0; }

/* =========================================================================
   Tone of voice (1.4)
   ========================================================================= */
.bb-tone { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-10); counter-reset: tone; }
.bb-tone li { display: flex; gap: var(--space-5); align-items: flex-start; padding-bottom: var(--space-5); border-bottom: 1px solid var(--border); }
.bb-tone__n { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--text-body); color: var(--fis-navy); background: var(--fis-blue-100); border-radius: 50%; }
.bb-tone h4 { margin: var(--space-1) 0 var(--space-2); font-size: var(--text-body-lg); font-weight: var(--fw-semibold); }
.bb-tone p { margin: 0; font-size: var(--text-body-sm); line-height: var(--leading-relaxed); color: var(--text-secondary); }

/* =========================================================================
   Naming (2.1)
   ========================================================================= */
.bb-namegrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.bb-namecard { padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-card); }
.bb-namecard__tag { font-size: var(--text-caption); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent-strong); margin-bottom: var(--space-2); }
.bb-nameval { font-weight: var(--fw-semibold); color: var(--fis-navy); font-size: var(--text-body-lg); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.bb-nameval--big { font-size: var(--text-h3); letter-spacing: var(--tracking-tight); }
.bb-namecheck { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.bb-namecheck__col { padding: var(--space-5) var(--space-6); border-radius: var(--radius-md); border: 1px solid var(--border); }
.bb-namecheck__col.is-ok { background: var(--success-surface); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.bb-namecheck__col.is-no { background: var(--danger-surface); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.bb-namecheck__head { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-caption); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; margin-bottom: var(--space-3); }
.is-ok .bb-namecheck__head { color: var(--success); }
.is-no .bb-namecheck__head { color: var(--danger); }
.bb-tick, .bb-cross { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; font-size: 11px; color: #fff; }
.bb-tick { background: var(--success); }
.bb-cross { background: var(--danger); }
.bb-namecheck ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.bb-namecheck li { font-size: var(--text-body); font-weight: var(--fw-medium); color: var(--text-primary); }
.is-no li { color: var(--text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--danger) 60%, transparent); }

/* =========================================================================
   Logo specimens (2.2)
   ========================================================================= */
.bb-logo-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); }
.bb-lockup-row { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.bb-lockup { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-6) var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-card); }
.bb-lockup__mark { height: 52px; width: auto; }
.bb-lockup__payoff { font-size: var(--text-caption); font-weight: var(--fw-semibold); letter-spacing: 0.02em; line-height: 1.3; color: var(--fis-navy); padding-left: var(--space-4); border-left: 1px solid var(--border-strong); }

.bb-safezone { display: inline-grid; place-items: center; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4); }
.bb-safezone__pad { padding: 38px; position: relative; outline: 2px dashed var(--fis-blue); outline-offset: -38px; }
.bb-safezone__mark { height: 56px; width: auto; display: block; }

.bb-minsize { display: flex; align-items: flex-end; gap: var(--space-8); padding: var(--space-6); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); }
.bb-minsize__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.bb-minsize__art { display: flex; align-items: center; gap: var(--space-2); }
.bb-minsize__payoff { font-size: 7px; font-weight: var(--fw-semibold); line-height: 1.2; color: var(--fis-navy); padding-left: 6px; border-left: 1px solid var(--border-strong); }
.bb-minsize__lbl { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-muted); }

.bb-bggrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.bb-bgtile { position: relative; aspect-ratio: 4/3; display: grid; place-items: center; border-radius: var(--radius-md); overflow: hidden; }
.bb-bgtile--photo { background: var(--fis-navy); }
.bb-bgtile--photo::before { content: ""; position: absolute; inset: 0; background: url(assets/imagery/plant-aerial-2.png) center/cover; opacity: 0.55; }

.bb-donts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.bb-dont { margin: 0; }
.bb-dont__art { position: relative; height: 120px; display: grid; place-items: center; background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.bb-dont__art::after { content: "✕"; position: absolute; top: 8px; right: 10px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--danger); color: #fff; font-size: 12px; font-weight: 700; }
.bb-dont figcaption { font-size: var(--text-caption); color: var(--text-muted); margin-top: var(--space-3); line-height: var(--leading-normal); }

/* Reversed gradient bar */
.bb-gradient-bar--rev { height: 64px; background: var(--fis-gradient-rev); }
.bb-gradient-bar--rev span:last-child { color: #fff; }

/* =========================================================================
   Type alphabet specimen (2.4)
   ========================================================================= */
.bb-alphabet { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }
.bb-alphabet__col { padding: var(--space-6); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-card); }
.bb-alphabet__spec { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); font-size: clamp(1.1rem, 2.4vw, 1.7rem); letter-spacing: 0.01em; color: var(--fis-navy); line-height: 1.25; }

/* =========================================================================
   Corner frame (2.5.3)
   ========================================================================= */
.bb-cornerframe { position: relative; aspect-ratio: 16 / 7; border-radius: var(--radius-md); overflow: hidden; display: grid; place-items: center; isolation: isolate; }
.bb-cornerframe__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.bb-cornerframe::before { content: ""; position: absolute; inset: 0; background: rgba(6,51,81,0.5); z-index: -1; }
.bb-cornerframe__c { position: absolute; width: clamp(38px, 6.5vw, 78px); aspect-ratio: 202 / 150.7; background: var(--surface-page);
  -webkit-mask: var(--s) center / contain no-repeat; mask: var(--s) center / contain no-repeat; }
.bb-cornerframe__c.tl { top: 0; left: 0; }
.bb-cornerframe__c.tr { top: 0; right: 0; }
.bb-cornerframe__c.bl { bottom: 0; left: 0; }
.bb-cornerframe__c.br { bottom: 0; right: 0; }
.bb-cornerframe__mark { position: relative; height: 56px; width: auto; }

/* =========================================================================
   Applications (3) — index + mockup cards
   ========================================================================= */
.bb-appindex { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-8); }
.bb-appindex__lbl { font-size: var(--text-caption); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-faint); margin-right: var(--space-2); }
.bb-appindex a { font-family: var(--font-mono); font-size: var(--text-caption); text-decoration: none; color: var(--fis-navy); padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: background var(--dur-1) var(--ease-standard); }
.bb-appindex a:hover { background: var(--fis-blue-100); border-color: var(--accent); }

.bb-app { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-12) 0; border-top: 1px solid var(--border); scroll-margin-top: 80px; }
.bb-app__head { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.bb-app__art { order: 3; width: 100%; display: grid; place-items: center; padding: clamp(var(--space-4), 3vw, var(--space-10)); background: var(--surface-subtle); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.bb-app__shot { display: block; width: 100%; max-width: 1180px; height: auto; border-radius: var(--radius-sm); }
.bb-app__body { order: 1; }
.bb-app__num { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--accent-strong); }
.bb-app__body h3 { font-size: var(--text-h4); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); margin: var(--space-2) 0 var(--space-3); }
.bb-app__body p { font-size: var(--text-body); line-height: var(--leading-relaxed); color: var(--text-secondary); margin: 0 0 var(--space-5); max-width: 46ch; }
.bb-app__spec { display: inline-block; font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-muted); padding: var(--space-1) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-pill); }

/* ---- Shared lockup (monogram + payoff), used across all mockups ------- */
.mk-lock { display: flex; align-items: center; gap: 7px; }
.mk-lock img { height: 24px; width: auto; }
.mk-lock__pay { font-size: 6px; font-weight: var(--fw-semibold); line-height: 1.25; color: var(--fis-navy); white-space: nowrap; }
.mk-lock--sm img { height: 18px; }
.mk-lock--sm .mk-lock__pay { font-size: 5px; }
.mk-lock--white .mk-lock__pay { color: #fff; }
.mk-lock--stack { flex-direction: column; gap: 8px; text-align: center; }
.mk-lock--stack img { height: 30px; }
.mk-lock--stack .mk-lock__pay { white-space: normal; font-size: 7px; }

.mk-lines { display: flex; flex-direction: column; gap: 4px; }
.mk-lines span { display: block; height: 2.5px; width: 100%; background: var(--neutral-200); border-radius: 2px; }

/* Paper (letterhead / press) — A4 */
.mk-paper { width: 232px; aspect-ratio: 210/297; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 18px 16px; display: flex; flex-direction: column; gap: 9px; position: relative; }
.mk-paper__top { display: flex; align-items: flex-start; justify-content: space-between; }
.mk-paper__date { font-size: 5px; color: var(--text-muted); text-align: right; line-height: 1.4; font-family: var(--font-mono); }
.mk-paper__h { font-size: 6.5px; font-weight: var(--fw-semibold); color: var(--fis-navy); margin-top: 2px; }
.mk-paper__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.mk-paper__legal { display: flex; flex-direction: column; gap: 1.5px; }
.mk-paper__legal b { font-size: 4.5px; color: var(--fis-navy); }
.mk-paper__legal span { font-size: 4px; color: var(--text-muted); line-height: 1.3; }
.mk-paper__certs { display: flex; gap: 5px; align-items: center; }
.mk-cert { font-size: 6px; font-weight: var(--fw-bold); color: var(--fis-navy); font-family: var(--font-mono); }
.mk-cert--q { width: 15px; height: 15px; background: repeating-conic-gradient(var(--fis-navy) 0 25%, #fff 0 50%) 0 0 / 5px 5px; border: 1px solid var(--fis-navy); }
.mk-press__about { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.mk-press__about b { font-size: 5px; letter-spacing: 0.08em; color: var(--fis-navy); font-weight: var(--fw-bold); }
.mk-press__about p { font-size: 4px; line-height: 1.45; color: var(--text-muted); margin: 0; }
.mk-press__info { margin-top: 7px; display: flex; flex-direction: column; gap: 1px; }
.mk-press__info b { font-size: 4.5px; color: var(--fis-navy); }
.mk-press__info span { font-size: 4px; color: var(--text-muted); }

/* Envelopes */
.mk-envstack { display: flex; flex-direction: column; gap: 18px; align-items: center; }
.mk-env { background: #fff; border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); position: relative; padding: 14px 16px; display: flex; flex-direction: column; justify-content: space-between; }
.mk-env--c5 { width: 300px; aspect-ratio: 220/110; }
.mk-env--c4 { width: 300px; aspect-ratio: 329/229; }
.mk-env__addr { display: flex; flex-direction: column; gap: 1px; }
.mk-env__addr b { font-size: 5px; color: var(--fis-navy); }
.mk-env__addr span { font-size: 4.5px; color: var(--text-muted); }

/* Business cards */
.mk-cards { display: flex; flex-direction: column; gap: 22px; }
.mk-card { width: 300px; aspect-ratio: 85/55; border-radius: 2px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; background: #fff; }
.mk-card--front { display: grid; grid-template-columns: 1.12fr 0.88fr; }
.mk-card__info { padding: 15px 14px; display: flex; flex-direction: column; gap: 0.5px; }
.mk-card__info b { font-size: 9px; color: var(--fis-navy); font-weight: var(--fw-semibold); }
.mk-card__role { font-size: 7px; color: var(--fis-navy); }
.mk-card__sp { margin-top: 6px; }
.mk-card__info span { font-size: 5px; color: var(--neutral-700); line-height: 1.4; }
.mk-card__co { font-size: 5.5px; color: var(--fis-navy); font-weight: var(--fw-semibold); margin-top: 6px; }
.mk-card__web { color: var(--accent-strong); font-weight: var(--fw-semibold); margin-top: 3px; }
.mk-card__art { position: relative; overflow: hidden; }
.mk-card__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-card__art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(108deg, #fff 0%, rgba(255,255,255,0.5) 24%, transparent 46%); }
.mk-card__mono { inset: auto !important; top: 10px !important; right: 10px !important; left: auto !important; width: auto !important; height: 16px !important; z-index: 2; }
.mk-card__tag { position: absolute; bottom: 5px; right: 7px; font-size: 5.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.9); z-index: 3; }
.mk-card--back { display: grid; place-items: center; background: #fff; }
.mk-card--back .mk-card__tag { color: var(--text-muted); }

/* Badges — 85×55 landscape */
.mk-badges { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.mk-badge2 { width: 224px; aspect-ratio: 85/55; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-lg); position: relative; overflow: visible; }
.mk-badge2 figcaption { position: absolute; bottom: -13px; left: 0; font-size: 6px; color: var(--text-muted); }
.mk-badge2__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-badge2 .mk-lock { position: absolute; top: 12px; left: 12px; z-index: 2; }
.mk-badge2__photo { position: absolute; right: 16px; top: 46%; transform: translateY(-40%); width: 56px; height: 62px; background: rgba(244,247,248,0.82); display: grid; place-items: center; font-size: 7px; color: var(--neutral-600); z-index: 2; }
.mk-badge2__id { position: absolute; left: 12px; bottom: 12px; z-index: 2; }
.mk-badge2__id b { font-size: 11px; color: var(--fis-navy); line-height: 1.04; display: block; }
.mk-badge2__id span { font-size: 7px; color: var(--fis-navy); font-family: var(--font-mono); }
.mk-badge2__wave { position: absolute; right: 0; top: -25%; height: 150%; width: 52%; background: var(--fis-gradient-diagonal); border-radius: 60% 0 0 60% / 50% 0 0 50%; }

/* PPT cover — 16:9 */
.mk-cover { width: 332px; aspect-ratio: 16/9; display: grid; grid-template-columns: 42% 58%; border-radius: 3px; overflow: hidden; box-shadow: var(--shadow-lg); background: var(--fis-navy); }
.mk-cover__panel { position: relative; }
.mk-cover__logo { position: absolute; top: 12px; left: 13px; height: 17px; z-index: 3; }
.mk-cover__txt { position: absolute; left: 13px; bottom: 13px; z-index: 3; }
.mk-cover__txt b { display: block; font-size: 17px; font-weight: var(--fw-light); color: #fff; line-height: 1.0; }
.mk-cover__txt span { display: block; font-size: 8px; color: #fff; margin-top: 9px; line-height: 1.3; }
.mk-cover__txt small { font-size: 6.5px; color: var(--fis-blue-200); }
.mk-cover__media { position: relative; overflow: hidden; }
.mk-cover__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-cover__blade { position: absolute; inset: 0; background: var(--fis-navy); clip-path: polygon(0 0, 34% 0, 0 100%); }
.mk-cover__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(6,51,81,0.45), transparent 55%); }

/* PPT dividers — 2×2 */
.mk-divgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 340px; }
.mk-div { aspect-ratio: 16/9; background: #fff; border: 1px solid var(--border); border-radius: 3px; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); }
.mk-div__shape { position: absolute; inset: 5px; -webkit-mask: var(--s) left center / contain no-repeat; mask: var(--s) left center / contain no-repeat; }
.mk-div__shape--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-div__txt { position: absolute; top: 13px; left: 15px; z-index: 2; }
.mk-div__txt b { display: block; font-size: 11px; font-weight: var(--fw-semibold); color: #fff; }
.mk-div__txt span { font-size: 6px; color: rgba(255,255,255,0.82); }
.mk-div__txt--ondark b, .mk-div__txt--ondark span { color: var(--fis-navy); }
.mk-div__mono { position: absolute; top: 8px; right: 8px; height: 13px; z-index: 2; filter: brightness(0) invert(1); }
.mk-div:nth-child(2) .mk-div__mono { filter: none; }

/* Brochure */
.mk-broc { width: 344px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mk-broc__num, .mk-broc__lines { background: var(--fis-navy); border-radius: 3px; aspect-ratio: 1/1; padding: 14px; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.mk-broc__num > b { font-size: 14px; font-weight: var(--fw-light); color: #fff; line-height: 1.05; }
.mk-broc__figs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 8px; margin-top: auto; }
.mk-fig b { display: block; font-size: 13px; font-weight: var(--fw-semibold); color: #fff; letter-spacing: -0.01em; }
.mk-fig span { font-size: 5.5px; color: var(--fis-blue-200); display: block; }
.mk-fig em { font-size: 4.5px; color: rgba(255,255,255,0.6); font-style: normal; }
.mk-broc__mol { position: absolute; right: -14px; top: -8px; width: 66%; opacity: 0.92; }
.mk-broc__bl { margin-top: auto; position: relative; z-index: 1; }
.mk-broc__bl b { display: block; font-size: 9px; color: #fff; font-weight: var(--fw-light); margin-bottom: 4px; }
.mk-broc__bl span { display: block; font-size: 5.5px; color: var(--fis-blue-200); }

/* Promotional */
.mk-promo2 { display: flex; gap: 12px; align-items: stretch; }
.mk-promo2__chips { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.mk-promo2__chips span { width: 26px; height: 32px; -webkit-mask: url(assets/shapes/cut-br.svg) center / contain no-repeat; mask: url(assets/shapes/cut-br.svg) center / contain no-repeat; }
.mk-poster { position: relative; width: 96px; aspect-ratio: 3/4; border-radius: 2px; overflow: hidden; margin: 0; box-shadow: var(--shadow-md); }
.mk-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-poster__sh { position: absolute; left: 0; top: 0; right: 0; height: 56%; clip-path: polygon(0 0, 100% 0, 100% 68%, 0 100%); z-index: 1; }
.mk-poster figcaption { position: absolute; top: 9px; left: 8px; right: 8px; z-index: 2; text-align: right; }
.mk-poster figcaption b { display: block; font-size: 13px; font-weight: var(--fw-light); color: #fff; }
.mk-poster figcaption span { font-size: 4.5px; color: rgba(255,255,255,0.92); }
.mk-poster__cap--low { top: auto !important; bottom: 22px; text-align: left; }

/* Email signatures */
.mk-sigs { display: flex; flex-direction: column; gap: 16px; }
.mk-sig2 { width: 300px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-md); padding: 15px 17px; }
.mk-sig2 .mk-lock { margin-bottom: 10px; }
.mk-sig2__body { display: flex; flex-direction: column; gap: 1px; }
.mk-sig2__body b { font-size: 8px; color: var(--accent-strong); font-weight: var(--fw-semibold); }
.mk-sig2__body span { font-size: 6px; color: var(--neutral-700); }
.mk-sig2__sp { margin-top: 5px; }
.mk-sig2__web { color: var(--accent-strong) !important; font-weight: var(--fw-semibold); margin-top: 3px; }
.mk-sig2__evt { margin-bottom: 10px; }
.mk-sig2__evtlogo { display: none; }
.mk-sig2__evtbanner { display: block; width: 100%; height: auto; border-radius: 2px; }

/* LinkedIn */
.mk-li { display: flex; flex-direction: column; gap: 14px; }
.mk-li__banner { width: 332px; aspect-ratio: 1584/396; object-fit: cover; border-radius: 3px; box-shadow: var(--shadow-sm); }
.mk-li__posts { display: flex; gap: 16px; }
.mk-li__post { width: 158px; aspect-ratio: 1/1; border-radius: 3px; overflow: hidden; position: relative; box-shadow: var(--shadow-md); }
.mk-li__post--navy { background: var(--fis-navy); }
.mk-li__logo { position: absolute; top: 12px; right: 12px; height: 15px; z-index: 3; filter: brightness(0) invert(1); }
.mk-li__shapeimg { position: absolute; left: 14px; bottom: 32px; width: 58px; height: 64px; -webkit-mask: var(--s) center / contain no-repeat; mask: var(--s) center / contain no-repeat; }
.mk-li__shapeimg img { width: 100%; height: 100%; object-fit: cover; }
.mk-li__txt { position: absolute; left: 14px; bottom: 12px; z-index: 2; }
.mk-li__txt b { display: block; font-size: 13px; color: #fff; font-weight: var(--fw-semibold); }
.mk-li__txt span { font-size: 7px; color: var(--fis-blue-200); }
.mk-li__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-li__diag { position: absolute; inset: 0; background: linear-gradient(118deg, rgba(6,51,81,0.82) 32%, transparent 72%); }

/* Videocall backgrounds */
.mk-vcgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 340px; }
.mk-vc { aspect-ratio: 16/9; border-radius: 3px; overflow: hidden; position: relative; box-shadow: var(--shadow-sm); background: var(--fis-navy); }
.mk-vc--grad { background: var(--fis-gradient-diagonal); }
.mk-vc__mol { position: absolute; right: -6px; top: 0; height: 100%; opacity: 0.92; }
.mk-vc__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mk-vc__diag { position: absolute; inset: 0; background: linear-gradient(108deg, rgba(6,51,81,0.9) 36%, transparent 70%); }
.mk-vc .mk-lock { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 2; }
.mk-vc .mk-lock--r { left: auto; right: 12px; }

/* Fair booth — real renders */
.mk-booths { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 344px; }
.mk-booths img { width: 100%; border-radius: 3px; box-shadow: var(--shadow-sm); background: var(--surface-subtle); display: block; }
.mk-booths img:first-child { grid-column: 1 / -1; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 980px) {
  .bb-shell { grid-template-columns: 1fr; }
  .bb-menu-toggle { display: flex; }
  .bb-sidebar {
    position: fixed; top: 66px; left: 0; bottom: 0; width: 280px; z-index: 48;
    background: var(--surface-page); border-right: 1px solid var(--border);
    transform: translateX(-100%); transition: transform var(--dur-2) var(--ease-standard);
    display: block;
  }
  .bb-sidebar.is-open { transform: translateX(0); box-shadow: var(--shadow-xl); }
  .bb-section, .bb-footer, .bb-part, .bb-section--dark { padding-left: var(--space-8); padding-right: var(--space-8); }
  .bb-rules, .bb-trio, .bb-tone, .bb-namegrid, .bb-namecheck, .bb-logo-duo, .bb-alphabet, .bb-payoff-split, .bb-feature, .bb-donts { grid-template-columns: 1fr; }
  .bb-feature { gap: var(--space-8); }
  .bb-photogrid { grid-template-columns: 1fr 1fr; }
  .bb-app { gap: var(--space-5); }
  .bb-bggrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .bb-topbar__title { display: none; }
  .bb-typerow { grid-template-columns: 1fr; gap: var(--space-2); }
  .bb-photogrid { grid-template-columns: 1fr; }
  .bb-trio, .bb-donts { grid-template-columns: 1fr; }
  .bb-badges, .mk-badges { flex-wrap: wrap; }
  .bb-part { padding: var(--space-10) var(--space-8); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* =========================================================================
   Part 4 — Toolkit / downloadable assets
   ========================================================================= */
.bb-section--tint { background: var(--surface-sunken); }

.bb-toolkit { display: flex; flex-direction: column; gap: var(--space-12); margin-top: var(--space-12); }
.bb-toolkit__grouphead {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-strong);
}
.bb-toolkit__groupnum {
  font-family: var(--font-mono); font-weight: 500;
  font-size: var(--text-body); color: var(--fis-blue-600); letter-spacing: 0.02em;
}
.bb-toolkit__grouptitle {
  font-size: var(--text-h4); font-weight: 700; color: var(--fis-navy);
  letter-spacing: -0.01em; margin: 0;
}
.bb-toolkit__grouptitle small {
  font-family: var(--font-sans); margin-left: var(--space-3);
  font-size: var(--text-body-sm); font-weight: 400; color: var(--text-muted); letter-spacing: 0;
}

.bb-dlgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: var(--space-4); }
.bb-dl {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  aspect-ratio: 236.08 / 127.14;
  padding: 16px 26px;
  text-decoration: none; color: inherit;
  transition: transform 160ms ease;
}
.bb-dl__frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.bb-dl__frame path { fill: var(--neutral-0); stroke: #ebeff0; stroke-width: 1; transition: fill 160ms ease, stroke 160ms ease; }
.bb-dl:hover { transform: translateY(-3px); text-decoration: none; }
.bb-dl:hover .bb-dl__frame path { fill: var(--fis-blue-100); stroke: var(--fis-blue); }
.bb-dl:focus-visible { outline: none; }
.bb-dl:focus-visible .bb-dl__frame path { stroke: var(--fis-blue-500); stroke-width: 2; }
.bb-dl__num { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-faint); letter-spacing: 0.06em; }
.bb-dl__name { font-size: var(--text-body); font-weight: 700; color: var(--fis-navy); line-height: 1.18; letter-spacing: -0.01em; }
.bb-dl__fmt { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.07em; }
.bb-dl__cta { margin-top: 4px; display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-body-sm); font-weight: 600; color: var(--fis-blue-700); }
.bb-dl__cta svg { width: 15px; height: 15px; transition: transform 160ms ease; }
.bb-dl:hover .bb-dl__cta svg { transform: translateY(2px); }

@media (max-width: 560px) {
  .bb-dlgrid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .bb-dl { padding: 12px 20px; gap: 4px; }
}