/* =======

   ABOUT

   ======= */



.about {

  background: var(--lightgray);

  padding: var(--space-50-130) 0 var(--space-70-200);

  position: relative;

  z-index: 30;

}



.about-container {

  padding: 0 var(--space-20-40);

}



.about h3,

.about p {

  text-align: center;

  position: relative;

  z-index: 30;

}



.about h3 {

  font-size: var(--fs-about-title);

  font-weight: 500;

  line-height: 150%;

  letter-spacing: 0.2em;

  margin: 0 0 5rem 0;

}



.about p {

  font-size: clamp(1.6rem, calc((15px + (24 - 15) * var(--vw-desktop-range)) * 1.1), 2.6rem);

  line-height: clamp(2.6rem, calc(26px + (50 - 26) * var(--vw-desktop-range)), 5rem);

}



.about .cards {

  display: flex;

  gap: var(--gap-cards);

  justify-content: center;

  margin: clamp(6rem, calc(60px + (120 - 60) * var(--vw-desktop-range)), 12rem) 0 0 0;

  position: relative;

  z-index: 30;

}



.about .card {

  background: var(--white);

  border-top: var(--blue) .3rem solid;

  display: flex;

  align-items: center;

  flex-direction: column;

  max-width: 48rem;

  width: 100%;

  position: relative;

  transition: .3s !important;

}



.about .card:hover {

  /* background: var(--lightblue); */
  background: #755448;
  transition: .3s;

}



.about .card:hover .text h4 {

  color: var(--white);

}



.about .card:hover .text h5 {

  color: var(--white);

}



.about .card:hover::after {

  transform: translate(-50%, -1.5rem);

}



.about .card::after {

  content: "";

  background: url(../img/common/arw_black_down.svg) no-repeat;

  width: 4rem;

  height: 4rem;

  position: absolute;

  z-index: 1;

  inset: 100% auto auto 50%;

  transform: translate(-50%, -50%);

  transition: .6s;

}



.about .card figure {

  width: clamp(14rem, calc(140px + (240 - 140) * var(--vw-desktop-range)), 24rem);

  height: clamp(14rem, calc(140px + (240 - 140) * var(--vw-desktop-range)), 24rem);

  margin: clamp(3rem, calc(30px + (60 - 30) * var(--vw-desktop-range)), 6rem) 0 0 0;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* .about .card img {

  width: 100%;

  height: auto;

} */



.about .card .text h4 {

  line-height: 150%;

  font-size: clamp(1.8rem, calc(18px + (28 - 18) * var(--vw-desktop-range)), 2.8rem);

  letter-spacing: 0;

  margin: clamp(2rem, calc(20px + (36 - 20) * var(--vw-desktop-range)), 3.6rem) 0 0 0;

  text-align: center;

  transition: .4s;

}



.about .card .text h5 {

  color: var(--blue);

  font-size: clamp(1.2rem, calc(12px + (16 - 12) * var(--vw-desktop-range)), 1.6rem);

  letter-spacing: 0.35rem;

  line-height: 2.1rem;

  text-align: center;

  font-weight: 500;

  margin: 1.2rem 0 clamp(4rem, calc(40px + (75 - 40) * var(--vw-desktop-range)), 7.5rem) 0;

  transition: .5s;

}



.about>svg {

  position: absolute;

  z-index: 15;

  width: clamp(15rem, calc(150px + (300 - 150) * var(--vw-desktop-range)), 30rem);

  inset: auto auto 0 0;

  display: block;

}



.svg-about {

  height: calc(1009 * 100vw / 1920);

  width: calc(223 * 100vw / 1920);

  position: absolute;

  left: 0;

  bottom: 0;

  z-index: 10;

}



.svg-about img {

  width: 100%;

  height: auto;

}



/* ==============

   REAL ESTATE

   ============== */



.real-estate {

  display: flex;

  position: relative;

}

.real-estate#interior-cordinate {
  background: url(../img/top/img_06.webp) no-repeat;
  background-size: cover;
  background-position: center;
  padding: clamp(4rem, calc(40px + (110 - 40) * var(--vw-desktop-range)), 11rem) 0 clamp(7rem, calc(70px + (110 - 70) * var(--vw-desktop-range)), 11rem);
}

.real-estate#interior-cordinate .interior-cordinate-container {
  padding-right: clamp(2rem, calc(20px + (80 - 20) * var(--vw-desktop-range)), 8rem);
  margin-left: auto;
}

.real-estate .right {

  display: flex;

  align-items: center;

  flex-direction: column;

  margin: auto;

  position: relative;

  width: 100%;

  z-index: 30;

}



.real-estate .left {
  position: relative;
  display: flex;
  width: 100%;
  /* width: 60%; */
  z-index: 20;
}



