/* ═══════════════════════════════════════════════════════
   PEOPLE PAGE — Page-Specific Styles
   ═══════════════════════════════════════════════════════ */

/* ── 1. Hero ───────────────────────────────────────── */
.pp-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-bottom: clamp(2rem, 4.1vw, 2.87rem);
}

.pp-hero__bg {
  position: absolute;
  inset: 0;
}

.pp-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 40, 60, 0.25) 0%, rgba(20, 30, 45, 0.55) 100%);
}

.pp-hero__content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 4.1vw, 4.1rem);
  align-items: end;
}

/* Mockup: heading sits left across two hero columns, supporting copy
   right-aligned in the second column, both at the foot of the image. */
.pp-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 2.05vw, 2.46rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: left;
  color: #fff;
  margin-bottom: 1.5rem;
  line-height: 1.25;
}

.pp-hero__title em {
  font-style: italic;
  font-weight: 400;
}

.pp-hero__desc {
  font-size: clamp(1rem, 0.943vw, 1.1275rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
  text-align: right;
  max-width: 34em;
  margin-left: auto;
}

/* ── 2. Team filter ────────────────────────────────── */
.pp-filters {
  padding-top: clamp(2.5rem, 4.1vw, 2.87rem);
  padding-bottom: clamp(1.5rem, 2.46vw, 1.64rem);
}
.pp-filters__label {
  font-size: 0.9225rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text);
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-text);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

.pp-filters__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem clamp(1.25rem, 1.804vw, 1.558rem);
  flex-wrap: wrap;
}
.pp-filters__link {
  font-family: var(--font-sans);
  font-size: 0.984rem;
  color: var(--color-text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.3s ease;
}

.pp-filters__link:hover {
  color: var(--color-text);
}

.pp-filters__link--active {
  color: var(--color-text);
  font-weight: 600;
}

.pp-filters__clear {
  margin-left: auto;
  font-size: 0.984rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-copper);
}

/* ── 3. Team grid ──────────────────────────────────── */
.pp-grid-section {
  padding-bottom: clamp(2.5rem, 4.1vw, 2.87rem);
}

.pp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  padding: 0 var(--gutter);
}

.pp-card {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 4px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: var(--color-dark);
}

.pp-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  filter: grayscale(100%);
  transition: transform 0.6s var(--ease-out);
}

.pp-card:hover img {
  transform: scale(1.05);
}

.pp-card--active {
  outline: 3px solid var(--color-copper);
  outline-offset: -3px;
}

.pp-card__avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.968rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  background: var(--color-dark-surface);
}

/* Hover personality caption — a full-width copper bar across the foot of the
   portrait, per the design. Currently dormant: no .pp-card__badge elements are
   rendered in people.html because the per-person caption lines don't exist yet.
   Add a <span class="pp-card__badge"> to each card and this switches on. */
.pp-card__badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.25rem;
  background: var(--color-copper);
  color: #fff;
  font-size: 0.86rem;   /* was 0.82rem; 16 Sept responsive pass: 12px floor */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.3s ease, transform 0.3s var(--ease-out);
  pointer-events: none;
}

.pp-card:hover .pp-card__badge,
.pp-card:focus-visible .pp-card__badge {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .pp-card__badge { transition: opacity 0.3s ease; transform: none; }
  .pp-card:hover .pp-card__badge,
  .pp-card:focus-visible .pp-card__badge { transform: none; }
}

/* ── Name + role caption on every portrait ────────── */
.pp-card__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1.5rem 0.875rem 0.75rem;
  text-align: left;
  background: linear-gradient(to top,
              rgba(20, 18, 17, 0.92) 0%,
              rgba(20, 18, 17, 0.72) 55%,
              rgba(20, 18, 17, 0) 100%);
  pointer-events: none;
}

.pp-card__name {
  font-family: var(--font-serif);
  font-size: 0.984rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}

.pp-card__role {
  font-size: 0.9225rem;
  line-height: 1.35;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
}

