/* Commwiser — home.css. The home page only: the line, the hero, Latest, the bands, Who, Knowledge, Mirovia, close. */
/* links and buttons */
.go{display:inline-block;margin-top:clamp(16px,1.6vw,24px);font-family:var(--display);font-size:clamp(17px,1.25vw,19px);color:var(--c,var(--indigo));border-bottom:1px solid currentColor;padding-bottom:3px;transition:opacity .3s ease}
.go:hover{opacity:.7}
.btn--solid{background:var(--indigo-deep);border-color:var(--indigo-deep);color:var(--ink)}
.btn--solid:hover{background:var(--dust);border-color:var(--dust)}
/* ---------- hero: one sentence, centred; the line starts at the mark under it ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;padding:clamp(92px,12vh,140px) var(--gutter) 0;overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#F7F2EF 0%,#F4EFEC 50%,#EDF0F0 100%)}
.hero__bg::before,.hero__bg::after{content:"";position:absolute;top:-60%;height:220%;width:clamp(60px,7vw,120px);transform:rotate(var(--slash));opacity:.5}
.hero__bg::before{left:8%;background:linear-gradient(180deg,rgba(21,25,27,.07),transparent 70%)}
.hero__bg::after{right:10%;background:linear-gradient(180deg,rgba(34,77,95,.14),transparent 70%)}
.hero__main{margin:auto 0;display:flex;flex-direction:column;align-items:center;text-align:center}
/* one line from 1280px up: sized to the measure, never above 64px */
.hero h1{font-size:min(64px,calc((100vw - 2 * var(--gutter)) / 24.4));line-height:1;color:var(--dust);text-wrap:balance}
@media (min-width:1280px){
  .hero h1{white-space:nowrap}
}
.hero__four{margin-top:clamp(16px,1.8vw,26px);font-family:var(--display);font-size:clamp(20px,1.8vw,27px);line-height:1.3;color:var(--steel-light)}
.hero__say{margin-top:clamp(12px,1.3vw,18px);font-size:clamp(18px,1.4vw,21px);line-height:1.48;color:rgba(21,25,27,.78);max-width:60ch}
.hero__btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(20px,2.2vw,30px)}
.hero__strip{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:clamp(20px,3vw,48px);margin-top:clamp(26px,3.6vh,44px);font-family:var(--display);font-size:13.5px;letter-spacing:.14em;line-height:1.3;text-transform:uppercase;color:var(--grey-light)}
.hero__strip ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px clamp(14px,1.6vw,26px)}
.hero__strip ul:first-of-type{justify-content:flex-end}
/* the line begins here: it drops from the banner, through the mark, into the page (the hero clips it at its foot) */
/* scroll cue: a small label beside the line under the mark, and a pulse travelling down it. Gone once scrolling starts */
.cue{position:relative;flex:none;height:clamp(44px,6.4vh,60px);transition:opacity .5s ease}
.cue__lbl{position:absolute;left:calc(50% + 14px);top:50%;transform:translateY(-50%);font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.2em;line-height:1;text-transform:uppercase;color:var(--grey-light)}
.cue__pulse{position:absolute;left:50%;top:0;width:1px;height:16px;margin-left:-.5px;background:linear-gradient(180deg,rgba(34,77,95,0),var(--indigo));opacity:0;animation:cue 2.4s var(--ease-io) 2.4s infinite}
.cue{overflow:hidden}
.is-scrolled .cue{opacity:0}
@media print{
  .cue{display:none}
}
.hero__mark{position:relative;width:clamp(34px,3.2vw,46px);color:var(--dust);background:#F4EFEC;padding:12px 0}
.hero__mark svg{display:block;width:100%;height:auto}
.js .hero [data-in]{opacity:0;transform:translateY(16px);transition:opacity 1s var(--ease) var(--d,0ms),transform 1s var(--ease) var(--d,0ms)}
.js .is-ready .hero [data-in]{opacity:1;transform:none}
.js .is-ready .hero__mark{opacity:1}
/* ---------- the line: everything Commwiser does hangs off it ---------- */
.line{position:relative;padding:0 var(--gutter) clamp(50px,6vw,90px);--arm:clamp(30px,3.4vw,58px);--pad:calc(var(--arm) + 28px)}
.spine{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--line)}
.spine__fill{position:absolute;inset:0 -.5px;background:var(--indigo);transform:scaleY(0);transform-origin:top}
/* the head of the line, travelling with the scroll */
.spine__tip{position:absolute;left:50%;top:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--indigo);opacity:0;transition:opacity .3s ease;will-change:transform}
.line__end{position:absolute;left:50%;bottom:-1px;width:1px;height:clamp(60px,8vw,120px);background:linear-gradient(180deg,var(--steel-light),transparent);transform:translateY(100%)}
.sec{position:relative;z-index:2;padding-top:clamp(96px,10vw,160px);--c:var(--indigo);--chip:var(--steel-light)}
/* a plain node on the line at the top of every section; it fills when the line reaches it */
.dot{position:absolute;left:50%;top:clamp(30px,3.2vw,52px);z-index:1;width:13px;height:13px;border-radius:50%;transform:translateX(-50%);background:var(--ink);border:1.5px solid var(--c);box-shadow:0 0 0 7px var(--ink);transition:background .5s var(--ease)}
.dot.is-hit{background:var(--c)}
.js .dot.is-hit{transform:translateX(-50%)}
/* the line's tip decides everything: a node, a branch and its end dot light only once the drawn tip has reached
   their height, and go out again when the tip retracts above them (is-hit). The block's text arrives right after
   (is-lit) and resets only when the block is wholly below the screen again. */
