/* =========================================================
   LANGKAH KUDA — ABOUT / TENTANG
   Canonical stylesheet

   Design language:
   Editorial Museum / Project Logos

   Architecture:
   01 Tokens + page wall
   02 Typography
   03 Hero
   04 Opening
   05 Numbered editorial sections
   06 Logos exhibit
   07 Principles gallery
   08 Closing statement
   09 Support panel
   10 Founder / Tim Perintis
   10A Desktop editorial rail
   11 Dark mode
   12 Responsive

   No legacy About cascade.
   No !important.
   ========================================================= */


/* 01. TOKENS + PAGE WALL */

.lk-about-page {
  --about-ink: #2b1a16;
  --about-brown: #493126;
  --about-muted: #76584c;
  --about-burgundy: #6f263d;
  --about-burgundy-deep: #4d1728;
  --about-gold: #b8925f;
  --about-gold-soft: #d8c3a5;
  --about-paper: #fffdf8;
  --about-ivory: #f7efe2;
  --about-wall: #f2ebe2;
  --about-line: rgba(73, 49, 38, .16);
  --about-line-strong: rgba(73, 49, 38, .24);
  --about-shadow: 0 20px 48px rgba(47, 30, 24, .09);

  position: relative;
  isolation: isolate;
  width: min(1180px, calc(100% - 36px));
  margin: 28px auto 88px;
  color: var(--about-brown);
}

.lk-about-page::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: -28px;
  bottom: -88px;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background:
    radial-gradient(
      circle at 9% 6%,
      rgba(184, 146, 95, .11),
      transparent 30rem
    ),
    radial-gradient(
      circle at 92% 33%,
      rgba(111, 38, 61, .055),
      transparent 34rem
    ),
    linear-gradient(
      180deg,
      #f7f3ec 0%,
      var(--about-wall) 48%,
      #f6f0e8 100%
    );
}


/* 02. TYPOGRAPHY */

.lk-about-page {
  font-optical-sizing: auto;
}

.lk-about-page h1,
.lk-about-page h2,
.lk-about-page h3,
.lk-about-page h4,
.lk-about-page strong {
  font-family: var(--font-display), Arial, sans-serif;
  text-wrap: balance;
}

.lk-about-page p,
.lk-about-page li,
.lk-about-page blockquote {
  font-family: var(--font-body), Georgia, serif;
  text-wrap: pretty;
}

.lk-about-eyebrow,
.lk-about-section-label span,
.lk-about-opening-kicker,
.lk-name-reveal-label,
.lk-founding-grid p {
  font-family: var(--font-mono), monospace;
}

.lk-about-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--about-burgundy);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.lk-about-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  flex: 0 0 auto;
  background: currentColor;
}


/* 03. HERO */

.lk-about-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(26px, 5vw, 56px);
  padding:
    clamp(38px, 5vw, 60px)
    clamp(28px, 5vw, 62px);
  color: #fffaf0;
  border: 1px solid rgba(216, 195, 165, .28);
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 88% 10%,
      rgba(184, 146, 95, .21),
      transparent 30%
    ),
    radial-gradient(
      circle at 4% 100%,
      rgba(111, 38, 61, .34),
      transparent 41%
    ),
    linear-gradient(
      137deg,
      #2d1917 0%,
      #4a3027 58%,
      #642d3f 100%
    );
  box-shadow: 0 24px 58px rgba(47, 30, 24, .16);
}

.lk-about-hero::before {
  content: "";
  position: absolute;
  top: -155px;
  right: -115px;
  width: 330px;
  aspect-ratio: 1;
  border: 1px solid rgba(231, 189, 114, .12);
  border-radius: 50%;
}

.lk-about-hero-copy {
  position: relative;
  z-index: 1;
}

.lk-about-hero .lk-about-eyebrow {
  color: var(--about-gold-soft);
}

.lk-about-hero h1 {
  max-width: 760px;
  margin: 10px 0 15px;
  color: #fffaf0;
  font-size: clamp(44px, 6.4vw, 76px);
  font-weight: 760;
  line-height: .95;
  letter-spacing: -.052em;
}

.lk-about-hero p {
  max-width: 62ch;
  margin: 0;
  color: rgba(255, 250, 240, .82);
  font-size: clamp(16px, 1.45vw, 18px);
  line-height: 1.66;
}

.lk-about-knight {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 118px;
}


/* 04. OPENING */

