/* =========================================================
   REDOVAR LEADERSHIP — CAVENDISH PIERRE-LOUIS
   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;
}




button {
  font:
    inherit;
}




img {
  display:
    block;
}




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








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




.leader-profile-main {
  width:
    100%;


  overflow:
    clip;


  background:
    var(--white);
}








/* =========================================================
   PROFILE SECTION
========================================================= */




.leader-profile {
  padding:
    calc(
      var(--header-h) +
      clamp(
        42px,
        4vw,
        64px
      )
    )
    0
    clamp(
      150px,
      12vw,
      205px
    );


  background:
    var(--white);
}




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


  margin-inline:
    auto;


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








/* =========================================================
   BACK TO LEADERSHIP
========================================================= */




.leader-back-wrap {
  margin-bottom:
    clamp(
      66px,
      6vw,
      94px
    );
}




.leader-back {
  width:
    fit-content;


  display:
    inline-flex;


  align-items:
    center;


  gap:
    10px;


  color:
    var(--terra);


  font-size:
    15px;


  line-height:
    1;


  letter-spacing:
    -.015em;


  font-weight:
    500;


  text-decoration:
    none;


  transition:
    color
    180ms
    ease,
    opacity
    180ms
    ease;
}




.leader-back img {
  display: none;
}




.leader-back::before {
  content: "";


  width: 17px;
  height: 17px;


  flex:
    0 0 17px;


  display: block;


  background:
    currentColor;


  -webkit-mask:
    url("../../assets/icons//back-arrow-direction-down-right-left-up-svgrepo-com.svg")
    center / contain
    no-repeat;


  mask:
    url("../../assets/icons//back-arrow-direction-down-right-left-up-svgrepo-com.svg")
    center / contain
    no-repeat;


  transition:
    transform
    220ms
    var(--ease),
    opacity
    180ms
    ease;
}





.leader-back:hover,
.leader-back:focus {
  color:
    #D6835D;


  text-decoration:
    none;
}




.leader-back:hover img {
  opacity:
    .72;


  transform:
    translateX(-3px);
}




.leader-back:focus-visible {
  outline:
    2px
    solid
    rgba(
      195,
      72,
      17,
      .25
    );


  outline-offset:
    6px;


  border-radius:
    2px;
}








/* =========================================================
   PROFILE GRID
========================================================= */




.leader-profile-grid {
  width:
    100%;


  display:
    grid;


  grid-template-columns:
    minmax(
      0,
      .88fr
    )
    minmax(
      480px,
      1.12fr
    );


  column-gap:
    clamp(
      72px,
      8vw,
      126px
    );


  align-items:
    start;
}








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




