/* Homepage redesign batch 3 (2026-11-12): work gallery + video band, questions, closing. Prefix mx-. */
/* Per-section rhythm: a section can set --mx-dur (the questions use 6 s) */
.mx-clock.mx-tick { animation-duration:var(--mx-dur, 3s); }
[aria-pressed="true"] .mx-bar i, .is-on > .mx-bar i { animation-duration:var(--mx-dur, 3s); }

/* 11 · From our work: a phone with the active post and a 3 x 3 wall */
.mx-wk-head { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(24px,5vw,72px); align-items:end; }
.mx-wk-head .mx-h2 { margin-bottom:0; }
.mx-wk-legend { display:flex; align-items:center; gap:8px; margin:14px 0 0; font-size:14px; font-weight:700; color:var(--x-gold); }
.mx-wk-star { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#f6c27e,#ef8a45); color:#1a0f08; font-size:12px; }
.mx-wk > .mx-pause { inset-block-start:-8px; }
.mx-wk-stage { display:grid; grid-template-columns:minmax(260px,330px) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center; margin-top:clamp(32px,4vw,52px); }
.mx-wk-phone { position:relative; aspect-ratio:9/15.5; border-radius:40px; overflow:hidden; background:#fff; border:9px solid #141a24; box-shadow:0 40px 80px rgba(40,25,8,.28); }
.mx-wk-post { position:absolute; inset:0; display:flex; flex-direction:column; background:#fff; opacity:0; transition:opacity .5s ease; }
.mx-wk-post.is-on { opacity:1; }
.mx-wk-top { display:flex; align-items:center; gap:10px; padding:16px 14px 12px; color:#151b24; }
.mx-wk-av { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#f6c27e,#ef8a45); color:#1a0f08; font-size:13px; font-weight:800; }
.mx-wk-top b { display:block; font-size:13.5px; line-height:1.3; }
.mx-wk-top small { display:block; font-size:11.5px; color:#5b6470; }
.mx-wk-img { aspect-ratio:1; background:#efe7da; overflow:hidden; }
.mx-wk-img img { width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform 3s ease; }
.mx-wk-post.is-on .mx-wk-img img { transform:scale(1); }
.mx-wk-actions { display:flex; align-items:center; gap:10px; padding:12px 14px; }
.mx-wk-actions i { width:20px; height:20px; border-radius:50%; border:2px solid #cbc3b6; }
.mx-wk-soon { margin-inline-start:auto; padding:4px 10px; border-radius:999px; background:#f6ead8; color:#7a4a14; font-size:11.5px; font-weight:800; }
.mx-wk-post::after { content:""; display:block; height:10px; margin:2px 14px 0; width:70%; border-radius:6px; background:#eee8de; box-shadow:0 18px 0 #eee8de; }
.mx-wk-wall { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none; }
.mx-wk-tile { position:relative; display:block; width:100%; aspect-ratio:1; padding:0; border:0; border-radius:18px; overflow:hidden; background:#efe7da; cursor:pointer; box-shadow:var(--x-shadow); transition:transform .4s cubic-bezier(.2,.75,.1,1), box-shadow .4s ease; }
.mx-wk-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s ease; }
.mx-wk-tile:hover img { transform:scale(1.05); }
.mx-wk-tile::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(8,8,10,.86) 0, rgba(8,8,10,.25) 46%, rgba(8,8,10,0) 70%); }
.mx-wk-cap { position:absolute; z-index:1; inset-inline:12px; bottom:12px; display:grid; gap:1px; color:#fff; text-align:start; }
.mx-wk-cap b { font-size:14px; line-height:1.3; }
.mx-wk-cap small { font-size:11.5px; color:#eadfcf; }
.mx-wk-badge { position:absolute; z-index:1; inset-block-start:10px; inset-inline-end:10px; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:linear-gradient(135deg,#f6c27e,#ef8a45); color:#1a0f08; font-size:13px; box-shadow:0 6px 16px rgba(0,0,0,.3); }
.mx-wk-tile[aria-pressed="true"] { transform:translateY(-4px); box-shadow:0 0 0 3px var(--x-gold2), 0 24px 50px rgba(60,40,15,.28); }
.mx-wk-tile .mx-bar { position:absolute; z-index:2; inset-inline:0; bottom:0; height:3px; border-radius:0; background:transparent; }

/* Video band inside the work section */
.mx-vd { --x-ink:#f7f1e8; --x-muted:#c3bbae; --x-gold:#f2b56b; --x-gold2:#f2b56b; --x-line:#2a323d;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(28px,5vw,64px); align-items:center; margin-top:clamp(72px,9vw,120px); padding-block:clamp(32px,4vw,56px); border-radius:34px; color:var(--x-ink);
  background:radial-gradient(60% 80% at 80% 20%, rgba(242,181,107,.16), transparent 65%), linear-gradient(160deg,#0d1119,#07090e); box-shadow:0 40px 90px rgba(20,12,4,.3); }
.mx-vd .mx-btn { color:var(--x-ink); }
.mx-vd .mx-btn:hover { color:#1a0f08; }
.mh-section.mh-v2 .mx-vd-title { margin:0 0 16px; font-size:clamp(30px,3.4vw,52px); line-height:1.15; color:var(--x-ink); }
.mx-vd-tags { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0; padding:0; list-style:none; }
.mx-vd-tags li { padding:6px 14px; border-radius:999px; border:1px solid rgba(242,181,107,.4); color:var(--x-gold); font-size:13px; font-weight:700; }
.mx-vd-more { margin:0 0 24px; font-size:14px; color:var(--x-muted); }
.mx-vd-more a { color:var(--x-gold); font-weight:700; text-underline-offset:4px; }
.mx-vd-reels { display:flex; justify-content:center; align-items:center; gap:clamp(10px,1.6vw,18px); }
.mx-vd-reel { position:relative; margin:0; width:31%; max-width:210px; aspect-ratio:9/16; border-radius:24px; overflow:hidden; border:5px solid #1c2533; background:#000; box-shadow:0 30px 60px rgba(0,0,0,.5); }
.mx-vd-reel:nth-child(2) { transform:translateY(-22px) scale(1.06); z-index:1; }
.mx-vd-reel video { width:100%; height:100%; object-fit:cover; display:block; }
.mx-vd-reel figcaption { position:absolute; inset-inline:0; bottom:0; padding:28px 12px 12px; background:linear-gradient(to top, rgba(0,0,0,.85), transparent); display:grid; color:#fff; }
.mx-vd-reel b { font-size:12.5px; }
.mx-vd-reel small { font-size:11px; color:#e2d8c8; }

/* 12 · Questions as a chat */
.mx-faq { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,90px); align-items:center; }
.mx-faq-list { list-style:none; margin:26px 0 0; padding:0; }
.mx-faq-q { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 14px; width:100%; padding:16px 0 0; border:0; border-top:1px solid var(--x-line); background:none; color:var(--x-muted); font:inherit; font-size:17px; font-weight:700; line-height:1.5; text-align:start; cursor:pointer; transition:color .3s ease; }
.mx-faq-q:hover, .mx-faq-q[aria-pressed="true"] { color:var(--x-ink); }
.mx-faq-n { font-size:13px; font-weight:800; color:var(--x-gold); padding-top:4px; }
.mx-faq-q .mx-bar { grid-column:1/-1; margin-top:14px; background:transparent; }
.mx-faq-chat { display:flex; flex-direction:column; min-height:440px; border-radius:30px; overflow:hidden; background:#0b141a; box-shadow:0 40px 80px rgba(20,14,6,.3); border:7px solid #1c2533; }
.mx-faq-bar { display:flex; align-items:center; gap:10px; padding:14px 16px; background:#1f2c34; color:#e9edef; }
.mx-faq-av { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#f6c27e,#ef8a45); color:#1a0f08; font-weight:800; }
.mx-faq-bar b { display:block; font-size:14px; }
.mx-faq-bar small { font-size:11.5px; color:#aebac1; }
.mx-faq-body { flex:1; display:grid; padding:24px 18px; background:#0b141a radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 14px 14px; }
.mx-faq-turn { grid-area:1/1; display:grid; gap:12px; align-content:end; opacity:0; transition:opacity .35s ease; }
.mx-faq-turn.is-on { opacity:1; }
.mx-faq-ask, .mx-faq-ans { margin:0; max-width:84%; padding:11px 14px; border-radius:16px; font-size:15px; line-height:1.65; color:#e9edef; }
.mx-faq-ask { justify-self:end; background:#005c4b; border-start-end-radius:4px; }
.mx-faq-ans { position:relative; justify-self:start; min-width:76px; min-height:44px; background:#202c33; border-start-start-radius:4px; }
.mx-faq-turn.is-on .mx-faq-ask { animation:mx-pop .45s cubic-bezier(.2,.75,.1,1) both; }
.mx-faq-turn.is-on .mx-faq-ans { animation:mx-pop .45s cubic-bezier(.2,.75,.1,1) .45s both; }
.mx-faq-dots { position:absolute; inset-block-start:16px; inset-inline-start:16px; display:flex; gap:4px; }
.mx-faq-dots i { width:7px; height:7px; border-radius:50%; background:#8696a0; animation:mx-bounce 1s ease-in-out infinite; }
.mx-faq-dots i:nth-child(2) { animation-delay:.15s; } .mx-faq-dots i:nth-child(3) { animation-delay:.3s; }
@keyframes mx-bounce { 50% { transform:translateY(-4px); opacity:.5; } }
.mx-faq-turn.is-on .mx-faq-dots { animation:mx-hide .2s ease 1.5s forwards; }
.mx-faq-txt { opacity:0; }
.mx-faq-turn.is-on .mx-faq-txt { animation:mx-show .4s ease 1.6s forwards; }
@keyframes mx-hide { to { opacity:0; visibility:hidden; } }
@keyframes mx-show { to { opacity:1; } }

/* 13 · Closing: night band, gold light, the mark */
.mh-v2.mx-s-final-cta { --x-ink:#f7f1e8; --x-muted:#c3bbae; --x-gold:#f2b56b; --x-gold2:#f2b56b; --x-line:#2a323d; padding-block:clamp(96px,12vw,170px);
  background:radial-gradient(50% 70% at 50% 110%, rgba(242,181,107,.28), transparent 65%), radial-gradient(40% 50% at 10% 0%, rgba(40,90,180,.16), transparent 70%), #07090e; }
.mx-end { position:relative; }
.mx-end-mark { position:absolute; inset-inline-end:-80px; top:50%; width:min(560px,48vw); height:auto; transform:translateY(-50%); opacity:.07; pointer-events:none; }
.mx-end-in { display:grid; justify-items:center; text-align:center; max-width:980px; }
.mx-end-kicker { justify-content:center; }
.mh-section.mh-v2 .mx-end-title { margin:0 0 20px; font-size:clamp(50px,7.6vw,118px); line-height:1.04; font-weight:800; letter-spacing:-.04em; white-space:pre-line; color:#fff; }
.mh-v2[dir="rtl"] .mx-end-title { line-height:1.25; letter-spacing:0; }
.mx-end-body { margin-inline:auto; text-align:center; }
.mx-end-choose { margin:38px 0 14px; font-size:14px; font-weight:800; color:var(--x-gold); }
.mx-end-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:0; padding:0; list-style:none; }
.mx-end-chips a { display:inline-flex; align-items:center; gap:10px; min-height:50px; padding:8px 18px 8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.04); color:var(--x-ink); font-weight:700; font-size:15px; text-decoration:none; transition:border-color .3s ease, background .3s ease; }
.mh-v2[dir="rtl"] .mx-end-chips a { padding:8px 10px 8px 18px; }
.mx-end-chips a:hover { border-color:var(--x-gold); background:rgba(242,181,107,.1); }
.mx-end-ico { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#f6c27e,#ef8a45); color:#1a0f08; }
.mx-end-ico svg { width:16px; height:16px; }
.mx-end-cta { display:inline-flex; align-items:center; gap:14px; margin-top:30px; min-height:60px; padding:14px 32px; border-radius:999px; background:linear-gradient(135deg,#f6c27e,#ef8a45); color:#1a0f08; font-size:18px; font-weight:800; text-decoration:none; box-shadow:0 20px 50px rgba(239,138,69,.35); transition:filter .25s ease; }
.mx-end-cta:hover { filter:brightness(1.08); }
.mx-end-note { margin:22px 0 0; font-size:13px; color:var(--x-muted); }

@media (max-width:1023px) {
  .mx-wk-head, .mx-wk-stage, .mx-vd, .mx-faq { grid-template-columns:minmax(0,1fr); }
  .mx-wk-phone { max-width:320px; width:100%; justify-self:center; }
  .mx-vd { padding-inline:clamp(20px,4vw,40px); }
}
@media (max-width:719px) {
  .mx-wk-wall { gap:8px; }
  .mx-wk-tile { border-radius:12px; }
  .mx-wk-cap { inset-inline:7px; bottom:6px; }
  .mx-wk-cap b { font-size:10.5px; }
  .mx-wk-cap small { display:none; }
  .mx-wk-badge { width:22px; height:22px; font-size:11px; inset-block-start:6px; inset-inline-end:6px; }
  .mx-vd { border-radius:24px; margin-inline:12px; }
  .mx-vd-reel:nth-child(2) { transform:translateY(-12px) scale(1.04); }
  .mx-faq-chat { min-height:380px; }
  .mx-faq-ask, .mx-faq-ans { font-size:14px; }
  .mx-end-mark { inset-inline-end:-40px; width:70vw; }
}
@media (prefers-reduced-motion:reduce) {
  .mx-faq-dots { display:none; }
  .mx-faq-txt { opacity:1; }
}
/* Story phone (Ali's story designs, 2026-11-12): the story fills the screen, story bars on top */
.mx-wk-phone { aspect-ratio:9/16; background:#000; }
.mx-wk-story { position:absolute; inset:0; opacity:0; transition:opacity .5s ease; }
.mx-wk-story.is-on { opacity:1; }
.mx-wk-story img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.04); transition:transform 3s ease; }
.mx-wk-story.is-on img { transform:scale(1); }
.mx-wk-story::before { content:""; position:absolute; inset:0 0 auto 0; height:120px; z-index:1; background:linear-gradient(to bottom, rgba(0,0,0,.55), transparent); }
.mx-wk-story .mx-wk-top { position:absolute; z-index:2; inset-inline:12px; top:22px; padding:0; color:#fff; }
.mx-wk-story .mx-wk-top b { color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.mx-wk-story .mx-wk-top small { color:#f1e9dc; text-shadow:0 1px 6px rgba(0,0,0,.5); }
.mx-wk-story .mx-wk-soon { position:absolute; z-index:2; bottom:16px; inset-inline-start:12px; box-shadow:0 6px 18px rgba(0,0,0,.3); }
.mx-wk-segs { position:absolute; z-index:3; inset-inline:10px; top:10px; display:flex; gap:3px; }
.mx-wk-segs i { flex:1; height:3px; border-radius:3px; background:rgba(255,255,255,.35); overflow:hidden; position:relative; }
.mx-wk-segs i::after { content:""; position:absolute; inset:0; background:#fff; transform:scaleX(clamp(0, calc(var(--mx-i, 0) - var(--k)), 1)); transform-origin:left; }
.mx-wk-segs i.is-on::after { animation:mx-bar var(--mx-dur, 3s) linear forwards; }
[data-motion="paused"] .mx-wk-segs i::after, [data-motion="off"] .mx-wk-segs i::after { animation-play-state:paused; }
.mh-v2[dir="rtl"] .mx-wk-segs i::after { transform-origin:right; }