.lk-about-opening {
  position: relative;
  overflow: hidden;
  margin-top: 24px;
  padding:
    clamp(42px, 6vw, 68px)
    clamp(26px, 5vw, 58px);
  border: 1px solid rgba(73, 49, 38, .13);
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 94% 4%,
      rgba(111, 38, 61, .055),
      transparent 29%
    ),
    linear-gradient(
      145deg,
      rgba(255, 253, 248, .98),
      rgba(247, 239, 226, .91)
    );
  box-shadow: var(--about-shadow);
}

.lk-about-opening::before {
  content: "";
  position: absolute;
  top: -165px;
  right: -120px;
  width: 315px;
  aspect-ratio: 1;
  border: 1px solid rgba(111, 38, 61, .10);
  border-radius: 50%;
}

.lk-about-opening-kicker {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--about-burgundy);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lk-about-opening-kicker b {
  color: rgba(73, 49, 38, .15);
  font-family: var(--font-display), Arial, sans-serif;
  font-size: 42px;
  line-height: 1;
}

.lk-about-lead {
  position: relative;
  z-index: 1;
  max-width: 17ch;
  margin: 20px 0 38px;
  color: var(--about-ink);
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 690;
  line-height: 1.01;
  letter-spacing: -.045em;
}

.lk-about-opening-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
  gap: clamp(38px, 6vw, 82px);
}

.lk-about-opening-grid p,
.lk-about-move-copy p {
  margin: 0;
  color: var(--about-muted);
  font-size: 17px;
  line-height: 1.80;
}

.lk-about-name-reveal {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 42px);
  color: #fffaf0;
  border: 1px solid rgba(231, 189, 114, .20);
  border-radius: 20px;
  background:
    radial-gradient(
      circle at 91% 7%,
      rgba(231, 189, 114, .14),
      transparent 29%
    ),
    linear-gradient(145deg, #322019, #5a3b30);
  box-shadow:
    9px 10px 0 rgba(111, 38, 61, .07),
    0 20px 44px rgba(43, 26, 22, .15);
}

.lk-name-reveal-label {
  color: var(--about-gold-soft);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.lk-about-name-reveal blockquote {
  margin: 22px 0 16px;
  color: #fffaf0;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 620;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.lk-about-name-reveal blockquote strong {
  color: #e7bd72;
}

.lk-about-name-reveal > p {
  max-width: 630px;
  margin: 0;
  color: rgba(255, 250, 240, .75);
  font-size: 14px;
  line-height: 1.75;
}


/* 05. NUMBERED EDITORIAL SECTIONS */

.lk-about-manifesto,
.lk-about-fields {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: clamp(30px, 6vw, 72px);
  margin-top: 24px;
  padding:
    clamp(50px, 7vw, 78px)
    clamp(26px, 5vw, 56px);
  border-top: 1px solid var(--about-line);
  border-bottom: 1px solid var(--about-line);
  background:
    linear-gradient(
      90deg,
      rgba(255, 253, 248, .68),
      rgba(248, 241, 231, .42)
    );
}

.lk-about-fields {
  background:
    linear-gradient(
      90deg,
      rgba(239, 228, 217, .52),
      rgba(255, 253, 248, .62)
    );
}

.lk-about-section-label {
  color: var(--about-burgundy);
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 760;
  line-height: 1;
}

.lk-about-section-label span {
  display: block;
  margin-top: 12px;
  color: var(--about-muted);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.lk-about-prose {
  max-width: 70ch;
}

.lk-about-prose h2 {
  margin: 0 0 24px;
  color: var(--about-ink);
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 720;
  line-height: .99;
  letter-spacing: -.045em;
}

.lk-about-prose p {
  margin: 0;
  color: var(--about-muted);
  font-size: 17px;
  line-height: 1.80;
}

.lk-about-prose p + p {
  margin-top: 20px;
}

.lk-about-prose blockquote {
  margin: 34px 0 0;
  padding: 23px 28px;
  color: var(--about-brown);
  border-left: 3px solid var(--about-burgundy);
  background: rgba(234, 223, 206, .64);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
}


/* 06. LOGOS EXHIBIT */

.lk-logos-section {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: center;
  gap: clamp(30px, 6vw, 70px);
  margin-top: 24px;
  padding:
    clamp(36px, 5vw, 54px)
    clamp(28px, 5vw, 58px);
  border: 1px solid rgba(73, 49, 38, .14);
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 8% 12%,
      rgba(184, 146, 95, .12),
      transparent 27%
    ),
    linear-gradient(145deg, #fffdf8, #f2e8dc);
  box-shadow: var(--about-shadow);
}

.lk-logos-mark {
  display: grid;
  place-items: center;
  width: 190px;
  aspect-ratio: 1;
  margin: 0 auto;
  border: 1px solid rgba(184, 146, 95, .48);
  border-radius: 28px;
  background:
    radial-gradient(
      circle at 31% 23%,
      #fff 0%,
      #f8edd8 38%,
      #dfba78 74%,
      #8c523d 100%
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .86),
    0 20px 42px rgba(54, 31, 23, .17);
}

.lk-logos-lambda-svg {
  display: block;
  width: 132px;
  max-width: 100%;
}

.lk-logos-section h2 {
  max-width: 760px;
  margin: 0 0 22px;
  color: var(--about-burgundy-deep);
  font-size: clamp(34px, 4.5vw, 50px);
  font-weight: 720;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.lk-logos-section p {
  max-width: 760px;
  margin: 0;
  color: var(--about-muted);
  font-size: 16px;
  line-height: 1.76;
}

.lk-logos-section p + p {
  margin-top: 18px;
}


/* 07. PRINCIPLES GALLERY */

.lk-about-principles {
  margin-top: 24px;
  padding:
    clamp(48px, 7vw, 74px)
    clamp(18px, 3vw, 32px);
  background:
    radial-gradient(
      circle at 87% 16%,
      rgba(184, 146, 95, .11),
      transparent 28rem
    );
}

.lk-about-principles > header {
  max-width: 790px;
  margin-bottom: 30px;
}

.lk-about-principles h2 {
  margin: 12px 0 0;
  color: var(--about-ink);
  font-size: clamp(33px, 4.6vw, 52px);
  font-weight: 720;
  line-height: 1.02;
  letter-spacing: -.04em;
}

.lk-principle-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
}

.lk-principle-grid article {
  display: flex;
  min-width: 0;
  min-height: 230px;
  flex-direction: column;
  padding: 28px 26px 30px;
  border: 1px solid var(--about-line);
  border-radius: 18px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 253, 248, .78),
      rgba(248, 240, 229, .58)
    );
  transition:
    transform .18s ease,
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}

