/* Commwiser — inner.css. Every inner page: title block, chapter rail, chapters, the shared pictures (timeline,
   tiles, lifted panels, the dark block), and the close. */
/* =====================================================================================================
   Litigation PR page. V6's language without the home page's line: light grounds, one deep indigo band cut on
   the slash, tiles and panels, the curve, the glow, the redaction hero. Content is present as it scrolls into
   view, with one soft rise per group.
   ===================================================================================================== */
.js [data-grp]{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .45s var(--ease)}
.js [data-grp].is-shown{opacity:1;transform:none}
@media print{
  .js [data-grp]{opacity:1!important;transform:none!important}
}
.js .lit__ppp.is-shown ul>li{opacity:1;transform:none}
.lit__ppp ul::before{left:calc(-1 * var(--gutter) - var(--ind));top:-14px;bottom:-14px}
.js .ic :not(.a){stroke-dashoffset:0;transition:none}
.js .ic .a{opacity:1;transition:none}
body{background:#F7F2EF}
/* the title block */
.tb{position:relative;padding:calc(68px + clamp(30px,4vh,48px)) var(--gutter) clamp(26px,3vw,40px);border-bottom:1px solid var(--indigo)}
.tb__lbl{display:flex;align-items:center;gap:10px}
.tb__lbl .hchip{width:9px;height:9px}
.tb h1{margin-top:clamp(16px,1.8vw,24px);font-family:var(--display);font-weight:400;font-size:clamp(32px,3.7vw,54px);line-height:1.04;letter-spacing:-.015em;max-width:32ch;text-wrap:balance;color:var(--dust)}
.tb__sub{margin-top:clamp(12px,1.4vw,18px);font-family:var(--display);font-size:clamp(22px,2.1vw,30px);line-height:1.2;letter-spacing:-.01em;color:var(--indigo);max-width:30ch}
.tb__intro{margin-top:clamp(14px,1.6vw,22px);max-width:66ch;font-size:clamp(18px,1.35vw,20px);line-height:1.5;color:rgba(21,25,27,.8)}
.tb__chaps{list-style:none;display:flex;flex-wrap:wrap;gap:8px 0;margin-top:clamp(22px,2.4vw,34px);counter-reset:ch}
.tb__chaps li{counter-increment:ch;display:flex;align-items:baseline}
.tb__chaps li+li::before{content:"";width:1px;height:.9em;margin:0 clamp(12px,1.3vw,20px);background:rgba(21,25,27,.25);transform:skewX(-34.25deg);align-self:center}
.tb__chaps a{font-family:var(--display);font-size:clamp(15px,1.15vw,17px);line-height:1.3;color:var(--dust);border-bottom:1px solid transparent;transition:border-color .3s ease,color .3s ease}
.tb__chaps a::before{content:counter(ch,decimal-leading-zero);margin-right:.5em;font-size:.78em;letter-spacing:.08em;color:var(--indigo)}
.tb__chaps a:hover{color:var(--indigo);border-color:currentColor}
/* the guide: a rail and a reading column */
.guide{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);padding:0 var(--gutter)}
.rail{grid-column:1/span 3;position:sticky;top:84px;align-self:start;padding:clamp(28px,3vw,44px) 0 0;z-index:3}
.rail ol{list-style:none;counter-reset:ch;border-top:1px solid var(--line)}
.rail li{counter-increment:ch;border-bottom:1px solid var(--line)}
.rail a{position:relative;display:flex;align-items:baseline;gap:10px;padding:9px 0 9px 14px;font-family:var(--display);font-size:15px;line-height:1.3;color:rgba(21,25,27,.62);transition:color .3s ease}
.rail a::before{content:counter(ch,decimal-leading-zero);font-size:11.5px;letter-spacing:.08em;color:rgba(21,25,27,.5);min-width:2.2em;transition:color .3s ease}
.rail a::after{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--indigo);transform:scaleY(0);transition:transform .35s var(--ease)}
.rail a:hover{color:var(--dust)}
.rail a.is-here{color:var(--dust)}
.rail a.is-here::before{color:var(--indigo)}
.rail a.is-here::after{transform:none}
.read{grid-column:4/span 9;min-width:0}
.ch{position:relative;padding:clamp(44px,4.8vw,72px) 0 clamp(32px,3.4vw,52px);scroll-margin-top:72px}
.ch+.ch{border-top:1px solid var(--line)}
.ch__n{display:block;font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--indigo)}
.ch h2{margin-top:12px;font-family:var(--display);font-weight:400;font-size:clamp(28px,2.7vw,40px);line-height:1.1;letter-spacing:-.015em;max-width:22ch;color:var(--dust)}
.ch__take{margin-top:14px;font-family:var(--display);font-size:clamp(19px,1.55vw,22px);line-height:1.3;color:var(--dust);max-width:34ch}
/* chapter 5: the one dark moment. The block breaks out to the page's full width; the curve and the four moments on it */
.ch--dark{padding:0;border-top:0;--e:0px;--bg:#1C3E4E;--c:#A9CBD8;--chip:#6C9BAD;--rule:rgba(247,242,239,.22)}
.dark .lit__st,.dark .lit__lbl{color:#A9CBD8}
.dark{position:relative;color:#F7F2EF;width:var(--pw,100vw);margin:clamp(40px,4.4vw,70px) 0 0 calc(-1 * var(--readx,var(--gutter)));padding:calc(var(--wz) + clamp(20px,2.4vw,40px)) var(--gutter) clamp(70px,7vw,110px) var(--readx,var(--gutter));isolation:isolate;--wz:clamp(72px,8.4vw,128px)}
.rail.is-dark a{color:rgba(247,242,239,.72)}
.rail.is-dark a::before{color:rgba(247,242,239,.55)}
.rail.is-dark a.is-here{color:#F7F2EF}
.rail.is-dark a.is-here::before{color:#A9CBD8}
.rail.is-dark a.is-here::after{background:#A9CBD8}
.rail.is-dark ol,.rail.is-dark li{border-color:rgba(247,242,239,.22)}
.dark>.depth{z-index:-1;left:0;right:0;clip-path:none}
.dark .ch__n,.dark .lit__lbl{color:#A9CBD8}
.dark h2{color:#F7F2EF}
.dark__in{max-width:none}
.dark .wp{left:0;right:0}
.dark::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--wz);background:#F7F2EF;clip-path:polygon(0 100%,100% 100%,100% 0,calc(62% + var(--wz) / tan(55.753deg)) 0,62% 100%);pointer-events:none}
.dark{padding-bottom:calc(var(--wz) + clamp(50px,5vw,80px))}
.hdr.hdr--dark{--hdr-fg:#F7F2EF;--hdr-on-fg:#F7F2EF;--hdr-on-bg:rgba(17,27,33,.8)}
.dg__lb{display:block;font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo)}
/* chapter 10: the questions, all shown */
.qa{list-style:none;margin-top:clamp(22px,2.4vw,34px);border-top:1px solid var(--line);max-width:760px}
/* chapter 11 */
.ch--talk .lit__cta{margin-top:clamp(26px,2.8vw,40px);width:min(100%,720px);background:#EEE8E5;outline:1px solid var(--line)}
.ch--talk .lit__cta :focus-visible{outline-color:var(--steel-light)}
.guide__end{height:clamp(50px,6vw,90px)}
@media (max-width:1100px){
  .rail{grid-column:1/span 3}
  .read{grid-column:4/span 9}
  .rail a{font-size:14px}
}
@media (max-width:900px){
  .tb{padding-top:calc(60px + 26px);padding-bottom:22px}
  .tb__intro{font-size:17px}
  .tb__chaps{margin-top:18px;gap:6px 0}
  .tb__chaps a{font-size:14px}
  .tb__chaps{gap:10px 0}
  .guide{display:block;padding:0 var(--gutter)}
/* the rail becomes a chip bar under the header */
  .rail{position:sticky;top:60px;margin:0 calc(-1 * var(--gutter));padding:0;background:rgba(247,242,239,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
  .rail ol{display:flex;gap:6px;overflow-x:auto;padding:10px var(--gutter);border:0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .rail ol::-webkit-scrollbar{display:none}
  .rail li{flex:none;border:0}
  .rail a{padding:7px 12px;border:1px solid var(--line);white-space:nowrap;font-size:13.5px;color:rgba(21,25,27,.7)}
  .rail a::after{display:none}
  .rail a.is-here{background:var(--indigo);border-color:var(--indigo);color:#F7F2EF}
  .rail a.is-here::before{color:#A9CBD8}
  .ch{padding:48px 0 36px;scroll-margin-top:120px}
  .dark{margin:36px 0 0 calc(-1 * var(--gutter));padding:calc(var(--wz) + 10px) var(--gutter) calc(var(--wz) + 40px)}
  .rail.is-dark{background:rgba(28,62,78,.94)}
}
@media (min-width:901px){
  .guide{--railw:0px}
}
/* =====================================================================================================
   Version C — visual first. Each chapter is one visual object; words appear only as labels on it. The only
   running text is the five answers under Questions.
   ===================================================================================================== */
.tb__intro{font-family:var(--display);font-size:clamp(19px,1.5vw,22px);line-height:1.35;color:rgba(21,25,27,.8)}
/* an introduction of more than one paragraph */
.tb__intro p+p{margin-top:.7em}
.ch,.read>#who.ch{padding:clamp(48px,5vw,76px) 0 clamp(36px,3.6vw,56px)}
.vis{margin-top:clamp(24px,2.6vw,38px)}
/* 02: four audience tiles */
.who-t{grid-template-columns:repeat(4,minmax(0,1fr))}
.who-t .tile{--tile:#1C3E4E;justify-content:flex-start;min-height:clamp(200px,17vw,248px)}
.who-t .tile>.ic{position:static;width:clamp(50px,4.4vw,62px);color:#F7F2EF;opacity:.92}
.who-t .tile__t{margin-top:auto;padding-top:24px;font-size:clamp(20px,1.65vw,25px)}
@media (max-width:1179px){
  .who-t{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .ch,.read>#who.ch{padding:44px 0 32px}
}
@media (max-width:700px){
  .who-t{grid-template-columns:minmax(0,1fr)}
  .who-t .tile{min-height:150px}
}
/* the home page's Mirovia map rule (.rail aspect-ratio, >=700px) must not reach the chapter rail */
.guide .rail{aspect-ratio:auto}
/* the chapter rail (the chip bar on phones) moves up with the header when it slides away and comes back down with
   it, so the bar never hangs in the middle of the page with a gap above it */
.guide .rail{transition:transform .5s cubic-bezier(.2,.7,.1,1)}
.hdr.is-away ~ main .guide .rail{transform:translateY(-60px)}
.ch__take{color:var(--indigo)}
/* the dark block on ink, for pages that have no service colour of their own (the overviews) */
.ch--ink{--bg:#15191B}
.ch--ink .depth{background:#15191B}
.ch--ink .depth::before{background:radial-gradient(58% 36% at 82% 16%,rgba(108,155,173,.13),transparent 70%),radial-gradient(52% 34% at 10% 72%,rgba(184,152,104,.1),transparent 70%)}
@media (max-width:900px){
  .guide:has(.ch--ink) .rail.is-dark{background:rgba(21,25,27,.94)}
}
/* a dark first chapter starts flush under the title block, so the chapter rail begins on it rather than across its edge */
.read>.ch--dark:first-child .dark{margin-top:0}
/* chapter text: a few paragraphs of the client's words under a chapter's picture (or above it), at reading measure */
.ch__txt{max-width:68ch;margin-top:clamp(22px,2.4vw,34px)}
.ch__txt p{font-size:clamp(17px,1.3vw,19px);line-height:1.6;color:rgba(21,25,27,.84)}
.ch__txt p+p{margin-top:.8em}
.dark .ch__txt p{color:rgba(247,242,239,.84)}
/* points: a numbered list of named points, each with a line or two; two columns when there is room */
.pts{list-style:none;counter-reset:pt;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);margin-top:clamp(22px,2.4vw,34px);border-top:1px solid var(--line)}
.pts li{counter-increment:pt;display:grid;grid-template-columns:2.4em minmax(0,1fr);padding:16px 0;border-bottom:1px solid var(--line)}
.pts li::before{content:counter(pt,decimal-leading-zero);font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:.1em;line-height:1.9;color:var(--indigo)}
.pts b{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.5vw,22px);line-height:1.2;color:var(--dust)}
.pts p{grid-column:2;margin-top:6px;font-size:16px;line-height:1.5;color:rgba(21,25,27,.74)}
@media (max-width:700px){
  .pts{grid-template-columns:minmax(0,1fr)}
}
/* a sub-heading inside a chapter, above a list of points */
.ch__sub{margin-top:clamp(36px,4vw,56px);font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo)}
.ch__sub+.pts{margin-top:14px}
/* the rail is this page's own contents, not the site's: say so above it (articles carry their own label) */
@media (min-width:901px){
  .guide .rail::before{content:"On this page";display:block;margin-bottom:12px;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo)}
  .ar .guide .rail::before{content:none}
}
/* a disclaimer at the foot of a page's reading column: quiet, small, always shown in full */
.disc{max-width:72ch;margin-top:clamp(36px,4vw,56px);padding-top:18px;border-top:1px solid var(--line)}
.disc h2{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(21,25,27,.62)}
.disc p{margin-top:10px;font-size:14.5px;line-height:1.6;color:rgba(21,25,27,.66)}