/*
 * Egypt Magic Tours — Homepage CSS
 * All selectors scoped to .em-home-page to avoid Elementor/plugin conflicts.
 * Variable names match main.css (--em-*). Mirrors egypt-magic.html exactly.
 */

/* ===== LAYOUT HELPERS ===== */
/* overflow-x: hidden breaks position:sticky in Safari — use clip instead.
   clip does not create a scroll container so sticky works correctly. */
.em-home-page { overflow-x: hidden; }
@supports (overflow-x: clip) { .em-home-page { overflow-x: clip; } }
.em-home-page .container {
  width:          min(1240px, 90vw);
  margin-inline:  auto;
}
.em-home-page .sec {
  padding: clamp(5rem, 11vw, 9rem) 0;
}

/* ===== BUTTON ===== */
.em-home-page .btn {
  display:        inline-flex;
  align-items:    center;
  gap:            .9rem;
  font-family:    var(--em-font-head);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight:    600;
  font-size:      .95rem;
  padding:        1rem 1.6rem;
  border-radius:  999px;
  background:     var(--em-ink);
  color:          var(--em-bg);
  transition:     background .4s, transform .4s var(--em-ease);
  text-decoration: none;
  border:         none;
  cursor:         pointer;
}
.em-home-page .btn:hover {
  background:  var(--em-gold);
  transform:   translateY(-3px);
}
.em-home-page .btn .arr {
  width:          34px;
  height:         34px;
  border-radius:  50%;
  background:     var(--em-bg);
  color:          var(--em-ink);
  display:        grid;
  place-items:    center;
  overflow:       hidden;
  position:       relative;
  flex-shrink:    0;
}
.em-home-page .btn .arr svg { transition: transform .4s var(--em-ease); }
.em-home-page .btn:hover .arr svg { transform: translateX(28px); }
.em-home-page .btn .arr::after {
  content:    '';
  position:   absolute;
  inset:      0;
  display:    grid;
  place-items: center;
  transform:  translateX(-28px);
  transition: transform .4s var(--em-ease);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231c1813' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center/14px no-repeat;
}
.em-home-page .btn:hover .arr::after { transform: translateX(0); }

/* ===== NAVBAR ===== */
/* Override main.css #em-nav.em-nav--scrolled (dark) — homepage nav scrolls to light papyrus */
.em-home-page #em-nav.em-nav--scrolled {
  background:      var(--em-bg);
  backdrop-filter: none;
  box-shadow:      0 1px 0 var(--em-line);
}

.em-home-page .em-nav {
  position:   fixed;
  inset:      0 0 auto 0;
  z-index:    900;
  display:    flex;
  align-items: center;
  justify-content: space-between;
  padding:    1.3rem clamp(1.2rem, 5vw, 3rem);
  transition: background .4s, padding .4s, box-shadow .4s, transform .5s var(--em-ease);
}
.em-home-page .em-nav.em-nav--scrolled {
  background:      var(--em-bg);
  padding-top:     .85rem;
  padding-bottom:  .85rem;
  box-shadow:      0 1px 0 var(--em-line);
}
.em-home-page .em-nav.em-nav--hide { transform: translateY(-115%); }

.em-home-page .em-brand {
  font-family:    var(--em-font-head);
  font-weight:    700;
  font-size:      1.5rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  display:        flex;
  align-items:    center;
  gap:            .5rem;
  text-decoration: none;
  color:          var(--em-ink);
}
/* The .g span held the 𓂀 glyph beside the text wordmark. Both are gone — the
   brand is an image now — and .em-brand__img is sized once in main.css, which
   home.css never overrides, so there is deliberately no homepage copy of it
   here to fall out of step. */

.em-home-page .em-nav-links {
  display:    flex;
  gap:        2rem;
  align-items: center;
  list-style: none;
}
/* TOP-LEVEL links only — note the child combinators.
 *
 * This block is the text-roll mask: `.rt` slides up by 100% on hover, which
 * needs a fixed height and overflow:hidden to crop the outgoing word. It was
 * written as a descendant selector, so it also matched the links INSIDE the
 * dropdown panel, which are `.em-nav-links > li > ul > li > a`.
 *
 * main.css already resets those with `.em-nav-dropdown a { height:auto;
 * overflow:visible; ... }`, and that reset wins everywhere else because the
 * two selectors tie at 0,1,1 and it comes later. Here the extra
 * `.em-home-page` class broke the tie (0,2,1), so on the home page every
 * dropdown link inherited the mask: 24px tall for 42px of content, i.e. the
 * bottom 18px of every item sliced off, plus uppercase text, the wrong font
 * size, letter-spacing, line-height and an inline-block that collapsed the
 * icon+label row.
 *
 * Scoping to direct children fixes all of it at the source: dropdown links
 * simply never match this rule now. */
.em-home-page .em-nav-links > li > a {
  font-family:    var(--em-font-head);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight:    500;
  font-size:      1rem;
  position:       relative;
  overflow:       hidden;
  height:         1.5em;
  display:        inline-block;
  text-decoration: none;
  color:          var(--em-ink);
}
.em-home-page .em-nav-links > li > a .rt { display: block; transition: transform .4s var(--em-ease); }
.em-home-page .em-nav-links > li > a .rt::after {
  content:  attr(data-t);
  position: absolute;
  left: 0; top: 100%;
  color: var(--em-gold);
}
.em-home-page .em-nav-links > li > a:hover .rt { transform: translateY(-100%); }

.em-home-page .em-nav-actions { display: flex; align-items: center; gap: 1.2rem; }

.em-home-page .em-burger {
  display:    none;
  background: none;
  border:     none;
  font-size:  1.5rem;
  color:      var(--em-ink);
  cursor:     pointer;
}

/* ===== HERO ===== */
.em-home-page .em-hero {
  min-height:     100vh;
  display:        grid;
  grid-template-columns: 1fr 1fr;
  align-items:    center;
  gap:            3rem;
  padding:        7.5rem clamp(1.2rem, 5vw, 3rem) 3rem;
  position:       relative;
  overflow:       hidden;
}
.em-home-page .em-hero__cont h1 {
  font-family:    var(--em-font-head);
  font-size:      clamp(2.8rem, 6vw, 5.6rem);
  text-transform: uppercase;
  margin:         1.3rem 0 1.4rem;
  line-height:    .98;
}
.em-home-page .em-hero__cont h1 em {
  font-style:     italic;
  font-weight:    500;
  color:          var(--em-gold);
  font-family:    Georgia, serif;
  text-transform: none;
}
.em-home-page .em-hero__cont p {
  max-width:   42ch;
  color:       var(--em-muted);
  font-size:   1.1rem;
  margin-bottom: 2rem;
}
.em-home-page .em-hero__deco {
  position:         absolute;
  inset-inline-end: 46%;
  top:              16%;
  font-size:        2rem;
  color:            var(--em-gold);
  opacity:          .5;
  z-index:          3;
}
.em-home-page .em-hero__deco2 {
  position:           absolute;
  inset-inline-start: 6%;
  bottom:             12%;
  font-size:          1.6rem;
  color:              var(--em-teal);
  opacity:            .6;
}

