/* When Leadership Matters Most — slide-owned composition.
   Shared hero system continues to own hero height, CTA button styling/baseline,
   carousel arrows/dots and slide mechanics. This file owns only slide 2. */

body.home .hero--story .hero-slide--leadership-matters{
  background:#fff;
  color:var(--aurum-ink);
}

body.home .hero--story .hero-slide--leadership-matters .hero-image img,
body.home .hero--story .hero-slide--leadership-matters .hero-image picture img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
  filter:none!important;
}

body.home .hero--story .hero-slide--leadership-matters .hero-shade{
  display:none;
}

/* The content stack is bottom-anchored so the shared CTA stays on the same
   baseline as every other homepage hero. Copy grows upward from it. */
body.home .hero--story .hero-slide--leadership-matters .hero-content{
  width:min(760px,52vw);
  max-width:min(760px,52vw);
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  color:var(--aurum-ink);
}

body.home .hero--story .hero-slide--leadership-matters .hero-heading--leadership-matters{
  width:auto;
  max-width:17ch;
  margin:0 0 18px;
  color:var(--aurum-red);
  font-family:var(--font-primary);
  font-size:clamp(42px,3.8vw,58px);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:650;
  font-style:normal;
  text-wrap:pretty;
}

body.home .hero--story .hero-slide--leadership-matters .hero-leadership-intro{
  max-width:650px;
  margin:0 0 12px;
  color:rgba(25,22,19,.88);
  font-size:clamp(16px,1.12vw,18px);
  line-height:1.5;
  font-weight:400;
}
body.home .hero--story .hero-slide--leadership-matters .hero-leadership-intro strong{
  color:var(--aurum-ink);
  font-weight:650;
}

body.home .hero--story .hero-slide--leadership-matters .hero-leadership-question{
  max-width:650px;
  margin:0 0 20px;
  color:var(--aurum-ink);
  font-size:clamp(16px,1.16vw,18px);
  line-height:1.42;
  font-weight:650;
}

body.home .hero--story .hero-slide--leadership-matters .hero-scroll{
  color:#fff!important;
  border-bottom-color:transparent;
}

/* Controls remain in the exact shared bottom-right location; only their colour
   changes so they read on the white slide. */
body.home .hero--story:has(.hero-slide--leadership-matters.is-active) .hero-arrow{
  border-color:rgba(25,22,19,.2);
  background:rgba(255,255,255,.9);
  color:var(--aurum-ink);
}
body.home .hero--story:has(.hero-slide--leadership-matters.is-active) .hero-dots button{
  background:rgba(25,22,19,.22);
}
body.home .hero--story:has(.hero-slide--leadership-matters.is-active) .hero-dots button[aria-selected="true"]{
  background:var(--aurum-red);
}

@media(max-width:850px){
  /* One continuous full-bleed white hero. The original photograph remains
     the canvas; there is no separate image panel/card on mobile. */
  body.home .hero--story .hero-slide--leadership-matters{
    display:block;
    position:relative;
    overflow:hidden;
    background:#fff;
  }

  body.home .hero--story .hero-slide--leadership-matters .hero-image{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    overflow:hidden;
    background:#fff;
  }

  body.home .hero--story .hero-slide--leadership-matters .hero-image picture{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
  }

  body.home .hero--story .hero-slide--leadership-matters .hero-image img,
  body.home .hero--story .hero-slide--leadership-matters .hero-image picture img{
    position:absolute!important;
    top:0!important;
    right:-25vw!important;
    bottom:auto!important;
    left:auto!important;
    width:175vw!important;
    height:auto!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:top right!important;
    transform:none!important;
    filter:none!important;
  }

  /* Copy remains on the original white background and grows upward from
     the shared CTA baseline. It never enters Dr Phindile's face area. */
  body.home .hero--story .hero-slide--leadership-matters .hero-content{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    max-width:100%!important;
    height:100%!important;
    padding:0 22px 56px!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-end!important;
    align-items:flex-start!important;
    background:transparent!important;
    color:var(--aurum-ink);
  }

  body.home .hero--story .hero-slide--leadership-matters .hero-heading--leadership-matters{
    width:min(100%,17ch);
    max-width:17ch;
    margin:0 0 12px;
    color:var(--aurum-red);
    font-family:var(--font-primary);
    font-size:clamp(27px,7.2vw,34px);
    line-height:1.03;
    letter-spacing:-.032em;
    font-weight:650;
    font-style:normal;
    text-wrap:pretty;
  }

  body.home .hero--story .hero-slide--leadership-matters .hero-leadership-intro{
    max-width:34em;
    margin:0 0 8px;
    color:rgba(25,22,19,.9);
    font-size:clamp(13.5px,3.45vw,15.5px);
    line-height:1.42;
  }

  body.home .hero--story .hero-slide--leadership-matters .hero-leadership-question{
    max-width:33em;
    margin:0 0 14px;
    color:var(--aurum-ink);
    font-size:clamp(14px,3.6vw,16px);
    line-height:1.35;
    font-weight:650;
  }
}

@media(max-width:430px){
  body.home .hero--story .hero-slide--leadership-matters .hero-image img,
  body.home .hero--story .hero-slide--leadership-matters .hero-image picture img{
    right:-30vw!important;
    width:185vw!important;
  }

  body.home .hero--story .hero-slide--leadership-matters .hero-heading--leadership-matters{
    max-width:17ch;
    font-size:clamp(25px,7vw,30px);
  }

  body.home .hero--story .hero-slide--leadership-matters .hero-leadership-intro{
    font-size:13.5px;
  }

  body.home .hero--story .hero-slide--leadership-matters .hero-leadership-question{
    font-size:14px;
  }
}