/* ===== CHAIRMAN CARD (hero, left side) =====
   Prefix: cc-   |   Pairs with recent-initiatives.css (rc-) on the right.
   Sizes are driven by CSS variables so the hero text and both cards never collide. */

section.hero{
  --cc-x:max(7vw,96px);                          /* left edge of the whole hero group */
  --cc-w:clamp(190px,min(17.5vw,33vh),292px);    /* chairman card width */
  --cc-gap:clamp(24px,3.2vw,56px);               /* gap between card and hero text */
  --cc-rc:calc(7vw + 36px + 224px + 28px);       /* space reserved for the Recent Initiatives card */
  --cc-offset:130px;                             /* header height, kept in sync by chairman-card.js */
  height:max(calc(100vh - var(--cc-offset)),470px);
}
@supports (height:100svh){
  section.hero{height:max(calc(100svh - var(--cc-offset)),470px)}
}

/* ---------- card ---------- */
.cc-card{position:absolute;left:var(--cc-x);bottom:5.5vh;width:var(--cc-w);z-index:12;
  border-radius:18px;overflow:hidden;color:#FDFCF9;font-family:'DM Sans','Poppins',sans-serif;
  background:linear-gradient(165deg,rgba(253,252,249,.10),rgba(253,252,249,.03));
  border:1px solid rgba(201,169,110,.32);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 26px rgba(201,169,110,.10),inset 0 1px 0 rgba(253,252,249,.10);
  opacity:0;transform:translateY(22px);
  transition:opacity .8s ease .9s,transform .8s cubic-bezier(.2,.7,.2,1) .9s,
             border-color .45s ease,box-shadow .45s ease}
.hero.loaded .cc-card{opacity:1;transform:none}
/* after the intro, hover transitions must be instant-start (no .9s delay) */
.hero.loaded .cc-card.cc-ready{transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .45s ease,box-shadow .45s ease}
.hero.loaded .cc-card.cc-ready:hover{transform:translateY(-8px);border-color:rgba(201,169,110,.75);
  box-shadow:0 26px 54px rgba(0,0,0,.6),0 0 34px rgba(201,169,110,.28),inset 0 1px 0 rgba(253,252,249,.16)}

/* ---------- photo ---------- */
.cc-photo{position:relative;aspect-ratio:4/4.5;overflow:hidden;background:linear-gradient(135deg,#2a2418,#14110b)}
.cc-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;display:block;
  transform:scale(1.02);transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .6s ease}
.cc-card:hover .cc-photo img{transform:scale(1.08)}
.cc-photo::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,10,8,.72) 0%,rgba(10,10,8,0) 38%),
             linear-gradient(135deg,rgba(201,169,110,.10),rgba(201,169,110,0) 45%)}
/* soft light sweep on hover */
.cc-photo::before{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.20),transparent);
  transform:skewX(-18deg);transition:left .9s ease}
.cc-card:hover .cc-photo::before{left:130%}

