/* HAI Labs · Quem somos. Frase de impacto, depois as pessoas em três painéis que se abrem. */
.first{display:flex;flex-direction:column;height:100svh;min-height:700px;max-height:980px;background:var(--wine)}
.sb-hero{flex:none;background:var(--wine);padding:calc(84px + clamp(26px,5vh,54px)) 0 clamp(30px,5.5vh,58px)}
.sb-hero .wrap{display:flex;align-items:center;gap:clamp(20px,2.6vw,40px)}
#sbmark{flex:none;width:clamp(84px,8.4vw,124px);aspect-ratio:1}
.sb-hero h1{font-size:clamp(1.7rem,3.3vw,3.1rem);line-height:1.08;color:#FBF8EF}

.people{display:flex;flex:1 1 0;min-height:340px;background:#120708;overflow:hidden;width:min(1180px,calc(100% - 2*max(28px,4vw)));margin:0 auto clamp(26px,5vh,52px);border-radius:14px}
.person{flex:1 1 0;min-width:0;position:relative;overflow:hidden;color:#FBF8EF;cursor:default;transition:flex-grow .7s cubic-bezier(.2,.7,.1,1);--tint:18,7,8}
.person.pa{--tint:54,20,23}.person.pb{--tint:0,50,46}.person.pg{--tint:16,22,21}
.person+.person{border-left:1px solid rgba(251,248,239,.14)}
.person img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.1,1)}
.person::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--tint),0) 38%,rgba(var(--tint),.55) 66%,rgba(var(--tint),.96) 100%);transition:opacity .5s}
.person::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(var(--tint),.04) 0%,rgba(var(--tint),.18) 40%,rgba(var(--tint),.9) 64%,rgba(var(--tint),.98) 100%);opacity:0;transition:opacity .5s}
.person .who{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:0 clamp(20px,2.6vw,44px) clamp(26px,5vh,48px)}
.home .person h2{color:#FBF8EF;font-size:clamp(1.5rem,2vw,2rem);line-height:1.05}
.person .role{margin:8px 0 0;font-size:.95rem;color:var(--sage);font-weight:500}
.person .bio{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.2,.7,.1,1)}
.person .bio p{min-height:0;overflow:hidden;margin:0;font-size:.9rem;line-height:1.55;color:rgba(251,248,239,.88);max-width:46ch;opacity:0;transition:opacity .4s}
.person:focus-visible{outline-offset:-6px}
@media (hover:hover) and (min-width:901px){
  .person:hover{flex-grow:1.7}
  .person:hover img{transform:scale(1.03)}
  .person:hover::before{opacity:1}
  .person:hover .bio{grid-template-rows:1fr}
  .person:hover .bio p{opacity:1;padding-top:18px;transition-delay:.2s}
}
@media (min-width:901px){
  .person:focus-within,.person:focus{flex-grow:1.7}
  .person:focus::before,.person:focus-within::before{opacity:1}
  .person:focus .bio,.person:focus-within .bio{grid-template-rows:1fr}
  .person:focus .bio p,.person:focus-within .bio p{opacity:1;padding-top:18px}
}

