/* =========================================================
   DONA NEUMA
   CANDIDATA A DEPUTADA FEDERAL
========================================================= */


/* =========================================================
   VARIÁVEIS
========================================================= */

:root {

  --lime: #a7cf43;
  --lime-main: #9dc83e;
  --lime-dark: #698d20;
  --lime-light: #f1f7df;

  --pink: #ca2489;
  --pink-main: #ce2e90;
  --pink-dark: #9d1668;

  --purple: #403277;
  --purple-main: #493782;
  --purple-dark: #312559;

  --green: #28723e;

  --graphite: #28252e;
  --graphite-soft: #47434d;

  --text: #36323a;
  --text-soft: #716d76;

  --white: #ffffff;

  --background: #f4f4ef;
  --cream: #faf9f4;

  --line: rgba(75, 60, 100, 0.10);

  --shadow:
    0 24px 60px rgba(48, 38, 70, 0.10);

  --container: 1260px;
}


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

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  min-height: 100vh;

  font-family:
    "Inter",
    Arial,
    Helvetica,
    sans-serif;

  color: var(--text);

  background:

    radial-gradient(
      circle at 10% 0%,
      rgba(167, 207, 67, 0.11),
      transparent 27%
    ),

    radial-gradient(
      circle at 90% 90%,
      rgba(202, 36, 137, 0.07),
      transparent 28%
    ),

    var(--background);

}


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


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


ul {
  list-style: none;
}


/* =========================================================
   ESTRUTURA
========================================================= */

.page-wrap {
  width: 100%;
  padding: 34px 20px;
}


.site-shell {

  width: 100%;
  max-width: var(--container);

  margin: 0 auto;

  overflow: hidden;

  background: var(--white);

  border:
    1px solid
    rgba(70, 55, 90, 0.06);

  border-radius: 28px;

  box-shadow:
    var(--shadow);

}


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

.site-header {

  position: relative;
  z-index: 30;

  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 116px;

  padding:
    20px
    44px;

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

  border-bottom:
    1px solid
    var(--line);

}


/* =========================================================
   MARCA
========================================================= */

.brand {

  display: inline-flex;
  flex-direction: column;

  line-height: 0.94;

}


.brand-small {

  margin-bottom: 5px;

  color: var(--purple);

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 2.6px;

}


.brand-main {

  color: var(--pink-main);

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 35px;

  font-weight: 900;

  letter-spacing: -1.5px;

}


.brand-bottom {

  color: var(--lime-dark);

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 35px;

  font-weight: 900;

  letter-spacing: -1.5px;

}


/* =========================================================
   REDES SOCIAIS
========================================================= */

.header-actions {

  display: flex;
  align-items: center;
  justify-content: center;

}


.header-actions a {

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 46px;
  height: 46px;

  color: var(--purple);

  font-size: 19px;

  background:
    var(--lime-light);

  border:
    1px solid
    rgba(110, 145, 35, 0.14);

  border-radius: 50%;

  transition:
    transform 0.25s ease,
    color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;

}


.header-actions a:hover {

  color: var(--white);

  background:
    var(--pink-main);

  transform:
    translateY(-3px);

  box-shadow:
    0 12px 26px
    rgba(190, 35, 130, 0.20);

}


/* =========================================================
   HERO
========================================================= */

.hero-section {

  position: relative;

  overflow: hidden;

  padding:
    64px
    44px
    58px;

  background:

    radial-gradient(
      circle at 75% 28%,
      rgba(167, 207, 67, 0.14),
      transparent 33%
    ),

    linear-gradient(
      135deg,
      #fffefa 0%,
      #ffffff 48%,
      #f4f7ea 100%
    );

}


.hero-section::before {

  position: absolute;
  inset: 0;

  z-index: 0;

  content: "";

  opacity: 0.14;

  pointer-events: none;

  background-image:

    radial-gradient(
      rgba(63, 50, 95, 0.30) 0.55px,
      transparent 0.55px
    );

  background-size:
    5px
    5px;

}


/* =========================================================
   NÚMERO DECORATIVO
========================================================= */

.hero-number-bg {

  position: absolute;

  right: -30px;
  bottom: -85px;

  z-index: 0;

  color:
    rgba(73, 55, 130, 0.055);

  font-family:
    "Montserrat",
    sans-serif;

  font-size: 255px;

  font-weight: 900;

  line-height: 1;

  letter-spacing: -20px;

  pointer-events: none;

}


/* =========================================================
   GRID HERO
========================================================= */

