.page-hero{
  padding-bottom:70px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92)),
    radial-gradient(circle at 80% 18%, rgba(126,208,168,.14), transparent 32%);
}

.realisations-intro{
  padding:0 44px 38px;
  background:var(--ivory);
}

.intro-panel{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:34px;
  align-items:end;
  padding-top:26px;
  border-top:1px solid var(--rule-light);
}

.intro-copy p{
  margin-top:18px;
  max-width:620px;
  font-size:15.5px;
  line-height:1.6;
  color:var(--ink-60);
}

.n-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--rule-light);
  border:1px solid var(--rule-light);
}

.n-grid > div{
  min-height:126px;
  padding:20px 18px;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.n-grid .k{
  font-family:"Montserrat",sans-serif;
  font-size:9px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-60);
}

.n-grid .v{
  font-family:"Montserrat",sans-serif;
  font-size:clamp(28px,3vw,44px);
  line-height:.95;
  font-weight:800;
  letter-spacing:-.035em;
  color:var(--green-900);
}

.n-grid .v em{
  font-style:italic;
  color:var(--green-700);
}

.n-grid .v.zone{
  font-size:clamp(22px,2.2vw,34px);
  letter-spacing:-.03em;
}

.n-grid .d{
  font-size:11px;
  line-height:1.35;
  color:var(--ink-60);
}

.grid-works{
  padding:18px 44px 86px;
  background:var(--ivory);
}

.works{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  max-width:1440px;
  margin:0 auto;
}

.work{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/3;
  min-height:0;
  border-radius:18px;
  background:var(--green-50);
  border:1px solid var(--rule-light);
  isolation:isolate;
  transform:translateZ(0);
  transition:transform .35s cubic-bezier(.2,.85,.2,1), box-shadow .35s cubic-bezier(.2,.85,.2,1);
}

.work:nth-child(1),
.work:nth-child(7){
  grid-column:span 2;
  grid-row:span 2;
}

.work::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(180deg, rgba(11,61,48,0), rgba(11,61,48,.16));
  opacity:.45;
  transition:opacity .35s ease;
  pointer-events:none;
}

.work:hover{
  transform:translateY(-3px);
  box-shadow:0 24px 70px -45px rgba(12,26,22,.4);
}

.work:hover::before{
  opacity:.2;
}

.work .ph{
  width:calc(100% + 24px);
  height:calc(100% + 24px);
  margin:-12px;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.01);
  transition:transform .75s cubic-bezier(.2,.85,.2,1), filter .45s ease;
  will-change:transform;
}

.work:hover .ph{
  transform:scale(1.055);
  filter:saturate(1.03) contrast(1.02);
}

.project-cta{
  padding:74px 44px;
  background:var(--green-900);
  color:#fff;
  position:relative;
  overflow:hidden;
}

.project-cta::before{
  content:"";
  position:absolute;
  inset:auto -12% -70% auto;
  width:46vw;
  height:46vw;
  background:radial-gradient(circle, rgba(126,208,168,.13), transparent 65%);
  pointer-events:none;
}

.project-cta-inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  align-items:end;
}

.project-cta .eyebrow{
  color:rgba(255,255,255,.62);
}

.project-cta .eyebrow::before{
  background:rgba(255,255,255,.42);
}

.project-cta h2{
  margin-top:22px;
  font-family:"Montserrat",sans-serif;
  font-size:clamp(38px,4.8vw,74px);
  line-height:.95;
  letter-spacing:-.035em;
}

.project-cta h2 em{
  color:var(--green-300);
  font-style:italic;
}

.cta-copy{
  justify-self:end;
  max-width:440px;
}

.cta-copy p{
  margin-bottom:24px;
  color:rgba(255,255,255,.72);
  font-size:15.5px;
  line-height:1.6;
}

.project-cta .btn-primary{
  background:#fff;
  color:var(--green-900);
}

.project-cta .btn-primary .arrow{
  background:var(--green-900);
  color:#fff;
}

@media (max-width:1100px){
  .intro-panel,
  .project-cta-inner{
    grid-template-columns:1fr;
  }

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

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

  .work:nth-child(1),
  .work:nth-child(7){
    grid-column:span 2;
    grid-row:span 2;
  }

  .cta-copy{
    justify-self:start;
  }
}

@media (max-width:900px){
  .page-hero{padding-bottom:52px}
  .realisations-intro{padding:0 20px 28px}
  .intro-panel{gap:24px;padding-top:22px}
  .intro-copy p{font-size:14.5px}

  .grid-works{padding:14px 20px 58px}
  .works{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .work,
  .work:nth-child(1),
  .work:nth-child(7){
    grid-column:span 1;
    grid-row:span 1;
    border-radius:14px;
  }

  .project-cta{padding:62px 20px}
  .project-cta-inner{gap:28px}
  .cta-copy p{font-size:14.5px}
}

@media (max-width:560px){
  .n-grid{grid-template-columns:1fr 1fr}
  .n-grid > div{min-height:116px;padding:16px 14px}

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

  .work{
    aspect-ratio:4/3;
  }
}