:root{
  --ink:#0E0E0E;
  --ink-soft:#48453F;
  --paper:#FFFFFF;
  --paper-soft:#F4F3EF;
  --muted-invert:#C6C3BB;
  --line: rgba(14,14,14,0.15);
  --line-invert: rgba(255,255,255,0.24);
  --maxw: 1320px;
  --font-title: clamp(28px, 3.4vw, 42px);
  --font-body: 16px;
  --font-card: 18px;
  --font-small: 13.5px;
  --font-label: 12.5px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Jost',sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

h1,
h2,
h3{
  font-family:'Jost',sans-serif;
  font-weight:400;
  margin:0;
  text-transform:uppercase;
  letter-spacing:0.02em;
}

p{
  margin:0;
  line-height:1.7;
  font-weight:300;
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 32px;
}

.eyebrow{
  font-size:12.5px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink-soft);
  margin-bottom:22px;
}

.eyebrow.on-dark{
  color:var(--muted-invert);
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;

  padding:16px 28px;

  border-radius:0;

  font-family:'Jost',sans-serif;
  font-size:13px;
  font-weight:500;

  text-transform:uppercase;
  letter-spacing:0.14em;

  cursor:pointer;

  border:1px solid currentColor;

  transition:all .35s var(--ease);

  white-space:nowrap;

  background:transparent;
}

.btn .ic{
  font-size:16px;
  line-height:1;
  transform:translateY(-1px);
}

.btn-dark{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}

.btn-dark:hover{
  background:transparent;
  color:var(--ink);
}

.btn-ghost{
  color:var(--ink);
}

.btn-ghost:hover{
  background:var(--ink);
  color:var(--paper);
}

.btn-ghost.on-dark{
  color:var(--paper);
}

.btn-ghost.on-dark:hover{
  background:var(--paper);
  color:var(--ink);
}

.btn-light{
  background:var(--paper);
  color:var(--ink);
  border-color:var(--paper);
}

.btn-light:hover{
  background:transparent;
  color:var(--paper);
}


/* =========================================================
   NAV
   ========================================================= */

header.nav{
  position:fixed;
  top:0;
  left:0;
  right:0;

  z-index:100;

  padding:22px 24px;

  transition:all .4s var(--ease);
}

header.nav .wrap{
  max-width:var(--maxw);

  margin:0 auto;
  padding:0;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

.logo-box{
  background:var(--paper);
  color:var(--ink);

  padding:14px 22px;

  display:flex;
  align-items:center;

  line-height:1;
}

.logo-box img{
  height:30px;
  width:auto;
  display:block;
}

nav.links{
  display:flex;
  align-items:center;

  gap:38px;
}

nav.links a.navlink{
  font-size:12.5px;

  letter-spacing:0.14em;

  text-transform:uppercase;

  color:var(--paper);

  position:relative;

  padding-bottom:4px;
}

nav.links a.navlink::after{
  content:'';

  position:absolute;

  left:0;
  bottom:0;

  height:1px;
  width:0;

  background:currentColor;

  transition:width .35s var(--ease);
}

nav.links a.navlink:hover::after{
  width:100%;
}

.nav-right{
  display:flex;
  align-items:center;

  gap:10px;
}

.icon-box{
  width:56px;
  height:56px;

  background:var(--ink);
  color:var(--paper);

  display:flex;
  align-items:center;
  justify-content:center;

  flex:none;

  cursor:pointer;

  border:none;

  transition:background .3s var(--ease);
}

.icon-box:hover{
  background:#2A2A2A;
}

.burger{
  display:none;
}


/* NAV ROLADA */

header.nav.scrolled{
  background:rgba(255,255,255,0.94);

  backdrop-filter:blur(10px);

  border-bottom:1px solid var(--line);

  padding:14px 24px;
}

header.nav.scrolled nav.links a.navlink{
  color:var(--ink);
}

header.nav.scrolled .icon-box{
  background:var(--ink);
  color:var(--paper);
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;

  min-height:100vh;
  min-height:100dvh;

  display:flex;
  align-items:flex-end;

  color:var(--paper);

  overflow:hidden;

  background:var(--ink);
}

.hero-media{
  position:absolute;
  inset:0;
}

.hero-media img{
  width:100%;
  height:100%;

  object-fit:cover;

  filter:grayscale(0.08);
}

.hero-media::after{
  content:'';

  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(6,6,6,0.28) 0%,
      rgba(6,6,6,0.32) 38%,
      rgba(4,4,4,0.94) 100%
    );
}