.lk-principle-grid article:nth-child(4n + 1),
.lk-principle-grid article:nth-child(4n + 4) {
  grid-column: span 5;
}

.lk-principle-grid article:nth-child(4n + 2),
.lk-principle-grid article:nth-child(4n + 3) {
  grid-column: span 7;
}

.lk-principle-grid article:nth-child(even) {
  background:
    linear-gradient(
      145deg,
      rgba(239, 228, 217, .74),
      rgba(255, 253, 248, .70)
    );
}

.lk-principle-grid strong {
  color: var(--about-burgundy);
  font-family: var(--font-mono), monospace;
  font-size: 10px;
  letter-spacing: .10em;
}

.lk-principle-grid h3 {
  margin: auto 0 12px;
  padding-top: 44px;
  color: var(--about-ink);
  font-size: clamp(23px, 2.3vw, 30px);
  font-weight: 690;
  line-height: 1.10;
  letter-spacing: -.025em;
}

.lk-principle-grid p {
  max-width: 40ch;
  margin: 0;
  color: var(--about-muted);
  font-size: 14px;
  line-height: 1.72;
}

@media (hover: hover) and (pointer: fine) {
  .lk-principle-grid article:hover {
    position: relative;
    z-index: 1;
    transform: translateY(-4px);
    border-color: rgba(111, 38, 61, .24);
    background: rgba(255, 253, 248, .94);
    box-shadow: 0 18px 38px rgba(54, 31, 23, .11);
  }
}


/* 08. CLOSING */

.lk-about-closing {
  margin-top: 24px;
  padding:
    clamp(46px, 6vw, 68px)
    clamp(28px, 6vw, 70px);
  text-align: center;
  border: 1px solid rgba(73, 49, 38, .14);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 253, 248, .96),
      rgba(247, 239, 226, .90)
    );
  box-shadow: 0 14px 34px rgba(47, 30, 24, .07);
}

.lk-about-closing p {
  max-width: 820px;
  margin: 0 auto 22px;
  color: var(--about-muted);
  font-size: 17px;
  line-height: 1.76;
}

.lk-about-closing strong {
  display: block;
  max-width: 900px;
  margin: 0 auto;
  color: var(--about-ink);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -.03em;
}


/* 09. SUPPORT */

.lk-about-support {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 350px);
  align-items: center;
  gap: 34px;
  margin-top: 24px;
  padding: clamp(34px, 5vw, 54px);
  color: #fffaf0;
  border: 1px solid rgba(231, 189, 114, .24);
  border-radius: 22px;
  background:
    radial-gradient(
      circle at 4% 100%,
      rgba(111, 38, 61, .20),
      transparent 38%
    ),
    linear-gradient(135deg, #5a3a2f, #2f1b17);
  box-shadow: 0 22px 50px rgba(47, 30, 24, .15);
}

