.framework-page {
  --fc-accent: #3f6981;
  --fc-accent-soft: rgba(63,105,129,.13);
  --fc-warm: #c9714f;
  --fc-green: #3c7b6d;
  background: #f5f1e8;
}

.framework-page--idt {
  --fc-accent: #3c7b6d;
  --fc-accent-soft: rgba(60,123,109,.13);
  --fc-warm: #3f6981;
}

.framework-page .editorial-hero {
  min-height: calc(100svh - 74px);
  display: grid;
  align-items: center;
  border-bottom: 0;
  background:
    radial-gradient(ellipse 52% 78% at 80% 48%, var(--fc-accent-soft), transparent 70%),
    radial-gradient(ellipse 32% 46% at 91% 14%, rgba(201,113,79,.07), transparent 72%),
    linear-gradient(112deg, #f5f1e8 0%, #f5f1e8 51%, #edf0e9 100%);
}

.framework-page--idt .editorial-hero-inner {
  grid-template-columns: minmax(300px,.65fr) minmax(0,1.35fr);
}

.framework-page--idt .editorial-hero-copy { order: 2; }
.framework-page--idt .editorial-orbit { order: 1; }

.framework-page .editorial-hero::after {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: #f5f1e8;
  content: "";
  pointer-events: none;
  transform-origin: right center;
  animation: frameworkCurtain 1.05s .08s cubic-bezier(.76,0,.24,1) both;
}

.framework-page .editorial-hero-copy,
.framework-page .editorial-orbit {
  opacity: 0;
  transform: translateY(24px);
  animation: frameworkHeroIn 1s .48s cubic-bezier(.16,1,.3,1) forwards;
}

.framework-page .editorial-orbit { animation-delay: .68s; }

@keyframes frameworkCurtain { to { transform: scaleX(0); } }
@keyframes frameworkHeroIn { to { opacity: 1; transform: none; } }

.framework-cinema {
  position: relative;
  border-top: 1px solid rgba(24,33,30,.12);
  border-bottom: 1px solid rgba(24,33,30,.12);
  background:
    radial-gradient(circle at 18% 34%, var(--fc-accent-soft), transparent 28%),
    radial-gradient(circle at 82% 70%, rgba(201,113,79,.07), transparent 26%),
    #ede8de;
}

.fc-grid {
  display: grid;
  grid-template-columns: minmax(0,1.14fr) minmax(330px,.86fr);
  gap: clamp(55px,7vw,112px);
  align-items: start;
}

.framework-cinema--idt .fc-grid {
  grid-template-columns: minmax(330px,.86fr) minmax(0,1.14fr);
}

.framework-cinema--idt .fc-stage-wrap { order: 2; }
.framework-cinema--idt .fc-scenes { order: 1; }

.fc-stage-wrap {
  position: sticky;
  top: 74px;
  height: calc(100svh - 74px);
  display: grid;
  align-items: center;
  padding-block: 38px;
}

.fc-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1.1;
  overflow: hidden;
  border-radius: 42px;
  background: rgba(255,255,255,.28);
  box-shadow: inset 0 0 0 1px rgba(24,33,30,.13), 0 34px 90px rgba(24,33,30,.07);
  isolation: isolate;
}

.fc-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.74), transparent 35%),
    conic-gradient(from 180deg at 50% 50%, transparent, var(--fc-accent-soft), transparent, rgba(201,113,79,.08), transparent);
  animation: fcAtmosphere 14s linear infinite;
}

@keyframes fcAtmosphere { to { transform: rotate(360deg) scale(1.08); } }

.fc-stage-caption {
  position: absolute;
  right: 28px;
  bottom: 24px;
  left: 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 15px;
  align-items: center;
  color: #68726c;
  font-family: "Newsreader", Georgia, serif;
  font-size: 14px;
}

.fc-stage-caption i { height: 1px; background: rgba(24,33,30,.16); }
.fc-stage-count { font-variant-numeric: tabular-nums; }

.fc-scenes { padding-block: 10vh; }

.fc-scene {
  min-height: 83vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: .3;
  transition: opacity 450ms ease, transform 650ms cubic-bezier(.18,.72,.2,1);
}

