/* ==========================================================================
   Realisation section — Figma node 109:85
   Page-level box: left:0; top:3019px; width:1440px; height:676px
   All children below use page-level absolute coordinates
   (Figma local y + 3019) to match the shared page-canvas coordinate system
   established by the hero section (.hero-stage, position:relative, 1440 wide).
   Scope: .realisation
   ========================================================================== */

.realisation {
  position: absolute;
  left: 0;
  top: 0;
  width: 1440px;
  height: 0;
  overflow: visible;
  pointer-events: none;
}
.realisation a,
.realisation .realisation-cta {
  pointer-events: auto;
}

/* ---------- Decorative background glow texture ---------- */
.realisation-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.realisation-glow {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: overlay;
  background: radial-gradient(ellipse at center, rgba(217, 217, 217, 0.83) 0%, rgba(115, 115, 115, 0) 70%);
}
.realisation-glow--1 {
  left: 887px;
  top: 3266px;
  width: 553px;
  height: 397px;
}
.realisation-glow--2 {
  left: 0;
  top: 3046px;
  width: 553px;
  height: 397px;
}
.realisation-glow--3 {
  left: 971px;
  top: 3324px;
  width: 555.738px;
  height: 317.918px;
}

/* ---------- Body copy ---------- */
.realisation-copy {
  position: absolute;
  left: 737px;
  top: 3069px;
  width: 597px;
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: 29px;
  line-height: 1.6;
  color: #ffffff;
  text-align: right;
}

/* ---------- Playbook mockup graphic ---------- */
.realisation-playbook {
  position: absolute;
  left: 0;
  top: 3028px;
  width: 780px;
  height: 667px;
  pointer-events: none;
}
.realisation-playbook img {
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- Quote ---------- */
.realisation-quote {
  position: absolute;
  left: 761px;
  top: 3416px;
  width: 561px;
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: 48px;
  line-height: 1.2;
  text-align: right;
  background-image: linear-gradient(99.559deg, rgb(204, 177, 107) 3.0864%, rgb(206, 188, 141) 46.829%, rgb(228, 190, 91) 76.409%, rgb(126, 105, 50) 123.86%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- CTA button ---------- */
.realisation-cta {
  position: absolute;
  left: 423px;
  top: 3523px;
  width: 297px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  border: 1px solid #e0e0e0;
  background-image: linear-gradient(207.7396deg, rgb(199, 195, 187) 30.14%, rgb(208, 195, 161) 9.2794%, rgb(217, 195, 138) 16.796%, rgb(173, 147, 81) 47.565%, rgb(139, 111, 37) 78.335%);
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.realisation-cta:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.realisation-cta span {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: 24px;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
}