/* Contemporary CSR: a photographic introduction, project rail and editorial stories. */
.csr-page.csr-scroll-page { --csr-blue: #30357b; --csr-wine: #81475c; --csr-ink: #252944; --csr-muted: #646578; --csr-line: #dddde4; background: #fffcf4; color: var(--csr-ink); }
.csr-page.csr-scroll-page .page-intro--csr { display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: clamp(36px, 6vw, 88px); padding-block: 40px 44px; border: 0; }
.csr-scroll-page .page-intro--csr .page-intro-copy { display: block; max-width: 680px; }
.csr-scroll-page .page-intro--csr .eyebrow { color: var(--csr-wine); font-size: 11px; font-weight: 750; letter-spacing: .15em; text-transform: uppercase; margin-bottom: 26px; }
.csr-scroll-page .page-intro--csr h1 { margin: 0 0 26px; max-width: 670px; color: var(--csr-blue); font: 800 clamp(44px, 5.25vw, 76px)/1.05 var(--body, sans-serif); letter-spacing: -.065em; text-wrap: balance; }
.csr-scroll-page .page-intro--csr .page-intro-copy > p { max-width: 460px; margin: 0; color: var(--csr-muted); font-size: 17px; line-height: 1.85; }
.csr-hero-photo { position: relative; margin: 0; min-width: 0; width: 100%; max-width: 430px; justify-self: end; }
.csr-hero-photo a { display: block; color: inherit; text-decoration: none; }
.csr-hero-photo img { display: block; width: 100%; height: auto; border-radius: 18px 72px 18px 18px; }
.csr-hero-photo figcaption { display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; width: 94%; margin: -48px 0 0 -24px; padding: 20px 24px; border: 1px solid #e7e1e3; border-radius: 12px; background: #fffcf4; color: var(--csr-wine); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; box-shadow: 0 12px 36px #30357b0a; }
.csr-hero-photo figcaption strong { display: block; margin-top: 5px; max-width: 290px; color: var(--csr-blue); font-size: 15px; line-height: 1.45; letter-spacing: -.02em; text-transform: none; }
.csr-hero-arrow { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 50%; background: #f3e7eb; color: var(--csr-wine); font-size: 23px; }
.csr-hero-photo a:hover .csr-hero-arrow { background: var(--csr-wine); color: white; }
.csr-projects-overview { padding-block: 20px 72px; }
.csr-overview-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 26px; padding-top: 28px; border-top: 1px solid var(--csr-line); }
.csr-overview-heading .eyebrow { margin-bottom: 10px; color: var(--csr-wine); font-size: 10px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.csr-overview-heading h2 { margin: 0; color: var(--csr-blue); font: 750 clamp(26px, 2.6vw, 38px)/1.15 var(--body, sans-serif); letter-spacing: -.045em; }
.csr-rail-tools { display: flex; align-items: center; gap: 24px; }
.csr-rail-tools > p { max-width: 180px; margin: 0; color: var(--csr-muted); font-size: 12px; line-height: 1.65; }
.csr-rail-arrows { display: flex; gap: 8px; }
.csr-rail-arrows button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #ccccd8; border-radius: 50%; background: transparent; color: var(--csr-blue); font-size: 23px; cursor: pointer; }
.csr-rail-arrows button:hover:not(:disabled) { background: var(--csr-blue); border-color: var(--csr-blue); color: white; }
.csr-rail-arrows button:disabled { opacity: .3; cursor: default; }
.csr-project-grid { display: grid; grid-auto-flow: column; grid-auto-columns: 340px; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 2px 2px 24px; scrollbar-width: thin; scrollbar-color: #a5a7c2 #e9e8e9; }
.csr-project-card { min-width: 0; scroll-snap-align: start; border: 1px solid #e3e2e8; background: #fff; border-radius: 16px; overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.csr-project-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.csr-project-picture { position: relative; display: grid; place-items: center; aspect-ratio: 3 / 2; background: #e9ecf6; overflow: hidden; }
.csr-project-picture img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; }
[data-csr-project="inspire-inclusion"] .csr-project-picture img { object-position: 50% 40%; }
[data-csr-project="childrens-day-2024"] .csr-project-picture img { object-position: 50% 70%; }
[data-csr-project="world-kidney-day-2025"] .csr-project-picture img { object-position: 50% 55%; }
.csr-project-picture--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 3px; background: #f3e7eb; }
.csr-project-category { position: absolute; left: 16px; top: 16px; max-width: calc(100% - 70px); padding: 7px 11px; border-radius: 30px; background: #fffcf4; color: var(--csr-blue); font-size: 10px; font-weight: 750; letter-spacing: .02em; }
.csr-project-number { position: absolute; right: 15px; top: 16px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #30357be8; color: white; font-size: 10px; font-weight: 650; }
.csr-project-card-copy { display: flex; flex: 1; flex-direction: column; align-items: start; padding: 24px; }
.csr-project-date { margin: 0 0 12px; color: var(--csr-wine); font-size: 10px; line-height: 1.6; font-weight: 650; }
.csr-project-card h2 { margin: 0 0 14px; color: var(--csr-blue); font: 750 23px/1.25 var(--body, sans-serif); letter-spacing: -.035em; text-wrap: pretty; }
.csr-project-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0 0 24px; color: var(--csr-muted); font-size: 13px; line-height: 1.8; }
.csr-project-action { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 44px; margin-top: auto; padding-top: 16px; border-top: 1px solid #e6e5ec; color: var(--csr-blue); font-size: 12px; font-weight: 750; }
.csr-project-action > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #f3e7eb; color: var(--csr-wine); font-size: 19px; line-height: 1; transition: background .2s, color .2s; }
.csr-project-card:hover { border-color: #bcbdd2; box-shadow: 0 8px 24px #30357b09; }
.csr-project-card-link:hover .csr-project-action > span { background: var(--csr-wine); color: white; }
.csr-project-card-link[aria-current=location] { box-shadow: inset 0 0 0 2px var(--csr-wine); border-radius: 15px; }
.csr-project-placeholder { font: 800 55px/1 var(--body, sans-serif); color: var(--csr-blue); }
.csr-scroll-page :is(.csr-project-card-link,.csr-hero-photo a):focus-visible { outline: 3px solid var(--csr-wine); outline-offset: -4px; border-radius: 14px; }
.csr-rail-arrows button:focus-visible, .csr-project-grid:focus-visible { outline: 3px solid var(--csr-wine); outline-offset: 4px; }
/* Consistent photo frames; each gallery image links to its full original. */
.csr-project-chapter { border-top: 1px solid var(--csr-line); background: #fffcf4; }
.csr-project-chapter:nth-child(even) { background: #f0f1f7; }
.csr-scroll-page .csr-project-stories [data-csr-section] { padding-block: clamp(52px, 6vw, 88px) 32px; border: 0; background: transparent; color: var(--csr-ink); scroll-margin-top: 0; }
.csr-project-stories [data-csr-section]:focus, #csr-projects-overview:focus { outline: none; }
#csr-projects-overview { scroll-margin-top: 0; }
.csr-scroll-page .smiles-project::before { display: none; }
.csr-scroll-page :is(.smiles-header,.inclusion-heading) { max-width: none; margin-bottom: 40px; }
.csr-scroll-page .inclusion-heading { display: grid; grid-template-columns: 1.12fr .88fr; column-gap: clamp(32px, 6vw, 88px); align-items: start; }
.csr-scroll-page :is(.smiles-project,.inclusion-project) .eyebrow { grid-column: 1 / -1; margin: 0 0 20px; color: var(--csr-wine); font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.csr-scroll-page .smiles-project .eyebrow::before { display: none; }
.csr-scroll-page :is(.smiles-header,.inclusion-heading) h2 { grid-column: 1; max-width: 800px; margin: 0 0 22px; color: var(--csr-blue); font: 750 clamp(32px, 3.7vw, 52px)/1.13 var(--body, sans-serif); letter-spacing: -.05em; text-wrap: balance; }
.csr-scroll-page .inclusion-date { grid-column: 1; grid-row: 3; margin: 0; color: var(--csr-wine); font-size: 12px; letter-spacing: .02em; }
.csr-scroll-page .inclusion-introduction { grid-column: 2; grid-row: 2 / 4; max-width: none; margin: 0; color: var(--csr-muted); font-size: 17px; line-height: 1.85; }
.csr-scroll-page .smiles-header { grid-template-columns: minmax(0,1fr) minmax(0,.6fr); gap: 56px; }
.csr-scroll-page .smiles-subtitle { max-width: 560px; margin: 0; color: var(--csr-muted); font: 450 20px/1.65 var(--body, sans-serif); letter-spacing: -.02em; }
.csr-scroll-page .smiles-wordmark { justify-self: end; max-width: 310px; padding: 18px; border: 0; border-radius: 16px; background: white; transform: none; }
.csr-scroll-page .smiles-wordmark img { height: auto; }
.csr-scroll-page .smiles-story { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: clamp(32px, 5vw, 72px); }
.csr-scroll-page .smiles-story-copy > p { color: var(--csr-muted); font-size: 16px; line-height: 1.9; }
.csr-scroll-page .smiles-story-copy > p.smiles-introduction { color: var(--csr-ink); font-size: 19px; line-height: 1.75; }
.csr-scroll-page .smiles-since { margin-top: 28px; border-color: var(--csr-line); }
.csr-scroll-page .smiles-since strong { color: var(--csr-blue); font: 750 64px/1.1 var(--body, sans-serif); letter-spacing: -.065em; }
.csr-scroll-page .smiles-since :is(span,p) { color: var(--csr-muted); }
.csr-scroll-page :is(.smiles-photo,.inclusion-photo) { min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; }
.csr-scroll-page .csr-photo-full { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; }
.csr-scroll-page :is(.smiles-photo,.inclusion-photo) img { display: block; width: 100%; height: 100%; border-radius: 0; object-fit: cover; }
.csr-scroll-page .kidney-day-project .csr-photo-full { aspect-ratio: 4 / 5; }
.csr-scroll-page .smiles-project .csr-photo-full { aspect-ratio: 16 / 9; }
.csr-scroll-page .smiles-project .csr-photo-full img { object-position: 50% 20%; }
.csr-scroll-page #inspire-inclusion .inclusion-gallery img { object-position: 50% 0%; }
.csr-scroll-page .childrens-day-project .inclusion-highlights img { object-position: 50% 70%; }
.csr-scroll-page #inspire-inclusion .inclusion-highlights img { object-position: 50% 40%; }
.csr-scroll-page .csr-photo-full:focus-visible { outline: 3px solid var(--csr-wine); outline-offset: 4px; }
.csr-scroll-page :is(.smiles-photo,.inclusion-photo) figcaption { margin: 0; padding: 12px 2px 0; color: var(--csr-muted); font-size: 11px; line-height: 1.7; }
.csr-scroll-page .smiles-photo--feature { max-width: none; width: 100%; align-self: center; }
.csr-scroll-page .smiles-principles { gap: 24px; margin-block: 44px; }
.csr-scroll-page .smiles-principles > li { padding: 24px; border: 0; border-radius: 12px; background: #eeedf4; }
.csr-scroll-page .smiles-principle-number { margin-bottom: 18px; color: var(--csr-wine); font-size: 11px; }
.csr-scroll-page .smiles-principles h3 { color: var(--csr-blue); font: 700 21px/1.25 var(--body, sans-serif); letter-spacing: -.03em; }
.csr-scroll-page .smiles-principles p { color: var(--csr-muted); font-size: 14px; }
.csr-scroll-page .smiles-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; }
.csr-scroll-page .smiles-gallery .smiles-photo:nth-child(even) { margin-top: 0; }
.csr-scroll-page .smiles-gallery .smiles-photo img { aspect-ratio: auto; background: transparent; }
.csr-scroll-page .smiles-gallery-caption { color: var(--csr-muted); }
.csr-scroll-page .children-partner { display: inline-flex; gap: 16px; margin-bottom: 36px; padding: 12px 22px 12px 12px; border: 1px solid var(--csr-line); border-radius: 12px; background: #fff; }
.csr-scroll-page .children-partner img { width: 64px; height: 64px; border-radius: 6px; }
.csr-scroll-page .children-partner span { color: var(--csr-muted); font-size: 10px; }
.csr-scroll-page .children-partner strong { color: var(--csr-blue); font-size: 15px; font-weight: 700; }
.csr-scroll-page .inclusion-highlights { gap: 28px; }
.csr-scroll-page .inclusion-copy { max-width: 760px; margin: 44px auto; }
.csr-scroll-page .inclusion-copy p { color: var(--csr-muted); font-size: 17px; line-height: 1.9; }
.csr-scroll-page .inclusion-gallery { gap: 28px; }
.csr-scroll-page :is(.smiles-gallery,.inclusion-highlights,.inclusion-gallery) { align-items: start; }
.csr-chapter-return { padding-block: 4px 44px; }
.csr-chapter-return a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; border-bottom: 1px solid #b7b9cd; color: var(--csr-blue); font-size: 12px; font-weight: 750; text-decoration: none; }
.csr-chapter-return a:hover { color: var(--csr-wine); border-color: var(--csr-wine); }
.csr-chapter-return a:focus-visible { outline: 3px solid var(--csr-wine); outline-offset: 4px; }
.csr-scroll-page .csr-tennis::before, .csr-scroll-page .csr-tennis::after { display: none; }
.csr-scroll-page .tennis-feature { color: var(--csr-ink); }
.csr-scroll-page .tennis-feature .tennis-heading > .eyebrow { color: var(--csr-wine); font-size: 11px; letter-spacing: .1em; }
.csr-scroll-page .tennis-feature .tennis-heading > .eyebrow::before { background: var(--csr-wine); }
.csr-scroll-page .tennis-feature .tennis-heading > h2 { max-width: 900px; color: var(--csr-blue); font: 750 clamp(32px, 3.7vw, 52px)/1.13 var(--body, sans-serif); letter-spacing: -.05em; }
.csr-scroll-page .tennis-feature :is(.tennis-subtitle,.tennis-introduction p,.tennis-video-caption,.tennis-body p,.tennis-closing,.tennis-impact li > p) { color: var(--csr-muted); }
.csr-scroll-page .tennis-feature .tennis-heading > .tennis-subtitle { color: var(--csr-muted); font-size: 20px; }
.csr-scroll-page .tennis-feature .tennis-introduction p { font-size: 18px; }
.csr-scroll-page .tennis-feature .tennis-video > video.content-video { border: 0; border-radius: 16px; background: #202442; box-shadow: none; }
.csr-scroll-page .tennis-feature .tennis-impact li { border-color: var(--csr-line); }
.csr-scroll-page .tennis-feature .tennis-impact-value { color: var(--csr-blue); font: 750 clamp(36px,4vw,52px)/1.1 var(--body, sans-serif); letter-spacing: -.05em; }
.csr-scroll-page .tennis-feature .tennis-impact li > strong { color: var(--csr-wine); font: 700 18px/1.4 var(--body, sans-serif); }
.csr-scroll-page .tennis-feature .tennis-body { border-color: var(--csr-line); }
.csr-scroll-page .tennis-feature :is(.tennis-body a,.tennis-read-more) { color: var(--csr-blue); }
@media (max-width: 1023px) {
  .csr-scroll-page .page-intro--csr { gap: 36px; padding-block: 44px 52px; }
  .csr-scroll-page .page-intro--csr h1 { font-size: clamp(44px, 6vw, 62px); }
  .csr-hero-photo figcaption { margin-left: -16px; padding: 16px; }
  .csr-rail-tools { gap: 16px; }
  .csr-rail-tools > p { max-width: 140px; }
  .csr-project-grid { grid-auto-columns: 320px; }
  .csr-scroll-page .inclusion-heading { column-gap: 32px; }
}
@media (max-width: 699px) {
  .csr-page.csr-scroll-page .page-intro--csr { grid-template-columns: 1fr; gap: 32px; padding-block: 32px 38px; }
  .csr-scroll-page .page-intro--csr .eyebrow { margin-bottom: 20px; }
  .csr-scroll-page .page-intro--csr h1 { max-width: 510px; font-size: clamp(43px, 10vw, 60px); margin-bottom: 22px; }
  .csr-scroll-page .page-intro--csr .page-intro-copy > p { max-width: 510px; font-size: 16px; }
  .csr-hero-photo { width: 100%; max-width: none; justify-self: stretch; }
  .csr-hero-photo a { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
  .csr-hero-photo img { border-radius: 12px 42px 12px 12px; }
  .csr-hero-photo figcaption { width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; flex-direction: column; align-items: start; gap: 12px; }
  .csr-hero-arrow { flex-basis: auto; width: 34px; height: 34px; font-size: 20px; }
  .csr-hero-photo figcaption strong { font-size: 14px; }
  .csr-projects-overview { padding-block: 10px 44px; }
  .csr-overview-heading { flex-wrap: wrap; gap: 20px; margin-bottom: 22px; padding-top: 24px; }
  .csr-rail-tools { width: 100%; justify-content: space-between; }
  .csr-rail-tools > p { max-width: none; font-size: 11px; }
  .csr-project-grid { grid-auto-columns: min(300px, 83vw); gap: 18px; }

  .csr-project-card-copy { padding: 22px; }
  .csr-project-card h2 { font-size: 22px; }
  .csr-scroll-page :is(.smiles-header,.inclusion-heading) { display: block; margin-bottom: 30px; }
  .csr-scroll-page :is(.smiles-header,.inclusion-heading) h2 { font-size: clamp(32px, 7.5vw, 42px); }
  .csr-scroll-page .inclusion-introduction { margin-top: 24px; font-size: 16px; }
  .csr-scroll-page .smiles-subtitle { font-size: 19px; }
  .csr-scroll-page .smiles-wordmark { width: min(260px,100%); margin-top: 26px; }
  .csr-scroll-page .smiles-story { grid-template-columns: 1fr; gap: 28px; }
  .csr-scroll-page .smiles-photo--feature { justify-self: start; }
  .csr-scroll-page .smiles-principles { grid-template-columns: 1fr; gap: 14px; margin-block: 32px; }
  .csr-scroll-page .smiles-gallery { grid-template-columns: 1fr; gap: 24px; }
  .csr-scroll-page .inclusion-highlights, .csr-scroll-page .inclusion-gallery { grid-template-columns: 1fr; gap: 24px; }
  .csr-scroll-page .inclusion-copy { margin-block: 30px; }
  .csr-scroll-page .inclusion-copy p { font-size: 16px; }
  .csr-scroll-page .children-partner { padding: 10px 14px 10px 10px; gap: 12px; }
  .csr-scroll-page .children-partner strong { font-size: 13px; }
  .csr-chapter-return { padding-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) { .csr-project-card, .csr-project-action > span { transition: none; } }

.csr-scroll-page .page-intro--csr .eyebrow::before { background: var(--csr-wine); }

.csr-scroll-page .tennis-feature .tennis-season-date { color: var(--csr-wine); }