.fc-scene.is-active { opacity: 1; transform: translateX(0); }
.fc-scene > p { display:none; }
.fc-scene h2 { margin: 0; color: #18211e; font-family: "Newsreader", Georgia, serif; font-size: clamp(39px,4.2vw,61px); font-weight: 400; letter-spacing: -.045em; line-height: .98; }
.fc-scene > div { max-width: 475px; margin-top: 28px; color: #68726c; font-size: 17px; line-height: 1.65; }

.fc-os-silos,
.fc-os-system,
.fc-os-value,
.fc-idt-market,
.fc-idt-gate,
.fc-idt-shortlist {
  position: absolute;
  inset: 70px 44px 64px;
  opacity: 0;
  transform: translateY(24px) scale(.97);
  transition: opacity 600ms ease, transform 850ms cubic-bezier(.16,1,.3,1);
}

.fc-stage[data-scene="0"] .fc-os-silos,
.fc-stage[data-scene="1"] .fc-os-system,
.fc-stage[data-scene="2"] .fc-os-value,
.fc-stage[data-scene="0"] .fc-idt-market,
.fc-stage[data-scene="1"] .fc-idt-gate,
.fc-stage[data-scene="2"] .fc-idt-shortlist {
  opacity: 1;
  transform: none;
}

.fc-os-silos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-content: center;
}

.fc-os-silos span {
  position: relative;
  display: grid;
  min-height: 95px;
  place-items: center;
  border: 1px solid rgba(24,33,30,.17);
  border-radius: 999px;
  background: rgba(245,241,232,.68);
  color: #18211e;
  font-family: "Newsreader", Georgia, serif;
  font-size: 22px;
  box-shadow: 0 15px 36px rgba(24,33,30,.05);
  animation: fcFloat 5s calc(var(--i) * -1.1s) ease-in-out infinite alternate;
}

.fc-os-silos span::after {
  position: absolute;
  right: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fc-accent);
  content: "";
}

.fc-os-silos i {
  grid-column: 1/-1;
  justify-self: center;
  color: #68726c;
  font-family: "Newsreader", Georgia, serif;
  font-size: 17px;
  font-style: normal;
}

@keyframes fcFloat { to { transform: translateY(-9px) rotate(.6deg); } }

.fc-os-system { display: grid; place-items: center; }
.fc-os-system strong {
  position: relative;
  z-index: 3;
  display: grid;
  width: 102px;
  height: 102px;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 27%, #2c3a35, #18211e 72%);
  color: #f5f1e8;
  font-family: "Newsreader", Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  box-shadow: 0 24px 60px rgba(24,33,30,.21), 0 0 0 18px rgba(63,105,129,.05);
  animation: fcCore 4.5s ease-in-out infinite alternate;
}

@keyframes fcCore { to { transform: scale(1.04); box-shadow: 0 30px 70px rgba(24,33,30,.24), 0 0 0 28px rgba(63,105,129,.035); } }

.fc-os-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  border: 1px solid rgba(24,33,30,.22);
  border-radius: 50%;
  transform: translate(-50%,-50%);
}

