/* Commwiser — law-firm-growth: what only this page uses. */
.rd{position:absolute;inset:0;pointer-events:none}
@media print{
  .rd{display:none}
}
/* =====================================================================================================
   Indian Law Firm Growth & BD. The Litigation PR page's pattern (title block, chapter rail, every chapter a
   picture with words as labels) in this page's own colour, umber. The one dark moment is partner visibility (03).
   Pictures with [data-play] play once they are properly on screen and reset when they leave it.
   ===================================================================================================== */
:root{--indigo:#5A452F;--indigo-deep:#43331F;--steel-light:#7A6040}
.tb{border-bottom-color:#5A452F}
.who-t .tile{--tile:#5A452F}
.ch--dark{--bg:#3A2C1E}
.ch--dark .depth{background:#3A2C1E}
.ch--dark .depth::before{background:radial-gradient(58% 36% at 82% 16%,rgba(217,195,160,.13),transparent 70%),radial-gradient(52% 34% at 10% 72%,rgba(184,152,104,.14),transparent 70%)}
.dark .ch__n,.dark .lit__lbl{color:#D9C3A0}
.rail.is-dark a.is-here::before{color:#D9C3A0}
.rail.is-dark a.is-here::after{background:#D9C3A0}
.hdr.hdr--dark{--hdr-on-bg:rgba(36,27,18,.8)}
/* 01 from expertise to work: three steps rising, what you bring above what it gets you */
.lad{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:clamp(10px,1.2vw,18px);height:clamp(360px,30vw,430px);padding:clamp(24px,2.8vw,40px) clamp(22px,2.6vw,40px) 0;background:#EEE8E5;border-bottom:2px solid #5A452F}
.lad li{display:flex;flex-direction:column;height:var(--h);padding:clamp(18px,1.8vw,26px);background:var(--s);color:#F7F2EF;transition:clip-path .9s var(--ease) var(--d,0s)}
.lad li:nth-child(1){--h:44%;--s:#7C6142}
.lad li:nth-child(2){--h:70%;--s:#6A5238;--d:.28s}
.lad li:nth-child(3){--h:100%;--s:#5A452F;--d:.56s}
.lad .dg__lb{color:#EBDCC2}
.lad small{margin-top:10px;font-family:var(--display);font-style:italic;font-size:clamp(15px,1.15vw,17px);line-height:1.2;color:rgba(247,242,239,.78)}
.lad h3{margin-top:4px;font-family:var(--display);font-weight:400;font-size:clamp(28px,2.6vw,40px);line-height:1;letter-spacing:-.015em;color:#F7F2EF}
.js .lad li{clip-path:inset(100% 0 0 0)}
.js .lad.is-play li{clip-path:inset(0 0 0 0)}
/* 02 six services: tiles, name and one line */
.svc-t{grid-template-columns:repeat(3,minmax(0,1fr))}
.svc-t .tile{min-height:clamp(220px,18vw,262px)}
.svc-t .tile p{margin-top:8px;font-family:var(--display);font-size:clamp(16.5px,1.25vw,18.5px);line-height:1.3;color:rgba(247,242,239,.86)}
.svc-t .tile__t{padding-top:22px}
/* 03 partner visibility: a partner at the centre, a line out to each place they are seen */
.rd{position:relative;margin-top:clamp(30px,3.4vw,52px);aspect-ratio:1000/520}
.rd>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.rd__ring{fill:none;stroke:rgba(247,242,239,.16);stroke-width:1;stroke-dasharray:2 7}
.rd__sp{fill:none;stroke:#D9C3A0;stroke-width:1.3;stroke-dasharray:1;stroke-dashoffset:0}
.js .rd__sp{stroke-dashoffset:1;transition:stroke-dashoffset .75s var(--ease-io) var(--d,0s)}
.js .rd.is-play .rd__sp{stroke-dashoffset:0}
.rd__n{position:absolute;left:calc(var(--x) / 10 * 1%);top:calc(var(--y) / 5.2 * 1%);width:0;height:0}
.rd__dot{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#3A2C1E;border:1px solid rgba(217,195,160,.7)}
.rd__dot .ic{width:28px;color:#F7F2EF}
.rd__n b{position:absolute;white-space:nowrap;font-family:var(--display);font-weight:400;font-size:clamp(17px,1.5vw,21px);line-height:1;color:#F7F2EF}
.rd__n.at-t b{bottom:44px;left:0;transform:translateX(-50%)}
.rd__n.at-b b{top:44px;left:0;transform:translateX(-50%)}
.rd__n.at-l b{right:44px;top:-.5em}
.rd__n.at-r b{left:44px;top:-.5em}
.rd__c .rd__dot{left:-58px;top:-58px;width:116px;height:116px;background:#D9C3A0;border:0;box-shadow:0 0 0 10px rgba(217,195,160,.14)}
.rd__c .rd__dot .ic{width:48px;color:#3A2C1E}
.rd__c b{top:74px;left:0;transform:translateX(-50%);color:#D9C3A0}
.js .rd__n:not(.rd__c){opacity:.3;transition:opacity .5s ease calc(var(--d,0s) + .55s)}
.js .rd.is-play .rd__n{opacity:1}
.rd__list{display:none}
/* 04 content: a bulletin board beside a campaign canvas */
.bc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap)}
.bc__p{display:flex;flex-direction:column;margin:0;padding:clamp(20px,2.2vw,32px);background:#EEE8E5;border:1px solid rgba(90,69,47,.16)}
.bc__canvas{background:#5A452F;border-color:#5A452F}
.bc__art{position:relative;height:clamp(200px,17vw,240px)}
.bc__art i{position:absolute;left:var(--x);top:var(--y);width:clamp(62px,5.6vw,80px);aspect-ratio:4/3;background:#F7F2EF;border:1px solid rgba(21,25,27,.14);box-shadow:0 6px 14px -8px rgba(21,25,27,.35);transform:rotate(var(--r,0deg));
  background-image:linear-gradient(rgba(21,25,27,.16),rgba(21,25,27,.16)),linear-gradient(rgba(21,25,27,.1),rgba(21,25,27,.1));background-size:62% 3px,44% 3px;background-position:10px 12px,10px 21px;background-repeat:no-repeat}
.bc__art i::before{content:"";position:absolute;left:50%;top:-4px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#9A8F86}
.js .bc__board .bc__art i{opacity:0;translate:0 -18px;transition:opacity .45s ease var(--d),translate .55s var(--ease) var(--d)}
.js .bc__board.is-play .bc__art i{opacity:1;translate:none}
.bc__line{position:absolute;left:4%;right:4%;bottom:22%;height:1px;background:rgba(235,220,194,.5);transform-origin:left}
.bc__canvas .bc__art i{border-color:transparent;background-color:#F7F2EF;box-shadow:0 10px 20px -10px rgba(0,0,0,.5)}
.bc__canvas .bc__art i::before{display:none}
.bc__canvas .bc__art i b{position:absolute;left:10px;bottom:7px;font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.12em;color:#5A452F}
.js .bc__canvas .bc__line{transform:scaleX(0);transition:transform 1.4s var(--ease-io)}
.js .bc__canvas.is-play .bc__line{transform:none}
.js .bc__canvas .bc__art i{opacity:0;translate:-16px 0;transition:opacity .45s ease var(--d),translate .55s var(--ease) var(--d)}
.js .bc__canvas.is-play .bc__art i{opacity:1;translate:none}
.bc__p figcaption{margin-top:clamp(16px,1.8vw,24px);padding-top:clamp(12px,1.4vw,18px);border-top:1px solid rgba(90,69,47,.22)}
.bc__canvas figcaption{border-top-color:rgba(235,220,194,.3)}
.bc__p figcaption b{display:block;margin-top:8px;font-family:var(--display);font-weight:400;font-size:clamp(21px,1.75vw,26px);line-height:1.15;color:var(--dust)}
.bc__canvas .dg__lb{color:#EBDCC2}
.bc__canvas figcaption b{color:#F7F2EF}
@media print{
  .js .lad li{clip-path:none}
  .js .rd__sp{stroke-dashoffset:0}
  .js .rd__n{opacity:1}
  .js .bc__art i{opacity:1;translate:none}
  .js .bc__canvas .bc__line{transform:none}
}
@media (max-width:900px){
  .rail.is-dark{background:rgba(58,44,30,.94)}
  .rail a.is-here::before{color:#EBDCC2}
}
@media (max-width:1179px){
  .svc-t{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
/* phones: the three steps become bars growing to the right, widest last */
  .lad{grid-template-columns:minmax(0,1fr);align-items:stretch;height:auto;gap:8px;padding:16px 0 16px;border-bottom:0;border-left:2px solid #5A452F;background:none}
  .lad li{width:var(--w);height:auto;padding:14px 16px}
  .lad li:nth-child(1){--w:62%}
  .lad li:nth-child(2){--w:81%}
  .lad li:nth-child(3){--w:100%}
  .lad h3{font-size:26px}
  .js .lad li{clip-path:inset(0 100% 0 0)}
  .svc-t{grid-template-columns:minmax(0,1fr)}
  .rd{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
  .rd__n b{display:none}
  .rd__dot{left:-19px;top:-19px;width:38px;height:38px}
  .rd__dot .ic{width:18px}
  .rd__c .rd__dot{left:-34px;top:-34px;width:68px;height:68px;box-shadow:0 0 0 6px rgba(217,195,160,.14)}
  .rd__c .rd__dot .ic{width:30px}
  .rd__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;list-style:none;margin-top:18px}
  .rd__list li{padding-top:8px;border-top:1px solid rgba(247,242,239,.24);font-family:var(--display);font-size:17px;color:#F7F2EF}
  .rd__list li:first-child{grid-column:1/-1;color:#D9C3A0}
  .bc{grid-template-columns:minmax(0,1fr)}
}