:root {
  --navy: #03336d;
  --navy-deep: #022858;
  --yellow: #f6c421;
  --red: #be222e;
  --white: #ffffff;
  --ink: #10233b;
  --muted: #617083;
  --line: #dce3eb;
  --surface: #f5f7fa;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --page: min(1240px, calc(100% - 64px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: var(--sans); }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.page-width { width: var(--page); margin-inline: auto; }

.site-header {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  min-height: 86px;
  padding: 10px max(28px, calc((100vw - 1340px) / 2));
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 218px; }
.brand img { width: 62px; height: 62px; object-fit: contain; border-radius: 50%; }
.brand span, .footer-brand span { display: grid; }
.brand strong { color: var(--navy); font-size: 16px; line-height: 1.05; }
.brand small { color: var(--navy); font-size: 14px; font-weight: 700; }
.desktop-nav { display: flex; justify-content: center; gap: clamp(18px, 2.2vw, 34px); }
.desktop-nav a { position: relative; padding: 31px 0 27px; color: #30425a; font-size: 13px; font-weight: 700; }
.desktop-nav a::after { position: absolute; right: 0; bottom: 18px; left: 0; height: 3px; background: var(--yellow); content: ""; opacity: 0; }
.desktop-nav a:hover::after, .desktop-nav a.active::after { opacity: 1; }
.header-actions { display: flex; align-items: center; gap: 18px; }
.language { color: var(--navy); font-size: 12px; font-weight: 800; }
.language span { color: var(--muted); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 800;
  transition: transform 160ms ease, background 160ms ease;
}
.button:hover { transform: translateY(-2px); }
.button-yellow { color: var(--navy-deep); background: var(--yellow); }
.button-white { color: var(--navy); background: var(--white); border-color: var(--white); }
.button-navy { color: var(--white); background: var(--navy); }
.header-cta { min-height: 44px; padding-inline: 22px; }
.menu-button { display: none; width: 44px; height: 44px; border: 0; color: var(--navy); background: transparent; font-size: 25px; }

.hero { position: relative; min-height: 670px; overflow: hidden; background: var(--navy); }
.hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.hero-shade { position: absolute; inset: 0 auto 0 0; width: 58%; background: rgb(3 51 109 / 92%); clip-path: polygon(0 0, 78% 0, 100% 100%, 0 100%); }
.hero-content { position: relative; z-index: 2; display: flex; min-height: 670px; flex-direction: column; align-items: flex-start; justify-content: center; }
.hero-content h1, .institutional-copy h1 { max-width: 660px; margin: 0; color: var(--white); font-family: var(--serif); font-size: clamp(58px, 6vw, 88px); line-height: 0.94; }
.hero-content > p { max-width: 570px; margin: 28px 0 32px; color: rgb(255 255 255 / 90%); font-size: 18px; line-height: 1.65; }
.button-row { display: flex; gap: 14px; }
.tricolor { position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; display: grid; grid-template-columns: 1fr 1fr 1fr; height: 6px; }
.tricolor i:nth-child(1) { background: var(--yellow); }
.tricolor i:nth-child(2) { background: var(--navy); }
.tricolor i:nth-child(3) { background: var(--red); }

.audience-paths { position: relative; z-index: 4; display: grid; width: min(1060px, calc(100% - 64px)); grid-template-columns: 1fr 1fr; margin: -54px auto 0; background: var(--white); box-shadow: 0 20px 55px rgb(11 35 64 / 16%); }
.audience-paths a { display: grid; min-height: 146px; align-content: center; padding: 28px 42px; border-left: 5px solid var(--yellow); }
.audience-paths a + a { border-left-color: var(--red); box-shadow: inset 1px 0 var(--line); }
.audience-paths span, .section-label { margin: 0 0 9px; color: var(--red); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.audience-paths strong { color: var(--navy); font-family: var(--serif); font-size: 25px; }
.audience-paths small { margin-top: 6px; color: var(--muted); font-size: 12px; }

.purpose { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 100px; align-items: end; padding-block: 130px 90px; }
.section-intro h2, .section-heading-row h2, .community-copy h2, .alliances-preview h2, .contact-layout h2, .impact-copy h2, .institutional-contact h2 { margin: 0; color: var(--navy); font-family: var(--serif); font-size: clamp(38px, 4.2vw, 60px); line-height: 1.06; }
.purpose-copy { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.pillars-band { background: var(--surface); border-block: 1px solid var(--line); }
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); }
.pillars article { min-height: 260px; padding: 48px 36px; border-left: 1px solid var(--line); }
.pillars article:last-child { border-right: 1px solid var(--line); }
.pillars b, .cooperation-list b { color: var(--red); font-size: 12px; }
.pillars h3, .cooperation-list h3 { margin: 42px 0 12px; color: var(--navy); font-family: var(--serif); font-size: 25px; }
.pillars p, .cooperation-list p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }

.activities, .cooperation, .institutional-gallery { padding-block: 110px; }
.section-heading-row { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 100px; align-items: end; margin-bottom: 52px; }
.section-heading-row > p { margin: 0 0 7px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.activity-feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 20px; height: 610px; min-height: 0; }
figure { margin: 0; }
.feature-photo, .activity-stack figure, .activity-rail figure, .gallery-row figure { position: relative; overflow: hidden; background: var(--navy); }
.feature-photo img, .activity-stack img, .activity-rail img, .gallery-row img { width: 100%; height: 100%; object-fit: cover; }
.feature-photo img { object-position: center 46%; }
.feature-photo figcaption { position: absolute; right: 0; bottom: 0; left: 0; display: grid; gap: 6px; padding: 26px 30px; color: var(--white); background: rgb(3 51 109 / 92%); }
.feature-photo figcaption span, .activity-stack figcaption span { color: var(--yellow); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.feature-photo figcaption strong { font-family: var(--serif); font-size: 27px; }
.activity-feature > *, .activity-stack > figure { min-height: 0; }
.activity-stack { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; min-height: 0; }
.activity-stack img { object-position: center 42%; }
.activity-stack figcaption { position: absolute; right: 0; bottom: 0; left: 0; display: flex; align-items: baseline; justify-content: space-between; padding: 18px 22px; color: var(--white); background: rgb(3 51 109 / 92%); }
.activity-stack figcaption strong { font-family: var(--serif); font-size: 22px; }
.activity-rail { display: grid; grid-template-columns: 0.8fr 0.8fr 1.4fr; gap: 20px; margin-top: 20px; }
.activity-rail figure { height: 255px; }
.activity-rail figcaption, .gallery-row figcaption { position: absolute; right: 14px; bottom: 14px; left: 14px; padding: 12px 14px; color: var(--navy); background: var(--white); font-family: var(--serif); font-size: 18px; font-weight: 700; }

.community-section, .impact-section { background: var(--navy-deep); }
.community-layout, .impact-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; min-height: 610px; }
.community-copy, .impact-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 70px 80px 70px 0; }
.section-label.light { color: var(--yellow); }
.community-copy h2, .contact-layout h2, .impact-copy h2, .institutional-contact h2 { color: var(--white); }
.community-copy > p:not(.section-label) { margin: 26px 0 32px; color: rgb(255 255 255 / 76%); font-size: 15px; line-height: 1.8; }
.community-image, .impact-image { min-width: 0; }
.community-image img, .impact-image img { width: 100%; height: 100%; object-fit: cover; }