.hero-content{
  position:relative;

  z-index:2;

  padding:150px 32px 90px;

  width:100%;
}

.hero-content h1{
  font-size:clamp(32px,5.6vw,72px);

  max-width:960px;

  color:var(--paper);

  font-weight:400;

  line-height:1.06;

  letter-spacing:0.01em;
}

.hero-sub{
  max-width:600px;

  margin-top:26px;

  font-size:16.5px;

  color:#D9D6CE;

  font-weight:300;

  text-transform:none;

  letter-spacing:0;
}

.hero-actions{
  display:flex;

  gap:16px;

  margin-top:40px;

  flex-wrap:wrap;
}

.hero-stat{
  margin-top:60px;

  display:flex;

  gap:48px;

  flex-wrap:wrap;
}

.hero-stat .item{
  display:flex;

  flex-direction:column;

  gap:6px;
}

.hero-stat .num{
  font-family:'Jost',sans-serif;

  font-size:24px;

  color:var(--paper);

  font-weight:400;
}

.hero-stat .lbl{
  font-size:11.5px;

  letter-spacing:0.04em;

  color:#B7B3A8;

  max-width:190px;

  text-transform:none;

  font-weight:300;
}

.hero-dots{
  position:absolute;

  left:32px;
  top:50%;

  translate:0 -50%;

  z-index:2;

  display:flex;

  flex-direction:column;

  gap:14px;
}

.hero-dots span{
  width:8px;
  height:8px;

  border:1px solid var(--line-invert);

  display:block;
}

.hero-dots span.active{
  background:var(--paper);

  border-color:var(--paper);
}

.hero-social{
  position:absolute;

  right:0;
  bottom:0;

  z-index:2;

  display:flex;

  flex-direction:column;
}

.hero-social a{
  width:58px;
  height:58px;

  background:var(--ink);

  border-top:1px solid var(--line-invert);

  display:flex;

  align-items:center;

  justify-content:center;
}

.hero-social a:hover{
  background:#232323;
}

.hero-social svg{
  width:18px;
  height:18px;

  fill:var(--paper);
}

@media (max-width:720px){

  .hero-dots,
  .hero-social{
    display:none;
  }

}


/* =========================================================
   SEÇÕES
   ========================================================= */

section{
  padding:130px 0;

  position:relative;
}

section.tight{
  padding:110px 0;
}

section.on-dark{
  background:var(--ink);

  color:var(--paper);
}

section.on-soft{
  background:var(--paper-soft);
}

.section-head{
  max-width:640px;

  margin-bottom:64px;
}

.section-head h2{
  font-size:clamp(26px,3.4vw,42px);

  font-weight:400;
}

.section-head .lede{
  margin-top:20px;

  font-size:16px;

  color:var(--ink-soft);

  font-weight:300;

  line-height:1.75;

  text-transform:none;

  letter-spacing:0;
}

section.on-dark .section-head .lede{
  color:var(--muted-invert);
}

[data-reveal]{
  opacity:0;

  transform:translateY(28px);

  transition:
    opacity .9s var(--ease),
    transform .9s var(--ease);
}

.in-view[data-reveal]{
  opacity:1;

  transform:translateY(0);
}


/* =========================================================
   SOBRE
   ========================================================= */

.about{
  display:grid;

  grid-template-columns:0.9fr 1.1fr;

  gap:90px;

  align-items:center;
}

