:root {
  --navy: #102951;
  --blue: #234b91;
  --ink: #152c4e;
  --muted: #596b82;
  --line: #dce3ed;
  --paper: #f5f7fb;
  --gold: #f2cb66;

  --white: #ffffff;

  --radius-xl: 34px;
  --radius-lg: 28px;
  --radius-md: 22px;

  --shadow-lg: 0 20px 54px rgba(5, 18, 40, 0.30);
  --shadow-md: 0 14px 34px rgba(5, 18, 40, 0.22);
}


/* =========================================================
   RESET
========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--navy);
  color: var(--white);
  font-family:
    "Montserrat",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a,
button {
  -webkit-tap-highlight-color: transparent;
}

img {
  display: block;
  max-width: 100%;
}


/* =========================================================
   PAGE
========================================================= */

.page-shell {
  position: relative;
  isolation: isolate;

  width: min(100%, 760px);
  min-height: 100vh;

  margin: 0 auto;
  padding:
    28px
    clamp(18px, 4vw, 42px)
    38px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 8% 10%,
      rgba(35, 75, 145, 0.40),
      transparent 260px
    ),
    radial-gradient(
      circle at 100% 30%,
      rgba(242, 203, 102, 0.10),
      transparent 280px
    ),
    linear-gradient(
      180deg,
      #102951 0%,
      #0d2548 100%
    );
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.decor {
  position: absolute;
  z-index: -2;
  border-radius: 999px;
  pointer-events: none;
}

.decor--green {
  width: 230px;
  height: 230px;
  top: 150px;
  left: -135px;

  background: rgba(35, 75, 145, 0.24);
}

.decor--yellow {
  width: 190px;
  height: 190px;
  top: 400px;
  right: -105px;

  background: rgba(242, 203, 102, 0.10);
}

.flag-flow {
  position: absolute;
  z-index: -1;

  width: 500px;
  max-width: none;

  top: 40px;
  right: -355px;

  opacity: 0.15;
  transform: rotate(-9deg);

  pointer-events: none;

  filter:
    saturate(0.9)
    contrast(1.05);
}


/* =========================================================
   HEADER / LOGO
========================================================= */

.hero-header {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 8px 0 28px;

  text-align: center;
}

.brand {
  width: min(92%, 520px);
}

.brand img {
  width: 100%;
  height: auto;
}

.leaders {
  margin: 14px 0 0;

  color: rgba(255, 255, 255, 0.92);

  font-size: clamp(16px, 3.5vw, 21px);
  line-height: 1.25;

  font-weight: 800;
  letter-spacing: -0.025em;
}


/* =========================================================
   MAIN SITE CTA
========================================================= */

.primary-link {
  margin-top: 2px;
}

.main-cta {
  position: relative;

  display: grid;

  grid-template-columns:
    56px
    minmax(0, 1fr)
    48px;

  align-items: center;

  gap: 15px;

  padding: 18px;

  overflow: hidden;

  border:
    1px solid
    rgba(220, 227, 237, 0.20);

  border-radius: var(--radius-xl);

  color: var(--white);

  background:
    radial-gradient(
      circle at 88% 15%,
      rgba(242, 203, 102, 0.16),
      transparent 150px
    ),
    linear-gradient(
      135deg,
      #152c4e 0%,
      #234b91 100%
    );

  box-shadow: var(--shadow-lg);

  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease,
    border-color 0.24s ease;
}

.main-cta::after {
  content: "";

  position: absolute;

  width: 150px;
  height: 150px;

  right: -55px;
  bottom: -80px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.05);

  pointer-events: none;
}

.main-cta:hover {
  transform: translateY(-3px);

  border-color:
    rgba(242, 203, 102, 0.35);

  box-shadow:
    0 28px 66px
    rgba(5, 18, 40, 0.38);
}

.cta-icon,
.cta-arrow {
  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 50%;

  background: var(--gold);
  color: var(--navy);
}

.cta-icon {
  width: 56px;
  height: 56px;
}

.cta-icon svg {
  width: 28px;
  height: 28px;

  fill: currentColor;
}

.cta-arrow {
  width: 48px;
  height: 48px;

  font-size: 25px;
  font-weight: 900;
}

.cta-text {
  min-width: 0;
}

.cta-text small {
  display: block;

  margin-bottom: 5px;

  color:
    rgba(255, 255, 255, 0.68);

  font-size: 10px;

  font-weight: 800;
  letter-spacing: 0.14em;
}

