/* =========================================================
   REDOVAR LEADERSHIP
   Developed by Cavendish Pierre-Louis
   https://cavendishpierrelouis.io
========================================================= */


:root {
  --blue: #0B369A;
  --blue-hover: #092F86;

  --terra: #C34811;
  --terra-hover: #A93D0D;

  --black: #111111;
  --text: #171717;

  --muted: #6B6B68;
  --soft: #8B8B86;

  --border: #E7E7E3;
  --border-strong: #D9D9D4;

  --surface: #F7F7F5;
  --surface-alt: #F2F2EF;

  --stone: #D9D1CA;

  --white: #FFFFFF;

  --radius: 4px;

  --max: 1480px;

  --gutter:
    clamp(
      22px,
      4.4vw,
      72px
    );

  --header-h: 76px;

  --ease:
    cubic-bezier(
      .22,
      .61,
      .36,
      1
    );
}


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


*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  min-width: 320px;

  overflow-x: clip;

  background:
    var(--white);

  color:
    var(--text);

  font-family:
    "Onest",
    "Helvetica Neue",
    Arial,
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}


a {
  color: inherit;

  text-decoration: none;
}


button {
  font: inherit;
}


img {
  display: block;
}


::selection {
  background:
    rgba(
      11,
      54,
      154,
      .14
    );
}


/* =========================================================
   SHARED SHELL
========================================================= */


.leadership-shell {
  width:
    min(
      100%,
      var(--max)
    );

  margin-inline:
    auto;

  padding-inline:
    var(--gutter);
}


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


.leadership-main {
  position: relative;

  width: 100%;

  margin: 0;

  padding: 0;

  overflow: clip;

  background:
    var(--white);
}


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


.leadership-hero {
  position: relative;

  margin: 0;

  padding:
    calc(
      var(--header-h) +
      clamp(
        100px,
        10vw,
        160px
      )
    )
    0
    clamp(
      110px,
      10vw,
      155px
    );

  background:
    var(--surface);
}


.leadership-hero-inner {
  width: 100%;

  display: grid;

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

  align-items: end;

  justify-items: center;
}


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


.leadership-hero h1 {
  max-width: 1320px;

  margin: 0;

  color:
    var(--black);

  font-size:
    clamp(
      48px,
      6.8vw,
      92px
    );

  line-height:
    .92;

  letter-spacing:
    -.065em;

  font-weight:
    500;

  text-align:
    center;

  text-wrap:
    balance;

  animation:
    leadershipHeroIn
    700ms
    var(--ease)
    both
    70ms;
}


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


.leadership-hero p {
  max-width: 440px;

  margin:
    clamp(
      42px,
      4.5vw,
      64px
    )
    auto
    0;

  text-align:
    center;

  color:
    var(--text);

  font-size:
    clamp(
      18px,
      1.45vw,
      22px
    );

  line-height:
    1.45;

  letter-spacing:
    -.02em;

  font-weight:
    500;

  animation:
    leadershipHeroIn
    700ms
    var(--ease)
    both
    150ms;
}


@keyframes leadershipHeroIn {

  from {
    opacity: 0;

    transform:
      translateY(
        10px
      );
  }

  to {
    opacity: 1;

    transform:
      translateY(
        0
      );
  }

}


/* =========================================================
   TEAM SECTION
========================================================= */


.leadership-team {
  position: relative;

  margin: 0;

  padding:
    clamp(
      110px,
      11vw,
      170px
    )
    0
    clamp(
      160px,
      14vw,
      220px
    );

  background:
    var(--white);
}


/* =========================================================
   TEAM GRID
========================================================= */


.leadership-grid {
  width: 100%;

  max-width:
    1060px;

  margin-inline:
    auto;

  display: grid;

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

  gap:
    clamp(
      30px,
      3.2vw,
      48px
    );

  align-items:
    start;
}


/* =========================================================
   PERSON
========================================================= */


.leadership-person {
  position: relative;

  min-width: 0;

  margin: 0;

  padding: 0;

  display: block;

  color:
    inherit;

  text-decoration:
    none;

  cursor:
    pointer;

  opacity: 0;

  transform:
    translateY(
      14px
    );

  transition:
    opacity
    620ms
    ease,
    transform
    720ms
    var(--ease);
}


.leadership-person.is-visible {
  opacity: 1;

  transform:
    none;
}


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