.about-media{
  position:relative;
}

.about-media img{
  width:100%;

  filter:grayscale(0.1);
}

.about-text p{
  color:var(--ink-soft);

  font-size:16px;

  font-weight:300;

  text-transform:none;

  letter-spacing:0;
}

.about-text p + p{
  margin-top:18px;
}

.pillars{
  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:44px;

  margin-top:50px;
}

.pillar h3{
  font-size:15.5px;

  font-weight:500;

  margin-bottom:12px;

  letter-spacing:0.1em;
}

.pillar p{
  font-size:13.5px;

  color:var(--ink-soft);

  font-weight:300;

  text-transform:none;

  letter-spacing:0;
}


/* =========================================================
   AMBIENTES
   ========================================================= */

.bento{
  display:grid;

  gap:2px;

  background:var(--ink);

  grid-template-columns:repeat(6,1fr);

  grid-auto-rows:150px;
}

.bento a{
  grid-column:span 3;

  grid-row:span 2;

  position:relative;

  overflow:hidden;

  display:block;

  background:var(--ink);
}

.bento a.big{
  grid-column:span 3;

  grid-row:span 3;
}

.bento a img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .8s var(--ease),
    opacity .5s;

  opacity:0.92;

  filter:grayscale(0.15);
}

.bento a:hover img{
  transform:scale(1.06);

  opacity:1;
}

.bento a::after{
  content:'';

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(6,6,6,0) 40%,
      rgba(4,4,4,.92) 100%
    );
}

.bento .cap{
  position:absolute;

  left:24px;
  right:24px;
  bottom:22px;

  z-index:2;

  color:var(--paper);
}

.bento .cap .n{
  font-size:11px;

  letter-spacing:0.2em;

  color:var(--muted-invert);

  text-transform:uppercase;
}

.bento .cap h3{
  font-family:'Jost',sans-serif;

  font-size:19px;

  font-weight:400;

  margin-top:8px;

  letter-spacing:0.03em;
}


/* =========================================================
   PROCESSO
   ========================================================= */

.proc-grid{
  display:grid;

  grid-template-columns:repeat(4,1fr);

  gap:50px;
}

.proc .step{
  font-family:'Jost',sans-serif;

  font-size:14px;

  color:var(--muted-invert);

  letter-spacing:0.16em;
}

.proc h3{
  font-size:18px;

  margin:18px 0 12px;

  font-weight:400;

  letter-spacing:0.05em;
}

.proc p{
  font-size:13.5px;

  color:var(--muted-invert);

  font-weight:300;

  text-transform:none;

  letter-spacing:0;
}


/* =========================================================
   PORTFÓLIO — 3 NOVOS PROJETOS
   COMPOSIÇÃO EDITORIAL / ARQUITETÔNICA
   ========================================================= */

.portfolio-featured{
  display:grid;

  grid-template-columns:
    minmax(0,1.35fr)
    minmax(0,1fr);

  grid-template-rows:
    repeat(2,260px);

  gap:2px;

  margin-bottom:2px;
}


/* COZINHA | 104
   FOTO PRINCIPAL */

.portfolio-featured .card:nth-child(1){
  grid-column:1;

  grid-row:1 / span 2;
}


/* VARANDA */

.portfolio-featured .card:nth-child(2){
  grid-column:2;

  grid-row:1;
}


/* GUERRA */

.portfolio-featured .card:nth-child(3){
  grid-column:2;

  grid-row:2;
}


.portfolio-featured .card{
  position:relative;

  overflow:hidden;

  cursor:pointer;

  background:var(--ink);

  min-width:0;
}


.portfolio-featured .card img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .8s var(--ease),
    filter .5s var(--ease);

  filter:grayscale(.08);
}


.portfolio-featured .card:hover img{
  transform:scale(1.035);

  filter:grayscale(0);
}