.real-estate .left figure {

  display: flex;

}



.real-estate img {

  width: 100%;

  height: auto;

}



.real-estate .bg-text-real-estate {

  position: absolute;

  z-index: 25;

  inset: -1.1rem 0 auto auto;

  height: calc(206 * 100vw / 1920);

  width: calc(1920 * 100vw / 1920);

}



.real-estate .svg-top {

  position: absolute;

  z-index: 25;

  inset: -11px auto auto 0;

  height: calc(233 * 100vw / 1920);

  width: calc(1340 * 100vw / 1920);

}



.real-estate .svg-bottom {

  position: absolute;

  /* z-index: 25; */

  inset: auto 0 -11px auto;

  height: calc(233 * 100vw / 1920);

  width: calc(1676 * 100vw / 1920);

}



.real-estate .right figure {

  max-width: clamp(12rem, calc(120px + (200 - 120) * var(--vw-desktop-range)), 20rem);

}





/* Typo blocs communs */



.home-staging p,

.real-estate p {

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

  line-height: clamp(4rem, calc(40px + (50 - 40) * var(--vw-desktop-range)), 5rem);

  letter-spacing: clamp(0rem, calc(0px + (10 - 0) * var(--vw-desktop-range)), 0.1rem);

  font-weight: 700;

  text-align: center;

  margin-top: clamp(2rem, calc(20px + (40 - 20) * var(--vw-desktop-range)), 4rem);

}



.home-staging p:has(span.bg),

.real-estate p:has(span.bg) {

  font-size: clamp(2rem, calc(20px + (40 - 20) * var(--vw-desktop-range)), 4rem);

  line-height: 6rem;

  letter-spacing: 0;

  font-weight: 500;

  margin: 6rem 0 0;

}

.home-staging p span.bg,

.real-estate p span.bg {

  color: var(--white);

  background: var(--black);

}

.home-staging p:has(span.blue),

.real-estate p:has(span.blue) {

  font-size: clamp(2rem, calc(20px + (40 - 20) * var(--vw-desktop-range)), 4rem);

  line-height: 6rem;

  letter-spacing: 0;

  font-weight: bold;

  margin: 6rem 0 0;

}


.home-staging p span.blue,

.real-estate p span.blue {

  color: var(--blue);

  font-size: clamp(2.4rem, calc(24px + (50 - 24) * var(--vw-desktop-range)), 5rem);


}




.home-staging p.subttl,

.real-estate p.subttl {

  font-size: var(--fs-subttl);

  line-height: 150%;

  letter-spacing: 0;

  margin-top: 1rem;

}



/* ===============

   HOME STAGING

   =============== */



.home-staging {

  background: url(../img/top/img_05.png) no-repeat;

  background-size: cover;

  padding:

    clamp(4rem, calc(40px + (110 - 40) * var(--vw-desktop-range)), 11rem) 0 clamp(7rem, calc(70px + (110 - 70) * var(--vw-desktop-range)), 11rem);

  position: relative;

  z-index: 26;
  overflow: hidden;

}



.home-staging-container {

  padding-left: clamp(2rem, calc(20px + (80 - 20) * var(--vw-desktop-range)), 8rem);

}



.home-staging .left {

  background: rgba(255, 255, 255, 0.8);

  max-width: clamp(46rem, calc(460px + (800 - 460) * var(--vw-desktop-range)), 80rem);

  width: 100%;

  text-align: center;

  padding: 8rem 0;

  z-index: 16;

  position: relative;

}

#interior-cordinate .right {
  background: rgba(255, 255, 255, 0.8);
  max-width: clamp(46rem, calc(460px + (800 - 460) * var(--vw-desktop-range)), 80rem);
  width: 100%;
  text-align: center;
  padding: 8rem 5rem;
  z-index: 16;
  position: relative;
}

.real-estate#interior-cordinate .right a.btn {
  margin-bottom: 0;
  width: auto;
  line-height: 1;
  padding-inline: clamp(5rem, calc(50px + (60 - 50) * var(--vw-desktop-range)), 6rem);
}

@media screen and (max-width: 1025px) {
  .real-estate#interior-cordinate .right a.btn {
    width: 100%;
    max-width: 300px;
    padding-inline: clamp(1.2rem, calc(12px + (20 - 12) * var(--vw-desktop-range)), 2rem);
  }

  .real-estate#interior-cordinate .right a.btn svg {
    right: 0.5rem;
  }
}


.home-staging figure {

  max-width: 20rem;

  width: 100%;

  margin: auto;

}