/* Hero marquee columns */
.em-home-page .em-hero__marq {
  display:    flex;
  gap:        1.1rem;
  height:     88vh;
  max-height: 760px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image:         linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.em-home-page .mcol {
  flex:         1;
  display:      flex;
  flex-direction: column;
  gap:          1.1rem;
  will-change:  transform;
}
.em-home-page .mcol .ph {
  flex:            0 0 auto;
  height:          300px;
  border-radius:   14px;
  overflow:        hidden;
  background-size:     cover;
  background-position: center;
  box-shadow:      0 12px 34px rgba(28,24,19,.16);
}
@keyframes em-col-up   { from { transform: translateY(0)    } to { transform: translateY(-50%) } }
@keyframes em-col-down { from { transform: translateY(-50%) } to { transform: translateY(0)    } }
.em-home-page .mcol.up   { animation: em-col-up   26s linear infinite; }
.em-home-page .mcol.down { animation: em-col-down 26s linear infinite; }

/* ===== ABOUT ===== */
.em-home-page .em-about-grid {
  display:     grid;
  grid-template-columns: 1fr 1fr;
  gap:         4.5rem;
  align-items: center;
}
.em-home-page .em-about-imgs {
  position: relative;
  height:   560px;
}
.em-home-page .em-about-imgs .ai {
  position:     absolute;
  border-radius: 16px;
  overflow:     hidden;
  box-shadow:   0 20px 50px rgba(28,24,19,.2);
}
.em-home-page .em-about-imgs .ai img {
  height: 100%; width: 100%; object-fit: cover; display: block;
}
.em-home-page .em-about-imgs .ai1 {
  width: 64%; height: 74%;
  top: 0; inset-inline-start: 0;
  z-index: 1;
}
.em-home-page .em-about-imgs .ai2 {
  width: 54%; height: 60%;
  bottom: 0; inset-inline-end: 0;
  z-index: 2;
  border: 8px solid var(--em-bg);
}
.em-home-page .em-about h2 { margin: 1.3rem 0 1.2rem; }
.em-home-page .em-about p  { color: var(--em-muted); margin-bottom: 1.6rem; max-width: 46ch; }

.em-home-page .em-listo {
  list-style: none;
  display:    grid;
  grid-template-columns: 1fr 1fr;
  gap:        .9rem 1.4rem;
  margin-bottom: 2rem;
}
.em-home-page .em-listo li {
  display:     flex;
  align-items: center;
  gap:         .7rem;
  font-family: var(--em-font-head);
  font-size:   1.15rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.em-home-page .em-listo li svg { color: var(--em-gold); width: 1.3rem; flex-shrink: 0; }

.em-home-page .em-about-foot {
  display:     flex;
  align-items: center;
  gap:         2rem;
  flex-wrap:   wrap;
}
.em-home-page .em-reviews { display: flex; align-items: center; gap: 1rem; }
.em-home-page .em-avatars { display: flex; }
.em-home-page .em-avatars img {
  width:          46px;
  height:         46px;
  border-radius:  50%;
  border:         2px solid var(--em-bg);
  object-fit:     cover;
  margin-inline-start: -12px;
}
.em-home-page .em-avatars img:first-child { margin-inline-start: 0; }
.em-home-page .em-avatars img:hover {
  z-index:   3;
  border-color: var(--em-gold);
  animation: em-bob 1.05s ease-in-out infinite;
}
.em-home-page .em-reviews .c h3 { font-size: 1.8rem; color: var(--em-gold); }
.em-home-page .em-reviews .c span {
  font-size:      .85rem;
  color:          var(--em-muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-family:    var(--em-font-head);
}

/* ===== WATERMARK (section) ===== */
.em-home-page .em-wm {
  font-family:    var(--em-font-head);
  font-weight:    700;
  text-transform: uppercase;
  font-size:      clamp(4rem, 14vw, 12rem);
  color:          var(--em-ink);
  opacity:        .04;
  text-align:     center;
  line-height:    .8;
  letter-spacing: .02em;
  pointer-events: none;
  margin-top:     3rem;
}

/* ===== TOURS ===== */
.em-home-page .em-tours { background: var(--em-bg2); }
.em-home-page .em-tours-grid {
  display:     grid;
  grid-template-columns: 1fr 1.4fr;
  gap:         3.5rem;
  align-items: start;
}
.em-home-page .em-tours-stack {
  position:   sticky;
  top:        120px;
  align-self: start;
}
.em-home-page .em-tours-stack p {
  color:       var(--em-muted);
  margin:      1.2rem 0 1.8rem;
  max-width:   38ch;
}
.em-home-page .em-tour-list { display: flex; flex-direction: column; gap: 1.5rem; perspective: 1100px; }

.em-home-page .em-tour {
  display:        flex;
  flex-direction: column;
  background:     var(--em-bg);
  border:         1px solid var(--em-line);
  border-radius:  22px;
  overflow:       hidden;
  transition:     box-shadow .45s, border-color .45s;
  transform-style: preserve-3d;
  will-change:    transform;
  text-decoration: none;
  color:          var(--em-ink);
}
.em-home-page .em-tour:hover {
  box-shadow:   0 30px 64px rgba(28,24,19,.18);
  border-color: rgba(192,136,58,.45);
}
.em-home-page .em-tour__body { padding: 1.6rem 1.8rem 1.9rem; display: flex; flex-direction: column; }
.em-home-page .em-tour__media {
  position: relative;
  overflow: hidden;
  height:   320px;
}
.em-home-page .em-tour__media .ph {
  position:            absolute;
  left: 0; right: 0;
  top:                 -18%;
  height:              136%;
  background-size:     cover;
  background-position: center;
  will-change:         transform;
  transition:          transform .8s var(--em-ease);
}
.em-home-page .em-tour:hover .em-tour__media .ph { transform: scale(1.06); }
.em-home-page .em-tour__media .go {
  position:          absolute;
  inset-block-end:   1rem;
  inset-inline-end:  1rem;
  width:             50px;
  height:            50px;
  border-radius:     50%;
  background:        var(--em-bg);
  color:             var(--em-ink);
  display:           grid;
  place-items:       center;
  font-size:         1.1rem;
  transform:         scale(0) rotate(-30deg);
  transition:        transform .45s var(--em-ease);
  z-index:           2;
}
.em-home-page .em-tour:hover .em-tour__media .go { transform: scale(1) rotate(0); }

/* shine sweep on tour media */
.em-home-page .em-tour__media::before {
  content:  '';
  position: absolute;
  top: 0; left: 0;
  width:    55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:  translateX(-260%) skewX(-18deg);
  z-index:    3;
  pointer-events: none;
}
.em-home-page .em-tour:hover .em-tour__media::before {
  animation: em-sweep .9s var(--em-ease);
}
@keyframes em-bob {
  0%, 100% { transform: translateY(0);     }
  50%       { transform: translateY(-10px); }
}
@keyframes em-sweep {
  from { transform: translateX(-260%) skewX(-18deg); }
  to   { transform: translateX(360%) skewX(-18deg); }
}

/* gold overlay on hover */
.em-home-page .em-tour__media::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(0deg, rgba(192,136,58,.45), transparent 70%);
  opacity:    0;
  transition: opacity .45s;
  z-index:    1;
}
.em-home-page .em-tour:hover .em-tour__media::after { opacity: 1; }

.em-home-page .em-tour__loc {
  font-size:      .9rem;
  color:          var(--em-gold);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family:    var(--em-font-head);
  font-weight:    600;
  display:        flex;
  align-items:    center;
  gap:            .45rem;
  margin-bottom:  .3rem;
  transition:     transform .45s var(--em-ease);
}
.em-home-page .em-tour__title {
  font-family:    var(--em-font-head);
  font-size:      2.1rem;
  text-transform: uppercase;
  margin:         .1rem 0 1rem;
  line-height:    1;
  transition:     color .35s, transform .45s var(--em-ease);
}
.em-home-page .em-tour__title a {
  color:           inherit;
  text-decoration: none;
}
.em-home-page .em-tour:hover .em-tour__title { color: var(--em-gold); transform: translateX(4px); }
.em-home-page .em-tour__row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  border-top:      1px solid var(--em-line);
  padding-top:     .9rem;
  margin-top:      .5rem;
}
.em-home-page .em-tour__row.no-border { border: none; padding-top: 0; margin-top: 0; }
.em-home-page .em-tour__dur {
  font-size:   .95rem;
  color:       var(--em-muted);
  display:     flex;
  align-items: center;
  gap:         .5rem;
}
.em-home-page .em-tour__price {
  font-family: var(--em-font-head);
  font-weight: 700;
  font-size:   1.9rem;
  color:       var(--em-ink);
}
.em-home-page .em-tour__price span {
  font-size:   .85rem;
  color:       var(--em-muted);
  font-weight: 500;
}
.em-home-page .em-tour__rate {
  font-family: var(--em-font-head);
  font-weight: 600;
  color:       var(--em-gold);
  font-size:   1.05rem;
}

/* ===== SERVICES ===== */
.em-home-page .em-services {
  background: var(--em-dark);
  color:      var(--em-bg);
}
.em-home-page .em-services .em-title { color: var(--em-bg); }

.em-home-page .em-circle-btn {
  width:         190px;
  height:        190px;
  margin:        2.8rem auto;
  position:      relative;
  display:       grid;
  place-items:   center;
  cursor:        pointer;
}
.em-home-page .em-circle-btn::before {
  content:      '';
  position:     absolute;
  inset:        8px;
  border-radius: 50%;
  border:       1px solid rgba(244,236,224,.22);
}
.em-home-page .em-circle-btn .rotate {
  position:  absolute;
  inset:     0;
  animation: em-spin 16s linear infinite;
}
.em-home-page .em-circle-btn .rotate text {
  fill:           var(--em-bg);
  font-family:    var(--em-font-head);
  font-size:      26px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
@keyframes em-spin { to { transform: rotate(360deg); } }
.em-home-page .em-circle-btn .mid {
  width:          64px;
  height:         64px;
  border-radius:  50%;
  background:     var(--em-gold);
  color:          #fff;
  display:        grid;
  place-items:    center;
  font-size:      1.3rem;
  transition:     transform .45s var(--em-ease), box-shadow .4s;
}
.em-home-page .em-circle-btn:hover .mid {
  transform:  scale(1.15);
  box-shadow: 0 0 0 10px rgba(192,136,58,.18);
}

.em-home-page .em-serv-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  perspective:           1100px;
  gap:                   1.5rem;
  margin-top:            2rem;
}
.em-home-page .em-serv {
  position:       relative;
  border:         1px solid rgba(244,236,224,.16);
  border-radius:  24px;
  padding:        2.2rem 1.7rem;
  min-height:     240px;
  display:        flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow:       hidden;
  background:     rgba(244,236,224,.03);
  transition:     border-color .4s, background .4s;
  transform-style: preserve-3d;
  will-change:    transform;
}
.em-home-page .em-serv:hover {
  border-color: rgba(212,162,78,.55);
  background:   rgba(244,236,224,.06);
}
.em-home-page .em-serv .ic {
  font-size:  2.8rem;
  color:      var(--em-gold);
  margin-bottom: auto;
  display:    inline-block;
  transition: transform .5s var(--em-ease);
}
.em-home-page .em-serv:hover .ic { transform: translateY(-6px); }
.em-home-page .em-serv h5 {
  font-family:    var(--em-font-head);
  font-size:      1.55rem;
  text-transform: uppercase;
  margin-top:     1.2rem;
  line-height:    1;
  transition:     color .35s;
}
.em-home-page .em-serv:hover h5 { color: var(--em-gold); }
.em-home-page .em-serv .ar {
  position:              absolute;
  top:                   0;
  inset-inline-end:      0;
  width:                 78px;
  height:                78px;
  background:            var(--em-gold);
  color:                 var(--em-bg);
  display:               grid;
  place-items:           center;
  font-size:             1.4rem;
  border-start-end-radius: 24px;
  border-end-start-radius: 28px;
  opacity:               0;
  transform-origin:      top right;
  transform:             translate(-88px, 82px) scale(.3);
  transition:            transform .55s var(--em-ease), opacity .45s;
  z-index:               2;
  pointer-events:        none;
}
.em-home-page .em-serv:hover .ar { opacity: 1; transform: translate(0, 0) scale(1); }

.em-home-page .em-serv-img {
  margin-top:    3.5rem;
  height:        52vh;
  min-height:    340px;
  border-radius: 22px;
  overflow:      hidden;
  position:      relative;
}
.em-home-page .em-serv-img .ph {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
}

/* ===== TICKER ===== */
.em-home-page .em-ticker-band {
  background: var(--em-gold);
  color:      #fff;
  padding:    1.1rem 0;
  overflow:   hidden;
  white-space: nowrap;
}
.em-home-page .em-ticker-band .track {
  display:        inline-flex;
  animation:      em-tick 30s linear infinite;
  font-family:    var(--em-font-head);
  text-transform: uppercase;
  font-size:      1.5rem;
  font-weight:    600;
  letter-spacing: .04em;
}
.em-home-page .em-ticker-band .track span {
  padding:     0 1.6rem;
  display:     inline-flex;
  align-items: center;
  gap:         1.6rem;
}
.em-home-page .em-ticker-band .track span::before {
  content:     '✦';
  font-size:   .7em;
  opacity:     .8;
}
@keyframes em-tick { to { transform: translateX(-50%); } }

/* ===== TESTIMONIALS ===== */
.em-home-page .em-testi-row {
  display:    flex;
  gap:        14px;
  perspective: 1100px;
  height:     540px;
  margin-top: 2.8rem;
}
.em-home-page .em-tcard {
  position:      relative;
  flex:          1;
  min-width:     0;
  border-radius: 24px;
  overflow:      hidden;
  cursor:        pointer;
  transition:    flex 2s var(--em-ease);
}
.em-home-page .em-tcard.is-active,
.em-home-page .em-tcard:hover { flex: 3.4; }
.em-home-page .em-testi-row:hover .em-tcard:not(:hover) { flex: 1; }

.em-home-page .em-tcard .ph {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
  transition:          transform 2.2s var(--em-ease);
}
.em-home-page .em-tcard.is-active .ph,
.em-home-page .em-tcard:hover .ph { transform: scale(1.05); }
.em-home-page .em-tcard::after {
  content:  '';
  position: absolute;
  inset:    0;
  background: linear-gradient(180deg, transparent 30%, rgba(20,16,10,.55) 65%, rgba(20,16,10,.95));
}
.em-home-page .em-tcard__label {
  position:           absolute;
  inset-block-end:    1.6rem;
  inset-inline-start: 1.7rem;
  z-index:            2;
  writing-mode:       vertical-rl;
  transform:          rotate(180deg);
  font-family:        var(--em-font-head);
  text-transform:     uppercase;
  letter-spacing:     .12em;
  font-size:          1.15rem;
  color:              var(--em-bg);
  white-space:        nowrap;
  transition:         opacity .6s var(--em-ease);
}
.em-home-page .em-tcard__cont {
  position:           absolute;
  inset-block-end:    0;
  inset-inline-start: 0;
  z-index:            2;
  padding:            2.2rem 2.4rem;
  color:              var(--em-bg);
  width:              460px;
  max-width:          78vw;
  opacity:            0;
  transform:          translateY(16px);
  transition:         opacity 1.1s .7s var(--em-ease), transform 1.1s .7s var(--em-ease);
}
.em-home-page .em-tcard__cont .stars {
  color:         var(--em-gold);
  font-size:     .95rem;
  letter-spacing: .15em;
  margin-bottom: .8rem;
}
.em-home-page .em-tcard__cont h6 {
  font-family:    var(--em-font-head);
  text-transform: uppercase;
  font-size:      1.9rem;
  line-height:    1;
  color:          #fff;
  margin-bottom:  .7rem;
}
.em-home-page .em-tcard__cont p { font-size: 1.05rem; opacity: .92; max-width: 40ch; line-height: 1.5; }

/* Travellers row (overlapping avatars + guest count) */
.em-home-page .travellers {
  display:     flex;
  align-items: center;
  gap:         .8rem;
  margin-top:  1.4rem;
}
.em-home-page .travellers img {
  width:               42px;
  height:              42px;
  border-radius:       50%;
  border:              2px solid rgba(244,236,224,.8);
  object-fit:          cover;
  margin-inline-start: -12px;
  position:            relative;
  flex-shrink:         0;
  transition:          border-color .3s;
}
.em-home-page .travellers img:first-child { margin-inline-start: 0; }
.em-home-page .travellers img:hover {
  z-index:   3;
  border-color: var(--em-gold);
  animation: em-bob 1.05s ease-in-out infinite;
}
.em-home-page .travellers span {
  font-family:    var(--em-font-head);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size:      .85rem;
  opacity:        .85;
}

/* Shine sweep on testimonial cards (matches tour/blog/faq sweep) */
.em-home-page .em-tcard::before {
  content:  '';
  position: absolute;
  top: 0; left: 0;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent);
  transform:  translateX(-260%) skewX(-18deg);
  z-index:    3;
  pointer-events: none;
}
.em-home-page .em-tcard.is-active::before,
.em-home-page .em-tcard:hover::before { animation: em-sweep .9s var(--em-ease); }

/* active/hover state visibility */
.em-home-page .em-tcard.is-active .em-tcard__label,
.em-home-page .em-tcard:hover .em-tcard__label { opacity: 0; }
.em-home-page .em-tcard.is-active .em-tcard__cont,
.em-home-page .em-tcard:hover .em-tcard__cont { opacity: 1; transform: none; }
.em-home-page .em-testi-row:hover .em-tcard:not(:hover) .em-tcard__cont { opacity: 0; transform: translateY(14px); }
.em-home-page .em-testi-row:hover .em-tcard:not(:hover) .em-tcard__label { opacity: 1; }

/* ===== FAQ ===== */
.em-home-page .em-faq-sec { background: var(--em-bg2); }
.em-home-page .em-faq-grid {
  display:     grid;
  grid-template-columns: .52fr .52fr 1fr;
  gap:         1.6rem;
  align-items: center;
}
.em-home-page .em-faq-img {
  border-radius: 18px;
  overflow:      hidden;
  height:        430px;
}
.em-home-page .em-faq-img.lower { margin-top: 6rem; }
.em-home-page .em-faq-img img {
  height:     100%;
  width:      100%;
  object-fit: cover;
  will-change: transform;
  display:    block;
  transition: transform .8s var(--em-ease);
}
.em-home-page .em-faq-img:hover img { transform: scale(1.06); }

/* FAQ image shine sweep */
.em-home-page .em-faq-img::before {
  content:  '';
  position: absolute;
  top: 0; left: 0;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:  translateX(-260%) skewX(-18deg);
  z-index:    1;
  pointer-events: none;
}
.em-home-page .em-faq-img {
  position: relative; /* for ::before */
}
.em-home-page .em-faq-img:hover::before { animation: em-sweep .9s var(--em-ease); }

.em-home-page .em-acc { list-style: none; margin-top: 2rem; }
.em-home-page .em-acc li { border-top: 1px solid var(--em-line); }
.em-home-page .em-acc li:last-child { border-bottom: 1px solid var(--em-line); }
.em-home-page .em-acc .q {
  display:      flex;
  align-items:  baseline;
  gap:          1.3rem;
  padding:      1.5rem 0;
  cursor:       pointer;
  font-family:  var(--em-font-head);
  text-transform: uppercase;
  font-size:    1.7rem;
  font-weight:  600;
  line-height:  1.05;
  transition:   color .3s;
}
.em-home-page .em-acc .qn {
  color:      var(--em-gold);
  font-size:  1rem;
  font-weight: 600;
  opacity:    .85;
  min-width:  2.6ch;
}
.em-home-page .em-acc .qt { flex: 1; }
.em-home-page .em-acc .q::after {
  content:     '+';
  color:       var(--em-gold);
  font-size:   1rem;
  align-self:  center;
  transition:  transform .35s;
  line-height: 1;
}
.em-home-page .em-acc li.is-open .q::after { content: '−'; }
.em-home-page .em-acc .q:hover,
.em-home-page .em-acc li.is-open .q { color: var(--em-gold); }
.em-home-page .em-acc .a {
  max-height: 0;
  overflow:   hidden;
  transition: max-height .5s var(--em-ease);
}
.em-home-page .em-acc .a p {
  color:      var(--em-muted);
  padding:    0 0 1.5rem calc(2.6ch + 1.3rem);
  max-width:  54ch;
}

/* ===== BLOG ===== */
.em-home-page .em-blog-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  perspective:           1100px;
  gap:                   1.6rem;
  margin-top:            2.5rem;
  text-align:            start;
}
.em-home-page .em-post {
  position:      relative;
  border-radius: 22px;
  overflow:      hidden;
  height:        480px;
  display:       flex;
  align-items:   flex-end;
  background:    var(--em-dark);
  transition:    box-shadow .55s;
  text-decoration: none;
  color:         var(--em-bg);
  will-change:   transform;
}
.em-home-page .em-post:hover {
  box-shadow: inset 0 0 0 2px var(--em-gold), 0 32px 64px rgba(0,0,0,.34);
}
.em-home-page .em-post .ph {
  position:            absolute;
  inset:               -8%;
  background-size:     cover;
  background-position: center;
  opacity:             0;
  transition:          opacity .6s var(--em-ease);
}
.em-home-page .em-post.is-active .ph,
.em-home-page .em-post:hover .ph { opacity: 1; }
.em-home-page .em-post.is-active .ph,
.em-home-page .em-post:hover .ph {
  animation: shaderDrift 9s ease-in-out infinite alternate;
}
.em-home-page .em-post::after {
  content:  '';
  position: absolute;
  inset:    0;
  background: linear-gradient(180deg, rgba(18,14,9,.4) 0%, rgba(18,14,9,.62) 42%, rgba(18,14,9,.93) 100%);
  z-index: 1;
}
.em-home-page .em-post.is-active { box-shadow: inset 0 0 0 2px var(--em-gold), 0 24px 54px rgba(0,0,0,.3); }