.sobre .kind{margin:0 0 16px;font-size:.95rem;font-weight:600;color:var(--h);opacity:.75}
.sobre [data-t=wine] .kind,.sobre [data-t=green] .kind{color:var(--sage);opacity:1}
.missao{padding-top:clamp(40px,6vh,72px)}
.missao h2{font-size:clamp(1.7rem,3vw,2.8rem);line-height:1.14;max-width:24em}
.lados{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);margin-top:clamp(36px,6vh,60px)}
.lado{border-radius:22px;padding:clamp(26px,3.4vw,48px);color:#FBF8EF}
.lado.lf{background:var(--wine);box-shadow:0 50px 90px -60px rgba(54,20,23,.9)}
.lado.ld{background:var(--green);box-shadow:0 50px 90px -60px rgba(0,63,58,.9)}
.home .lado h3{color:#FBF8EF;font-size:clamp(1.7rem,2.4vw,2.3rem)}
.lado p{margin:16px 0 0;font-size:1.05rem;line-height:1.65;color:rgba(251,248,239,.85);max-width:40ch}
.visao h2{font-size:clamp(1.8rem,3.6vw,3.4rem);line-height:1.12;max-width:22em;color:#FBF8EF}
.val dl{margin:clamp(36px,6vh,64px) 0 0;border-top:1px solid var(--ln)}
.val dl>div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(1rem,4vw,4rem);align-items:baseline;padding:26px 0;border-bottom:1px solid var(--ln)}
.val dt{font-family:var(--serif);font-variation-settings:"opsz" 11;font-weight:500;font-size:clamp(1.5rem,2.3vw,2.2rem);color:#FBF8EF}
.val dd{margin:0;color:var(--tx);font-size:1.08rem;line-height:1.6;max-width:48ch}

/* negócio: três imagens, três ideias */
.neg{padding-bottom:clamp(40px,6vh,72px)}
.home .neg h2{font-size:clamp(1.6rem,2.5vw,2.3rem);line-height:1.15;max-width:none}
.tres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,40px);margin-top:clamp(30px,5vh,52px)}
.tres .ph{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--sage)}
.tres .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.1,1)}
.tres .ph.scr img{object-position:left top}
.tres article:hover .ph img{transform:scale(1.05)}
.home .tres h3{font-size:clamp(1.25rem,1.6vw,1.5rem);color:var(--green);margin-top:22px}
.tres p{margin:10px 0 0;font-size:1rem;line-height:1.65;color:var(--tx);max-width:38ch}
/* grupo: mais de 30 anos */
.grp .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(2rem,6vw,5.5rem);align-items:center}
.anos{margin:0;color:#FBF8EF}
.anos>span{display:grid;justify-items:start}
.anos small{font-family:var(--sans);font-size:clamp(1rem,1.5vw,1.3rem);font-weight:500;color:var(--sage)}
.anos b{font-family:var(--serif);font-variation-settings:"opsz" 96;font-weight:500;font-size:clamp(9rem,24vw,21rem);line-height:.8;letter-spacing:-.02em;margin:.06em 0 .1em -.04em;background:linear-gradient(180deg,#FBF8EF 30%,rgba(251,248,239,.45));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.home .grp h2{font-size:clamp(1.6rem,2.6vw,2.4rem);line-height:1.15}
.cias{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;padding:0}
.cias li{font-size:.92rem;font-weight:500;color:#FBF8EF;padding:11px 18px;border-radius:999px;border:1px solid rgba(251,248,239,.35)}
.cias li:last-child{background:#FBF8EF;color:var(--green);border-color:#FBF8EF}

@media (max-width:900px){
  .tres{grid-template-columns:1fr}
  .first{height:auto;min-height:0;max-height:none}
  .people{flex-direction:column;height:auto;flex:none;width:100%;margin:0;border-radius:0}
  .sb-hero{padding-bottom:34px}
  #sbmark{display:none}
  .person{flex:none}
  .person+.person{border-left:0;border-top:1px solid rgba(251,248,239,.14)}
  .person img{position:relative;height:auto;aspect-ratio:4/5}
  .person::after{display:none}
  .person .who{position:relative;background:rgb(var(--tint));padding-top:26px}
  .person .bio{grid-template-rows:1fr}.person .bio p{opacity:1;padding-top:14px}
  .grp .grid,.lados{grid-template-columns:1fr}
  .sb-hero h1{font-size:clamp(1.6rem,6.4vw,2.2rem)}
  .val dl>div{grid-template-columns:1fr;gap:8px}
}
@media (prefers-reduced-motion:reduce){.sb-hero h1{animation:none}.person,.person img,.person .bio{transition:none}}

/* compactação: seções mais baixas e rótulos em maiúsculas */
.sobre .hx{padding:clamp(48px,7.5vh,84px) 0}
.sobre .kind{text-transform:uppercase;letter-spacing:.16em;font-size:.82rem;font-weight:600;margin-bottom:14px}
.sobre .neg{padding-bottom:clamp(24px,4vh,44px)}
.sobre .missao{padding-top:clamp(24px,4vh,44px)}
.sobre .tres{margin-top:clamp(22px,3.5vh,36px)}
.sobre .tres .ph{aspect-ratio:16/9}
.home.sobre .tres h3{margin-top:16px}
.sobre .tres p{font-size:.95rem;line-height:1.55;margin-top:6px}
.sobre .missao h2{font-size:clamp(1.5rem,2.3vw,2.1rem);max-width:30em}
.sobre .lados{margin-top:clamp(22px,3.5vh,36px)}
.sobre .lado{padding:clamp(20px,2.2vw,30px)}
.home.sobre .lado h3{font-size:clamp(1.4rem,1.9vw,1.75rem)}
.sobre .lado p{font-size:.98rem;line-height:1.55;margin-top:10px}
.sobre .anos b{font-size:clamp(6.5rem,15vw,12.5rem)}
.home.sobre .grp h2{font-size:clamp(1.45rem,2.2vw,2rem)}
.sobre .cias{margin-top:20px}.sobre .grp .btns{margin-top:24px}
.home.sobre .val h2{font-size:clamp(1.6rem,2.6vw,2.3rem)}
.sobre .val dl{margin-top:clamp(20px,3vh,32px)}
.sobre .val dl>div{padding:15px 0}
.sobre .val dt{font-size:clamp(1.25rem,1.7vw,1.6rem)}
.sobre .val dd{font-size:1rem;line-height:1.5}
