:root {
      --navy: #184d85;
      --navy-dark: #123e6b;
      --light: #f6f8fb;
      --text: #1b2430;
      --muted: #5e6b78;
      --line: #d9e1ea;
      --accent: #f5a623;
      --accent-soft: #ffd89a;
      --card: #ffffff;
  }

  * {
      box-sizing: border-box
  }

  body {
      margin: 0;
      font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--text);
      background: #e9edf3;
  }

  .page {
      max-width: 1120px;
      margin: 0 auto;
      background: #fff;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .15);
  }

  header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 16px 24px;
      border-bottom: 1px solid var(--line);
      background: #fff;
  }

  .brand {
      font-weight: 800;
      letter-spacing: .02em;
      line-height: 1;
  }

  .brand .small {
      display: block;
      font-size: 12px;
      color: var(--navy)
  }

  .brand .big {
      display: block;
      font-size: 22px;
      color: #1f3554
  }

  nav {
      display: flex;
      gap: 18px;
      flex-wrap: wrap;
      justify-content: center;
      font-size: 14px;
      color: #405164
  }

  nav a {
      text-decoration: none;
      color: inherit
  }

  .icons {
      display: flex;
      gap: 10px
  }

  .icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid var(--line);
      display: grid;
      place-items: center;
      color: #5f6d79;
      font-size: 13px;
      background: #fff;
  }

  .hero {
      position: relative;
      min-height: 420px;
      overflow: hidden;
      background: linear-gradient(180deg, #cfe6fb 0%, #dbeaf7 48%, #b9d1e7 100%);
  }

  .hero:before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 28%;
      background: linear-gradient(180deg, rgba(36, 95, 57, 0.02), rgba(36, 95, 57, .12));
  }

  .hero-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1.2fr .9fr;
      align-items: end;
      min-height: 420px;
      padding: 48px 36px 0;
      gap: 10px;
  }

  .hero-copy {
      padding: 10px 0 42px;
      max-width: 530px
  }

  .hero-kicker {
      font-size: 44px;
      line-height: 1.05;
      font-weight: 800;
      color: #1b3552;
      margin: 0 0 14px
  }

  .hero-script {
      font-size: 38px;
      line-height: 1.08;
      color: var(--accent);
      font-family: "Brush Script MT", "Segoe Script", cursive;
      margin: 0 0 14px;
      font-weight: 600;
  }

  .hero-desc {
      max-width: 340px;
      color: #304457;
      font-size: 16px;
      line-height: 1.55;
      margin: 0 0 20px
  }

  .btn-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap
  }

  .btn {
      display: inline-block;
      padding: 12px 18px;
      border-radius: 4px;
      text-decoration: none;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .02em;
      border: 1px solid transparent;
  }

  .btn.primary {
      background: #1f4d80;
      color: #fff
  }

  .btn.light {
      background: #fff;
      color: #1f4d80;
      border-color: #c5d2df
  }

  .btn.accent {
      background: var(--accent);
      color: #fff
  }

  .hero-figure {
      position: relative;
      height: 100%;
      min-height: 350px;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      padding-right: 14px;
  }

  .person {
      width: min(340px, 100%);
      height: 360px;
      border-radius: 18px 18px 0 0;
      background:
          radial-gradient(circle at 68% 22%, #f2c8a5 0 10%, transparent 11%),
          radial-gradient(circle at 63% 12%, #fff 0 7%, transparent 8%),
          linear-gradient(180deg, transparent 0 50%, #f6f7fa 50% 100%),
          linear-gradient(145deg, #2c4e74 0 34%, #17304a 34% 60%, #f2f3f8 60% 100%);
      position: relative;
      box-shadow: 0 22px 40px rgba(0, 0, 0, .08);
  }

  .person:before {
      content: "";
      position: absolute;
      left: 52%;
      top: 16px;
      transform: translateX(-50%);
      width: 132px;
      height: 146px;
      border-radius: 44% 44% 36% 36%/46% 46% 54% 54%;
      background: linear-gradient(180deg, #f2c7a3, #d9a17b);
      box-shadow: 0 0 0 10px rgba(255, 255, 255, .0);
  }

  .person:after {
      content: "";
      position: absolute;
      left: 50%;
      top: 140px;
      transform: translateX(-50%);
      width: 175px;
      height: 190px;
      border-radius: 24px 24px 0 0;
      background: linear-gradient(180deg, #203e61 0 43%, #ffffff 43% 100%);
      clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%);
  }

  .badge {
      position: absolute;
      right: 14px;
      bottom: 18px;
      background: #1e4b7e;
      color: #fff;
      padding: 14px 16px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 600;
      max-width: 170px;
  }

  .section {
      padding: 24px 30px 10px
  }

  .section h2 {
      font-size: 22px;
      margin: 0 0 18px;
      text-align: center;
      color: #20344c
  }

  .issue-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
  }

  .issue-card {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 8px;
      padding: 18px 10px 16px;
      text-align: center;
      min-height: 128px;
  }

  .issue-icon {
      font-size: 26px;
      margin-bottom: 8px;
      color: #77889a
  }

  .issue-title {
      font-weight: 800;
      font-size: 14px;
      line-height: 1.25;
      margin: 0 0 8px;
      color: #21364f
  }

  .issue-copy {
      font-size: 12px;
      line-height: 1.45;
      color: #63727f;
      margin: 0
  }

  .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
      padding: 18px 30px 8px
  }

  .panel h3 {
      font-size: 22px;
      margin: 0 0 14px;
      color: #20344c
  }

  .about {
      display: grid;
      grid-template-columns: 170px 1fr;
      gap: 16px;
      align-items: start;
  }

  .about-photo {
      height: 220px;
      border-radius: 8px;
      background: linear-gradient(180deg, #e1c0a0, #a96b46);
      position: relative;
      overflow: hidden;
  }

  .about-photo:after {
      content: "";
      position: absolute;
      left: 50%;
      top: 16px;
      transform: translateX(-50%);
      width: 108px;
      height: 120px;
      border-radius: 44% 44% 38% 38%;
      background: linear-gradient(180deg, #e7b78d, #a86a44);
      box-shadow: 0 0 0 14px rgba(255, 255, 255, .2);
  }

  .about-text p {
      margin: 0 0 10px;
      color: #506170;
      line-height: 1.6;
      font-size: 14px
  }

  .cta-link {
      display: inline-block;
      margin-top: 8px;
      color: #1f4d80;
      font-weight: 700;
      text-decoration: none;
      border-bottom: 2px solid #1f4d80;
      padding-bottom: 2px
  }

  .region-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px
  }

  .region-card {
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--line);
      background: #fff;
      display: flex;
      flex-direction: column;
      min-height: 260px;
  }

  .region-img {
      height: 118px;
      background: linear-gradient(135deg, #9fc0dd, #5e8db4 56%, #d7b58d);
      position: relative
  }

  .region-body {
      background: #1d4b7f;
      color: #fff;
      padding: 14px;
      flex: 1;
      display: flex;
      flex-direction: column
  }

  .region-body h4 {
      margin: 0 0 6px;
      font-size: 18px
  }

  .region-body p {
      margin: 0 0 14px;
      font-size: 13px;
      line-height: 1.5;
      color: #e3edf8
  }

  .outline-btn {
      margin-top: auto;
      align-self: flex-start;
      border: 1px solid rgba(255, 255, 255, .75);
      color: #fff;
      text-decoration: none;
      padding: 9px 12px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 700
  }

  .bottom-grid {
      display: grid;
      grid-template-columns: 1.4fr .8fr;
      gap: 20px;
      padding: 14px 30px 28px
  }

  .news-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px
  }

  .news-card {
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: #fff
  }

  .news-thumb-container {
      width: 100%;
      height: 104px;
      overflow: hidden;
  }

  .news-thumb {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block;
      /* background: linear-gradient(135deg, #9ba8b8, #d2d8df) */
  }

  .news-body {
      padding: 12px
  }

  .news-body h4 {
      margin: 0 0 7px;
      font-size: 14px;
      color: #20344c
  }

  .news-body p {
      margin: 0 0 8px;
      font-size: 12px;
      line-height: 1.45;
      color: #63727f
  }

  .news-body a {
      font-size: 12px;
      color: #1f4d80;
      font-weight: 700;
      text-decoration: none
  }

  .all-news {
      display: block;
      margin: 12px auto 0;
      width: fit-content;
      border: 1px solid var(--line);
      padding: 10px 14px;
      border-radius: 4px;
      color: #20344c;
      text-decoration: none;
      font-size: 13px;
      font-weight: 600
  }

  .join {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: #f8fbff;
      padding: 16px 16px 10px;
  }

  .join p {
      margin: 0 0 14px;
      font-size: 14px;
      line-height: 1.55;
      color: #506170
  }

  .join-list {
      list-style: none;
      padding: 0;
      margin: 0
  }

  .join-list li {
      border-top: 1px solid var(--line);
      padding: 12px 0;
      font-size: 14px;
      color: #20344c;
      display: flex;
      justify-content: space-between;
      gap: 10px;
  }

  .join-list li:first-child {
      border-top: 0
  }

  .join-list span {
      color: #7a8792
  }

  footer {
      background: #0f4678;
      color: #fff;
      padding: 24px 30px;
      display: grid;
      grid-template-columns: 220px 1fr 160px;
      gap: 24px;
      align-items: start;
  }

  .footer-brand .small {
      font-size: 12px;
      display: block;
      opacity: .8
  }

  .footer-brand .big {
      display: block;
      font-size: 24px;
      font-weight: 900;
      letter-spacing: .03em
  }

  .footer-cols {
      display: flex;
      align-self: center;
      justify-self: center;
  }

  .footer-cols h5 {
      margin: 0 0 8px;
      font-size: 14px
  }

  .footer-cols a,
  .footer-note {
      display: block;
      color: #dfe9f4;
      font-size: 12px;
      line-height: 1.7;
      text-decoration: none
  }

  .social {
      font-size: 12px;
      line-height: 1.7;
      text-align: right
  }

  .social .bubble {
      display: inline-grid;
      place-items: center;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, .6);
      margin-left: 6px
  }

  #map {
      height: 500px;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  }

  @media (max-width: 960px) {

      .hero-grid,
      .two-col,
      .bottom-grid,
      footer {
          grid-template-columns: 1fr
      }

      .issue-grid {
          grid-template-columns: repeat(2, 1fr)
      }

      .region-grid,
      .news-grid,
      .footer-cols {
          grid-template-columns: 1fr
      }

      .about {
          grid-template-columns: 1fr
      }

      .hero-copy {
          max-width: none
      }

      .hero-kicker {
          font-size: 36px
      }

      .hero-script {
          font-size: 30px
      }

      footer .social {
          text-align: left
      }
  }

  @media (max-width: 640px) {
      header {
          padding: 14px 16px;
          flex-direction: column;
          align-items: flex-start
      }

      nav {
          justify-content: flex-start
      }

      .hero-grid {
          padding: 26px 16px 0
      }

      .section,
      .two-col,
      .bottom-grid,
      footer {
          padding-left: 16px;
          padding-right: 16px
      }

      .issue-grid {
          grid-template-columns: 1fr
      }

      .hero-kicker {
          font-size: 32px
      }

      .hero-script {
          font-size: 26px
      }
  }