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

.home-hero {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(380px, 0.88fr);

  align-items: center;

  gap: clamp(40px, 5vw, 80px);

  padding:
    48px
    max(7vw, 48px)
    52px;

  overflow: hidden;

  background:
    linear-gradient(
      155deg,
      transparent 0%,
      transparent 72%,
      rgba(23, 74, 126, 0.035) 72%,
      rgba(23, 74, 126, 0.035) 100%
    ),
    var(--white);

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


.home-hero::after {
  content: '';

  position: absolute;

  width: 430px;
  height: 430px;

  right: -190px;
  bottom: -250px;

  border-radius: 50%;

  background:
    rgba(23, 74, 126, 0.035);

  pointer-events: none;
}


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

.hero-copy {
  position: relative;

  z-index: 2;

  width: 100%;
  max-width: 850px;
}


.hero-candidate-label {
  margin:
    0
    0
    20px;

  color: var(--red);

  font-family:
    'Barlow Condensed',
    sans-serif;

  font-size:
    clamp(25px, 2.3vw, 35px);

  font-weight: 900;

  line-height: 1;

  letter-spacing: 0.035em;

  text-transform: uppercase;
}


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

.hero-copy h1 {
  margin: 0;

  font-family:
    'Barlow Condensed',
    sans-serif;

  font-size:
    clamp(72px, 7.2vw, 112px);

  font-weight: 900;

  line-height: 0.82;

  letter-spacing: 0.005em;

  text-transform: uppercase;
}


.hero-copy h1 span {
  display: block;
}


.headline-blue {
  color: var(--navy-deep);
}


.headline-red {
  margin-top: 8px;

  color: var(--red);
}


/* =========================
   ACCENT DIVIDER
   ========================= */

.hero-accent {
  display: flex;

  align-items: center;

  gap: 13px;

  width: min(590px, 90%);

  margin-top: 27px;
}


.hero-accent span {
  height: 2px;

  flex: 1;

  background: var(--red);

  opacity: 0.5;
}


.hero-accent i {
  width: 11px;
  height: 11px;

  flex: 0 0 auto;

  background: var(--red);

  transform: rotate(45deg);
}


/* =========================
   MISSION
   ========================= */

.hero-mission {
  max-width: 680px;

  margin-top: 27px;
}


.mission-label {
  margin:
    0
    0
    7px;

  color: var(--navy-deep);

  font-family:
    'Barlow Condensed',
    sans-serif;

  font-size: 19px;

  font-weight: 900;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


.hero-mission > p:last-child {
  margin: 0;

  color: var(--muted);

  font-size: 18px;

  line-height: 1.72;
}


/* =========================
   PHOTO
   ========================= */

.hero-photo-column {
  position: relative;

  z-index: 2;

  display: flex;

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

  min-width: 0;
}


.hero-photo-wrap {
  position: relative;

  width: auto;

  height: min(63vh, 600px);

  aspect-ratio: 1249 / 1600;

  max-width: 100%;

  background: #F0EBE5;

  border:
    7px
    solid
    var(--white);

  border-radius: 12px;

  outline:
    3px
    solid
    rgba(13, 53, 95, 0.18);

  box-shadow:
    0
    17px
    40px
    rgba(13, 53, 95, 0.16);

  overflow: hidden;
}


.hero-photo {
  width: 100%;
  height: 100%;

  object-fit: contain;

  object-position: center;
}


/* Updated longer photo label */

.hero-location {
  position: absolute;

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

  padding:
    12px
    14px;

  background: var(--navy);

  color: var(--white);

  font-family:
    'Barlow Condensed',
    sans-serif;

  font-size:
    clamp(13px, 1.2vw, 17px);

  font-weight: 900;

  line-height: 1.15;

  letter-spacing: 0.055em;

  text-align: center;

  text-transform: uppercase;

  border-top:
    4px
    solid
    var(--red);
}


/* =========================================================
   PRIORITIES
   ========================================================= */

.home-priorities {
  padding:
    85px
    max(7vw, 40px)
    95px;

  background:
    linear-gradient(
      to bottom,
      #F4F7FA,
      var(--off-white)
    );
}


/* =========================
   PRIORITY HEADING
   ========================= */

.priority-heading {
  width: min(950px, 100%);

  margin: 0 auto;

  text-align: center;
}


.priority-heading .eyebrow {
  margin-bottom: 10px;

  font-size: 16px;
}


.priority-heading h2 {
  margin: 0;

  color: var(--navy-deep);

  font-size:
    clamp(58px, 6vw, 88px);

  font-weight: 900;

  line-height: 0.85;

  letter-spacing: 0.005em;
}


.priority-heading h2 span {
  display: block;

  color: var(--red);
}


/* =========================================================
   PRIORITY GRID
   ========================================================= */

.priority-grid {
  display: grid;

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

  gap: 24px;

  width: min(1220px, 100%);

  margin:
    50px
    auto
    0;
}


/* =========================
   PRIORITY CARD
   ========================= */

.priority-card {
  position: relative;

  min-height: 470px;

  padding:
    36px
    38px
    38px;

  overflow: hidden;

  background: var(--white);

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

  border-top:
    7px
    solid
    var(--red);

  border-radius: 8px;

  box-shadow:
    0
    10px
    28px
    rgba(13, 53, 95, 0.075);
}


.priority-card:nth-child(even) {
  border-top-color: var(--navy);
}


/* =========================
   FLYER-STYLE ICONS
   ========================= */

.priority-icon {
  width: 82px;
  height: 82px;

  display: grid;

  place-items: center;

  margin-bottom: 25px;

  border-radius: 50%;

  background: var(--white);

  border:
    4px
    solid
    var(--red);

  color: var(--navy-deep);

  box-shadow:
    0
    7px
    18px
    rgba(13, 53, 95, 0.09);
}


.priority-card:nth-child(even)
.priority-icon {
  border-color: var(--navy);
}


.priority-icon svg {
  width: 48px;
  height: 48px;

  fill: none;

  stroke: currentColor;

  stroke-width: 4;

  stroke-linecap: round;

  stroke-linejoin: round;
}


.priority-card:nth-child(2)
.priority-icon svg {
  fill: var(--navy-deep);

  stroke: var(--navy-deep);
}


/* =========================
   CARD TITLES
   ========================= */

.priority-card h3 {
  margin: 0;

  color: var(--navy-deep);

  font-size:
    clamp(39px, 4vw, 53px);

  font-weight: 900;

  line-height: 0.93;

  letter-spacing: 0.005em;
}


/* =========================
   CARD TEXT
   ========================= */

.priority-card p {
  margin:
    25px
    0
    0;

  color: var(--muted);

  font-size: 17.5px;

  line-height: 1.75;
}


/* Decorative corner */

.priority-card::after {
  content: '';

  position: absolute;

  right: -27px;
  bottom: -27px;

  width: 50px;
  height: 50px;

  background: var(--red);

  transform: rotate(45deg);
}


.priority-card:nth-child(even)::after {
  background: var(--navy);
}


/* =========================
   MEET ARSLAN LINK
   ========================= */

.priority-more {
  display: block;

  width: max-content;
  max-width: 100%;

  margin:
    40px
    auto
    0;

  color: var(--navy-deep);

  font-size: 15px;

  font-weight: 900;

  letter-spacing: 0.04em;

  text-decoration: underline;

  text-decoration-color: var(--red);

  text-decoration-thickness: 3px;

  text-underline-offset: 6px;

  text-transform: uppercase;
}


.priority-more span {
  margin-left: 5px;
}


.priority-more:hover {
  color: var(--red);
}


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

@media (max-width: 1050px) {

  .home-hero {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(320px, 0.8fr);

    gap: 38px;

    padding-top: 55px;
    padding-bottom: 60px;
  }


  .hero-copy h1 {
    font-size:
      clamp(64px, 7vw, 90px);
  }


  .hero-candidate-label {
    font-size: 24px;
  }


  .hero-photo-wrap {
    height:
      min(58vh, 530px);
  }


  .priority-card {
    min-height: 0;
  }

}


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

@media (max-width: 760px) {

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

    gap: 38px;

    padding:
      45px
      22px
      58px;
  }


  .hero-copy {
    max-width: none;
  }


  .hero-candidate-label {
    margin-bottom: 17px;

    font-size: 22px;
  }


  .hero-copy h1 {
    font-size:
      clamp(54px, 16vw, 73px);
  }


  .hero-accent {
    margin-top: 23px;
  }


  .hero-mission > p:last-child {
    font-size: 17px;
  }


  .hero-photo-wrap {
    width:
      min(100%, 430px);

    height: auto;

    aspect-ratio:
      1249 / 1600;
  }


  .hero-location {
    padding:
      10px
      9px;

    font-size: 12px;

    letter-spacing: 0.035em;
  }


  .home-priorities {
    padding:
      68px
      22px
      78px;
  }


  .priority-heading {
    text-align: left;
  }


  .priority-heading .eyebrow {
    font-size: 14px;
  }


  .priority-heading h2 {
    font-size: 57px;
  }


  .priority-grid {
    grid-template-columns: 1fr;

    margin-top: 38px;
  }


  .priority-card {
    min-height: 0;

    padding:
      30px
      25px
      30px;
  }


  .priority-icon {
    width: 72px;
    height: 72px;

    margin-bottom: 22px;
  }


  .priority-icon svg {
    width: 42px;
    height: 42px;
  }


  .priority-card h3 {
    font-size: 40px;
  }


  .priority-card p {
    font-size: 17px;
  }


  .priority-more {
    margin-left: 0;
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 430px) {

  .hero-candidate-label {
    font-size: 19px;
  }


  .hero-copy h1 {
    font-size: 51px;
  }


  .priority-heading h2 {
    font-size: 51px;
  }

}