/* Commwiser — litigation-pr: what only this page uses. */
.dark .arc__stage circle{fill:#1C3E4E;stroke:#A9CBD8;stroke-width:1.4}
.dark .arc__stage text{fill:rgba(247,242,239,.85);font-size:15px;letter-spacing:.17em}
.js .dark .arc__stage{opacity:1}
.js .dark .arc__stage.is-on text{fill:#F7F2EF}
.js .dark .arc__stage.is-on circle{fill:#A9CBD8}
.dark .arc__mark{background:#F7F2EF;box-shadow:0 0 0 5px rgba(169,203,216,.28)}
.dark .arc__line{stroke:#A9CBD8}
.dark .arc__base,.dark .arc__ghost{stroke:rgba(247,242,239,.22)}
.dark .lit__m h4{color:#F7F2EF}
.dark .lit__m::before{background:rgba(247,242,239,.2)}
.dark .lit__m::after{background:#A9CBD8}
.dark .lit__m ul li{color:rgba(247,242,239,.84)}
/* the headlines: texture only, small, on three lanes that fall between the stage labels */
.dark .hl{z-index:0}
.dark .hl__lane{font-size:14.5px!important;letter-spacing:.02em}
.dark .hl[data-lv="0"]{--a:.07}
.dark .hl[data-lv="1"]{--a:.09}
.dark .hl[data-lv="2"]{--a:.12}
.dark .hl[data-lv="3"]{--a:.15}
.dark .hl[data-lv="4"]{--a:.09}
.dark .hl__lane:nth-child(1){top:30%!important}
.dark .hl__lane:nth-child(2){top:66%!important}
.dark .hl__lane:nth-child(3){top:92%!important}
.dark .hl__lane:nth-child(4){display:none}
.dark .arc svg,.dark .arc__mark{position:relative;z-index:1}
.dark .arc__mark{position:absolute}
.dark .lit__jrn{margin-top:clamp(30px,3.2vw,48px)}
.dark .lit__ms ol{grid-template-columns:repeat(4,minmax(0,1fr))}
.dark .lit__m h4{font-size:clamp(21px,1.8vw,26px)}
.dark .arc{width:100%;margin:0}
/* the drawn diagrams: the icon family in small SVG glyphs, laid out in HTML so the words stay readable on phones */
.dg{margin-top:clamp(24px,2.6vw,36px);max-width:720px}
.dg__g{display:block;width:30px;height:30px;overflow:visible;fill:none;stroke:var(--indigo);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.dg--align{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:start;column-gap:12px;padding-top:6px}
.dg__node{display:flex;flex-direction:column;align-items:center;text-align:center;width:clamp(96px,10vw,130px)}
.dg__node .dg__g{width:60px;height:60px;padding:14px;border:1px solid var(--indigo);border-radius:50%}
.dg__node b{margin-top:10px;font-family:var(--display);font-weight:400;font-size:clamp(15px,1.15vw,17px);color:var(--dust)}
.dg__node small{margin-top:3px;font-family:var(--display);font-style:italic;font-size:13px;line-height:1.3;color:var(--indigo)}
.dg__link{display:flex;flex-direction:column;align-items:center;padding-top:6px}
.dg__link .dg__lb{text-align:center}
.dg__link i{display:block;position:relative;width:100%;height:1px;margin-top:17px;background:rgba(34,77,95,.35)}
.dg__link i::after{content:"";position:absolute;left:50%;top:-3px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--indigo)}
@media (max-width:900px){
  .dg--align{grid-template-columns:1fr;row-gap:10px;justify-items:center}
  .dg__node{width:auto}
  .dg__link{width:100%;align-items:center}
  .dg__link i{width:1px;height:28px;margin:8px 0 0}
  .dg__link i::after{left:-3px;top:50%;margin:-3.5px 0 0}
}
/* the editorial images: wider than the reading column, framed quietly, with air above and below */
.guide__img{margin:clamp(56px,6vw,72px) 0;border-top:1px solid var(--indigo);padding-top:clamp(14px,1.5vw,20px)}
.guide__img .im{position:relative;display:block;padding:16px;border:1px solid rgba(34,77,95,.3);background:#F7F2EF}
.guide__img .im::before{content:"";display:block;background:linear-gradient(160deg,#224D5F,#1C3E4E 60%,#2E5668);background-image:repeating-linear-gradient(124.25deg,rgba(108,155,173,.14) 0 22px,rgba(108,155,173,0) 22px 56px),linear-gradient(160deg,#224D5F,#1C3E4E 60%,#2E5668)}
.guide__img .im--wide::before{aspect-ratio:21/9}
.guide__img .im img{position:absolute;inset:16px;width:calc(100% - 32px);height:calc(100% - 32px);object-fit:cover;display:block;color:transparent}
.guide__img figcaption{margin-top:14px;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo);line-height:1.4}
.qa li{display:grid;grid-template-columns:clamp(40px,4vw,56px) minmax(0,1fr);column-gap:clamp(14px,1.6vw,24px);padding:clamp(18px,1.9vw,28px) 0;border-bottom:1px solid var(--line)}
.qa li::before{content:"Q";font-family:var(--display);font-size:clamp(22px,2vw,28px);line-height:1;color:var(--indigo)}
.qa h3{font-family:var(--display);font-weight:400;font-size:clamp(21px,1.75vw,26px);line-height:1.2;letter-spacing:-.01em;color:var(--dust)}
.qa p{margin-top:8px;font-size:clamp(17px,1.25vw,18.5px);line-height:1.55;color:rgba(21,25,27,.84)}
@media (max-width:900px){
  .dark .lit__ms ol{display:block}
  .guide__img{margin:40px 0}
  .guide__img .im{padding:10px}
  .guide__img .im img{inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
  .guide__img .im--wide::before,.guide__img .im--tall::before{aspect-ratio:16/10}
  .qa li{grid-template-columns:32px minmax(0,1fr)}
}
/* 01: the two arenas as one split picture. The public half is the newsprint photograph under indigo, cut from the
   court half on the mark's slash; a steel line runs along the cut */
.split{--h:clamp(440px,36vw,520px);--dx:calc(var(--h) / tan(55.753deg));--sx:46%;position:relative;height:var(--h);background:#EEE8E5;overflow:hidden;isolation:isolate}
.split__seam{position:absolute;inset:0;background:#6C9BAD;clip-path:polygon(calc(var(--sx) + var(--dx) / 2 - 3px) 0,100% 0,100% 100%,calc(var(--sx) - var(--dx) / 2 - 3px) 100%)}
.split__pub{position:absolute;inset:0;background:#1C3E4E;clip-path:polygon(calc(var(--sx) + var(--dx) / 2) 0,100% 0,100% 100%,calc(var(--sx) - var(--dx) / 2) 100%);color:#F7F2EF}
.split__pub>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;color:transparent}
.split__pub::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,62,78,.74),rgba(28,62,78,.88))}
.split__court,.split__in{position:absolute;z-index:1;top:clamp(28px,3vw,44px);display:flex;flex-direction:column}
.split__court{left:clamp(24px,3vw,44px);width:34%}
.split__in{right:clamp(24px,3vw,44px);bottom:clamp(28px,3vw,44px);width:30%}
.split .dg__lb{color:var(--indigo)}
.split__pub .dg__lb{color:#A9CBD8}
.split__glyphs{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:18px}
.split__glyphs .dg__g{width:68px;height:68px;stroke-width:.6}
.split__pub .split__glyphs .dg__g{width:46px;height:46px;stroke:#F7F2EF;stroke-width:.8}
.split__list{list-style:none;margin-top:20px}
.split__list li{font-family:var(--display);font-size:clamp(20px,1.75vw,26px);line-height:1.28;color:var(--dust)}
.split__pub .split__list li{color:#F7F2EF}
.split__foot{margin-top:20px;font-family:var(--display);font-style:italic;font-size:clamp(17px,1.35vw,20px);line-height:1.3;color:var(--indigo)}
.split__pub .split__foot{margin-top:auto;color:#A9CBD8}
/* 06: the eight steps as a process strip; its line draws with the scroll as the timeline's does */
.ps{--g:clamp(8px,1vw,14px);--nd:clamp(60px,5.2vw,76px);position:relative}
.ps ol{list-style:none;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--g)}
.ps li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.ps__node{position:relative;z-index:1;display:grid;place-items:center;width:var(--nd);height:var(--nd);border-radius:50%;border:1.5px solid var(--indigo);background:#F7F2EF;transition:background .35s ease}
.ps__node .ic{width:56%;color:var(--indigo);transition:color .35s ease}
/* the strip [data-play]: the line draws in 2s and each node fills as it is reached (--at); at 1179px and below the
   strip is laid out in rows and shown whole */
.ps li:nth-child(2){--at:.286s}.ps li:nth-child(3){--at:.571s}.ps li:nth-child(4){--at:.857s}.ps li:nth-child(5){--at:1.143s}
.ps li:nth-child(6){--at:1.429s}.ps li:nth-child(7){--at:1.714s}.ps li:nth-child(8){--at:2s}
.js .ps .ps__node{transition:background .35s ease var(--at,0s)}
.js .ps .ps__node .ic{transition:color .35s ease var(--at,0s)}
.js .ps.is-play .ps__node{background:var(--indigo)}
.js .ps.is-play .ps__node .ic{color:#F7F2EF}
.ps__n{margin-top:14px;font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.14em;color:var(--indigo)}
.ps h3{margin-top:6px;font-family:var(--display);font-weight:400;font-size:clamp(15px,1.15vw,17px);line-height:1.2;color:var(--dust)}
.ps__line{position:absolute;left:calc((100% - 7 * var(--g)) / 16);right:calc((100% - 7 * var(--g)) / 16);top:calc(var(--nd) / 2);height:1px;background:rgba(34,77,95,.3)}
.ps__fill{position:absolute;inset:-.5px 0;background:var(--indigo);transform-origin:left}
.js .ps__fill{transform:scaleX(0);transition:transform 2s linear}
.js .ps.is-play .ps__fill{transform:none}
.ch .ps+.guide__img{margin-bottom:0}
@media print{
  .js .ps__fill{transform:none}
}
/* 07: twelve light tiles, icon above name */
.kinds-c{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,16px)}
.kinds-c li{display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:clamp(140px,11.5vw,168px);padding:clamp(18px,1.8vw,24px);background:#EEE8E5;border:1px solid rgba(34,77,95,.18);transition:translate .4s var(--ease),border-color .4s ease}
.kinds-c .ic{width:clamp(40px,3.4vw,48px);color:var(--indigo)}
.kinds-c h3{font-family:var(--display);font-weight:400;font-size:clamp(17px,1.35vw,20px);line-height:1.2;color:var(--dust)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .kinds-c li:hover{translate:0 -3px;border-color:rgba(34,77,95,.5)}
}
/* 08: the alignment diagram, large, on the boardroom photograph under indigo */
.photo-dg{--nd:clamp(72px,6vw,88px);position:relative;display:flex;flex-direction:column;justify-content:center;min-height:clamp(380px,32vw,460px);background:#1C3E4E;overflow:hidden;isolation:isolate}
.photo-dg>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;color:transparent}
.photo-dg::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(28,62,78,.8),rgba(28,62,78,.9))}
.photo-dg__in{padding:clamp(30px,3.4vw,52px) clamp(24px,3vw,48px)}
.photo-dg .dg--align{max-width:none;margin:0}
.photo-dg .dg__g{stroke:#F7F2EF}
.photo-dg .dg__node{width:clamp(120px,12vw,170px)}
.photo-dg .dg__node .dg__g{width:var(--nd);height:var(--nd);padding:calc(var(--nd) * .26);border-color:rgba(247,242,239,.7)}
.photo-dg .dg__node b{color:#F7F2EF;font-size:clamp(18px,1.5vw,22px)}
.photo-dg .dg__node small{color:#A9CBD8;font-size:14px}
.photo-dg .dg__lb{color:#A9CBD8}
.photo-dg .dg__link{padding-top:calc(var(--nd) / 2 - 31px)}
.photo-dg .dg__link i{background:rgba(247,242,239,.42)}
.photo-dg .dg__link i::after{background:#A9CBD8}
.photo-dg__foot{margin-top:clamp(30px,3.2vw,48px);text-align:center;font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#A9CBD8}
/* 09: questions in two ruled columns */
.qa.qa-c{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,3vw,52px);max-width:none;border-top:0}
.qa.qa-c li{display:block;padding:clamp(16px,1.7vw,24px) 0;border-top:1px solid var(--line);border-bottom:0}
.qa.qa-c li::before{content:none}
.qa.qa-c h3{font-size:clamp(19px,1.5vw,22px)}
.qa.qa-c p{margin-top:6px}
@media (max-width:1179px){
  .split{display:flex;flex-direction:column;height:auto;background:none;overflow:visible}
  .split__seam{display:none}
  .split__court,.split__in{position:static;width:auto;inset:auto}
  .split__court{order:-1}
  .split__court{padding:clamp(22px,4vw,32px);background:#EEE8E5}
  .split__pub{position:relative;clip-path:polygon(0 18px,100% 0,100% 100%,0 100%)}
  .split__in{position:relative;inset:auto;padding:calc(18px + clamp(22px,4vw,32px)) clamp(22px,4vw,32px) clamp(22px,4vw,32px)}
  .split__pub .split__foot{margin-top:20px}
  .kinds-c{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ps ol{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:34px}
  .ps__line{display:none}
  .js .ps .ps__node{background:var(--indigo)}
  .js .ps .ps__node .ic{color:#F7F2EF}
  .ps li::after{content:"";position:absolute;top:calc(var(--nd) / 2);left:calc(50% + var(--nd) / 2);width:calc(100% - var(--nd) + var(--g));height:1px;background:rgba(34,77,95,.3)}
  .ps li:nth-child(4n)::after{display:none}
}
@media (max-width:900px){
  .qa.qa-c{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .kinds-c{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kinds-c li{min-height:128px}
  .ps{--nd:52px}
  .ps ol{grid-template-columns:minmax(0,1fr);row-gap:18px}
  .ps li{flex-direction:row;align-items:center;text-align:left;gap:14px}
  .ps__n{margin-top:0}
  .ps h3{margin-top:0}
  .ps li::after{top:var(--nd);left:calc(var(--nd) / 2);width:1px;height:18px}
  .ps li:nth-child(4n)::after{display:block}
  .ps li:last-child::after{display:none}
  .photo-dg .dg__link{padding-top:0}
}
/* hover: the tile floods with the page's indigo, icon and name turn light (polish only) */
.kinds-c li{transition:translate .4s var(--ease),border-color .4s ease,background-color .35s ease}
.kinds-c li .ic,.kinds-c li h3{transition:color .35s ease}
@media (hover:hover){
  .kinds-c li:hover{background:#1C3E4E;border-color:#1C3E4E}
  .kinds-c li:hover .ic{color:#9FC1CF}
  .kinds-c li:hover h3{color:#F7F2EF}
}

/* the 3P framework panels (moved from inner.css: only this page uses them) */
.ch--ppp .lit__ppp{margin-top:clamp(26px,3vw,44px)}
.js .ch--ppp.is-shown .lit__ppp ul>li{opacity:1;transform:none}
.ch--ppp .lit__ppp ul{position:relative;isolation:isolate}
.ch--ppp .lit__ppp li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px;padding:clamp(24px,2.4vw,36px) clamp(22px,2.2vw,32px) clamp(26px,2.6vw,40px)}
.ch--ppp .lit__ppp h4{font-size:clamp(30px,2.6vw,38px)}
.ch--ppp .lit__ppp p{order:3;flex-basis:100%;margin-top:12px;font-size:clamp(16.5px,1.2vw,18px);line-height:1.5;color:rgba(247,242,239,.86)}
.ch--ppp .lit__ppp .ic{width:clamp(36px,3vw,44px)}
.ch--ppp .lit__ppp ul::before{background:repeating-linear-gradient(124.25deg,rgba(34,77,95,.12) 0 18px,transparent 18px 72px)}
.ch--ppp .ppp-c li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"ic n" "w w" "p p";align-items:start;padding:clamp(26px,2.6vw,40px) clamp(22px,2.2vw,34px) clamp(28px,2.8vw,42px);min-height:clamp(250px,21vw,310px)}
.ch--ppp .ppp-c .ic{grid-area:ic;width:clamp(54px,4.8vw,70px);margin:0;color:#A9CBD8}
.ch--ppp .ppp-c .lit__n{grid-area:n}
.ch--ppp .ppp-c h4{grid-area:w;align-self:end;margin-top:clamp(30px,3.2vw,52px);font-size:clamp(34px,3vw,46px)}
.ch--ppp .ppp-c p{grid-area:p;margin-top:10px;font-family:var(--display);font-size:clamp(18px,1.4vw,21px);line-height:1.3;color:rgba(247,242,239,.9)}
@media (max-width:900px){
  .ch--ppp .ppp-c li{min-height:0}
}

/* =====================================================================================================
   Commwiser's content (Avani Shukla, 9 Oct): the full introduction, six audiences, the four stages written out, the
   3P framework in full, eight types of dispute from their own work, and the lawyers passage.
   ===================================================================================================== */
.tb__intro{max-width:62ch}
.ch__close{margin-top:clamp(18px,2vw,26px);max-width:62ch;font-family:var(--display);font-size:clamp(18px,1.4vw,21px);line-height:1.35;color:var(--indigo)}
/* 02: six audiences, three across, each with its line */
.who-6{grid-template-columns:repeat(3,minmax(0,1fr))}
.who-6 .tile{min-height:clamp(230px,18vw,270px)}
.who-6 .tile__t{padding-top:20px;font-size:clamp(20px,1.55vw,23px)}
.who-6 .tile p{margin-top:8px;font-size:clamp(16px,1.15vw,17.5px);line-height:1.45;color:rgba(247,242,239,.86)}
/* 03: each stage under its stretch of the curve: the two paragraphs, then the work it involves as tags */
.dark .lit__m p{margin-top:10px;font-size:clamp(15.5px,1.1vw,17px);line-height:1.55;color:rgba(247,242,239,.84)}
.dark .lit__m p+p{margin-top:8px}
.dark .lit__acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.dark .lit__acts li{padding:4px 10px;border:1px solid rgba(169,203,216,.4);font-family:var(--display);font-size:13.5px!important;line-height:1.3;color:#A9CBD8!important}
.dark .lit__ms ol{column-gap:clamp(18px,2vw,32px)}
/* 04: the 3P panels carry their paragraphs; Preempt its line */
.ch--ppp .ppp-c li{grid-template-areas:"ic n" "w w" "t t" "p p"}
.ch--ppp .ppp-c .ppp__tag{grid-area:t;margin-top:10px;font-family:var(--display);font-weight:400;font-size:clamp(18px,1.4vw,21px);line-height:1.3;color:#F7F2EF}
.ch--ppp .ppp-c p{font-family:var(--body);font-size:clamp(16px,1.15vw,17.5px);line-height:1.55;color:rgba(247,242,239,.86)}
/* 06: eight types of dispute, from Commwiser's own work: icon, name and what they did, two across */
.kinds-c.kinds-8{grid-template-columns:repeat(2,minmax(0,1fr))}
.kinds-8 li{flex-direction:row;justify-content:flex-start;align-items:flex-start;gap:18px;min-height:0}
.kinds-8 .ic{flex:none;margin-top:2px}
.kinds-8 h3{font-size:clamp(19px,1.5vw,22px)}
.kinds-8 p{margin-top:8px;font-size:clamp(16px,1.15vw,17.5px);line-height:1.5;color:rgba(21,25,27,.8);transition:color .35s ease}
@media (hover:hover){.kinds-8 li:hover p{color:rgba(247,242,239,.86)}}
/* 07: the lawyers passage beneath the diagram */
@media (max-width:1179px){.who-6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.kinds-c.kinds-8{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.who-6{grid-template-columns:minmax(0,1fr)}.who-6 .tile{min-height:0}}
/* titles at one height in each row, whatever the length of the text beneath */
.who-6 .tile__t{margin-top:clamp(26px,2.4vw,38px)}
.ch--ppp .ppp-c h4{align-self:start;margin-top:clamp(26px,2.6vw,42px)}
.ch--ppp .ppp-c li{min-height:0;align-content:start}
/* phones: the tall curve keeps its strip on the right (the full-width rule is for the wide curve); the stage text
   keeps clear of it */
@media (max-width:900px){
  .dark .arc--tall{width:54px}
  .dark .lit__m{padding-right:72px}
}