.pp-card--active .pp-card__caption {
  background: linear-gradient(to top,
              rgba(180, 91, 56, 0.95) 0%,
              rgba(180, 91, 56, 0.7) 55%,
              rgba(180, 91, 56, 0) 100%);
}

.pp-card--active .pp-card__role {
  color: rgba(255, 255, 255, 0.92);
}

/* ── 4. Profile detail ─────────────────────────────── */
.pp-profile__grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(2.5rem, 4.1vw, 4.1rem);
  align-items: start;
}

.pp-profile__photo {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 4px;
}

.pp-profile__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.pp-profile__avatar {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 3.444rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  background: var(--color-dark-surface);
}

.pp-profile__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-dark);
  color: #fff;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pp-profile__name {
  font-size: 0.984rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pp-profile__role {
  font-size: 0.9225rem;
  color: var(--color-text-muted-on-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pp-profile__heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-text);
  margin-bottom: 1.5rem;
}
.pp-profile__label {
  font-size: 0.9225rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-text);
  line-height: 1.5;
}

.pp-profile__close {
  font-size: 1.3366rem;
  line-height: 1;
  background: none;
  border: none;
  color: var(--color-text);
  cursor: pointer;
  padding: 0;
}
.pp-profile__bio p {
  font-size: 0.93rem;   /* was 0.7687rem; 16 Sept responsive pass: 13px floor */
  line-height: 1.85;
  color: var(--color-text);
  margin-bottom: 1.25rem;
}

.pp-profile__buttons {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
}
.btn--outline-dark {
  background: rgba(255, 255, 255, 0);
  border-color: var(--color-text);
  color: var(--color-text);
}

.btn--outline-dark::before {
  background: var(--color-dark);
}

.btn--outline-dark:hover {
  color: #fff;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
  .pp-hero__content {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .pp-hero__desc {
    text-align: left;
  }

  .pp-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pp-profile__grid {
    grid-template-columns: 1fr;
  }

  .pp-profile__photo {
    max-width: 340px;
  }
}

@media (max-width: 768px) {
  .pp-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 var(--gutter);
  }

  .pp-filters__bar {
    gap: 1rem 1.5rem;
  }

  .pp-filters__clear {
    margin-left: 0;
  }
}
/* Person without a written bio yet */
.pp-profile__bio--empty {
  font-style: italic;
  color: var(--color-text);
}

/* ═══════════════════════════════════════════════════════
   16 Sept: matched to the Canva mockup (Our People).
   Sizes measured off the 1366-wide canvas (vw = px / 13.66).
   ═══════════════════════════════════════════════════════ */

/* Hero — shorter, framed on the red pendants, title top-left */
.pp-hero {
  min-height: clamp(360px, 31.8vw, 520px);
  align-items: stretch;
  padding: clamp(110px, 12.6vw, 180px) 0 clamp(2rem, 3.1vw, 3rem);
}

.pp-hero__bg img { object-position: 50% 17%; }

.pp-hero__overlay {
  background: linear-gradient(180deg, rgba(20, 30, 45, 0.18) 0%, rgba(20, 30, 45, 0.3) 100%);
}

.pp-hero__content {
  max-width: none;
  width: 100%;
  padding: 0 clamp(20px, 1.76vw, 30px) 0 clamp(20px, 6.6vw, 100px);
  grid-template-columns: 1fr auto;
  align-items: stretch;
}

.pp-hero__title {
  align-self: start;
  font-size: clamp(1.9rem, 3.22vw, 3.4rem);
  line-height: 1.33;
  letter-spacing: 0;
  max-width: 11.5em;
  margin: 0;
}

.pp-hero__desc {
  align-self: end;
  font-size: clamp(1rem, 1.21vw, 1.3rem);
  line-height: 1.34;
  color: #fff;
  max-width: 24.5em;   /* mockup wraps the description to five lines */
}

/* Filters, grid and profile sit on charcoal */
.pp-filters,
.pp-grid-section,
.pp-profile {
  background: var(--color-dark);
  color: #fff;
}

