/* Commwiser — professional-services: the model audience page. Its own layout, built around the audience: who they
   are (the opening, with their four sectors), what they need (the bridge from technical expertise to market authority,
   Aman's five levers its planks), the services that do it, and the close. Page colour: plum. */
:root{--indigo:#47364F;--indigo-deep:#382A3F;--ps-deep:#2F2335;--ps-light:#C9B6CF}
body{background:#F7F2EF}
.ps-page section{position:relative}
.ps-page h2.lbl{font-size:13px;letter-spacing:.16em;color:var(--indigo)}

/* 1. the opening: who they are */
.ps-hero{isolation:isolate;color:#F7F2EF;padding:calc(68px + clamp(36px,6vh,72px)) var(--gutter) calc(var(--wz) + clamp(20px,3vh,40px))}
.ps-hero>.depth{left:0;right:0;clip-path:none;background:var(--ps-deep)}
.ps-hero>.depth::before{background:radial-gradient(50% 44% at 76% 30%,rgba(201,182,207,.16),transparent 70%),radial-gradient(44% 40% at 10% 84%,rgba(144,123,150,.16),transparent 70%)}
.ps-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}
.ps-hero__lbl{display:flex;align-items:center;gap:10px;color:var(--ps-light)}
.ps-hero h1{margin-top:clamp(14px,1.8vh,22px);font-family:var(--display);font-weight:400;font-size:clamp(42px,5.6vw,88px);line-height:.98;letter-spacing:-.025em}
.ps-hero__say{margin-top:clamp(16px,2vh,26px);max-width:22ch;font-family:var(--display);font-size:clamp(26px,3vw,46px);line-height:1.1;letter-spacing:-.015em;color:var(--ps-light)}
.ps-sec{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(40px,6vh,72px);border-top:1px solid rgba(247,242,239,.24)}
.ps-sec li{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,22px);padding:clamp(18px,2vw,28px) clamp(14px,1.6vw,24px) 0 0}
.ps-sec li+li{padding-left:clamp(14px,1.6vw,24px);border-left:1px solid rgba(247,242,239,.24)}
.ps-sec .ic{width:clamp(38px,3.2vw,48px);color:var(--ps-light);opacity:1}
.ps-sec b{font-family:var(--display);font-weight:400;font-size:clamp(20px,1.7vw,26px);line-height:1.15}
.js .ps-sec li{opacity:0;translate:0 16px}
.js .ps-sec.is-play li{opacity:1;translate:none;transition:opacity .5s ease calc(var(--i) * .15s + .2s),translate .6s var(--ease) calc(var(--i) * .15s + .2s)}
.ps-sec li:nth-child(1){--i:0}.ps-sec li:nth-child(2){--i:1}.ps-sec li:nth-child(3){--i:2}.ps-sec li:nth-child(4){--i:3}
/* the shared icon rule draws its lines on play elsewhere; here they are simply drawn */
.js .ps-page .ic :not(.a){stroke-dashoffset:0;transition:none}
.js .ps-page .ic .a{opacity:1;transition:none}

/* 2. the bridge: technical expertise on one bank, market authority on the other, the five levers its planks */
.ps-how{padding:clamp(48px,6vw,96px) var(--gutter) clamp(56px,7vw,110px)}
.ps-how__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)}
.br{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3.4fr) minmax(0,1fr);align-items:end;margin-top:clamp(36px,4.4vw,66px)}
.br__bank{display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(150px,13vw,190px);padding:clamp(16px,1.6vw,22px);background:var(--b);color:#F7F2EF}
.br__from{--b:#5A4763}
.br__to{--b:var(--ps-deep)}
.br__bank .lbl{font-size:11.5px;color:var(--ps-light)}
.br__bank b{margin-top:8px;font-family:var(--display);font-weight:400;font-size:clamp(21px,1.8vw,28px);line-height:1.1}
.br__span{position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;padding:0 clamp(8px,1vw,14px)}
.br__planks{list-style:none;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;border-bottom:3px solid var(--indigo);padding-bottom:6px}
.br__planks li{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-height:clamp(120px,10vw,150px);padding:clamp(12px,1.2vw,16px);background:#EEE8E5;border-top:4px solid var(--c)}
.br__planks .ic{width:clamp(30px,2.4vw,38px);color:var(--c);opacity:1}
.br__planks b{margin-top:auto;font-family:var(--display);font-weight:400;font-size:clamp(16px,1.3vw,19px);line-height:1.15;color:var(--dust)}
.br__planks li:nth-child(1){--i:0}.br__planks li:nth-child(2){--i:1}.br__planks li:nth-child(3){--i:2}.br__planks li:nth-child(4){--i:3}.br__planks li:nth-child(5){--i:4}
.ps-how__say{margin-top:clamp(26px,3vw,44px);max-width:58ch;font-family:var(--display);font-size:clamp(19px,1.5vw,23px);line-height:1.35;color:rgba(21,25,27,.8)}
/* play: the far bank waits; the planks are laid from expertise towards authority, then the far bank appears */
.js .br__planks li{opacity:0;translate:-14px 0}
.js .br.is-play .br__planks li{opacity:1;translate:none;transition:opacity .45s ease calc(var(--i) * .16s + .25s),translate .55s var(--ease) calc(var(--i) * .16s + .25s)}
.js .br__to{opacity:.25}
.js .br.is-play .br__to{opacity:1;transition:opacity .6s ease 1.15s}

/* 3. the services that do it: each card names the levers it carries */
.ps-svc{padding:clamp(48px,6vw,90px) var(--gutter) clamp(56px,7vw,100px);background:#EEE8E5;border-top:1px solid var(--line)}
.ps-svc .ix{margin-top:clamp(24px,2.6vw,38px)}
.ps-svc .ix__c{background:#F7F2EF}
.ix__lv{margin-top:10px;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.12em;line-height:1.5;text-transform:uppercase;color:var(--c)}

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

@media print{.js .ps-sec li,.js .br__planks li{opacity:1;translate:none}.js .br__to{opacity:1}}
@media (max-width:1100px){
  .br{grid-template-columns:minmax(0,1fr)}
  .br__span{padding:10px 0}
  .br__planks{grid-template-columns:repeat(5,minmax(0,1fr))}
  .br__bank{min-height:0}
}
@media (max-width:700px){
  .ps-sec{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
  .ps-sec li+li{padding-left:0;border-left:0}
  .ps-sec li:nth-child(even){padding-left:14px;border-left:1px solid rgba(247,242,239,.24)}
  .br__planks{grid-template-columns:minmax(0,1fr);gap:6px;border-bottom:0;border-left:3px solid var(--indigo);padding:0 0 0 10px}
  .br__planks li{flex-direction:row;align-items:center;min-height:0;border-top:0;border-left:4px solid var(--c)}
  .br__planks b{margin-top:0}
  .js .br__planks li{translate:0 10px}
}