.lk-about-support .lk-about-eyebrow {
  color: var(--about-gold-soft);
}

.lk-about-support h2 {
  margin: 10px 0 16px;
  color: #fffaf0;
  font-size: clamp(31px, 4vw, 46px);
  font-weight: 720;
  line-height: 1.04;
  letter-spacing: -.035em;
}

.lk-about-support-copy p {
  max-width: 660px;
  margin: 0;
  color: rgba(255, 250, 240, .76);
  font-size: 15px;
  line-height: 1.74;
}

.lk-support-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 22px;
  padding: 10px 18px;
  color: #fffdf8;
  border: 1px solid var(--about-burgundy);
  border-radius: 8px;
  background: var(--about-burgundy);
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  transition:
    background-color .18s ease,
    border-color .18s ease,
    transform .18s ease;
}

.lk-support-primary:hover,
.lk-support-primary:focus-visible {
  transform: translateY(-1px);
  border-color: #8b3b50;
  background: #8b3b50;
}

.lk-about-bank,
.lk-bank-modern-card {
  min-width: 0;
  padding: 20px;
  color: var(--about-brown);
  border: 1px solid rgba(184, 146, 95, .42);
  border-radius: 16px;
  background: linear-gradient(145deg, #fffdf8, #f8f0e4);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .12);
}

.lk-about-bank span,
.lk-bank-modern-card span,
.lk-about-bank small,
.lk-bank-modern-card small {
  color: var(--about-muted);
}

.lk-about-bank strong,
.lk-about-bank b,
.lk-bank-modern-card strong,
.lk-bank-modern-card b {
  color: var(--about-burgundy-deep);
}


/* 10. FOUNDER / TIM PERINTIS */

.lk-about-founders {
  position: relative;
  overflow: hidden;
  margin-top: 24px;
  padding:
    clamp(40px, 5vw, 58px)
    clamp(28px, 5vw, 58px);
  border: 1px solid rgba(73, 49, 38, .15);
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(255, 253, 248, .98),
      rgba(239, 228, 216, .82)
    );
  box-shadow: var(--about-shadow);
}

.lk-about-founders::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(28px, 5vw, 58px);
  width: 74px;
  height: 3px;
  background:
    linear-gradient(
      90deg,
      var(--about-burgundy),
      var(--about-gold)
    );
}

.lk-about-founders h2 {
  margin: 10px 0 14px;
  color: var(--about-ink);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 720;
  line-height: 1.04;
  letter-spacing: -.035em;
}

.lk-about-founders > p {
  max-width: 820px;
  margin: 0;
  color: var(--about-muted);
  font-size: 16px;
  line-height: 1.76;
}

.lk-founding-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(22px, 4vw, 42px);
  margin-top: 32px;
}

.lk-founding-grid article {
  padding-top: 19px;
  border-top: 1px solid var(--about-line-strong);
}