.hero-grid {

  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    0.95fr
    1.05fr;

  align-items: center;

  gap: 46px;

}


/* =========================================================
   HERO TEXTO
========================================================= */

.hero-content {

  position: relative;
  z-index: 5;

}


.hero-kicker {

  display: inline-flex;
  align-items: center;

  gap: 9px;

  margin-bottom: 25px;

  padding:
    10px
    16px;

  color:
    var(--purple);

  font-size: 13px;

  font-weight: 700;

  background:
    rgba(167, 207, 67, 0.17);

  border:
    1px solid
    rgba(120, 155, 40, 0.18);

  border-radius:
    999px;

}


.hero-kicker i {
  color: var(--pink-main);
}


/* =========================================================
   TÍTULO HERO
========================================================= */

.hero-title {

  display: flex;

  flex-direction: column;

  margin-bottom: 19px;

  font-family:
    "Montserrat",
    sans-serif;

  line-height: 0.86;

}


.hero-title-top {

  color:
    var(--graphite);

  font-size:
    clamp(
      45px,
      5.5vw,
      76px
    );

  font-weight: 800;

  letter-spacing: -3px;

}


.hero-title-main {

  color:
    var(--pink-main);

  font-size:
    clamp(
      68px,
      7.5vw,
      108px
    );

  font-weight: 900;

  letter-spacing: -5px;

}


/* =========================================================
   INFORMAÇÕES CANDIDATA
========================================================= */

.candidate-info {

  display: flex;

  align-items: center;

  gap: 12px;

  margin:
    8px
    0
    25px;

  color:
    var(--text-soft);

  font-size:
    13px;

  font-weight:
    600;

}


.candidate-party {

  color:
    var(--purple);

  font-size:
    16px;

  font-weight:
    900;

}


.candidate-divider {

  width: 1px;

  height: 18px;

  background:
    rgba(70, 55, 100, 0.18);

}


/* =========================================================
   SLOGAN
========================================================= */

.hero-slogan {

  max-width: 550px;

  margin-bottom: 10px;

  color:
    var(--pink-main);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    21px;

  font-weight:
    800;

  line-height:
    1.35;

}


/* =========================================================
   DESCRIÇÃO
========================================================= */

.hero-description {

  max-width: 555px;

  color:
    var(--graphite-soft);

  font-size:
    15px;

  font-weight:
    400;

  line-height:
    1.72;

}


/* =========================================================
   NÚMERO
========================================================= */

.candidate-number-box {

  display:
    inline-flex;

  flex-direction:
    column;

  margin-top:
    27px;

  padding:
    15px
    24px
    12px;

  background:
    var(--purple-main);

  border-radius:
    15px;

  box-shadow:
    0 18px 35px
    rgba(62, 47, 110, 0.20);

}


.candidate-number-label {

  margin-bottom:
    -3px;

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

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    1.8px;

}


.candidate-number {

  color:
    var(--lime);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    60px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -4px;

}


/* =========================================================
   BOTÃO
========================================================= */

.hero-buttons {
  margin-top: 24px;
}


.btn-primary {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  padding:
    15px
    24px;

  color:
    var(--white);

  font-size:
    14px;

  font-weight:
    700;

  background:
    linear-gradient(
      135deg,
      var(--pink-main),
      var(--pink-dark)
    );

  border-radius:
    999px;

  box-shadow:
    0 14px 30px
    rgba(190, 35, 130, 0.20);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;

}


.btn-primary:hover {

  transform:
    translateY(-3px);

  box-shadow:
    0 18px 34px
    rgba(190, 35, 130, 0.28);

}


/* =========================================================
   TAGS
========================================================= */

.hero-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 21px;

}


.hero-tags li {

  padding:
    8px
    13px;

  color:
    var(--purple);

  font-size:
    11px;

  font-weight:
    700;

  background:
    var(--white);

  border:
    1px solid
    rgba(73, 55, 130, 0.10);

  border-radius:
    999px;

}


/* =========================================================
   HERO VISUAL
========================================================= */

.hero-visual {
  position: relative;
}


.visual-card {

  position: relative;

  width: 100%;

  min-height:
    610px;

  overflow:
    hidden;

  background:
    #dbe3cb;

  border-radius:
    30px;

  box-shadow:
    0 26px 60px
    rgba(55, 42, 75, 0.15);

}


/* =========================================================
   RONDONÓPOLIS
========================================================= */