.home-staging .svg-home {

  position: absolute;

  z-index: 15;

  /* inset: auto 0 calc(260 * 100vw / 1920) auto; */
  inset: 0 0 0 auto;

  /* height: calc(866 * 100vw / 1920);

  width: calc(210 * 100vw / 1920); */
  width: calc(600 * 100vw / 1920);
  height: calc(120 * 100vw / 1920);
  max-width: 750px;

}



.home-staging .svg-staging {

  position: absolute;

  z-index: 15;

  /* inset: auto 0 1px auto; */
  inset: auto -10px 4px auto;

  /* height: calc(1300 * 100vw / 1920);

  width: calc(270 * 100vw / 1920); */
  height: calc(850 * 100vw / 1920);
  width: calc(150 * 100vw / 1920);
  max-width: 188px;
  max-height: 1062px;

}



.home-staging .svg-home img,

.home-staging .svg-staging img {

  width: 100%;

  height: auto;

}



/* =========

   CONCEPT

   ========= */



.concept {

  position: relative;

  z-index: 5;

  overflow: hidden;

  height: 100%;

}



.concept::before {

  content: "";

  position: absolute;

  right: 0;

  top: 0;

  max-width: clamp(90rem, calc(900px + (1496 - 900) * var(--vw-desktop-range)), 149.6rem);

  width: 100%;

  height: clamp(64rem, calc(640px + (1120 - 640) * var(--vw-desktop-range)), 112rem);

  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.75) 0 100%), url(../img/top/img_07.webp);

  background-repeat: no-repeat;

  background-size: cover;

  z-index: 10;

  height: 100%;

}



.concept::after {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  background: url(../img/top/CONCEPT.svg) no-repeat;

  background-size: contain;

  width: calc(821 * 100vw / 1920);

  height: 100%;

  z-index: 15;

}



.concept .wrapper {

  display: flex;

}



.concept .left {

  width: calc(720 * 100vw / 1920);

  position: relative;

  z-index: 50;

}



.concept .left figure {

  height: 100%;

}



.concept .left figure img {

  height: 100%;

  width: 100%;

  object-fit: contain;

}



.concept .right {

  position: relative;

  z-index: 15;

  left: 50%;

  /* padding: clamp(6rem, calc(60px + (110 - 60) * var(--vw-desktop-range)), 11rem) 0; */
  padding: clamp(3rem, calc(30px + (60 - 30) * var(--vw-desktop-range)), 6rem) 0;
}



.concept h5 {

  line-height: clamp(3.6rem, calc(36px + (60 - 36) * var(--vw-desktop-range)), 6rem);

  font-size: clamp(2.4rem, calc(24px + (40 - 24) * var(--vw-desktop-range)), 4rem);

  font-weight: 500;

  letter-spacing: 0;

}



.concept p {

  font-size: clamp(1.6rem, calc(16px + (24 - 16) * var(--vw-desktop-range)), 2.4rem);

  margin: clamp(2.8rem, calc(28px + (60 - 28) * var(--vw-desktop-range)), 6rem) 0 0 0;

  line-height: clamp(3.6rem, calc(36px + (50 - 36) * var(--vw-desktop-range)), 5rem);

  letter-spacing: clamp(0.1rem, calc(1px + (3 - 1) * var(--vw-desktop-range)), 0.3rem);

}



.concept .with-bg {

  font-size: clamp(2.2rem, calc(22px + (32 - 22) * var(--vw-desktop-range)), 3.2rem);

  line-height: clamp(3.6rem, calc(36px + (60 - 36) * var(--vw-desktop-range)), 6rem);

  letter-spacing: clamp(0.2rem, calc(2px + (10 - 2) * var(--vw-desktop-range)), 1rem);

  font-weight: 500;

  margin: clamp(3.2rem, calc(32px + (60 - 32) * var(--vw-desktop-range)), 6rem) 0 0;

}



.concept .with-bg .bg {

  color: var(--white);

  background: var(--black);

}



.concept .with-bg .blue {

  color: var(--blue);

  font-size: clamp(2.4rem, calc(24px + (50 - 24) * var(--vw-desktop-range)), 5rem);

  line-height: 6rem;

  letter-spacing: 0;

  font-weight: bold;

}



/* =====

   NEWS

   ===== */



.news {

  padding:

    clamp(10rem, calc(100px + (200 - 100) * var(--vw-desktop-range)), 20rem) 0 clamp(8rem, calc(80px + (150 - 80) * var(--vw-desktop-range)), 15rem);

}



.news h3,

.works h3 {

  font-size: var(--fs-section-title);

  line-height: clamp(3.4rem, calc(34px + (61 - 34) * var(--vw-desktop-range)), 6.1rem);

  font-weight: 300;

  text-align: center;

  color: var(--blue);

}



.news p,

