/* Capital Markets: the practice-page system with a capabilities index, five capability blocks and a coverage section. Mason's copy, 2026-09-12. */

/* Intro section: prose beside the photo instead of three positions. */
.cm-prose{gap:19px;justify-content:center}
.cm-prose p{font-size:17px;line-height:1.7;color:var(--body);max-width:62ch;margin:0}

/* Capital Markets key capabilities: click index on the left, the open capability's text at the right, its photograph full-bleed behind the whole section. Mason's pick, 2026-09-12. Phones: an accordion over the same photograph. */
.cmx{--cmx-rule:rgba(243,245,248,.16);--cmx-muted:#7f8ca0;--cmx-sky:#95b2d6;background:var(--navy);color:var(--paper);padding:88px 0 96px;position:relative;isolation:isolate;overflow:hidden}
.cmx .practice-services-in{position:relative;z-index:1}
/* The page's vertical rails are paper-coloured and read white on navy: paint over them and redraw them in the section's own hairline tone. */
.cmx{z-index:1}
.cmx::before,.cmx::after{content:'';position:absolute;top:0;bottom:0;width:1px;background:var(--cmx-rule);pointer-events:none;z-index:1}
.cmx::before{left:calc(var(--rail) - 27px)}
.cmx::after{right:calc(var(--rail) - 27px)}
.cmx .eyebrow{color:var(--cmx-sky)}
.cmx .practice-section-head h2{color:var(--paper)}
.cmx .practice-section-rule{background:var(--cmx-rule)}

/* The photographs: only the open capability's is visible; each switch crossfades and lets the picture settle. */
.cmx-photos{position:absolute;inset:0;z-index:0;background:#101924}
.cmx-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;transform:scale(1.06);filter:grayscale(.55) brightness(.85);transition:opacity .6s ease,transform 5s ease;will-change:opacity,transform}
.cmx-ph.is-on{opacity:1;transform:scale(1)}
.cmx-photos::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,18,29,.98) 0%,rgba(12,18,29,.92) 34%,rgba(12,18,29,.42) 62%,rgba(12,18,29,.5) 100%),linear-gradient(180deg,rgba(12,18,29,.2) 0%,rgba(12,18,29,0) 40%,rgba(12,18,29,.75) 78%,rgba(12,18,29,.97) 100%);pointer-events:none}

