/* Hero panels for 01 Solar / 02 Biogas / 03 Team, built on the Palace Energy theme tokens (theme.css). */
.hero-copy a,.hero-copy button,.hero-copy img{pointer-events:auto}
.hero-copy:has(.panel:not(#panel-intro):not([hidden])){padding-top:48px}
.panel[hidden]{display:none!important}
.panel-title{font-size:clamp(48px,5.8vw,92px);font-weight:400;letter-spacing:-.065em;line-height:1.03;margin:0 0 26px}
.panel-title span{display:block}
.panel .eyebrow .num{color:var(--brand-pink);margin-right:2px}

.stat-line{display:flex;align-items:baseline;gap:16px;margin:30px 0 0 50px}
.stat-line strong{font-size:clamp(40px,3.6vw,56px);font-weight:400;letter-spacing:-.06em;line-height:1;color:var(--brand-pink)}
body.dark .stat-line strong{color:var(--orb)}
.stat-line span{font-size:10px;letter-spacing:1.3px;line-height:1.8}

.stat-row{display:flex;flex-wrap:wrap;gap:0 44px}

.thumbs{display:flex;gap:10px;margin:24px 0 0 50px}
.thumbs figure{margin:0;width:140px;height:90px;border-radius:4px;overflow:hidden;background:linear-gradient(135deg,var(--accent),#acccd2)}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.thumbs figure:hover img{transform:scale(1.06)}

.panel .contact-link{margin-top:20px}

.people{display:grid;grid-template-columns:repeat(3,minmax(0,190px));gap:26px;margin:34px 0 0 50px}
.person{display:flex;flex-direction:column;gap:8px;padding:18px 12px 12px 0;border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--paper) 84%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.avatar{width:64px;height:64px;border-radius:50%;overflow:hidden;display:grid;place-items:center;margin-bottom:6px;
  background:radial-gradient(circle at 70% 25%,#ffa0b780,transparent 60%),radial-gradient(circle at 25% 80%,#6daab480,transparent 60%),var(--paper);
  border:1px solid var(--line);font-size:20px;letter-spacing:-.04em;color:var(--headline-secondary)}
.avatar img{width:100%;height:100%;object-fit:cover}
.person .role{font-size:9px;letter-spacing:1.3px;color:var(--muted);margin:0}
.person h3{font-size:19px;font-weight:400;letter-spacing:-.03em;line-height:1.2;margin:0}
.person p.bio{font-size:13px;line-height:1.6;color:var(--muted);margin:0}
.person-name{all:unset;cursor:pointer;background:linear-gradient(var(--brand-pink),var(--brand-pink)) 0 100%/0 1px no-repeat;
  transition:background-size .4s cubic-bezier(.2,.7,.1,1),color .3s}
.person-name:hover,.person-name:focus-visible{color:var(--brand-pink);background-size:100% 1px}
.person-name:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
body.dark .person-name:hover,body.dark .person-name:focus-visible{color:var(--orb)}

/* Team profile pop-up */
.profile{width:min(640px,calc(100vw - 32px));max-height:calc(100svh - 32px);padding:0;border:1px solid var(--line);border-radius:6px;
  background:var(--paper);color:var(--ink);box-shadow:0 30px 80px -20px #27394466;overflow:auto}
.profile[open]{display:grid;grid-template-columns:220px 1fr;animation:arrive .6s cubic-bezier(.2,.7,.1,1) both}
.profile::backdrop{background:#27394459;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.profile-photo{aspect-ratio:4/5;background:radial-gradient(circle at 70% 25%,#ffa0b780,transparent 60%),radial-gradient(circle at 25% 80%,#6daab480,transparent 60%),var(--paper)}
.profile-photo img{width:100%;height:100%;object-fit:cover;display:block}
.profile-photo.initials{display:grid;place-items:center;font-size:64px;letter-spacing:-.05em;color:var(--headline-secondary)}
.profile-text{display:flex;flex-direction:column;gap:10px;padding:34px 34px 30px}
.profile-text .role{font-size:9px;letter-spacing:1.3px;color:var(--muted);margin:0}
.profile-text h3{font-size:30px;font-weight:400;letter-spacing:-.045em;line-height:1.1;margin:0 0 6px}
.profile-bio{border-top:1px solid var(--line);padding-top:16px}
.profile-bio p{font-size:14px;line-height:1.7;color:var(--muted);margin:0 0 10px}
.profile-close{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  background:var(--paper);font-size:20px;line-height:1;display:grid;place-items:center;transition:transform .3s,background .3s}
.profile-close:hover{transform:rotate(90deg);background:var(--accent)}
body.dark .profile-close:hover{color:#273944}

/* Staggered arrival when a panel opens, matching the theme's hero timing */
.panel.reveal-in > *{animation:arrive 1.1s cubic-bezier(.2,.7,.1,1) both}
.panel.reveal-in > :nth-child(2){animation-delay:.08s}
.panel.reveal-in > :nth-child(3){animation-delay:.16s}
.panel.reveal-in > :nth-child(4){animation-delay:.24s}
.panel.reveal-in > :nth-child(5){animation-delay:.32s}
.panel.reveal-in > :nth-child(6){animation-delay:.4s}

@media(max-width:1050px){
  .thumbs figure{width:124px;height:86px}
  .people{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
}
@media(max-width:900px){
  .panel-title{font-size:clamp(40px,9.6vw,66px);margin-bottom:22px;letter-spacing:-.06em}
  .stat-line,.thumbs,.people{margin-left:39px}
  .thumbs{gap:8px}
  .thumbs figure{flex:1 1 0;width:auto;height:84px}
  .people{grid-template-columns:1fr;gap:0;margin-top:24px}
  .person{display:grid;grid-template-columns:56px 1fr;column-gap:16px;row-gap:3px;padding:16px 0}
  .person .avatar{grid-row:span 3;width:56px;height:56px;margin:0;font-size:18px}
  .person p.bio{grid-column:2}
}
/* Four section buttons plus pause need to share a phone-width bar */
@media(max-width:600px){
  .mode{padding:9px 8px}
  .pause-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .pause-button{min-width:0;padding:9px 4px 9px 12px}
}
@media(max-width:420px){
  .mode span{display:none}
  .mode{padding:9px 9px}
}
@media(max-width:380px){
  .stat-line,.thumbs,.people{margin-left:0}
}
/* Phones: photo on top, text below */
@media(max-width:560px){
  .profile[open]{grid-template-columns:1fr}
  .profile-photo{aspect-ratio:auto;height:min(46svh,340px)}
  .profile-photo img{object-position:50% 30%}
  .profile-text{padding:24px 22px 22px}
  .profile-text h3{font-size:26px}
}