/* shine sweep on post */
.em-home-page .em-post::before {
  content:  '';
  position: absolute;
  top: 0; left: 0;
  width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform:  translateX(-260%) skewX(-18deg);
  z-index:    3;
  pointer-events: none;
}
.em-home-page .em-post:hover::before { animation: em-sweep .9s var(--em-ease); }

.em-home-page .em-post .c {
  position:  relative;
  z-index:   2;
  padding:   2.1rem 2.1rem 2rem;
  width:     100%;
}
.em-home-page .em-post .em-date {
  font-family:    var(--em-font-head);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size:      .82rem;
  display:        flex;
  align-items:    center;
  gap:            .55rem;
  margin-bottom:  .85rem;
  color:          var(--em-gold);
}
.em-home-page .em-post .em-date span { opacity: .72; color: var(--em-bg); }
.em-home-page .em-post h5 {
  font-family:    var(--em-font-head);
  font-size:      1.7rem;
  text-transform: uppercase;
  line-height:    1.08;
  margin-bottom:  .75rem;
}
.em-home-page .em-post p { font-size: .95rem; line-height: 1.6; opacity: .88; }
.em-home-page .em-post .arrow {
  margin-top:    1.3rem;
  width:         46px;
  height:        46px;
  border-radius: 50%;
  border:        1px solid rgba(244,236,224,.42);
  display:       grid;
  place-items:   center;
  transition:    background .35s, color .35s, transform .45s var(--em-ease);
}
.em-home-page .em-post:hover .arrow,
.em-home-page .em-post.is-active .arrow {
  background:  var(--em-gold);
  border-color: var(--em-gold);
  color:       #fff;
}
.em-home-page .em-post:hover .arrow { transform: translate(4px, -4px); }

/* ===== FOOTER ===== */
.em-home-page .em-site-footer {
  background:   var(--em-dark);
  color:        var(--em-bg);
  padding-top:  5rem;
  padding-bottom: 2.5rem;
}
.em-home-page .em-subscribe {
  text-align: center;
  max-width:  640px;
  margin:     0 auto 3.5rem;
}
.em-home-page .em-subscribe .em-title { color: var(--em-bg); }
.em-home-page .em-newsletter {
  display:      flex;
  gap:          .6rem;
  max-width:    440px;
  margin:       1.6rem auto .8rem;
  background:   rgba(244,236,224,.08);
  border:       1px solid rgba(244,236,224,.2);
  border-radius: 999px;
  padding:      .4rem .4rem .4rem 1.4rem;
}
.em-home-page .em-newsletter input {
  flex:       1;
  background: none;
  border:     none;
  color:      var(--em-bg);
  font-family: var(--em-font-body);
  font-size:  1rem;
  outline:    none;
}
.em-home-page .em-newsletter input::placeholder { color: rgba(244,236,224,.5); }
.em-home-page .em-newsletter button {
  width:          48px;
  height:         48px;
  border-radius:  50%;
  background:     var(--em-gold);
  color:          #fff;
  border:         none;
  cursor:         pointer;
  display:        grid;
  place-items:    center;
  flex-shrink:    0;
  transition:     background .2s, transform .2s;
}
.em-home-page .em-newsletter button:hover { background: var(--em-gold-d); transform: scale(1.08); }
.em-home-page .em-subscribe > p { color: rgba(244,236,224,.6); font-size: .9rem; }

.em-home-page .em-insta-strip {
  display:               grid;
  grid-template-columns: repeat(6, 1fr);
  gap:                   .5rem;
}
.em-home-page .em-insta-strip .ig {
  position: relative;
  height:   150px;
  overflow: hidden;
}
.em-home-page .em-insta-strip .ig .ph {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
  transition:          transform .6s;
}
.em-home-page .em-insta-strip .ig:hover .ph { transform: scale(1.12); }
.em-home-page .em-insta-strip .ig:not(.follow)::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: rgba(192,136,58,0);
  transition: background .4s;
  z-index:    1;
}
.em-home-page .em-insta-strip .ig:not(.follow):hover::before { background: rgba(192,136,58,.55); }
.em-home-page .em-insta-strip .ig.follow {
  display:        grid;
  place-items:    center;
  background:     var(--em-gold);
  color:          #fff;
  font-family:    var(--em-font-head);
  text-transform: uppercase;
  text-align:     center;
  font-weight:    600;
  letter-spacing: .05em;
  text-decoration: none;
}

.em-home-page .em-foot-bottom {
  border-top:  1px solid rgba(244,236,224,.14);
  margin-top:  3rem;
  padding:     1.8rem 0;
  display:     flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap:   wrap;
  gap:         1rem;
}
.em-home-page .em-foot-bottom .links ul {
  list-style: none;
  display:    flex;
  gap:        1.4rem;
}
.em-home-page .em-foot-bottom .links a {
  font-family:    var(--em-font-head);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size:      .95rem;
  color:          var(--em-bg);
  text-decoration: none;
  transition:     color .2s;
}
.em-home-page .em-foot-bottom .links a:hover { color: var(--em-gold); }
.em-home-page .em-foot-bottom .em-social { display: flex; gap: .7rem; }
.em-home-page .em-foot-bottom .em-social a {
  width:          38px;
  height:         38px;
  border-radius:  50%;
  border:         1px solid rgba(244,236,224,.3);
  display:        grid;
  place-items:    center;
  color:          var(--em-bg);
  text-decoration: none;
  transition:     background .3s, border-color .3s;
  font-size:      .9rem;
}
.em-home-page .em-foot-bottom .em-social a:hover {
  background:   var(--em-gold);
  border-color: var(--em-gold);
}
.em-home-page .em-foot-bottom p { color: rgba(244,236,224,.7); font-size: .9rem; }

.em-home-page .em-foot-wm {
  color:          var(--em-bg);
  opacity:        .05;
  font-family:    var(--em-font-head);
  font-weight:    700;
  text-transform: uppercase;
  font-size:      clamp(4rem, 14vw, 12rem);
  text-align:     center;
  line-height:    .8;
  letter-spacing: .02em;
  pointer-events: none;
  margin-top:     1rem;
  /* Continuous side-to-side drift — always centered, always moving */
  animation:      em-wm-drift 14s ease-in-out infinite alternate;
}
@keyframes em-wm-drift {
  from { transform: translateX(-28px); }
  to   { transform: translateX(28px); }
}

/* ===== RESPONSIVE ===== */

/* ── Tablet (≤ 1000px) ──────────────────────────────────────────── */
@media (max-width: 1000px) {
  /* Hero — collapse to 1 column; marq becomes a translucent background */
  .em-home-page .em-hero            { grid-template-columns: 1fr; padding-top: 6.5rem; background: var(--em-bg); }
  /* Marq: take out of grid flow, layer behind text as a decorative background */
  .em-home-page .em-hero__marq      { display: flex; position: absolute; inset: 0; height: 100%; max-height: none; opacity: .28; pointer-events: none; z-index: 0; overflow: hidden; gap: .5rem; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 82%, transparent 100%); }
  .em-home-page .em-hero__cont      { position: relative; z-index: 2; }
  .em-home-page .em-hero__deco,
  .em-home-page .em-hero__deco2     { z-index: 2; }
  .em-home-page .em-hero__cont h1   { font-size: clamp(3rem, 8vw, 5rem); }

  /* About */
  .em-home-page .em-about-grid      { grid-template-columns: 1fr; gap: 2.5rem; }
  .em-home-page .em-about-imgs      { height: 420px; }

  /* Tours */
  .em-home-page .em-tours-grid      { grid-template-columns: 1fr; gap: 2.5rem; }
  .em-home-page .em-tours-stack     { position: static; }
  .em-home-page .em-tours-stack p   { max-width: 100%; }

  /* Services */
  .em-home-page .em-serv-grid       { grid-template-columns: 1fr 1fr; gap: 1rem; }

  /* Testimonials */
  .em-home-page .em-testi-row       { flex-direction: column; height: auto; gap: 1rem; }
  .em-home-page .em-tcard           { flex: none !important; height: 360px; }
  .em-home-page .em-tcard__label    { display: none; }
  .em-home-page .em-tcard__cont     { opacity: 1 !important; transform: none !important; width: 100%; max-width: 100%; }

  /* FAQ — hide images on tablet, show only accordion */
  .em-home-page .em-faq-grid        { grid-template-columns: 1fr; }
  .em-home-page .em-faq-img         { display: none; }

  /* Blog */
  .em-home-page .em-blog-grid       { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .em-home-page .em-blog-grid .em-post { height: 400px; }

  /* Footer */
  .em-home-page .em-insta-strip     { grid-template-columns: repeat(3, 1fr); }
  .em-home-page .em-foot-bottom     { flex-direction: column; align-items: flex-start; }
}

/* ── Mobile (≤ 640px) ───────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Nav — scoped overrides needed because .em-home-page .em-* has specificity 0,2,0
     which beats the generic .em-* rules at 0,1,0 in main.css */
  .em-home-page .em-nav             { padding: .95rem .85rem; }
  .em-home-page .em-brand           { font-size: 1.1rem; gap: .28rem; }
  .em-home-page .em-nav-actions     { gap: .45rem; }
  .em-home-page .em-nav-links       { display: none; }
  .em-home-page .em-burger          { display: block; }

  /* Hero — tighten padding; marq at very low opacity so text is always readable */
  .em-home-page .em-hero            { padding: 5.5rem 1.2rem 3rem; }
  .em-home-page .em-hero__marq      { opacity: .20; gap: .35rem; }
  .em-home-page .em-hero__deco,
  .em-home-page .em-hero__deco2     { display: none; }
  .em-home-page .em-hero__cont h1   { font-size: clamp(2.6rem, 10vw, 4rem); }
  .em-home-page .em-hero__cont p    { max-width: 100%; font-size: 1rem; }
  .em-home-page .em-hero__actions   { flex-wrap: wrap; gap: .8rem; }

  /* Blog cards — always show the shader/image on touch (no hover available) */
  .em-home-page .em-post .ph        { opacity: .88; animation: shaderDrift 12s ease-in-out infinite alternate; }
  /* Testimonial card image always visible + drifting on mobile (no hover) */
  .em-home-page .em-tcard .ph       { transform: scale(1.02) !important; animation: shaderDrift 14s ease-in-out infinite alternate; }

  /* About */
  .em-home-page .em-about-imgs      { height: 280px; }
  .em-home-page .em-about-foot      { flex-direction: column; gap: 1rem; }
  .em-home-page .em-listo           { grid-template-columns: 1fr; }
  .em-home-page .em-avatars         { flex-wrap: nowrap; }

  /* Tours */
  .em-home-page .em-tour__media     { height: 220px; }
  .em-home-page .em-tour__media .ph { animation: shaderDrift 16s ease-in-out infinite alternate; }
  .em-home-page .em-tour__title     { font-size: 1.7rem; }
  .em-home-page .em-tour__price     { font-size: 1.6rem; }

  /* Services */
  .em-home-page .em-serv-grid       { grid-template-columns: 1fr; gap: .9rem; }
  .em-home-page .em-serv-img        { min-height: 220px; height: 40vw; }
  .em-home-page .em-serv            { min-height: 200px; }

  /* Testimonials */
  .em-home-page .em-tcard           { height: 300px; }
  .em-home-page .em-tcard__cont h6  { font-size: 1.5rem; }
  .em-home-page .em-tcard__cont     { padding: 1.4rem 1.4rem; }

  /* Blog */
  .em-home-page .em-blog-grid       { grid-template-columns: 1fr; gap: .9rem; }
  .em-home-page .em-blog-grid .em-post { height: 320px; }

  /* FAQ */
  .em-home-page .em-faq-grid        { display: block; }
  .em-home-page .em-faq-img         { display: none; }
  .em-home-page .em-acc .q          { font-size: 1.35rem; }

  /* Footer */
  .em-home-page .em-insta-strip     { grid-template-columns: repeat(2, 1fr); }
  .em-home-page .em-foot-bottom     { align-items: center; text-align: center; }
  .em-home-page .em-foot-bottom .links ul { flex-wrap: wrap; gap: .6rem 1.2rem; justify-content: center; }
  .em-home-page .em-newsletter      { flex-direction: column; border-radius: 16px; padding: .8rem; gap: .6rem; }
  .em-home-page .em-newsletter button { width: 100%; border-radius: 999px; height: 48px; }

  /* Section headings */
  .em-home-page .em-title           { font-size: clamp(2rem, 8vw, 3rem); }
  .em-home-page .sec                { padding: clamp(3.5rem, 9vw, 5rem) 0; }
  .em-home-page .container          { width: 94vw; }
}

/* ══════════════════════════════════════════════════════════════════
 * CINEMATIC HERO  —  active only when a poster/video is uploaded
 * (.em-hero--cinema). Without one, the original marquee hero above
 * renders untouched.
 * ══════════════════════════════════════════════════════════════════ */
.em-home-page .em-hero--cinema {
  grid-template-columns: 1fr;
  align-items:    end;
  /* svh, not vh: stops the hero jumping when mobile browser chrome
     hides on scroll. vh stays first as the fallback for old engines. */
  min-height:     100vh;
  min-height:     100svh;
  padding:        7.5rem clamp(1.2rem, 5vw, 3rem) clamp(3rem, 7vw, 5rem);
  isolation:      isolate;
}

.em-home-page .em-hero__media {
  position: absolute;
  inset:    0;
  z-index:  0;
  overflow: hidden;
  /* painted before the image decodes, so there is never a white flash */
  background: var(--em-dark, #16130d);
}
.em-home-page .em-hero__poster,
.em-home-page .em-hero__video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  /* slight bias to the upper third — horizons and skylines sit there */
  object-position: center 40%;
  display:    block;
  margin:     0;
  max-width:  none;
}
.em-home-page .em-hero__video {
  opacity:    0;
  transition: opacity 1.1s var(--em-ease);
  pointer-events: none;
}
.em-home-page .em-hero__video.is-playing { opacity: 1; }

/* One purposeful scrim. Denser at the bottom where the copy sits, so
   the text keeps contrast without flattening the footage. */
.em-home-page .em-hero__scrim {
  position: absolute;
  inset:    0;
  background:
    linear-gradient(to top,
      rgba(12,10,7,.88) 0%,
      rgba(12,10,7,.62) 28%,
      rgba(12,10,7,.22) 58%,
      rgba(12,10,7,.34) 100%);
}