.works p {

  font-size: clamp(1.6rem, calc(16px + (24 - 16) * var(--vw-desktop-range)), 2.4rem);

  line-height: clamp(3.2rem, calc(32px + (50 - 32) * var(--vw-desktop-range)), 5rem);

  letter-spacing: normal;

  margin:

    clamp(1.6rem, calc(16px + (24 - 16) * var(--vw-desktop-range)), 2.4rem) 0 clamp(3.2rem, calc(32px + (60 - 32) * var(--vw-desktop-range)), 6rem);

  text-align: center;

}



.news a:first-of-type {

  border-top: 1px solid var(--black);

}



.news a {

  padding: clamp(2rem, calc(20px + (40 - 20) * var(--vw-desktop-range)), 4rem);

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

  width: 100%;

  display: flex;

  transition: .3s;

  position: relative;

  z-index: 10;

}



.news a>* {

  position: relative;

  z-index: 20;

}



.news a::after {

  content: "";

  position: absolute;

  inset: 0 auto auto 0;

  height: 100%;

  width: 0;

  z-index: 15;

  background: var(--lightblue);

  transition: .3s;

}



.news a:hover {

  color: var(--white);

}



.news a:hover::after {

  width: 100%;

}



.news a time {

  font-weight: 400;

  font-size: clamp(1.8rem, calc(18px + (24 - 18) * var(--vw-desktop-range)), 2.4rem);

  line-height: clamp(3.2rem, calc(32px + (50 - 32) * var(--vw-desktop-range)), 5rem);

}



.news dl {

  display: flex;

  width: 100%;

  gap: clamp(3.2rem, calc(32px + (95 - 32) * var(--vw-desktop-range)), 9.5rem);

}



.news dd {

  line-height: clamp(3.2rem, calc(32px + (50 - 32) * var(--vw-desktop-range)), 5rem);

  font-size: clamp(1.8rem, calc(18px + (24 - 18) * var(--vw-desktop-range)), 2.4rem);

}



/* ======

   WORKS

   ====== */



.works {

  background: var(--lightgray);

  padding:

    clamp(10rem, calc(100px + (190 - 100) * var(--vw-desktop-range)), 19rem) 0 clamp(8rem, calc(80px + (150 - 80) * var(--vw-desktop-range)), 15rem);

}



.works .container {

  margin: auto;

  width: min(100%, var(--ft-container));

}



.works h3 {

  color: var(--black);

}



.masonry {

  display: grid;

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

  gap: var(--gap-masonry);

  grid-auto-flow: dense;

  max-width: clamp(100rem, calc(1000px + (1440 - 1000) * var(--vw-desktop-range)), 144rem);

  width: 100%;

  margin: auto;

}



.masonry .item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  aspect-ratio: 1 / 1;

}



.masonry .item01 {

  grid-column: span 2;

  grid-row: span 2;

}



.masonry .item04 {

  grid-column: 3 / span 2;

  grid-row: 2 / span 2;

}



.masonry .item {

  break-inside: avoid;

  margin-bottom: clamp(.8rem, calc(8px + (15 - 8) * var(--vw-desktop-range)), 1.5rem);

}



.masonry a {

  position: relative;

  z-index: 10;

  display: block;
  height: 100%;
  width: 100%;

}



.masonry a::after {

  content: "";

  height: 100%;

  width: 100%;

  background-color: var(--gray);

  opacity: .75;

  position: absolute;

  inset: 0 auto auto 0;

  transition: .3s;

  scale: 0;

}

@media screen and (min-width: 1026px) {

  .masonry a:hover::after {

    height: 100%;

    width: 100%;

    z-index: 15;

    scale: 1;

  }
}



.masonry span {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%) scale(0);

  width: max-content;

  display: flex;

  flex-direction: column;

  font-size: 2.4rem;

  z-index: 16;

  transition: .6s;

  color: var(--black);

  width: calc(100% - 2rem);

  text-align: center;
  align-items: center;

}

@media screen and (min-width: 1026px) {

  .masonry a:hover span {

    transform: translate(-50%, -50%) scale(1);

  }
}


.works .two-btn {
  display: flex;
  gap: 2rem;
  max-width: fit-content;
  margin: auto;
}


