.materials-page { box-sizing: border-box; color: #33404a; float: left; font-size: 16px; line-height: 1.62; padding: 0 30px 34px; width: 774px; }
body .materials-page + .material-contact { margin-left: 30px; width: 714px; }
.materials-heading { margin: 14px 0 32px; max-width: 650px; }
.materials-eyebrow { color: #2b79aa; display: block; font: 700 13px TitilliumText22LBold, Arial, sans-serif; letter-spacing: 1.25px; text-transform: uppercase; }
.materials-heading h1, .material-not-found h1 { color: #1f2a51; font: 700 42px/1.08 TitilliumText22LBold, Arial, sans-serif; margin: 7px 0 12px; }
.materials-heading p { color: #5f6a73; font-size: 18px; margin: 0; }
.materials-grid { display: grid; gap: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.material-card { background: rgba(255, 255, 255, .94); border: 1px solid #d7e0e6; border-radius: 26px 26px 15px 15px; box-shadow: 0 12px 28px rgba(31, 42, 81, .1); display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding-top: 15px; }
.material-card-image {
    background: #dce4e9;
    border: 1px solid rgba(255, 255, 255, .88);
    border-radius: 50% / 18%;
    box-shadow: 0 10px 17px rgba(28, 43, 65, .2), inset 0 2px 2px rgba(255, 255, 255, .9), inset 0 -8px 13px rgba(26, 43, 61, .2);
    display: block;
    height: 154px;
    margin: 0 15px;
    overflow: hidden;
    position: relative;
}
.material-card-image::before {
    background: linear-gradient(180deg, rgba(255, 255, 255, .48), transparent 27%, transparent 70%, rgba(17, 34, 54, .2));
    content: '';
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}
.material-card-image::after {
    border: 1px solid rgba(23, 48, 71, .22);
    border-radius: 50%;
    bottom: 2px;
    content: '';
    pointer-events: none;
    position: absolute;
    right: -3px;
    top: 2px;
    width: 23px;
    z-index: 2;
}
.material-card-image img { border-radius: inherit; display: block; height: 100%; object-fit: cover; transition: transform .25s ease; width: 100%; }
.material-card:hover .material-card-image img { transform: scale(1.035); }
.material-card-content { display: flex; flex: 1; flex-direction: column; padding: 22px 21px 22px; }
.material-card-content > span { color: #2b79aa; font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.material-card h2 { font: 700 23px/1.14 TitilliumText22LBold, Arial, sans-serif; margin: 6px 0 10px; }
.material-card h2 a { color: #1f2a51; text-decoration: none; }
.material-card p { color: #66717a; font-size: 15px; margin: 0 0 17px; }
.material-card-link { color: #236b9c; font-weight: 700; margin-top: auto; text-decoration: none; }
.material-card-link:hover { text-decoration: underline; }
.materials-empty, .material-not-found { background: #fff; border-radius: 12px; padding: 35px; }
.material-breadcrumb { color: #75818a; font-size: 14px; margin: 7px 0 15px; }
.material-breadcrumb a { color: #286f9f; text-decoration: none; }
.material-breadcrumb span { margin-left: 7px; }
.material-hero { border: 1px solid rgba(255, 255, 255, .82); border-radius: 50% / 12%; box-shadow: 0 16px 32px rgba(25, 39, 66, .2), inset 0 3px 3px rgba(255, 255, 255, .72), inset 0 -14px 25px rgba(16, 35, 54, .18); height: 390px; margin: 0 -30px 42px; overflow: hidden; position: relative; }
.material-hero > img { height: 100%; object-fit: cover; width: 100%; }
.material-hero-shade { background: linear-gradient(90deg, rgba(14, 27, 49, .92), rgba(20, 44, 72, .72) 60%, rgba(20, 44, 72, .13)); inset: 0; position: absolute; }
.material-hero::before { background: linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 24%, transparent 77%, rgba(11, 28, 46, .2)); content: ''; inset: 0; pointer-events: none; position: absolute; z-index: 2; }
.material-hero-no-image { background: linear-gradient(135deg, #1f2a51, #276b9c); }
.material-hero-copy { bottom: 38px; color: #fff; left: 46px; max-width: 555px; position: absolute; right: 38px; z-index: 3; }
.material-hero-copy .materials-eyebrow { color: #9fd7f4; }
.material-hero h1 { color: #fff; font: 700 43px/1.07 TitilliumText22LBold, Arial, sans-serif; margin: 8px 0 16px; }
.material-formats { border-left: 3px solid #63acd8; font-size: 16px; padding-left: 13px; }
.material-introduction { display: grid; gap: 32px; grid-template-columns: 220px minmax(0, 1fr); margin: 0 8px 48px; }
.material-section-label h2, .material-technical h2 { color: #1f2a51; font: 700 29px/1.12 TitilliumText22LBold, Arial, sans-serif; margin: 7px 0 0; }
.material-rich-text { color: #4f5d67; min-width: 0; overflow-wrap: anywhere; }
.material-rich-text p { margin: 0 0 17px; }
.material-rich-text ul, .material-rich-text ol { margin: 0 0 18px; padding-left: 22px; }
.material-lead { color: #315a78; font-size: 18px; }
.material-technical { margin-bottom: 24px; overflow: hidden; padding: 30px 32px; }
.material-technical header { border-bottom: 1px solid #e1e8ec; margin-bottom: 25px; padding-bottom: 20px; }
.material-detail-image { float: left; height: auto; margin: 2px 25px 13px 0; max-width: 145px; }
.material-back-link { color: #236b9c; display: inline-block; font-weight: 700; margin: 4px 0 18px 8px; text-decoration: none; }
.material-back-link:hover { text-decoration: underline; }

@media (max-width: 760px) {
    body .materials-page + .material-contact { margin: 12px 12px 30px; width: calc(100% - 24px); }
    .materials-page { float: none; padding: 0 12px 28px; width: 100%; }
    .materials-heading { margin-top: 4px; padding: 0 6px; }
    .materials-heading h1, .material-not-found h1 { font-size: 35px; }
    .materials-grid { grid-template-columns: 1fr; }
    .material-card { border-radius: 24px 24px 14px 14px; }
    .material-card-image { border-radius: 50% / 15%; height: 180px; margin: 0 12px; }
    .material-breadcrumb { padding: 0 5px; }
    .material-hero { border-radius: 50% / 9%; height: 410px; margin-left: -12px; margin-right: -12px; }
    .material-hero h1 { font-size: 36px; }
    .material-hero-copy { bottom: 34px; left: 31px; right: 25px; }
    .material-introduction { display: block; margin: 0 8px 38px; }
    .material-section-label { margin-bottom: 18px; }
    .material-technical { padding: 26px 22px; }
    .material-detail-image { max-width: 105px; }
}