/* =========================================================================
   Closing call-to-action — a laptop carried in two backlit hands,
   a miniature of our own site on its screen.
   ========================================================================= */
.cta { position: relative; z-index: 6; color: #0a0909; overflow: hidden; font-family: var(--font, var(--sans, 'General Sans', 'Lama Sans', 'Helvetica Neue', Arial, sans-serif));
  background: linear-gradient(90deg, #d2d5d9 0%, #dfe1e3 30%, #e9eaea 50%, #dfe1e3 70%, #d2d5d9 100%); }

/* --sh is the height of the photo (its own 1376 × 768 proportions); the copy gets its own room beneath */
.cta__stage { --sh: calc(min(100vw, 2300px) * .5581); position: relative; width: 100%; max-width: 2300px; margin: 0 auto; height: calc(var(--sh) + clamp(190px, 17vw, 330px)); min-height: 700px; }

/* the photo melts into the section only at the top and bottom */
.cta__scene { position: absolute; inset: 0 0 auto 0; height: var(--sh); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 84%, transparent 100%); }
.cta__float { position: absolute; inset: 0; opacity: 0; transform: translate3d(0, 60px, 0) scale(.97); transition: transform 1.5s cubic-bezier(.16, 1, .3, 1), opacity 1.1s ease; will-change: transform; }
.cta.is-in .cta__float { opacity: 1; transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1); }
.cta__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; }

/* The display, measured from the photo's pixels (1376 × 768): x 448–927, y 110–432.
   Its top corners are rounded (≈16 px) and its bottom corners are almost square, so the
   overlay copies both exactly instead of using one radius all round. */
.cta__screen {
  position: absolute; left: 32.56%; top: 14.32%; width: 34.88%; height: 42.06%; overflow: hidden; container-type: inline-size; background: #000;
  border-radius: 3.3% 3.3% .7% .7% / 5% 5% 1% 1%;
}
.cta__screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 36%); }

/* the miniature site */
.site { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto 1fr; justify-items: center; padding: 3cqw 5cqw 4cqw; gap: 2.2cqw; background: radial-gradient(90% 70% at 50% 0%, #fff, #f1f0f2); color: #0a0909; }
.site__nav { width: 100%; display: flex; align-items: center; gap: 2.6cqw; font-size: 1.7cqw; }
.site__nav b { font-size: 2.1cqw; margin-inline-end: auto; letter-spacing: -.01em; }
.site__nav span { color: #555; }
.site__h { font-size: 5.2cqw; font-weight: 700; letter-spacing: -.04em; line-height: 1.02; text-align: center; max-width: 14ch; margin: 1.2cqw 0 0; }
html.is-rtl .site__h { letter-spacing: 0; line-height: 1.25; }
.site__shots { position: relative; width: 100%; border-radius: 1.6cqw; overflow: hidden; background: #ddd; min-height: 0; }
.site__shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.site__shots img.is-on { opacity: 1; }

/* copy: one centred column that starts where the lower hands are and runs clear of them */
.cta__copy { position: absolute; z-index: 4; left: 0; right: 0; top: calc(var(--sh) * .775); display: grid; justify-items: center; text-align: center; padding: 0 clamp(18px, 4vw, 48px); }
.cta__title { font-size: clamp(2.6rem, 6vw, 5.6rem); font-weight: 400; letter-spacing: -.05em; line-height: .98; margin: 0; color: #0a0909; }
html.is-rtl .cta__title { letter-spacing: 0; font-weight: 600; line-height: 1.15; }
.cta__sub { margin: clamp(14px, 1.6vw, 22px) 0 0; max-width: 40ch; font-size: clamp(.92rem, 1.15vw, 1.08rem); line-height: 1.55; color: #4a4d52; }
.cta__actions { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2vw, 28px); flex-wrap: wrap; margin-top: clamp(20px, 2.4vw, 34px); }
.cta__btn { display: inline-flex; padding: 17px 38px; border-radius: 999px; font-size: .98rem; font-weight: 500; color: #fff; text-decoration: none; background: #0a0909; box-shadow: 0 14px 34px rgba(10, 9, 9, .26); transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease, background .3s ease; }
.cta__btn:hover { transform: translateY(-3px); background: linear-gradient(140deg, #e11d34, #8f0c1a); box-shadow: 0 20px 44px rgba(225, 29, 52, .35); }
.cta__mail { font-size: .98rem; font-weight: 500; color: #0a0909; text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid rgba(10, 9, 9, .4); transition: border-color .3s ease, color .3s ease; }
.cta__mail:hover { color: #e11d34; border-color: #e11d34; }

@media (max-width: 860px) {
  .cta__stage { height: auto; min-height: 0; padding-bottom: 56px; --sh: calc(100vw * 1.228); }
  /* the photo is 220% of the screen wide so the laptop stays readable; keep its own proportions so the screen overlay stays aligned */
  .cta__scene { inset: auto; width: 220%; height: auto; aspect-ratio: 1376 / 768; position: relative; margin-left: -60%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 80%, transparent 100%); }
  .cta__stage { overflow: hidden; }
  .cta__copy { position: relative; top: auto; margin-top: -2vw; }
  .cta__title { font-size: clamp(2.3rem, 11vw, 3.4rem); }
}
@media (prefers-reduced-motion: reduce) { .cta__float { transition: none; opacity: 1; transform: none; } }