/* Commwiser — site.css. Shared by every page: tokens, base, type, links and buttons, header and menu, footer,
   back to top, tiles, panels, icons, the dark grounds and their slash cut. */
:root{--ink:#F7F2EF;--ink-2:#EEE8E5;
  --indigo:#224D5F;--indigo-deep:#1C3E4E;
  --steel-light:#486675;
  --grey:#757575;--grey-light:#5F5F5F;
  --foggy-light:#D6D3BA;
  --dust:#15191B;
  --display:"Arsenal",Calibri,"Carlito",system-ui,sans-serif;
  --body:Calibri,"Carlito","Segoe UI",system-ui,sans-serif;
  --gutter:clamp(20px,4.2vw,64px);
  --col-gap:clamp(12px,1.6vw,24px);
  --ease:cubic-bezier(.2,.7,.1,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --line:rgba(21,25,27,.14);
  --h:clamp(32px,3.6vw,54px);      /* every section heading */
  --tag:clamp(21px,2vw,30px);      /* the line beneath it */
  --slash:34.25deg;   /* the mark's slash: 55.75 degrees from horizontal, measured from the artwork */
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--dust);font-family:var(--body);font-size:19px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
:focus-visible{outline:2px solid var(--steel-light);outline-offset:3px}
:focus:not(:focus-visible){outline:none}
.hmenu :focus-visible{outline-color:#6C9BAD}
::selection{background:var(--foggy-light);color:#15191B}
svg use{fill:currentColor}
.caps{font-family:var(--display);text-transform:uppercase;font-weight:400;letter-spacing:-.005em;line-height:.98}
.micro{font-family:var(--body);font-size:14px;line-height:1.4;color:var(--grey-light)}
.lbl{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.16em;line-height:1.3;text-transform:uppercase;color:var(--steel-light)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;mix-blend-mode:soft-light;background-image:var(--grain)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:17px;line-height:1.2;padding:13px 22px;border:1px solid var(--dust);transition:background .3s ease,color .3s ease,border-color .3s ease}
.btn:hover{background:var(--dust);color:var(--ink)}
.js .hero__mark{opacity:0;transition:opacity .9s ease 1.6s}
.js .dot{transform:translateX(-50%) scale(0);transition:transform .35s var(--ease),background .35s var(--ease)}
.rail{position:relative;margin-top:clamp(60px,7vw,110px)}
.rail::before{content:"";position:absolute;left:0;right:0;top:22px;height:1px;background:var(--line)}
.rail__line{position:absolute;left:0;right:0;top:22px;height:1px;background:var(--steel-light);transform-origin:left}
.js .close__line{transform:scaleY(0);transform-origin:top;transition:transform 1.2s var(--ease-io)}
.js .close__mark{opacity:0;transition:opacity .8s ease .9s}
.contact{background:var(--ink-2);color:var(--dust);padding:clamp(56px,6vw,96px) var(--gutter) 34px;border-top:1px solid var(--line)}
.contact__lockup{display:block;width:min(100%,1180px);height:auto;color:var(--dust);margin-bottom:clamp(44px,5vw,76px)}
/* the footer's site map: every page, from every page */
.fmap{row-gap:28px;margin-bottom:clamp(36px,4vw,56px);padding-bottom:clamp(28px,3vw,40px);border-bottom:1px solid var(--line)}
.fmap h2{margin-bottom:12px;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dust)}
.fmap ul{list-style:none}
.fmap li+li{margin-top:7px}
.fmap a{font-family:var(--display);font-size:15.5px;line-height:1.3;color:rgba(21,25,27,.72);border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.fmap a:hover{color:var(--dust);border-color:currentColor}
.fmap__c1{grid-column:1/span 5}.fmap__c2{grid-column:6/span 4}.fmap__c3{grid-column:10/span 3}
@media (max-width:900px){.fmap__c1{grid-column:1/-1}.fmap__c2{grid-column:1/span 6}.fmap__c3{grid-column:7/span 6}}
@media (max-width:560px){.fmap__c2,.fmap__c3{grid-column:1/-1}}
.contact__grid{row-gap:18px}
.contact__grid a{border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
.contact__grid a:hover{color:var(--dust);border-color:currentColor}
.cg1{grid-column:1/span 4}
.cg2{grid-column:6/span 3}
.cg3{grid-column:10/span 3;justify-self:end;align-self:end}
/* ---------- back to top: a small solid square, like Enquire; it steps aside while the footer is on screen ---------- */
.totop{position:fixed;right:var(--gutter);bottom:max(20px,env(safe-area-inset-bottom));z-index:50;display:grid;place-items:center;width:46px;height:46px;background:#15191B;color:#F7F2EF;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s ease,transform .35s var(--ease),visibility 0s linear .35s,background .3s ease}
.totop.is-on:not(.is-foot){opacity:1;visibility:visible;transform:none;transition:opacity .35s ease,transform .35s var(--ease),visibility 0s,background .3s ease}
.totop:hover{background:#224D5F}
.totop svg{width:16px;height:16px;display:block}
.hmenu-open .totop{opacity:0;visibility:hidden}
@media print{
  .totop{display:none}
}
/* ---------- a jump from a link lands with the line drawn and the content in place, not replayed ---------- */
.is-jump .line *,.is-jump .line *::before,.is-jump .line *::after,.is-jump [data-reveal],.is-jump [data-reveal] *,.is-jump .rail *,.is-jump .rail *::before{transition:none!important}
@media (max-width:900px){
/* phones and small tablets: the line runs down the left, under the mark, and everything hangs off its right */
  :root{--h:clamp(30px,7.6vw,46px);--tag:clamp(20px,5.4vw,26px)}
  .cg1,.cg2,.cg3{grid-column:1/-1;justify-self:start}
}
@media (max-width:699px){
/* tap targets: at least 44px, without changing how anything looks */
  .hdr__menu{min-width:44px;min-height:44px;justify-content:center}
  .hdr__cta,.go,.lt__go,.contact__grid a,.cta__mail{position:relative}
  .hdr__cta::after{content:"";position:absolute;inset:-6px -2px}
  .go::after,.lt__go::after,.contact__grid a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  .hmenu__more a{padding:11px 0}
/* phones: the region line turns vertical and runs down the left like the main line; the mark travels down it */
  .rail{margin-top:44px;padding-left:46px}
  .rail::before,.rail__line{left:16px;right:auto;top:12px;width:1px;height:var(--span,0px)}
}
@media print{
  *,*::before,*::after{transition:none!important}
  body::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0ms!important;animation:none!important}
  html{scroll-behavior:auto}
}
/* alliance credit in the footer, set in type until Commwiser supplies the Mirovia logo file */
.mirovia{display:flex;flex-direction:column;align-items:flex-end;gap:7px;margin:0 0 16px;font-family:var(--display);font-weight:400;font-size:11px;letter-spacing:.3em;line-height:1.3;text-transform:uppercase;color:rgba(21,25,27,.82)}
.mirovia svg{display:block;width:clamp(104px,8.3vw,120px);height:auto;color:var(--dust)}
.mirovia span{margin-right:-.3em}
.cg3 .micro{text-align:right}
@media (max-width:900px){
  .mirovia{align-items:flex-start}
  .mirovia span{margin-right:0}
  .mirovia svg{width:96px}
  .cg3 .micro{text-align:left}
}
/* ---------- shared header: on screen from the first second. Litigation PR stands apart from the other links,
     next to an enquiry button; the menu gives two ways in (what we do, who we work with). */
.hdr{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;align-items:center;gap:clamp(16px,2vw,32px);padding:14px var(--gutter);color:var(--hdr-fg,#FFFAF8);transition:background .4s ease,color .4s ease}
.hdr.is-on{background:var(--hdr-on-bg,rgba(11,13,14,.84));color:var(--hdr-on-fg,#FFFAF8);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.hmenu-open .hdr{background:#0B0D0E;color:#FFFAF8}
.hdr__logo{display:block;flex:none;width:clamp(132px,11vw,164px);color:inherit}
.hdr__logo svg{display:block;width:100%;height:auto}
.hdr__svcs{display:flex;align-items:center;gap:clamp(14px,1.7vw,28px);list-style:none;margin-left:auto;font-family:var(--display);font-size:clamp(15px,1.1vw,16.5px);font-weight:400}
.hdr__svcs a{display:inline-flex;align-items:center;gap:8px;padding:6px 0;opacity:.88;white-space:nowrap;transition:opacity .3s ease,background .3s ease}
.hdr__svcs a:hover{opacity:1}
.hdr__svcs a.is-lead{opacity:1;font-weight:700;padding:8px 15px;background:#1C3E4E;color:#F7F2EF}
.hdr__svcs a.is-lead:hover{background:#224D5F}
.hmenu-open .hdr__svcs a.is-lead{background:#3E7C96}
.hchip{flex:none;display:block;width:9px;height:9px;background:var(--c)}
.hdr__cta{flex:none;font-family:var(--display);font-size:15px;padding:9px 18px;border:1px solid currentColor;transition:background .3s ease,color .3s ease}
.hdr__cta:hover{background:#FFFAF8;color:#0B0D0E;border-color:#FFFAF8}
.hdr__menu{flex:none;display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-size:15px;padding:9px 0;color:inherit}
.hdr__menu i{display:block;width:20px;height:9px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
.hmenu{position:fixed;inset:0;z-index:69;display:grid;align-content:safe center;padding:clamp(84px,11vh,130px) var(--gutter) clamp(30px,5vh,60px);background:#0B0D0E;color:#FFFAF8;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s;overflow-y:auto}
.hmenu-open .hmenu{opacity:1;visibility:visible;transition:opacity .35s ease}
.hmenu__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,5vw,90px);width:min(1100px,100%);margin-inline:auto}
.hmenu h2{font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.16em;line-height:1.3;text-transform:uppercase;color:#6C9BAD;padding-bottom:14px;border-bottom:1px solid rgba(255,250,248,.14)}
.hmenu ul{list-style:none}
.hmenu li a{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid rgba(255,250,248,.14);font-family:var(--display);font-size:clamp(19px,1.8vw,25px);line-height:1.15;transition:padding-left .4s ease}
.hmenu li a:hover{padding-left:8px}
.hmenu__more{display:flex;flex-wrap:wrap;gap:10px clamp(20px,3vw,44px);width:min(1100px,100%);margin:clamp(26px,4vh,46px) auto 0;font-family:var(--display);font-size:18px}
.hmenu__more a{opacity:.8}
.hmenu__more a:hover{opacity:1}
@media (max-width:1000px){
  .hdr__svcs li:not(.is-keep){display:none}
}
@media (max-width:900px){
  .hmenu{align-content:start}
  .hmenu__cols{grid-template-columns:minmax(0,1fr)}
  .hmenu li a{padding:11px 0}
  .hdr__cta{padding:8px 13px;font-size:14px}
  .hdr__menu span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
}
@media (max-width:620px){
  .hdr__svcs{display:none}
  .hdr__cta{margin-left:auto}
}
@media print{
  .hdr,.hmenu{display:none}
}
.hdr{--hdr-fg:#15191B;--hdr-cta-bg:#15191B;--hdr-cta-fg:#FFFAF8;--hdr-on-bg:rgba(247,242,239,.9);--hdr-on-fg:#15191B}
.hdr.is-on .hdr__cta:hover{background:#15191B;color:#F7F2EF;border-color:#15191B}
/* ---------- header v2 (3 Oct): the mark alone; one quiet centred line of links led by Litigation PR;
     a single solid Enquire; the menu as an icon. No bar over the hero; once scrolled it slides away on the
     way down and returns, frosted, on the way up. */
.hdr{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(16px,2vw,32px);height:68px;padding:0 var(--gutter);transition:background .4s ease,color .4s ease,height .4s ease,box-shadow .4s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.hdr.is-on{height:60px;box-shadow:0 1px 0 rgba(127,127,127,.18)}
.hdr.is-away{transform:translateY(-101%)}
.hdr__logo{justify-self:start;width:clamp(132px,10.3vw,148px)}
.hdr__svcs{margin:0;justify-self:center;gap:clamp(18px,2.3vw,38px);font-size:15px}
.hdr__svcs a{opacity:.72}
.hdr__svcs a:hover{opacity:1}
.hdr__svcs .is-lit a{opacity:1;font-weight:700;padding:6px 0;border:0;background:none;box-shadow:none}
.hdr__svcs .is-lit a:hover{background:none;opacity:1}
.hdr__svcs .is-lit{margin-right:0}
.hdr__end{justify-self:end;display:flex;align-items:center;gap:clamp(14px,1.6vw,24px)}
.hdr__cta{border:0;padding:10px 20px;background:var(--hdr-cta-bg,#FFFAF8);color:var(--hdr-cta-fg,#0B0D0E);font-size:15px;transition:background .3s ease,color .3s ease}
.hdr__cta:hover{background:#6C9BAD;color:#0B0D0E;border-color:transparent}
.hdr__menu{padding:10px 2px;gap:0}
.hdr__menu i{width:22px;height:8px}
.hdr__menu span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hmenu-open .hdr{transform:none}
@media (max-width:1180px){
  .hdr{grid-template-columns:auto minmax(0,1fr) auto}
  .hdr__svcs{justify-self:center}
}
@media (max-width:640px){
  .hdr__logo{width:116px}
  .hdr{height:60px;grid-template-columns:auto minmax(0,1fr)}
  .hdr__end{grid-column:2}
  .hdr__cta{margin-left:0;padding:8px 15px;font-size:14px}
}
/* header v2: Litigation PR leads the line in bold with its chip, the same on every option */
.hdr .hdr__svcs a.is-lead,.hdr .hdr__svcs .hdr__lead a,.hdr .hdr__svcs .is-lit a,.nav .nav__links a.nav__lit{opacity:1;font-weight:700;padding:6px 0;border:0;border-radius:0;background:none;box-shadow:none;color:inherit;text-decoration:none}
.hdr .hdr__svcs a.is-lead::after,.hdr .hdr__svcs .hdr__lead a::after,.hdr .hdr__svcs .is-lit a::after,.nav .nav__links a.nav__lit::after{content:none}
@media (prefers-reduced-motion:reduce){
  .hdr{transition:none}
}
/* where you are: the link for the section on screen is full ink with a 1px underline in its colour */
.hdr .hdr__svcs a.is-here{opacity:1;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;text-decoration-color:var(--u,currentColor)}
@media (min-width:641px) and (max-width:1180px){
/* header v2, tablet: Litigation PR stays in the bar on its own; the rest is in the menu */
  .hdr .hdr__svcs,.hdr .hdr__links,.nav .nav__links{display:flex}
  .hdr .hdr__svcs>li,.hdr .hdr__links>li,.nav .nav__links>li{display:none}
  .hdr .hdr__svcs>li:has(.is-lead),.hdr .hdr__svcs>li.hdr__lead,.hdr .hdr__svcs>li.is-lit,.hdr .hdr__links>li:has(.is-lead),.nav .nav__links>li:has(.nav__lit){display:list-item;list-style:none}
}
/* the dark ground has quiet depth: two soft glows and the mark's slash bands, drifting a little with the scroll */
.depth{position:absolute;z-index:-1;top:0;bottom:0;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));overflow:hidden;pointer-events:none;background:#1C3E4E;clip-path:polygon(0 var(--e),var(--ex) var(--e),calc(var(--ex) + var(--e) / tan(55.753deg)) 0,100% 0,100% calc(100% - var(--e)),calc(var(--ex) + var(--e) / tan(55.753deg)) calc(100% - var(--e)),var(--ex) 100%,0 100%)}
.depth::before{content:"";position:absolute;inset:0;background:radial-gradient(58% 36% at 82% 16%,rgba(108,155,173,.2),transparent 70%),radial-gradient(52% 34% at 10% 72%,rgba(62,124,150,.2),transparent 70%)}
.depth i{position:absolute;top:-25%;height:150%;width:clamp(90px,11vw,210px);left:var(--x);transform:rotate(var(--slash));background:linear-gradient(180deg,rgba(247,242,239,.055),rgba(247,242,239,0) 80%);will-change:transform}
/* the section's commercial point, moved up: a solid block */
.lit__cta{grid-column:8/span 5;position:relative;padding:clamp(28px,3vw,46px) clamp(26px,2.8vw,42px);background:#F7F2EF;color:#15191B}
.lit__cta h3{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.4vw,36px);line-height:1.08;letter-spacing:-.015em}
.lit__cta p{margin-top:10px;font-size:clamp(18px,1.4vw,21px);line-height:1.4;color:rgba(21,25,27,.8)}
.lit__cta .btn{margin-top:clamp(20px,2.2vw,30px);border-color:#15191B}
.lit__cta .btn:hover{background:#15191B;color:#F7F2EF}
.lit__cta :focus-visible{outline-color:var(--steel-light)}
.lit__lbl{display:block;color:#A9CBD8;margin-bottom:clamp(18px,2vw,28px)}
/* the band's object: the dispute journey, full content width */
.lit__jrn{margin-top:clamp(70px,7vw,112px)}
/* the four moments, each under the stretch of curve it belongs to */
.lit__ms{position:relative}
.lit__ms ol{list-style:none;display:grid;grid-template-columns:30fr 17fr 28fr 25fr;column-gap:var(--col-gap)}
.lit__m{position:relative;padding-top:22px}
.lit__m::before,.lit__m::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(247,242,239,.2)}
.lit__m::after{height:2px;top:-.5px;background:#A9CBD8;transform-origin:left;transform:scaleX(0);transition:transform .6s var(--ease)}
.lit__m.is-on::after{transform:none}
.lit__st{display:block;font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.16em;line-height:1.2;text-transform:uppercase;color:#A9CBD8}
.lit__st i{font-style:normal;margin:0 .4em;opacity:.7}
.lit__m h4{margin-top:12px;font-family:var(--display);font-weight:400;font-size:clamp(23px,2.15vw,31px);line-height:1.12;letter-spacing:-.015em;color:#F7F2EF}
.js .lit__m{transition:opacity .5s ease}
.js .lit__m:not(.is-on){opacity:.74}
/* the 3P framework as three solid panels */
.lit__ppp{margin-top:clamp(64px,6.4vw,100px)}
.lit__ppp ul{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap)}
.lit__ppp li{position:relative;padding:clamp(28px,3vw,46px) clamp(24px,2.6vw,40px) clamp(32px,3.4vw,52px);background:#264B5C;box-shadow:inset 0 1px 0 rgba(247,242,239,.08)}
.lit__n{order:2;font-family:var(--display);font-size:clamp(17px,1.4vw,20px);letter-spacing:.12em;line-height:1;color:#A9CBD8}
.lit__ppp li{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.lit__ppp h4{font-family:var(--display);font-weight:400;font-size:clamp(34px,3.5vw,50px);line-height:1;letter-spacing:-.02em;color:#F7F2EF}
.js .lit__ppp ul>li{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease) var(--k,0ms),transform .6s var(--ease) var(--k,0ms)}
.js .lit__ppp.is-lit ul>li{opacity:1;transform:none}
.lit__ppp li:nth-child(2){--k:120ms}
.lit__ppp li:nth-child(3){--k:240ms}
@media (max-width:900px){
  .lit__cta{margin-top:30px}
  .lit__jrn,.lit__ppp{margin-top:64px}
/* the journey stands beside the moments, which stack */
  .lit__ms ol{display:block}
  .lit__m{padding:18px 76px 26px 0}
  .lit__m::before,.lit__m::after{right:76px}
  .lit__ppp ul{grid-template-columns:minmax(0,1fr);gap:14px}
}
/* the shared tile: a solid surface in the band's colour, light text, a small index, the mark's slash in its corner */
.tiles{list-style:none;display:grid;gap:var(--col-gap)}
.tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,2vw,30px) clamp(20px,2vw,30px) clamp(22px,2.2vw,32px);background:var(--tile);color:#F7F2EF;box-shadow:inset 0 1px 0 rgba(247,242,239,.1)}
.tile>.ic{position:absolute;right:clamp(16px,1.7vw,24px);top:clamp(16px,1.7vw,24px)}
/* the drawn icons: one family (48 grid, a thin round line, no fills but a small solid accent). Each draws itself as
   its tile arrives, and is whole without script or with reduced motion */
.ic{display:block;flex:none;width:clamp(46px,4.2vw,60px);height:auto;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;color:#F7F2EF;opacity:.85;transition:opacity .4s ease,transform .45s var(--ease)}
.ic .a{fill:currentColor;stroke:none}
.js .is-lit>.tile .ic :not(.a),.js .tile.is-seen .ic :not(.a),.js .lit__ppp.is-lit .ic :not(.a){stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease-io) calc(var(--dl,0ms) + var(--k,0ms) + 260ms)}
.js .is-lit>.tile .ic .a,.js .tile.is-seen .ic .a,.js .lit__ppp.is-lit .ic .a{opacity:1;transition:opacity .4s ease calc(var(--dl,0ms) + var(--k,0ms) + 1100ms)}
@media print{
  .js .ic :not(.a){stroke-dashoffset:0!important}
  .js .ic .a{opacity:1!important}
}
.lit__ppp .ic{width:clamp(40px,3.6vw,52px);margin-left:auto;align-self:center;order:1;color:#A9CBD8}
.tile__t{margin-top:clamp(26px,3vw,48px);font-family:var(--display);font-weight:400;font-size:clamp(21px,1.75vw,26px);line-height:1.12;letter-spacing:-.01em}
.tile p{margin-top:8px;font-size:clamp(17px,1.25vw,18.5px);line-height:1.4;color:rgba(247,242,239,.88)}
@media (max-width:900px){
  .tile__t{margin-top:34px}
  .ic{width:46px}
}
/* ---------- the dispute graphic: public attention, Private → Resolved. The marker follows the line's tip ---------- */
.arc{position:relative;width:min(1040px,100%);margin:clamp(20px,2.4vw,34px) auto 0}
.arc svg{display:block;width:100%;height:auto;overflow:visible}
.arc__base{stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke}
.arc__line{fill:none;stroke:var(--c);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linecap:round}
.arc__ghost{fill:none;stroke:var(--rule);stroke-width:1;stroke-dasharray:2 6;vector-effect:non-scaling-stroke}
.arc__stage circle{fill:var(--bg);stroke:var(--c);stroke-width:1.2;vector-effect:non-scaling-stroke}
.arc__stage text{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;fill:var(--c)}
.js .arc__stage{opacity:.7;transition:opacity .4s ease}
.js .arc__stage.is-on{opacity:1}
.js .arc__stage.is-on circle{fill:var(--c)}
.arc__mark{position:absolute;left:0;top:0;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:#F7F2EF;box-shadow:0 0 0 5px rgba(169,203,216,.28);will-change:transform;pointer-events:none}
.js .arc__mark{opacity:0;transition:opacity .3s ease}
.arc--tall,.arc__mark--tall{display:none}
@media (min-width:700px){
  .rail{margin-top:clamp(30px,3.6vw,56px);aspect-ratio:1000/476}
  .rail::before,.rail__line{display:none}
}
@media (max-width:699px){
  .rail::before,.rail__line{top:calc(var(--top,0px) + 12px)}
  .rail::before{background:rgba(247,242,239,.2)}
}
/* ---------- the header and the back-to-top button read the ground beneath them ---------- */
.hdr.hdr--dark{--hdr-fg:#F7F2EF;--hdr-on-fg:#F7F2EF;--hdr-on-bg:rgba(17,27,33,.8);--hdr-cta-bg:#F7F2EF;--hdr-cta-fg:#15191B}
.hdr.hdr--dark .hdr__svcs a.is-here{text-decoration-color:#A9CBD8}
.hdr.hdr--dark.is-on .hdr__cta:hover,.hdr.hdr--dark .hdr__cta:hover{background:#A9CBD8;color:#15191B}
.hdr.hdr--dark :focus-visible{outline-color:#A9CBD8}
.totop.is-inv{background:#F7F2EF;color:#15191B}
.totop.is-inv:hover{background:#A9CBD8}
@media (max-width:900px){
  .depth{left:calc(-1 * var(--gutter) - var(--ind))}
/* the graphic turns to run down beside the four rows, level with the line's tip; each row names its stages */
  .arc--wide,.arc__mark--wide{display:none}
  .arc--tall{display:block;position:absolute;right:0;top:30px;bottom:0;width:54px;margin:0}
  .arc--tall svg{position:absolute;inset:0;width:100%;height:100%}
  .arc__mark--tall{display:block;left:auto;right:0;top:30px;margin:-6.5px -6.5px 0 0}
}
@media print{
  .depth,.slash{display:none}
  .arc__mark{display:none}
}
/* 2. what "the dispute goes public" means: faint headlines drifting behind the curve. How many show, and how
      bright, follows the marker (data-lv: 0 Private … 3 Escalating, 4 Resolved). Texture only: about 2:1 at most */
.hl{position:absolute;z-index:-1;top:0;bottom:0;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));overflow:hidden;pointer-events:none;--a:.2;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}
.hl__lane{position:absolute;left:var(--o,0px);top:var(--y);white-space:nowrap;font-family:var(--display);font-size:var(--fs);line-height:1;letter-spacing:.01em;color:#A9CBD8;transform:translateY(-50%)}
.hl__run{display:inline-flex;will-change:transform;animation:hl var(--t) linear infinite}
.hl__lane:nth-child(even) .hl__run{animation-direction:reverse}
.hl__run span{padding-right:clamp(80px,9vw,150px);opacity:0;transition:opacity 1.2s ease}
.hl[data-lv="0"]{--a:.17}
.hl[data-lv="1"]{--a:.23}
.hl[data-lv="2"]{--a:.29}
.hl[data-lv="3"]{--a:.35}
.hl[data-lv="4"]{--a:.2}
.hl[data-lv="0"] .k0,.hl[data-lv="1"] :is(.k0,.k1),.hl[data-lv="2"] :is(.k0,.k1,.k2),.hl[data-lv="3"] .hl__run span,.hl[data-lv="4"] :is(.k0,.k1){opacity:var(--a)}
.js .hl:not(.is-live) .hl__run{animation-play-state:paused}
@media print{
  .hl{display:none}
}
/* 3. the slash as the way in. Each new ground has a text-free head strip (--wz). Over it lies a sheet of the
      ground before, cut on the mark's slash, and the scroll draws that sheet off to the right: the new colour
      comes in on the diagonal, and is whole before any of the band's words arrive. The sheet lies over the line
      and carries its own length of it, so the line never shows in the wrong colour. Transform only.
      Without html.fx (reduced motion, no script) none of this applies: the static blends and steps above stand. */
:root{--wz:clamp(72px,8.4vw,128px)}
.wp{display:none}
.fx .wp{display:block;position:absolute;top:-1px;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));height:calc(var(--wz) + 1px);overflow:hidden;pointer-events:none;--dx:calc((var(--wz) + 1px) / tan(55.753deg))}
.wp>i{position:absolute;top:0;bottom:0;left:0;width:calc(100% + var(--dx));background:var(--f);clip-path:polygon(var(--dx) 0,100% 0,100% 100%,0 100%);transform:translate3d(calc(-1 * var(--dx)),0,0);will-change:transform}
.fx #litigation,.fx #market-access,.fx #growth,.fx #found,.fx #who{padding-top:calc(var(--wz) + clamp(26px,3vw,46px))}
@media print{
  .fx .wp{display:none}
}
/* 6a. a soft light under the pointer on the dark grounds (fine pointers only; placed by the one loop) */
.glow{display:none}
@media (hover:hover) and (pointer:fine){
  .fx .glow{display:block;position:absolute;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:radial-gradient(closest-side,var(--gl,rgba(169,203,216,.11)),transparent);opacity:0;transition:opacity .6s ease;will-change:transform;pointer-events:none}
  .fx .glow.is-on{opacity:1}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
/* 6b. tiles and panels answer the pointer: a small lift, the colour deepening from the corner along the slash,
       the number and the corner mark shifting. Polish only: nothing is shown or hidden by it */
  .tile,.lit__ppp li{background-image:linear-gradient(124.25deg,var(--flood,rgba(21,25,27,.22)) 50%,transparent 50%);background-size:260% 260%;background-position:100% 100%;background-repeat:no-repeat}
  .lit__ppp li{--flood:rgba(108,155,173,.2)}
  .tile,.lit__ppp li{transition:translate .45s var(--ease),background-position .65s var(--ease)}
  .tile:hover,.lit__ppp li:hover{translate:0 -4px;background-position:0 0}
  .tile:hover .ic,.lit__ppp li:hover .ic{opacity:1}
  .tile:hover>.ic{transform:translate(3px,-4px)}
  .tile__n,.lit__n{transition:transform .45s var(--ease)}
  .lit__ppp li:hover .lit__n{transform:translateX(-6px)}
/* 6d. a slash of light crosses a button as the pointer arrives */
  .btn{position:relative;overflow:hidden}
  .btn::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:34%;background:linear-gradient(90deg,transparent,rgba(247,242,239,.34),transparent);transform:translateX(-190%) skewX(-34.25deg);pointer-events:none}
  .btn:hover::after{transform:translateX(490%) skewX(-34.25deg);transition:transform .8s var(--ease)}
}
/* 8 (V5). Who we work with: the list on one side, and beside it a panel that stays in view and becomes the audience
   at the middle of the screen (its colour, its icon drawn large). Related to the Litigation PR section's pinned mark.
   Every row is always readable; the panel is decoration. Phones: no panel, each row carries its own colour block */
#who{padding-top:clamp(110px,10vw,160px);padding-bottom:clamp(70px,7vw,110px)}
@media (max-width:900px){
  #who{padding-top:104px}
}
/* V6: the Litigation PR detail text, back under the four moments and the 3P panels */
.lit__m ul{list-style:none;margin-top:12px}
.lit__m ul li{font-size:clamp(17px,1.3vw,19px);line-height:1.45;color:rgba(247,242,239,.84)}
.lit__ppp li{flex-wrap:wrap}
.lit__ppp p{order:3;flex-basis:100%;margin-top:14px;font-size:clamp(17px,1.3vw,19px);line-height:1.5;color:rgba(247,242,239,.84)}
/* V6: the Litigation PR detail text, back under the four moments and the 3P panels */
.lit__m ul{list-style:none;margin-top:12px}
.lit__m ul li{font-size:clamp(16px,1.2vw,18px);line-height:1.45;color:rgba(247,242,239,.84)}
@media (max-width:900px){
  .lit__m ul li{font-size:16px}
}
/* 5. the 3P panels stand off the band: a lighter steel surface, a light edge, a soft shadow, and the mark's slanted
   lines running behind the row */
.lit__ppp ul{position:relative;isolation:isolate}
.lit__ppp ul::before{content:"";position:absolute;z-index:-1;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));top:clamp(-28px,-2.6vw,-18px);bottom:clamp(-28px,-2.6vw,-18px);pointer-events:none;
  background:repeating-linear-gradient(124.25deg,rgba(169,203,216,.085) 0 18px,transparent 18px 72px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.lit__ppp li{background-color:#2E5F75;border:1px solid rgba(247,242,239,.35);box-shadow:0 22px 44px -22px rgba(6,16,21,.75),inset 0 1px 0 rgba(247,242,239,.12)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .lit__ppp li:hover{box-shadow:0 30px 52px -22px rgba(6,16,21,.85),inset 0 1px 0 rgba(247,242,239,.12)}
}
@keyframes hl{to{transform:translate3d(-50%,0,0)}}
/* text for screen readers only (a table's empty corner, a cell's "no") */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* every [data-play] picture: it plays forward only. While it is not playing (before it reaches the screen, and once
   it has left) nothing in it transitions, so it is reset at once and always starts from zero */
.js [data-play]:not(.is-play),.js [data-play]:not(.is-play) *,.js [data-play]:not(.is-play) *::before,.js [data-play]:not(.is-play) *::after{transition:none!important}
/* index cards: one per service or audience (the overviews, the audience pages). Its colour (--c, the deep tone) runs along the top
   and colours the icon; name, one line, and where it goes, or that its page is still to come */
.ix{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap)}
.ix>li{display:flex}
.ix__c{position:relative;display:flex;flex-direction:column;width:100%;min-height:clamp(236px,19vw,276px);padding:clamp(20px,2vw,28px);background:#EEE8E5;border:1px solid var(--line);border-top:4px solid var(--c);color:var(--dust)}
.ix__c .ic{width:clamp(40px,3.4vw,48px);color:var(--c)}
.ix__c h3{margin-top:auto;padding-top:22px;font-family:var(--display);font-weight:400;font-size:clamp(21px,1.75vw,26px);line-height:1.15;letter-spacing:-.005em}
.ix__c p{margin-top:8px;font-family:var(--display);font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.3;color:rgba(21,25,27,.78)}
.ix__go{margin-top:16px;align-self:flex-start;font-family:var(--display);font-size:16px;color:var(--c);border-bottom:1px solid currentColor;padding-bottom:2px}
a.ix__c{transition:translate .4s var(--ease),box-shadow .4s ease,background-color .35s ease}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  a.ix__c:hover{translate:0 -4px;background:#F7F2EF;box-shadow:0 20px 34px -20px rgba(21,25,27,.4)}
}
@media (max-width:1179px){
  .ix{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .ix{grid-template-columns:minmax(0,1fr)}
  .ix__c{min-height:0}
  .ix__c h3{padding-top:18px}
}