.cta-text strong {
  display: block;

  overflow: hidden;

  color: var(--white);

  font-size:
    clamp(19px, 4.6vw, 30px);

  line-height: 1.1;

  letter-spacing: -0.035em;

  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   FEATURED / PINNED NEWS
========================================================= */

.featured-section {
  margin-top: 34px;
}

.section-heading {
  display: flex;
  align-items: center;

  gap: 9px;

  margin-bottom: 12px;
}

.section-heading h2 {
  margin: 0;

  color: var(--white);

  font-size: 15px;

  font-weight: 900;

  letter-spacing: -0.02em;

  text-transform: uppercase;
}

.section-dot {
  width: 11px;
  height: 11px;

  margin-right: 13px;

  border-radius: 50%;

  background: var(--gold);

  box-shadow:
    13px 0 0
    var(--blue);
}

.featured-card {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(0, 0.9fr);

  min-height: 275px;

  overflow: hidden;

  border:
    1px solid
    rgba(220, 227, 237, 0.40);

  border-radius: var(--radius-xl);

  background: var(--paper);
  color: var(--ink);

  box-shadow: var(--shadow-lg);

  transition:
    transform 0.24s ease,
    box-shadow 0.24s ease;
}

.featured-card:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 30px 70px
    rgba(5, 18, 40, 0.38);
}

.featured-image-wrap {
  position: relative;

  min-height: 275px;

  overflow: hidden;

  background: var(--blue);
}

.featured-image-wrap img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.5s ease;
}

.featured-card:hover
.featured-image-wrap img {
  transform: scale(1.035);
}

.pinned-label {
  position: absolute;

  top: 16px;
  left: 16px;

  padding: 9px 12px;

  border-radius: 999px;

  background: var(--gold);
  color: var(--navy);

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 0.08em;

  box-shadow:
    0 10px 24px
    rgba(16, 41, 81, 0.20);
}

.featured-content {
  position: relative;

  display: flex;
  align-items: center;

  padding:
    28px
    28px
    72px;
}

.featured-content h3 {
  margin: 0;

  color: var(--ink);

  font-size:
    clamp(24px, 5vw, 37px);

  line-height: 1.02;

  font-weight: 900;

  letter-spacing: -0.05em;
}

.read-more {
  position: absolute;

  right: 20px;
  bottom: 20px;

  display: grid;
  place-items: center;

  width: 44px;
  height: 44px;

  border-radius: 50%;

  background: var(--gold);
  color: var(--navy);

  font-size: 22px;
  font-weight: 900;
}


/* =========================================================
   LINKS
========================================================= */

.links-section {
  margin-top: 18px;
}

.link-stack,
.link-duo {
  display: grid;

  gap: 12px;
}

.link-duo {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  margin-top: 12px;
}


/* base */

.link-card {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  min-height: 142px;

  padding: 18px;

  overflow: hidden;

  border-radius: var(--radius-lg);

  font-weight: 900;

  box-shadow: var(--shadow-md);

  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease;
}

.link-card::after {
  content: "";

  position: absolute;

  width: 115px;
  height: 115px;

  top: -55px;
  right: -35px;

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.10);

  pointer-events: none;
}

.link-card:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 20px 42px
    rgba(5, 18, 40, 0.30);

  filter: brightness(1.03);
}

.link-card strong {
  position: relative;
  z-index: 1;

  max-width: 85%;

  font-size:
    clamp(15px, 3vw, 20px);

  line-height: 1.06;

  letter-spacing: -0.035em;
}


/* full width rows */

.link-card--row {
  min-height: 108px;

  flex-direction: row;
  align-items: flex-end;

  padding: 18px 20px;
}

.link-card--row strong {
  max-width:
    calc(100% - 90px);

  font-size:
    clamp(20px, 4vw, 24px);
}

.link-card--row .link-arrow {
  right: 18px;
  bottom: 18px;
}

.link-card--row .link-kicker,
.link-card--row .social-mark {
  position: absolute;

  top: 16px;
  left: 18px;
}


/* labels */

.link-kicker {
  position: relative;
  z-index: 2;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 0.10em;

  opacity: 0.70;
}

.link-arrow {
  position: absolute;

  right: 16px;
  bottom: 15px;

  z-index: 2;

  font-size: 22px;

  font-weight: 900;
}

.social-mark {
  position: relative;
  z-index: 2;

  display: grid;
  place-items: center;

  width: 36px;
  height: 36px;

  border-radius: 11px;

  background:
    rgba(245, 247, 251, 0.96);

  color: var(--navy);

  font-size: 20px;

  font-weight: 900;
}


/* =========================================================
   LINK COLORS
========================================================= */

