/* Illustrations complement the existing service descriptions. */
body.rich-sections .rich-illustration { display:grid; place-items:center; min-width:0; border-radius:18px; background:#edf3ff; overflow:hidden; }
body.rich-sections .rich-illustration svg { display:block; width:100%; height:auto; aspect-ratio:3/2; }
body.rich-sections .intro-grid,body.rich-sections .step-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; border:0; }
body.rich-sections :is(.intro-card,.step-card) { display:grid; grid-template-columns:minmax(140px,.86fr) minmax(0,1.14fr); grid-template-rows:auto auto 1fr; gap:8px 24px; align-items:start; min-height:220px; padding:24px!important; border:1px solid #e0e6f0!important; border-radius:20px!important; background:#fff!important; }
body.rich-sections :is(.intro-card,.step-card) .rich-illustration { grid-column:1; grid-row:1 / 4; align-self:stretch; }
body.rich-sections :is(.intro-card,.step-card) > :is(small,b,p) { grid-column:2; margin:0; }
body.rich-sections :is(.intro-card,.step-card) > small { color:#5378bb!important; font-size:11px; letter-spacing:.06em; }
body.rich-sections :is(.intro-card,.step-card) > b { font-size:19px; line-height:1.4; color:#142849; }
body.rich-sections :is(.intro-card,.step-card) > p { font-size:14px; line-height:1.8; }
body.rich-sections :is(.intro-card,.step-card):nth-child(2) .rich-illustration { background:#e8f8f2; }
body.rich-sections :is(.intro-card,.step-card):nth-child(3) .rich-illustration { background:#f2efff; }
body.rich-sections :is(.intro-card,.step-card):nth-child(4) .rich-illustration { background:#fff5e6; }

body.rich-sections .story-interactive .story-shell { grid-template-columns:1fr 1fr; }
body.rich-sections .story-visual { background:radial-gradient(ellipse at 30% 30%,#f9fcff,#dce9fd)!important; border:1px solid #cedcf2; box-shadow:none; }
body.rich-sections .story-topline,body.rich-sections .story-progress-meta { color:#5b739a; font-size:11px; }
body.rich-sections .story-topline span:first-child::before { background:#407bed; box-shadow:0 0 0 5px #407bed15; }
body.rich-sections .rich-story-canvas { position:relative; min-height:290px; display:block; margin:8px -8px 14px; }
body.rich-sections .rich-story-scene { display:none; width:100%; }
body.rich-sections .rich-story-scene svg { display:block; width:100%; height:270px; }
body.rich-sections .scroll-story[data-active="0"] .rich-story-scene[data-phase="0"],
body.rich-sections .scroll-story[data-active="1"] .rich-story-scene[data-phase="1"],
body.rich-sections .scroll-story[data-active="2"] .rich-story-scene[data-phase="2"],
body.rich-sections .scroll-story[data-active="3"] .rich-story-scene[data-phase="3"] { display:block; }
body.rich-sections .rich-stage-title { position:absolute; bottom:-5px; left:0; right:0; text-align:center; }
body.rich-sections .rich-stage-title b { display:inline-block; margin:0; padding:8px 22px; border-radius:40px; border:1px solid #cbd9ef; background:#ffffffc9; color:#315790; font-size:13px; line-height:1.4; }
body.rich-sections .story-progress { background:#cad9ef; }
body.rich-sections .story-progress i { background:linear-gradient(90deg,#2f64ef,#48c3ab); }

body.rich-sections .program-art { grid-column:2; grid-row:1 / span 5; position:relative; isolation:isolate; min-height:340px; overflow:hidden; border-radius:15px; background:#172844; }
body.rich-sections .program-art img { display:block; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
body.rich-sections .program-art::after { content:""; position:absolute; inset:28% 0 0; z-index:1; background:linear-gradient(0deg,#0c1939f0,#0c19394a 72%,transparent); pointer-events:none; }
body.rich-sections .program-art ul { position:absolute; z-index:2; inset:auto 22px 20px; display:flex; flex-wrap:wrap; gap:7px; padding:0; margin:0; list-style:none; }
body.rich-sections .program-art li { padding:5px 10px; border:1px solid #ffffff40; border-radius:6px; background:#10244b85; color:#fff!important; font-size:12px; line-height:1.65; backdrop-filter:blur(6px); }
body.rich-sections .program-card .program-art { margin-top:24px; }
body.rich-sections .visual-tab-panels .program-card .program-art { margin:0; }
body.rich-sections .visual-tab-panels > .program-card { grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-content:center; column-gap:36px; }

body.rich-sections .project-hero .hero-grid { grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:54px; }
body.rich-sections .signal-panel { overflow:hidden; padding:0 24px 14px; border:1px solid #dce4f1; border-radius:20px; background:#fff!important; box-shadow:0 24px 58px -30px #274a9135; }
body.rich-sections .project-context-photo { display:block; width:calc(100% + 48px); max-width:none; height:230px; margin:0 -24px 8px; object-fit:cover; }
body.rich-sections .signal-row { font-size:13px; padding:12px 0; }
body.rich-sections .data-console { overflow:hidden; background:#101f42!important; border:1px solid #354a70; box-shadow:0 24px 64px -32px #173a8070; }
body.rich-sections .data-console-art { margin:8px -12px 12px; }
body.rich-sections .data-console-art svg { display:block; width:100%; height:220px; }
body.rich-sections .data-console .console-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; }
body.rich-sections .data-console .console-row b { color:#c3d4f6!important; font-size:12px; }
body.rich-sections .data-console .console-bar { height:4px; }
body.rich-sections .rich-data-card { overflow:hidden; padding:0 24px 24px!important; border:1px solid #dce5f0; border-radius:18px!important; }
body.rich-sections .rich-data-card .rich-illustration { height:180px; margin:0 -24px 22px; border-radius:0; background:#edf3ff; }
body.rich-sections .rich-data-card .rich-illustration svg { width:270px; max-width:100%; }
body.rich-sections .rich-data-card:nth-child(3n + 2) .rich-illustration { background:#e9f8f4; }
body.rich-sections .rich-data-card:nth-child(3n) .rich-illustration { background:#f2efff; }
body.rich-sections .rich-data-card > b { font-size:19px; }
body.rich-sections .rich-data-card > p { font-size:14px; line-height:1.8; }

@media (prefers-reduced-motion:no-preference) {
  body.rich-sections .rich-story-scene { animation:rich-scene-arrive .55s cubic-bezier(.2,.7,.2,1) both; }
  body.rich-sections .rich-illustration svg,body.rich-sections .program-art img { transition:transform .5s cubic-bezier(.2,.7,.2,1); }
  @media (hover:hover) {
    body.rich-sections :is(.intro-card,.step-card,.rich-data-card):hover .rich-illustration svg { transform:translateY(-4px) scale(1.035); }
    body.rich-sections .program-art:hover img { transform:scale(1.035); }
  }
  @keyframes rich-scene-arrive { from { opacity:0; transform:translateY(12px) scale(.96); } to { opacity:1; transform:none; } }
}
@media (max-width:1000px) {
  body.rich-sections :is(.intro-card,.step-card) { grid-template-columns:1fr; gap:10px; }
  body.rich-sections :is(.intro-card,.step-card) .rich-illustration { grid-column:1; grid-row:auto; height:160px; }
  body.rich-sections :is(.intro-card,.step-card) .rich-illustration svg { width:240px; }
  body.rich-sections :is(.intro-card,.step-card) > :is(small,b,p) { grid-column:1; }
  body.rich-sections .project-hero .hero-grid { grid-template-columns:1fr; gap:32px; }
  body.rich-sections .signal-panel { max-width:660px; }
}
@media (max-width:680px) {
  body.rich-sections .intro-grid,body.rich-sections .step-grid { grid-template-columns:1fr; gap:14px; }
  body.rich-sections :is(.intro-card,.step-card) { grid-template-columns:104px minmax(0,1fr); grid-template-rows:auto auto 1fr; column-gap:16px; min-height:0; padding:18px!important; }
  body.rich-sections :is(.intro-card,.step-card) .rich-illustration { grid-column:1; grid-row:1 / 4; height:100%; min-height:136px; }
  body.rich-sections :is(.intro-card,.step-card) .rich-illustration svg { width:142px; max-width:none; }
  body.rich-sections :is(.intro-card,.step-card) > :is(small,b,p) { grid-column:2; }
  body.rich-sections :is(.intro-card,.step-card) > b { font-size:17px; }
  body.rich-sections :is(.intro-card,.step-card) > p { font-size:13px; line-height:1.7; }
  body.rich-sections .story-interactive .story-shell { grid-template-columns:1fr; gap:12px; }
  body.rich-sections .story-interactive .story-visual { padding:20px; min-height:0; }
  body.rich-sections .rich-story-canvas { min-height:242px; }
  body.rich-sections .rich-story-scene svg { height:220px; }
  body.rich-sections .program-art { min-height:240px; }
  body.rich-sections .visual-tab-panels > .program-card { grid-template-columns:1fr; }
  body.rich-sections .visual-tab-panels .program-card .program-art { grid-column:1; grid-row:auto; margin-top:20px; }
  body.rich-sections .edu-hero .hero-panel { display:block!important; width:100%; max-width:100%!important; }
  body.rich-sections .edu-hero .hero-panel::before { height:190px; }
  body.rich-sections .project-context-photo { height:210px; }
  body.rich-sections .data-console-art svg { height:200px; }
}