/* gold role tag on the photo */
.cc-role{position:absolute;left:10px;bottom:10px;z-index:3;display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px 5px 8px;border-radius:999px;font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:#E8D5B0;background:rgba(10,10,8,.55);border:1px solid rgba(201,169,110,.40);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.cc-dot{width:6px;height:6px;border-radius:50%;background:#C9A96E;box-shadow:0 0 0 0 rgba(201,169,110,.7);animation:ccPulse 2.2s ease-out infinite}
@keyframes ccPulse{0%{box-shadow:0 0 0 0 rgba(201,169,110,.65)}70%{box-shadow:0 0 0 8px rgba(201,169,110,0)}100%{box-shadow:0 0 0 0 rgba(201,169,110,0)}}

/* ---------- info ---------- */
.cc-info{padding:12px 14px 14px}
.cc-name{margin:0;font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(15px,1.15vw,18px);font-weight:600;line-height:1.2;color:#FDFCF9}
.cc-line{display:block;width:30px;height:2px;margin:8px 0 9px;background:linear-gradient(to right,#C9A96E,rgba(201,169,110,0));
  transition:width .5s cubic-bezier(.2,.7,.2,1)}
.cc-card:hover .cc-line{width:64px}
.cc-degree{display:inline-block;margin-bottom:7px;padding:3px 9px;border-radius:999px;font-size:10px;font-weight:500;letter-spacing:.08em;
  color:#E8D5B0;background:rgba(201,169,110,.12);border:1px solid rgba(201,169,110,.35);transition:background .4s ease,border-color .4s ease}
.cc-card:hover .cc-degree{background:rgba(201,169,110,.22);border-color:rgba(201,169,110,.6)}
.cc-org{margin:0;font-size:10.5px;font-weight:300;line-height:1.45;color:rgba(253,252,249,.62)}

/* ---------- hero text makes room for the card (desktop) ---------- */
.hero .nav-bar{padding-left:var(--cc-x)}
.hero .hero-content{padding-left:calc(var(--cc-x) + var(--cc-w) + var(--cc-gap));padding-right:7vw}
.hero .headline{font-size:clamp(2.2rem,min(4.3vw,8.6vh),5.8rem);max-width:calc(100vw - var(--cc-x) - var(--cc-w) - var(--cc-gap) - var(--cc-rc))}
.hero .slide-tag{left:calc(var(--cc-x) + var(--cc-w) + var(--cc-gap))}
.hero .eyebrow{margin-bottom:clamp(10px,2.4vh,20px)}
.hero .body-row{margin-top:clamp(14px,3vh,28px);gap:1.5rem}
.hero .cta-row{margin-top:clamp(16px,3.4vh,32px)}
.hero .body-text{max-width:380px}
.hero .stats{gap:clamp(1.2rem,2.2vw,3rem)}

/* short laptop screens (e.g. 1366x768 browsers): lift the Recent Initiatives card a little so the stats never touch it */
@media (min-width:1201px) and (max-height:720px){
  .rc-card{top:40px}
}

/* ---------- tablet + mobile: Recent Initiatives card leaves the hero (<=1200px) ---------- */
@media (max-width:1200px){
  section.hero{--cc-x:max(5vw,28px);--cc-w:clamp(180px,26vw,250px);--cc-gap:clamp(22px,3.4vw,40px);--cc-rc:0px}
  .hero .hero-content{padding-right:calc(5vw + 64px)}
  .hero .headline{font-size:clamp(2.1rem,min(5.2vw,8vh),4.6rem)}
  .hero .stats{display:none}
  .hero .nav-bar{padding-right:calc(5vw + 64px)}
}

/* ---------- phones: card becomes a compact horizontal strip, hero grows if needed ---------- */
@media (max-width:768px){
  section.hero{--cc-x:20px;height:auto;min-height:max(calc(100vh - var(--cc-offset)),560px);
    display:flex;flex-direction:column;padding-bottom:0}
  @supports (height:100svh){section.hero{min-height:max(calc(100svh - var(--cc-offset)),560px)}}
  .hero .nav-bar{position:relative;flex:0 0 auto;padding:22px 64px 0 var(--cc-x)}
  .hero .logo{font-size:clamp(15px,4.4vw,20px);line-height:1.35}

  .cc-card{position:relative;left:auto;bottom:auto;width:auto;max-width:420px;margin:16px 64px 0 var(--cc-x);flex:0 0 auto;
    display:flex;align-items:center;gap:14px;padding:10px 14px 10px 10px;border-radius:16px}
  .cc-photo{flex:0 0 76px;width:76px;aspect-ratio:1/1;border-radius:12px}
  .cc-photo::before{display:none}
  .cc-role{display:none}
  .cc-info{padding:0;min-width:0}
  .cc-name{font-size:17px}
  .cc-line{margin:6px 0 7px}
  .cc-card:hover{transform:none}

  .hero .hero-content{position:relative;margin-top:auto;padding:22px 64px 28px var(--cc-x)}
  .hero .headline{max-width:none;font-size:clamp(2rem,9.2vw,3.4rem)}
  .hero .slide-tag{left:var(--cc-x)}
}

/* very small phones */
@media (max-width:380px){
  .cc-photo{flex-basis:64px;width:64px}
  .cc-name{font-size:15.5px}
  .cc-org{font-size:10px}
}

/* respect reduced-motion */
@media (prefers-reduced-motion:reduce){
  .cc-card,.cc-photo img,.cc-photo::before,.cc-line{transition:none!important}
  .cc-dot{animation:none}
}