@media screen and (max-width: 1025px) {

  .about .svg-about {

    position: absolute;

    z-index: 15;

    inset: calc(80 * var(--vw390)) auto auto 0;

    height: calc(505 * var(--vw390));

    width: calc(105 * var(--vw390));

  }



  .about h3 {

    font-size: clamp(2.16rem, calc(24 * var(--vw390)), 3.6rem);

    letter-spacing: 1rem;

    margin: 0 auto 2rem;

  }

  .about p {

    font-size: clamp(1.35rem, calc(15 * var(--vw390)), 2.25rem);

    line-height: clamp(2.7rem, calc(30 * var(--vw390)), 4.5rem);

    letter-spacing: 0;

  }



  .about .cards {

    margin: 5.5rem 0 0 0;

  }

  .about .card {

    max-width: 100%;

  }

  .about .card:hover::after {

    transform: translate(-50%, 0);

  }



  .real-estate {

    flex-direction: column;

    padding: 0 0 7rem 0;

  }

  .real-estate .right figure {

    margin: 4rem auto 0;

    max-width: 10rem;

    position: relative;

    z-index: 20;

  }

  .real-estate .left figure {

    height: calc(320 * var(--vw390));

    width: 100%;

  }

  .real-estate .left figure img {

    object-fit: cover;

  }

  .real-estate .svg-real {

    display: block;

    position: absolute;

    z-index: 15;

    inset: auto auto 5px 0;

    height: calc(70 * var(--vw390));

    width: calc(252 * var(--vw390));

  }

  .real-estate .svg-estate {

    position: absolute;

    display: block;

    z-index: 15;

    inset: -4px 0 auto auto;

    height: calc(70 * var(--vw390));

    width: calc(338 * var(--vw390));

  }

  .real-estate .right {
    padding: 0 2rem;
  }

  .real-estate .right figure img {
    width: 10rem;
  }



  .home-staging {

    position: relative;

    z-index: 10;

    padding: 6rem 0 15.5rem;

    background-position: 35% 50%;

  }

  .home-staging .svg-home img,

  .home-staging .svg-staging img {

    width: 100%;

    height: auto;

  }

  .home-staging .left {

    position: relative;

    z-index: 16;

    padding: 4rem 1.5rem;

  }

  .home-staging figure {
    width: 15rem;
  }

  .home-staging figure img {
    width: 100%;
  }

  .real-estate#interior-cordinate {
    padding: 6rem 0 15.5rem;
  }

  #interior-cordinate .right {
    position: relative;
    z-index: 16;
    padding: 4rem 1.5rem;
    margin-top: 11rem;
  }

  .real-estate#interior-cordinate .interior-cordinate-container {
    padding: 0 2rem;
    margin: 0;
  }

  .home-staging .left svg:first-child {

    height: 10rem;

    width: 10rem;

  }

  .home-staging-container {

    padding: 0 2rem;

  }

  .home-staging .svg-home {

    position: absolute;

    z-index: 15;

    inset: auto 0 5vw auto;

    height: calc(273 * var(--vw390));

    width: calc(60 * var(--vw390));

  }

  .home-staging .svg-staging {

    position: absolute;

    z-index: 15;

    inset: auto 0 1px auto;

    height: calc(60 * var(--vw390));

    width: calc(353 * var(--vw390));

  }

  .real-estate .svg-top {

    inset: -2px auto auto 0;

    height: calc(42 * var(--vw390));

    width: calc(273 * var(--vw390));

  }

  .real-estate .svg-bottom {

    inset: calc(-50 * var(--vw390)) 0 0 auto;

    height: calc(42 * var(--vw390));

    width: calc(342 * var(--vw390));

  }



  .home-staging p.subttl,

  .real-estate p.subttl {

    font-size: clamp(1.62rem, calc(18 * var(--vw390)), 2.7rem);

    line-height: clamp(2.43rem, calc(27 * var(--vw390)), 4.05rem);

  }



  .home-staging p:has(span.bg),

  .real-estate p:has(span.bg) {

    font-size: clamp(1.8rem, calc(20 * var(--vw390)), 3rem);

    line-height: clamp(2.7rem, calc(30 * var(--vw390)), 4.5rem);

  }

  .real-estate p:has(span.bg) {

    margin: 3rem 0 0;

  }

  .home-staging p:has(span.blue),

  .real-estate p:has(span.blue) {

    font-size: clamp(1.8rem, calc(20 * var(--vw390)), 3rem);

    line-height: clamp(2.7rem, calc(30 * var(--vw390)), 4.5rem);

  }

  .home-staging p:has(span.blue),
  .real-estate p:has(span.blue) {

    margin: 3rem 0 0;

  }

  .home-staging p span.blue,

  .real-estate p span.blue {


    font-size: clamp(2rem, calc(20 * var(--vw390)), 3.2rem);


  }



  .home-staging p,

  .real-estate p {

    font-size: clamp(1.35rem, calc(15 * var(--vw390)), 2.25rem);

    line-height: clamp(2.7rem, calc(30 * var(--vw390)), 4.5rem);

    margin: 3rem 0 0;

  }

  .home-staging .left figure.inview img {

    width: 10rem;

  }



  nav.desktop-links {

    display: none;

  }

  .next-logo {

    display: none;

  }

  .about .cards {

    flex-direction: column;

    gap: 1rem;

  }

  .about .card {

    flex-direction: row;

    align-items: center;

    padding: 1.5rem 1.8rem;

  }

  .about .card .text h4 {

    margin: 0;

    text-align: left;

    font-size: clamp(1.62rem, calc(18 * var(--vw390)), 2.7rem);

    line-height: clamp(2.25rem, calc(25 * var(--vw390)), 3.75rem);

    letter-spacing: 0;

  }

  .about .card .text h5 {

    margin: 0;

    text-align: left;

    font-size: clamp(1.08rem, calc(12 * var(--vw390)), 1.8rem);

    line-height: clamp(1.62rem, calc(18 * var(--vw390)), 2.7rem);

    letter-spacing: 0.25em;

  }

  .about .card figure {

    width: 8rem;

    margin: 0 1.5rem 0 0;

  }

  .about .card figure img {

    width: 100%;

    height: auto;

  }

  .about .card::after {

    inset: 50% 0 auto auto;

    transform: translate(-50%, -50%);

    max-width: 2.4rem;

    height: 2.4rem;

    background-size: contain;

  }



  .concept {

    padding: 0 0 7rem;

  }

  .concept::before {

    height: 100%;

  }

  .concept::after {

    content: none;

  }

  .concept .wrapper {

    display: block;

  }

  .concept h5,

  .concept p.with-bg {

    font-size: clamp(1.8rem, calc(20 * var(--vw390)), 3rem);

    line-height: clamp(2.7rem, calc(30 * var(--vw390)), 4.5rem);

  }

  .concept p {

    font-size: clamp(1.35rem, calc(15 * var(--vw390)), 2.25rem);

    line-height: clamp(2.7rem, calc(30 * var(--vw390)), 4.5rem);

  }

  .concept .btn {

    margin: 5rem auto 0;

  }

  .concept .wrapper {

    padding: 0 2rem;

  }

  .concept .left {

    height: 16rem;

    background: var(--gray);

    width: calc(100% + 4rem);

    position: relative;

    z-index: 15;

    display: flex;

    align-items: center;

    justify-content: center;

    left: -2rem;

    background: url(../img/top/bg_02.png) no-repeat;

    background-size: 100% 100%;

    margin: 0 0 4rem 0;

  }

  .concept .left p {

    font-size: clamp(5.4rem, calc(60 * var(--vw390)), 9rem);

    line-height: clamp(1.89rem, calc(21 * var(--vw390)), 3.15rem);

    font-weight: 300;

    color: var(--white);

    margin: 0;

  }

  .concept .right {

    left: 0;

    padding: 0;

  }

  .concept .with-bg .blue {

    font-size: clamp(1.8rem, calc(20 * var(--vw390)), 3rem);

    line-height: clamp(2.7rem, calc(30 * var(--vw390)), 4.5rem);

  }



  .news {

    padding: 7rem 0;

  }

  .news .btn {

    margin: 4rem auto 0;

  }

  .news dl {

    flex-direction: column;

    gap: 1rem;

  }

  .news dd,

  .news dt,

  .news time {

    font-size: clamp(1.35rem, calc(15 * var(--vw390)), 2.25rem);

    line-height: 1;

  }

  .news a {

    padding: 2rem 1rem 2rem 0;

  }

  .news a:hover {

    padding: 2rem 1rem;

  }

  .news a time {

    font-size: clamp(1.35rem, calc(15 * var(--vw390)), 2.25rem);

    line-height: clamp(1.35rem, calc(15 * var(--vw390)), 2.25rem);

  }

  .news a:first-of-type {

    border-top: none;

  }

  .news p {

    font-size: clamp(1.08rem, calc(12 * var(--vw390)), 1.8rem);

    margin: 1rem 0 2rem;

    line-height: 1;

  }

  .news h3 {

    font-size: clamp(2.88rem, calc(32 * var(--vw390)), 4.8rem);

    line-height: 1;

  }



  .works {

    padding: 7rem 0 4rem;

  }

  .works h3 {

    font-size: clamp(2.88rem, calc(32 * var(--vw390)), 4.8rem);

    line-height: clamp(1.89rem, calc(21 * var(--vw390)), 3.15rem);

  }

  .works p {

    font-size: clamp(1.08rem, calc(12 * var(--vw390)), 1.8rem);

    margin: 1rem 0 4rem;

    line-height: clamp(1.62rem, calc(18 * var(--vw390)), 2.7rem);

  }

  .works .btn {

    margin: 4rem auto 0;
    transition-delay: 0.3s !important;
  }



}



