/* about — quarta dobra: bio ao lado, foto grande sangrando pro canto direito, tudo dentro de uma única tela */
.about{position:relative;overflow:hidden;background:var(--cream);min-height:100vh;display:flex;align-items:center;padding-block:5rem}
.about-corner-glow{position:absolute;top:-8%;left:-8%;width:38%;height:78%;z-index:0;background:radial-gradient(circle at 30% 20%,rgba(228,200,137,.65) 0%,rgba(195,154,87,.32) 35%,transparent 65%);filter:blur(55px);pointer-events:none}
.about-orb{position:absolute;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0;will-change:transform}
.about-orb--one{width:360px;height:360px;background:rgba(228,200,137,.24);top:-8%;right:-8%}
.about-orb--two{width:260px;height:260px;background:rgba(195,154,87,.16);bottom:-6%;left:-6%}

.about-grid{position:relative;z-index:1;display:grid;grid-template-columns:.95fr 1.35fr;gap:5rem;align-items:center}

.about-eyebrow{margin-bottom:.7rem}
.about-title{font-size:clamp(1.9rem,3.6vw,2.8rem);font-style:italic;margin-bottom:.4rem;line-height:1.1}
.about-role{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.2em;color:var(--gold-deep);font-weight:600;margin-bottom:1.3rem}
.about-text{font-size:.98rem;line-height:1.7;color:var(--mocha);max-width:460px;margin-bottom:.9rem}
.about-text:last-of-type{margin-bottom:1.4rem}
.about-credentials{display:flex;flex-wrap:wrap;gap:.7rem}
.about-credentials span{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--taupe);border:1px solid var(--nude);border-radius:var(--radius-pill);padding:.48rem 1rem}

/* composição da foto — uma imagem só (já vem com o desvanecimento e o brilho embutidos), grande e afastada do texto, no canto direito */
.about-media{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:flex-end;min-height:min(70vh,620px);overflow:visible}
.about-photo{position:relative;z-index:1;width:134%;max-width:none;height:auto;margin: 
  -340px;transition:transform .6s var(--ease-smooth)}
.about-media:hover .about-photo{transform:translateY(-6px)}

@media (max-width:980px){
  .about{min-height:auto}
  .about-grid{grid-template-columns:1fr;gap:3.5rem}
  .about-media{min-height:auto;justify-content:center}
  .about-corner-glow,.about-orb{display:none}
  /* posição ajustável no mobile/tablet — defina --m-top/right/bottom/left inline no <img class="about-photo"> pra nudgear a foto sem mexer no desktop */
  .about-photo{
    width:100%;max-width:760px;margin:0;
    aspect-ratio:935/750;object-fit:cover;object-position:center bottom;
    top:var(--m-top,0) !important;
    right:var(--m-right,0) !important;
    bottom:var(--m-bottom,0) !important;
    left:var(--m-left,0) !important;
  }
  .about-text{max-width:100%}
}

@media (max-width:600px){
  .about{padding-block:5.5rem}
  .about-photo{max-width:520px}
}