.city-backdrop {

  position: absolute;

  inset: 0;

  background-image:
    url("images/rondonopolis-bg.jpg");

  background-repeat:
    no-repeat;

  background-position:
    center center;

  background-size:
    cover;

}


.city-overlay {

  position:
    absolute;

  inset:
    0;

  background:

    linear-gradient(
      90deg,
      rgba(70, 50, 95, 0.04) 0%,
      rgba(70, 50, 95, 0.02) 45%,
      rgba(55, 40, 85, 0.08) 100%
    ),

    linear-gradient(
      180deg,
      rgba(25, 25, 25, 0.01) 0%,
      rgba(50, 30, 70, 0.05) 58%,
      rgba(42, 30, 70, 0.40) 100%
    );

}


/* =========================================================
   FOTO DONA NEUMA
========================================================= */

.portrait-wrap {

  position:
    absolute;

  right:
    4px;

  bottom:
    74px;

  left:
    auto;

  z-index:
    6;

  width:
    77%;

  height:
    calc(100% - 90px);

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    flex-end;

  pointer-events:
    none;

}


.hero-portrait {

  width:
    auto;

  height:
    100%;

  max-width:
    100%;

  max-height:
    100%;

  object-fit:
    contain;

  object-position:
    right bottom;

  filter:
    drop-shadow(
      0 25px 38px
      rgba(35, 25, 55, 0.22)
    );

}


/* =========================================================
   FAIXA HERO
========================================================= */

.visual-bottom {

  position:
    absolute;

  right: 0;
  bottom: 0;
  left: 0;

  z-index:
    10;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    108px;

  background:
    var(--purple-main);

  clip-path:
    polygon(
      0 24%,
      100% 0,
      100% 100%,
      0 100%
    );

}


.visual-bottom-content {

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  padding-top:
    18px;

}


.visual-bottom-content span {

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

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    2px;

}


.visual-bottom-content strong {

  color:
    var(--lime);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    62px;

  font-weight:
    900;

  line-height:
    1;

  letter-spacing:
    -4px;

}


/* =========================================================
   DESTAQUES
========================================================= */

.highlights-section {

  padding:
    72px
    44px
    76px;

  background:
    var(--white);

}


.section-heading {

  max-width:
    690px;

  margin:
    0 auto 45px;

  text-align:
    center;

}


.section-kicker {

  display:
    block;

  margin-bottom:
    10px;

  color:
    var(--pink-main);

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    2.3px;

}


.section-heading h2 {

  color:
    var(--graphite);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      31px,
      4vw,
      47px
    );

  font-weight:
    800;

  line-height:
    1.05;

  letter-spacing:
    -2px;

}


.section-heading h2 span {
  color: var(--lime-dark);
}


.section-heading p {

  max-width:
    550px;

  margin:
    18px auto 0;

  color:
    var(--text-soft);

  font-size:
    14px;

  line-height:
    1.7;

}


/* =========================================================
   CARDS TRAJETÓRIA
========================================================= */

.highlights-grid {

  display:
    grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap:
    17px;

}


.highlight-card {

  position:
    relative;

  min-height:
    275px;

  padding:
    27px
    24px
    25px;

  overflow:
    hidden;

  background:
    #fbfaf8;

  border:
    1px solid
    rgba(75, 60, 100, 0.09);

  border-radius:
    21px;

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

}


.highlight-card:hover {

  transform:
    translateY(-5px);

  border-color:
    rgba(202, 36, 137, 0.20);

  box-shadow:
    0 20px 35px
    rgba(60, 45, 85, 0.08);

}


.card-number {

  position:
    absolute;

  top:
    17px;

  right:
    18px;

  color:
    rgba(167, 207, 67, 0.26);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    35px;

  font-weight:
    900;

}


.icon-circle {

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    55px;

  height:
    55px;

  margin-bottom:
    20px;

  color:
    var(--purple);

  font-size:
    20px;

  background:
    var(--lime-light);

  border-radius:
    50%;

}


.highlight-card h3 {

  margin-bottom:
    10px;

  color:
    var(--graphite);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    18px;

  font-weight:
    800;

}


.highlight-card p {

  color:
    var(--text-soft);

  font-size:
    13px;

  line-height:
    1.7;

}


/* =========================================================
   CAUSAS
========================================================= */

.causes-section {

  padding:
    0
    44px
    72px;

  background:
    var(--white);

}


.causes-container {

  padding:
    50px;

  background:
    linear-gradient(
      135deg,
      #403277,
      #312559
    );

  border-radius:
    27px;

}