.js .line [data-lit]>*{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease) var(--dl,0ms),transform .7s var(--ease) var(--dl,0ms)}
.js .line [data-lit].is-lit>*{opacity:1;transform:none}
.line [data-lit]>:nth-child(1){--dl:var(--t0,0ms)}
.line [data-lit]>:nth-child(2){--dl:calc(var(--t0,0ms) + 80ms)}
.line [data-lit]>:nth-child(3){--dl:calc(var(--t0,0ms) + 160ms)}
.line [data-lit]>:nth-child(4){--dl:calc(var(--t0,0ms) + 240ms)}
.line [data-lit]>:nth-child(5){--dl:calc(var(--t0,0ms) + 320ms)}
.line [data-lit]>:nth-child(6){--dl:calc(var(--t0,0ms) + 400ms)}
.line [data-lit]>:nth-child(7){--dl:calc(var(--t0,0ms) + 480ms)}
/* parts that arrive by their own gesture (word masks, sides, drawn rules) are not faded as a block */
.js .line [data-lit]>:is([data-words],.w,.l,.r,.twig,.anc){opacity:1;transform:none}
/* a heading that sits on the line and breaks it */
.head{text-align:center}
/* the rule for every section: its name is the heading; the line beneath it is the tagline */
.head__name{font-size:var(--h);max-width:24ch;text-wrap:balance;background:var(--ink);display:inline-block;padding:0 .25em}
.head--ways .head__name{font-size:clamp(32px,4.2vw,62px);max-width:17ch}
/* two sides of the line, and the branches that reach them */
.duo{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.l{position:relative;grid-column:1;padding-right:var(--pad);text-align:right}
.r{position:relative;grid-column:2;padding-left:var(--pad)}
.branch{position:absolute;top:var(--bt,1em);height:1px;width:var(--arm);background:var(--chip)}
.js .line [data-lit] .branch{opacity:1;transform:scaleX(0);transition:transform .4s var(--ease)}
.l>.branch{right:0;transform-origin:right center}
.r>.branch{left:0;transform-origin:left center}
.branch i{position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:var(--c);transform:translateY(-50%)}
.js .branch i{opacity:0;transform:translateY(-50%) scale(0);transition:opacity .25s ease .3s,transform .3s var(--ease) .3s}
.l>.branch i{left:-7px}
.r>.branch i{right:-7px}
/* going out is immediate, so nothing stays drawn below a retracting tip */
.js .line [data-lit]:not(.is-hit) .branch,.js .line [data-lit]:not(.is-hit) .branch i,.js .dot:not(.is-hit){transition:none}
.js .line .is-hit .branch{transform:scaleX(1)}
.js .is-hit .branch i{opacity:1;transform:translateY(-50%)}
/* 2. three ways: the line branches left, right, left */
.ways{margin-top:clamp(36px,4.4vw,68px);row-gap:clamp(16px,2vw,30px);--ws:clamp(46px,6vw,92px)}
.way{--bt:calc(27px + var(--ws) * .5);--t0:380ms}
.way__word{--wd:320ms}
.way:nth-child(1){grid-row:1/span 2}
.way:nth-child(2){grid-row:2/span 2}
.way:nth-child(3){grid-row:3/span 2}
.way__num{display:block;font-family:var(--display);font-size:14px;letter-spacing:.14em;line-height:1;color:var(--c);margin-bottom:13px}
.way__word{font-size:var(--ws);color:var(--c)}
.way__svc{margin-top:10px;font-family:var(--display);font-weight:700;font-size:clamp(19px,1.6vw,24px);line-height:1.2}
.way__lede{margin-top:14px;font-size:clamp(19px,1.5vw,22px);line-height:1.42;color:rgba(21,25,27,.86);max-width:30ch}
.l .way__lede{margin-left:auto}
/* 3. litigation PR: the headline on the line, the 3P framework across it, then the one dark ground */
.sub{display:inline-block;background:var(--ink);padding:4px .8em;color:var(--c)}
.steps3>span:nth-child(1){color:rgba(21,25,27,.5)}
.steps3>span:nth-child(2){color:rgba(21,25,27,.7)}
.steps3>span:nth-child(3){color:var(--dust)}
/* 8. knowledge centre: an index on the line, the six categories branching off either side, read across in pairs */
.kc__list{list-style:none;margin-top:clamp(34px,4vw,60px);row-gap:clamp(22px,2.4vw,36px)}
.kc__list li{--bt:.55em;font-size:clamp(23px,2vw,30px)}
.kc__list h3{font-family:var(--display);font-weight:400;font-size:inherit;line-height:1.12;letter-spacing:-.015em}
.js .line .kc__list .l[data-lit]>h3{transform:translateX(22px)}
.js .line .kc__list .r[data-lit]>h3{transform:translateX(-22px)}
.js .line .kc__list [data-lit].is-lit>h3{transform:none}
.kc__list li{--t0:260ms}
/* ---------- 9. Mirovia: the line turns horizontal. Six regions, starting from the mark at India ---------- */
.ally{position:relative;padding:clamp(90px,10vw,160px) var(--gutter) clamp(80px,9vw,140px)}
.ally__head{align-items:end;row-gap:18px}
.ally__head .lbl{grid-column:1/-1;display:block}
.ally__head h2{grid-column:1/span 7;font-size:var(--h)}
.ally__head p{grid-column:8/span 5;font-size:clamp(18.5px,1.4vw,21px);line-height:1.48;color:rgba(21,25,27,.78)}
.rail__stops{list-style:none;position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 var(--col-gap)}
.rail__stops li{position:relative;padding-top:52px}
.rail__stops li::before{content:"";position:absolute;left:0;top:14px;width:1px;height:17px;background:rgba(21,25,27,.55)}
.rail__stops b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(20px,1.9vw,28px);line-height:1.15;letter-spacing:-.005em}
.rail__stops small{display:block;margin-top:5px;font-size:16px;color:rgba(21,25,27,.6)}
.rail__stops .is-home{z-index:2}
.rail__stops .is-home b{color:var(--steel-light)}
.rail__mark{position:absolute;left:0;top:4px;z-index:2;width:30px;padding-right:6px;will-change:transform;color:var(--dust);background:var(--ink)}
.rail__mark svg{display:block;width:100%;height:auto}
.js .rail__line{transform:scaleX(0)}
.js .rail__stops li{opacity:.3;transition:opacity .5s ease}
.js .rail__stops li::before{transform:scaleY(.45);transform-origin:top;transition:transform .5s var(--ease)}
.js .rail__stops li.is-on{opacity:1}
.js .rail__stops li.is-on::before{transform:none}
.ally__line{margin-top:clamp(48px,5.4vw,84px);font-family:var(--display);font-size:clamp(22px,2.3vw,34px);line-height:1.2;letter-spacing:-.01em;color:var(--indigo)}
/* ---------- 10. close: the line comes back down and ends on the mark, as it began on the mark in the hero ---------- */
.close{position:relative;padding:0 var(--gutter) clamp(100px,12vw,180px);text-align:center}
.close__line{display:block;width:1px;height:clamp(100px,14vh,170px);margin:0 auto;background:linear-gradient(180deg,rgba(21,25,27,0),var(--steel-light))}
.close__mark{display:block;width:clamp(36px,3vw,46px);margin:12px auto clamp(30px,4vh,48px);color:var(--dust)}
.close__mark svg{display:block;width:100%;height:auto}
.js .close.is-in .close__line{transform:none}
.js .close.is-in .close__mark{opacity:1}
.cta__text{margin:0 auto clamp(30px,3.6vw,52px);font-size:clamp(34px,5vw,78px);max-width:14ch}
.cta__mail{font-family:var(--display);font-size:clamp(21px,2.2vw,36px);letter-spacing:-.015em;border-bottom:1px solid var(--line);padding-bottom:6px;transition:border-color .4s ease,color .4s ease}
.cta__mail:hover{color:var(--steel-light);border-color:var(--steel-light)}
/* ---------- reveals ---------- */
.js [data-reveal="fade"]{opacity:0;transform:translateY(18px);transition:opacity 1s var(--ease) var(--d,0ms),transform 1s var(--ease) var(--d,0ms)}
.js [data-reveal="fade"].is-in{opacity:1;transform:none}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.22em;margin-bottom:-.22em}
.w>span{display:inline-block}
.js .w>span{transform:translateY(125%);transition:transform .9s var(--ease);transition-delay:calc(var(--wd,0ms) + var(--i) * 26ms + var(--ln,0) * var(--lstep,80ms))}
.js .is-in .w>span,.js .is-lit .w>span{transform:none}
@media (max-width:900px){
  .hero{padding-top:76px}
  .cue{height:40px}
  .cue::before{content:"";position:absolute;left:16px;top:0;bottom:0;width:1px;background:var(--line)}
  .cue__pulse{left:16px}
  .cue__lbl{left:32px}
  .hero__main{align-items:flex-start;text-align:left}
  .hero h1{font-size:clamp(32px,8.6vw,52px);text-wrap:wrap}
  .hero__btns{justify-content:flex-start;margin-top:18px}
  .hero__strip{grid-template-columns:32px minmax(0,1fr);column-gap:16px;row-gap:6px;align-items:start;margin-top:16px}
  .hero__mark{grid-column:1;grid-row:1/span 2;width:32px;padding:0;background:none}
  .hero__strip ul{grid-column:2}
  .hero__strip ul:first-of-type{justify-content:flex-start}
  .line{--ind:46px;--arm:18px}
  .spine,.line__end{left:calc(var(--gutter) + 16px)}
  .sec{padding-left:var(--ind);padding-top:clamp(84px,14vw,120px)}
  .dot{left:16px;top:34px}
  .head{text-align:left}
  .head .lbl,.head__name,.head .tag{margin-inline:0;padding:0;background:none}
  .head__name,.head--ways .head__name{font-size:var(--h);max-width:none}
  .duo{display:block}
  .l,.r{padding:0;text-align:left}
  .l>.branch,.r>.branch,.l .twig>.branch,.r .twig>.branch{left:calc(16px - var(--ind));right:auto;transform-origin:left center}
  .l>.branch i,.l .twig>.branch i,.r>.branch i,.r .twig>.branch i{left:auto;right:-7px}
  .l .way__lede{margin-left:0}
  .ways{--ws:clamp(44px,12vw,72px)}
  .way+.way{margin-top:52px}
  .sub{padding:0;background:none}
  .kc__list li+li{margin-top:14px}
  .js .line .kc__list .l[data-lit]:not(.is-lit)>h3{transform:translateX(-22px)}
  .ally__head .lbl,.ally__head h2,.ally__head p{grid-column:1/-1}
}
@media (max-width:699px){
  .rail__line{transform-origin:top}
  .js .rail__line{transform:scaleY(0)}
  .rail__stops{display:block}
  .rail__stops li{padding:0 0 26px}
  .rail__stops li:last-child{padding-bottom:0}
  .rail__stops li::before{left:-33.5px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--ink);border:1px solid rgba(21,25,27,.45)}
  .js .rail__stops li::before{transform:none}
  .js .rail__stops li.is-on::before{background:var(--steel-light);border-color:var(--steel-light)}
  .rail__stops b{font-size:22px}
  .rail__mark{left:-44px;top:-2px;width:28px;padding:0 0 4px;background:var(--ink)}
}
@media (max-width:560px){
  .hero__btns{width:100%;gap:10px}
  .hero__btns .btn{flex:1 1 100%;justify-content:space-between;padding:12px 20px}
}
@media print{
  .js .rail__stops li::before{transform:none!important}
  .js .rail__line,.js .rail__stops li,.js .close__line,.js .close__mark{opacity:1!important;transform:none!important}
  .js [data-reveal],.js .hero [data-in],.js .hero__mark,.js .w>span{opacity:1!important;transform:none!important}
  .spine__fill{transform:none!important}
  .spine__tip{display:none}
}
.ally{scroll-margin-top:-40px}
/* =====================================================================================================
   E2 — OPTION E, WITH COLOUR. The approved page, with a ground per service along the line:
   light → indigo (Litigation PR) → three tints (India, Growth, Be found) → light → charcoal (Mirovia) → light.
   One treatment between grounds everywhere: a short blend, set in the empty band at a section's head (and at the
   foot of a dark one), never a hard cut. Nothing here changes the line's engine: the tip still decides everything.
   ===================================================================================================== */