.lk-founding-grid p {
  margin: 0;
  color: var(--about-burgundy);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.lk-founding-grid h3 {
  margin: 8px 0 0;
  color: var(--about-ink);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 690;
  line-height: 1.18;
  letter-spacing: -.02em;
}

.lk-founding-team {
  margin-top: 32px;
  padding-top: 23px;
  border-top: 1px solid var(--about-line);
}

.lk-founding-team > p {
  margin: 0;
  color: var(--about-burgundy);
  font-family: var(--font-mono), monospace;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.lk-founding-team ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 32px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.lk-founding-team li {
  position: relative;
  padding-left: 18px;
  color: var(--about-brown);
  font-size: 15px;
  line-height: 1.55;
}

.lk-founding-team li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid var(--about-gold);
  transform: rotate(45deg);
}


/* 10A. DESKTOP EDITORIAL RAIL */

@media (min-width: 901px) {
  .lk-about-section-label {
    position: sticky;
    top: 94px;
    align-self: start;
  }

  .lk-about-manifesto .lk-about-prose,
  .lk-about-fields .lk-about-prose {
    padding-right: clamp(16px, 4vw, 52px);
  }
}


/* 11. DARK MODE */

html[data-theme="malam"] .lk-about-page {
  --about-ink: #f6e8d1;
  --about-brown: #dec7a5;
  --about-muted: #c8b198;
  --about-burgundy: #df6259;
  --about-burgundy-deep: #efb36e;
  --about-gold: #e7bd72;
  --about-gold-soft: #e4c48b;
  --about-paper: #1e242b;
  --about-ivory: #191e24;
  --about-wall: #11100f;
  --about-line: rgba(255, 245, 232, .13);
  --about-line-strong: rgba(255, 245, 232, .21);
  --about-shadow: 0 22px 52px rgba(0, 0, 0, .24);
}

html[data-theme="malam"] .lk-about-page::before {
  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(231, 189, 114, .055),
      transparent 32rem
    ),
    linear-gradient(180deg, #10100f, #17120f 55%, #10100f);
}

html[data-theme="malam"] .lk-about-opening,
html[data-theme="malam"] .lk-about-closing,
html[data-theme="malam"] .lk-about-founders {
  border-color: var(--about-line);
  background: linear-gradient(145deg, #1e242b, #191e24);
}

html[data-theme="malam"] .lk-about-opening::before {
  border-color: rgba(231, 189, 114, .08);
}

html[data-theme="malam"] .lk-about-opening-kicker b {
  color: rgba(246, 232, 209, .13);
}

html[data-theme="malam"] .lk-about-manifesto,
html[data-theme="malam"] .lk-about-fields {
  border-color: var(--about-line);
  background:
    linear-gradient(
      90deg,
      rgba(30, 36, 43, .72),
      rgba(25, 30, 36, .48)
    );
}

html[data-theme="malam"] .lk-about-prose blockquote {
  color: #ddc8aa;
  border-left-color: #df6259;
  background: #24282c;
}

html[data-theme="malam"] .lk-logos-section {
  border-color: var(--about-line);
  background: linear-gradient(145deg, #1e242b, #191e24);
}

html[data-theme="malam"] .lk-logos-section h2 {
  color: #f6e8d1;
}

html[data-theme="malam"] .lk-logos-section p {
  color: #c8b198;
}

html[data-theme="malam"] .lk-about-principles {
  background:
    radial-gradient(
      circle at 87% 16%,
      rgba(231, 189, 114, .055),
      transparent 28rem
    );
}

html[data-theme="malam"] .lk-principle-grid {
  border-color: var(--about-line);
}

html[data-theme="malam"] .lk-principle-grid article {
  border-color: var(--about-line);
  background: rgba(30, 36, 43, .72);
}

html[data-theme="malam"] .lk-principle-grid article:hover {
  background: rgba(38, 42, 47, .96);
}

html[data-theme="malam"] .lk-about-bank,
html[data-theme="malam"] .lk-bank-modern-card {
  color: #e4c48b;
  border-color: rgba(231, 189, 114, .34);
  background: linear-gradient(145deg, #2b1a16, #38241e);
}

html[data-theme="malam"] .lk-about-bank span,
html[data-theme="malam"] .lk-bank-modern-card span,
html[data-theme="malam"] .lk-about-bank small,
html[data-theme="malam"] .lk-bank-modern-card small {
  color: #c8b198;
}

html[data-theme="malam"] .lk-about-bank strong,
html[data-theme="malam"] .lk-about-bank b,
html[data-theme="malam"] .lk-bank-modern-card strong,
html[data-theme="malam"] .lk-bank-modern-card b {
  color: #f6e8d1;
}

html[data-theme="malam"] .lk-founding-team li {
  color: #dec7a5;
}


/* 12. RESPONSIVE */

@media (max-width: 900px) {
  .lk-about-hero {
    grid-template-columns: minmax(0, 1fr) 100px;
  }

  .lk-about-manifesto,
  .lk-about-fields {
    grid-template-columns: 135px minmax(0, 1fr);
    gap: 34px;
  }

  .lk-principle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lk-principle-grid article {
    grid-column: auto;
    min-height: 210px;
  }

  .lk-about-support {
    grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  }
}

@media (max-width: 760px) {
  .lk-about-page {
    width: min(100% - 24px, 1180px);
    margin-top: 18px;
    margin-bottom: 64px;
  }

  .lk-about-page::before {
    top: -18px;
    bottom: -64px;
  }

  .lk-about-hero {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 30px 22px;
    border-radius: 19px;
  }

  .lk-about-hero h1 {
    font-size: clamp(38px, 11vw, 50px);
  }

  .lk-about-knight {
    justify-content: start;
    min-width: 0;
  }

  .lk-about-opening {
    padding: 34px 22px;
    border-radius: 19px;
  }

  .lk-about-opening-grid,
  .lk-about-manifesto,
  .lk-about-fields,
  .lk-logos-section,
  .lk-about-support {
    grid-template-columns: 1fr;
  }

  .lk-about-opening-grid {
    gap: 26px;
  }

  .lk-about-lead {
    font-size: clamp(29px, 8vw, 39px);
  }

  .lk-about-manifesto,
  .lk-about-fields {
    gap: 24px;
    padding: 42px 22px;
  }

  .lk-about-section-label {
    position: static;
    display: flex;
    align-items: baseline;
    gap: 14px;
  }

  .lk-about-section-label span {
    margin-top: 0;
  }

  .lk-logos-section {
    padding: 30px 22px;
    border-radius: 19px;
  }

  .lk-logos-mark {
    width: 138px;
    margin-left: 0;
  }

  .lk-logos-lambda-svg {
    width: 96px;
  }

  .lk-about-principles {
    padding: 42px 4px;
  }

  .lk-about-closing {
    padding: 38px 22px;
    border-radius: 18px;
  }

  .lk-about-support {
    padding: 31px 22px;
    border-radius: 18px;
  }

  .lk-about-founders {
    padding: 34px 22px;
    border-radius: 19px;
  }

  .lk-founding-team ul {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .lk-about-page {
    width: calc(100% - 18px);
  }

  .lk-about-hero {
    padding: 27px 19px;
  }

  .lk-about-opening {
    padding: 30px 19px;
  }

  .lk-about-opening-kicker {
    align-items: flex-start;
  }

  .lk-about-opening-kicker b {
    font-size: 34px;
  }

  .lk-about-name-reveal {
    padding: 24px 20px;
  }

  .lk-about-name-reveal blockquote {
    font-size: 30px;
  }

  .lk-about-manifesto,
  .lk-about-fields {
    padding: 38px 18px;
  }

  .lk-about-prose h2,
  .lk-about-principles h2 {
    font-size: clamp(30px, 10vw, 39px);
  }

  .lk-principle-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .lk-principle-grid article {
    min-height: 0;
    padding: 24px 20px 25px;
  }

  .lk-principle-grid h3 {
    margin-top: 0;
    padding-top: 30px;
  }

  .lk-principle-grid h3 {
    margin-top: 24px;
  }

  .lk-founding-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lk-about-page *,
  .lk-about-page *::before,
  .lk-about-page *::after {
    transition-duration: .01ms;
    animation-duration: .01ms;
    animation-iteration-count: 1;
  }
}


/* 13. R4 COMPACT EDITORIAL LUXURY REFINEMENT */

.lk-about-opening {
  padding:
    clamp(34px, 4.6vw, 54px)
    clamp(24px, 4vw, 42px);
  border-radius: 22px;
}

.lk-about-opening-kicker {
  gap: 16px;
}

.lk-about-opening-kicker b {
  font-size: clamp(34px, 3.8vw, 40px);
}

.lk-about-lead {
  max-width: 22ch;
  margin: 14px 0 28px;
  font-size: clamp(32px, 4.25vw, 50px);
  line-height: .97;
  letter-spacing: -.04em;
}

.lk-about-opening-grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: clamp(24px, 3.6vw, 42px);
  align-items: end;
}

.lk-about-opening-grid > :first-child {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}

.lk-about-opening-grid p,
.lk-about-move-copy p {
  font-size: 16px;
  line-height: 1.72;
}

/* Dedicated official emblem: always after the complete paragraph. */
.lk-opening-emblem-final {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  margin: 28px auto 0;
  padding: 8px 0 2px;
  text-align: center;
}

.lk-opening-emblem-final::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(132px, 12vw, 176px);
  aspect-ratio: 1;
  transform: translate(-50%, -48%);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      rgba(231, 189, 114, .16) 0%,
      rgba(231, 189, 114, .06) 42%,
      transparent 72%
    );
  filter: blur(3px);
  pointer-events: none;
}

.lk-opening-emblem-final img {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(118px, 9vw, 148px);
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  opacity: .98;
  filter:
    drop-shadow(0 16px 14px rgba(67, 43, 31, .13))
    drop-shadow(0 4px 3px rgba(67, 43, 31, .08));
}

html:not([data-theme="malam"])
.lk-opening-emblem-final img {
  mix-blend-mode: multiply;
}

html[data-theme="malam"]
.lk-opening-emblem-final::before {
  background:
    radial-gradient(
      circle,
      rgba(231, 189, 114, .13) 0%,
      rgba(231, 189, 114, .045) 44%,
      transparent 72%
    );
}

html[data-theme="malam"]
.lk-opening-emblem-final img {
  mix-blend-mode: normal;
  filter:
    brightness(1.12)
    drop-shadow(0 16px 18px rgba(0, 0, 0, .28));
}

/* Retire the old small callout/emblem shell in this column.
   The dedicated emblem above is the only emblem we expose. */
.lk-about-opening-grid > :first-child > :last-child:not(.lk-opening-emblem-final) {
  display: none;
}

.lk-about-name-reveal {
  max-width: 420px;
  margin-left: auto;
  padding: clamp(24px, 3vw, 34px);
  border-radius: 18px;
}

.lk-about-name-reveal blockquote {
  margin: 18px 0 14px;
  font-size: clamp(22px, 3.2vw, 32px);
  line-height: 1.08;
}

.lk-about-name-reveal > p {
  font-size: 13px;
  line-height: 1.68;
}

.lk-about-manifesto,
.lk-about-fields {
  grid-template-columns: 112px minmax(0, 1fr);
  gap: clamp(22px, 4vw, 40px);
  margin-top: 18px;
  padding:
    clamp(34px, 5vw, 50px)
    clamp(22px, 4vw, 36px);
}

.lk-about-section-label {
  font-size: clamp(28px, 3vw, 38px);
}

.lk-about-section-label span {
  margin-top: 8px;
  font-size: 8px;
  letter-spacing: .14em;
}

.lk-about-prose {
  max-width: 78ch;
}

.lk-about-prose h2 {
  max-width: 16ch;
  margin: 0 0 18px;
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: .96;
  letter-spacing: -.04em;
}

.lk-about-manifesto .lk-about-prose h2 {
  max-width: 14ch;
}

.lk-about-fields .lk-about-prose h2 {
  max-width: 18ch;
}

.lk-about-fields .lk-about-prose h2::after {
  width: clamp(52px, 6vw, 82px);
  margin-top: 12px;
}

.lk-about-prose p {
  font-size: 16px;
  line-height: 1.74;
}

.lk-about-prose blockquote {
  max-width: 58ch;
  margin-top: 26px;
  padding: 20px 24px;
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.58;
}

@media (max-width: 1024px) {
  .lk-about-opening {
    padding:
      clamp(28px, 4vw, 40px)
      clamp(20px, 3.8vw, 30px);
  }

  .lk-about-lead {
    max-width: 18ch;
    font-size: clamp(28px, 5vw, 42px);
  }

  .lk-about-opening-grid {
    grid-template-columns: minmax(0, 1fr) minmax(240px, .92fr);
    gap: 24px;
  }

  .lk-opening-emblem-final img {
    width: clamp(110px, 10vw, 136px);
  }

  .lk-about-name-reveal {
    max-width: 360px;
  }

  .lk-about-manifesto,
  .lk-about-fields {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 20px;
    padding: 30px 20px;
  }

  .lk-about-prose h2,
  .lk-about-support h2 {
    max-width: none;
    font-size: clamp(28px, 5vw, 40px);
  }

  .lk-about-prose {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .lk-about-opening {
    padding: 24px 18px;
  }

  .lk-about-opening-kicker b {
    font-size: 28px;
  }

  .lk-about-lead {
    max-width: none;
    margin-bottom: 22px;
    font-size: clamp(28px, 9vw, 38px);
  }

  .lk-about-opening-grid {
    grid-template-columns: 1fr;
  }

  .lk-opening-emblem-final {
    margin-top: 22px;
  }

  .lk-opening-emblem-final img {
    width: 112px;
  }

  .lk-about-name-reveal {
    max-width: none;
    margin-left: 0;
  }

  .lk-about-manifesto,
  .lk-about-fields {
    grid-template-columns: 1fr;
    padding: 28px 18px;
  }

  .lk-about-section-label {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }

  .lk-about-section-label span {
    margin-top: 0;
  }

  .lk-about-prose h2 {
    font-size: clamp(28px, 8vw, 38px);
  }

  .lk-about-prose blockquote {
    max-width: none;
    padding: 18px 18px 18px 20px;
  }
}

@media (max-width: 720px) {
  .lk-about-support {
    padding: 24px 18px;
  }

  .lk-founding-team ul {
    grid-template-columns: 1fr;
  }
}


/* 14. ABOUT BANK — PREMIUM FINANCIAL CARD */

.lk-about-bank,
.lk-bank-modern-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: clamp(24px, 3.2vw, 30px);
  border: 1px solid rgba(184, 146, 95, .38);
  border-radius: 24px;
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(255, 255, 255, .88),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #fffdf8 0%,
      #f8efe3 52%,
      #efe1d0 100%
    );
  color: var(--about-brown);
  box-shadow:
    0 26px 58px rgba(42, 24, 18, .18),
    0 5px 16px rgba(42, 24, 18, .08),
    inset 0 1px 0 rgba(255, 255, 255, .86);
}

.lk-about-bank::before,
.lk-bank-modern-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 26px;
  right: 26px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--about-gold) 22%,
      var(--about-burgundy) 72%,
      transparent
    );
  opacity: .86;
}

