/* Commwiser — about: founder-led. Its own layout: the opening states where Commwiser stands (the meeting of law,
   business and communications, drawn); Aman, his portrait beside his two focuses and his path here; the team and the
   disciplines it brings; LawWiser at the centre of its community; the values; recognition; Mirovia; the close.
   Page colour: steel. */
:root{--indigo:#486675;--indigo-deep:#2D434E;--ab-deep:#1E2C33;--ab-light:#A9CBD8}
body{background:#F7F2EF}
.ab section{position:relative}
.ab h2.lbl{font-size:13px;letter-spacing:.16em;color:var(--indigo)}

/* 1. the opening: the line, the sentence, and the three circles meeting on the mark */
.ab-hero{isolation:isolate;color:#F7F2EF;padding:calc(68px + clamp(36px,6vh,72px)) var(--gutter) calc(var(--wz) + clamp(24px,4vh,56px))}
.ab-hero>.depth{left:0;right:0;clip-path:none;background:var(--ab-deep)}
.ab-hero>.depth::before{background:radial-gradient(48% 44% at 74% 40%,rgba(169,203,216,.15),transparent 70%),radial-gradient(44% 40% at 10% 84%,rgba(72,102,117,.2),transparent 70%)}
.ab-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--wz);background:#F7F2EF;clip-path:polygon(0 100%,100% 100%,100% 0,calc(62% + var(--wz) / tan(55.753deg)) 0,62% 100%);pointer-events:none}
.ab-hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:clamp(30px,5vw,90px);align-items:center}
.ab-hero__lbl{display:flex;align-items:center;gap:10px;color:var(--ab-light)}
.ab-hero h1{margin-top:clamp(14px,1.8vh,22px);font-family:var(--display);font-weight:400;font-size:clamp(42px,5.4vw,84px);line-height:.98;letter-spacing:-.025em}
.ab-hero__say{margin-top:clamp(16px,2vh,26px);max-width:20ch;font-family:var(--display);font-size:clamp(28px,3.2vw,50px);line-height:1.08;letter-spacing:-.015em;color:var(--ab-light)}
.ab-hero__intro{margin-top:clamp(20px,2.4vh,32px);max-width:46ch;font-family:var(--display);font-size:clamp(19px,1.55vw,23px);line-height:1.4;color:rgba(247,242,239,.84)}
.ab-x{position:relative;width:100%;max-width:520px;margin-left:auto;aspect-ratio:440/400}
.ab-x>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ab-x__c{fill:rgba(169,203,216,.07);stroke:var(--ab-light);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:0}
.ab-x__l{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-family:var(--display);font-weight:400;font-size:clamp(17px,1.6vw,23px);line-height:1;color:#F7F2EF}
.ab-x__m{position:absolute;left:50%;top:46.5%;width:clamp(34px,3.4vw,46px);transform:translate(-50%,-50%);color:#F7F2EF}
.ab-x__m svg{display:block;width:100%;height:auto;fill:currentColor}
/* play: each circle draws in turn, its name arrives with it, and the mark lands where all three meet */
.js .ab-x__c{stroke-dashoffset:1;fill-opacity:0}
.js .ab-x.is-play .ab-x__c{stroke-dashoffset:0;fill-opacity:1;transition:stroke-dashoffset 1.1s var(--ease) calc(var(--k) * .35s + .2s),fill-opacity .8s ease calc(var(--k) * .35s + .9s)}
.js .ab-x__l{opacity:0}
.js .ab-x.is-play .ab-x__l{opacity:1;transition:opacity .5s ease calc(var(--k) * .35s + .5s)}
.js .ab-x__m{opacity:0;scale:.6}
.js .ab-x.is-play .ab-x__m{opacity:1;scale:1;transition:opacity .5s ease 1.6s,scale .6s var(--ease) 1.6s}

/* 2. the founder: the portrait cut on the slash; his two focuses, Litigation PR first and largest; his path here */
.ab-fd{padding:clamp(48px,6vw,96px) var(--gutter) clamp(64px,7vw,110px)}
.ab-fd__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(30px,5vw,90px);align-items:start}
.ab-fd__pic{position:sticky;top:96px}
.ab-fd__pic img{display:block;width:100%;height:auto;clip-path:polygon(0 0,calc(100% - var(--k)) 0,100% calc(var(--k) * tan(55.753deg)),100% 100%,0 100%);--k:clamp(50px,6vw,100px)}
.ab-fd__name{margin-top:12px;font-family:var(--display);font-size:clamp(40px,4.6vw,72px);line-height:1;letter-spacing:-.02em;color:var(--dust)}
.ab-fd__role{margin-top:8px;font-family:var(--display);font-size:clamp(18px,1.4vw,21px);color:var(--indigo)}
.ab-fd__lead{margin-top:clamp(22px,2.4vw,34px);max-width:28ch;font-family:var(--display);font-size:clamp(25px,2.3vw,35px);line-height:1.15;letter-spacing:-.01em;color:var(--dust)}
.ab-fd__focus{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px;margin-top:clamp(24px,2.6vw,38px)}
.ab-fd__focus>div{display:flex;flex-direction:column;padding:clamp(18px,1.8vw,26px);color:#F7F2EF}
.ab-fd__f1{background:#1C3E4E}
.ab-fd__f2{background:#5A452F}
.ab-fd__focus span{font-family:var(--display);font-size:clamp(22px,2vw,30px);line-height:1.1;letter-spacing:-.01em}
.ab-fd__f2 span{font-size:clamp(19px,1.6vw,24px)}
.ab-fd__focus p{margin-top:auto;padding-top:20px;font-size:clamp(16px,1.15vw,17.5px);line-height:1.5;color:rgba(247,242,239,.84)}
.js .ab-fd__focus>div{opacity:0;translate:0 16px}
.js .ab-fd__focus.is-play>div{opacity:1;translate:none;transition:opacity .5s ease .1s,translate .6s var(--ease) .1s}
.js .ab-fd__focus.is-play .ab-fd__f2{transition-delay:.3s}
.ab-fd__before{margin-top:clamp(30px,3.2vw,48px)}
.ab-fd__before h3{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo)}
.ab-fd__before ul{list-style:none;margin-top:12px;border-top:1px solid var(--line)}
.ab-fd__before li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:4px 20px;padding:14px 0;border-bottom:1px solid var(--line)}
.ab-fd__before b{font-family:var(--display);font-weight:400;font-size:clamp(19px,1.5vw,22px);line-height:1.2;color:var(--dust)}
.ab-fd__before span{font-family:var(--display);font-size:16px;line-height:1.35;color:rgba(21,25,27,.66);align-self:center}
.ab-fd__also{margin-top:18px;font-family:var(--display);font-size:18px;color:rgba(21,25,27,.72)}
.ab-fd__also a{color:var(--indigo);border-bottom:1px solid currentColor}

/* 3. the team: the disciplines it brings, then the people, each under the colour of the practice they lead */
.ab-tm{padding:clamp(56px,6vw,96px) var(--gutter) clamp(64px,7vw,110px);background:#EEE8E5;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ab-tm__lead{margin-top:14px;max-width:34ch;font-family:var(--display);font-size:clamp(24px,2.4vw,36px);line-height:1.15;letter-spacing:-.01em;color:var(--dust)}
.ab-mix{list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 0;margin-top:clamp(20px,2.2vw,30px)}
.ab-mix li{display:flex;align-items:baseline;font-family:var(--display);font-size:clamp(20px,1.8vw,27px);line-height:1.2;color:var(--indigo)}
.ab-mix li+li::before{content:"";align-self:center;width:8px;height:.62em;margin:0 clamp(12px,1.4vw,22px);background:var(--ab-light);transform:skewX(-34.25deg)}
.ab-ppl{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);margin-top:clamp(30px,3.4vw,52px)}
.ab-ppl li{display:flex;flex-direction:column;padding:clamp(16px,1.5vw,22px);background:#F7F2EF;border-top:4px solid var(--c)}
.ab-ppl__pic{display:block;width:calc(100% + 2 * clamp(16px,1.5vw,22px));max-width:none;height:auto;aspect-ratio:1;margin:calc(-1 * clamp(16px,1.5vw,22px)) calc(-1 * clamp(16px,1.5vw,22px)) clamp(14px,1.4vw,20px);object-fit:cover;mix-blend-mode:multiply}
.ab-ppl__a{font-family:var(--display);font-size:11.5px;font-weight:700;letter-spacing:.14em;line-height:1.35;text-transform:uppercase;color:var(--dust);opacity:.66}
.ab-ppl b{margin-top:clamp(14px,1.4vw,20px);font-family:var(--display);font-weight:400;font-size:clamp(21px,1.75vw,27px);line-height:1.08;letter-spacing:-.01em;color:var(--dust)}
.ab-ppl__r{margin-top:6px;font-family:var(--display);font-size:16px;color:var(--indigo)}
.ab-ppl p{margin-top:14px;font-size:15.5px;line-height:1.5;color:rgba(21,25,27,.74)}
.ab-mix li:nth-child(1),.ab-ppl li:nth-child(1){--i:0}.ab-mix li:nth-child(2),.ab-ppl li:nth-child(2){--i:1}.ab-mix li:nth-child(3),.ab-ppl li:nth-child(3){--i:2}.ab-mix li:nth-child(4),.ab-ppl li:nth-child(4){--i:3}.ab-ppl li:nth-child(5){--i:4}
.js .ab-mix li,.js .ab-ppl li{opacity:0;translate:0 14px}
.js .ab-mix.is-play li,.js .ab-ppl.is-play li{opacity:1;translate:none;transition:opacity .5s ease calc(var(--i) * .12s + .1s),translate .6s var(--ease) calc(var(--i) * .12s + .1s)}

/* 4. LawWiser: its community drawn around it, a line out to each */
.ab-lw{padding:clamp(64px,7vw,110px) var(--gutter)}
.ab-lw__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(30px,5vw,90px);align-items:center}
.ab-lw__big{margin-top:14px;max-width:22ch;font-family:var(--display);font-size:clamp(30px,3.2vw,48px);line-height:1.06;letter-spacing:-.02em;color:var(--dust)}
.ab-lw__txt{margin-top:18px;max-width:56ch;font-size:clamp(17px,1.25vw,19px);line-height:1.6;color:rgba(21,25,27,.8)}
.ab-lw__go{margin-top:clamp(24px,2.6vw,36px)}
.ab-hub{position:relative;width:100%;max-width:500px;margin:0 auto;aspect-ratio:1;--r:36%}
.ab-hub__c{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:30%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);background:var(--indigo);color:#F7F2EF;font-family:var(--display);font-size:clamp(17px,1.6vw,22px)}
.ab-hub ul{list-style:none;position:absolute;inset:0}
.ab-hub li{position:absolute;left:50%;top:50%}
.ab-hub li::before{content:"";position:absolute;left:0;top:-1px;width:calc(var(--hub) * .36);height:2px;background:var(--ab-light);transform-origin:left;rotate:var(--a)}
.ab-hub li span{position:absolute;left:calc(cos(var(--a)) * var(--hub) * .38);top:calc(sin(var(--a)) * var(--hub) * .38);transform:translate(-50%,-50%);white-space:nowrap;padding:8px 14px;background:#F7F2EF;border:1px solid rgba(72,102,117,.35);font-family:var(--display);font-size:clamp(15px,1.25vw,18px);color:var(--dust)}
.ab-hub{--hub:min(500px,40vw)}
.js .ab-hub li::before{scale:0 1}
.js .ab-hub.is-play li::before{scale:1 1;transition:scale .6s var(--ease) calc(var(--k) * .15s + .2s)}
.js .ab-hub li span{opacity:0}
.js .ab-hub.is-play li span{opacity:1;transition:opacity .45s ease calc(var(--k) * .15s + .6s)}

/* 5. the values: three words, each on its rule */
.ab-val{padding:clamp(56px,6vw,96px) var(--gutter);background:#EEE8E5;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ab-val__row{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px);margin-top:clamp(20px,2.4vw,34px)}
.ab-val li{padding-top:18px;border-top:2px solid var(--indigo)}
.ab-val b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(40px,4.6vw,72px);line-height:1;letter-spacing:-.025em;color:var(--dust)}
.ab-val p{margin-top:14px;max-width:26ch;font-family:var(--display);font-size:clamp(18px,1.45vw,22px);line-height:1.3;color:rgba(21,25,27,.74)}
.ab-val li:nth-child(1){--i:0}.ab-val li:nth-child(2){--i:1}.ab-val li:nth-child(3){--i:2}
.js .ab-val li{opacity:0;translate:0 16px}
.js .ab-val__row.is-play li{opacity:1;translate:none;transition:opacity .5s ease calc(var(--i) * .16s + .1s),translate .6s var(--ease) calc(var(--i) * .16s + .1s)}

/* 6. recognised: the night of the award; the list; where Commwiser has been featured */
.ab-rec{padding:clamp(64px,7vw,110px) var(--gutter)}
.ab-rec__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(30px,5vw,90px);align-items:start}
.ab-rec__pic img{display:block;width:100%;height:auto}
.ab-rec__pic figcaption{margin-top:10px;font-family:var(--display);font-size:14px;color:rgba(21,25,27,.6)}
.ab-rec__list{list-style:none;margin-top:16px;border-top:1px solid var(--line)}
.ab-rec__list li{display:flex;flex-direction:column;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
.ab-rec__list b{font-family:var(--display);font-weight:400;font-size:clamp(20px,1.65vw,25px);line-height:1.2;color:var(--dust)}
.ab-rec__list span{font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--indigo)}
.ab-rec__list li:nth-child(1){--i:0}.ab-rec__list li:nth-child(2){--i:1}.ab-rec__list li:nth-child(3){--i:2}.ab-rec__list li:nth-child(4){--i:3}
.js .ab-rec__list li{opacity:0;translate:0 12px}
.js .ab-rec__list.is-play li{opacity:1;translate:none;transition:opacity .45s ease calc(var(--i) * .12s + .1s),translate .55s var(--ease) calc(var(--i) * .12s + .1s)}
.ab-rec__h{margin-top:clamp(28px,3vw,44px);font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo)}
.ab-rec__feat{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;margin-top:10px;font-family:var(--display);font-size:clamp(20px,1.7vw,26px);color:var(--dust)}
.ab-rec__feat i{width:7px;height:.6em;margin:0 clamp(12px,1.3vw,20px);background:var(--ab-light);transform:skewX(-34.25deg)}

/* 7. Mirovia: the network's mark, India connected */
.ab-mv{padding:clamp(56px,6vw,96px) var(--gutter);border-top:1px solid var(--line)}
.ab-mv__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(30px,5vw,90px);align-items:start}
.ab-mv__logo{display:flex;flex-direction:column;gap:12px;color:var(--dust)}
.ab-mv__logo span{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--indigo)}
.ab-mv__logo svg{display:block;width:clamp(180px,18vw,280px);height:auto}
.ab-mv__big{font-family:var(--display);font-size:clamp(30px,3.2vw,48px);line-height:1.06;letter-spacing:-.02em;color:var(--dust)}
.ab-mv__txt{margin-top:16px;max-width:58ch;font-size:clamp(17px,1.25vw,19px);line-height:1.6;color:rgba(21,25,27,.8)}
.ab-mv__three{margin-top:18px;font-family:var(--display);font-size:clamp(19px,1.5vw,23px);line-height:1.3;color:var(--indigo)}
.ab-mv__go{display:inline-block;margin-top:20px;font-family:var(--display);font-size:17px;color:var(--dust);border-bottom:1px solid currentColor}
.ab-mv__go:hover{color:var(--indigo)}

