/* Glass panes hero (Ali 2026-11-11, round 4). Golden-hour photo in light mode, night photo in dark mode. Prefix mhg-. */
.mhg { --ink:#fbf6ee; --soft:#e2d9cc; --gold:#f2b56b; --orange:#f18045; --peach:#ffc28c; --night:6,8,14; --dir:1; --px:0; --py:0; --pw:min(6.8vw, 104px);
  position:relative; isolation:isolate; overflow:clip; margin-block:0; max-width:100%; box-sizing:border-box;
  height:clamp(580px, calc(88svh - 104px), 780px); background:#07090f; color:var(--ink); color-scheme:dark; }
.mhg[dir="rtl"] { --dir:-1; }
.mhg *, .mhg *::before, .mhg *::after { box-sizing:border-box; }

/* Photo: golden hour by default, night in dark mode; mirrored in Arabic so the man stands opposite the words */
.mhg-bg { position:absolute; inset:0; z-index:-3; overflow:hidden; }
.mhg-bg-move { position:absolute; inset:-3%; transform:translate3d(calc(var(--px) * -14px), calc(var(--py) * -8px), 0); transition:transform .2s linear; }
.mhg-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:82% 58%; animation:mhg-drift 28s ease-in-out infinite alternate; }
.mhg[dir="rtl"] .mhg-photo { transform:scaleX(-1); animation-name:mhg-drift-rtl; object-position:82% 58%; }
.mhg-night { opacity:0; }
:root[data-site-theme="dark"] .mhg-night { opacity:1; }
:root[data-site-theme="dark"] .mhg-day { opacity:0; }
.mhg-photo { transition:opacity .8s ease; }
.mhg-shimmer { position:absolute; inset:auto 0 0 0; height:34%; pointer-events:none; mix-blend-mode:screen; opacity:.5;
  background:linear-gradient(100deg, transparent 0 40%, rgba(255,214,150,.18) 48%, transparent 56% 100%); background-size:260% 100%; animation:mhg-shimmer 9s linear infinite;
  -webkit-mask:linear-gradient(to top, #000 0, #000 60%, transparent 100%); mask:linear-gradient(to top, #000 0, #000 60%, transparent 100%); }
@keyframes mhg-drift { from { transform:scale(1.02) translateX(0); } to { transform:scale(1.08) translateX(-1.2%); } }
@keyframes mhg-drift-rtl { from { transform:scaleX(-1) scale(1.02) translateX(0); } to { transform:scaleX(-1) scale(1.08) translateX(-1.2%); } }
@keyframes mhg-shimmer { from { background-position:120% 0; } to { background-position:-120% 0; } }

.mhg-shade { position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(to right, rgba(var(--night),.86) 0, rgba(var(--night),.6) 30%, rgba(var(--night),.08) 52%, rgba(var(--night),0) 70%),
    linear-gradient(to top, rgba(var(--night),.6) 0, rgba(var(--night),0) 30%),
    linear-gradient(to bottom, rgba(var(--night),.35) 0, rgba(var(--night),0) 20%); }
.mhg[dir="rtl"] .mhg-shade { background:
    linear-gradient(to left, rgba(var(--night),.86) 0, rgba(var(--night),.6) 30%, rgba(var(--night),.08) 52%, rgba(var(--night),0) 70%),
    linear-gradient(to top, rgba(var(--night),.6) 0, rgba(var(--night),0) 30%),
    linear-gradient(to bottom, rgba(var(--night),.35) 0, rgba(var(--night),0) 20%); }

/* Golden ribbon (drawn by the script once the panes are measured) */
.mhg-ribbon { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; overflow:visible; opacity:0; transition:opacity 1.2s ease .3s; }
.mhg[data-state="live"] .mhg-ribbon { opacity:1; }
.mhg-ribbon path { fill:none; stroke-linecap:round; }
.mhg-rb-glow { stroke:#ffb35c !important; stroke-width:14; opacity:.55; }
.mhg-rb-wide { stroke:#ffc98a !important; stroke-width:4; opacity:.8; }
.mhg-rb-core { stroke:#fff4e0; stroke-width:1.6; opacity:1; }
.mhg-rb-flow { stroke:#fff6e6; stroke-width:3; stroke-dasharray:70 1600; animation:mhg-flow 4.5s linear infinite; filter:drop-shadow(0 0 6px #ffcf8a); }
@keyframes mhg-flow { from { stroke-dashoffset:1670; } to { stroke-dashoffset:0; } }
.mhg-dot { fill:#fff8ec; filter:drop-shadow(0 0 6px #ffd49a) drop-shadow(0 0 14px #ff9a4a); }

/* Glass panes */
.mhg-scene { position:absolute; z-index:0; inset-block:8% 20%; inset-inline:47% 10%; }
.mhg-stack { position:absolute; inset:0; transform:translate3d(calc(var(--px) * 12px * var(--dir)), calc(var(--py) * 7px), 0); transition:transform .25s linear; }
/* Slanted cards (Ali's reference): one up, one down; the active one grows to about twice the size and comes in front */
.mhg-pane { --d:0; --up:-1; --push:0; --ox:50%; position:absolute; left:50%; top:50%; width:var(--pw); aspect-ratio:9/16; padding:0; border:0; border-radius:12px; overflow:hidden; cursor:pointer; background:#111; color:#fff; font:inherit; text-align:start;
  box-shadow:0 24px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.08);
  transform-origin:var(--ox) 50%;
  transform:translate(-50%,-50%) translateX(calc(((var(--i) - 2) * 112% + var(--push) * 50%) * var(--dir))) translateY(calc(var(--up) * 14%)) skewX(calc(-9deg * var(--dir)));
  filter:brightness(.74) saturate(.9);
  transition:transform .9s cubic-bezier(.2,.75,.1,1), filter .6s ease, box-shadow .5s ease; }
.mhg-pane:nth-child(even) { --up:1; }
.mhg-pane img { position:absolute; top:-2%; left:-18%; width:136%; height:104%; max-width:none; object-fit:cover; transform:skewX(calc(9deg * var(--dir))); transition:transform 1.2s ease; }
.mhg-pane::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.05) 24%, rgba(255,255,255,0) 42%, rgba(255,255,255,0) 74%, rgba(255,255,255,.12) 100%); }
.mhg-pane::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to top, rgba(0,0,0,.78) 0, rgba(0,0,0,0) 48%); }
.mhg-pane:hover { filter:brightness(.9); }
.mhg-pane[aria-pressed="true"] { filter:none;
  transform:translate(-50%,-50%) translateX(calc(((var(--i) - 2) * 112% + var(--push) * 50%) * var(--dir))) translateY(calc(var(--up) * 4%)) scale(1.95) skewX(calc(-9deg * var(--dir)));
  box-shadow:0 30px 70px rgba(0,0,0,.6), 0 0 0 1px var(--gold), 0 0 30px rgba(242,181,107,.32); }
.mhg-pane[aria-pressed="true"] img { transform:skewX(calc(9deg * var(--dir))) scale(1.04); }
.mhg-pane.hit { box-shadow:0 30px 70px rgba(0,0,0,.6), 0 0 0 1.5px #ffe0b0, 0 0 50px rgba(255,190,110,.75); }
.mhg-pane-cap { position:absolute; z-index:2; inset-inline:12px; inset-block-end:12px; display:grid; gap:1px; transform:skewX(calc(9deg * var(--dir))); }
.mhg-pane-cap small { font-size:11px; font-weight:700; color:var(--peach); letter-spacing:.06em; }
.mhg-pane-cap strong { font-size:13px; font-weight:700; line-height:1.25; text-shadow:0 1px 8px rgba(0,0,0,.6); }
.mhg-pane-full { display:none; font-size:9.5px; font-weight:700; line-height:1.3; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.7); }
.mhg-pane[aria-pressed="true"] .mhg-pane-cap { inset-inline:8px; inset-block-end:9px; }
.mhg-pane[aria-pressed="true"] .mhg-pane-cap small { font-size:6.5px; }
.mhg-pane[aria-pressed="true"] .mhg-pane-cap strong { display:none; }
.mhg-pane[aria-pressed="true"] .mhg-pane-full { display:block; }
.mhg-pane-bar { position:absolute; z-index:2; inset-inline:0; bottom:0; height:2px; background:linear-gradient(90deg, var(--gold), var(--orange)); transform:scaleX(0); transform-origin:left; }
.mhg[dir="rtl"] .mhg-pane-bar { transform-origin:right; }
.mhg-pane[aria-pressed="true"] .mhg-pane-bar { animation:mhg-bar 3s linear forwards; }
.mhg[data-motion="paused"] .mhg-pane-bar, .mhg[data-motion="off"] .mhg-pane-bar { animation-play-state:paused; }
.mhg[data-motion="still"] .mhg-pane[aria-pressed="true"] .mhg-pane-bar { animation:none; transform:scaleX(1); }
@keyframes mhg-bar { to { transform:scaleX(1); } }

/* The MAHROUS mark: a glass disc on the ribbon */
.mhg-mark { position:absolute; left:0; top:0; width:clamp(92px, 8.4vw, 132px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; transform:translate(-50%,-50%); opacity:0;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.32), rgba(255,255,255,.06) 55%, rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(10px) saturate(1.3); -webkit-backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:0 20px 50px rgba(0,0,0,.45), 0 0 0 6px rgba(255,255,255,.04), 0 0 50px rgba(242,181,107,.3); transition:opacity .8s ease, box-shadow .4s ease; }
.mhg[data-state="live"] .mhg-mark { opacity:1; }
.mhg-mark img { width:66%; height:auto; filter:drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.mhg-mark.pulse { box-shadow:0 20px 50px rgba(0,0,0,.45), 0 0 0 10px rgba(255,214,150,.12), 0 0 80px rgba(255,190,110,.75); }

/* Words */
.mhg-inner { position:relative; z-index:1; display:grid; height:100%; max-width:1560px; margin-inline:auto; padding:clamp(28px,6vh,72px) clamp(20px,5vw,88px); pointer-events:none; }
.mhg-copy { align-self:center; max-width:min(600px, 40vw); pointer-events:auto; }
.mhg-eyebrow { display:flex; align-items:center; gap:14px; margin:0 0 18px; font-size:13px; font-weight:600; letter-spacing:.08em; color:var(--peach); animation:mhg-fade .8s .1s ease both; }
.mhg[dir="rtl"] .mhg-eyebrow { letter-spacing:0; font-size:14px; }
.mhg-eyebrow::before { content:""; width:34px; height:1.5px; background:var(--gold); flex:none; }
.mhg-title { margin:0 0 18px; font-weight:700; color:var(--ink); text-shadow:0 2px 30px rgba(0,0,0,.5); }
.mhg-l1 { display:block; font-size:clamp(38px,4.6vw,76px); line-height:1.06; letter-spacing:-.035em; animation:mhg-fade .9s .2s ease both; }
.mhg[dir="rtl"] .mhg-l1 { letter-spacing:0; line-height:1.3; }
.mhg-l2 { display:block; overflow:hidden; padding-block:.1em .18em; font-size:clamp(24px,2.6vw,42px); line-height:1.25; white-space:nowrap; color:var(--gold); letter-spacing:-.02em; animation:mhg-fade .9s .35s ease both; }
.mhg[dir="rtl"] .mhg-l2 { letter-spacing:0; line-height:1.45; }
.mhg-rot { display:inline-block; }
.mhg-rot.out { animation:mhg-out .28s ease forwards; }
.mhg-rot.in { animation:mhg-in .55s cubic-bezier(.2,.75,.1,1) both; }
.mhg-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.mhg-intro { margin:0 0 26px; max-width:31em; font-size:clamp(15px,1.1vw,17px); line-height:1.8; color:var(--soft); text-wrap:pretty; text-shadow:0 1px 14px rgba(0,0,0,.5); animation:mhg-fade .9s .5s ease both; }
.mhg-actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; animation:mhg-fade .9s .65s ease both; }
.mhg-cta { display:inline-flex; align-items:center; gap:16px; min-height:52px; padding-block:8px; padding-inline:24px 8px; border-radius:999px; background:linear-gradient(135deg,#f6c27e,#ef8a45); color:#1a0f08; font-weight:700; font-size:16px; text-decoration:none; box-shadow:0 10px 30px rgba(239,138,69,.3); transition:filter .25s ease; }
.mhg-cta-arrow { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:#1a0f08; color:var(--peach); font-size:18px; transition:transform .3s ease; }
.mhg-cta:hover { filter:brightness(1.08); }
.mhg-cta:hover .mhg-cta-arrow { transform:rotate(45deg); }
.mhg[dir="rtl"] .mhg-cta:hover .mhg-cta-arrow { transform:rotate(-45deg); }
.mhg-explore { display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--peach); font-weight:600; font-size:15px; text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; text-shadow:0 1px 10px rgba(0,0,0,.6); }
.mhg-explore:hover { color:#fff; }

/* Live feed: one message in, one result out, always in the same place */
.mhg-feed { position:absolute; z-index:1; inset-block-end:clamp(16px,3vh,28px); inset-inline-start:45%; display:flex; align-items:center; gap:10px; pointer-events:none; opacity:0; transition:opacity .8s ease .8s; }
.mhg[data-state="live"] .mhg-feed { opacity:1; }
.mhg[data-motion="still"] .mhg-feed { display:none; }
.mhg-msg { display:flex; align-items:center; gap:10px; padding:7px 12px; border-radius:14px; background:rgba(10,12,20,.55); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.mhg-msg[hidden] { display:none; }
.mhg-msg.ping { animation:mhg-slide .5s cubic-bezier(.2,.75,.1,1) both; }
.mhg-msg-ico { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; flex:none; color:#06101d; background:var(--cc); }
.mhg-msg-ico svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.mhg-msg-txt { display:grid; line-height:1.3; }
.mhg-msg-txt b { font-size:10.5px; font-weight:700; color:#d6c6b0; }
.mhg-msg-txt span { font-size:13px; font-weight:500; color:#fff8ee; white-space:nowrap; }
.mhg-out { display:flex; align-items:center; gap:8px; padding:6px 13px 6px 7px; border-radius:999px; background:#fbf6ee; color:#1a130c; font-size:12.5px; font-weight:700; white-space:nowrap; opacity:0; }
.mhg[dir="rtl"] .mhg-out { padding:6px 7px 6px 13px; }
.mhg-out.on { animation:mhg-result 2.4s ease both; }
.mhg-out i { width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,#f6c27e,#ef8a45); position:relative; flex:none; }
.mhg-out i::after { content:""; position:absolute; left:6px; top:3.5px; width:4.5px; height:8px; border:solid #1a130c; border-width:0 2px 2px 0; transform:rotate(45deg); }

.mhg-pause { position:absolute; z-index:2; inset-block-start:16px; inset-inline-end:16px; display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.4); background:rgba(var(--night),.35); color:#fff; cursor:pointer; backdrop-filter:blur(6px); }
.mhg-pause svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.mhg-ico-play { display:none; fill:currentColor; stroke-width:1.5; }
.mhg-pause[aria-pressed="true"] .mhg-ico-pause { display:none; }
.mhg-pause[aria-pressed="true"] .mhg-ico-play { display:inline; }
.mhg[data-state="static"] .mhg-pause, .mhg[data-motion="still"] .mhg-pause { display:none; }
.mhg a:focus-visible, .mhg button:focus-visible { outline:3px solid var(--peach); outline-offset:4px; }
.mhg-cta:focus-visible { border-radius:999px; }

@keyframes mhg-fade { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes mhg-out { to { opacity:0; transform:translateY(-55%); filter:blur(6px); } }
@keyframes mhg-in { from { opacity:0; transform:translateY(65%); filter:blur(8px); } to { opacity:1; transform:none; filter:none; } }
@keyframes mhg-slide { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes mhg-result { 0% { opacity:0; transform:translateY(6px); } 15%, 80% { opacity:1; transform:none; } 100% { opacity:0; } }

@media (max-width:1099px) { .mhg-copy { max-width:min(480px, 46vw); } .mhg-scene { inset-inline:48% 6%; } .mhg { --pw:min(7vw, 96px); } .mhg-feed { display:none; } }
/* Phones and upright tablets: the photo and the glass on top, the words below */
@media (max-width:719px), (max-width:1099px) and (orientation:portrait) {
  .mhg { height:auto; min-height:clamp(720px, calc(100svh - 80px), 940px); --pw:min(13.6vw, 96px); }
  .mhg-bg { inset:0 0 auto 0; height:60%; }
  .mhg-photo, .mhg[dir="rtl"] .mhg-photo { object-position:78% 60%; }
  .mhg-bg::after { content:""; position:absolute; inset:auto 0 0 0; height:40%; background:linear-gradient(to top, #07090f, rgba(7,9,15,0)); }
  .mhg-shade, .mhg[dir="rtl"] .mhg-shade { background:linear-gradient(to bottom, rgba(var(--night),.3) 0, rgba(var(--night),0) 25%); }
  .mhg-scene { inset-block:6% auto; height:44%; inset-inline:4% 4%; }
  .mhg-inner { min-height:inherit; padding:56vh 20px 24px; }
  .mhg-copy { max-width:620px; align-self:end; }
  .mhg-eyebrow { font-size:12px; margin-bottom:12px; }
  .mhg[dir="rtl"] .mhg-eyebrow { font-size:13px; }
  .mhg-l1 { font-size:clamp(32px,9.4vw,46px); }
  .mhg-l2 { font-size:clamp(20px,5.8vw,28px); white-space:normal; }
  .mhg-intro { font-size:15px; margin-bottom:18px; }
  .mhg-cta { min-height:50px; font-size:15px; }
  .mhg-pane-cap strong { font-size:11px; }
  .mhg-pane-cap { inset-inline:7px; inset-block-end:8px; }
  .mhg-pane-cap small { font-size:9.5px; }
  .mhg-feed { display:none; }
}
@media (max-width:479px) { .mhg-l2 { min-height:2.9em; } }
@media (prefers-reduced-motion:reduce) {
  .mhg *, .mhg *::before, .mhg *::after { animation:none !important; transition:none !important; }
}

/* names sit on the side of the pane that is not covered by its neighbour */
.mhg-pane[data-side="end"] .mhg-pane-cap { justify-items:end; text-align:end; }
@media (max-width:719px) { .mhg-pane:not([aria-pressed="true"]) .mhg-pane-cap strong { display:none; } }
@media (max-width:719px) { .mhg-mark { width:74px; } }