/* Copy sits above the media and is explicitly light — it must not
   inherit the light-mode ink colour and vanish into the footage. */
.em-home-page .em-hero--cinema .em-hero__cont {
  position:  relative;
  z-index:   2;
  max-width: 46rem;
  color:     #f7f1e6;
}
.em-home-page .em-hero--cinema .em-hero__cont h1 { color: #fff; }
.em-home-page .em-hero--cinema .em-hero__cont h1 em { color: var(--em-gold); }
.em-home-page .em-hero--cinema .em-hero__cont p {
  color:       rgba(247,241,230,.86);
  max-width:   46ch;
  text-shadow: 0 1px 18px rgba(0,0,0,.35);
}
.em-home-page .em-hero--cinema .em-subtitle { color: var(--em-gold); }

/* On the dark hero the default dark button would disappear */
.em-home-page .em-hero--cinema .btn {
  background: var(--em-gold);
  color:      #16130d;
}
.em-home-page .em-hero--cinema .btn:hover { background: #fff; }
.em-home-page .em-hero--cinema .btn .arr {
  background: #16130d;
  color:      var(--em-gold);
}

/* ══════════════════════════════════════════════════════════════════
 * HERO TRUST / REVIEW STRIP
 * ══════════════════════════════════════════════════════════════════ */
.em-home-page .em-hero__trust {
  display:         inline-flex;
  align-items:     center;
  gap:             .85rem;
  margin-top:      1.7rem;
  padding:         .55rem .95rem .55rem .6rem;
  border-radius:   999px;
  border:          1px solid rgba(192,136,58,.28);
  background:      rgba(28,24,19,.34);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  text-decoration: none;
  color:           inherit;
  transition:      border-color .3s var(--em-ease), background .3s var(--em-ease);
}
.em-home-page a.em-hero__trust:hover {
  border-color: rgba(192,136,58,.6);
  background:   rgba(28,24,19,.5);
}
/* Non-cinema hero sits on the light papyrus ground */
.em-home-page .em-hero:not(.em-hero--cinema):not(.em-hero--split) .em-hero__trust {
  background:   rgba(28,24,19,.045);
  border-color: rgba(28,24,19,.12);
}

.em-home-page .em-trust__avatars {
  display:     inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.em-home-page .em-trust__avatar {
  width:         34px;
  height:        34px;
  border-radius: 50%;
  object-fit:    cover;
  display:       block;
  /* logical margin so the overlap direction flips correctly in Arabic */
  margin-inline-start: -11px;
  border:        2px solid var(--em-bg);
  box-shadow:    0 1px 4px rgba(0,0,0,.22);
}
.em-home-page .em-hero--cinema .em-trust__avatar { border-color: rgba(247,241,230,.9); }
.em-home-page .em-trust__avatar:first-child { margin-inline-start: 0; }

.em-home-page .em-trust__text {
  display:        flex;
  flex-direction: column;
  gap:            .12rem;
  line-height:    1.25;
}
.em-home-page .em-trust__stars {
  display: inline-flex;
  gap:     1px;
  color:   var(--em-gold);
}
.em-home-page .em-trust__star.is-empty { opacity: .28; }
.em-home-page .em-trust__label {
  font-size:      .85rem;
  font-weight:    500;
  letter-spacing: .012em;
  color:          rgba(247,241,230,.92);
  white-space:    nowrap;
}
.em-home-page .em-hero:not(.em-hero--cinema):not(.em-hero--split) .em-trust__label { color: var(--em-ink); }
.em-home-page .em-trust__sep { opacity: .5; margin: 0 .12rem; }

/* ══════════════════════════════════════════════════════════════════
 * DESTINATION SLIDER
 * ══════════════════════════════════════════════════════════════════ */
.em-home-page .em-dslider { padding: clamp(4.5rem, 10vw, 8rem) 0 clamp(3rem, 7vw, 5rem); }

.em-home-page .em-dslider__head {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  gap:             2rem;
  margin-bottom:   clamp(1.8rem, 4vw, 3rem);
}
.em-home-page .em-dslider__intro { max-width: 46rem; }
.em-home-page .em-dslider__title {
  font-family:    var(--em-font-head);
  font-size:      clamp(2.2rem, 5vw, 3.8rem);
  text-transform: uppercase;
  line-height:    1;
  margin:         .6rem 0 0;
}
.em-home-page .em-dslider__lede {
  color:     var(--em-muted);
  max-width: 52ch;
  margin:    .9rem 0 0;
}

/* Arrows — ui.js unhides these only when the track overflows */
.em-home-page .em-dslider__nav { display: flex; gap: .5rem; flex-shrink: 0; }
.em-home-page .em-dslider__nav[hidden] { display: none; }
.em-home-page .em-dslider__arrow {
  width:         46px;
  height:        46px;
  border-radius: 50%;
  display:       grid;
  place-items:   center;
  background:    transparent;
  color:         var(--em-ink);
  border:        1px solid rgba(122,111,95,.34);
  cursor:        pointer;
  transition:    background .3s var(--em-ease), color .3s var(--em-ease),
                 border-color .3s var(--em-ease), opacity .3s var(--em-ease);
}
.em-home-page .em-dslider__arrow:hover:not(:disabled) {
  background:   var(--em-ink);
  border-color: var(--em-ink);
  color:        var(--em-bg);
}
.em-home-page .em-dslider__arrow:disabled { opacity: .3; cursor: default; }
/* Arrow glyphs are physical arrows — mirror them for Arabic */
html[dir="rtl"] .em-home-page .em-dslider__arrow svg { transform: scaleX(-1); }

/* The track: native scroll-snap does all the scrolling and swiping */
.em-home-page .em-dslider__track {
  display:            flex;
  gap:                clamp(.9rem, 1.6vw, 1.4rem);
  overflow-x:         auto;
  overflow-y:         hidden;
  scroll-snap-type:   x mandatory;
  scroll-behavior:    smooth;
  /* stops a horizontal swipe turning into browser back-navigation */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  list-style:         none;
  margin:             0;
  padding:            .5rem 0 1.4rem;
  scrollbar-width:    none;
}
.em-home-page .em-dslider__track::-webkit-scrollbar { display: none; }
.em-home-page .em-dslider__track:focus-visible {
  outline:        2px solid var(--em-gold);
  outline-offset: 4px;
  border-radius:  4px;
}

.em-home-page .em-dslider__item {
  flex:              0 0 clamp(248px, 27vw, 340px);
  scroll-snap-align: start;
  margin:            0;
}

.em-home-page .em-dcard-s {
  display:         flex;
  flex-direction:  column;
  height:          100%;
  text-decoration: none;
  color:           inherit;
}
.em-home-page .em-dcard-s__media {
  position:      relative;
  display:       block;
  aspect-ratio:  3 / 4;
  border-radius: 16px;
  overflow:      hidden;
  background:    var(--em-bg2);
  /* isolate so the scaling image cannot bleed past the radius */
  isolation:     isolate;
}
.em-home-page .em-dcard-s__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  transition: transform .8s var(--em-ease);
}
.em-home-page .em-dcard-s:hover .em-dcard-s__img,
.em-home-page .em-dcard-s:focus-visible .em-dcard-s__img { transform: scale(1.055); }

.em-home-page .em-dcard-s__noimg {
  position:    absolute;
  inset:       0;
  display:     grid;
  place-items: center;
  color:       var(--em-muted);
  opacity:     .45;
}
.em-home-page .em-dcard-s__travel {
  position:            absolute;
  inset-block-start:   .8rem;
  inset-inline-start:  .8rem;
  background:          rgba(28,24,19,.62);
  backdrop-filter:     blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color:               #f7f1e6;
  font-family:         var(--em-font-head);
  font-size:           .72rem;
  letter-spacing:      .1em;
  text-transform:      uppercase;
  padding:             .3rem .6rem;
  border-radius:       999px;
}

.em-home-page .em-dcard-s__body {
  display:        flex;
  flex-direction: column;
  gap:            .35rem;
  padding:        1rem .15rem 0;
}
.em-home-page .em-dcard-s__title {
  font-family:    var(--em-font-head);
  font-size:      1.45rem;
  text-transform: uppercase;
  line-height:    1.1;
  letter-spacing: .01em;
  transition:     color .3s var(--em-ease);
}
.em-home-page .em-dcard-s:hover .em-dcard-s__title { color: var(--em-gold); }
.em-home-page .em-dcard-s__desc {
  color:       var(--em-muted);
  font-size:   .93rem;
  line-height: 1.5;
}
.em-home-page .em-dcard-s__cta {
  display:        inline-flex;
  align-items:    center;
  gap:            .4rem;
  margin-top:     .35rem;
  font-family:    var(--em-font-head);
  font-size:      .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--em-gold);
}
html[dir="rtl"] .em-home-page .em-dcard-s__cta svg { transform: scaleX(-1); }

.em-home-page .em-dslider__foot { margin-top: .6rem; }
.em-home-page .em-dslider__all {
  display:         inline-flex;
  align-items:     center;
  gap:             .5rem;
  font-family:     var(--em-font-head);
  font-size:       .85rem;
  letter-spacing:  .14em;
  text-transform:  uppercase;
  color:           var(--em-ink);
  text-decoration: none;
  border-bottom:   1px solid rgba(122,111,95,.4);
  padding-bottom:  .25rem;
  transition:      color .3s var(--em-ease), border-color .3s var(--em-ease);
}
.em-home-page .em-dslider__all:hover {
  color:        var(--em-gold);
  border-color: var(--em-gold);
}
html[dir="rtl"] .em-home-page .em-dslider__all svg { transform: scaleX(-1); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .em-home-page .em-dslider__item { flex-basis: clamp(240px, 38vw, 300px); }
}
@media (max-width: 768px) {
  .em-home-page .em-hero--cinema {
    padding:    6.5rem 1.2rem 3rem;
    min-height: 92svh;
  }
  .em-home-page .em-dslider__head {
    flex-direction: column;
    align-items:    flex-start;
    gap:            1.2rem;
  }
  /* Arrows are redundant next to a thumb — swiping is the interaction */
  .em-home-page .em-dslider__nav { display: none !important; }
  .em-home-page .em-dslider__item { flex-basis: 72vw; }
  .em-home-page .em-hero__trust {
    /* let it wrap instead of forcing horizontal overflow */
    flex-wrap: wrap;
    row-gap:   .4rem;
  }
  .em-home-page .em-trust__label { white-space: normal; }
}
@media (max-width: 420px) {
  .em-home-page .em-dslider__item  { flex-basis: 80vw; }
  .em-home-page .em-trust__avatar  { width: 30px; height: 30px; }
  .em-home-page .em-trust__label   { font-size: .8rem; }
}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .em-home-page .em-dslider__track { scroll-behavior: auto; }
  .em-home-page .em-dcard-s__img,
  .em-home-page .em-hero__video { transition: none; }
  .em-home-page .em-dcard-s:hover .em-dcard-s__img { transform: none; }
}

/* Editor-only empty state where fabricated demo tours used to render */
.em-home-page .em-tours-empty {
  color:      var(--em-muted);
  font-size:  .95rem;
  padding:    1.4rem 0;
  border-top: 1px solid rgba(122,111,95,.2);
}
.em-home-page .em-tours-empty a { color: var(--em-gold); }

/* ── Nav contrast over the cinematic hero ────────────────────────
   The header is transparent until it scrolls. Over the dark photo/video
   hero its ink-dark links vanish, so while un-scrolled they go light.
   Once .em-nav--scrolled paints the papyrus bar, the normal dark text
   is correct again and these rules stop applying. */
.em-hero-cinema .em-nav:not(.em-nav--scrolled) .em-brand,
.em-hero-cinema .em-nav:not(.em-nav--scrolled) .em-nav-links > li > a,
.em-hero-cinema .em-nav:not(.em-nav--scrolled) .em-lang__current,
.em-hero-cinema .em-nav:not(.em-nav--scrolled) .em-burger {
  color: #f7f1e6;
}
.em-hero-cinema .em-nav:not(.em-nav--scrolled) .em-theme-sw__btn {
  color:        rgba(247,241,230,.72);
  border-color: rgba(247,241,230,.28);
}
.em-hero-cinema .em-nav:not(.em-nav--scrolled) .em-theme-sw__btn.is-active {
  color: #16130d;
}
/* The dropdown panel is DARK (--em-dark #16130d). This rule used to force
   its links to --em-ink (#1c1813) on the home page — near-black text on a
   near-black panel, about 1.06:1 contrast, i.e. invisible. The comment
   claimed the panel had "its own light surface", which stopped being true
   when the panel was restyled. The links now keep the light colour set in
   main.css, which is correct on every page. */

/* Brand wordmark is a Latin proper noun — keep it LTR so Arabic does not
   flip the flex children and render it as "Magic Egypt". */
.em-brand { direction: ltr; }
html[dir="rtl"] .em-brand { text-align: right; }

/* ══════════════════════════════════════════════════════════════════
 * DESIGN REFINEMENT — approved direction
 * Overrides the earlier hero-trust and destination-card rules.
 * ══════════════════════════════════════════════════════════════════ */

/* ── CTA + trust stack ──────────────────────────────────────────
   The button and the trust strip are both inline-flex, so without an
   explicit column wrapper they sat side by side and the trust strip
   read as a second horizontal CTA. It must own the row beneath. */
.em-home-page .em-hero__cta-group {
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  gap:             1.15rem;
  margin-top:      .4rem;
}

/* ── Trust strip: avatars / stars / text, stacked ──────────────── */
.em-home-page .em-hero__trust {
  display:         flex;
  flex-direction:  column;
  align-items:     flex-start;
  gap:             .42rem;
  /* no pill, no card, no blur — the reference is a light composition
     sitting on the hero, not a boxed control */
  margin-top:      0;
  padding:         0;
  border:          none;
  border-radius:   0;
  background:      none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-decoration: none;
  color:           inherit;
}
.em-home-page a.em-hero__trust:hover {
  background: none;
  border:     none;
}
.em-home-page .em-hero:not(.em-hero--cinema):not(.em-hero--split) .em-hero__trust {
  background:   none;
  border-color: transparent;
}