.lk-about-bank::after,
.lk-bank-modern-card::after {
  content: "";
  position: absolute;
  right: -38px;
  top: -42px;
  width: 126px;
  aspect-ratio: 1;
  border: 1px solid rgba(184, 146, 95, .18);
  border-radius: 50%;
  box-shadow:
    0 0 0 18px rgba(184, 146, 95, .035);
  pointer-events: none;
}

.lk-about-bank > *,
.lk-bank-modern-card > * {
  position: relative;
  z-index: 1;
}

.lk-about-bank p,
.lk-bank-modern-card p {
  margin: 0 0 11px;
  color: var(--about-muted);
  font-size: 15px;
  line-height: 1.55;
}

.lk-about-bank p:last-of-type,
.lk-bank-modern-card p:last-of-type {
  margin-bottom: 18px;
}

.lk-about-bank strong,
.lk-about-bank b,
.lk-bank-modern-card strong,
.lk-bank-modern-card b {
  color: var(--about-burgundy-deep);
  font-family: var(--font-display), Arial, sans-serif;
  font-weight: 760;
  letter-spacing: -.015em;
}

.lk-about-bank button,
.lk-bank-modern-card button,
.lk-about-support button[type="button"],
.lk-about-support button[data-copy] {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin-top: 2px;
  padding: 0 18px;
  border: 1px solid rgba(255, 250, 240, .13);
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      #8f3455 0%,
      #6f263d 100%
    );
  color: #fffaf0;
  font-family: var(--font-mono), monospace;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .075em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    0 12px 24px rgba(82, 24, 45, .22),
    inset 0 1px 0 rgba(255, 255, 255, .13);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    background .16s ease;
}