.fc-os-ring b {
  position: absolute;
  top: 8%;
  left: 72%;
  padding: 3px 7px;
  background: #ede8de;
  color: #68726c;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.ring-one { width: 170px; height: 170px; animation: fcOrbit 18s linear infinite; }
.ring-two { width: 250px; height: 250px; animation: fcOrbitReverse 24s linear infinite; }
.ring-three { width: 335px; height: 335px; animation: fcOrbit 31s linear infinite; }
.ring-four { width: 420px; height: 420px; animation: fcOrbitReverse 38s linear infinite; }
.ring-two b { top: 76%; left: 6%; }
.ring-three b { top: 42%; left: 93%; }
.ring-four b { top: 16%; left: 3%; }

@keyframes fcOrbit { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes fcOrbitReverse { to { transform: translate(-50%,-50%) rotate(-360deg); } }

.fc-os-value {
  display: grid;
  grid-template-columns: 1fr minmax(75px,.48fr) 1fr;
  gap: 22px;
  align-items: center;
}

.fc-os-value span {
  position: relative;
  display: grid;
  min-height: 190px;
  place-content: center;
  border-radius: 50%;
  background: rgba(245,241,232,.72);
  box-shadow: inset 0 0 0 1px rgba(24,33,30,.14), 0 30px 65px rgba(24,33,30,.08);
  color: #18211e;
  font-family: "Newsreader", Georgia, serif;
  font-size: 28px;
  line-height: 1;
  text-align: center;
}

.fc-os-value span:last-child { background: radial-gradient(circle at 36% 28%, #dce8e2, #b8d0c6 72%); }
.fc-os-value small { margin-bottom: 9px; color: #68726c; font-family: "Instrument Sans",Arial,sans-serif; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.fc-os-value i { position: relative; height: 1px; background: linear-gradient(90deg, var(--fc-accent), var(--fc-green)); }
.fc-os-value i::after { position: absolute; top: 50%; right: -1px; width: 8px; height: 8px; border-top: 1px solid var(--fc-green); border-right: 1px solid var(--fc-green); content: ""; transform: translateY(-50%) rotate(45deg); }

.fc-idt-market { display: grid; grid-template-columns: repeat(6,1fr); gap: 18px; place-content: center; padding: 36px 54px; }
.fc-idt-market span {
  aspect-ratio: 1;
  border-radius: 50%;
  background: #8b9892;
  box-shadow: 0 7px 18px rgba(24,33,30,.12);
  opacity: calc(.42 + (var(--i) / 55));
  animation: fcMarket 5s calc(var(--i) * -.14s) ease-in-out infinite alternate;
}
.fc-idt-market strong { grid-column: 1/-1; margin-top: 12px; color: #68726c; font-family: "Newsreader",Georgia,serif; font-size: 19px; font-weight: 400; text-align: center; }
@keyframes fcMarket { to { transform: translateY(-8px) scale(1.08); } }

.fc-idt-gate { display: grid; place-items: center; }
.fc-idt-gate > span { position: absolute; top: 11%; bottom: 14%; left: calc(50% + (var(--offset,0) * 1px)); width: 1px; background: linear-gradient(transparent, rgba(60,123,109,.52), transparent); }
.fc-idt-gate > span:nth-child(1) { --offset:-38; animation: fcGate 4.1s linear infinite; }
.fc-idt-gate > span:nth-child(2) { --offset:-19; animation: fcGate 4.9s -.8s linear infinite; }
.fc-idt-gate > span:nth-child(3) { --offset:0; animation: fcGate 4.4s -1.6s linear infinite; }
.fc-idt-gate > span:nth-child(4) { --offset:19; animation: fcGate 5.2s -2.2s linear infinite; }
.fc-idt-gate > span:nth-child(5) { --offset:38; animation: fcGate 4.7s -3s linear infinite; }
@keyframes fcGate { 50% { opacity: .25; transform: translateX(7px); } }
.fc-idt-gate::before,
.fc-idt-gate::after { position: absolute; width: 170px; height: 170px; border: 1px solid rgba(24,33,30,.15); border-radius: 50%; content: ""; }
.fc-idt-gate::before { left: 7%; background: radial-gradient(circle, rgba(63,105,129,.13), transparent 68%); }
.fc-idt-gate::after { right: 7%; width: 92px; height: 92px; background: radial-gradient(circle, rgba(60,123,109,.22), transparent 70%); }
.fc-idt-gate strong { position: relative; z-index: 2; color: #18211e; font-family: "Newsreader",Georgia,serif; font-size: 31px; font-weight: 400; }
.fc-idt-gate small { position: absolute; top: 57%; color: #68726c; font-size: 11px; }

.fc-idt-shortlist { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; place-content: center; padding: 30px; }
.fc-idt-shortlist > span { position: relative; display: grid; aspect-ratio: .84; place-items: center; border: 1px solid rgba(24,33,30,.14); border-radius: 48% 52% 48% 52%; background: linear-gradient(145deg, rgba(255,255,255,.62), rgba(60,123,109,.14)); box-shadow: 0 30px 70px rgba(24,33,30,.08); animation: fcLens 5s var(--delay,0s) ease-in-out infinite alternate; }
.fc-idt-shortlist > span:nth-child(2) { --delay:-1.6s; transform: translateY(-24px); }
.fc-idt-shortlist > span:nth-child(3) { --delay:-3.2s; }
.fc-idt-shortlist b { color: var(--fc-accent); font-family: "Newsreader",Georgia,serif; font-size: 29px; font-weight: 400; }
.fc-idt-shortlist > strong { grid-column: 1/-1; color: #18211e; font-family: "Newsreader",Georgia,serif; font-size: 21px; font-weight: 400; text-align: center; }
@keyframes fcLens { to { border-radius: 54% 46% 56% 44%; transform: translateY(-10px) rotate(2deg); } }
.fc-idt-shortlist > span:nth-child(2) { animation-name: fcLensMiddle; }
@keyframes fcLensMiddle { to { border-radius: 44% 56% 46% 54%; transform: translateY(-34px) rotate(-2deg); } }

.framework-reading {
  display: grid;
  grid-template-columns: 225px minmax(0,760px);
  gap: clamp(65px,8vw,125px);
  align-items: start;
  padding-block: 125px 145px;
}

.framework-reading .editorial-toc { top: 108px; }
.framework-reading .editorial-toc > p { color: var(--fc-accent); }
.framework-reading .toc-nav #TableOfContents { max-height: calc(100vh - 175px); overflow-y: auto; scrollbar-width: thin; }

.framework-prose { position: relative; }
.framework-prose::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -42px;
  width: 1px;
  background: linear-gradient(transparent, rgba(24,33,30,.16) 4%, rgba(24,33,30,.16) 96%, transparent);
  content: "";
}

.framework-prose > h2 {
  min-height: 46vh;
  display: flex;
  align-items: end;
  padding-top: 18vh !important;
  border-top: 0 !important;
  font-size: clamp(45px,5vw,66px) !important;
}

.framework-prose > h2::before {
  position: absolute;
  left: -47px;
  width: 11px;
  height: 11px;
  border: 3px solid #f5f1e8;
  border-radius: 50%;
  background: var(--fc-accent);
  box-shadow: 0 0 0 1px rgba(24,33,30,.15);
  content: "";
}

.framework-prose > p { max-width: 690px; }
.framework-page .editorial-after { padding-top: 10px; }

@media (max-width: 980px) {
  .framework-page .editorial-hero-inner,
  .framework-page--idt .editorial-hero-inner { grid-template-columns: 1fr; }
  .framework-page--idt .editorial-hero-copy,
  .framework-page--idt .editorial-orbit { order: initial; }
  .fc-grid,
  .framework-cinema--idt .fc-grid { grid-template-columns: 1fr; gap: 0; }
  .framework-cinema--idt .fc-stage-wrap,
  .framework-cinema--idt .fc-scenes { order: initial; }
  .fc-stage-wrap { position: sticky; top: 64px; z-index: 2; height: min(62vh,650px); padding: 24px 0; background: linear-gradient(#ede8de 86%,rgba(237,232,222,0)); }
  .fc-stage { width: min(680px,100%); height: 100%; margin-inline: auto; aspect-ratio: auto; border-radius: 30px; }
  .fc-scenes { padding: 0 0 10vh; }
  .fc-scene { min-height: 64vh; justify-content: flex-end; padding: 80px 8px 32px; }
  .framework-reading { grid-template-columns: 1fr; padding-block: 90px 110px; }
  .framework-reading .editorial-toc { display: none; }
  .framework-prose { margin-inline: auto; }
  .framework-prose::before { left: -23px; }
  .framework-prose > h2::before { left: -28px; }
}

@media (max-width: 640px) {
  .framework-page .editorial-hero { min-height: 0; }
  .framework-page .editorial-hero-inner { padding-block: 68px 72px; }
  .fc-stage-wrap { top: 64px; height: 52vh; min-height: 390px; padding: 14px 0; }
  .fc-stage { border-radius: 23px; }
  .fc-stage-caption { right: 18px; bottom: 16px; left: 18px; font-size: 12px; }
  .fc-os-silos, .fc-os-system, .fc-os-value, .fc-idt-market, .fc-idt-gate, .fc-idt-shortlist { inset: 45px 20px 46px; }
  .fc-os-silos { gap: 12px; }
  .fc-os-silos span { min-height: 62px; font-size: 17px; }
  .ring-one { width: 115px; height: 115px; }
  .ring-two { width: 170px; height: 170px; }
  .ring-three { width: 225px; height: 225px; }
  .ring-four { width: 280px; height: 280px; }
  .fc-os-system strong { width: 74px; height: 74px; font-size: 19px; }
  .fc-os-ring b { font-size: 9px; }
  .fc-os-value { grid-template-columns: 1fr 42px 1fr; gap: 9px; }
  .fc-os-value span { min-height: 115px; font-size: 20px; }
  .fc-os-value small { font-size: 8px; }
  .fc-idt-market { gap: 10px; padding: 28px 34px; }
  .fc-idt-gate strong { font-size: 24px; }
  .fc-idt-shortlist { gap: 10px; padding: 15px; }
  .fc-idt-shortlist > strong { font-size: 17px; }
  .fc-scene { min-height: 58vh; padding-inline: 0; }
  .fc-scene h2 { font-size: 40px; }
  .fc-scene > div { font-size: 15px; }
  .framework-reading { width: min(100% - 42px,1240px); padding-block: 70px 90px; }
  .framework-prose::before { left: -15px; }
  .framework-prose > h2 { min-height: 38vh; padding-top: 13vh !important; font-size: 40px !important; }
  .framework-prose > h2::before { left: -20px; width: 9px; height: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .framework-page .editorial-hero::after { display: none; }
  .framework-page .editorial-hero-copy,
  .framework-page .editorial-orbit { opacity: 1; transform: none; }
  .fc-atmosphere,
  .fc-os-silos span,
  .fc-os-system strong,
  .fc-os-ring,
  .fc-idt-market span,
  .fc-idt-gate > span,
  .fc-idt-shortlist > span { animation: none !important; }
}