.alliances-preview { display: grid; grid-template-columns: 100px 1fr 0.7fr; gap: 55px; align-items: center; padding-block: 110px; }
.alliance-mark { display: grid; gap: 8px; }
.alliance-mark span { display: block; height: 11px; }
.alliance-mark span:nth-child(1) { width: 72px; background: var(--yellow); }
.alliance-mark span:nth-child(2) { width: 90px; background: var(--navy); }
.alliance-mark span:nth-child(3) { width: 58px; background: var(--red); }
.alliance-copy p { margin: 0 0 26px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.contact-section, .institutional-contact { background: var(--navy); }
.contact-layout { display: grid; grid-template-columns: 1fr 0.75fr 0.75fr; gap: 50px; align-items: center; min-height: 300px; }
.contact-layout > a { display: grid; gap: 12px; min-height: 118px; align-content: center; padding: 22px 28px; color: var(--white); border-left: 4px solid var(--yellow); background: rgb(255 255 255 / 6%); }
.contact-layout > a:last-child { border-left-color: var(--red); }
.contact-layout a span { color: rgb(255 255 255 / 68%); font-size: 11px; }
.contact-layout a strong { font-family: var(--serif); font-size: 23px; }

.site-footer { position: relative; background: var(--white); }
.footer-layout { display: flex; min-height: 130px; align-items: center; justify-content: space-between; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand img { width: 58px; height: 58px; object-fit: contain; border-radius: 50%; }
.footer-brand strong { color: var(--navy); font-size: 14px; }
.footer-brand small, .footer-layout p { color: var(--muted); font-size: 11px; }

.institutional-hero { position: relative; display: grid; grid-template-columns: 0.9fr 1.1fr; min-height: 610px; background: var(--navy); }
.institutional-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 70px max(60px, calc((100vw - 1240px) / 2)); }
.institutional-copy h1 { font-size: clamp(48px, 5vw, 72px); line-height: 1; }
.institutional-copy > p:not(.section-label) { max-width: 580px; margin: 26px 0 30px; color: rgb(255 255 255 / 78%); font-size: 15px; line-height: 1.75; }
.institutional-media img { width: 100%; height: 100%; object-fit: cover; }
.credibility-strip { background: var(--surface); border-bottom: 1px solid var(--line); }
.credibility-strip .page-width { display: grid; grid-template-columns: 1fr repeat(4, auto); gap: 38px; align-items: center; min-height: 105px; }
.credibility-strip strong { color: var(--navy); font-family: var(--serif); font-size: 22px; }
.credibility-strip span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.cooperation-list { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); }
.cooperation-list article { min-height: 270px; padding: 38px 30px; border-left: 1px solid var(--line); }
.cooperation-list article:last-child { border-right: 1px solid var(--line); }
.cooperation-list h3 { margin-top: 48px; }
.impact-layout { grid-template-columns: 1.05fr 0.95fr; }
.impact-image img { object-position: center 44%; }
.impact-copy { padding: 70px 0 70px 80px; }
.impact-copy ul { display: grid; gap: 19px; margin: 32px 0 0; padding: 0; color: rgb(255 255 255 / 76%); font-size: 13px; line-height: 1.55; list-style: none; }
.impact-copy li { padding-left: 18px; border-left: 3px solid var(--yellow); }
.impact-copy li:nth-child(3) { border-left-color: var(--red); }
.impact-copy strong { color: var(--white); }
.institutional-gallery .section-intro { max-width: 760px; margin-bottom: 48px; }
.gallery-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.gallery-row figure { height: 410px; }
.institutional-contact .page-width { display: grid; grid-template-columns: 1fr auto; gap: 24px 70px; align-items: center; padding-block: 80px; }
.institutional-contact p:last-child { grid-column: 1 / -1; margin: 0; color: rgb(255 255 255 / 64%); font-size: 12px; }

