/* Shared Batch 2 — bounded portrait and responsive-media presentation. */

/* Keep the supplied founder photograph natural, proportional, and recognisable. */
.real-portrait {
  right: 6vw;
  bottom: 13%;
  width: min(22vw, 310px);
  padding: 9px;
  background: rgba(255, 252, 246, .9);
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 24px;
  box-shadow: 0 22px 55px rgba(12, 55, 65, .2);
  filter: none;
  transform: rotate(1.25deg);
}
.real-portrait::after { display: none; }
.real-portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  mix-blend-mode: normal;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
}
/* Arabic home receives the same photograph without mirroring or synthesising it. */
body[data-page="home"] .ar-hero.has-image {
  background-image: linear-gradient(90deg, rgba(8, 37, 35, .92), rgba(8, 37, 35, .42)),
    url('delivery/hero/environment-annotated-1672.webp');
}
body[data-page="home"] .ar-hero.has-image::before {
  content: "";
  position: absolute;
  left: 6vw;
  bottom: 12%;
  z-index: 1;
  width: min(22vw, 300px);
  aspect-ratio: 4 / 5;
  box-sizing: border-box;
  border: 9px solid rgba(255, 252, 246, .9);
  border-radius: 24px;
  background: image-set(
      url('delivery/portrait/husam-founder-400.webp') 1x,
      url('delivery/portrait/husam-founder-800.webp') 2x
    ) center / cover no-repeat;
  box-shadow: 0 22px 55px rgba(5, 33, 39, .3);
  transform: rotate(-1.25deg);
}
body[data-page="home"] .ar-hero .hero-copy {
  position: relative;
  z-index: 2;
  padding-inline-end: min(28vw, 350px);
}

/* Authentic, non-project coastal atmosphere on the Arabic contact page. */
body[data-page="contact"] .contact-aside::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin-bottom: 1.4rem;
  border-radius: 1.25rem;
  background: linear-gradient(180deg, transparent 58%, rgba(10, 46, 44, .26)),
    url('delivery/context/sunset-boat-poster-478.webp') center 62% / cover no-repeat;
  box-shadow: 0 18px 42px rgba(18, 63, 59, .12);
}

@media (max-width: 1023px) {
  .real-portrait { right: 2vw; bottom: 15%; width: min(24vw, 260px); }
}

@media (max-width: 767px) {
  .hero {
    min-height: 1080px;
    background-image: linear-gradient(180deg, rgba(250, 245, 236, .98) 0%, rgba(250, 245, 236, .91) 38%, rgba(250, 245, 236, .12) 64%, rgba(9, 71, 84, .14) 100%),
      url('delivery/hero/environment-annotated-960.webp');
  }
  .hero-copy { padding-bottom: 0; }
  .real-portrait {
    position: relative;
    right: auto;
    bottom: auto;
    align-self: flex-end;
    width: min(48vw, 210px);
    margin: 8px 7% 150px 0;
    padding: 7px;
    border-radius: 19px;
  }
  .real-portrait img { border-radius: 13px; }
  .winter-scene { background-image: url('delivery/winter/winter-monitoring-scene-960.webp'); }
  body[data-page="home"] .ar-hero.has-image {
    background-image: linear-gradient(180deg, rgba(8, 37, 35, .86), rgba(8, 37, 35, .4)),
      url('delivery/hero/environment-annotated-960.webp');
  }
  body[data-page="home"] .ar-hero.has-image::before {
    left: 18px;
    top: auto;
    bottom: 28px;
    width: min(42vw, 190px);
    border-width: 7px;
    border-radius: 18px;
  }
  body[data-page="home"] .ar-hero .hero-copy {
    padding-inline-end: 0;
    padding-bottom: 210px;
  }
  body[data-page="contact"] .contact-aside::before {
    max-width: 25rem;
    aspect-ratio: 16 / 9;
    background-position: center 68%;
  }
}

@media (max-width: 390px) {
  .real-portrait { width: min(50vw, 188px); margin-right: 5%; }
  body[data-page="home"] .ar-hero.has-image::before { width: 165px; }
}