.portfolio-featured .card::after{
  content:'';

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(6,6,6,0) 42%,
      rgba(4,4,4,.84) 100%
    );
}


.portfolio-featured .cap{
  position:absolute;

  left:24px;
  right:24px;
  bottom:22px;

  color:var(--paper);

  z-index:2;
}


.portfolio-featured .cap .tag{
  display:block;

  font-size:10.5px;

  letter-spacing:.02em;

  text-transform:none;

  line-height:1.55;

  color:rgba(255,255,255,.72);
}


.portfolio-featured .cap .ti{
  display:block;

  font-family:'Jost',sans-serif;

  font-size:18px;

  margin-top:5px;

  font-weight:400;

  line-height:1.35;

  letter-spacing:.02em;
}


.portfolio-featured .project-card:focus-visible{
  outline:2px solid var(--ink);

  outline-offset:4px;
}


/* TABLET */

@media(max-width:980px){

  .portfolio-featured{
    grid-template-columns:
      minmax(0,1.15fr)
      minmax(0,1fr);

    grid-template-rows:
      repeat(2,220px);
  }

}


/* CELULAR */

@media(max-width:720px){

  .portfolio-featured{
    grid-template-columns:
      minmax(0,1fr);

    grid-template-rows:none;
  }


  .portfolio-featured .card:nth-child(1),
  .portfolio-featured .card:nth-child(2),
  .portfolio-featured .card:nth-child(3){
    grid-column:auto;

    grid-row:auto;
  }


  .portfolio-featured .card{
    min-height:280px;
  }


  .portfolio-featured .card:first-child{
    min-height:400px;
  }


  .portfolio-featured .card img{
    height:100%;

    min-height:inherit;
  }

}


/* =========================================================
   PORTFÓLIO ANTIGO
   MASONRY EDITORIAL
   ========================================================= */

.masonry{
  column-count:3;

  column-gap:2px;
}


.masonry .card{
  break-inside:avoid;

  margin-bottom:2px;

  position:relative;

  overflow:hidden;

  background:var(--ink);
}


.masonry .card img{
  width:100%;

  display:block;

  object-fit:cover;

  transition:
    transform .8s var(--ease),
    filter .5s var(--ease);

  filter:grayscale(.10);
}


/*
  PROPORÇÕES DIFERENTES

  Isso é proposital.

  Evita o efeito:
  quadrado + quadrado + quadrado
  tudo perfeitamente alinhado.
*/


.masonry .card:nth-child(1) img{
  aspect-ratio:1.42 / 1;
}


.masonry .card:nth-child(2) img{
  aspect-ratio:.88 / 1;
}


.masonry .card:nth-child(3) img{
  aspect-ratio:1.18 / 1;
}


.masonry .card:nth-child(4) img{
  aspect-ratio:1.08 / 1;
}


.masonry .card:nth-child(5) img{
  aspect-ratio:1.34 / 1;
}


.masonry .card:nth-child(6) img{
  aspect-ratio:.94 / 1;
}


.masonry .card:hover img{
  transform:scale(1.035);

  filter:grayscale(0);
}


.masonry .card::after{
  content:'';

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(6,6,6,0) 48%,
      rgba(4,4,4,.86) 100%
    );
}


.masonry .cap{
  position:absolute;

  left:20px;
  right:20px;
  bottom:18px;

  color:var(--paper);

  z-index:2;
}


.masonry .cap .tag{
  font-size:10.5px;

  letter-spacing:.18em;

  text-transform:uppercase;

  color:var(--muted-invert);
}


.masonry .cap .ti{
  font-family:'Jost',sans-serif;

  font-size:16px;

  margin-top:5px;

  font-weight:400;

  letter-spacing:.02em;
}


/* =========================================================
   CTA / FORMULÁRIO
   ========================================================= */

.cta-section{
  background:var(--ink);

  color:var(--paper);
}


.cta-grid{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:80px;

  align-items:start;
}