@media (max-width: 1100px) {
  .desktop-nav { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .menu-button { display: inline-grid; place-items: center; }
  .hero-shade { width: 70%; }
  .pillars, .cooperation-list { grid-template-columns: repeat(2, 1fr); }
  .pillars article:nth-child(3), .cooperation-list article:nth-child(3) { border-top: 1px solid var(--line); }
  .pillars article:nth-child(4), .cooperation-list article:nth-child(4) { border-top: 1px solid var(--line); border-right: 1px solid var(--line); }
}

@media (max-width: 720px) {
  :root { --page: min(100% - 34px, 560px); }
  .site-header { min-height: 72px; padding: 8px 16px; }
  .brand { min-width: 0; gap: 8px; }
  .brand img { width: 50px; height: 50px; }
  .brand strong { font-size: 13px; }
  .brand small { font-size: 12px; }
  .language, .header-cta { display: none; }
  .header-actions { gap: 4px; }
  .hero, .hero-content { min-height: 690px; }
  .hero-media { object-position: 54% center; }
  .hero-shade { width: 100%; background: rgb(3 51 109 / 80%); clip-path: none; }
  .hero-content { justify-content: flex-end; padding-bottom: 108px; }
  .hero-content h1 { font-size: 51px; line-height: 0.96; }
  .hero-content > p { max-width: 350px; margin: 20px 0 24px; font-size: 15px; line-height: 1.55; }
  .button-row { width: 100%; flex-direction: column; }
  .button-row .button { width: 100%; }
  .audience-paths { width: calc(100% - 34px); grid-template-columns: 1fr; margin-top: -62px; }
  .audience-paths a { min-height: 118px; padding: 20px 24px; }
  .audience-paths a + a { box-shadow: inset 0 1px var(--line); }
  .audience-paths strong { font-size: 21px; }
  .purpose, .section-heading-row, .alliances-preview, .contact-layout, .institutional-contact .page-width { grid-template-columns: 1fr; gap: 28px; }
  .purpose { padding-block: 95px 65px; }
  .section-intro h2, .community-copy h2, .alliances-preview h2, .contact-layout h2, .impact-copy h2, .institutional-contact h2 { font-size: 38px; }
  .pillars, .cooperation-list { grid-template-columns: 1fr; }
  .pillars article, .cooperation-list article { min-height: 190px; padding: 32px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .pillars h3, .cooperation-list h3 { margin-top: 24px; }
  .activities, .cooperation, .institutional-gallery { padding-block: 78px; }
  .section-heading-row { margin-bottom: 35px; }
  .activity-feature { height: auto; grid-template-columns: 1fr; }
  .feature-photo { height: 500px; }
  .activity-stack { grid-template-columns: 1fr 1fr; grid-template-rows: 330px; }
  .activity-stack figcaption { display: grid; gap: 4px; }
  .activity-rail { grid-template-columns: 1fr; }
  .community-layout, .impact-layout, .institutional-hero { grid-template-columns: 1fr; }
  .community-copy, .impact-copy { padding: 70px 0; }
  .community-image, .impact-image { height: 420px; }
  .alliances-preview { padding-block: 78px; }
  .alliance-mark { width: 100px; }
  .contact-layout { padding-block: 70px; }
  .footer-layout { min-height: 160px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; }
  .institutional-copy { min-height: 560px; padding: 70px 22px; }
  .institutional-copy h1 { font-size: 47px; }
  .institutional-media { height: 390px; }
  .credibility-strip .page-width { grid-template-columns: 1fr 1fr; padding-block: 30px; }
  .credibility-strip strong { grid-column: 1 / -1; }
  .impact-copy { order: -1; }
  .gallery-row { grid-template-columns: 1fr; }
  .gallery-row figure { height: 370px; }
}