.em-home-page .em-trust__avatars { display: inline-flex; align-items: center; }
.em-home-page .em-trust__avatar {
  width:  38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  /* logical margin so the overlap flips correctly in Arabic */
  margin-inline-start: -12px;
  border: 2px solid var(--em-bg);
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.em-home-page .em-trust__avatar:first-child { margin-inline-start: 0; }
.em-home-page .em-hero--cinema .em-trust__avatar { border-color: rgba(247,241,230,.92); }

.em-home-page .em-trust__text {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            .22rem;
  line-height:    1.3;
}
.em-home-page .em-trust__stars { display: inline-flex; gap: 2px; color: var(--em-gold); }
.em-home-page .em-trust__star  { width: 15px; height: 15px; }
.em-home-page .em-trust__star.is-empty { opacity: .26; }

.em-home-page .em-trust__label {
  font-size:      .88rem;
  font-weight:    500;
  letter-spacing: .008em;
  color:          var(--em-ink);
  white-space:    nowrap;
}
.em-home-page .em-hero--cinema .em-trust__label { color: rgba(247,241,230,.94); }
.em-home-page .em-trust__sep { opacity: .45; margin: 0 .18rem; }

/* ══════════════════════════════════════════════════════════════════
 * DESTINATION CARDS — smaller, image-first, editorial
 * ══════════════════════════════════════════════════════════════════ */
.em-home-page .em-dslider__item {
  /* materially smaller than before (was up to 340px) so the section
     reads as a carousel of many, not a row of panels */
  flex: 0 0 clamp(196px, 19vw, 252px);
}

.em-home-page .em-dcard-s__media {
  aspect-ratio:  3 / 4;
  border-radius: 14px;
  background:    var(--em-bg2);
}

/* Gradient scrim + overlaid name: the image is the primary element */
.em-home-page .em-dcard-s__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(12,10,7,.80) 0%,
    rgba(12,10,7,.34) 34%,
    rgba(12,10,7,0)   62%);
  pointer-events: none;
  transition: opacity .5s var(--em-ease);
}
.em-home-page .em-dcard-s:hover .em-dcard-s__media::after { opacity: .88; }

.em-home-page .em-dcard-s__overlay {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: .85rem .9rem;
  z-index: 2;
  pointer-events: none;
}
.em-home-page .em-dcard-s__overlay .em-dcard-s__title {
  color: #fff;
  font-family: var(--em-font-head);
  font-size: 1.22rem;
  text-transform: uppercase;
  letter-spacing: .015em;
  line-height: 1.05;
  display: block;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}

.em-home-page .em-dcard-s__travel {
  inset-block-start: .6rem;
  inset-inline-start: .6rem;
  font-size: .64rem;
  padding: .22rem .48rem;
  background: rgba(12,10,7,.55);
  z-index: 2;
}

