body{background:#050607}
.page-hero{
  position:relative;min-height:92svh;padding:clamp(9rem,20vh,15rem) 0 clamp(4rem,9vh,7rem);display:grid;align-items:end;overflow:hidden;
  background:radial-gradient(circle at 68% 38%,#163129,#0b1513 22%,#050607 55%);color:var(--paper)
}
.page-hero::before{content:"PROJECTS";position:absolute;left:-.055em;bottom:-.02em;font-size:clamp(8rem,24vw,28rem);font-weight:800;letter-spacing:-.09em;line-height:.7;color:rgba(255,255,255,.028)}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(101,216,189,.06) 50%,transparent 65%)}
.page-hero .shell{position:relative;z-index:2;width:min(90rem,calc(100% - 2*var(--gutter)));max-width:none}
.page-hero .eyebrow{color:#73f0ce}
.page-hero h1{max-width:14ch;font-size:clamp(4rem,9vw,10rem);letter-spacing:-.075em;line-height:.89}
.page-hero .lead{margin-top:2rem;color:rgba(255,255,255,.66);font-size:clamp(1.25rem,1.8vw,1.8rem)}

.page-hero+.section{padding:clamp(2rem,5vw,5rem) 0 clamp(7rem,14vw,14rem);background:linear-gradient(180deg,#0b0d0e,#030405);color:#f5f5f7}
.page-hero+.section>.shell{width:min(94rem,calc(100% - 2*clamp(.75rem,3vw,3rem)));max-width:none}
.portfolio-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(1rem,3vw,3rem)}
.portfolio-card{grid-column:span 6}
.portfolio-grid>:first-child{grid-column:1/-1}
.project-card{position:relative;display:block;min-height:clamp(34rem,62vw,54rem);overflow:hidden;border-radius:clamp(1.5rem,3vw,3.25rem);color:#fff;text-decoration:none;background:#101415;box-shadow:0 34px 90px rgba(0,0,0,.32)}
.portfolio-grid>:first-child .project-card{min-height:min(80svh,62rem)}
.project-card figure,.project-card .placeholder-media{position:absolute;inset:0;margin:0;width:100%;height:100%;aspect-ratio:auto;border:0;border-radius:0}
.project-card .placeholder-media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent 64%),linear-gradient(90deg,rgba(0,0,0,.28),transparent 60%)}
.project-card img{transition:transform 1s var(--ease),filter .7s;filter:saturate(.76) contrast(1.06)}
.portfolio-card[data-project="qualifica-belo-jardim"] img{object-fit:contain;object-position:center top;background:#101415}
.project-card:hover img{transform:scale(1.035);filter:saturate(.98)}
.project-card .placeholder-note{position:absolute;z-index:3;top:1rem;right:1rem;margin:0;padding:.4rem .58rem;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(3,5,6,.36);color:rgba(255,255,255,.5);backdrop-filter:blur(14px)}
.project-card__body{
  position:absolute;z-index:4;left:clamp(1rem,3vw,2.5rem);right:clamp(1rem,3vw,2.5rem);bottom:clamp(1rem,3vw,2.5rem);padding:clamp(1.25rem,2.8vw,2.5rem);
  display:grid;gap:.75rem;border:1px solid rgba(255,255,255,.2);border-top-color:rgba(255,255,255,.38);border-radius:clamp(1.25rem,2.5vw,2.4rem);
  background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.03)),rgba(10,14,15,.5);
  box-shadow:0 25px 70px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.18);
  backdrop-filter:blur(32px) saturate(160%);-webkit-backdrop-filter:blur(32px) saturate(160%)
}
.project-card__body .eyebrow{color:#73f0ce}
.project-card__body .tag{position:absolute;right:1.4rem;top:1.35rem;color:rgba(255,255,255,.65);border-color:rgba(255,255,255,.2)}
.project-card__body h2{font-size:clamp(2rem,4vw,5rem);letter-spacing:-.06em;max-width:14ch}
.project-card__body>p:last-child{max-width:38ch;color:rgba(255,255,255,.65)}
.project-card:hover h2{text-decoration:none}

@media(max-width:820px){
  .page-hero{min-height:88svh}
  .page-hero h1{font-size:clamp(3.8rem,15vw,6.5rem)}
  .portfolio-grid{grid-template-columns:1fr}
  .portfolio-card,.portfolio-grid>:first-child,.portfolio-grid>:nth-child(n){grid-column:auto}
  .project-card,.portfolio-grid>:first-child .project-card{min-height:78svh}
  .project-card__body h2{font-size:clamp(2.2rem,9vw,4rem)}
  .project-card__body .tag{position:relative;inset:auto;width:max-content;grid-row:2}
}