/* 8. the close */
.ab-close{padding:clamp(64px,7vw,112px) var(--gutter);background:var(--indigo);color:#F7F2EF}
.ab-close h2{font-family:var(--display);font-weight:400;font-size:clamp(38px,5vw,76px);line-height:1;letter-spacing:-.02em}
.ab-close .btn{margin-top:clamp(26px,3vw,40px);border-color:#F7F2EF;color:#F7F2EF}
.ab-close .btn:hover{background:#F7F2EF;color:var(--indigo)}
.ab-close :focus-visible{outline-color:var(--ab-light)}

@media print{.js .ab-x__c{stroke-dashoffset:0;fill-opacity:1}.js .ab-x__l,.js .ab-x__m,.js .ab-fd__focus>div,.js .ab-mix li,.js .ab-ppl li,.js .ab-hub li span,.js .ab-val li,.js .ab-rec__list li{opacity:1;translate:none;scale:1}.js .ab-hub li::before{scale:1 1}}
@media (max-width:1100px){
  .ab-ppl{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ab-lw__grid{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .ab-hub{--hub:min(500px,80vw)}
}
@media (max-width:900px){
  .ab-hero__grid,.ab-fd__grid,.ab-rec__grid,.ab-mv__grid{grid-template-columns:minmax(0,1fr);row-gap:32px}
  .ab-x{max-width:400px;margin:8px auto 0}
  .ab-fd__pic{position:static;max-width:420px}
  .ab-ppl{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .ab-fd__focus{grid-template-columns:minmax(0,1fr)}
  .ab-fd__before li{grid-template-columns:minmax(0,1fr)}
  .ab-ppl{grid-template-columns:minmax(0,1fr)}
  .ab-ppl__pic{width:128px;margin:0 0 14px}
  .ab-val__row{grid-template-columns:minmax(0,1fr)}
  /* the hub becomes a list: the centre above, each group on a line down from it */
  .ab-hub{aspect-ratio:auto;max-width:none}
  .ab-hub__c{position:static;transform:none;width:auto;aspect-ratio:auto;border-radius:0;padding:14px 18px;place-items:start}
  .ab-hub ul{position:static;margin-left:20px;border-left:2px solid var(--ab-light)}
  .ab-hub li{position:static;padding:8px 0 8px 18px}
  .ab-hub li::before{display:none}
  .ab-hub li span{position:static;transform:none;display:inline-block}
}