.causes-heading {

  max-width:
    680px;

  margin-bottom:
    36px;

}


.causes-kicker {

  display:
    block;

  margin-bottom:
    10px;

  color:
    var(--lime);

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    2.3px;

}


.causes-heading h2 {

  color:
    var(--white);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      30px,
      4vw,
      45px
    );

  font-weight:
    800;

  line-height:
    1.06;

  letter-spacing:
    -1.8px;

}


.causes-heading h2 span {
  color: var(--lime);
}


.causes-heading p {

  max-width:
    550px;

  margin-top:
    16px;

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

  font-size:
    14px;

  line-height:
    1.7;

}


/* =========================================================
   GRID CAUSAS
========================================================= */

.causes-grid {

  display:
    grid;

  grid-template-columns:
    repeat(2, 1fr);

  gap:
    14px;

}


.cause-card {

  display:
    flex;

  gap:
    17px;

  padding:
    20px;

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

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius:
    16px;

}


.cause-icon {

  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    43px;

  height:
    43px;

  color:
    var(--purple);

  font-size:
    17px;

  background:
    var(--lime);

  border-radius:
    50%;

}


.cause-card h3 {

  margin-bottom:
    5px;

  color:
    var(--white);

  font-size:
    14px;

  font-weight:
    800;

}


.cause-card p {

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

  font-size:
    12px;

  line-height:
    1.55;

}


/* =========================================================
   EXPERIÊNCIA
========================================================= */

.experience-section {

  padding:
    0
    44px
    72px;

  background:
    var(--white);

}


.experience-box {

  display:
    grid;

  grid-template-columns:
    0.85fr 1.15fr;

  overflow:
    hidden;

  background:
    var(--graphite);

  border-radius:
    26px;

}


.experience-number {

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  min-height:
    320px;

  padding:
    42px;

  color:
    var(--purple);

  background:
    linear-gradient(
      145deg,
      #b3dc4e,
      #94be35
    );

}


.experience-small {

  margin-bottom:
    9px;

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    2.4px;

}


.experience-number strong {

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      35px,
      4vw,
      54px
    );

  font-weight:
    900;

  line-height:
    0.95;

  letter-spacing:
    -2.5px;

}


.experience-content {

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    48px
    52px;

}


.experience-tag {

  width:
    max-content;

  margin-bottom:
    15px;

  padding:
    7px
    11px;

  color:
    var(--lime);

  font-size:
    10px;

  font-weight:
    900;

  letter-spacing:
    1.8px;

  background:
    rgba(167, 207, 67, 0.11);

  border-radius:
    999px;

}


.experience-content h2 {

  max-width:
    530px;

  color:
    var(--white);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      28px,
      3vw,
      40px
    );

  font-weight:
    800;

  line-height:
    1.1;

  letter-spacing:
    -1.4px;

}


.experience-content p {

  max-width:
    580px;

  margin-top:
    19px;

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

  font-size:
    14px;

  line-height:
    1.75;

}


/* =========================================================
   BLOCO 4300
========================================================= */

.number-section {

  padding:
    0
    44px
    42px;

  background:
    var(--white);

}


.number-section-content {

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    40px;

  padding:
    29px
    40px;

  overflow:
    hidden;

  background:
    var(--lime);

  border-radius:
    22px;

}


.number-eyebrow {

  display:
    block;

  margin-bottom:
    5px;

  color:
    rgba(60, 45, 100, 0.75);

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    2px;

}


.number-section h2 {

  color:
    var(--purple);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    30px;

  font-weight:
    900;

  letter-spacing:
    -1.2px;

}


.number-section p {

  margin-top:
    4px;

  color:
    rgba(60, 45, 100, 0.70);

  font-size:
    12px;

  font-weight:
    600;

}


.big-number {

  color:
    var(--purple);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    clamp(
      70px,
      8vw,
      112px
    );

  font-weight:
    900;

  line-height:
    0.8;

  letter-spacing:
    -8px;

}


/* =========================================================
   IDENTIFICAÇÃO ELEITORAL
========================================================= */

.electoral-info {

  padding:
    0
    44px
    46px;

  background:
    var(--white);

}


.electoral-info-inner {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    11px;

  padding:
    24px
    30px;

  text-align:
    center;

  background:
    #f8f8f4;

  border:
    1px solid
    rgba(75, 60, 100, 0.08);

  border-radius:
    16px;

}


.electoral-main {

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    3px;

}


