/* Subtle page motion and a separate services news bar. */
body { position: relative; overflow-x: clip; }
body main#home { position: relative; overflow: clip; }
body .brand-mark {
  width: 50px;
  height: 46px;
  border: 0;
  overflow: visible;
}
body .brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
body .site-pillar {
  position: absolute;
  z-index: 2;
  top: 0;
  right: clamp(24px, 8vw, 160px);
  width: clamp(230px, 23vw, 320px);
  object-fit: cover;
  object-position: center;
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 800px) {
  body .brand-mark { width: 44px; height: 40px; }
  body .site-pillar {
    right: 0;
    width: 190px;
  }
}
body #services { position: relative; }
body #contact {
  position: relative;
  isolation: auto;
  border-top: 1px solid var(--line);
  background-color: #0b0d0c;
  background-image:
    linear-gradient(rgba(8, 9, 9, .78), rgba(8, 9, 9, .84)),
    url('islamic-pattern.svg');
  background-size: auto, 160px 160px;
}
body #contact .wrap,
body footer .wrap { position: relative; z-index: 3; }
body footer { position: relative; z-index: 3; }
body footer .wrap > span,
body footer .wrap > a {
  padding: 4px 8px;
  background: #0b0d0c;
  box-shadow: 0 0 16px #080909;
  color: #e7e2d5;
  box-decoration-break: clone;
}
body footer .wrap > a { color: var(--gold2); }
body #contact h2,
body #contact p,
body .facebook-follow h2,
body .facebook-follow p {
  text-shadow: 0 2px 8px #080909, 0 4px 20px #080909;
}
body .hero { min-height: 862px; isolation: isolate; }
body .hero::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 72%;
  left: 0;
  width: clamp(360px, 27vw, 500px);
  aspect-ratio: 1374 / 1145;
  transform: translate(-33.333%, -50%);
  background: url('egyptian-golden-scales-hero.png') center / contain no-repeat;
  pointer-events: none;
}
body .hero-grid { position: relative; z-index: 1; min-height: 780px; }
body .hero-copy { padding-top: 105px; padding-bottom: 115px; }
body .hero-golden-scales { display: none; }
body .hero-copy h1,
body .hero-copy .lead { text-shadow: 0 3px 12px rgba(0, 0, 0, .86); }
body .hero-art { min-height: 730px; }
body .hero h1 { line-height: 1.45; }
body .hero h1 span { line-height: inherit; }
body .hero-typography {
  position: absolute;
  z-index: 0;
  inset: 82px 0 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
body .hero-ghost-word {
  position: absolute;
  display: block;
  width: max-content;
  max-width: 100%;
  color: #40321e;
  font-weight: 800;
  line-height: 1.35;
}
body .hero-ghost-word {
  top: 5%;
  right: 5%;
  font-size: clamp(115px, 16vw, 250px);
  animation: hero-name-flow 36s linear infinite alternate;
}
@keyframes hero-name-flow {
  from { transform: translateX(-5%); }
  to { transform: translateX(5%); }
}

body .hero-copy > * {
  animation: hero-enter .75s both;
}
body .hero-copy > :nth-child(2) { animation-delay: .1s; }
body .hero-copy > :nth-child(3) { animation-delay: .2s; }
body .hero-copy > :nth-child(4) { animation-delay: .3s; }
body .hero-art img { animation: portrait-enter .9s .15s both; }

@keyframes hero-enter {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes portrait-enter {
  from { opacity: 0; transform: translateY(24px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

body .button,
body .contact-link {
  transition: transform .25s ease, background-color .25s ease,
    border-color .25s ease, box-shadow .25s ease;
}
body .button:focus-visible,
body .contact-link:focus-visible {
  outline: 2px solid var(--gold2);
  outline-offset: 4px;
}
body .button.whatsapp {
  background: transparent;
  color: var(--gold2);
}
body .button.whatsapp:hover {
  background: rgba(217, 171, 85, .1);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .22);
}
body .whatsapp-icon { width: 20px; height: 20px; flex: none; fill: currentColor; }
body .contact-link { display: inline-flex; align-items: center; gap: 8px; }
body .floating-whatsapp {
  position: fixed;
  z-index: 30;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: calc(24px + env(safe-area-inset-left));
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  transition: transform .2s ease, box-shadow .2s ease;
}
body .floating-whatsapp .whatsapp-icon { width: 31px; height: 31px; }
body .floating-whatsapp:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0, 0, 0, .48); }
body .floating-whatsapp:focus-visible { outline: 3px solid var(--gold2); outline-offset: 4px; }
body .about-photo { background: #050606; }
body .about-photo img { object-fit: contain; object-position: center; filter: none; }

body .facebook-follow {
  position: relative;
  isolation: auto;
  overflow: hidden;
  padding: 122px 0 112px;
  background: #0c0e0d;
  border-block: 1px solid var(--line);
}
body .facebook-follow-backdrop {
  position: absolute;
  z-index: 0;
  top: -92px;
  right: 5%;
  color: #29231a;
  font-size: clamp(150px, 17vw, 300px);
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
body .facebook-follow-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(290px, .75fr);
  align-items: end;
  gap: clamp(35px, 5vw, 90px);
  position: relative;
  z-index: 3;
}
body .facebook-follow-title {
  min-width: 0;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(217, 171, 85, .6);
}
body .facebook-follow h2 {
  margin: 0;
  font-size: clamp(38px, 4.6vw, 72px);
  font-weight: 800;
  line-height: 1.27;
  letter-spacing: -1px;
}
body .facebook-follow h2 span { display: block; }
body .facebook-follow h2 .facebook-headline-gold { color: var(--gold); }
body .facebook-follow h2 .facebook-headline-white { color: var(--white); }
body .facebook-follow-aside {
  padding-bottom: 28px;
}
body .facebook-follow-aside::before {
  content: '';
  display: block;
  width: 72%;
  height: 1px;
  margin-bottom: 28px;
  background: var(--gold);
}
body .facebook-follow p {
  max-width: 390px;
  margin: 0 0 30px;
  color: #e0dfd8;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.9;
}
body .facebook-follow-button {
  min-width: 252px;
  padding: 11px 18px;
  border-radius: 999px;
  gap: 16px;
  white-space: nowrap;
  font-size: 17px;
}
body .facebook-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 50%;
  background: #111310;
  color: var(--gold);
}
body .facebook-mark svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

body .services-ticker {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 64px;
  overflow: hidden;
  background: #121311;
  border-block: 1px solid var(--line);
}
body .ticker-label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex: none;
  padding: 0 26px;
  background: var(--gold);
  color: #17140e;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}
body .ticker-window {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  direction: ltr;
}
body .ticker-track {
  display: flex;
  align-items: center;
  flex: none;
  width: max-content;
  direction: ltr;
  animation: ticker-travel var(--ticker-duration, 28s) linear infinite;
}
body .ticker-group {
  display: flex;
  align-items: center;
  flex: none;
  gap: 34px;
  padding-inline: 17px;
  direction: ltr;
}
body .ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  color: var(--gold2);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  direction: rtl;
}
body .ticker-item::after {
  content: '◆';
  color: var(--gold);
  font-size: 9px;
}
body .services-ticker:hover .ticker-track,
body .services-ticker:focus-within .ticker-track { animation-play-state: paused; }
@keyframes ticker-travel { to { transform: translateX(var(--ticker-distance, -50%)); } }
body .reveal-ready { opacity: 0; transform: translateY(25px); }
body .reveal-ready.is-visible { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s ease; }

@media (max-width: 800px) {
  body .floating-whatsapp {
    width: 54px;
    height: 54px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: calc(16px + env(safe-area-inset-left));
  }
  body .floating-whatsapp .whatsapp-icon { width: 28px; height: 28px; }
  body .hero {
    min-height: 0;
    background-color: #080909;
    background-image:
      linear-gradient(180deg,
        rgba(5, 6, 6, .42) 0%,
        rgba(5, 6, 6, .67) 32%,
        rgba(5, 6, 6, .87) 70%,
        rgba(5, 6, 6, .96) 100%),
      url('eslam-courthouse-portrait.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
  }
  body .hero::before { display: none; }
  body .hero-grid { display: block; min-height: 0; }
  body .hero-art { display: none; }
  body .hero-typography { display: none; }
  body .hero-copy { padding-top: 76px; padding-bottom: 96px; }
  body .hero-copy h1,
  body .hero-copy .lead {
    text-shadow: 0 2px 3px #050606, 0 5px 12px #050606,
      0 9px 24px rgba(0, 0, 0, .98);
  }
  body .hero-copy .lead { color: #f1eee8; }
  body .hero-copy .button.ghost {
    background: rgba(5, 6, 6, .8);
    text-shadow: 0 2px 6px #050606;
  }
  body .hero-golden-scales {
    display: block;
    width: 118px;
    max-width: 44%;
    height: auto;
    margin: 0 0 12px auto;
    object-fit: contain;
  }
  body .hero h1 { font-size: clamp(38px, 9vw, 58px); line-height: 1.5; }
  body .facebook-follow { padding: 86px 0 74px; }
  body .facebook-follow-backdrop { top: -35px; right: -12%; font-size: 35vw; }
  body .facebook-follow-grid { grid-template-columns: 1fr; gap: 36px; }
  body .facebook-follow-title { padding-bottom: 24px; }
  body .facebook-follow h2 { font-size: clamp(34px, 8vw, 58px); line-height: 1.45; }
  body .facebook-follow-aside {
    position: relative;
    z-index: 4;
    padding: 22px;
    background: rgba(8, 9, 9, .94);
    border: 1px solid rgba(217, 171, 85, .3);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .35);
  }
  body .facebook-follow-aside::before { width: 54%; margin-bottom: 20px; }
  body .facebook-follow p { max-width: none; font-size: 17px; margin-bottom: 22px; }
  body .facebook-follow-button { width: min(100%, 280px); min-width: 0; white-space: normal; }
  body #contact .wrap {
    padding: 32px 20px;
    background: rgba(8, 9, 9, .9);
    border: 1px solid rgba(217, 171, 85, .25);
  }
  body #contact h2 { line-height: 1.4; }
  body footer { font-size: 14px; }
  body footer .wrap > span,
  body footer .wrap > a {
    display: block;
    width: fit-content;
    max-width: 100%;
  }
  body footer .social { overflow-wrap: anywhere; }
  body .ticker-label { padding-inline: 15px; font-size: 13px; }
  body .ticker-item { font-size: 13px; }
}
@media (max-width: 420px) {
  body .services { grid-template-columns: 1fr; }
  body .service:nth-child(odd) { border-left: 0; }
  body .service { min-height: 0; }
  body .contact-row { flex-direction: column; align-items: stretch; }
  body .contact-row > a { width: 100%; justify-content: center; }
  body .facebook-follow-aside { padding: 18px; }
  body #contact .wrap { padding: 28px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body .hero-copy > *, body .hero-art img { animation: none; }
  body .hero-ghost-word { animation: none; }
  body .reveal-ready, body .reveal-ready.is-visible { opacity: 1; transform: none; transition: none; }
  body .ticker-track { animation: none; }
  body .ticker-group[aria-hidden="true"] { display: none; }
  body .ticker-window { overflow-x: auto; }
  body .button, body .contact-link { transition: none; }
  body .floating-whatsapp { transition: none; }
}