.leader-copy {
  min-width:
    0;


  padding-top:
    clamp(
      24px,
      3vw,
      48px
    );


  opacity:
    0;


  transform:
    translateY(10px);


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




.leader-copy.is-visible {
  opacity:
    1;


  transform:
    none;
}








/* =========================================================
   NAME
========================================================= */




.leader-heading h1 {
  max-width:
    620px;


  margin:
    0;


  color:
    var(--black);


  font-size:
    clamp(
      44px,
      4vw,
      64px
    );


  line-height:
    .98;


  letter-spacing:
    -.055em;


  font-weight:
    500;


  text-wrap:
    balance;
}








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




.leader-title {
  max-width:
    500px;


  margin:
    18px
    0
    0;


  color:
    var(--muted);


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


  line-height:
    1.3;


  letter-spacing:
    -.025em;


  font-weight:
    400;


  text-wrap:
    balance;
}








/* =========================================================
   BIOGRAPHY
========================================================= */




.leader-biography {
  max-width:
    560px;


  margin-top:
    clamp(
      54px,
      5vw,
      72px
    );
}




.leader-biography p {
  margin:
    0
    0
    22px;


  color:
    #41413E;


  font-size:
    clamp(
      16px,
      1.08vw,
      18px
    );


  line-height:
    1.62;


  letter-spacing:
    -.014em;


  font-weight:
    400;
}




.leader-biography p:last-child {
  margin-bottom:
    0;
}




.leader-biography strong {
  color:
    var(--text);


  font-weight:
    600;
}








/* =========================================================
   BOOK / EDITORIAL FEEL
========================================================= */




/*
Instead of cards, borders, a large drop cap or decorative
rules, the page gets its editorial feel from line length,
paragraph rhythm, spacing and slightly indented continuation
paragraphs.
*/




.leader-biography p + p {
  padding-left:
    clamp(
      18px,
      2vw,
      30px
    );
}








/* =========================================================
   PERSONAL DETAIL
========================================================= */




.leader-personal-detail {
  max-width:
    560px;


  margin-top:
    clamp(
      58px,
      5vw,
      76px
    );


  display:
    flex;


  align-items:
    center;


  gap:
    16px;
}




.leader-personal-icon {
  width:
    44px;


  height:
    44px;


  flex:
    0 0 44px;


  display:
    grid;


  place-items:
    center;


  border-radius:
    50%;


  background:
    rgba(
      195,
      72,
      17,
      .08
    );
}




.leader-personal-icon img {
  width:
    21px;


  height:
    21px;


  object-fit:
    contain;
}




/*
If your SVG uses currentColor internally,
this can inherit Terracotta.


If the SVG contains fixed fills/strokes,
replace the actual SVG later as planned.
*/
.leader-personal-icon {
  color:
    var(--terra);
}




.leader-personal-copy {
  min-width:
    0;


  display:
    grid;


  gap:
    3px;
}




.leader-personal-label {
  color:
    var(--soft);


  font-size:
    11px;


  line-height:
    1.2;


  letter-spacing:
    .075em;


  font-weight:
    550;


  text-transform:
    uppercase;
}




.leader-personal-copy strong {
  color:
    var(--text);


  font-size:
    17px;


  line-height:
    1.25;


  letter-spacing:
    -.02em;


  font-weight:
    500;
}








/* =========================================================
   PORTRAIT
========================================================= */




.leader-portrait {
  position:
    sticky;


  top:
    calc(
      var(--header-h) +
      32px
    );


  min-width:
    0;


  margin:
    0;


  opacity:
    0;


  transform:
    translateY(12px);


  transition:
    opacity
    700ms
    ease
    80ms,
    transform
    800ms
    var(--ease)
    80ms;
}




.leader-portrait.is-visible {
  opacity:
    1;


  transform:
    none;
}








/* =========================================================
   PORTRAIT IMAGE
========================================================= */




.leader-portrait-frame {
  width:
    100%;


  aspect-ratio:
    .92 / 1;


  overflow:
    hidden;


  border-radius:
    4px;


  background:
    var(--surface);
}




.leader-portrait-frame img {
  width:
    100%;


  height:
    100%;


  object-fit:
    cover;


  object-position:
    center;


  border-radius:
    inherit;


  transform:
    scale(1.001);


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




.leader-portrait-frame.is-missing {
  background:
    var(--surface);
}








/* =========================================================
   PORTRAIT HOVER
========================================================= */




@media (hover: hover) {


  .leader-portrait:hover
  .leader-portrait-frame img {
    transform:
      scale(1.006);
  }


}


/* =========================================================
   MEDIUM DESKTOP
========================================================= */




@media (max-width: 1180px) {


  .leader-profile-grid {
    grid-template-columns:
      minmax(
        0,
        .92fr
      )
      minmax(
        420px,
        1.08fr
      );


    column-gap:
      clamp(
        48px,
        6vw,
        78px
      );
  }




  .leader-heading h1 {
    font-size:
      clamp(
        44px,
        5vw,
        60px
      );
  }


}








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




@media (max-width: 900px) {


  .leader-profile {
    padding-top:
      calc(
        var(--header-h) +
        42px
      );
  }




  .leader-back-wrap {
    margin-bottom:
      54px;
  }




  .leader-profile-grid {
    grid-template-columns:
      minmax(
        0,
        1fr
      );


    gap:
      70px;
  }




  .leader-copy {
    max-width:
      680px;


    padding-top:
      0;
  }




  .leader-heading h1 {
    max-width:
      620px;


    font-size:
      clamp(
        46px,
        8vw,
        64px
      );
  }




  .leader-biography {
    max-width:
      600px;
  }




  .leader-portrait {
    position:
      relative;


    top:
      auto;


    max-width:
      760px;
  }




  .leader-portrait-frame {
    aspect-ratio:
      1.04 / 1;
  }


}








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




@media (max-width: 760px) {


  .leader-profile {
    padding:
      calc(
        var(--header-h) +
        34px
      )
      0
      116px;
  }




  .leader-back-wrap {
    margin-bottom:
      44px;
  }




  .leader-back {
    font-size:
      14px;
  }




  .leader-back img {
    width:
      16px;


    height:
      16px;
  }




  .leader-profile-grid {
    gap:
      54px;
  }




  .leader-heading h1 {
    font-size:
      clamp(
        40px,
        11vw,
        54px
      );


    line-height:
      1;


    letter-spacing:
      -.05em;
  }




  .leader-title {
    margin-top:
      16px;


    max-width:
      390px;


    font-size:
      18px;
  }




  .leader-biography {
    margin-top:
      46px;
  }




  .leader-biography p {
    margin-bottom:
      20px;


    font-size:
      16px;


    line-height:
      1.62;
  }




  .leader-biography p + p {
    padding-left:
      18px;
  }




  .leader-personal-detail {
    margin-top:
      48px;
  }




  .leader-personal-icon {
    width:
      42px;


    height:
      42px;


    flex-basis:
      42px;
  }




  .leader-personal-icon img {
    width:
      20px;


    height:
      20px;
  }




  .leader-personal-copy strong {
    font-size:
      16px;
  }




  .leader-portrait-frame {
    aspect-ratio:
      4 / 4.6;
  }
}

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




@media (max-width: 480px) {


  .leader-profile {
    padding-bottom:
      96px;
  }




  .leader-heading h1 {
    font-size:
      clamp(
        38px,
        11.5vw,
        48px
      );
  }




  .leader-title {
    font-size:
      17px;
  }




  .leader-biography {
    margin-top:
      42px;
  }




  .leader-biography p {
    font-size:
      15.5px;
  }




  .leader-biography p + p {
    padding-left:
      14px;
  }




  .leader-personal-detail {
    gap:
      13px;
  }

}

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




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


  html {
    scroll-behavior:
      auto;
  }




  .leader-copy,
  .leader-portrait {
    opacity:
      1;


    transform:
      none;


    transition:
      none;
  }




  .leader-portrait-frame img,
  .leader-back img {
    transition:
      none;
  }


}