@media screen and (max-width: 768px) {

  .masonry {

    gap: 1rem;

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

  }

  .masonry .item {

    margin: 0;

  }

  .masonry .item01 {

    grid-column: 1 / span 2;

    grid-row: 1 / span 2;

  }

  .masonry .item04 {

    grid-column: 1 / span 2;

    grid-row: 7 / span 8;

  }

  .works .two-btn {
    flex-direction: column;
  }

  .works .two-btn a:last-of-type {
    margin: 0;
  }


}



/* ============================

   SCROLL ANIMATIONS (PC ONLY)

   ============================ */



@media (min-width: 1026px) {



  /* --- ÉTAT INITIAL : caché / décalé --- */



  .about h3,

  .about h3+p,

  .about .cards .card,

  .real-estate .right .svg-estate,

  .real-estate .right figure,

  .real-estate .right .subttl,

  .real-estate .right p,

  .real-estate .right a.btn,

  .home-staging .left figure,

  .home-staging .left .subttl,

  .home-staging .left p,

  .home-staging .left a.btn,

  .concept h5,

  .concept p,

  .concept p.with-bg,

  .concept a.btn,

  .news h3,

  .news p,

  .news .btn,

  .news a:not(.btn),

  .works h3,

  .works p,

  .works .btn {

    opacity: 0;

    filter: blur(4px);

    transition: opacity 0.7s cubic-bezier(.2, .7, .2, 1), transform 0.7s cubic-bezier(.2, .7, .2, 1), filter 0.7s cubic-bezier(.2, .7, .2, 1);

    will-change: opacity, transform, filter;

  }




  .real-estate .right a.btn {
    margin-bottom: 2rem;
  }



  /* Par défaut = entrée par le bas */

  .about h3,

  .about h3+p,

  .about .cards .card,

  .real-estate .right .svg-estate,

  .real-estate .right figure,

  .real-estate .right .subttl,

  .real-estate .right p,

  .real-estate .right a.btn,

  .home-staging .left figure,

  .home-staging .left .subttl,

  .home-staging .left p,

  .home-staging .left a.btn,

  .concept h5,

  .concept p,

  .concept p.with-bg,

  .concept a.btn,

  .news h3,

  .news p,

  .news .btn,

  .works h3,

  .works p,

  .works .btn {

    transform: translateY(20px);

  }



  /* NEWS — les items viennent de la gauche */

  .news a:not(.btn) {

    transform: translateX(-40px);

  }



  /* --- ÉTAT VISIBLE (.inview) --- */



  .about h3.inview,

  .about h3+p.inview,

  .about .cards .card.inview,

  .real-estate .right .svg-estate.inview,

  .real-estate .right figure.inview,

  .real-estate .right .subttl.inview,

  .real-estate .right p.inview,

  .real-estate .right a.btn.inview,

  .home-staging .left figure.inview,

  .home-staging .left .subttl.inview,

  .home-staging .left p.inview,

  .home-staging .left a.btn.inview,

  .concept h5.inview,

  .concept p.inview,

  .concept p.with-bg.inview,

  .concept a.btn.inview,

  .news h3.inview,

  .news p.inview,

  .news .btn.inview,

  .news a:not(.btn).inview,

  .works h3.inview,

  .works p.inview,

  .works .btn.inview {

    opacity: 1;

    transform: translateX(0) translateY(0);

    filter: blur(0);

  }

  .works .btn.inview {
    transition-delay: 0.3s !important;
  }

  .btn.inview {
    cursor: pointer;
  }


  /* --- STAGGER ABOUT --- */



  .about h3.inview {
    transition-delay: 0.10s;
  }

  .about h3+p.inview {
    transition-delay: 0.22s;
  }



  .about .cards .card:nth-child(1).inview {
    transition-delay: 0.34s;
  }

  .about .cards .card:nth-child(2).inview {
    transition-delay: 0.46s;
  }

  .about .cards .card:nth-child(3).inview {
    transition-delay: 0.58s;
  }



  /* --- STAGGER REAL-ESTATE --- */



  .real-estate .right .svg-estate.inview {
    transition-delay: 0.12s;
  }

  .real-estate .right figure.inview {
    transition-delay: 0.24s;
  }

  .real-estate .right .subttl.inview {
    transition-delay: 0.36s;
  }

  .real-estate .right p.inview {
    transition-delay: 0.48s;
  }

  .real-estate .right a.btn.inview {
    transition-delay: 0.60s;
  }

  .real-estate .left {
    width: 50%;
  }

  .real-estate .right {
    width: 50%;
    padding: 0 clamp(7rem, calc(70px + (100 - 70) * var(--vw-desktop-range)), 10rem);
  }





  /* --- STAGGER HOME-STAGING --- */



  .home-staging .left figure.inview {
    transition-delay: 0.12s;
  }

  .home-staging .left .subttl.inview {
    transition-delay: 0.24s;
  }

  .home-staging .left p.inview {
    transition-delay: 0.36s;
  }

  .home-staging .left a.btn.inview {
    transition-delay: 0.48s;
  }





  /* --- STAGGER CONCEPT --- */

  .concept h5.inview {
    transition-delay: 0.12s;
  }

  .concept p.inview:not(.with-bg) {
    transition-delay: 0.24s;
  }

  .concept p.with-bg.inview {
    transition-delay: 0.36s;
  }

  .concept a.btn.inview {
    transition-delay: 0.48s;
  }



  /* --- STAGGER NEWS --- */



  .news h3.inview {
    transition-delay: 0.10s;
  }

  .news p.inview {
    transition-delay: 0.22s;
  }



  .news a:not(.btn):nth-of-type(1).inview {
    transition-delay: 0.34s;
  }

  .news a:not(.btn):nth-of-type(2).inview {
    transition-delay: 0.44s;
  }

  .news a:not(.btn):nth-of-type(3).inview {
    transition-delay: 0.54s;
  }

  .news a:not(.btn):nth-of-type(4).inview {
    transition-delay: 0.64s;
  }

  .news a:not(.btn):nth-of-type(5).inview {
    transition-delay: 0.74s;
  }



  .news .btn.inview {
    transition-delay: 0.90s;
  }



  /* --- STAGGER WORKS --- */



  .works h3.inview {
    transition-delay: 0.10s;
  }

  .works p.inview {
    transition-delay: 0.22s;
  }



  /* .works .masonry .item:nth-child(1).inview  { transition-delay: 0.34s; }

  .works .masonry .item:nth-child(2).inview  { transition-delay: 0.44s; }

  .works .masonry .item:nth-child(3).inview  { transition-delay: 0.54s; }

  .works .masonry .item:nth-child(4).inview  { transition-delay: 0.64s; }

  .works .masonry .item:nth-child(5).inview  { transition-delay: 0.74s; }

  .works .masonry .item:nth-child(6).inview  { transition-delay: 0.84s; }

  .works .masonry .item:nth-child(7).inview  { transition-delay: 0.94s; }

  .works .masonry .item:nth-child(8).inview  { transition-delay: 1.04s; }

  .works .masonry .item:nth-child(9).inview  { transition-delay: 1.14s; }

  .works .masonry .item:nth-child(10).inview { transition-delay: 1.24s; } */



  .works .btn.inview {
    transition-delay: 1.40s;
  }

}