/* Body below the image: one short muted line + CTA, tight */
.em-home-page .em-dcard-s__body {
  gap:     .3rem;
  padding: .7rem .1rem 0;
}
.em-home-page .em-dcard-s__desc {
  font-size:   .84rem;
  line-height: 1.45;
  color:       var(--em-muted);
  /* keep every card the same height — two lines maximum */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.em-home-page .em-dcard-s__cta {
  margin-top: .15rem;
  font-size:  .72rem;
  letter-spacing: .13em;
}

/* Placeholder only ever shows when a destination genuinely has no image */
.em-home-page .em-dcard-s__noimg { opacity: .32; }

/* ── Autoplay hygiene ───────────────────────────────────────────
   The track is scrolled by JS; keep it smooth but never animate when
   the visitor has asked for reduced motion. */
.em-home-page .em-dslider__track { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .em-home-page .em-dslider__track { scroll-behavior: auto; }
  .em-home-page .em-dcard-s__media::after { transition: none; }
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .em-home-page .em-dslider__item { flex-basis: clamp(190px, 27vw, 230px); }
}
@media (max-width: 768px) {
  .em-home-page .em-dslider__item { flex-basis: 58vw; }
  .em-home-page .em-hero__cta-group { gap: 1rem; }
  .em-home-page .em-trust__label { white-space: normal; font-size: .84rem; }
}
@media (max-width: 420px) {
  .em-home-page .em-dslider__item { flex-basis: 66vw; }
  .em-home-page .em-trust__avatar { width: 34px; height: 34px; }
  .em-home-page .em-trust__label  { font-size: .8rem; }
}

/* ══════════════════════════════════════════════════════════════════
 * HERO TRUST STRIP — single horizontal row
 *
 *   [avatars][avatars][avatars]   ★★★★★   5.0/5 Google rating · 2000+…
 *
 * Still its own row directly beneath the Explore Tours CTA (the column
 * wrapper .em-hero__cta-group is unchanged) — only the strip's internal
 * axis changes from column to row.
 *
 * The markup nests the stars and the label inside .em-trust__text, so
 * BOTH that element and the outer strip have to become rows for the
 * three parts to sit on one line.
 * ══════════════════════════════════════════════════════════════════ */
.em-home-page .em-hero__trust {
  flex-direction: row;
  align-items:    center;
  flex-wrap:      nowrap;
  gap:            12px;
}

/* Avatars and stars keep their intrinsic width; only the text may shrink */
.em-home-page .em-trust__avatars { flex-shrink: 0; }
.em-home-page .em-trust__stars   { flex-shrink: 0; }

.em-home-page .em-trust__text {
  flex-direction: row;
  align-items:    center;
  flex-wrap:      nowrap;
  gap:            10px;
  min-width:      0;   /* lets the label shrink instead of forcing overflow */
}

.em-home-page .em-trust__label {
  white-space: nowrap;
  min-width:   0;
}

/* RTL: `direction: rtl` mirrors the row on its own — avatars end up on the
   right, then stars, then the text on the left. The avatar overlap already
   uses margin-inline-start, so it flips with it. Nothing to reverse by hand;
   this rule only re-asserts centring after the earlier column rules. */
html[dir="rtl"] .em-home-page .em-hero__trust,
html[dir="rtl"] .em-home-page .em-trust__text {
  align-items: center;
}

/* ── Small screens ──────────────────────────────────────────────────
   Below ~560px the three parts cannot share one line: avatars (~78px) +
   stars (~83px) + gaps leaves too little for the sentence. Wrap
   gracefully instead of overflowing — avatars and stars stay together on
   the first line and the sentence moves beneath them. */
@media (max-width: 560px) {
  .em-home-page .em-hero__trust {
    flex-wrap: wrap;
    gap:       8px 10px;
  }
  .em-home-page .em-trust__text {
    flex-wrap: wrap;
    gap:       6px 10px;
    /* shrink so the stars stay on row 1 beside the avatars; only the
       sentence drops to row 2. Without this the text block claims a full
       line and pushes the avatars onto a row of their own (3 rows). */
    flex:      1 1 0;
    min-width: 0;
  }
  .em-home-page .em-trust__label {
    white-space: normal;
    flex-basis:  100%;   /* own line, full width, never clipped */
    line-height: 1.35;
  }
}

/* ══════════════════════════════════════════════════════════════════
 * SPLIT HERO — text column + framed portrait video column
 *
 * The supplied footage is 464x848 portrait. Forced across a full-bleed
 * landscape background it would need a ~3x upscale and lose two thirds
 * of the frame, so it gets a portrait frame at its native ratio instead.
 * ══════════════════════════════════════════════════════════════════ */
.em-home-page .em-hero--split {
  grid-template-columns: 1.05fr .95fr;
  align-items:  center;
  gap:          clamp(2rem, 5vw, 4.5rem);
  min-height:   100vh;
  min-height:   100svh;
  padding:      7.5rem clamp(1.2rem, 5vw, 3rem) clamp(3rem, 6vw, 4.5rem);
  /* light papyrus ground — the media is framed, not a backdrop */
  background:   var(--em-bg);
}
.em-home-page .em-hero--split .em-hero__cont {
  position: relative;
  z-index:  2;
  max-width: 34rem;
}

/* ── Media column ───────────────────────────────────────────────── */
.em-home-page .em-hero__mediacol {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-width:       0;   /* never force the grid wider than the viewport */
}

.em-home-page .em-hero__vframe {
  position:      relative;
  margin:        0;
  /* Height drives the box and aspect-ratio derives the width. Sizing the
     other way (width + max-height) let the height clamp AFTER layout, which
     both broke the native ratio (0.585 measured instead of 0.547) and shifted
     the page — CLS 0.29 at 768px. */
  height:        min(74svh, 690px);
  width:         auto;
  max-width:     100%;
  aspect-ratio:  var(--em-v-ratio, 464 / 848);
  border-radius: 26px;
  overflow:      hidden;
  background:    var(--em-dark, #16130d);
  isolation:     isolate;
  box-shadow:
    0 2px 6px rgba(28,24,19,.06),
    0 18px 44px -12px rgba(28,24,19,.30),
    0 42px 90px -30px rgba(28,24,19,.24);
}
/* a hairline of gold to lift the frame off the papyrus */
.em-home-page .em-hero__vframe::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(192,136,58,.28);
  pointer-events: none;
  z-index: 3;
}

.em-home-page .em-hero__vposter,
.em-home-page .em-hero--split .em-hero__video {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
  margin:     0;
  max-width:  none;
  border-radius: inherit;
}
.em-home-page .em-hero--split .em-hero__video {
  opacity:    0;
  transition: opacity .9s var(--em-ease);
  z-index:    2;
}
.em-home-page .em-hero--split .em-hero__video.is-playing { opacity: 1; }

/* ── Sound toggle ───────────────────────────────────────────────── */
.em-home-page .em-hero__sound {
  position: absolute;
  inset-block-end:   .75rem;
  inset-inline-end:  .75rem;
  z-index:  4;
  width:    34px;
  height:   34px;
  display:  grid;
  place-items: center;
  border-radius: 50%;
  border:   1px solid rgba(247,241,230,.34);
  background: rgba(12,10,7,.46);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color:    #f7f1e6;
  cursor:   pointer;
  transition: background .25s var(--em-ease), border-color .25s var(--em-ease);
}
.em-home-page .em-hero__sound:hover {
  background:   rgba(12,10,7,.68);
  border-color: rgba(192,136,58,.6);
}
.em-home-page .em-hero__sound[hidden] { display: none; }
.em-home-page .em-hero__sound .em-hero__sound-on  { display: none; }
.em-home-page .em-hero__sound[aria-pressed="true"] .em-hero__sound-on  { display: block; }
.em-home-page .em-hero__sound[aria-pressed="true"] .em-hero__sound-off { display: none; }

/* Split hero sits on the light ground, so the nav keeps its dark links —
   undo the cinematic override when the hero is a split layout. */
.em-hero-cinema .em-home-page .em-hero--split ~ * { }

/* ── Responsive: stack below 900px, media under the text ────────── */
@media (max-width: 900px) {
  .em-home-page .em-hero--split {
    grid-template-columns: 1fr;
    gap:        clamp(1.8rem, 6vw, 2.6rem);
    min-height: auto;
    padding:    7rem clamp(1.2rem, 5vw, 3rem) clamp(2.5rem, 7vw, 3.5rem);
  }
  .em-home-page .em-hero--split .em-hero__cont { max-width: 100%; }
  .em-home-page .em-hero__vframe {
    height:    min(58svh, 520px);
    max-width: min(330px, 74vw);
  }
}
@media (max-width: 480px) {
  .em-home-page .em-hero__vframe {
    height:        min(54svh, 460px);
    max-width:     min(290px, 78vw);
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .em-home-page .em-hero--split .em-hero__video { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════
 * SPLIT HERO — video as the LEFT-HALF BACKGROUND, content overlaid
 *
 *   LTR:  [ video background + hero content on top ] | [ original animation ]
 *   RTL:  [ original animation ] | [ video background + hero content on top ]
 *
 * The video is a background LAYER of the half, not a card sitting in a box.
 * The media stack and .em-hero__cont occupy the SAME grid cell and are
 * separated by z-index, so no markup had to be restructured and the GSAP
 * selectors (.em-hero__cont > *) still resolve.
 * ══════════════════════════════════════════════════════════════════ */
.em-home-page .em-hero--split {
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: var(--em-bg);
}

/* Media stack and content share cell 1; the marquee owns cell 2. */
.em-home-page .em-hero--split .em-hero__mediacol { grid-column: 1; grid-row: 1; }
.em-home-page .em-hero--split .em-hero__cont     { grid-column: 1; grid-row: 1; }
.em-home-page .em-hero--split .em-hero__marq     { grid-column: 2; grid-row: 1; }

/* ── The media half ─────────────────────────────────────────────── */
.em-home-page .em-hero--split .em-hero__mediacol {
  position:   relative;
  align-self: stretch;
  display:    block;
  padding:    0;
  background: none;          /* no dark box */
  border-radius: 0;
  overflow:   hidden;
  /* Deliberately NO z-index: a value here would create a stacking context
     and trap the audio button's z-index inside this element, putting it
     underneath .em-hero__cont (z-index 4). With z-index auto the child
     layers compete directly in the hero's context: ambient 0, frame 1,
     scrim 3, content 4, audio control 6. */
}

/* 1. Ambient fill — the poster frame, over-scaled and heavily blurred, so
      the 0.547 portrait never leaves bare edges. It is a frame OF this
      video, so the colour match is exact. */
.em-home-page .em-hero__vambient {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  filter: blur(46px) saturate(115%) brightness(.82);
  transform: scale(1.18);
  z-index: 0;
}

/* 2. The footage itself — native ratio, full height, centred. Never
      cropped or stretched. */
.em-home-page .em-hero--split .em-hero__vframe {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  margin: 0;
  height: 100%;
  width: auto;
  aspect-ratio: var(--em-v-ratio, 464 / 848);
  border-radius: 0;
  overflow: hidden;
  background: none;
  box-shadow: none;
  z-index: 1;
}
html[dir="rtl"] .em-home-page .em-hero--split .em-hero__vframe {
  transform: translateX(50%);
}
.em-home-page .em-hero--split .em-hero__vframe::after { content: none; }

.em-home-page .em-hero--split .em-hero__vposter,
.em-home-page .em-hero--split .em-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  max-width: none;
  border-radius: 0;
}
.em-home-page .em-hero--split .em-hero__video {
  opacity: 0;
  transition: opacity .9s var(--em-ease);
  z-index: 2;
}
.em-home-page .em-hero--split .em-hero__video.is-playing { opacity: 1; }

/* 3. Scrim — blends the half into the cream page and guarantees contrast.
      Top fade keeps the fixed header legible over the footage; the inner
      edge dissolves into the content half so there is no hard seam. */
.em-home-page .em-hero__vscrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    /* header area back to cream */
    linear-gradient(to bottom, var(--em-bg) 0%, rgba(244,236,224,.55) 7%, transparent 17%),
    /* inner edge dissolves toward the content half */
    linear-gradient(to right, transparent 78%, rgba(244,236,224,.55) 92%, var(--em-bg) 100%),
    /* contrast behind the copy */
    linear-gradient(to bottom, rgba(18,14,9,.06) 0%, rgba(18,14,9,.34) 18%, rgba(18,14,9,.54) 52%, rgba(18,14,9,.74) 100%);
}
html[dir="rtl"] .em-home-page .em-hero__vscrim {
  background:
    linear-gradient(to bottom, var(--em-bg) 0%, rgba(244,236,224,.55) 7%, transparent 17%),
    linear-gradient(to left, transparent 78%, rgba(244,236,224,.55) 92%, var(--em-bg) 100%),
    linear-gradient(to bottom, rgba(18,14,9,.06) 0%, rgba(18,14,9,.34) 18%, rgba(18,14,9,.54) 52%, rgba(18,14,9,.74) 100%);
}

/* ── Hero content, sitting ON TOP of the video ──────────────────── */
.em-home-page .em-hero--split .em-hero__cont {
  position: relative;
  z-index: 4;                     /* above ambient, video and scrim */
  align-self: center;
  justify-self: start;
  max-width: min(31rem, 76%);
  padding: 7rem clamp(1.5rem, 3vw, 2.5rem) clamp(2.5rem, 5vw, 3.5rem) clamp(2rem, 4.5vw, 4rem);
}
html[dir="rtl"] .em-home-page .em-hero--split .em-hero__cont { justify-self: end; }

/* Light type over the footage */
.em-home-page .em-hero--split .em-hero__cont h1 { color: #fbf6ec; text-shadow: 0 2px 26px rgba(0,0,0,.42); }
.em-home-page .em-hero--split .em-hero__cont h1 em { color: var(--em-gold); }
.em-home-page .em-hero--split .em-hero__cont p {
  color: rgba(251,246,236,.90);
  text-shadow: 0 1px 16px rgba(0,0,0,.42);
}
.em-home-page .em-hero--split .em-subtitle {
  color: #e6b263;                                   /* lifted off the bright sky */
  text-shadow: 0 1px 12px rgba(0,0,0,.75);
}
.em-home-page .em-hero--split .em-subtitle::before { background: var(--em-gold); }
.em-home-page .em-hero--split .em-trust__label {
  color: rgba(251,246,236,.96);
  text-shadow: 0 1px 10px rgba(0,0,0,.72);
}
.em-home-page .em-hero--split .em-trust__stars {
  filter: drop-shadow(0 1px 6px rgba(0,0,0,.6));
}
.em-home-page .em-hero--split .em-trust__avatar { border-color: rgba(251,246,236,.85); }
.em-home-page .em-hero--split .em-hero__trust { background: none; border: none; }

/* ── Floating audio control ──────────────────────────────────────
   A floating control on the media area, not an inline control inside the
   video frame. Parked at the far inline-end/bottom corner of the media
   half, which is clear of the copy column, the Explore Tours CTA and the
   review strip — those all sit at the inline-start edge. Logical
   properties mean RTL mirrors it with no extra rules. */
.em-home-page .em-hero--split .em-hero__sound {
  position: absolute;
  inset-block-end: clamp(1.5rem, 3.5vh, 2.6rem);
  inset-inline-start: auto;
  inset-inline-end: clamp(1.5rem, 3vw, 2.6rem);
  z-index: 6;                       /* above ambient, frame, scrim and copy */
}

/* ── Right half: the ORIGINAL animation, untouched ──────────────── */
.em-home-page .em-hero--split .em-hero__marq {
  position: relative;
  inset: auto;
  /* definite height so the six fixed-height images cannot stretch the row */
  height: 100svh;
  max-height: 100svh;
  align-self: stretch;
  display: flex;
  gap: .7rem;
  padding: 0 clamp(.6rem, 1.4vw, 1.2rem);
  opacity: 1;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 85%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 13%, #000 85%, transparent 100%);
}
.em-home-page .em-hero--split .em-hero__deco {
  inset-inline-end: 6%;
  inset-inline-start: auto;
  top: 20%;
  z-index: 2;
}
.em-home-page .em-hero--split .em-hero__deco2 {
  inset-inline-end: 30%;
  inset-inline-start: auto;
  bottom: 16%;
  z-index: 2;
}

/* ── Tablet / mobile ────────────────────────────────────────────────
   Same concept, stacked: the video remains the hero's background layer
   with the content over it. The marquee drops to a faded backdrop, the
   existing narrow-width behaviour. */
@media (max-width: 900px) {
  .em-home-page .em-hero--split {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .em-home-page .em-hero--split .em-hero__mediacol,
  .em-home-page .em-hero--split .em-hero__cont,
  .em-home-page .em-hero--split .em-hero__marq {
    grid-column: 1;
    grid-row: 1;
  }
  .em-home-page .em-hero--split .em-hero__cont {
    max-width: 100%;
    justify-self: stretch;
    padding: 8rem clamp(1.2rem, 5vw, 2rem) clamp(3.5rem, 9vw, 5rem);
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* Stacked: the footage spans the full width and its aspect-ratio sets the
     height, so the whole frame is visible instead of being cropped to a
     narrow vertical slice. The ambient fill covers the remaining height. */
  .em-home-page .em-hero--split .em-hero__vframe {
    inset-inline-start: 0;
    inset-inline-end: 0;
    inset-block-start: 0;
    inset-block-end: auto;
    transform: none;
    width: 100%;
    height: auto;
    aspect-ratio: var(--em-v-ratio, 464 / 848);
    max-height: 78svh;
  }
  html[dir="rtl"] .em-home-page .em-hero--split .em-hero__vframe { transform: none; }
  .em-home-page .em-hero__vscrim,
  html[dir="rtl"] .em-home-page .em-hero__vscrim {
    background:
      linear-gradient(to bottom, var(--em-bg) 0%, rgba(244,236,224,.45) 6%, transparent 15%),
      linear-gradient(to bottom, rgba(18,14,9,.30) 0%, rgba(18,14,9,.52) 50%, rgba(18,14,9,.74) 100%);
  }
  .em-home-page .em-hero--split .em-hero__marq {
    height: 100%;
    opacity: .10;
    z-index: 0;
    padding: 0;
  }
  .em-home-page .em-hero--split .em-hero__sound {
    inset-block-end: clamp(1.1rem, 2.5vh, 1.6rem);
    inset-inline-start: auto;
    inset-inline-end: clamp(1.1rem, 4vw, 1.6rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .em-home-page .em-hero--split .em-hero__video { transition: none; }
  .em-home-page .em-hero--split .em-hero__marq .mcol { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
 * HERO AUDIO CONTROL — floating glass button
 * Visual treatment only; the composition above is untouched.
 * ══════════════════════════════════════════════════════════════════ */
.em-home-page .em-hero__sound {
  /* 44px minimum touch target on every device */
  width:  44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #fbf6ec;

  /* soft glass, no dark rectangle */
  background: rgba(28, 22, 14, .34);
  border: 1px solid rgba(251, 246, 236, .30);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, .22),
    0 10px 28px -10px rgba(0, 0, 0, .38);

  transition:
    background .28s var(--em-ease),
    border-color .28s var(--em-ease),
    transform .28s var(--em-ease),
    box-shadow .28s var(--em-ease);
}
.em-home-page .em-hero__sound:hover {
  background: rgba(28, 22, 14, .52);
  border-color: rgba(192, 136, 58, .72);
  transform: translateY(-2px);
  box-shadow:
    0 3px 12px rgba(0, 0, 0, .26),
    0 14px 34px -10px rgba(0, 0, 0, .44);
}
.em-home-page .em-hero__sound:active { transform: translateY(0); }

/* Visible keyboard focus */
.em-home-page .em-hero__sound:focus-visible {
  outline: 2px solid var(--em-gold);
  outline-offset: 3px;
}

/* Sound ON reads as the active state */
.em-home-page .em-hero__sound.is-on {
  background: rgba(192, 136, 58, .82);
  border-color: rgba(251, 246, 236, .58);
  color: #16130d;
}
.em-home-page .em-hero__sound.is-on:hover {
  background: rgba(192, 136, 58, .95);
}

.em-home-page .em-hero__sound[hidden] { display: none; }

/* Icon swap follows aria-pressed, which ui.js keeps in lockstep with
   video.muted — the icon can never disagree with the real state. */
.em-home-page .em-hero__sound .em-hero__sound-on  { display: none; }
.em-home-page .em-hero__sound .em-hero__sound-off { display: block; }
.em-home-page .em-hero__sound[aria-pressed="true"] .em-hero__sound-on  { display: block; }
.em-home-page .em-hero__sound[aria-pressed="true"] .em-hero__sound-off { display: none; }

@media (prefers-reduced-motion: reduce) {
  .em-home-page .em-hero__sound { transition: none; }
  .em-home-page .em-hero__sound:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE — CUSTOMER REVIEWS SLIDER
   Replaces the old .em-testi-row, which carried three fabricated
   testimonials. Structure follows the approved reference: three cards,
   initials avatar, stars, review text, arrows outside the cards, and a
   rating summary at the top right. Everything else — palette, radius,
   typography, arrow language — is the existing Egypt Magic system, so
   the section reads as ours rather than as a transplanted Google widget.
   ═══════════════════════════════════════════════════════════════ */

.em-home-page .em-rev {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0;
  /* Warm papyrus band, as the reference shows: it separates the reviews
     from the sections above and below, and makes the white cards read as
     cards rather than as bare text on the page. */
  background: var(--em-bg);
}

.em-home-page .em-rev__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.em-home-page .em-rev__intro { min-width: 0; }

/* Rating summary — reads as a quiet figure, not a badge */
.em-home-page .em-rev__score { text-align: right; flex: none; }
[dir="rtl"] .em-home-page .em-rev__score { text-align: left; }
.em-home-page .em-rev__score-val {
  font-family: var(--em-font-head);
  font-size: clamp(2rem, 4vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--em-gold);
}
.em-home-page .em-rev__score-stars {
  color: var(--em-gold);
  letter-spacing: .16em;
  font-size: 1rem;
  margin-top: .25rem;
}
/* "100% 5-star · 3 reviews" is Latin script and digits. Under
   direction:rtl the bidi algorithm reordered its runs and it rendered as
   "STAR · 3 REVIEWS-5 100%" on /ar/. Laying the string out LTR fixes the
   order; the block stays aligned with the rest of the RTL column. */
.em-home-page .em-rev__score-note {
  direction: ltr;
  text-align: right;
  margin: .35rem 0 0;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--em-muted);
}

/* Viewport holds the track between the two arrows */
.em-home-page .em-rev__viewport {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.em-home-page .em-rev__arrow {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--em-ink);
  border: 1px solid rgba(122,111,95,.34);
  cursor: pointer;
  transition: background .3s var(--em-ease), color .3s var(--em-ease),
              border-color .3s var(--em-ease), opacity .3s var(--em-ease);
}
.em-home-page .em-rev__arrow:hover:not(:disabled) {
  background: var(--em-ink);
  color: #fff;
  border-color: var(--em-ink);
}
.em-home-page .em-rev__arrow:disabled { opacity: .3; cursor: default; }
.em-home-page .em-rev__arrow:focus-visible {
  outline: 2px solid var(--em-gold);
  outline-offset: 3px;
}
/* Leading/trailing rather than left/right, so RTL mirrors for free */
[dir="rtl"] .em-home-page .em-rev__arrow svg { transform: scaleX(-1); }

/* Native scroll-snap track — touch and momentum for free */
.em-home-page .em-rev__track {
  list-style: none;
  margin: 0;
  padding: .5rem .25rem 1.25rem;
  display: flex;
  gap: clamp(1rem, 2vw, 1.6rem);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-width: 0;
}
.em-home-page .em-rev__track::-webkit-scrollbar { display: none; }
.em-home-page .em-rev__track:focus-visible {
  outline: 2px solid var(--em-gold);
  outline-offset: 4px;
  border-radius: 18px;
}

.em-home-page .em-rev__item {
  flex: 0 0 calc((100% - 2 * clamp(1rem, 2vw, 1.6rem)) / 3);
  min-width: 0;
  scroll-snap-align: start;
  display: flex;
}

/* Equal height regardless of review length */
.em-home-page .em-rev__card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(28,24,19,.07);
  border-radius: 16px;
  padding: clamp(1.2rem, 2.2vw, 1.6rem);
  box-shadow: 0 14px 34px -24px rgba(28,24,19,.5);
}

.em-home-page .em-rev__top {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .9rem;
}
.em-home-page .em-rev__avatar {
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--em-font-head);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.em-home-page .em-rev__who { min-width: 0; flex: 1 1 auto; }
.em-home-page .em-rev__name {
  margin: 0;
  font-family: var(--em-font-head);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--em-ink);
  line-height: 1.25;
}
.em-home-page .em-rev__date {
  margin: .1rem 0 0;
  font-size: .8rem;
  color: var(--em-muted);
}
.em-home-page .em-rev__src {
  flex: none;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--em-muted);
}

.em-home-page .em-rev__stars {
  color: var(--em-gold);
  letter-spacing: .12em;
  font-size: 1.02rem;
  margin-bottom: .7rem;
}

.em-home-page .em-rev__body { display: flex; flex-direction: column; flex: 1 1 auto; }

/* Clamped so one long review cannot make its card taller than the rest */
.em-home-page .em-rev__text {
  margin: 0;
  color: var(--em-ink);
  font-size: .97rem;
  line-height: 1.62;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  line-clamp: 6;
  overflow: hidden;
}
.em-home-page .em-rev__card.is-open .em-rev__text {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.em-home-page .em-rev__more {
  align-self: flex-start;
  margin-top: .7rem;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--em-gold);
  color: var(--em-gold-d, #a06f28);
  font-family: var(--em-font-head);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}
.em-home-page .em-rev__more:focus-visible { outline: 2px solid var(--em-gold); outline-offset: 3px; }
.em-home-page .em-rev__more .em-rev__more-close { display: none; }
.em-home-page .em-rev__card.is-open .em-rev__more .em-rev__more-open  { display: none; }
.em-home-page .em-rev__card.is-open .em-rev__more .em-rev__more-close { display: inline; }

/* Marks a review that arrives already cut off at source */
.em-home-page .em-rev__note {
  margin: .7rem 0 0;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--em-muted);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .em-home-page .em-rev__item { flex-basis: calc((100% - clamp(1rem, 2vw, 1.6rem)) / 2); }
}
/* Raised from 720px: at 768 the two-up track gave 276px cards, too narrow
   for avatar + name + four marks. One card there is ~690px wide. */
@media (max-width: 900px) {
  .em-home-page .em-rev__head { align-items: flex-start; }
  .em-home-page .em-rev__score { text-align: left; }
  [dir="rtl"] .em-home-page .em-rev__score { text-align: right; }
  .em-home-page .em-rev__item { flex-basis: 100%; }
  /* Arrows would eat the width a single card needs, so they sit under
     the track on mobile, where swipe is the primary gesture anyway. */
  .em-home-page .em-rev__viewport { display: block; }
  .em-home-page .em-rev__arrow {
    position: absolute;
    bottom: -0.25rem;
  }
  .em-home-page .em-rev__arrow--prev { left: 0; }
  .em-home-page .em-rev__arrow--next { left: 56px; }
  [dir="rtl"] .em-home-page .em-rev__arrow--prev { left: auto; right: 0; }
  [dir="rtl"] .em-home-page .em-rev__arrow--next { left: auto; right: 56px; }
  .em-home-page .em-rev__track { padding-bottom: 4.2rem; }
}
@media (max-width: 380px) {
  .em-home-page .em-rev__card { padding: 1.05rem; }
  .em-home-page .em-rev__avatar { width: 40px; height: 40px; font-size: .92rem; }
}

@media (prefers-reduced-motion: reduce) {
  .em-home-page .em-rev__track { scroll-behavior: auto; }
}

/* The theme's button reset gives every <button> a display value, which
   outranks the UA stylesheet's `[hidden] { display: none }`. Without this
   the read-more control stayed visible on cards whose text was not
   clipped at all — reviews.js had correctly set hidden, but CSS won. */
.em-home-page .em-rev__more[hidden],
.em-home-page .em-rev__arrow[hidden] { display: none !important; }

/* ── Reviews: rating badge, platform row ─────────────────────────
   Matches the approved reference: Google mark beside the score, gold
   stars, a quiet caption, and the other platforms as logos only. */

.em-home-page .em-rev__score-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .55rem;
  flex-wrap: nowrap;
}
/* Separates the platform group from the Google rating without reopening a
   gap: one deliberate step, not 100px of leftover box. */
.em-home-page .em-rev__score-top .em-rev__platforms-list { margin-right: .55rem; }
[dir="rtl"] .em-home-page .em-rev__score-top .em-rev__platforms-list {
  margin-right: 0; margin-left: .55rem;
}
[dir="rtl"] .em-home-page .em-rev__score-top { justify-content: flex-start; }
.em-home-page .em-rev__score-top .em-gmark { flex: none; display: block; }

/* was a block element before the mark sat beside it */
.em-home-page .em-rev__score-val { display: inline-block; }

/* Per-card attribution mark, top-right of the card */
/* The card's four-mark group: three platform logos then the Google mark.
   Measured need at 24/28px is 118px; the widest reviewer name is 100px and
   the avatar 46px, so at 1440/390/375 the whole header fits one row with
   room to spare. */
.em-home-page .em-rev__src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.em-home-page .em-rev__card-platforms {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.em-home-page .em-rev__platform-img--card {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: block;
  flex: none;
}
.em-home-page .em-rev__src .em-gmark { display: block; }

/* The platform logos live INSIDE .em-rev__score-top, sharing the row with
   the Google mark and the 5.0, so no dead space can open up between them. */
.em-home-page .em-rev__platforms-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: clamp(.5rem, 1.2vw, .85rem);
}
.em-home-page .em-rev__platform,
.em-home-page .em-rev__platform > a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  text-decoration: none;
  color: var(--em-ink);
}
.em-home-page .em-rev__platform > a:hover .em-rev__platform-name,
.em-home-page .em-rev__platform > a:focus-visible .em-rev__platform-name {
  color: var(--em-gold-d, #a06f28);
}
.em-home-page .em-rev__platform > a:focus-visible {
  outline: 2px solid var(--em-gold);
  outline-offset: 3px;
  border-radius: 6px;
}
/* The circle is the brand mark; corners are transparent so it sits on
   the cream section and on a dark surface equally well. */
/* Matched to the Google mark beside the score, so the four platforms
   read as one row of equals. */
.em-home-page .em-rev__platform-img {
  width: 30px;
  height: 30px;
  display: block;
  border-radius: 50%;
  flex: none;
}
.em-home-page .em-rev__platform-name { display: none; }

/* Was 720px. At 768 the two-up track gave 276px cards, 48px short of the
   four-mark header. One card there is wide enough with room to spare, and
   the slider still pages through all three. */
@media (max-width: 900px) {
  .em-home-page .em-rev__score-note { text-align: left; }
  [dir="rtl"] .em-home-page .em-rev__score-note { text-align: right; }
  /* Head stacks on small screens; the score row aligns with the heading. */
  .em-home-page .em-rev__score-top { justify-content: flex-start; }
  [dir="rtl"] .em-home-page .em-rev__score-top { justify-content: flex-end; }
}
@media (max-width: 420px) {
  .em-home-page .em-rev__platform-img { width: 26px; height: 26px; }
}

/* Bigger Google mark on each card, as requested. The header row keeps its
   fixed height so the card body and overall card size are unchanged. */
.em-home-page .em-rev__src .em-gmark { width: 28px; height: 28px; }
.em-home-page .em-rev__top { min-height: 46px; }

/* The earlier colour patch that lived here is gone: it treated one symptom
   of the descendant-selector leak above. With that rule scoped to
   `> li > a`, dropdown links inherit their proper colour from main.css and
   need no override. Kept only for the hover accent, which main.css also
   sets — harmless and explicit. */
.em-home-page .em-nav-links .em-nav-dropdown a:hover,
.em-home-page .em-nav-links .em-nav-dropdown a:focus-visible { color: var(--em-gold); }

/* No vertical shim needed any more — the marks are flex siblings in one
   row, so align-items handles it. */

/* Below ~360px the header genuinely cannot hold avatar + name + four marks
   on one line (measured 318px needed against a 293px card). The group drops
   to its own row rather than the logos being shrunk into illegibility. */
@media (max-width: 360px) {
  .em-home-page .em-rev__top { flex-wrap: wrap; row-gap: .55rem; }
  .em-home-page .em-rev__who { flex: 1 1 auto; }
  /* flex-start is already the correct edge in BOTH directions: left in
     LTR, right in RTL. The previous [dir=rtl] override forced flex-end,
     which in RTL is the LEFT edge — it pushed the wrapped logo row away
     from the right-aligned card content. */
  .em-home-page .em-rev__src { width: 100%; justify-content: flex-start; }
}

/* The card variant tied on specificity with the header rule
   (.em-home-page .em-rev__platform-img, 0,2,0) and lost on source order,
   so card logos rendered at the header's 30px. Scoped through .em-rev__src
   to win outright — 24px beside the 28px Google mark. */
.em-home-page .em-rev__src .em-rev__platform-img--card {
  width: 24px;
  height: 24px;
}
@media (max-width: 420px) {
  .em-home-page .em-rev__src .em-rev__platform-img--card { width: 22px; height: 22px; }
}


/* ═══════════════════════════════════════════════════════════════
   PHASE 5O — HOMEPAGE EDITORIAL GALLERY
   ═══════════════════════════════════════════════════════════════

   Replaces the body of the "Get ready to explore and discover Egypt"
   section: a rotating word-mark button and four icon cards, with one wide
   photograph parked underneath as an afterthought.

   The photography was the best thing in that section and it was the part
   doing the least work. This makes it the section.

   WHY A MOSAIC AND NOT A GRID
   A 3x2 grid of equal rectangles says every one of these places is worth the
   same amount of your attention, which is both untrue and the reason stock
   tourism pages look like catalogues. An asymmetric mosaic has a subject:
   one tall photograph you look at first, one wide one you look at second,
   and four that fill in the rhythm. That is how a travel magazine opens a
   feature, and it is the only part of this design that is doing anything a
   plain grid could not.

   WHAT IS IN IT
   Six real photographs from the site's own media library. Each is labelled
   with a place the photograph unambiguously SHOWS, and links to that place's
   page. This is the footer band's rule and it exists for the same reason: a
   picture and its caption must not be able to disagree.

   Five of the six are the stored featured image of the destination or tour
   they are captioned with, so the site itself is the source of the claim.
   The sixth — the Sphinx below Khafre's pyramid, captioned Giza / Cairo — is
   a gallery image of the Cairo 2-Day Private Trip rather than a featured
   image, and is captioned by its subject, which is not in doubt. It replaced
   the Cairo destination's own featured image, which is the same plateau with
   a posed tourist in a yellow jacket in the centre of the frame.

   Nothing here is stock, nothing is decorative, no image appears twice, and
   none of the five already used in the footer band is reused.

   The four activity links (Aquatic / Cultural / Adventure / Cruises) that
   the old section carried are KEPT, below the mosaic, as a quiet row. They
   are the only route from the homepage to the activity_type archives and
   deleting real navigation to make a picture bigger is not a design
   decision. */

.em-gallery { padding-block: clamp(3.5rem, 7vw, 6rem); }

.em-gallery__head {
  /* 46ch was a container measure inherited from the section it replaced, and
     with .em-title's own clamp the sentence set in FOUR short ragged lines —
     "GET READY TO / EXPLORE AND / DISCOVER / EGYPT." — occupying about 600px
     before a single photograph appeared. In a section whose subject is the
     photography, the type was leading and the pictures were following.

     Narrower measure, smaller type, tighter leading: the heading now sets in
     two lines, introduces the work and gets out of its way.

     The measure is in rem, NOT ch. `ch` on this element resolves against the
     BODY font it inherits, not the condensed display face the heading is set
     in, so `46ch` was about 345px and `22ch` about 165px — which is how a
     "narrower measure" produced FIVE lines instead of fewer. Measured in the
     browser, not assumed. */
  max-width: 40rem;
  margin: 0 auto clamp(1.3rem, 2.2vw, 1.9rem);
  text-align: center;
}
.em-gallery__head .em-title {
  font-size: clamp(1.85rem, 3.3vw, 3rem);
  line-height: 1.03;
  letter-spacing: -.005em;
}
.em-gallery__eyebrow {
  margin: 0 0 .7rem;
  font-family: var(--em-font-head);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--em-gold-d);
}
.em-gallery__head .em-title { margin: 0; }


/* ── the mosaic ────────────────────────────────────────────────
   Twelve columns and three rows, placed explicitly. Explicit areas rather
   than auto-flow because the composition IS the design: the shape of each
   tile is chosen for the photograph in it — the feature is portrait because
   the Karnak colonnade is a vertical subject, and Cairo is wide because the
   Giza plateau is a horizon. Auto-flow would reshuffle them at the first
   content change and the reasoning would be lost. */
.em-gallery__mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, minmax(0, 1fr)) minmax(0, .76fr);
  gap: clamp(8px, .8vw, 12px);
  /* A height, not aspect-ratios per tile: the tiles have to agree with each
     other across the row, which only works if the ROWS own the height. */
  height: clamp(520px, 52vw, 780px);
}

.em-gtile--feature { grid-area: 1 / 1  / 4 / 5;  }   /* tall portrait      */
.em-gtile--wide    { grid-area: 1 / 5  / 3 / 10; }   /* second subject     */
.em-gtile--upper   { grid-area: 1 / 10 / 2 / 13; }
.em-gtile--lower   { grid-area: 2 / 10 / 3 / 13; }
.em-gtile--short   { grid-area: 3 / 5  / 4 / 8;  }
.em-gtile--long    { grid-area: 3 / 8  / 4 / 13; }


/* ── a tile ────────────────────────────────────────────────────
   Deliberately the same object as .em-galtile in the footer band — same
   radius, same veil ramp, same gold eyebrow over a head-font title, same
   .07 hover scale on the image rather than on the tile. Two photo grids on
   one site that behave differently is how a site stops feeling designed. */
.em-gtile {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  text-decoration: none;
  background: var(--em-bg2);
  isolation: isolate;
}
.em-gtile__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .9s var(--em-ease);
}
.em-gtile:hover .em-gtile__img,
.em-gtile:focus-visible .em-gtile__img { transform: scale(1.055); }