.sec{z-index:auto;--bg:#F7F2EF;--from:var(--bg);--tx2:rgba(21,25,27,.8);--rule:var(--line);--ln:#224D5F;--lnb:rgba(21,25,27,.14);--blend:clamp(90px,10vw,150px)}
.sec::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));
  background:linear-gradient(180deg,var(--from),var(--bg) var(--blend));
  background:linear-gradient(in oklab 180deg,var(--from),var(--bg) var(--blend))}
/* the two dark grounds do not fade in: they cut in, with a step whose riser is the mark's slash (55.753 degrees).
   Left of the riser the ground starts one step lower and ends one step lower, so the line (centre, or left on phones)
   always meets a level edge, and no text sits in the step. */
#litigation,.ally{--e:clamp(64px,8vw,120px);--ex:62%;scroll-margin-top:var(--e)}
#litigation{--bg:#1C3E4E;--c:#A9CBD8;--chip:#6C9BAD;--tx2:rgba(247,242,239,.86);--rule:rgba(247,242,239,.22);--ln:#A9CBD8;--lnb:rgba(247,242,239,.2);color:#F7F2EF;padding-top:calc(var(--e) + clamp(74px,7.5vw,116px));padding-bottom:calc(var(--e) + clamp(54px,5.4vw,84px))}
#litigation::before{background:linear-gradient(180deg,#F7F2EF 50%,#DEE2E3 50%)}
#value{padding-bottom:clamp(40px,4.4vw,64px)}
#litigation .dot{top:calc(var(--e) + clamp(22px,2.4vw,36px))}
#market-access{--bg:#DEE2E3;--chip:var(--c);--ln:#3F5A66;padding-top:clamp(70px,7vw,110px)}
#growth{--bg:#EAE0D4;--from:#DEE2E3;--chip:var(--c);--ln:#5A452F}
#found{--bg:#E4DDDF;--from:#EAE0D4;--chip:var(--c);--ln:#47364F}
.who{--from:#E4DDDF}
/* the line is broken by cutting the line itself (see the script), so nothing needs a patch of ground behind it */
.head .lbl,.head__name,.head .tag,.sub{background:none}
.dot{background:var(--bg);box-shadow:none}
.spine{background:none}
.spine::before{content:"";position:absolute;inset:0;background:var(--spine-base,var(--line))}
.spine__fill{overflow:hidden;background:none;transform:translateY(-100%)}
.spine__ink{position:absolute;inset:0;background:var(--spine-ink,var(--indigo));transform:translateY(100%)}
.steps3>span:nth-child(1){color:rgba(21,25,27,.62)}
.steps3>span:nth-child(2){color:rgba(21,25,27,.78)}
#litigation :focus-visible{outline-color:#A9CBD8}
/* =====================================================================================================
   E3 — the Litigation PR band as a spread, not a slide. One big object (the dispute journey), words beside it,
   asymmetric. The line draws into the band, gives way while the band speaks, and picks up again at its foot.
   ===================================================================================================== */
#litigation{padding-bottom:calc(var(--e) + clamp(110px,10vw,160px))}
#litigation .go{color:#A9CBD8}
#litigation .dot--out{top:auto;bottom:calc(var(--e) + clamp(34px,3.4vw,52px))}
.anc{position:absolute;left:0;top:0;width:1px;height:0;pointer-events:none}
.band__body [data-lit],.lit__body [data-lit]{position:relative}
.lit__body{position:relative;text-align:left}
.lit__open{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:end}
.lit__head{grid-column:1/span 7}
.lit__head h2{font-size:var(--h);line-height:1;max-width:14ch}
.lit__tag{margin-top:clamp(18px,2vw,28px);max-width:24ch;font-family:var(--display);font-size:clamp(24px,2.35vw,34px);line-height:1.2;letter-spacing:-.01em;color:rgba(247,242,239,.86)}
#litigation .arc{width:100%;margin:0}
#litigation .arc__line{stroke-width:2}
#litigation .arc__stage text{font-size:15px;letter-spacing:.17em}
#litigation .js .arc__stage,.js #litigation .arc__stage{opacity:.75}
.js #litigation .arc__stage.is-on{opacity:1}
#litigation .arc__mark{width:16px;height:16px;margin:-8px 0 0 -8px;box-shadow:0 0 0 7px rgba(169,203,216,.24)}
@media (max-width:900px){
  .lit__open{display:block}
  .lit__head h2{max-width:none}
  #litigation .arc--tall{display:block;position:absolute;right:0;top:0;bottom:0;width:58px}
  #litigation .arc--tall svg{position:absolute;inset:0;width:100%;height:100%}
  #litigation .arc__mark--tall{display:block;left:auto;right:0;top:0;margin:-8px -8px 0 0}
}
/* ---------- E3: the shared band. Every middle section is one: a full-width ground, a heading set left on a
   12-column grid, and one object that fills the width. The line enters on the band's node, gives way while the
   band speaks (it is cut through the band's body), and picks up again below. Nothing hangs off it in here. */
.band{padding-bottom:clamp(44px,4.6vw,72px);--tile:var(--c)}
.band__body{position:relative;text-align:left}
.band__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:end}
.band h2{font-size:var(--h);line-height:1}
.band h2>span:not(.w){display:block}
.band__sub{margin-top:.34em;font-size:.5em;letter-spacing:.08em;line-height:1.1;color:var(--c)}
.band__tag{margin-top:clamp(16px,1.8vw,26px);font-family:var(--display);font-size:clamp(23px,2.2vw,32px);line-height:1.2;letter-spacing:-.01em;color:rgba(21,25,27,.84)}
.band__tag>span:not(.anc){display:block}
.band__go .go{margin-top:clamp(20px,2.2vw,30px)}
.js .ic :not(.a){stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .5s ease}
.js .ic .a{opacity:0;transition:opacity .3s ease}
.tile__n{display:block;font-family:var(--display);font-size:clamp(15px,1.15vw,17px);letter-spacing:.12em;line-height:1;color:rgba(247,242,239,.72)}
/* India Market Access: the route is the object. One path across the band, four numbered stops, a marker travelling
   it with the page's line; each stop lights as the drawn path reaches it */