.lk-about-bank button::before,
.lk-bank-modern-card button::before,
.lk-about-support button[type="button"]::before,
.lk-about-support button[data-copy]::before {
  content: "⧉";
  display: inline-block;
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-1px);
}

.lk-about-bank button:hover,
.lk-about-bank button:focus-visible,
.lk-bank-modern-card button:hover,
.lk-bank-modern-card button:focus-visible,
.lk-about-support button[type="button"]:hover,
.lk-about-support button[type="button"]:focus-visible,
.lk-about-support button[data-copy]:hover,
.lk-about-support button[data-copy]:focus-visible {
  transform: translateY(-2px);
  background:
    linear-gradient(
      180deg,
      #a23b61 0%,
      #7a2946 100%
    );
  box-shadow:
    0 16px 30px rgba(82, 24, 45, .26),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}

.lk-about-bank button:active,
.lk-bank-modern-card button:active,
.lk-about-support button[type="button"]:active,
.lk-about-support button[data-copy]:active {
  transform: translateY(0);
}

html[data-theme="malam"] .lk-about-bank,
html[data-theme="malam"] .lk-bank-modern-card {
  border-color: rgba(231, 189, 114, .26);
  background:
    radial-gradient(
      circle at 8% 0%,
      rgba(231, 189, 114, .07),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #2b1a16 0%,
      #352019 54%,
      #231512 100%
    );
  color: #dec7a5;
  box-shadow:
    0 26px 58px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .04);
}

html[data-theme="malam"] .lk-about-bank p,
html[data-theme="malam"] .lk-bank-modern-card p {
  color: #c8b198;
}

html[data-theme="malam"] .lk-about-bank strong,
html[data-theme="malam"] .lk-about-bank b,
html[data-theme="malam"] .lk-bank-modern-card strong,
html[data-theme="malam"] .lk-bank-modern-card b {
  color: #f6e8d1;
}

@media (max-width: 760px) {
  .lk-about-bank,
  .lk-bank-modern-card {
    padding: 22px 18px;
    border-radius: 20px;
  }

  .lk-about-bank button,
  .lk-bank-modern-card button,
  .lk-about-support button[type="button"],
  .lk-about-support button[data-copy] {
    min-height: 46px;
  }
}

/* END ABOUT BANK — PREMIUM FINANCIAL CARD */

/* END R4 COMPACT EDITORIAL LUXURY REFINEMENT */
