/* Only the four role articles opt into this surface. Existing news typography stays intact. */
.role-landing { --role-accent:#155eaa; color:#17304a; background:#f8fbfe; overflow-wrap:anywhere; }
.role-landing__container { width:min(76rem,calc(100% - 3rem)); margin-inline:auto; }
.role-landing svg { flex:none; width:1.25rem; height:1.25rem; }
.role-landing h1,.role-landing h2,.role-landing h3 { color:#123154; }
.role-landing a { text-underline-offset:4px; }
.role-landing a:focus-visible,.role-landing summary:focus-visible { outline:3px solid #e9ad32; outline-offset:5px; }
.role-landing__hero { overflow:hidden; border-bottom:1px solid #e5edf5; background:radial-gradient(ellipse at 88% 50%,#dcecf9 0,transparent 48%),linear-gradient(120deg,#f5fbff,#fff 70%); }
.role-landing__breadcrumbs { display:flex; flex-wrap:wrap; gap:.4rem .6rem; padding-top:1.25rem; color:#63758a; font-size:.78rem; }
.role-landing__breadcrumbs a { color:#526c85; text-decoration:none; }
.role-landing__breadcrumbs [aria-current] { max-width:46rem; }
.role-landing__hero-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(15rem,.8fr); gap:clamp(1.5rem,5vw,5rem); align-items:center; min-height:29rem; }
.role-landing__hero-copy { min-width:0; padding:2.5rem 0 2.75rem; }
.role-landing__eyebrow { display:flex; align-items:center; gap:.5rem; margin:0 0 .8rem; color:var(--role-accent); font-size:.78rem; font-weight:750; line-height:1.5; }
.role-landing__hero h1 { margin:0 0 1.1rem; font-size:clamp(1.8rem,3vw,2.75rem); line-height:1.23; letter-spacing:-.025em; font-weight:800; }
.role-landing__lead { max-width:42rem; margin:0; color:#4d647c; font-size:1rem; line-height:1.8; }
.role-landing__actions { display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; margin:1.65rem 0 1.4rem; }
.role-landing__button { display:inline-flex; min-height:2.9rem; align-items:center; justify-content:center; gap:.65rem; padding:.8rem 1.15rem; border:1px solid transparent; border-radius:.8rem; font-size:.88rem; font-weight:750; line-height:1.4; text-decoration:none; transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease; }
.role-landing__button--primary { border-color:#ffffff26; background:linear-gradient(145deg,var(--role-accent),#144c89); color:#fff; box-shadow:0 6px 20px #174e8226; }
.role-landing__button--secondary { border-color:#d5e3f0; background:#ffffffd9; color:#254f78; box-shadow:0 5px 16px #174e820c; }
.role-landing__meta { margin:0; font-size:.74rem; line-height:1.6; }
.role-landing__portrait { position:relative; align-self:end; display:flex; align-items:flex-end; justify-content:center; height:28rem; margin:0; }
.role-landing__portrait::before { position:absolute; bottom:2rem; width:95%; aspect-ratio:1; border:1px solid #ffffffbd; border-radius:50%; background:radial-gradient(circle at 35% 28%,#fff,#d8eafa); box-shadow:0 16px 45px #2856810f; content:""; }
.role-landing__portrait img { position:relative; display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom; filter:drop-shadow(0 8px 6px #173c5914); }
.role-landing__content { padding-block:2.4rem; }
.role-landing .rich-content { border:0; border-radius:0; background:transparent; box-shadow:none; font-size:.93rem; line-height:1.8; }
.role-landing .rich-content p { margin:.65rem 0; }
.role-landing .rich-content ul,.role-landing .rich-content ol { padding-left:1.25rem; }
.role-landing .rich-content li { margin:.4rem 0; }
.role-landing .rich-content img { max-width:100%; height:auto; }
.role-landing .rich-content a { color:var(--role-accent); }
.role-landing .rich-content h3 { margin-top:1.15rem; font-size:1.05rem; line-height:1.5; }
.role-landing .rich-content :is(h2,h3,h4) { scroll-margin-top:7rem; }
.role-landing .role-landing__intro { max-width:58rem; padding:0; margin-bottom:1.8rem; color:#52677b; }
.role-landing__sections { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem; }
.role-landing .role-landing__section { position:relative; min-width:0; padding:1.65rem 1.75rem; border:1px solid #e0eaf2; border-radius:1.15rem; background:linear-gradient(155deg,#fff,#fcfdff); box-shadow:0 5px 0 #e7eef5,0 14px 30px #2b507609,inset 0 1px 0 #fff; transition:transform .2s ease,box-shadow .2s ease; }
.role-landing__section-number { display:inline-grid; width:2.35rem; height:2.35rem; place-items:center; margin-bottom:.7rem; border:1px solid #d8e8f5; border-radius:.7rem; background:#edf6fd; color:var(--role-accent); font-size:.8rem; font-weight:800; }
.role-landing .role-landing__section > h2 { margin:0 0 .8rem; font-size:1.3rem; line-height:1.4; letter-spacing:-.015em; }
.role-landing__section > :last-child { margin-bottom:0; }
.role-landing__infographic { margin-top:2rem; }
.role-landing__infographic > h2 { margin:0 0 .85rem; font-size:1.3rem; }
.role-landing__infographic details { overflow:hidden; border:1px solid #dbe7f1; border-radius:.9rem; background:#fff; }
.role-landing__infographic summary { display:flex; align-items:center; gap:.7rem; min-height:3.5rem; padding:.9rem 1.2rem; color:var(--role-accent); font-size:.9rem; font-weight:700; cursor:pointer; list-style:none; }
.role-landing__infographic summary::-webkit-details-marker { display:none; }
.role-landing__disclosure-mark { margin-left:auto; font-size:1.35rem; line-height:1; }
.role-landing__infographic details[open] .role-landing__disclosure-mark { transform:rotate(45deg); }
.role-landing .role-landing__original { padding:1.25rem; border-top:1px solid #e3edf5; }
.role-landing__original figure { max-width:45rem; }
.role-landing__original img { display:block; margin-inline:auto; }
.role-landing__sharing { margin-top:1.6rem; }
.role-landing__sharing .article-share { position:static; display:flex; width:auto; align-items:center; gap:1rem; }
.role-landing__sharing .article-share__actions { display:flex; }
.role-landing__related { padding-block:.5rem 2.75rem; }
.role-landing__related > h2 { margin:0 0 1.4rem; font-size:clamp(1.35rem,2vw,1.8rem); }
.role-landing__related-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.1rem; }
.role-landing__related-card { display:flex; min-width:0; flex-direction:column; align-items:flex-start; padding:1.4rem; border:1px solid #deebf5; border-radius:1rem; background:#fff; box-shadow:0 5px 0 #e6eef6,0 14px 28px #274e7508; transition:transform .2s ease,box-shadow .2s ease; }
.role-landing__related-icon { display:grid; width:2.6rem; height:2.6rem; place-items:center; border-radius:.8rem; background:#edf6ff; color:var(--role-accent); }
.role-landing__related-card h3 { margin:.85rem 0 .6rem; font-size:1rem; line-height:1.5; }
.role-landing__related-card h3 a { color:inherit; text-decoration:none; }
.role-landing__related-card p { margin:0 0 1rem; color:#5b6e81; font-size:.86rem; line-height:1.75; }
.role-landing__text-link { display:inline-flex; align-items:center; gap:.5rem; margin-top:auto; color:var(--role-accent); font-size:.83rem; font-weight:750; text-decoration:none; }
.role-landing__text-link svg { width:1rem; }
.role-landing__consultation { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.7rem 2rem; border:1px solid #d7e5f2; border-radius:1.2rem; background:linear-gradient(115deg,#e7f4ff,#f5faff 65%,#e7f5f4); box-shadow:0 8px 0 #e5eef6; }
.role-landing__consultation .role-landing__eyebrow { margin-bottom:.3rem; }
.role-landing__consultation h2 { margin:0 0 .5rem; font-size:1.45rem; }
.role-landing__consultation p { margin:0; color:#58718a; font-size:.9rem; line-height:1.7; }
.role-landing__consultation > a { flex:none; }
.role-landing { padding-bottom:3.5rem; }
.role-landing > .article-preview-banner { position:relative; top:auto; margin:1rem auto; width:min(76rem,calc(100% - 3rem)); }
@media(hover:hover) and (prefers-reduced-motion:no-preference) {
  .role-landing__button:hover { transform:scale(1.035); box-shadow:0 10px 25px #174e8230; }
  .role-landing .role-landing__section:hover,.role-landing__related-card:hover { transform:translateY(-3px); box-shadow:0 8px 0 #e4edf5,0 20px 36px #2b507613; }
}
@media(max-width:900px) {
  .role-landing__hero-grid { grid-template-columns:minmax(0,1.4fr) minmax(11rem,.75fr); gap:1rem; min-height:25rem; }
  .role-landing__portrait { height:24rem; }
  .role-landing__hero h1 { font-size:1.9rem; }
  .role-landing__lead { font-size:.93rem; }
  .role-landing__sections { gap:1rem; }
  .role-landing .role-landing__section { padding:1.4rem; }
  .role-landing__related-grid { grid-template-columns:1fr; }
  .role-landing__consultation { align-items:flex-start; flex-direction:column; }
}
@media(max-width:620px) {
  .role-landing__container { width:calc(100% - 2rem); }
  .role-landing__breadcrumbs { font-size:.7rem; padding-top:1rem; }
  .role-landing__hero-grid { grid-template-columns:minmax(0,1fr); gap:0; }
  .role-landing__hero-copy { padding:1.65rem 0 .6rem; }
  .role-landing__hero h1 { font-size:1.8rem; }
  .role-landing__lead { font-size:.92rem; line-height:1.75; }
  .role-landing__actions { margin-block:1.25rem; gap:.65rem; }
  .role-landing__button { padding:.75rem 1rem; font-size:.82rem; }
  .role-landing__portrait { width:min(17rem,85%); height:18rem; margin-inline:auto; }
  .role-landing__content { padding-block:1.5rem; }
  .role-landing__sections { grid-template-columns:1fr; }
  .role-landing .role-landing__section { padding:1.35rem; }
  .role-landing .role-landing__section > h2 { font-size:1.18rem; }
  .role-landing__related { padding-bottom:2rem; }
  .role-landing__consultation { padding:1.4rem; }
  .role-landing__consultation h2 { font-size:1.3rem; }
  .role-landing { padding-bottom:2.5rem; }
}
@media(prefers-reduced-motion:reduce) {
  .role-landing__button,.role-landing .role-landing__section,.role-landing__related-card { transition:none; }
}