/* How we work: «Your voice, our team» composition approved from the comp.
   Scenes are cut-out rasters with solid white fills, so they sit on paper, cobalt and the dark canvas alike. */
body[data-document-page="how-we-work"]{overflow-x:clip}
.hww{padding-top:0}
.hww-pic{margin:0;min-width:0}.hww-pic img{display:block;width:100%;height:auto}

.hww-band{background:var(--fill);color:var(--onFill);margin-inline:calc(50% - 50vw);padding:26px calc(50vw - 50%) 56px}
.hww-band .work-back{color:var(--onFill)}
.hww .hww-band .work-intro{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:start;gap:clamp(28px,5vw,72px);margin:22px 0 0}
.hww .hww-band .work-intro h1{color:var(--onFill);max-width:11ch}
.hww .hww-band .work-hand{--hand:var(--handOnFill);color:var(--handOnFill)}
.hww-hero-copy{font:19px/1.6 NeueText,sans-serif;color:var(--onFill);max-width:46ch;margin:0}
.hww-hero-text .hww-hero-copy{margin-top:26px}
.hww-hero-side .hww-hero-copy{margin:22px 0 0 auto}
.hww-pic-hero{max-width:620px;margin-left:auto}

.hww .work-process{margin-top:56px}
.hww-stage-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;border-top:1px solid var(--line2);padding-top:36px}
.hww .work-stage-panel{display:block;border-top:0;padding:0;min-height:0}
.hww .work-stage-panel[hidden]{display:none}
.hww .work-stage-panel h2{margin-bottom:22px}
.hww-pic-conversation{max-width:560px;justify-self:end;width:100%}

.hww .work-ownership{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
.hww-pic-yours{max-width:600px;width:100%}
.hww-ownership-copy header{margin-bottom:30px}

.hww .work-running{display:block;background:transparent;color:var(--ink);padding:44px 0 0;border-top:1px solid var(--line2);border-radius:0}
/* The block is no longer a cobalt panel, so the note returns to the page hand colour. */
.hww .work-running .work-note{--hand:#1B2F99;color:#1B2F99;max-width:none}
html[data-theme="dark"] .hww .work-running .work-note{--hand:#C7F36B;color:#C7F36B}
.hww-team{overflow-x:auto;margin:34px 0 30px;scrollbar-color:var(--accentText) var(--line);scrollbar-width:thin}
.hww-team:focus-visible{outline:2px solid var(--hand);outline-offset:5px}
.hww-pic-team{min-width:760px;position:relative;padding-bottom:34px}
.hww-pic-team figcaption span{position:absolute;bottom:0;transform:translateX(-50%);white-space:nowrap;font:600 14px/1.3 Neue,sans-serif;color:var(--ink)}
.hww-running-copy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px)}
.hww .work-running>.hww-running-copy p{color:var(--ink2);margin:0;font:18px/1.65 NeueText,sans-serif;max-width:60ch}

.hww .work-examples ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.5vw,48px)}
.hww .work-examples li{display:flex;flex-direction:column;gap:14px;padding:0;border-top:0}
.hww .work-examples li .hww-pic{order:-1;height:170px;display:flex;align-items:center}
.hww .work-examples li .hww-pic img{max-height:100%;width:auto;max-width:100%}
.hww .work-examples h3{font-size:22px;max-width:none}
.hww .work-examples li p{font-size:17px}
.hww .work-examples .work-example-note{text-align:center;margin-inline:auto;margin-top:40px}

@media(max-width:900px){.hww .hww-band .work-intro{grid-template-columns:1fr}.hww-pic-hero{margin:0 auto}.hww-hero-side .hww-hero-copy{margin-left:0}.hww-stage-body{grid-template-columns:1fr}.hww-pic-conversation{justify-self:center}.hww .work-ownership{grid-template-columns:1fr}.hww-pic-yours{margin-inline:auto;max-width:380px}.hww-running-copy{grid-template-columns:1fr;gap:20px}.hww .work-examples ul{grid-template-columns:1fr;gap:36px}.hww .work-examples li .hww-pic{height:auto;max-width:320px}}
@media(max-width:760px){.hww-band{padding-top:14px;padding-bottom:40px}.hww-hero-copy{font-size:16px}.hww .work-process{margin-top:36px}.hww-stage-body{padding-top:24px}.hww .work-running{padding-top:32px}.hww .work-running>.hww-running-copy p{font-size:16px}.hww-pic-team figcaption span{font-size:12px}.hww .work-examples li p{font-size:16px}}