.ima__head{grid-column:1/span 7}
.ima__side{grid-column:9/span 4;justify-self:end;padding-bottom:6px}
.ima__side .go{margin-top:0}
.rt{position:relative;margin-top:clamp(40px,4.2vw,66px);padding-top:38px}
.rt__line{position:absolute;left:0;right:0;top:10px;height:1px;background:rgba(63,90,102,.32)}
.rt__line::after{content:"";position:absolute;right:-1px;top:-4.5px;border-left:9px solid var(--c);border-top:5px solid transparent;border-bottom:5px solid transparent}
.rt__fill{position:absolute;inset:-.5px 0;background:var(--c);transform-origin:left;transform:scaleX(1)}
.js .rt__fill{transform:scaleX(0)}
.rt__mark{position:absolute;left:0;top:10px;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;background:var(--c);box-shadow:0 0 0 6px rgba(63,90,102,.18);will-change:transform;pointer-events:none}
.js .rt__mark{opacity:0;transition:opacity .3s ease}
.rt ol{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap)}
.rt .tile{min-height:clamp(180px,15vw,224px)}
.rt .tile::before{content:"";position:absolute;left:0;top:-33.5px;width:11px;height:11px;border-radius:50%;background:var(--bg);border:1.5px solid var(--c);transition:background .3s ease}
.rt .tile.is-hit::before{background:var(--c)}
.rt .tile__t{font-size:clamp(24px,2.1vw,31px);letter-spacing:.04em}
.js .line .rt[data-lit]>ol{opacity:1;transform:none}
.js .rt .tile{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js .rt .tile.is-seen{opacity:1;transform:none}
/* Law Firm Growth: the six services as a grid of tiles on the left, the statement on the right */
.grow3{align-items:stretch}
.grow3__tiles{grid-column:1/span 7;grid-row:1;grid-template-columns:repeat(3,minmax(0,1fr))}
.grow3__tiles .tile{min-height:clamp(166px,13.6vw,204px)}
.grow3__say{grid-column:9/span 4;grid-row:1;align-self:center}
.grow3 .steps3>span:nth-child(2){color:rgba(21,25,27,.62)}
.grow3 .steps3>span:nth-child(3){color:rgba(21,25,27,.78)}
.grow3 .steps3>span:nth-child(4){color:var(--dust)}
.grow3 .band__tag>span+span{margin-top:.3em}
/* Be found: the object is an AI assistant's answer, with the reader's firm as the one it cites */
.found3{align-items:center}
.found3__say{grid-column:1/span 5}
.found3__tiles{margin-top:clamp(26px,2.8vw,42px);grid-template-columns:repeat(3,minmax(0,1fr))}
.found3__tiles .tile{flex-direction:row;align-items:center;gap:10px;padding:clamp(30px,3vw,44px) clamp(16px,1.6vw,24px)}
.found3__tiles .tile>.ic{position:static;order:2;width:clamp(36px,3.3vw,48px)}
.found3__tiles .tile__t{margin-top:0;font-size:clamp(28px,2.6vw,38px);letter-spacing:.01em}
.ai-wrap{grid-column:7/span 6}
.ai{padding:clamp(22px,2.4vw,36px);background:#F7F2EF;outline:1px solid rgba(71,54,79,.16);box-shadow:0 26px 50px -30px rgba(71,54,79,.55)}
.ai__q{width:fit-content;max-width:88%;margin-left:auto;padding:14px 18px;background:#47364F;color:#F7F2EF;font-size:clamp(17px,1.3vw,19px);line-height:1.4}
.ai__rest{visibility:hidden}
.js .ai:not(.is-ans) .ai__typed::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:#F7F2EF}
.ai__a{margin-top:clamp(18px,2vw,28px);padding-top:clamp(18px,2vw,28px);border-top:1px solid rgba(21,25,27,.12)}
.ai__a p{font-size:clamp(18.5px,1.5vw,22px);line-height:1.6;color:rgba(21,25,27,.86)}
.ai__a b{font-weight:700;color:#15191B;background:rgba(144,123,150,.3);box-shadow:0 0 0 .22em rgba(144,123,150,.3)}
.ai__bar{display:inline-block;height:.62em;margin:0 .12em;vertical-align:-.02em;background:rgba(21,25,27,.14)}
.ai__src{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(16px,1.8vw,24px)}
.ai__src li{padding:5px 11px;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;line-height:1.3;text-transform:uppercase;color:#47364F;border:1px solid rgba(71,54,79,.4)}
@media (max-width:900px){
/* Who we work with: five audiences, five tones of the palette */
  .band{padding-left:0}
  .band__grid{display:block}
  .ima__side{margin-top:22px}
/* the route runs down the page: the path on the left, the four stops stacked beside it */
  .rt{margin-top:36px;padding:0 0 0 34px}
  .rt__line{left:9px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .rt__line::after{right:auto;left:-4.5px;top:auto;bottom:-1px;border:0;border-top:9px solid var(--c);border-left:5px solid transparent;border-right:5px solid transparent}
  .rt__fill{inset:0 -.5px;transform-origin:top}
  .js .rt__fill{transform:scaleY(0)}
  .rt__mark{left:9px;top:0}
  .rt ol{grid-template-columns:minmax(0,1fr);gap:14px}
  .rt .tile{min-height:0}
  .rt .tile::before{left:-30.5px;top:22px}
  .rt .tile__t{margin-top:20px}
  .grow3__say{margin-bottom:30px}
  .grow3__tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .grow3__tiles .tile{min-height:150px}
  .found3__tiles{gap:10px}
  .found3__tiles .tile{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:14px;padding:16px 14px 18px}
  .found3__tiles .tile>.ic{order:0;width:40px}
  .ai-wrap{margin-top:34px}
  .ai__q{max-width:94%}
}
@media print{
  .js .rt__fill{transform:none!important}
  .rt__mark{display:none}
}
/* ---------- Commwiser's own material: four covers under the Knowledge Centre, and a recognition strip ---------- */
.shelf{margin-top:clamp(56px,6vw,96px);text-align:center}
.shelf__row{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);width:min(1080px,100%);margin:clamp(22px,2.6vw,38px) auto 0;text-align:left}
.line .shelf__row>li:nth-child(1){--dl:0ms}
.line .shelf__row>li:nth-child(2){--dl:150ms}
.line .shelf__row>li:nth-child(3){--dl:300ms}
.line .shelf__row>li:nth-child(4){--dl:450ms}
.shelf__cover{display:block;aspect-ratio:452/640;overflow:hidden;background:#EEE8E5;outline:1px solid rgba(21,25,27,.12);box-shadow:0 14px 30px -18px rgba(21,25,27,.4);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.shelf__cover img{display:block;width:100%;height:100%;object-fit:cover}
.shelf figure:hover .shelf__cover{transform:translateY(-5px);box-shadow:0 22px 36px -18px rgba(21,25,27,.45)}
.shelf figcaption{margin-top:16px}
.shelf figcaption b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(17px,1.35vw,20px);line-height:1.22;letter-spacing:-.005em}
.shelf figcaption .lbl{display:block;margin-top:8px;font-size:11.5px;color:var(--steel-light)}
.shelf figcaption .lbl i{font-style:normal;margin:0 .35em;opacity:.7}
@media (max-width:900px){
/* the winner card, cropped to its result; quiet until pointed at */
  .shelf{text-align:left}
/* phones: the covers are a row to swipe, snapping one at a time; the page itself never scrolls sideways */
  .shelf__row{display:flex;gap:16px;width:auto;margin-right:calc(-1 * var(--gutter));padding:6px var(--gutter) 22px 2px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .shelf__row::-webkit-scrollbar{display:none}
  .shelf__row>li{flex:0 0 min(58%,230px);scroll-snap-align:start}
}
/* three ways (approved layout): each number carries a block of its colour */
.way__num{display:flex;align-items:center;gap:10px;height:14px}
.way.l .way__num{justify-content:flex-end}
.way__num::before{content:"";width:28px;height:9px;background:var(--c)}
/* hero: large slashes from the mark, in pale tints of the four service colours, drifting with scroll and pointer */
.hero__bg::before,.hero__bg::after{content:none}
.slash{position:absolute;top:-45%;height:190%;left:var(--x);width:var(--w);transform:rotate(var(--slash));background:linear-gradient(180deg,var(--t),transparent 80%);will-change:transform}
/* ---------- Mirovia: a dark ground, and a world of connections drawn out from India ---------- */
.ally{color:#F7F2EF;background:none;padding:calc(var(--e) + clamp(64px,6.4vw,104px)) var(--gutter) calc(var(--e) + clamp(56px,5.6vw,90px))}
.ally::before{content:"";position:absolute;inset:0;z-index:-1;background:#15191B;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%)}
.ally .lbl,.ally__line,.rail__stops .is-home b{color:#A9CBD8}
.ally__head p{color:rgba(247,242,239,.82)}
.ally :focus-visible{outline-color:#A9CBD8}
.rail__stops small{color:rgba(247,242,239,.62)}
.rail__mark{color:#F7F2EF;background:#15191B}
.line__end{display:none}
/* the world, in dots (land: Natural Earth). Quiet land, about 3:1 on the ground; the dots around a region brighten
   and stay brighter once its arc has landed */
.world{display:block;overflow:visible}
.world path{fill:none;stroke-linecap:round}
.world__land{stroke:#566974;stroke-width:2.6}
.world__near{stroke:#A9CBD8;stroke-width:2.6}
.js .world__near{opacity:0;transition:opacity .9s ease}
.js .world__near.is-on{opacity:.9}
.world__arc{stroke:#A9CBD8;stroke-width:1.15;stroke-dasharray:1;stroke-dashoffset:0}
.js .world__arc{stroke-dashoffset:1}
.world__head{opacity:0;transition:opacity .25s ease}
.world__head circle{fill:#A9CBD8}
.world__head circle:first-child{opacity:.22}
.world__head.is-on{opacity:1}
@media (min-width:700px){
  .world{position:absolute;inset:0;width:100%;height:100%}
  .rail__stops{display:block;position:absolute;inset:0}
  .rail__stops li{position:absolute;left:calc(var(--x) / 10 * 1%);top:calc(var(--y) / 4.76 * 1%);padding:0}
  .js .rail__stops li,.js .rail__stops li.is-on{opacity:1}
  .rail__stops li::before{left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:#A9CBD8}
  .rail__stops li::after{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;border:1px solid #A9CBD8;opacity:0;pointer-events:none}
  .js .rail__stops li::before{transform:scale(.5);transform-origin:center;opacity:.55;transition:transform .4s var(--ease),opacity .4s ease}
  .js .rail__stops li.is-on::before{transform:none;opacity:1}
  .js .rail__stops li.is-on::after{animation:landed 1s ease-out 1}
/* a label appears when its arc lands, and sits clear of every arc */
  .rail__stops b{position:absolute;white-space:nowrap;font-size:clamp(16px,1.55vw,22px);line-height:1}
  .rail__stops b,.rail__stops small{text-shadow:0 0 3px #15191B,0 0 7px #15191B,0 0 12px #15191B}
  .js .rail__stops li b,.js .rail__stops li small{opacity:0;transition:opacity .7s ease .15s}
  .js .rail__stops li.is-on b,.js .rail__stops li.is-on small{opacity:1}
  .rail__stops .at-ul b{right:10px;bottom:7px}
  .rail__stops .at-lr b{left:9px;top:11px}
  .rail__stops .at-bl b{right:9px;top:10px}
  .rail__stops .at-r b{left:14px;top:-.5em}
  .rail__stops .at-up b{right:2px;bottom:12px}
  .rail__stops .is-home::before,.rail__stops .is-home::after{display:none}
  .rail__stops .is-home b{left:22px;bottom:2px}
  .rail__stops .is-home small{position:absolute;left:22px;bottom:calc(clamp(16px,1.55vw,22px) + 8px);margin:0;white-space:nowrap;line-height:1;font-size:14px}
  .rail__mark{left:-14px;top:-14px;width:28px;padding:0;background:none}
}
@media (max-width:699px){
/* phones: the map sits above the rail as a quiet backdrop; its regions brighten as the rail reaches them */
  .world{width:calc(100% + 46px);height:auto;margin:0 0 30px -46px}
  .world__arc,.world__head{display:none}
  .world__land{stroke-width:3.2;stroke:#5E727E}
  .world__near{stroke-width:3.8}
  .js .rail__stops li{opacity:.5}
  .js .rail__stops li.is-on{opacity:1}
  .rail__line{background:#A9CBD8}
  .rail__stops li::before{background:#15191B;border-color:rgba(247,242,239,.5)}
  .js .rail__stops li.is-on::before{background:#A9CBD8;border-color:#A9CBD8}
  .rail__mark{background:#15191B}
}
@media (max-width:900px){
  .way.l .way__num{justify-content:flex-start}
  #litigation{padding-top:calc(var(--e) + 76px)}
  #litigation .dot{top:calc(var(--e) + 24px)}
  .sec::before{left:calc(-1 * var(--gutter))}
  .hero__bg{opacity:.7}
}
@media print{
  .spine__fill,.spine__ink{transform:none!important}
  .js .world__arc{stroke-dashoffset:0!important}
  .js .world__near{opacity:.9!important}
  .world__head{display:none}
}
/* =====================================================================================================
   E3c — the page responds. Four things, all of them off with reduced motion (and the pointer ones on touch):
   1 the hero headline arrives redacted; 2 headlines drift behind the dispute curve; 3 the mark's slash wipes
   each new ground in; 6 a cursor glow on the dark grounds, tiles that answer the pointer, an AI answer that
   types, a sheen on the buttons. html.fx / html.rdx are set in the head only when motion is allowed.
   ===================================================================================================== */
/* 1. redaction: ink bars over the headline's words (real text beneath), wiped off left to right, once, on load */
.rdx .hero h1[data-in],.rdx .hero .hero__four[data-in]{position:relative;opacity:1;transform:none;transition:none}
.rdx:not(.rdx-set) .hero h1,.rdx:not(.rdx-set) .hero__four{visibility:hidden}
.rdx .hero [data-in]{transition-delay:calc(var(--d,0ms) + 320ms)}
.fx .ally>.wp,.fx .close>.wp{left:0;right:0}
.wp b{position:absolute;top:0;bottom:0;left:0;width:1px;will-change:transform}
.fx .sec::before{background:var(--bg)}
.fx #litigation,.fx .ally{--e:0px}
.fx #litigation::before{background:#1C3E4E}
.fx #litigation{padding-bottom:clamp(110px,10vw,160px)}
.fx .ally{padding-top:calc(var(--wz) + clamp(30px,3.4vw,54px))}
.ally__fx{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .js .line .tiles[data-lit]>.tile{transition:opacity .7s var(--ease) var(--dl,0ms),transform .7s var(--ease) var(--dl,0ms),translate .45s var(--ease),background-position .65s var(--ease)}
  .js .line .rt .tile{transition:opacity .6s var(--ease),transform .6s var(--ease),translate .45s var(--ease),background-position .65s var(--ease)}
  .js .line .lit__ppp ul>li{transition:opacity .6s var(--ease) var(--k,0ms),transform .6s var(--ease) var(--k,0ms),translate .45s var(--ease),background-position .65s var(--ease)}
  .tile:hover .tile__n{transform:translateX(5px)}
  .rt .tile::before{transition:background .3s ease,translate .45s var(--ease)}
  .rt .tile:hover::before{translate:0 4px}
}
/* 6c. the AI answer is live: the question types, the assistant thinks, the answer writes in line by line, and
       "Your firm" is marked last. It replays when the section is entered again from above */
.ai__a{position:relative}
.ai__think{position:absolute;left:0;top:calc(clamp(18px,2vw,28px) + .7em);display:flex;gap:6px;opacity:0;transition:opacity .25s ease;pointer-events:none}
.ai__think i{width:7px;height:7px;border-radius:50%;background:#907B96;animation:think 1s ease-in-out infinite}
.ai__think i:nth-child(2){animation-delay:.15s}
.ai__think i:nth-child(3){animation-delay:.3s}
.ai.is-think .ai__think{opacity:1}
.aw{display:inline-block}
.js .ai .aw,.js .ai__src li{opacity:0;transition:opacity .25s ease}
.js .ai.is-ans .aw{opacity:1;transition:opacity .45s ease calc(var(--l,0) * 200ms)}
.js .ai.is-ans .ai__src li{opacity:1;transition:opacity .45s ease calc(var(--n,2) * 200ms + 80ms)}
.js .ai b.aw{background-color:rgba(144,123,150,0);box-shadow:0 0 0 .22em rgba(144,123,150,0);transition:opacity .25s ease,background-color .3s ease,box-shadow .3s ease}
.js .ai.is-ans b.aw{background-color:rgba(144,123,150,.3);box-shadow:0 0 0 .22em rgba(144,123,150,.3);transition:opacity .45s ease calc(var(--l,0) * 200ms),background-color .6s ease calc(var(--n,2) * 200ms + 380ms),box-shadow .6s ease calc(var(--n,2) * 200ms + 380ms)}
@media print{
  .js .ai .aw,.js .ai__src li{opacity:1!important}
  .ai__think{display:none}
}
.who5{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
.who5__list{grid-column:1/span 6}
.who5__list ul{list-style:none;margin-top:clamp(26px,2.8vw,44px);border-bottom:1px solid var(--line)}
.who5__list li{display:grid;grid-template-columns:clamp(36px,3.4vw,52px) 26px minmax(0,1fr) auto;align-items:center;padding:clamp(26px,2.9vw,44px) 0;border-top:1px solid var(--line);color:#15191B;transition:color .4s ease}
.who5__n{font-family:var(--display);font-size:14px;letter-spacing:.14em;color:rgba(21,25,27,.66)}
.who5__chip{width:12px;height:12px;background:var(--rb);border:1.5px solid var(--rb);transition:background .4s ease}
.who5__blk{display:none}
.who5__list h3{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.5vw,50px);line-height:1.05;letter-spacing:-.02em}
.who5__ar{font-family:var(--display);font-size:clamp(22px,2.2vw,32px);line-height:1;transition:transform .45s var(--ease)}
.who5__list .band__go .go{margin-top:clamp(24px,2.6vw,38px)}
.who5.is-live li:not(.is-on){color:rgba(21,25,27,.62)}
.who5.is-live li:not(.is-on) .who5__chip{background:transparent}
.who5.is-live li.is-on .who5__ar{transform:translateX(8px)}
.who5__panel{grid-column:8/span 5;position:sticky;top:calc(50vh - var(--ph) * .5);height:var(--ph);--ph:clamp(380px,32vw,470px);overflow:hidden;margin-top:clamp(8px,1vw,16px)}
.who5__layer{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(24px,2.6vw,40px);background:var(--rb);color:#F7F2EF;opacity:0;transition:opacity .55s ease}
.who5__layer:first-child{opacity:1}
.who5.is-live .who5__layer{opacity:0}
.who5.is-live .who5__layer.is-on{opacity:1}
/* the mark's slashes, large and faint, behind the icon */
.who5__layer::before{content:"";position:absolute;top:-30%;height:160%;left:46%;width:64%;transform:skewX(-34.25deg);background:repeating-linear-gradient(90deg,rgba(247,242,239,.055) 0 22%,transparent 22% 39%)}
.who5__layer .ic{position:relative;width:min(58%,250px);margin:auto;stroke-width:.42;opacity:.95;color:#F7F2EF;transform:scale(.96);transition:transform .7s var(--ease)}
.who5.is-live .who5__layer.is-on .ic,.who5:not(.is-live) .who5__layer .ic{transform:none}
.who5__layer span{position:relative;font-family:var(--display);font-size:clamp(17px,1.3vw,20px);letter-spacing:.02em;line-height:1.2;color:rgba(247,242,239,.9)}
@media (max-width:900px){
  .who5{display:block}
  .who5__panel,.who5__chip{display:none}
  .who5__list li{grid-template-columns:28px 58px minmax(0,1fr) auto;column-gap:12px;padding:14px 0}
  .who5__blk{display:grid;place-items:center;width:58px;height:58px;background:var(--rb)}
  .who5__blk .ic{width:36px;color:#F7F2EF;opacity:.95}
  .who5__list h3{font-size:clamp(21px,5.8vw,32px)}
  .who5.is-live li:not(.is-on){color:#15191B}
}
/* the Who icons draw as the band lights (V3 draws icons with their tiles; these have none) */
.js .who5.is-lit .ic :not(.a){stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease-io) .3s}
.who5 .ic{color:#F7F2EF}
/* =====================================================================================================
   E6 — the client's five changes: the hero as text left / image right, the Latest banner with an image, the
   Litigation PR detail text back, two logo strips, a tighter Who we work with.
   ===================================================================================================== */
.hero{padding-top:clamp(80px,9vh,104px)}
.hero__main{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:center;text-align:left;margin:auto 0}
.hero__copy{grid-column:1/span 7;padding-right:clamp(0px,2vw,30px)}
.hero h1{font-family:var(--display);font-weight:400;text-transform:none;letter-spacing:-.015em;font-size:clamp(38px,4.4vw,64px);line-height:1.04;white-space:normal;text-wrap:balance;color:var(--dust)}
.hero__l1,.hero__l2{display:block}
.hero h1 em{font-style:italic;font-weight:700}
.hero__say{max-width:52ch}
/* 4. Featured in / Recognised: two slow rows of wordmarks (type until the logo files arrive) */
.recog{padding-top:clamp(70px,7vw,110px);padding-bottom:clamp(10px,1vw,20px)}
.strip+.strip{margin-top:clamp(40px,4vw,64px)}
.strip .lbl{display:block;margin-bottom:clamp(14px,1.5vw,22px)}
.strip__clip{position:relative;margin:0 calc(-1 * var(--gutter));overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.strip__track{display:flex;width:max-content;will-change:transform;animation:strip var(--t,50s) linear infinite}
.strip:hover .strip__track{animation-play-state:paused}
.logos{list-style:none;display:flex;flex:none}
.logo{display:flex;align-items:center;height:30px;margin-right:clamp(56px,6vw,96px);white-space:nowrap}
.logo img{display:block;width:auto;height:var(--lh,30px);opacity:.78}
.strip:first-of-type .logo{height:52px}
.logo__text{font-family:var(--display);font-size:clamp(15px,1.15vw,17px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(21,25,27,.7)}
@media print{
  .strip__track{animation:none}
}
/* 5. Who we work with, tighter */
.who5__list{grid-column:1/span 7}
.who5__list li{grid-template-columns:clamp(32px,3vw,44px) 24px minmax(0,1fr) auto;padding:clamp(16px,1.9vw,28px) 0}
.who5__list h3{font-size:clamp(22px,2.4vw,35px)}
.who5__ar{font-size:clamp(20px,1.8vw,26px)}
.who5__panel{grid-column:9/span 4;--ph:clamp(260px,23vw,330px);margin-top:clamp(10px,1.2vw,18px)}
.who5__layer .ic{width:min(54%,170px)}
.who5__layer span{font-size:clamp(15px,1.15vw,17px)}
@media (max-width:900px){
  .hero__main{display:block}
  .hero__copy{padding-right:0}
  .who5__list li{grid-template-columns:28px 48px minmax(0,1fr) auto}
  .who5__blk{width:48px;height:48px}
  .who5__blk .ic{width:30px}
  .who5__list h3{font-size:clamp(20px,5.4vw,28px)}
}
/* =====================================================================================================
   E6b — the client's changes of 6 Oct: the hero fills the screen and holds only the copy, the figure and the
   buttons; the Latest banner (slim again) and the credibility strip open the section that follows; the 3P
   panels stand off the band.
   ===================================================================================================== */
.hero{min-height:max(100svh,640px);height:max(100svh,640px);padding-top:clamp(72px,8vh,96px);padding-bottom:0}
.hero__main{flex:1 1 auto;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(0,1fr) auto;column-gap:var(--col-gap);align-items:center;text-align:left;margin:0;min-height:0}
.hero__copy{grid-column:1/span 7;grid-row:1;padding-right:clamp(0px,2vw,30px)}
/* the figure: the client's cut-out, the mark behind him in the image itself; his base sits on the hero's floor */
.hero__figure{grid-column:8/span 5;grid-row:1;align-self:end;margin:0;min-height:0;max-height:min(68vh,620px);display:flex;justify-content:center;align-items:flex-end}
.hero__figure img{display:block;width:auto;height:100%;max-height:min(68vh,620px);max-width:100%;object-fit:contain;object-position:50% 100%}
.hero__main .hero__btns{grid-column:1/-1;grid-row:2;justify-content:center;margin:clamp(40px,5vh,56px) 0 clamp(16px,2.6vh,30px)}
.js .hero .hero__figure[data-in]{transition-duration:1.2s}
.hero .cue{flex:none;height:clamp(36px,5vh,52px)}
/* the lead: the slim banner from V3 across the content width, the credibility strip beneath; the line runs on behind
   the mark as it did in the hero */
.lead{padding-top:clamp(20px,2.6vh,34px);padding-bottom:clamp(50px,6vw,90px);z-index:2}
.lead .hero__strip{margin-top:clamp(26px,3.6vh,44px)}
.lead .hero__mark{background:var(--ink)}
@media (max-width:900px){
  .hero{height:auto;min-height:max(100svh,640px);padding-top:76px}
  .hero__main{display:flex;flex-direction:column;align-items:stretch}
  .hero__copy{padding-right:0}
  .hero h1{font-size:clamp(30px,8vw,44px)}
  .hero__four{font-size:clamp(18px,4.8vw,20px);margin-top:12px}
  .hero__say{font-size:17px;line-height:1.42;margin-top:10px}
  .hero__figure{margin-top:18px;max-height:28vh;justify-content:center}
  .hero__figure img{max-height:28vh}
  .hero__main .hero__btns{margin:18px 0 12px;width:100%;gap:10px}
  .hero__main .hero__btns .btn{flex:1 1 100%;justify-content:space-between;padding:12px 20px}
  .lead .hero__strip{margin-top:16px}
  .lit__ppp ul::before{left:calc(-1 * var(--gutter) - var(--ind));top:-14px;bottom:-14px}
}
@keyframes cue{0%{transform:translateY(-16px);opacity:0}30%{opacity:1}100%{transform:translateY(44px);opacity:0}}
@media (max-width:900px){
  @keyframes cue{0%{transform:translateY(-16px);opacity:0}30%{opacity:1}100%{transform:translateY(40px);opacity:0}}
}
@media (min-width:700px){
  @keyframes landed{0%{transform:scale(1);opacity:.9}100%{transform:scale(4.4);opacity:0}}
}
@keyframes think{0%,100%{opacity:.25;transform:none}40%{opacity:1;transform:translateY(-3px)}}
@keyframes strip{to{transform:translate3d(-50%,0,0)}}
/* =====================================================================================================
   V7 (8 Oct, Puneet's notes): Latest is given room. Every item shows at once, nothing rotates away; an image is
   shown whole (a cover reads as a cover, never cropped to a strip); an item without one carries an icon. Beneath it,
   Commwiser's own properties: the Trial by Opinion podcast and the Reputation Index.
   ===================================================================================================== */
.lead .lt,.lead .pp{position:relative;z-index:1;width:min(1200px,100%);margin:0 auto}
.lead .pp{margin-top:clamp(30px,3.6vw,52px)}
.lt__head{display:flex;align-items:center;gap:14px;font-size:13px}
.lt__head::after{content:"";flex:1;height:1px;background:var(--line)}
.lt__items{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--col-gap);margin-top:16px}
.lt__i{display:grid;grid-template-columns:clamp(96px,8vw,118px) minmax(0,1fr);column-gap:clamp(16px,1.6vw,22px);align-items:start;padding:clamp(16px,1.6vw,22px);background:#EEE8E5;border:1px solid var(--line);border-top:3px solid var(--c)}
.lt__media{display:grid;place-items:center;aspect-ratio:452/640;background:color-mix(in srgb,var(--c) 12%,#F7F2EF);color:var(--c)}
.lt__media .ic{width:46%;color:var(--c);opacity:1}
/* the home draws its icons as their tiles light; these are simply drawn */
.js .lt__media .ic :not(.a){stroke-dashoffset:0;transition:none}
.js .lt__media .ic .a{opacity:1;transition:none}
.lt__media--cover{background:none}
.lt__media--cover img{display:block;width:100%;height:100%;object-fit:contain;box-shadow:0 10px 22px -12px rgba(21,25,27,.45)}
.lt__body{display:flex;flex-direction:column;min-width:0;height:100%}
.lt__body .lbl{font-size:12px}
.lt__t{margin-top:8px;font-family:var(--display);font-weight:400;font-size:clamp(20px,1.6vw,24px);line-height:1.15;letter-spacing:-.005em}
.lt__d{margin-top:6px;font-size:16px;line-height:1.35;color:var(--grey-light)}
.lt__go{margin-top:auto;padding-top:14px;align-self:flex-start;font-family:var(--display);font-size:16px;line-height:1.35;color:var(--indigo);border-bottom:1px solid currentColor;transition:opacity .3s ease}
.lt__go:hover{opacity:.7}
.pp__items{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap);margin-top:16px}
.pp__i{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(18px,2vw,30px);align-items:center;min-height:clamp(200px,16vw,236px);padding:clamp(20px,2.2vw,32px);background:#15191B;color:#F7F2EF;--acc:#D9C3A0}
.pp__i--idx{--acc:#A9CBD8}
.pp__body{display:flex;flex-direction:column;align-items:flex-start}
.pp__body .lbl{font-size:12px;color:var(--acc)}
.pp__t{margin-top:8px;font-family:var(--display);font-weight:400;font-size:clamp(30px,2.8vw,42px);line-height:1;letter-spacing:-.015em}
.pp__d{margin-top:10px;font-family:var(--display);font-size:clamp(17px,1.3vw,19px);line-height:1.3;color:rgba(247,242,239,.84)}
.pp__soon{margin-top:16px;padding:4px 9px;border:1px solid rgba(247,242,239,.3);font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(247,242,239,.72)}
/* the podcast: a waveform; the index: a rising set of bars. Both grow in as the panel comes into view */
.pp__vis{display:flex;align-items:center;height:clamp(110px,9vw,140px)}
.pp__wave{gap:3px}
.pp__wave i{flex:1;max-width:5px;height:var(--h);border-radius:2px;background:var(--acc)}
.pp__bars{align-items:flex-end;gap:clamp(6px,.7vw,10px);border-bottom:1px solid rgba(247,242,239,.3)}
.pp__bars i{flex:1;height:var(--h);background:linear-gradient(180deg,var(--acc),rgba(169,203,216,.35))}
.js .pp__wave i{scale:1 .12}
.js .pp__bars i{scale:1 0;transform-origin:bottom}
.js .pp__i.is-in .pp__wave i,.js .pp__i.is-in .pp__bars i{scale:1;transition:scale .5s var(--ease) calc(var(--k) * 30ms)}
.js .pp__i.is-in .pp__bars i{transition-duration:.7s;transition-delay:calc(var(--k) * 90ms)}
@media print{.js .pp__wave i,.js .pp__bars i{scale:1}}
@media (max-width:1100px){
  .lt__items{grid-template-columns:minmax(0,1fr)}
  .lt__i{grid-template-columns:96px minmax(0,1fr)}
}
@media (max-width:900px){
  .pp__items{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .pp__i{grid-template-columns:minmax(0,1fr);row-gap:18px}
  .pp__vis{height:86px}
}
/* the hero picture (V7): a photograph cut on the mark's slash at its foot, the mark at its corner, in place of the
   cut-out figure; a placeholder until Commwiser supplies its own */
.hero__figure--photo{position:relative;align-self:center;justify-content:flex-end}
.hero__shot{position:relative;display:block;height:min(60vh,560px);aspect-ratio:4/5;max-width:100%;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 70%,74.5% 100%,0 100%);background:#DEE2E3}
.hero__shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero__shotmark{position:absolute;left:clamp(-10px,-1vw,0px);bottom:clamp(24px,4vh,44px);width:clamp(64px,5.6vw,84px);color:#15191B;filter:drop-shadow(0 10px 18px rgba(21,25,27,.25))}
.hero__shotmark svg{display:block;width:100%;height:auto}
.hero__figure--photo .hero__shotmark{left:auto;right:calc(min(60vh,560px) * .8 - 30px)}
/* an event photograph fills its frame */
.lt__media--photo{background:none;overflow:hidden}
.lt__media--photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 50%}
/* phones and tablets: Latest and From Commwiser become rows you swipe. The row runs to both screen edges (past the
   line's indent and the gutter) and its first card lines up with the text; the next card shows at the edge, and dots
   beneath (built by home.js) show where you are and take you to any card */
.sw-dots,.sw-dots[hidden]{display:none}
@media (max-width:1100px){
  .lt__items,.pp__items{--bl:calc(var(--gutter) + var(--ind,0px));display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--bl);-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;margin-left:calc(-1 * var(--bl));margin-right:calc(-1 * var(--gutter));padding-left:var(--bl);padding-right:var(--gutter)}
  .lt__items::-webkit-scrollbar,.pp__items::-webkit-scrollbar{display:none}
  .lt__i{flex:0 0 min(78%,420px);scroll-snap-align:start}
  .pp__i{flex:0 0 min(84%,520px);scroll-snap-align:start}
  .sw-dots{display:flex;gap:4px;margin-top:12px}
  .sw-dots[hidden]{display:none}
  .sw-dots button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer}
  .sw-dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:rgba(21,25,27,.2);transition:background .3s ease,width .3s var(--ease)}
  .sw-dots button[aria-current="true"]::before{width:22px;border-radius:4px;background:var(--indigo)}
  .sw-dots button:focus-visible{outline:2px solid var(--steel-light);outline-offset:-4px}
}
/* phones: a Latest card stands up: its picture across the top, the words beneath */
@media (max-width:700px){
  .lt__i{grid-template-columns:minmax(0,1fr);row-gap:14px;flex-basis:min(80%,320px)}
  .lt__media{aspect-ratio:16/9}
  .lt__media .ic{width:22%}
  .lt__media--cover img{object-fit:contain}
}
@media (max-width:900px){
  .hero__shot{height:28vh}
  .hero__figure--photo{justify-content:center}
  .hero__figure--photo .hero__shotmark{right:auto;left:calc(50% - 28vh * .4 - 22px);bottom:12px;width:46px}
}