.pp-filters > .container,
.pp-grid-section > .container {
  max-width: none;
  padding: 0 clamp(20px, 3.37vw, 50px);
}

.pp-filters {
  padding-top: clamp(2.5rem, 4.8vw, 4.8rem);
  padding-bottom: clamp(2rem, 3.9vw, 3.9rem);
}

.pp-filters__label {
  font-size: clamp(1.1rem, 1.39vw, 1.45rem);
  font-weight: 400;
  letter-spacing: 0;
  color: #fff;
  padding: 0 0 0.5rem 0.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  margin-bottom: 1.1rem;
}

.pp-filters__bar {
  gap: 0.75rem clamp(1.5rem, 5.4vw, 5.4rem);   /* mockup: ~74px between the four filters */
  padding-left: 0.3rem;
}

.pp-filters__link,
.pp-filters__link:hover,
.pp-filters__link--active {
  font-size: clamp(1.1rem, 1.46vw, 1.55rem);
  font-weight: 400;
  color: #fff;
}

.pp-filters__link--active:not(.pp-filters__clear) { color: var(--color-copper-light); }

.pp-filters__clear,
.pp-filters__clear.pp-filters__link--active {
  margin-left: 0;
  text-transform: none;
  letter-spacing: 0;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Grid — four portraits edge to edge, name and role under each photo */
.pp-grid-section {
  padding-bottom: clamp(3rem, 6vw, 6rem);
}

.pp-grid {
  padding: 0;
  gap: clamp(1.75rem, 3.2vw, 3.2rem) clamp(0.75rem, 1.03vw, 1.1rem);
}

.pp-card {
  aspect-ratio: auto;
  overflow: visible;
  border-radius: 0;
  background: none;
  text-align: left;
  color: #fff;
}

.pp-card img {
  display: block;
  aspect-ratio: 305 / 315;
  height: auto;
  transition: opacity 0.3s ease;
}

.pp-card:hover img {
  transform: none;
  opacity: 0.85;
}

.pp-card--active {
  outline: none;
}

.pp-card--active img {
  outline: 3px solid var(--color-copper);
  outline-offset: -3px;
}

.pp-card__caption,
.pp-card--active .pp-card__caption {
  position: static;
  gap: 0;
  padding: clamp(0.6rem, 0.9vw, 0.9rem) 0.25rem 0;
  background: none;
}

.pp-card__name {
  font-family: var(--font-sans);
  font-size: clamp(1.1rem, 1.54vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
}

.pp-card__role,
.pp-card--active .pp-card__role {
  font-family: var(--font-serif);
  font-size: clamp(0.93rem, 1.24vw, 1.3rem);
  letter-spacing: 0;
  text-transform: uppercase;
  line-height: 1.2;
  color: #fff;
}

/* Profile — big portrait with a copper name tag */
.pp-profile {
  padding: clamp(3rem, 6.1vw, 6rem) 0 clamp(3rem, 6.4vw, 6.4rem);
}

.pp-profile > .container {
  max-width: none;
  padding: 0 clamp(20px, 5.56vw, 80px) 0 clamp(20px, 10.83vw, 160px);
}

.pp-profile__grid {
  grid-template-columns: clamp(280px, 33.45vw, 480px) 1fr;
  gap: clamp(2rem, 5.7vw, 5.7rem);
  align-items: stretch;
}

.pp-profile__photo {
  aspect-ratio: auto;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}

.pp-profile__photo img {
  aspect-ratio: 457 / 516;
  height: auto;
}

.pp-profile__caption {
  position: static;
  background: var(--color-copper);
  padding: clamp(1rem, 1.9vw, 1.9rem) clamp(1rem, 1.83vw, 1.8rem) clamp(1.5rem, 2.9vw, 2.9rem);
  gap: 0;
}

.pp-profile__name {
  font-family: var(--font-sans);
  font-size: clamp(1.1rem, 1.54vw, 1.6rem);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.25;
}

.pp-profile__role {
  font-family: var(--font-serif);
  font-size: clamp(0.93rem, 1.24vw, 1.3rem);
  letter-spacing: 0.01em;
  color: #fff;
}

.pp-profile__body {
  display: flex;
  flex-direction: column;
  padding-top: 0.6rem;
  margin-right: 1.3rem;
}

.pp-profile__heading-row {
  position: relative;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.75);
  margin-bottom: clamp(2rem, 3.5vw, 3.5rem);
}

.pp-profile__label {
  font-family: var(--font-sans);
  font-size: clamp(1.1rem, 1.39vw, 1.45rem);
  font-weight: 400;
  letter-spacing: 0;
  color: #fff;
}

.pp-profile__close {
  position: absolute;
  right: -1.5rem;
  top: -0.1rem;
  color: #fff;
}

.pp-profile__bio p {
  font-size: clamp(1.1rem, 1.39vw, 1.45rem);
  line-height: 1.37;
  color: #fff;
  max-width: 30em;
  margin-bottom: 1.4em;
}

.pp-profile__bio p:first-child:not(.pp-profile__bio--empty) {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 1.98vw, 2.1rem);
  font-weight: 600;
  line-height: 1.37;
  max-width: 18em;
  margin-bottom: 1.1em;
}