.electoral-label {

  color:
    var(--pink-main);

  font-family:
    "Montserrat",
    sans-serif;

  font-size:
    15px;

  font-weight:
    900;

  letter-spacing:
    0.3px;

}


.electoral-office {

  color:
    var(--text-soft);

  font-size:
    12px;

  font-weight:
    500;

}


.electoral-details {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    8px;

  color:
    var(--text-soft);

  font-size:
    11px;

  font-weight:
    600;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1080px) {

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-content {
    max-width: 720px;
  }

  .hero-visual {
    max-width: 720px;
  }

  .visual-card {
    min-height: 650px;
  }

  .portrait-wrap {

    width:
      73%;

    height:
      calc(100% - 92px);

    right:
      3%;

    bottom:
      74px;

  }

  .highlights-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }

  .causes-grid {

    grid-template-columns:
      repeat(2, 1fr);

  }

  .experience-box {
    grid-template-columns: 1fr;
  }

}


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

@media (max-width: 768px) {

  .page-wrap {
    padding: 13px;
  }

  .site-shell {
    border-radius: 18px;
  }

  .site-header {

    min-height:
      auto;

    padding:
      19px
      20px;

  }

  .brand-main,
  .brand-bottom {
    font-size: 29px;
  }

  .brand-small {
    font-size: 8px;
  }

  .header-actions a {

    width: 40px;
    height: 40px;

    font-size: 16px;

  }

  .hero-section {

    padding:
      40px
      20px
      38px;

  }

  .hero-title-top {

    font-size:
      clamp(
        39px,
        12vw,
        57px
      );

  }

  .hero-title-main {

    font-size:
      clamp(
        60px,
        17vw,
        82px
      );

    letter-spacing:
      -4px;

  }

  .hero-slogan {
    font-size: 18px;
  }

  .hero-description {
    font-size: 14px;
  }

  .candidate-info {
    flex-wrap: wrap;
  }

  .candidate-number {
    font-size: 53px;
  }

  .btn-primary {

    justify-content:
      center;

    width:
      100%;

  }

  .visual-card {

    min-height:
      520px;

    border-radius:
      23px;

  }

  .city-backdrop {
    background-position: center;
  }

  .portrait-wrap {

    right:
      -2%;

    bottom:
      64px;

    width:
      82%;

    height:
      calc(100% - 75px);

  }

  .visual-bottom {
    min-height: 100px;
  }

  .highlights-section {

    padding:
      54px
      20px
      55px;

  }

  .highlights-grid {
    grid-template-columns: 1fr;
  }

  .causes-section {

    padding:
      0
      20px
      55px;

  }

  .causes-container {
    padding: 32px 24px;
  }

  .causes-grid {
    grid-template-columns: 1fr;
  }

  .experience-section {

    padding:
      0
      20px
      55px;

  }

  .experience-number {

    min-height:
      200px;

    padding:
      30px;

  }

  .experience-content {

    padding:
      35px
      28px;

  }

  .number-section {

    padding:
      0
      20px
      27px;

  }

  .number-section-content {

    flex-direction:
      column;

    align-items:
      flex-start;

    gap:
      23px;

    padding:
      27px
      25px;

  }

  .big-number {
    font-size: 88px;
  }

  .electoral-info {

    padding:
      0
      20px
      30px;

  }

}


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

@media (max-width: 520px) {

  .site-header {

    flex-direction:
      column;

    align-items:
      center;

    justify-content:
      center;

    gap:
      17px;

  }

  .brand {

    align-items:
      center;

    text-align:
      center;

  }

  .header-actions {

    width:
      100%;

    justify-content:
      center;

  }

  .hero-kicker {
    font-size: 11px;
  }

  .hero-tags {
    gap: 7px;
  }

  .visual-card {
    min-height: 455px;
  }

  .portrait-wrap {

    right:
      -8%;

    bottom:
      57px;

    width:
      91%;

    height:
      calc(100% - 67px);

  }

  .visual-bottom {
    min-height: 92px;
  }

  .visual-bottom-content {
    gap: 9px;
  }

  .visual-bottom-content span {
    font-size: 8px;
  }

  .visual-bottom-content strong {
    font-size: 52px;
  }

  .section-heading h2 {
    font-size: 30px;
  }

  .experience-content h2 {
    font-size: 27px;
  }

  .experience-number strong {
    font-size: 34px;
  }

  .big-number {

    font-size:
      77px;

    letter-spacing:
      -6px;

  }

  .electoral-details {

    flex-direction:
      column;

    gap:
      4px;

  }

  .electoral-separator {
    display: none;
  }

}