.leadership-photo {
  position: relative;

  width: 100%;

  aspect-ratio:
    1.12 / 1;

  overflow:
    hidden;

  border-radius:
    var(--radius);

  background:
    var(--surface);
}


.leadership-photo img {
  width: 100%;
  height: 100%;

  object-fit:
    cover;

  object-position:
    center;

  border-radius:
    inherit;

  transform:
    scale(
      1.001
    );

  transition:
    transform
    560ms
    var(--ease);
}


.leadership-photo.is-missing {
  background:
    var(--surface);
}


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


@media (hover: hover) {

  .leadership-person:hover
  .leadership-photo img {
    transform:
      scale(
        1.012
      );
  }

}


/* =========================================================
   PERSON META
========================================================= */


.leadership-person-meta {
  position: relative;

  min-height:
    74px;

  margin-top:
    17px;

  display:
    grid;

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

  gap:
    20px;

  align-items:
    start;
}


/* =========================================================
   PERSON COPY
========================================================= */


.leadership-person-copy {
  min-width: 0;
}


.leadership-person h2 {
  margin: 0;

  color:
    var(--text);

  font-size:
    clamp(
      23px,
      1.75vw,
      29px
    );

  line-height:
    1.08;

  letter-spacing:
    -.04em;

  font-weight:
    500;

  text-wrap:
    balance;
}


.leadership-hero-mobile-break {
  display: none;
}


.leadership-role-mobile-break {
  display: none;
}


.leadership-person p {
  max-width:
    400px;

  margin:
    7px
    0
    0;

  color:
    var(--muted);

  font-size:
    clamp(
      14px,
      1vw,
      16px
    );

  line-height:
    1.45;

  letter-spacing:
    -.01em;

  font-weight:
    400;

  text-wrap:
    balance;
}


/* =========================================================
   HOVER ARROW
========================================================= */


.leadership-arrow {
  position: relative;

  width:
    42px;

  height:
    42px;

  display:
    grid;

  place-items:
    center;

  justify-self:
    end;

  margin-top:
    -1px;

  border:
    1.5px
    solid
    var(--terra);

  border-radius:
    50%;

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateX(
      -6px
    );

  transition:
    opacity
    160ms
    ease,
    visibility
    160ms
    ease,
    transform
    240ms
    var(--ease),
    background-color
    180ms
    ease;

  pointer-events:
    none;
}


.leadership-arrow::before {
  content: "";

  width:
    20px;

  height:
    20px;

  display:
    block;

  background:
    var(--terra);

  -webkit-mask:
    url("../../assets/icons/right-team-arrow-svgrepo-com.svg")
    center / contain
    no-repeat;

  mask:
    url("../../assets/icons/right-team-arrow-svgrepo-com.svg")
    center / contain
    no-repeat;
}


/* =========================================================
   SHOW ARROW
========================================================= */


@media (hover: hover) {

  .leadership-person:hover
  .leadership-arrow,
  .leadership-person:focus-visible
  .leadership-arrow {
    opacity: 1;

    visibility:
      visible;

    transform:
      translateX(
        0
      );
  }

}


/* =========================================================
   SIGNATURE SECTION
========================================================= */


.leadership-signature {
  position:
    relative;

  z-index:
    1;

  min-height:
    clamp(
      500px,
      46vw,
      680px
    );

  /*
     Same treatment as About.

     The rectangular black section starts here,
     while one oversized black ellipse rises into
     the white area above it.
  */
  margin-top:
    clamp(
      108px,
      9vw,
      142px
    );

  display:
    grid;

  place-items:
    center;

  overflow:
    visible;

  background:
    var(--black);

  color:
    var(--white);

  isolation:
    isolate;
}


/* =========================================================
   BLACK CURVE
   TRUE CONTINUOUS ELLIPSE
========================================================= */


/*
   No terracotta.
   No rounded-rectangle crown.
   No straight center.

   One ellipse only:
   left edge → center peak → right edge.
*/


.leadership-signature::before {
  content: "";

  position:
    absolute;

  left:
    50%;

  top:
    0;

  z-index:
    -1;

  width:
    118vw;

  height:
    clamp(
      210px,
      17vw,
      280px
    );

  background:
    var(--black);

  border-radius:
    50%;

  transform:
    translate(
      -50%,
      -50%
    );

  pointer-events:
    none;
}


/* =========================================================
   TERRACOTTA LAYER — REMOVED
========================================================= */


.leadership-signature::after {
  content:
    none;

  display:
    none;
}


