/* Editorial project presentation: one complete screen and two labelled details.
   Images stay still so visitors can read them. No extra animation or JS. */
#main #interfaces{height:auto;min-height:0;overflow:visible}
#interfaces .dashboard-editorial{
  grid-column:1/-1;display:grid;direction:ltr;
  grid-template-columns:minmax(0,3fr) minmax(0,1fr);
  gap:24px;width:100%;padding:clamp(20px,3vw,48px);
  background:var(--navy);color:#fff;border-radius:8px;
}
#interfaces .dashboard-story{grid-column:2;grid-row:1;direction:rtl;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:18px;padding:4px 0 12px;text-align:right}
#interfaces .dashboard-kicker{color:var(--gold);font-size:13px;font-weight:700}
#interfaces .dashboard-story h3{color:#fff;margin:0;font-size:clamp(22px,2vw,34px);line-height:1.15;letter-spacing:0}
#interfaces .dashboard-story p{color:#d9dbea;margin:0;font-size:16px;line-height:1.6}
#interfaces .dashboard-project-name{color:#d9dbea;font-size:12px}
#interfaces .dashboard-frame{min-width:0;margin:0;direction:rtl}
#interfaces .dashboard-frame img{display:block;max-width:none;border-radius:4px;box-shadow:none}
#interfaces .dashboard-overview{grid-column:1;grid-row:1/3;align-self:end}
#interfaces .dashboard-overview>img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
#interfaces .dashboard-frame figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 14px;padding-top:12px;border-top:1px solid #ffffff26;margin-top:12px;color:#d9dbea;font-size:13px;line-height:1.4}
#interfaces .dashboard-frame figcaption span:first-child{color:var(--gold)}
#interfaces .dashboard-crop{position:relative;overflow:hidden;border-radius:4px;background:#eef2f5}
#interfaces .dashboard-task-detail{grid-column:2;grid-row:2}
#interfaces .dashboard-task-detail .dashboard-crop{aspect-ratio:1.65}
#interfaces .dashboard-task-detail img{position:absolute;width:300%;height:auto;left:0;top:0;transform:translateY(-67%)}
#interfaces .dashboard-chart-detail{grid-column:1/-1}
#interfaces .dashboard-chart-detail .dashboard-crop{aspect-ratio:4.3}
#interfaces .dashboard-chart-detail img{position:absolute;width:121%;height:auto;left:0;top:0;transform:translateY(-36.5%)}
/* Annotation's 920px is a desktop minimum, never a clipping height. */
#main .services-animated .service-visual{margin-inline:auto}
@media(min-width:1200px){
  #main .services-section.services-animated{height:auto;min-height:920px;display:flex;flex-direction:column;justify-content:center}
  #interfaces .dashboard-editorial{width:70%;margin-inline:auto;gap:18px;padding:24px}
  #interfaces .dashboard-story{gap:12px;padding-bottom:8px}
  #interfaces .dashboard-story h3{font-size:26px}
  #interfaces .dashboard-story p{font-size:14px;line-height:1.45}
  #interfaces .dashboard-frame figcaption{margin-top:8px;padding-top:8px;font-size:11px}
}
@media(max-width:999px){
  #interfaces .dashboard-editorial{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:20px}
  #interfaces .dashboard-story{grid-column:2;grid-row:1}
  #interfaces .dashboard-overview{grid-column:1;grid-row:1/3;align-self:center}
  #interfaces .dashboard-task-detail{grid-column:2;grid-row:2}
  #interfaces .dashboard-chart-detail{grid-column:1/-1;grid-row:3}
  #interfaces .dashboard-chart-detail .dashboard-crop{aspect-ratio:2.1}
  #interfaces .dashboard-chart-detail img{width:245%;left:-102.5%;transform:translateY(-36.5%)}
}
@media(max-width:599px){
  #interfaces .dashboard-editorial{grid-template-columns:minmax(0,1fr);gap:28px;padding:20px}
  #interfaces .dashboard-story{grid-column:1;grid-row:auto;gap:12px}
  #interfaces .dashboard-story h3{font-size:26px}
  #interfaces .dashboard-overview,#interfaces .dashboard-task-detail,#interfaces .dashboard-chart-detail{grid-column:1;grid-row:auto}
  #interfaces .dashboard-task-detail .dashboard-crop{aspect-ratio:1.65}
}