.cta-grid h2{
  font-size:clamp(26px,3.4vw,40px);

  color:var(--paper);

  font-weight:400;
}


.cta-grid .lede{
  margin-top:20px;

  color:var(--muted-invert);

  font-size:16px;

  font-weight:300;

  max-width:440px;

  text-transform:none;

  letter-spacing:0;
}


.nav-hint{
  display:flex;

  justify-content:space-between;

  align-items:center;

  margin-bottom:56px;

  flex-wrap:wrap;

  gap:14px;
}


.cta-contact{
  margin-top:42px;

  display:flex;

  flex-direction:column;

  gap:24px;
}


.cta-contact .row{
  display:flex;

  gap:14px;

  align-items:flex-start;

  font-size:14.5px;

  color:#E5E2D8;

  font-weight:300;
}


.cta-contact .row b{
  color:var(--paper);

  font-weight:500;

  display:block;

  margin-bottom:4px;

  font-family:'Jost';

  font-size:11px;

  letter-spacing:.18em;

  text-transform:uppercase;
}


form.lead{
  background:var(--paper);

  color:var(--ink);

  padding:44px;
}


form.lead .frow{
  margin-bottom:22px;
}


form.lead label{
  display:block;

  font-size:11px;

  letter-spacing:0.16em;

  text-transform:uppercase;

  color:var(--ink-soft);

  margin-bottom:10px;
}


form.lead input,
form.lead select,
form.lead textarea{
  width:100%;

  border:none;

  border-bottom:1px solid var(--line);

  background:transparent;

  padding:10px 2px;

  font-family:'Jost';

  font-weight:300;

  font-size:15px;

  color:var(--ink);
}


form.lead input:focus,
form.lead select:focus,
form.lead textarea:focus{
  outline:none;

  border-bottom-color:var(--ink);
}


form.lead textarea{
  resize:vertical;

  min-height:70px;
}


form.lead .btn{
  width:100%;

  justify-content:center;

  margin-top:8px;
}