/* The veil is what makes a caption readable over an unknown photograph. It
   ramps rather than washes, so the top two-thirds of every picture stays the
   picture — the brief's "the images should remain the star". */
.em-gtile__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(22,19,13,.86) 0%,
              rgba(22,19,13,.42) 34%,
              rgba(22,19,13,0)   64%);
  transition: opacity .5s var(--em-ease);
}
.em-gtile:hover .em-gtile__veil { opacity: .88; }

.em-gtile__cap {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: grid;
  gap: .18rem;
  padding: clamp(.7rem, 1.2vw, 1.1rem);
  color: var(--em-bg);
  transition: transform .5s var(--em-ease);
}
.em-gtile:hover .em-gtile__cap { transform: translateY(-3px); }

.em-gtile__cap em {
  font-style: normal;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--em-gold);
}
.em-gtile__cap b {
  font-family: var(--em-font-head);
  font-weight: 500;
  font-size: clamp(.95rem, 1.15vw, 1.15rem);
  line-height: 1.18;
  letter-spacing: .005em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The feature carries the only larger caption in the set — it is the one
   tile with the room for it, and it is what makes the composition read as
   having a subject rather than six equal parts. */
.em-gtile--feature .em-gtile__cap b { font-size: clamp(1.2rem, 1.9vw, 1.75rem); }
.em-gtile--feature .em-gtile__cap em { font-size: .66rem; }

.em-gtile:focus-visible { outline: 3px solid var(--em-gold); outline-offset: 3px; }


/* ── activity row ──────────────────────────────────────────────
   The four taxonomy links the old section carried, kept as a hairline row
   instead of four 200px boxes. Same destinations, a twentieth of the
   height, and it now reads as a footnote to the pictures rather than
   competing with them. */
.em-gallery__kinds {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
  margin-top: clamp(1.4rem, 2.6vw, 2.2rem);
}
.em-gallery__kinds a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1.05rem;
  border: 1px solid var(--em-hair, rgba(28,24,19,.14));
  border-radius: 999px;
  font-family: var(--em-font-head);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--em-ink);
  text-decoration: none;
  background: rgba(255,255,255,.4);
  transition: background .25s var(--em-ease), border-color .25s var(--em-ease),
              color .25s var(--em-ease);
}
.em-gallery__kinds a svg { color: var(--em-gold-d); transition: color .25s var(--em-ease); }
.em-gallery__kinds a:hover,
.em-gallery__kinds a:focus-visible {
  background: var(--em-ink);
  border-color: var(--em-ink);
  color: var(--em-bg);
}
.em-gallery__kinds a:hover svg,
.em-gallery__kinds a:focus-visible svg { color: var(--em-gold); }
.em-gallery__kinds a:focus-visible { outline: 3px solid var(--em-gold); outline-offset: 3px; }