/* ============================

   ACCESSIBILITÉ

   ============================ */



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

  .about h3,

  .about h3+p,

  .about .cards .card,

  .real-estate .right .svg-estate,

  .real-estate .right figure,

  .real-estate .right .subttl,

  .real-estate .right p,

  .real-estate .right a.btn,

  .home-staging .left figure,

  .home-staging .left .subttl,

  .home-staging .left p,

  .home-staging .left a.btn,

  .concept h5,

  .concept p,

  .concept p.with-bg,

  .concept a.btn,

  .news h3,

  .news p,

  .news .btn,

  .news a:not(.btn),

  .works h3,

  .works p,

  .works .btn,

  .works .masonry .item {

    opacity: 1 !important;

    transform: none !important;

    filter: none !important;

    transition: none !important;

  }

}


.home section.works .masonry {
  max-width: none;
  margin-top: clamp(3.5rem, calc(35px + (60 - 35) * var(--vw-desktop-range)), 6rem);
}

.home section.works .masonry .item01 {
  grid-column: auto;
  grid-row: auto;
}

.home section.works .masonry .item04 {
  grid-column: auto;
  grid-row: auto;
}

.home section.works .masonry .item:first-of-type {
  grid-column: span 2;
  grid-row: span 2;
}

.home section.works .masonry .item:nth-of-type(10) {
  grid-column: 3 / span 2;
  /* grid-row: 2 / span 2; */
  grid-row: 3 / span 2;
}

.home section.works .masonry .item a span strong:first-of-type {
  color: #fff;
  background: var(--blue);
  padding: 1rem;
  font-size: clamp(1.5rem, calc(15px + (22 - 15) * var(--vw-desktop-range)), 2rem);
  line-height: 1.5;
}

@media screen and (max-width: 1025px) {
  .home section.works .masonry .item:first-of-type {
    grid-column: span 2;
    grid-row: 1;
  }

  .home section.works .masonry .item:nth-of-type(10) {
    grid-column: 1 / span 2;
    /* grid-row: 5; */
    grid-row: 4;
  }
}