/* =========================================================
   SIGNATURE INNER
========================================================= */


.leadership-signature-inner {
  position:
    relative;

  z-index:
    2;

  width:
    100%;

  display:
    grid;

  place-items:
    center;

  text-align:
    center;
}


.leadership-signature img {
  width:
    clamp(
      320px,
      36vw,
      540px
    );

  max-width:
    82vw;

  height:
    auto;

  object-fit:
    contain;
}


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


@media (max-width: 980px) {

  .leadership-hero {
    padding-top:
      calc(
        var(--header-h)
        +
        110px
      );

    padding-bottom:
      110px;
  }


  .leadership-grid {
    max-width:
      860px;

    gap:
      28px;
  }


  .leadership-photo {
    aspect-ratio:
      1 / 1;
  }


  .leadership-person h2 {
    font-size:
      clamp(
        22px,
        2.8vw,
        27px
      );
  }


  .leadership-signature::before {
    width:
      124vw;

    height:
      clamp(
        190px,
        19vw,
        230px
      );
  }

}


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


@media (max-width: 760px) {

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

  .leadership-hero {
    padding:
      calc(
        var(--header-h)
        +
        82px
      )
      0
      82px;
  }


  .leadership-hero h1 {
    max-width:
      620px;

    font-size:
      clamp(
        46px,
        12vw,
        68px
      );

    line-height:
      .94;

    letter-spacing:
      -.055em;
  }


  .leadership-hero p {
    margin-top:
      32px;

    max-width:
      340px;

    font-size:
      17px;
  }


  .leadership-hero-mobile-break {
    display: inline;
  }


  .leadership-role-mobile-break {
    display: inline;
  }


  /* =======================================================
     TEAM
  ======================================================= */

  .leadership-team {
    padding:
      72px
      0
      124px;
  }


  .leadership-grid {
    max-width:
      520px;

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

    gap:
      68px;
  }


  .leadership-photo {
    aspect-ratio:
      1.08 / 1;
  }


  .leadership-person-meta {
    min-height:
      0;

    margin-top:
      16px;

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

    gap:
      12px;
  }


  .leadership-person h2 {
    font-size:
      18px !important;

    line-height:
      1.1 !important;
  }


  .leadership-person p {
    max-width:
      340px;

    font-size:
      13px;
  }


  .leadership-arrow {
    width:
      34px;

    height:
      34px;

    display:
      grid;

    opacity:
      0;

    visibility:
      hidden;

    transform:
      translateX(
        -6px
      );
  }


  .leadership-person:active
  .leadership-arrow,
  .leadership-person:focus-visible
  .leadership-arrow {
    opacity:
      1;

    visibility:
      visible;

    transform:
      translateX(
        0
      );
  }


  /* =======================================================
     SIGNATURE
  ======================================================= */

  .leadership-signature {
    min-height:
      420px;

    margin-top:
      88px;
  }


  .leadership-signature::before {
    width:
      132vw;

    height:
      172px;

    transform:
      translate(
        -50%,
        -50%
      );
  }


  .leadership-signature::after {
    content:
      none;

    display:
      none;
  }


  .leadership-signature img {
    width:
      min(
        360px,
        78vw
      );
  }

}


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


@media (max-width: 480px) {

  .leadership-hero {
    padding-bottom:
      72px;
  }


  .leadership-hero h1 {
    font-size:
      clamp(
        42px,
        12vw,
        58px
      );
  }


  .leadership-hero p {
    font-size:
      16px;
  }


  .leadership-team {
    padding-top:
      58px;

    padding-bottom:
      110px;
  }


  .leadership-grid {
    gap:
      64px;
  }


  .leadership-person h2 {
    font-size:
      18px !important;
  }


  .leadership-person p {
    font-size:
      13px;
  }


  .leadership-signature {
    min-height:
      360px;

    margin-top:
      74px;
  }


  .leadership-signature::before {
    width:
      138vw;

    height:
      142px;
  }


  .leadership-signature::after {
    content:
      none;

    display:
      none;
  }


  .leadership-signature img {
    width:
      76vw;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */


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

  html {
    scroll-behavior:
      auto;
  }


  .leadership-hero h1,
  .leadership-hero p {
    animation:
      none;

    opacity:
      1;

    transform:
      none;
  }


  .leadership-person {
    opacity:
      1;

    transform:
      none;

    transition:
      none;
  }


  .leadership-photo img,
  .leadership-arrow {
    transition:
      none;
  }

}