/* Commwiser — media-relations: Media Relations & Thought Leadership. The service pages' chaptered pattern (title
   block with the full introduction, chapter rail, a picture for each chapter) in this page's own colour, slate grey.
   The one dark moment is Contextualising complex issues (03). Pictures play once on screen. */
:root{--indigo:#55595C;--indigo-deep:#34373A;--steel-light:#7A7F82}
.tb{border-bottom-color:#55595C}
.ch--dark{--bg:#2B2E30}
.ch--dark .depth{background:#2B2E30}
.ch--dark .depth::before{background:radial-gradient(58% 36% at 82% 16%,rgba(200,204,206,.12),transparent 70%),radial-gradient(52% 34% at 10% 72%,rgba(138,138,138,.14),transparent 70%)}
.dark .ch__n,.dark .lit__lbl{color:#C8CCCE}
.rail.is-dark a.is-here::before{color:#C8CCCE}
.rail.is-dark a.is-here::after{background:#C8CCCE}
.hdr.hdr--dark{--hdr-on-bg:rgba(30,32,34,.82)}

/* 01: a development, read for what it raises */
.mr-scan{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1.15fr);align-items:center;gap:0 clamp(12px,1.6vw,22px);padding:clamp(20px,2.2vw,32px);background:#EEE8E5;border:1px solid rgba(85,89,92,.18)}
.mr-scan ul{list-style:none;margin-top:12px}
.mr-scan__in li{padding:9px 12px;margin-top:6px;background:#F7F2EF;border-left:3px solid #8A8A8A;font-family:var(--display);font-size:clamp(16px,1.25vw,18px);line-height:1.2;color:var(--dust)}
.mr-scan__out li{padding:10px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-size:clamp(18px,1.45vw,21px);line-height:1.2;color:var(--dust)}
.mr-scan__ln{position:relative;height:2px;background:var(--indigo);transform-origin:left}
.mr-scan__ln::after{content:"";position:absolute;right:-2px;top:-5px;border:6px solid transparent;border-left:9px solid var(--indigo);border-right:0}
/* 02: journalists and experts, Commwiser between them */
.mr-net{display:grid;grid-template-columns:minmax(0,1fr) minmax(70px,.7fr) minmax(0,.8fr) minmax(70px,.7fr) minmax(0,1fr);align-items:center;padding:clamp(24px,2.6vw,38px) clamp(18px,2vw,30px);background:#EEE8E5;border:1px solid rgba(85,89,92,.18)}
.mr-net__n{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.mr-net__n b{font-family:var(--display);font-weight:400;font-size:clamp(18px,1.5vw,22px);line-height:1.15;color:var(--dust)}
.mr-net__n small{font-family:var(--display);font-size:13.5px;line-height:1.3;color:rgba(21,25,27,.6)}
.mr-net__c svg{width:42px;height:auto;fill:#34373A}
.mr-net__l{position:relative;height:2px;background:rgba(85,89,92,.5)}
.mr-net__l span{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:max-content;max-width:140px;text-align:center;font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.12em;line-height:1.3;text-transform:uppercase;color:var(--indigo)}
.mr-net__ft{grid-column:1/-1;margin-top:clamp(20px,2.2vw,30px);text-align:center;font-family:var(--display);font-style:italic;font-size:16px;color:rgba(21,25,27,.66)}
/* 03 (dark): what has changed, why it matters, what remains uncertain */
.mr-ctx{list-style:none;counter-reset:c;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:clamp(24px,2.6vw,38px)}
.mr-ctx li{counter-increment:c;display:flex;flex-direction:column;gap:10px;min-height:clamp(150px,13vw,190px);padding:clamp(16px,1.6vw,22px);border-top:3px solid #C8CCCE;background:rgba(247,242,239,.06)}
.mr-ctx li::before{content:counter(c,decimal-leading-zero);font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;color:#C8CCCE}
.mr-ctx b{font-family:var(--display);font-weight:400;font-size:clamp(22px,1.9vw,28px);line-height:1.1;color:#F7F2EF}
.mr-ctx span{margin-top:auto;font-size:15.5px;line-height:1.45;color:rgba(247,242,239,.78)}
/* 04: the forms a perspective may take */
.mr-fmt{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.mr-fmt li{display:flex;align-items:flex-end;min-height:clamp(96px,8vw,120px);padding:14px 16px;background:#55595C;color:#F7F2EF}
.mr-fmt li:nth-child(2){background:#686C6F}.mr-fmt li:nth-child(3){background:#7A7F82}.mr-fmt li:nth-child(4){background:#8A8A8A}
.mr-fmt b{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.55vw,23px);line-height:1.1}
.mr-fmt__ft{margin-top:10px;font-family:var(--display);font-style:italic;font-size:15.5px;color:rgba(21,25,27,.62)}
/* 05: the process, one line through five steps */
.mr-steps{list-style:none;counter-reset:s;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.mr-steps::before{content:"";position:absolute;left:14px;right:14px;top:14px;height:2px;background:var(--indigo);transform-origin:left}
.mr-steps li{counter-increment:s;position:relative;display:flex;flex-direction:column;gap:8px;padding-top:44px}
.mr-steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#F7F2EF;border:2px solid var(--indigo);font-family:var(--display);font-size:11.5px;font-weight:700;color:var(--indigo)}
.mr-steps b{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.5vw,22px);line-height:1.15;color:var(--dust)}
.mr-steps span{font-size:15px;line-height:1.45;color:rgba(21,25,27,.74)}
/* play */
.mr-scan__in li:nth-child(1),.mr-scan__out li:nth-child(1),.mr-ctx li:nth-child(1),.mr-fmt li:nth-child(1),.mr-steps li:nth-child(1){--i:0}
.mr-scan__in li:nth-child(2),.mr-scan__out li:nth-child(2),.mr-ctx li:nth-child(2),.mr-fmt li:nth-child(2),.mr-steps li:nth-child(2){--i:1}
.mr-scan__in li:nth-child(3),.mr-scan__out li:nth-child(3),.mr-ctx li:nth-child(3),.mr-fmt li:nth-child(3),.mr-steps li:nth-child(3){--i:2}
.mr-scan__in li:nth-child(4),.mr-fmt li:nth-child(4),.mr-steps li:nth-child(4){--i:3}
.mr-steps li:nth-child(5){--i:4}
.js .mr-scan__in li,.js .mr-scan__out li,.js .mr-ctx li,.js .mr-fmt li,.js .mr-steps li{opacity:0;translate:0 12px}
.js .mr-scan.is-play .mr-scan__in li,.js .mr-ctx.is-play li,.js .mr-fmt.is-play li,.js .mr-steps.is-play li{opacity:1;translate:none;transition:opacity .45s ease calc(var(--i) * .14s + .1s),translate .55s var(--ease) calc(var(--i) * .14s + .1s)}
.js .mr-scan.is-play .mr-scan__out li{opacity:1;translate:none;transition:opacity .45s ease calc(var(--i) * .16s + 1s),translate .55s var(--ease) calc(var(--i) * .16s + 1s)}
.js .mr-scan__ln,.js .mr-steps::before{transform:scaleX(0)}
.js .mr-scan.is-play .mr-scan__ln{transform:none;transition:transform .5s var(--ease) .6s}
.js .mr-steps.is-play::before{transform:none;transition:transform 1.2s linear .1s}
.js .mr-net__n,.js .mr-net__l{opacity:0}
.js .mr-net.is-play .mr-net__n,.js .mr-net.is-play .mr-net__l{opacity:1;transition:opacity .5s ease}
.js .mr-net.is-play .mr-net__l{transition-delay:.35s}.js .mr-net.is-play .mr-net__c{transition-delay:.6s}
@media print{.js .mr-scan__in li,.js .mr-scan__out li,.js .mr-ctx li,.js .mr-fmt li,.js .mr-steps li,.js .mr-net__n,.js .mr-net__l{opacity:1;translate:none}.js .mr-scan__ln,.js .mr-steps::before{transform:none}}
@media (max-width:1179px){
  .mr-steps{grid-template-columns:minmax(0,1fr);row-gap:18px}
  .mr-steps::before{left:14px;right:auto;top:14px;bottom:14px;width:2px;height:auto;transform-origin:top}
  .js .mr-steps::before{transform:scaleY(0)}
  .mr-steps li{padding:2px 0 0 48px}
  .mr-fmt{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .rail.is-dark{background:rgba(43,46,48,.94)}
  .mr-scan{grid-template-columns:minmax(0,1fr);row-gap:18px}
  .mr-scan__ln{width:2px;height:28px;margin-left:14px;transform-origin:top}
  .mr-scan__ln::after{right:auto;left:-5px;top:auto;bottom:-2px;border:6px solid transparent;border-top:9px solid var(--indigo);border-bottom:0}
  .js .mr-scan__ln{transform:scaleY(0)}
  .mr-net{grid-template-columns:minmax(0,1fr);row-gap:0}
  .mr-net__l{width:2px;height:54px;margin:8px auto}
  .mr-net__l span{left:14px;bottom:auto;top:50%;transform:translateY(-50%);text-align:left}
  .mr-ctx{grid-template-columns:minmax(0,1fr)}
  .mr-ctx li{min-height:0}
}
@media (max-width:560px){
  .mr-fmt{grid-template-columns:minmax(0,1fr)}
  .mr-fmt li{min-height:64px}
}