/* Index left, open text right, a hairline between. */
.cmx-list{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:400px minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;column-gap:56px;min-height:720px}
.cmx-list::before{content:'';position:absolute;top:0;bottom:0;left:428px;width:1px;background:var(--cmx-rule)}
.cmx-list li{display:contents}
.cmx-tab{grid-column:1;display:grid;grid-template-columns:44px 36px minmax(0,1fr);align-items:baseline;width:100%;text-align:left;border:0;border-radius:0;box-shadow:none;background:none;padding:12px 0;margin:0;font:400 26px/1.25 Spectral,Georgia,serif;letter-spacing:-.01em;color:var(--cmx-muted);cursor:pointer;transition:color .25s;align-self:start}
.cmx-tab:first-child{padding-top:6px}
.cmx-tab:hover,.cmx-tab.is-on{color:var(--paper)}
.cmx-tab:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
.cmx-arrow{width:26px;height:12px;color:var(--cmx-sky);opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s;align-self:center}
.cmx-tab.is-on .cmx-arrow{opacity:1;transform:none}
.cmx-n{display:block;font:500 11px/1 Hanken,Arial,sans-serif;letter-spacing:.16em;color:var(--cmx-muted);margin-bottom:16px}
.cmx-tab .cmx-n{margin:0}
.cmx-tab.is-on .cmx-n{color:var(--cmx-sky)}
.cmx-panel{grid-column:2;grid-row:1 / span 5;align-self:end;padding:0 0 8px;animation:cmxFade .5s ease}
.cmx-panel[hidden]{display:none}
.cmx-panel .cmx-n{color:var(--cmx-sky)}
.cmx-title{font:400 clamp(30px,calc(2.6vw / var(--z,1)),38px)/1.1 Spectral,Georgia,serif;letter-spacing:-.02em;color:var(--paper);padding:28px 0 16px;margin:0}
.cmx-detail{max-width:62ch}
.cmx-panel--long .cmx-detail{max-width:none;columns:2;column-gap:40px}
.cmx-detail p{break-inside:avoid;margin:0 0 11px;font-size:15.5px;line-height:1.6;color:#c9d2de}
.cmx-detail b{font-weight:500;color:var(--paper)}
.cmx-lead{column-span:all;font-size:17px;line-height:1.55;color:var(--paper);max-width:60ch;margin:0 0 16px}
.cmx-note{color:var(--paper);margin-top:14px}
@keyframes cmxFade{from{opacity:0}to{opacity:1}}

@media(max-width:1050px){
 .cmx-list{grid-template-columns:320px minmax(0,1fr);column-gap:40px}
 .cmx-list::before{left:340px}
 .cmx-tab{font-size:23px}
 .cmx-panel--long .cmx-detail{columns:1;max-width:62ch}
}
@media(max-width:760px){
 .cmx{padding:140px 0 56px}
 .cmx::before{left:12px}
 .cmx::after{right:12px}
 .cmx-photos::after{background:linear-gradient(180deg,rgba(12,18,29,.22) 0%,rgba(12,18,29,.8) 30%,rgba(12,18,29,.97) 52%)}
 .cmx-ph{object-position:center 30%}
 .cmx-list{display:block;min-height:0}
 .cmx-list::before{display:none}
 .cmx-list li{display:block;border-top:1px solid var(--cmx-rule)}
 .cmx-list li:last-child{border-bottom:1px solid var(--cmx-rule)}
 .cmx-tab{grid-template-columns:36px minmax(0,1fr);padding:18px 0;font-size:22px}
 .cmx-tab:first-child{padding-top:18px}
 .cmx-arrow{display:none}
 .cmx-panel{padding:0 0 22px 36px;animation:none}
 .cmx-title{display:none}
 .cmx-detail p{font-size:15px}
 .cmx-lead{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.cmx-ph{transition:none;transform:none}.cmx-panel{animation:none}}

/* M&A and Strategic Advisory: the long title wraps to two lines so the hero intro keeps its column. */
.practice-ma .practice-hero h1{white-space:normal;max-width:16ch;font-size:clamp(56px,calc(5.6vw / var(--z,1)),88px);line-height:1.04}
@media(max-width:760px){.practice-ma .practice-hero h1{font-size:clamp(49px,calc(10.6vw / var(--z,1)),72px);max-width:12ch;line-height:1.08}}

/* Relationships and coverage: the same section shape, photo on the right, a rule above it. */
.cm-coverage{padding-top:0}
.cm-coverage .practice-services-in{position:relative;padding-top:clamp(60px,calc(8svh / var(--z,1)),96px)}
.cm-coverage .practice-services-in::before{content:'';display:block;position:absolute;top:0;bottom:auto;left:var(--rail);right:var(--rail);width:auto;height:1px;background:var(--line)}
.cm-coverage .practice-services-body{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.cm-coverage .practice-services-photo{order:2}

.practice-capital-markets .practice-section-head,.practice-ma .practice-section-head{align-items:start}
.practice-capital-markets .practice-section-head>p,.practice-ma .practice-section-head>p{padding:39px 0 0}

@media(max-width:760px){
 .practice-capital-markets .practice-section-head>p,.practice-ma .practice-section-head>p{padding-top:0}
 .cm-prose{gap:16px}.cm-prose p{font-size:16px}

 .cm-coverage .practice-services-in{padding-top:48px}
 .cm-coverage .practice-services-body{grid-template-columns:1fr}
 .cm-coverage .practice-services-photo{order:0}
}

/* Sections fill the screen, as on the home page. */
.practice-cm .practice-services,.practice-ma .practice-services,.practice-cf .practice-services{min-height:calc(100vh / var(--z,1));display:flex;flex-direction:column}
.practice-cm .practice-services>.practice-services-in,.practice-ma .practice-services>.practice-services-in,.practice-cf .practice-services>.practice-services-in{width:100%;flex:1;display:flex;flex-direction:column;justify-content:center}
@media(max-width:760px){.practice-cm .practice-services,.practice-ma .practice-services,.practice-cf .practice-services{min-height:0}}