/* 01 */
.link-card--mint {
  background:
    linear-gradient(
      135deg,
      #f5f7fb 0%,
      #dce3ed 100%
    );

  color: var(--ink);

  border:
    1px solid
    rgba(220, 227, 237, 0.85);
}


/* 02 */
.link-card--blue {
  background:
    linear-gradient(
      135deg,
      #234b91 0%,
      #2d5cad 100%
    );

  color: var(--white);
}


/* 03 */
.link-card--yellow {
  background:
    linear-gradient(
      135deg,
      #f2cb66 0%,
      #f7d983 100%
    );

  color: var(--navy);
}


/* Instagram */

.link-card--instagram {
  background:
    linear-gradient(
      135deg,
      #152c4e 0%,
      #234b91 100%
    );

  color: var(--white);
}


/* Facebook */

.link-card--facebook {
  background:
    linear-gradient(
      135deg,
      #234b91 0%,
      #173c79 100%
    );

  color: var(--white);
}


/* YouTube */

.link-card--youtube {
  background:
    linear-gradient(
      135deg,
      #152c4e 0%,
      #102951 100%
    );

  color: var(--white);

  border:
    1px solid
    rgba(242, 203, 102, 0.18);
}


/* optional gold accent on YouTube */

.link-card--youtube
.social-mark {
  background: var(--gold);
  color: var(--navy);
}


/* =========================================================
   FOOTER
========================================================= */

.footer {
  margin-top: 34px;

  padding-top: 8px;
}

.coalition-panel {
  padding: 18px 20px;

  border:
    1px solid
    rgba(220, 227, 237, 0.90);

  border-radius: 24px;

  background: var(--paper);

  box-shadow: var(--shadow-md);
}

.coalition-logos {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  align-items: center;

  gap: 18px;
}

.coalition-logos img {
  width: 100%;

  max-height: 66px;

  object-fit: contain;
}

.footer p {
  margin: 16px 0 0;

  color:
    rgba(255, 255, 255, 0.40);

  text-align: center;

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

  .page-shell {
    padding-top: 20px;
  }

  .hero-header {
    padding-bottom: 24px;
  }

  .brand {
    width: 94%;
  }

  .flag-flow {
    width: 460px;

    top: 50px;
    right: -355px;

    opacity: 0.12;
  }

  .main-cta {
    grid-template-columns:
      50px
      minmax(0, 1fr)
      42px;

    gap: 12px;

    padding: 15px;

    border-radius: 26px;
  }

  .cta-icon {
    width: 50px;
    height: 50px;
  }

  .cta-arrow {
    width: 42px;
    height: 42px;
  }

  .featured-card {
    grid-template-columns: 1fr;
  }

  .featured-image-wrap {
    min-height: 220px;

    aspect-ratio: 16 / 10;
  }

  .featured-content {
    min-height: 145px;

    padding:
      22px
      22px
      68px;
  }

  .featured-content h3 {
    font-size: clamp(24px, 7vw, 32px);
  }

  .link-card {
    min-height: 132px;
  }

  .link-card--row {
    min-height: 104px;

    padding: 16px 18px;
  }

  .link-card--row .link-kicker,
  .link-card--row .social-mark {
    top: 14px;
    left: 16px;
  }

  .coalition-logos {
    gap: 10px;
  }
}


/* =========================================================
   SMALL PHONE
========================================================= */

@media (max-width: 390px) {

  .page-shell {
    padding-left: 15px;
    padding-right: 15px;
  }

  .brand {
    width: 96%;
  }

  .leaders {
    font-size: 15px;
  }

  .main-cta {
    grid-template-columns:
      46px
      minmax(0, 1fr)
      38px;
  }

  .cta-icon {
    width: 46px;
    height: 46px;
  }

  .cta-icon svg {
    width: 23px;
    height: 23px;
  }

  .cta-arrow {
    width: 38px;
    height: 38px;

    font-size: 20px;
  }

  .cta-text strong {
    font-size: 18px;
  }

  .link-card {
    padding: 16px;
  }

  .link-card--row {
    min-height: 100px;
  }

  .link-duo {
    gap: 10px;
  }

  .link-duo .link-card {
    min-height: 126px;
  }

  .link-duo .link-card strong {
    font-size: 15px;
  }
}


/* =========================================================
   VERY SMALL PHONE
========================================================= */

@media (max-width: 340px) {

  .leaders {
    font-size: 14px;
  }

  .cta-text small {
    font-size: 8px;
  }

  .cta-text strong {
    font-size: 16px;
  }

  .link-card--row strong {
    font-size: 19px;
  }

  .coalition-panel {
    padding-left: 12px;
    padding-right: 12px;
  }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    transition: none !important;
  }
}