/* ── tablet ────────────────────────────────────────────────────
   Six columns. The feature keeps its portrait shape and its dominance; the
   wide tile and Hurghada stack beside it; the last three run as two rows.
   The hierarchy survives, which is the whole point — a mosaic that becomes
   six equal boxes on a tablet was never a mosaic. */
/* 1023 was the wrong threshold and measuring it showed why: a 1024px window
   kept the twelve-column layout, whose height is 52vw = 532px there, which
   left the bottom row 142px tall — a letterbox, not a photograph. The
   six-column layout starts at 1100 instead. */
@media (max-width: 1100px) {
  .em-gallery__mosaic {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr)) minmax(0, .8fr) minmax(0, .8fr);
    height: clamp(600px, 104vw, 880px);
  }
  .em-gtile--feature { grid-area: 1 / 1 / 3 / 4; }
  .em-gtile--wide    { grid-area: 1 / 4 / 2 / 7; }
  .em-gtile--upper   { grid-area: 2 / 4 / 3 / 7; }
  .em-gtile--lower   { grid-area: 3 / 1 / 4 / 4; }
  .em-gtile--short   { grid-area: 3 / 4 / 4 / 7; }
  .em-gtile--long    { grid-area: 4 / 1 / 5 / 7; }
}


/* ── phone ─────────────────────────────────────────────────────
   Rows stop being fixed and each tile takes an aspect-ratio instead, so the
   pictures keep sensible crops at any width rather than being squeezed into
   a scaled-down desktop composition. The feature stays full width and tall,
   the wide tile stays full width and wide, and the four supporting tiles
   pair off — the same reading order, at a shape that fits a hand. */
@media (max-width: 680px) {
  .em-gallery__mosaic {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    height: auto;
  }
  /* Resets all four placement sub-properties so the desktop row spans stop
     applying; the per-tile rules that follow then set only the columns.
     This must NOT carry !important — with it, the `grid-column: 1 / -1`
     below lost, and the feature and the wide tile rendered as half-width
     squares in the first column. Same specificity plus later source order is
     already enough, and it leaves the following rules able to win. */
  .em-gtile { grid-area: auto; }
  .em-gtile--feature { grid-column: 1 / -1; aspect-ratio: 4 / 5;  }
  .em-gtile--wide    { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .em-gtile--upper,
  .em-gtile--lower,
  .em-gtile--short,
  .em-gtile--long    { aspect-ratio: 1 / 1; }
  .em-gtile--feature .em-gtile__cap b { font-size: 1.35rem; }
}
/* At 320 a 1:1 supporting tile is 145px and its two-line title becomes a
   smudge. Slightly wider crops buy the caption its line back. */
@media (max-width: 380px) {
  .em-gallery__mosaic { gap: 7px; }
  .em-gtile--upper,
  .em-gtile--lower,
  .em-gtile--short,
  .em-gtile--long { aspect-ratio: 4 / 5; }
  .em-gtile__cap b { font-size: .88rem; }
}


@media (prefers-reduced-motion: reduce) {
  .em-gtile__img,
  .em-gtile__veil,
  .em-gtile__cap { transition: none; }
  .em-gtile:hover .em-gtile__img { transform: none; }
  .em-gtile:hover .em-gtile__cap { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════
   HERO SLIDESHOW
   ═══════════════════════════════════════════════════════════════

   Four photographs of real excursions, cross-fading in the media half the
   hero video used to occupy. Width, grid position and scrim are all inherited
   from .em-hero--split; this block only describes the media itself.

   FULL-BLEED, NOT A FRAMED BOX. The first attempt locked the frame to 4:5 and
   it happened to fill the half exactly at 1440 — and left a 100px band of bare
   scrim beside it at 390, where the photograph became a narrow column floating
   in the dark. A background is a background: it fills its half at every width
   and object-position decides what survives the crop.

   STACKING. .em-hero__show is positioned but keeps z-index:auto, so it does
   NOT create a stacking context and its children compete directly in the
   hero's own order: frame 1, scrim 3, copy 4, controls 5. Giving the wrapper
   a z-index was the bug that buried the dots under the copy and made them
   unclickable. */

.em-hero__show {
  position: absolute;
  inset: 0;
  /* z-index deliberately omitted — see the note above. */
}

.em-hero__showframe {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  isolation: auto;
}

.em-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* A cross-fade, not a horizontal slide: the half is tall and narrow, and a
     translate inside it reads as a jolt. Opacity reads as a change of
     subject, which is what this is. */
  transition: opacity 900ms cubic-bezier(.4, 0, .2, 1);
}
.em-hero__slide.is-active { opacity: 1; }

.em-hero__slideimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position is written per slide in the markup — see the focus map in
     em_home_hero_slides(). Never centre it here: a centred crop cuts the
     riders out of the desert frame. */
  display: block;
  transform: scale(1.005);
}
/* The slow push. 1.06 across the dwell is felt rather than seen; at 1.12 it
   reads as a zoom and competes with the headline. Only the active slide
   animates, so nothing moves while it is invisible. */
.em-hero__slide.is-active .em-hero__slideimg {
  animation: em-hero-push 7600ms cubic-bezier(.33, 0, .29, 1) forwards;
}
@keyframes em-hero-push {
  from { transform: scale(1.005); }
  to   { transform: scale(1.062); }
}

/* The blurred surround tracks the active photograph, so the colour around the
   half always belongs to what is in it. */
.em-hero--show .em-hero__vambient {
  transition: background-image 900ms linear;
}

/* ── controls ──────────────────────────────────────────────────
   A single bar at the foot of the media half, above the copy (z 5) so it is
   clickable, and clear of the CTA and the trust strip above it. Light on
   dark, because the scrim is at its heaviest exactly here. */
.em-hero__showui {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: clamp(1.1rem, 2.4vw, 1.9rem);
  display: flex;
  align-items: center;
  gap: .9rem;
  padding-inline: var(--em-hero-pad, clamp(1.25rem, 5vw, 5rem));
  pointer-events: none;   /* only the controls themselves take clicks */
}
.em-hero__showcap,
.em-hero__dots { pointer-events: auto; }

.em-hero__showcap {
  margin: 0;
  min-height: 1.1em;
  font-family: var(--em-font-head, inherit);
  font-size: .7rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255, 251, 244, .82);
  text-shadow: 0 1px 10px rgba(12, 9, 5, .55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.em-hero__showcap > span {
  display: inline-block;
  opacity: 1;
  transition: opacity 420ms ease;
}
.em-hero__showcap.is-swapping > span { opacity: 0; }

/* Hairlines, not circles: a filled bullet beside a gold brand reads as a
   warning dot. The active one fills left to right across the dwell, so the
   control is also the progress indicator and nothing extra is drawn. */
.em-hero__dots {
  display: flex;
  gap: .45rem;
  margin-inline-start: auto;
  flex: 0 0 auto;
}
.em-hero__dot {
  position: relative;
  width: 30px;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 251, 244, .3);
  cursor: pointer;
  overflow: hidden;
  transition: background-color .3s ease;
}
.em-hero__dot:hover { background: rgba(255, 251, 244, .5); }
.em-hero__dot:focus-visible {
  outline: 2px solid var(--em-gold, #c0883a);
  outline-offset: 4px;
}
.em-hero__dotfill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--em-gold, #c0883a);
  border-radius: inherit;
}
html[dir="rtl"] .em-hero__dotfill { transform-origin: right center; }

.em-hero__dot.is-active .em-hero__dotfill {
  animation: em-hero-dot var(--em-dot-dur, 5600ms) linear forwards;
}
/* One class covers every pause reason — hover, focus, off-screen, hidden tab
   — so the reason never has to be tracked in the stylesheet. */
.em-hero__show.is-paused .em-hero__dot.is-active .em-hero__dotfill,
.em-hero__show.is-paused .em-hero__slide.is-active .em-hero__slideimg {
  animation-play-state: paused;
}
@keyframes em-hero-dot {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media (max-width: 900px) {
  .em-hero__showui  { gap: .6rem; bottom: clamp(.9rem, 3vw, 1.4rem); }
  .em-hero__showcap { font-size: .62rem; letter-spacing: .12em; }
  .em-hero__dot     { width: 22px; }
}
@media (max-width: 420px) {
  /* The caption is the first thing to go: four hairlines still say "there is
     more here", and a truncated place name says nothing. */
  .em-hero__showcap { display: none; }
  .em-hero__dots    { margin-inline: auto; }
}

/* A gentler push for phones. The 1.062 desktop drift is read as a zoom on a
   small screen — the subject is already large in frame there — so the movement
   is halved rather than removed: still alive, no longer restless. */
@keyframes em-hero-push-sm {
  from { transform: scale(1.002); }
  to   { transform: scale(1.030); }
}

/* ══════════════════════════════════════════════════════════════════
 * MOBILE HERO  (≤768px, slideshow mode only)
 *
 * FULL BLEED. On a phone the photograph IS the hero: it fills the whole
 * section, the copy sits over its foot, and one gradient carries the contrast.
 *
 * An earlier pass gave the picture its own 4:5 box at the top of the hero and
 * let the blurred ambient fill the rest. That killed the crop, but a boxed
 * image above a dark blurred band reads as a letterboxed card, not a hero —
 * so the box is gone and the crop is accepted as the price of full bleed.
 *
 * Scoped to .em-hero--show throughout: the video, cinematic and marquee modes
 * have their own mobile treatment and are deliberately left alone.
 * ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── A. Copy trimmed to what earns its place on a phone ────────
     The headline and the intro paragraph are hidden VISUALLY, not removed:
     display:none would take the page's only <h1> out of a mobile-first index
     and out of the screen-reader outline, for no visual gain over this. The
     eyebrow, the CTA and the trust strip stay — they are what the hero is for. */
  .em-home-page .em-hero--show .em-hero__cont h1,
  .em-home-page .em-hero--show .em-hero__cont > p {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ── B. Full bleed ─────────────────────────────────────────────
     Nothing here makes the photograph full-bleed; it already is. .em-hero__show
     is inset:0 in its media column, that column is the same grid cell the copy
     fills, and .em-hero__cont's min-height:100svh sets the cell's height. These
     two rules only remove what used to box it in.

     The blurred ambient existed to fill space a boxed photograph could not
     reach. Full bleed leaves no such space, so it is switched OFF rather than
     blurred behind an opaque image — 30-46px of blur across a full-screen layer
     is a real cost on a mid-range phone, and not one pixel of it was visible.
     The column keeps a dark base so the first paint is not a bright flash
     before the photograph decodes. */
  .em-home-page .em-hero--show .em-hero__mediacol { background: var(--em-dark, #16130d); }
  .em-home-page .em-hero--show .em-hero__vambient { display: none; }

  /* object-position is deliberately NOT declared here, and the per-slide focus
     point in the markup is left to do its job.
     WHY: on a portrait phone every one of these photographs crops
     HORIZONTALLY ONLY. The hero is about 0.46 wide-to-tall (390x844) and the
     narrowest photograph in the set is 0.75, so `cover` matches the height
     exactly and spills over the sides. A vertical value — `center 25%`, `top
     center` — is therefore inert at this width, while its horizontal half
     would overwrite the art direction that keeps the riders in the desert
     frame and the horses' heads in the sea frame. */

  /* ── C. One gradient, over the whole photograph ────────────────
     Two layers, in paint order:
       1. the header band returns to papyrus. The logo is dark brown and gold
          on transparent, so shading the top would HIDE it — the opposite of
          what a scrim is here for.
       2. the readability ramp: shaded at the top edge, clear through the
          middle where the subject is, deepening to the foot so the CTA and the
          rating strip hold against a bright sky or a pale desert alike. */
  .em-home-page .em-hero--show .em-hero__vscrim,
  html[dir="rtl"] .em-home-page .em-hero--show .em-hero__vscrim {
    background:
      linear-gradient(to bottom, var(--em-bg) 0%, rgba(244,236,224,.58) 6%, transparent 17%),
      linear-gradient(to bottom,
        rgba(0,0,0,.40) 0%,
        rgba(0,0,0,.10) 40%,
        rgba(0,0,0,.85) 90%,
        rgba(0,0,0,.88) 100%);
  }

  /* ── D. Copy at the foot of the picture ────────────────────────
     Bottom-aligned rather than centred: over a full-bleed photograph the
     middle is where the subject is. The bottom padding is a hard floor that
     clears the caption-and-dots bar anchored to the same lower edge. */
  .em-home-page .em-hero--show .em-hero__cont {
    justify-content: flex-end;
    padding-block-end: clamp(4rem, 12vw, 5.5rem);
  }

  /* ── E. Transition ────────────────────────────────────────────
     Still a cross-fade — a horizontal slide reads as a jolt, and this is a
     change of subject, not a carousel step. Shortened, because 900ms that
     feels considered on a desktop feels sluggish under a thumb. */
  .em-home-page .em-hero--show .em-hero__slide {
    transition: opacity 620ms cubic-bezier(.33, 0, .2, 1);
  }
  .em-home-page .em-hero--show .em-hero__slide.is-active .em-hero__slideimg {
    animation-name: em-hero-push-sm;
  }
}

/* ── reduced motion ────────────────────────────────────────────
   The slideshow still ADVANCES — it is how four photographs are seen in one
   space, and freezing it would hide three of them. What stops is the motion:
   no push, no eased fade, no filling bar. The picture simply changes.

   Deliberately the LAST word in this file: it must also switch off the shorter
   mobile fade and the smaller push declared above. */
@media (prefers-reduced-motion: reduce) {
  .em-hero__slide          { transition: opacity 1ms linear; }
  .em-hero__slideimg       { transform: none; }
  .em-hero__slide.is-active .em-hero__slideimg,
  .em-hero__dot.is-active .em-hero__dotfill { animation: none; }
  .em-hero__dot.is-active  { background: var(--em-gold, #c0883a); }
  .em-hero__showcap > span { transition: none; }
  .em-hero--show .em-hero__vambient { transition: none; }

  /* The mobile block above is scoped with three classes, so it outweighs the
     single-class rules here on specificity no matter that they come later.
     These repeat the same intent at matching weight — without them, a phone
     asking for reduced motion would still get the fade and the push. */
  .em-home-page .em-hero--show .em-hero__slide { transition: opacity 1ms linear; }
  .em-home-page .em-hero--show .em-hero__slide.is-active .em-hero__slideimg { animation: none; }
}