/* Capital & Wealth pages in the Direction 1 look (WO-WEB-C13, part 2). The hub is on the industry
   template (joan-site.css); here are its one extra block ("Who does what") and the five audience
   pages, which keep their approved C12 copy: the industry opening with the redrawn picture, then
   two-column sections (heading, text) on ivory and paper, the "Our view" statement, the question
   panel, "What you get" as the site's check list, the proof strip and the other types of firm.
   Every rule is scoped to `.p-cw main`, so nothing here reaches the header or footer. Colours,
   type and spacing are the shell's tokens. For older readers: nothing under 14px, body text at
   7:1 or better on ivory and paper. */

/* ------------------------------------------------------------ hub: who does what */
.p-cw main .whodoes { background: var(--ivory); border-top: 1px solid var(--line); }
.p-cw main .whodoes-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 72px; align-items: start; }
.p-cw main .roles li { padding: 18px 0; border-top: 1px solid var(--line); font-size: 19px; line-height: 1.55; color: var(--ink-2); }
.p-cw main .roles li:last-child { border-bottom: 1px solid var(--line); }
.p-cw main .roles strong { font: 500 22px/1.3 var(--serif); color: var(--ink); margin-right: 6px; }
/* WO-WEB-C18 review round 1: the firm's sovereignty, defined under "Who does what", with a link to "What stays yours". */
.p-cw main .whodoes-sov { margin-top: 28px; max-width: 37em; font-size: 19px; line-height: 1.55; color: var(--ink-2); }
.p-cw main .whodoes-sov b { font: 500 22px/1.3 var(--serif); color: var(--ink); }
.p-cw main .whodoes-sov + .tlink { margin-top: 12px; }

/* ------------------------------------------------------------ audience pages: the opening (text only since WO-WEB-C21 and C22; each page's product moment follows it) */
.p-cw main .hero-aud .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: 72px; }
.p-cw main .hero-aud .display { font-size: clamp(40px, 4.4vw, 66px); }

/* ------------------------------------------------------------ audience pages: sections */
.p-cw main .aud-sec { background: var(--ivory); border-top: 1px solid var(--line); }
.p-cw main .aud-paper { background: var(--paper); }
.p-cw main .aud-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 72px; align-items: start; }
.p-cw main .aud-split > h2 { max-width: 12em; }
.p-cw main .aud-prose { max-width: 37em; }
.p-cw main .aud-prose p { font-size: 19px; line-height: 1.6; color: var(--ink-2); }
.p-cw main .aud-prose p + p, .p-cw main .aud-prose p + .platforms { margin-top: 20px; }
.p-cw main .aud-prose .lead-line { font-size: 24px; line-height: 1.4; color: var(--ink); }
.p-cw main .aud-qa h2 { font-size: clamp(28px, 2.6vw, 40px); }

/* "Our view": one statement, on bone with an evergreen rule (r4: no dark bands) */
.p-cw main .aud-view { background: var(--bone); border-top: 3px solid var(--green); }
.p-cw main .aud-view-h { font: 600 16px/1.3 var(--sans); letter-spacing: .01em; color: var(--green); margin-bottom: 22px; display: inline-flex; align-items: center; gap: 12px; }
.p-cw main .aud-view-h::before { content: ""; width: 28px; height: 1.5px; background: var(--copper-bright); }
.p-cw main .aud-statement { max-width: 20em; font: 420 clamp(32px, 3.6vw, 52px)/1.16 var(--serif); letter-spacing: -.016em; color: var(--green-deep); text-wrap: balance; }
.p-cw main .aud-statement.long { max-width: 26em; font-size: clamp(26px, 2.7vw, 40px); line-height: 1.22; }

/* the question panel */
.p-cw main .aud-q { background: var(--bone-2); border-top: 1px solid var(--line); }
.p-cw main .q-panel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 28px 64px; align-items: end; padding: clamp(32px, 4.5vw, 64px); background: var(--paper); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); }
.p-cw main .q-big { max-width: 16em; font-size: clamp(30px, 3.1vw, 44px); }

/* what you get */
.p-cw main .aud-get { background: var(--paper); border-top: 1px solid var(--line); }
.p-cw main .aud-get .checks { margin-top: 0; }
.p-cw main .aud-get .checks .ico { stroke: var(--green); }

/* already at work */
.p-cw main .aud-work { background: var(--bone-2); }
.p-cw main .aud-work .platforms { padding-top: 18px; border-top: 1px solid var(--line); }

/* other types of firm */
.p-cw main .aud-others .tile-aud { margin-bottom: 20px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .p-cw main .hero-aud .hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .p-cw main .aud-split, .p-cw main .whodoes-in, .p-cw main .q-panel { grid-template-columns: 1fr; }
  .p-cw main .hero-aud .hero-grid { padding-bottom: 48px; }
  .p-cw main .q-panel { padding: 28px 22px; }
}
@media (max-width: 640px) {
  .p-cw main .aud-prose .lead-line { font-size: 21px; }
  .p-cw main .aud-statement { font-size: 30px; }
  .p-cw main .aud-statement.long { font-size: 25px; }
  .p-cw main .q-big { font-size: 30px; }
  .p-cw main .roles strong { font-size: 20px; }
}