/* Ki — Format Ritual. Scoped under .ki-scope .ki-format-ritual.
   Source: Ki Sustainability.html lines 747–790 + CSS 219–236.
   Redesigned as frosted-glass logic + step cards over an optional photographic
   background (mountain / lake / product artwork). */

.ki-scope .ki-format-ritual { background: var(--ki-cream); position: relative; overflow: hidden; }

/* Optional full-bleed background image + readability wash. */
.ki-scope .ki-format-ritual .ki-fr-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-repeat: no-repeat;
}
.ki-scope .ki-format-ritual .ki-fr-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: var(--ki-cream); opacity: 0.25; pointer-events: none;
}
.ki-scope .ki-format-ritual .wrap { position: relative; z-index: 2; }

/* eyebrow-rule (shared pattern) */
.ki-scope .ki-format-ritual .eyebrow-rule {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--ki-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ki-blue-deep); margin-bottom: 28px;
}
.ki-scope .ki-format-ritual .eyebrow-rule::after {
  content: ""; flex: 1; height: 1px; background: var(--ki-rule);
}

.ki-scope .ki-format-ritual .lead-statement {
  font-family: var(--ki-serif); font-weight: 400;
  font-size: clamp(30px, 3.6vw, 46px); line-height: 1.18;
  letter-spacing: -0.005em; max-width: 20ch; margin: 0;
}
.ki-scope .ki-format-ritual .section-head .right p { margin: 0 0 16px; }
.ki-scope .ki-format-ritual .section-head .right p:last-child { margin-bottom: 0; }

/* ───── Logic grid ───── */
.ki-scope .ki-format-ritual .logic-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 56px;
}
.ki-scope .ki-format-ritual .logic-card {
  position: relative;
  padding: 44px 48px 56px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 18px 48px -28px rgba(27, 116, 138, 0.32);
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.ki-scope .ki-format-ritual .logic-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 60px -28px rgba(27, 116, 138, 0.45);
}
.ki-scope .ki-format-ritual .logic-card.sachet { background: rgba(245, 239, 230, 0.66); }
.ki-scope .ki-format-ritual .logic-card.ki     { background: rgba(245, 252, 253, 0.66); }
.ki-scope .ki-format-ritual .logic-card .t {
  font-family: var(--ki-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 18px;
}
.ki-scope .ki-format-ritual .logic-card.sachet .t { color: #7A5A3A; }
.ki-scope .ki-format-ritual .logic-card.ki .t { color: var(--ki-blue-deep); }
.ki-scope .ki-format-ritual .logic-card p {
  font-family: var(--ki-serif); font-size: 21px; line-height: 1.5; color: #000; margin: 0;
}
.ki-scope .ki-format-ritual .logic-card p em {
  font-family: var(--ki-serif-italic); font-style: italic; color: var(--ki-ink-mute);
}
/* icon — bottom-right corner of the logic card */
.ki-scope .ki-format-ritual .logic-card .logic-ic {
  position: absolute; right: 28px; bottom: 24px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--ki-blue-deep); opacity: 0.7;
}
.ki-scope .ki-format-ritual .logic-card.sachet .logic-ic { color: #7A5A3A; }
.ki-scope .ki-format-ritual .logic-card .logic-ic svg { display: block; width: 28px; height: 28px; }
.ki-scope .ki-format-ritual .logic-card .logic-ic .ki-icon-img { width: 28px; height: 28px; object-fit: contain; }

/* ───── Steps ───── */
.ki-scope .ki-format-ritual .steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.ki-scope .ki-format-ritual .step {
  position: relative;
  padding: 40px 36px 44px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 18px 48px -28px rgba(27, 116, 138, 0.32);
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.ki-scope .ki-format-ritual .step:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 60px -28px rgba(27, 116, 138, 0.45);
}
.ki-scope .ki-format-ritual .step .step-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 24px;
}
.ki-scope .ki-format-ritual .step .sn {
  font-family: var(--ki-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ki-blue-deep); margin: 0;
}
.ki-scope .ki-format-ritual .step .step-ic {
  flex: 0 0 auto; width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--ki-blue-deep); opacity: 0.8;
}
.ki-scope .ki-format-ritual .step .step-ic svg { display: block; width: 24px; height: 24px; }
.ki-scope .ki-format-ritual .step .step-ic .ki-icon-img { width: 24px; height: 24px; object-fit: contain; }
.ki-scope .ki-format-ritual .step .amt {
  font-family: var(--ki-serif); font-size: clamp(44px, 5vw, 64px);
  line-height: 0.9; color: #000; margin-bottom: 20px;
}
.ki-scope .ki-format-ritual .step.last .amt { color: var(--ki-blue); }
.ki-scope .ki-format-ritual .step p {
  font-family: var(--ki-sans); font-size: 14.5px;
  color: var(--ki-ink-mute); line-height: 1.6; margin: 0;
}

@media (max-width: 1100px) {
  .ki-scope .ki-format-ritual .logic-grid,
  .ki-scope .ki-format-ritual .steps { grid-template-columns: 1fr; gap: 20px; }
}