form.lead .note{
  font-size:11.5px;

  color:var(--ink-soft);

  margin-top:16px;

  text-align:center;

  letter-spacing:0.02em;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer{
  background:var(--paper);

  color:var(--ink);

  padding:90px 0 26px;

  border-top:1px solid var(--line);
}


.footer-top{
  display:grid;

  grid-template-columns:
    1.3fr 1fr 1fr 1.2fr;

  gap:50px;

  padding-bottom:56px;
}


.footer-top p.desc{
  margin-top:20px;

  font-size:14px;

  color:var(--ink-soft);

  font-weight:300;

  max-width:260px;

  line-height:1.75;

  text-transform:none;

  letter-spacing:0;
}


.fcol h4{
  font-size:11px;

  letter-spacing:0.18em;

  text-transform:uppercase;

  color:var(--ink-soft);

  margin-bottom:20px;
}


.fcol a,
.fcol p{
  display:block;

  font-size:14px;

  color:var(--ink);

  font-weight:300;

  margin-bottom:14px;

  text-transform:none;

  letter-spacing:0;
}


.fcol a:hover{
  color:var(--ink-soft);
}


.map-embed{
  border:0;

  width:100%;

  height:150px;

  filter:
    grayscale(1)
    contrast(1.05);
}


.footer-bottom{
  display:flex;

  justify-content:space-between;

  align-items:center;

  padding-top:26px;

  font-size:11.5px;

  color:var(--ink-soft);

  flex-wrap:wrap;

  gap:10px;

  letter-spacing:0.03em;
}


/* =========================================================
   WHATSAPP FLUTUANTE
   ========================================================= */

.wa-float{
  position:fixed;

  right:26px;
  bottom:26px;

  z-index:200;

  width:58px;
  height:58px;

  background:var(--ink);

  display:flex;

  align-items:center;

  justify-content:center;

  transition:
    transform .3s var(--ease);
}


.wa-float:hover{
  transform:scale(1.08);
}


.wa-float svg{
  width:24px;

  height:24px;
}


/* =========================================================
   RESPONSIVO
   ========================================================= */

@media (max-width:980px){

  .about{
    grid-template-columns:1fr;

    gap:40px;
  }


  .about-media .frame{
    display:none;
  }


  .bento{
    grid-template-columns:
      repeat(2,1fr);
  }


  .bento a,
  .bento a.big{
    grid-column:span 2;

    grid-row:span 2;
  }


  .proc-grid{
    grid-template-columns:
      1fr 1fr;

    row-gap:40px;
  }


  .masonry{
    column-count:2;
  }


  .cta-grid{
    grid-template-columns:1fr;
  }


  .footer-top{
    grid-template-columns:
      1fr 1fr;

    row-gap:40px;
  }

}


@media (max-width:720px){

  .wrap{
    padding:0 20px;
  }


  header.nav{
    padding:14px;
  }


  .logo-box{
    padding:9px 14px;
  }


  .logo-box img{
    height:20px;
  }


  .icon-box{
    width:46px;

    height:46px;
  }


  nav.links{
    position:fixed;

    top:0;
    right:0;

    height:100vh;
    height:100dvh;

    width:80vw;

    max-width:320px;

    background:var(--ink);

    flex-direction:column;

    justify-content:center;

    align-items:flex-start;

    padding:0 36px;

    gap:30px;

    transform:
      translateX(100%);

    transition:
      transform .45s var(--ease);
  }


  nav.links.open{
    transform:
      translateX(0);
  }


  nav.links a.navlink{
    color:var(--paper) !important;

    font-size:18px;
  }


  .burger{
    display:flex;
  }


  .nav-right .icon-box.search-only{
    display:none;
  }


  .hero-content{
    padding-top:110px;

    padding-bottom:50px;
  }


  .hero-content h1{
    font-size:
      clamp(30px,9vw,44px);

    line-height:1.14;
  }


  .hero-sub{
    font-size:15px;

    margin-top:20px;
  }


  .hero-actions{
    gap:12px;
  }


  .hero-actions .btn{
    flex:1 1 auto;

    justify-content:center;

    padding:15px 18px;
  }


  .hero-stat{
    gap:24px;

    margin-top:44px;
  }


  .hero-stat .num{
    font-size:21px;
  }


  section{
    padding:64px 0;
  }


  section.tight{
    padding:56px 0;
  }


  .section-head{
    margin-bottom:44px;
  }


  .section-head h2{
    font-size:26px;
  }


  .about{
    gap:32px;
  }


  .pillars{
    grid-template-columns:1fr;

    gap:30px;

    margin-top:38px;
  }


  .bento{
    grid-template-columns:1fr;

    grid-auto-rows:200px;
  }


  .bento a,
  .bento a.big{
    grid-column:span 1;

    grid-row:span 1;
  }


  .proc-grid{
    grid-template-columns:1fr;

    gap:32px;
  }


  .masonry{
    column-count:1;
  }


  .masonry .card img{
    max-height:70vh;

    object-fit:cover;
  }


  .nav-hint{
    margin-bottom:36px;
  }


  .cta-grid{
    gap:44px;
  }


  form.lead{
    padding:26px;
  }


  .footer-top{
    grid-template-columns:1fr;

    gap:38px;
  }


  .wa-float{
    width:52px;
    height:52px;

    right:18px;
    bottom:18px;
  }

}


@media (max-width:380px){

  .hero-content h1{
    font-size:28px;
  }


  .hero-stat{
    flex-direction:column;

    gap:20px;
  }

}


/* =========================================================
   TIPOGRAFIA COMPARTILHADA
   ========================================================= */

h2,
.section-head h2,
.cta-grid h2{
  font-size:var(--font-title);

  line-height:1.2;

  font-weight:400;

  letter-spacing:.02em;
}


.section-head .lede,
.about-text p,
.cta-grid .lede{
  font-size:var(--font-body);

  line-height:1.75;
}


.eyebrow{
  font-size:var(--font-label);
}


.pillar h3,
.proc h3,
.bento .cap h3,
.masonry .cap .ti,
.portfolio-featured .cap .ti{
  font-size:var(--font-card);

  line-height:1.35;

  letter-spacing:.02em;

  font-weight:400;
}


.pillar p,
.proc p{
  font-size:var(--font-small);

  line-height:1.7;
}


.pillar p{
  font-size:var(--font-small);
}


.about-intro{
  margin-top:26px;
}


.section-head.wide{
  max-width:900px;

  margin-bottom:0;
}


.bento{
  grid-template-columns:
    repeat(3,minmax(0,1fr));

  grid-auto-rows:330px;
}


.bento a,
.bento a.big{
  grid-column:auto;

  grid-row:auto;
}


.masonry .cap .tag{
  display:block;

  font-size:11px;

  letter-spacing:.02em;

  text-transform:none;

  line-height:1.6;
}


.masonry .cap .ti{
  display:block;
}


.portfolio-end{
  margin-top:36px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:32px;
}


.portfolio-end p{
  max-width:720px;

  font-size:var(--font-body);

  color:var(--ink-soft);
}


.partnership-button{
  margin-top:32px;
}


.partnership-quote{
  font-size:24px;

  line-height:1.5;

  margin-top:44px;

  max-width:650px;
}


form.lead .btn{
  white-space:normal;

  line-height:1.6;

  padding-inline:18px;
}


section[id],
footer[id]{
  scroll-margin-top:100px;
}


.nav-right{
  position:relative;

  z-index:2;
}


@media(max-width:980px){

  .bento{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .portfolio-end{
    align-items:flex-start;

    flex-direction:column;
  }

}


@media(max-width:720px){

  :root{
    --font-title:28px;

    --font-body:15px;
  }


  .hero-content{
    padding-inline:20px;
  }


  .bento{
    grid-template-columns:
      minmax(0,1fr);

    grid-auto-rows:280px;
  }


  .hero-stat .lbl{
    font-size:12px;
  }


  .partnership-quote{
    font-size:21px;
  }

}


@media(prefers-reduced-motion:reduce){

  html{
    scroll-behavior:auto;
  }


  [data-reveal]{
    transition:none;

    transform:none;
  }


  .bento a img,
  .masonry .card img,
  .portfolio-featured .card img{
    transition:none;
  }

}


/* =========================================================
   PORTFÓLIO INTERATIVO / MODAL
   ========================================================= */

.project-card{
  cursor:pointer;
}


.project-card:focus-visible{
  outline:2px solid var(--ink);

  outline-offset:4px;
}


body.project-modal-open{
  overflow:hidden;
}


.project-modal{
  position:fixed;

  inset:0;

  z-index:1000;

  display:none;

  align-items:center;

  justify-content:center;

  padding:24px;
}


.project-modal.is-open{
  display:flex;
}


.project-modal__backdrop{
  position:absolute;

  inset:0;

  background:
    rgba(8,8,8,.78);

  backdrop-filter:
    blur(8px);
}


.project-modal__dialog{
  position:relative;

  z-index:1;

  width:min(1180px,100%);

  max-height:
    calc(100vh - 48px);

  display:grid;

  grid-template-columns:
    minmax(0,1.45fr)
    minmax(320px,.75fr);

  background:
    var(--paper-soft);

  color:
    var(--ink);

  overflow:hidden;

  box-shadow:
    0 28px 80px rgba(0,0,0,.28);
}


.project-modal__media{
  position:relative;

  min-height:620px;

  background:#111;

  overflow:hidden;
}


.project-modal__image-wrap{
  width:100%;

  height:100%;

  min-height:inherit;
}


.project-modal__image-wrap img{
  width:100%;

  height:100%;

  min-height:inherit;

  object-fit:cover;

  user-select:none;

  -webkit-user-drag:none;
}


.project-modal__content{
  padding:
    clamp(32px,5vw,64px);

  display:flex;

  flex-direction:column;

  justify-content:center;

  overflow-y:auto;
}


.project-modal__content h2{
  margin:
    12px 0 24px;

  font-size:
    clamp(28px,3vw,48px);

  line-height:1.05;

  font-weight:400;
}


.project-modal__credits{
  padding:
    18px 0;

  margin-bottom:22px;

  border-top:
    1px solid rgba(21,21,21,.14);

  border-bottom:
    1px solid rgba(21,21,21,.14);
}


.project-modal__credits p{
  margin:5px 0;

  font-size:13px;

  line-height:1.6;
}


.project-modal__description{
  margin:0;

  font-size:15px;

  line-height:1.8;

  color:
    var(--ink-soft);
}


.project-modal__close{
  position:absolute;

  top:16px;

  right:16px;

  z-index:5;

  width:44px;

  height:44px;

  border:0;

  border-radius:50%;

  display:grid;

  place-items:center;

  background:
    rgba(255,255,255,.92);

  color:#111;

  cursor:pointer;

  font-size:31px;

  line-height:1;

  transition:
    transform .2s ease,
    background .2s ease;
}


.project-modal__close:hover{
  transform:
    rotate(4deg)
    scale(1.04);

  background:#fff;
}


.project-modal__nav{
  position:absolute;

  top:50%;

  z-index:4;

  transform:
    translateY(-50%);

  width:48px;

  height:48px;

  border:0;

  border-radius:50%;

  display:grid;

  place-items:center;

  background:
    rgba(255,255,255,.88);

  color:#111;

  cursor:pointer;

  font-size:34px;

  line-height:1;

  transition:
    background .2s ease,
    transform .2s ease;
}


.project-modal__nav:hover{
  background:#fff;

  transform:
    translateY(-50%)
    scale(1.05);
}


.project-modal__nav--prev{
  left:18px;
}


.project-modal__nav--next{
  right:18px;
}


.project-modal__nav[hidden]{
  display:none;
}


.project-modal__counter{
  position:absolute;

  left:22px;

  bottom:20px;

  z-index:4;

  padding:
    8px 11px;

  background:
    rgba(12,12,12,.68);

  color:#fff;

  font-size:11px;

  letter-spacing:.14em;
}


.project-modal__counter:empty{
  display:none;
}


.project-modal__dots{
  position:absolute;

  right:22px;

  bottom:23px;

  z-index:4;

  display:flex;

  gap:7px;
}


.project-modal__dot{
  width:8px;

  height:8px;

  padding:0;

  border:
    1px solid #fff;

  border-radius:50%;

  background:
    transparent;

  cursor:pointer;
}


.project-modal__dot.is-active{
  background:#fff;
}


.project-modal__dots:empty{
  display:none;
}


/* MODAL TABLET */

@media(max-width:900px){

  .project-modal{
    padding:12px;
  }


  .project-modal__dialog{
    max-height:
      calc(100vh - 24px);

    grid-template-columns:
      1fr;

    overflow-y:auto;
  }


  .project-modal__media{
    min-height:0;

    height:
      min(58vh,540px);
  }


  .project-modal__image-wrap{
    min-height:0;

    height:100%;
  }


  .project-modal__image-wrap img{
    min-height:0;
  }


  .project-modal__content{
    padding:
      30px 24px 36px;

    overflow:visible;
  }

}


/* MODAL CELULAR */

@media(max-width:560px){

  .project-modal{
    padding:0;
  }


  .project-modal__dialog{
    width:100%;

    max-height:100vh;

    min-height:100vh;
  }


  .project-modal__media{
    height:52vh;
  }


  .project-modal__nav{
    width:42px;

    height:42px;
  }


  .project-modal__nav--prev{
    left:10px;
  }


  .project-modal__nav--next{
    right:10px;
  }


  .project-modal__close{
    top:10px;

    right:10px;
  }

}