.pp-profile__bio--empty { color: rgba(255, 255, 255, 0.75); }

.pp-profile__buttons {
  margin-top: auto;
  padding-top: 2rem;
  gap: clamp(1rem, 1.46vw, 1.4rem);
}

.pp-profile__buttons .btn {
  min-width: clamp(150px, 13.25vw, 190px);
  justify-content: center;
}

.pp-profile__buttons .btn:first-child {
  background: var(--color-copper);
  border-color: var(--color-copper);
  color: #fff;
}

.pp-profile__buttons .btn + .btn {
  border-color: #fff;
  color: #fff;
}

.pp-profile__buttons .btn::before { background: #fff; }
.pp-profile__buttons .btn:hover { color: var(--color-dark); border-color: #fff; }

/* the contact band heading is set in capitals on this page's mockup */
.contact__heading { text-transform: uppercase; }

@media (max-width: 1024px) {
  .pp-hero__content { grid-template-columns: 1fr; gap: 1.5rem; padding: 0 var(--gutter); }
  .pp-profile > .container { padding: 0 var(--gutter); }
  .pp-profile__close { right: 0; }
}

/* 18 Sept: Let's start a conversation — the same form proportions as the
   approved Careers and Awards forms (221 x 45 fields, 474 x 121 message,
   181 x 45 Submit, content from x102, form from x764). */
.contact {
  padding: clamp(60px, 7.3vw, 110px) 0 clamp(60px, 6vw, 90px);
}

.contact__heading {
  font-size: clamp(1.9rem, 2.93vw, 3.2rem);
  font-weight: 600;
  line-height: 1.05;
  margin-bottom: clamp(1.25rem, 2vw, 2rem);
}

.contact__text {
  font-size: clamp(1.05rem, 1.32vw, 1.4rem);
  line-height: 1.45;
  color: #fff;
  max-width: 21.6em;
}

.contact__form,
.contact__form > form {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.76vw, 1.7rem);
}

.contact__row { gap: clamp(1rem, 2.34vw, 2.3rem); }

.contact__input,
.contact__select,
.contact__textarea {
  height: auto;
  min-height: 45px;
  margin-bottom: 0;   /* Webflow's .w-input / .w-select add 10px */
  padding: 0.95rem 1rem;
  background: var(--color-surface-light);
  color: var(--color-dark);
  font-family: var(--font-sans);
  font-size: 0.93rem;
  font-weight: 400;
  letter-spacing: 0;
  border-radius: 0;
}

.contact .contact__textarea {   /* outranks Webflow's textarea.w-input height */
  height: clamp(96px, 8.86vw, 140px);
  min-height: 0;
  padding-top: clamp(2.2rem, 3.6vw, 3.6rem);   /* mockup centres MESSAGE in the box */
  resize: vertical;
}

.contact .contact__submit {
  align-self: flex-start;
  justify-content: center;
  min-width: clamp(150px, 13.25vw, 195px);
  min-height: 45px;
  padding: 0.8rem 1.5rem;
  font-family: var(--font-serif);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.contact .contact__submit svg { display: none; }

@media (min-width: 1025px) {
  .contact > .container {
    max-width: none;
    padding: 0 9.4vw 0 7.47vw;
  }

  .contact__inner {
    grid-template-columns: 1fr 34.7vw;
    align-items: start;
  }
}

/* 18 Sept: each card's copper hover bar carries the person's quirk from
   the bios (added by the People script). The caption now sits under the
   photo, so the bar is pinned to the foot of the portrait rather than the
   card: the card is a size container and the bar's top is the photo's
   height (the card width x 315/305), lifted by its own height. */
.pp-card {
  container-type: inline-size;
}

.pp-card .pp-card__badge {
  top: calc(100cqw * 315 / 305);
  bottom: auto;
  z-index: 2;
  padding: clamp(0.8rem, 1.3vw, 1.2rem) clamp(0.75rem, 1.2vw, 1.25rem);
  font-family: var(--font-sans);
  font-size: clamp(0.86rem, 1.1vw, 1.1rem);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.35;
  transform: translateY(-100%);
  clip-path: inset(100% 0 0 0);
  opacity: 1;
  transition: clip-path 0.35s var(--ease-out);
}

.pp-card:hover .pp-card__badge,
.pp-card:focus-visible .pp-card__badge {
  transform: translateY(-100%);
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .pp-card .pp-card__badge { transition: none; }
}

/* 18 Sept: the whole page sits on charcoal #231F20, so no cream shows at
   the edges or when the page over-scrolls. */
body { background: var(--color-dark); }

/* 18 Sept: blank placeholders for people whose portraits aren't on file
   yet — the same shape as a portrait, a shade lighter than the page. */
.pp-card__placeholder,
.pp-profile__avatar {
  display: block;
  background: rgba(255, 255, 255, 0.06);
}

.pp-card__placeholder {
  width: 100%;
  aspect-ratio: 305 / 315;
  transition: opacity 0.3s ease;
}

.pp-card:hover .pp-card__placeholder { opacity: 0.85; }

.pp-profile__avatar {
  width: 100%;
  height: auto;
  aspect-ratio: 457 / 516;
}

.pp-card--active .pp-card__placeholder {
  outline: 3px solid var(--color-copper);
  outline-offset: -3px;
}

/* ═══════════════════════════════════════════════════════
   25 Sept: the profile panel on a phone.

   The panel's styling above sits outside any media query — it was written
   against the 1366 mockup and therefore overrides the earlier
   max-width: 768px block, which never mentions .pp-profile at all. The
   result was a two-column grid surviving all the way down to 390px: the
   photo column alone claims its 280px floor, and the body column's
   min-content width pushed the page 260px wider than the viewport, so the
   whole site scrolled sideways on a phone.

   Stack the two columns instead, and let the photo be a comfortable size
   rather than a fixed slot.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .pp-profile__grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .pp-profile__photo {
    max-width: 320px;
    width: 100%;
  }

  .pp-profile__body {
    /* the right-hand inset only made sense beside the photo */
    margin-right: 0;
    padding-top: 0;
  }

  .pp-profile__heading-row {
    margin-bottom: 1.5rem;
    /* leave room for the close button, which is absolutely positioned here */
    padding-right: 2.5rem;
  }

  .pp-profile__buttons {
    padding-top: 1.5rem;
    flex-wrap: wrap;
  }

  .pp-profile__buttons .btn {
    min-width: 0;
    flex: 1 1 auto;
  }
}

/* 25 Sept: touch targets on a phone. The filter links were 25px tall and the
   panel's close button only 12 x 19 — and that close button is the one way
   back out of a profile, so it matters most of all. The × keeps its size and
   position; the hit area around it grows to 44 x 44. */
@media (max-width: 768px) {
  .pp-filters__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .pp-profile__close {
    position: relative;
  }

  .pp-profile__close::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}