/* Homepage redesign batch 2 (2026-11-12): journey, research, automation, websites, how we work. Prefix mx-. */
.mx-note { margin:28px 0 0; font-size:13.5px; line-height:1.7; color:var(--x-muted); max-width:80ch; }
/* Dark bands: research and websites (same night palette as marketing first) */
.mh-v2.mx-s-research-intelligence, .mh-v2.mx-s-websites-infrastructure { --x-bg:#0a0d13; --x-bg2:#10151d; --x-ink:#f7f1e8; --x-muted:#bdb5a8; --x-gold:#f2b56b; --x-gold2:#f2b56b; --x-line:#2a323d; --x-card:#121823; --x-shadow:0 30px 70px rgba(0,0,0,.5); }
.mh-v2.mx-s-research-intelligence { background:radial-gradient(55% 60% at 50% 0%, rgba(50,110,220,.2), transparent 70%), #0a0d13; }
.mh-v2.mx-s-websites-infrastructure { background:radial-gradient(50% 60% at 15% 100%, rgba(242,181,107,.14), transparent 70%), #090b10; }

/* 6 · Journey: gold wave with seven stations */
.mx-jr-head { max-width:780px; }
.mx-jr-wave { position:relative; margin-top:clamp(36px,5vw,64px); aspect-ratio:1200/200; }
.mx-jr-wave svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.mx-jr-wave path { fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; }
.mx-jr-track { stroke:var(--x-line); stroke-width:2; }
.mx-jr-line, .mx-jr-glow { stroke:var(--x-gold2); stroke-dasharray:100; stroke-dashoffset:calc(100 - (6 + var(--mx-i, 0) * 88 / (var(--mx-n) - 1))); transition:stroke-dashoffset 1.2s cubic-bezier(.2,.75,.1,1); }
.mx-jr-line { stroke-width:3; }
.mx-jr-glow { stroke-width:12; opacity:.22; filter:blur(4px); }
.mx-jr-nodes { position:absolute; inset:0; }
.mx-jr-node { position:absolute; width:30px; height:30px; transform:translate(-50%,-50%); display:grid; place-items:center; padding:0; border:0; background:none; color:var(--x-muted); font:inherit; cursor:pointer; }
.mx-jr-dot { width:16px; height:16px; border-radius:50%; background:var(--x-bg); border:2px solid var(--x-line); transition:all .5s ease; }
.mx-jr-node.is-past .mx-jr-dot { background:var(--x-gold2); border-color:var(--x-gold2); }
.mx-jr-node[aria-pressed="true"] .mx-jr-dot { width:24px; height:24px; background:linear-gradient(135deg,#f6c27e,#ef8a45); border-color:transparent; box-shadow:0 0 0 8px rgba(239,138,69,.16), 0 0 30px rgba(239,138,69,.5); animation:mx-pulse 1.6s ease-in-out infinite; }
@keyframes mx-pulse { 50% { box-shadow:0 0 0 14px rgba(239,138,69,.06), 0 0 40px rgba(239,138,69,.6); } }
.mx-jr-name { position:absolute; top:30px; left:50%; transform:translateX(-50%); white-space:nowrap; font-size:13.5px; font-weight:700; color:var(--x-muted); transition:color .4s ease; }
.mx-jr-node.up .mx-jr-name { top:auto; bottom:30px; }
.mx-jr-node[aria-pressed="true"] .mx-jr-name { color:var(--x-ink); }
.mx-jr-stage { display:grid; margin-top:clamp(48px,6vw,80px); }
.mx-jr-card { grid-area:1/1; display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); align-items:stretch; min-height:clamp(320px,30vw,420px); border-radius:28px; overflow:hidden; background:var(--x-card); border:1px solid var(--x-line); box-shadow:var(--x-shadow);
  opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .55s ease, transform .6s ease, visibility 0s .6s; }
.mx-jr-card.is-on { opacity:1; visibility:visible; transform:none; transition:opacity .55s ease, transform .6s ease; }
.mx-jr-photo { position:relative; margin:0; min-height:100%; overflow:hidden; }
.mx-jr-photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 4s ease; }
.mx-jr-card.is-on .mx-jr-photo img { transform:scale(1); }
.mx-jr-photo::after { content:""; position:absolute; inset:0; }
.mh-v2[dir="ltr"] .mx-jr-photo::after { background:linear-gradient(to right, transparent 70%, var(--x-card) 100%); }
.mh-v2[dir="rtl"] .mx-jr-photo::after { background:linear-gradient(to left, transparent 70%, var(--x-card) 100%); }
.mx-jr-copy { align-self:center; padding:clamp(28px,4vw,60px); }
.mx-jr-count { font-size:14px; color:var(--x-muted); font-variant-numeric:tabular-nums; }
.mx-jr-count b { font-size:30px; color:var(--x-gold); font-weight:800; }
.mh-section.mh-v2 .mx-jr-copy h3 { margin:10px 0 12px; font-size:clamp(28px,3.2vw,48px); line-height:1.2; }
.mx-jr-copy p { margin:0; font-size:clamp(16px,1.3vw,20px); line-height:1.8; color:var(--x-muted); max-width:36ch; }

/* 7 · Research: typing search bar and result cards */
.mx-ri-head { max-width:760px; }
.mx-ri-search { display:flex; align-items:center; gap:16px; margin:clamp(32px,4vw,48px) 0; padding:14px 18px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(10px); box-shadow:0 24px 60px rgba(0,0,0,.4), inset 0 0 0 1px rgba(242,181,107,.08); font-size:clamp(17px,1.8vw,26px); font-weight:600; color:var(--x-ink); min-height:72px; }
.mx-ri-lens { display:grid; place-items:center; flex:none; width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#f6c27e,#ef8a45); color:#1a0f08; }
.mx-ri-lens svg { width:22px; height:22px; }
.mx-ri-q { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.mx-ri-caret { flex:none; width:2px; height:1.1em; background:var(--x-gold); animation:mx-blink 1s steps(2) infinite; }
@keyframes mx-blink { 50% { opacity:0; } }
.mx-ri-tag { margin-inline-start:auto; flex:none; padding:6px 14px; border-radius:999px; border:1px solid rgba(242,181,107,.45); color:var(--x-gold); font-size:12.5px; font-weight:700; }
.mx-ri-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:0; padding:0; list-style:none; }
.mx-ri-btn { display:grid; grid-template-rows:auto 1fr auto; width:100%; height:100%; padding:0; border:1px solid var(--x-line); border-radius:22px; overflow:hidden; background:var(--x-card); color:var(--x-ink); font:inherit; text-align:start; cursor:pointer; opacity:.62; transition:opacity .4s ease, transform .5s cubic-bezier(.2,.75,.1,1), border-color .4s ease, box-shadow .4s ease; }
.mx-ri-btn:hover { opacity:.85; }
.mx-ri-btn[aria-pressed="true"] { opacity:1; transform:translateY(-8px); border-color:rgba(242,181,107,.6); box-shadow:0 30px 70px rgba(0,0,0,.5), 0 0 40px rgba(242,181,107,.14); }
.mx-ri-img { display:block; aspect-ratio:4/3; overflow:hidden; }
.mx-ri-img img { width:100%; height:100%; object-fit:cover; transform:scale(1.05); transition:transform 1.2s ease; }
.mx-ri-btn[aria-pressed="true"] .mx-ri-img img { transform:scale(1); }
.mx-ri-txt { display:grid; align-content:start; gap:6px; padding:20px 22px 14px; }
.mx-ri-txt small { font-size:12px; font-weight:700; color:var(--x-gold); }
.mx-ri-txt strong { font-size:20px; line-height:1.35; }
.mx-ri-txt span { font-size:15px; line-height:1.7; color:var(--x-muted); }
.mx-ri-btn .mx-bar { margin:0 22px 18px; background:transparent; }

/* 8 · Automation: steps, arch photo and a phone chat */
.mx-au { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(32px,6vw,90px); align-items:center; }
.mx-au-steps { list-style:none; margin:30px 0 28px; padding:0; }
.mx-au-step { display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 16px; width:100%; padding:16px 0 0; border:0; border-top:1px solid var(--x-line); background:none; color:var(--x-ink); font:inherit; text-align:start; cursor:pointer; opacity:.55; transition:opacity .4s ease; }
.mx-au-step[aria-pressed="true"], .mx-au-step:hover { opacity:1; }
.mx-au-n { font-size:14px; font-weight:800; color:var(--x-gold); padding-top:3px; }
.mx-au-txt { display:grid; gap:4px; }
.mx-au-txt strong { font-size:19px; }
.mx-au-txt span { font-size:15px; line-height:1.7; color:var(--x-muted); }
.mx-au-step .mx-bar { grid-column:1/-1; margin-top:16px; background:transparent; }
.mx-au-visual { position:relative; min-height:clamp(420px,40vw,540px); }
.mx-au-arch { position:absolute; inset-block:0; inset-inline-start:0; width:62%; border-radius:999px 999px 28px 28px; overflow:hidden; box-shadow:var(--x-shadow); background:#111; }
.mx-au-arch::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(201,138,62,.6); background:linear-gradient(to top, rgba(0,0,0,.25), transparent 40%); }
.mx-au-arch img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.06); transition:opacity .9s ease, transform 4s ease; }
.mx-au-arch img.is-on { opacity:1; transform:scale(1); }
.mx-au-phone { position:absolute; inset-inline-end:0; bottom:4%; width:min(46%, 280px); aspect-ratio:9/17; display:flex; flex-direction:column; border-radius:34px; overflow:hidden; background:#0b141a; border:7px solid #1c2533; box-shadow:0 40px 80px rgba(20,14,6,.35); }
.mx-au-bar { display:flex; align-items:center; gap:10px; padding:12px 14px; background:#1f2c34; color:#e9edef; }
.mx-au-av { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,#f6c27e,#ef8a45); color:#1a0f08; font-weight:800; font-size:13px; }
.mx-au-bar b { display:block; font-size:13px; }
.mx-au-bar small { font-size:10.5px; color:#aebac1; }
.mx-au-chat { flex:1; display:grid; padding:14px 12px; background:#0b141a radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px) 0 0 / 14px 14px; }
.mx-au-group { grid-area:1/1; display:grid; gap:8px; align-content:end; opacity:0; transition:opacity .4s ease; }
.mx-au-group.is-on { opacity:1; }
.mx-au-msg { max-width:84%; margin:0; padding:8px 11px; border-radius:12px; font-size:12.5px; line-height:1.5; color:#e9edef; }
.mx-au-group.is-on .mx-au-msg { animation:mx-pop .45s cubic-bezier(.2,.75,.1,1) calc(var(--d) * .5s) both; }
@keyframes mx-pop { from { opacity:0; transform:translateY(8px) scale(.96); } to { opacity:1; transform:none; } }
.mx-au-in { justify-self:start; background:#202c33; border-start-start-radius:3px; }
.mx-au-out { justify-self:end; background:#005c4b; border-start-end-radius:3px; }
.mx-au-sys { justify-self:center; max-width:94%; padding:5px 12px; border-radius:999px; background:rgba(242,181,107,.16); color:#ffd9a8; font-size:11px; font-weight:700; text-align:center; }
.mx-au-note { grid-column:1/-1; margin-top:8px; }

/* 9 · Websites: a site that builds itself in a browser and a phone */
.mx-ws-head { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(24px,5vw,72px); align-items:end; }
.mx-ws-head .mx-h2 { margin-bottom:0; }
.mx-ws-tabs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:clamp(32px,4vw,48px) 0 clamp(28px,3vw,40px); }
.mx-ws-tab { display:grid; gap:4px; padding:18px 20px 14px; border-radius:18px; border:1px solid var(--x-line); background:rgba(255,255,255,.03); color:var(--x-ink); font:inherit; text-align:start; cursor:pointer; opacity:.6; transition:opacity .4s ease, border-color .4s ease, background .4s ease; }
.mx-ws-tab:hover { opacity:.85; }
.mx-ws-tab[aria-pressed="true"] { opacity:1; border-color:rgba(242,181,107,.6); background:rgba(242,181,107,.06); }
.mx-ws-tab small { font-size:12px; font-weight:700; color:var(--x-gold); }
.mx-ws-tab strong { font-size:20px; }
.mx-ws-tab > span:not(.mx-bar) { font-size:14px; line-height:1.6; color:var(--x-muted); }
.mx-ws-tab .mx-bar { margin-top:12px; background:transparent; }
.mx-ws-stage { position:relative; padding-bottom:4%; }
.mx-ws-browser { width:82%; border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background:#f8f4ee; box-shadow:0 40px 90px rgba(0,0,0,.55); }
.mx-ws-chrome { display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; background:#1a2230; }
.mx-ws-chrome i { width:11px; height:11px; border-radius:50%; background:#ff5f57; }
.mx-ws-chrome i:nth-child(2) { background:#febc2e; }
.mx-ws-chrome i:nth-child(3) { background:#28c840; }
.mx-ws-chrome span { margin-inline-start:16px; flex:1; max-width:360px; height:24px; display:flex; align-items:center; padding:0 12px; border-radius:8px; background:#0f1520; color:#8b98a8; font-size:12px; }
.mx-ws-screen { position:relative; container-type:inline-size; background:#f8f4ee; color:#1d2430; }
.mx-ws-desk { aspect-ratio:16/9; }
.mx-ws-page { position:absolute; inset:0; padding:4cqw 6cqw; opacity:0; transition:opacity .5s ease; }
.mx-ws-page.is-on { opacity:1; }
.mx-ws-nav { display:flex; align-items:center; gap:1.6cqw; }
.mx-ws-nav b { font-size:2.2cqw; color:#1d2430; }
.mx-ws-nav i { width:7cqw; height:.8cqw; border-radius:9px; background:#dccfbc; }
.mx-ws-nav i:first-of-type { margin-inline-start:auto; }
.mx-ws-hero { margin-top:8cqw; max-width:48%; }
.mx-ws-h { margin:0; font-size:4.6cqw; line-height:1.25; font-weight:800; color:#1d2430; }
.mx-ws-cta { display:inline-block; margin-top:2.6cqw; padding:1.2cqw 2.8cqw; border-radius:99px; background:#a8692a; color:#fff; font-size:1.7cqw; font-weight:700; }
.mx-ws-img { position:absolute; inset-inline-end:6cqw; top:22%; width:34%; aspect-ratio:4/5; border-radius:2cqw; background:radial-gradient(circle at 70% 25%, rgba(255,255,255,.7) 0 8%, transparent 9%), radial-gradient(circle at 30% 70%, rgba(255,255,255,.35) 0 14%, transparent 15%), linear-gradient(160deg,#ead9c0,#c98a3e); box-shadow:0 2cqw 4cqw rgba(120,80,30,.25); }
.mx-ws-page.is-on .mx-ws-hero, .mx-ws-page.is-on .mx-ws-img { animation:mx-pop .6s cubic-bezier(.2,.75,.1,1) both; }
.mx-ws-page.is-on .mx-ws-img { animation-delay:.2s; }
.mx-ws-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2.4cqw; margin-top:6cqw; }
.mx-ws-card { padding:2.4cqw; border-radius:1.6cqw; background:#fff; box-shadow:0 1cqw 3cqw rgba(60,40,15,.1); }
.mx-ws-page.is-on .mx-ws-card { animation:mx-pop .55s cubic-bezier(.2,.75,.1,1) calc(var(--d) * .18s) both; }
.mx-ws-card span { display:block; width:4.4cqw; height:4.4cqw; border-radius:50%; background:#f3e4cf; }
.mx-ws-card b { display:block; margin:1.6cqw 0 1.2cqw; font-size:1.9cqw; }
.mx-ws-card i { display:block; height:.8cqw; margin-top:.8cqw; border-radius:9px; background:#ece4d8; }
.mx-ws-card i:last-child { width:70%; }
.mx-ws-form { display:grid; gap:2cqw; width:52%; margin-top:5cqw; }
.mx-ws-field { display:block; font-size:1.6cqw; color:#5b6470; }
.mx-ws-field span { display:block; height:4.4cqw; margin-top:.8cqw; border-radius:1cqw; border:1px solid #ddd2c1; background:#fff; }
.mx-ws-form .mx-ws-cta { margin-top:.6cqw; text-align:center; }
.mx-ws-wa { display:block; padding:1.2cqw; border-radius:99px; background:#1d8a4a; color:#fff; font-size:1.7cqw; font-weight:700; text-align:center; }
.mx-ws-page.is-on .mx-ws-form > * { animation:mx-pop .5s ease both; }
.mx-ws-phone { position:absolute; inset-inline-end:0; bottom:0; width:23%; aspect-ratio:9/18.5; border-radius:28px; overflow:hidden; border:6px solid #1a2230; background:#f8f4ee; box-shadow:0 40px 80px rgba(0,0,0,.6); }
.mx-ws-notch { position:absolute; z-index:3; top:6px; left:50%; transform:translateX(-50%); width:34%; height:12px; border-radius:9px; background:#1a2230; }
.mx-ws-mob { position:absolute; inset:0; }
.mx-ws-mob .mx-ws-page { padding:16cqw 7cqw 7cqw; }
.mx-ws-mob .mx-ws-nav b { font-size:7cqw; }
.mx-ws-mob .mx-ws-nav i { display:none; }
.mx-ws-mob .mx-ws-hero { max-width:none; margin-top:10cqw; }
.mx-ws-mob .mx-ws-h { font-size:10cqw; }
.mx-ws-mob .mx-ws-cta, .mx-ws-mob .mx-ws-wa { font-size:5.5cqw; padding:3.4cqw 6cqw; }
.mx-ws-mob .mx-ws-img { position:relative; inset:auto; top:auto; width:100%; aspect-ratio:16/11; margin-top:8cqw; border-radius:5cqw; }
.mx-ws-mob .mx-ws-cards { grid-template-columns:minmax(0,1fr); gap:4cqw; margin-top:8cqw; }
.mx-ws-mob .mx-ws-card { padding:5cqw; border-radius:4cqw; }
.mx-ws-mob .mx-ws-card span { width:9cqw; height:9cqw; }
.mx-ws-mob .mx-ws-card b { font-size:5.5cqw; margin:3cqw 0; }
.mx-ws-mob .mx-ws-card i { height:2cqw; }
.mx-ws-mob .mx-ws-form { width:100%; gap:4cqw; margin-top:10cqw; }
.mx-ws-mob .mx-ws-field { font-size:5cqw; }
.mx-ws-mob .mx-ws-field span { height:12cqw; border-radius:3cqw; }
.mx-ws-btn { margin-top:clamp(28px,3vw,40px); }

/* 10 · How we work: a rising staircase with a floating round photo */
.mx-hw-head { max-width:780px; }
.mx-hw-stage { position:relative; margin-top:clamp(28px,3vw,40px); padding-top:150px; }
.mx-hw-float { position:absolute; inset:0; pointer-events:none; }
.mx-hw-shot { position:absolute; width:130px; aspect-ratio:1; border-radius:50%; overflow:hidden; border:3px solid var(--x-gold2); box-shadow:0 0 0 8px rgba(201,138,62,.12), var(--x-shadow);
  inset-inline-start:calc(100% / var(--mx-n) * (var(--k) + .5) - 65px); bottom:calc(130px + var(--k) * 38px + 20px); opacity:0; transform:translateY(16px) scale(.9); transition:opacity .5s ease, transform .6s cubic-bezier(.2,.75,.1,1); }
.mx-hw-shot.is-on { opacity:1; transform:none; }
.mx-hw-shot img { width:100%; height:100%; object-fit:cover; }
.mx-hw-stairs { display:grid; grid-template-columns:repeat(var(--mx-n),minmax(0,1fr)); gap:12px; align-items:end; margin:0; padding:0; list-style:none; }
.mx-hw-step { position:relative; display:flex; flex-direction:column; gap:6px; width:100%; height:calc(130px + var(--k) * 38px); padding:18px 18px 16px; border:1px solid var(--x-line); border-radius:18px 18px 8px 8px; background:linear-gradient(180deg, var(--x-card), var(--x-bg2)); color:var(--x-ink); font:inherit; text-align:start; cursor:pointer; overflow:hidden; transition:background .5s ease, box-shadow .5s ease, transform .5s cubic-bezier(.2,.75,.1,1); }
.mx-hw-n { font-size:13px; font-weight:800; color:var(--x-gold); }
.mx-hw-step strong { font-size:clamp(15px,1.3vw,18px); line-height:1.35; }
.mx-hw-body { font-size:13.5px; line-height:1.6; color:var(--x-muted); opacity:0; transition:opacity .4s ease; }
.mx-hw-step[aria-pressed="true"] { background:linear-gradient(180deg,#f6c27e,#ef8a45); border-color:transparent; color:#1a0f08; box-shadow:0 24px 50px rgba(239,138,69,.3); transform:translateY(-6px); }
.mx-hw-step[aria-pressed="true"] .mx-hw-n { color:#5a2e0c; }
.mx-hw-step[aria-pressed="true"] .mx-hw-body { opacity:1; color:#3a1f0a; }
.mx-hw-step .mx-bar { margin-top:auto; background:rgba(0,0,0,.08); }
.mx-hw-step[aria-pressed="true"] .mx-bar i { background:#1a0f08; }

@media (max-width:1023px) {
  .mx-jr-card { grid-template-columns:minmax(0,1fr); }
  .mx-jr-photo { min-height:260px; }
  .mh-v2[dir] .mx-jr-photo::after { background:linear-gradient(to top, var(--x-card) 0, transparent 40%); }
  .mx-au, .mx-ws-head { grid-template-columns:minmax(0,1fr); }
  .mx-ri-cards { grid-template-columns:minmax(0,1fr); }
  .mx-ri-btn { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); grid-template-rows:auto; }
  .mx-ri-img { aspect-ratio:auto; height:100%; min-height:150px; grid-row:span 2; }
  .mx-hw-step strong { font-size:15px; }
}
@media (max-width:719px) {
  .mx-jr-name { font-size:11px; }
  .mx-jr-node:not([aria-pressed="true"]) .mx-jr-name { display:none; }
  .mx-ri-search { min-height:60px; font-size:16px; padding:10px 14px; gap:10px; }
  .mx-ri-tag { display:none; }
  .mx-ri-btn { grid-template-columns:minmax(0,1fr); }
  .mx-ri-img { aspect-ratio:16/9; height:auto; min-height:0; grid-row:auto; }
  .mx-ri-btn:not([aria-pressed="true"]) .mx-ri-img { display:none; }
  .mx-au-visual { min-height:440px; }
  .mx-au-arch { width:66%; }
  .mx-au-phone { width:58%; }
  .mx-ws-tabs { grid-template-columns:minmax(0,1fr); gap:10px; }
  .mx-ws-tab:not([aria-pressed="true"]) > span:not(.mx-bar) { display:none; }
  .mx-ws-browser { width:100%; }
  .mx-ws-phone { width:34%; bottom:-6%; }
  .mx-hw-stage { padding-top:0; }
  .mx-hw-float { position:relative; height:160px; }
  .mx-hw-shot { inset-inline-start:calc(50% - 65px); bottom:auto; top:10px; }
  .mx-hw-stairs { grid-template-columns:minmax(0,1fr); gap:8px; margin-top:16px; }
  .mx-hw-step { height:auto; min-height:64px; }
  .mx-hw-body { display:none; }
  .mx-hw-step[aria-pressed="true"] .mx-hw-body { display:block; }
}
@media (prefers-reduced-motion:reduce) {
  .mh-v2 .mx-jr-line, .mh-v2 .mx-jr-glow { transition:none; }
}
/* Accessibility pass (2026-11-12): inactive points stay readable (no transparency), hidden names stay announced */
.mx-au-step, .mx-mf-point, .mx-ri-btn, .mx-ws-tab { opacity:1; }
.mx-au-step:not([aria-pressed="true"]) .mx-au-txt strong, .mx-mf-point:not([aria-pressed="true"]) .mx-mf-txt strong, .mx-ws-tab:not([aria-pressed="true"]) strong, .mx-ri-btn:not([aria-pressed="true"]) .mx-ri-txt strong { color:var(--x-muted); }
.mx-ri-btn:not([aria-pressed="true"]) .mx-ri-img img, .mx-ws-tab:not([aria-pressed="true"]) { filter:saturate(.75); }
.mx-ws-cta { background:#93561d; }
@media (max-width:719px) {
  .mx-jr-node:not([aria-pressed="true"]) .mx-jr-name { display:block; position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
}
/* How we work, fuller (Ali 2026-11-12): taller steps, a large photo, a gold growth line with an arrow, text in every step */
.mx-hw-stage { height:640px; padding-top:0; display:flex; align-items:flex-end; }
.mx-hw-stairs { width:100%; gap:14px; }
.mx-hw-step { height:calc(180px + var(--k) * 52px); padding:22px 22px 18px; gap:8px; }
.mx-hw-step strong { font-size:clamp(17px,1.45vw,21px); }
.mx-hw-body { opacity:1; font-size:14px; line-height:1.65; }
.mx-hw-big { position:absolute; inset-block-end:6px; inset-inline-end:12px; font-size:clamp(56px,6vw,88px); font-weight:800; line-height:1; color:var(--x-line); opacity:.75; pointer-events:none; }
.mx-hw-step > :not(.mx-hw-big) { position:relative; z-index:1; }
.mx-hw-step[aria-pressed="true"] .mx-hw-big { color:rgba(255,255,255,.28); opacity:1; }
.mx-hw-shot { width:clamp(170px,17vw,240px); inset-inline-start:calc(100% / var(--mx-n) * (var(--k) + .5) - clamp(85px,8.5vw,120px)); bottom:calc(180px + var(--k) * 52px + 26px); border-width:4px; box-shadow:0 0 0 10px rgba(201,138,62,.12), 0 30px 60px rgba(60,40,15,.25); }
.mx-hw-growth { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.mx-hw-growth path { fill:none; vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:round; }
.mx-hw-growth-line { stroke:var(--x-gold2); stroke-width:2.5; stroke-dasharray:7 7; animation:mx-hw-flow 1.6s linear infinite; }
.mx-hw-growth-glow { stroke:var(--x-gold2); stroke-width:12; opacity:.12; }
.mx-hw-growth marker path { fill:var(--x-gold2); }
@keyframes mx-hw-flow { to { stroke-dashoffset:-28; } }
@media (max-width:1023px) {
  .mx-hw-stage { height:560px; }
  .mx-hw-step { height:calc(160px + var(--k) * 40px); padding:16px 14px; }
  .mx-hw-body { font-size:12.5px; }
  .mx-hw-shot { width:150px; inset-inline-start:calc(100% / var(--mx-n) * (var(--k) + .5) - 75px); bottom:calc(160px + var(--k) * 40px + 20px); }
  .mx-hw-growth { display:none; }
}
@media (max-width:719px) {
  .mx-hw-stage { height:auto; display:block; }
  .mx-hw-float { height:200px; }
  .mx-hw-shot { width:180px; inset-inline-start:calc(50% - 90px); bottom:auto; top:6px; }
  .mx-hw-step { height:auto; min-height:76px; }
  .mx-hw-big { font-size:48px; }
}
/* Website mockup with Ali's clinic photo (2026-11-12): a real hero picture, photo service cards, a contact picture */
.mx-ws-pic { display:block; width:100%; height:100%; object-fit:cover; }
.mx-ws-img { overflow:hidden; background:#e8dccb; width:44%; aspect-ratio:4/3.4; top:20%; }
.mx-ws-img .mx-ws-pic { object-position:60% 40%; }
.mx-ws-hero { max-width:44%; }
.mx-ws-card { overflow:hidden; padding:0 0 2cqw; }
.mx-ws-card .mx-ws-thumb { display:block; width:100%; height:auto; aspect-ratio:4/3; border-radius:0; background:#e8dccb; overflow:hidden; }
.mx-ws-card b, .mx-ws-card i { margin-inline:2.4cqw; }
.mx-ws-card i { width:auto; }
.mx-ws-card i:last-child { width:60%; }
.mx-ws-cimg { position:absolute; inset-inline-end:6cqw; top:20%; width:32%; aspect-ratio:3/4; border-radius:2cqw; overflow:hidden; box-shadow:0 2cqw 4cqw rgba(120,80,30,.2); }
.mx-ws-page.is-on .mx-ws-cimg { animation:mx-pop .6s cubic-bezier(.2,.75,.1,1) .15s both; }
.mx-ws-mob .mx-ws-img { width:100%; aspect-ratio:16/11; }
.mx-ws-mob .mx-ws-card { padding:0 0 4cqw; }
.mx-ws-mob .mx-ws-card .mx-ws-thumb { width:100%; height:auto; aspect-ratio:16/8; }
.mx-ws-mob .mx-ws-card b, .mx-ws-mob .mx-ws-card i { margin-inline:5cqw; }
.mx-ws-mob .mx-ws-cimg { position:relative; inset:auto; top:auto; width:100%; aspect-ratio:16/9; margin-top:6cqw; border-radius:4cqw; }
.mx-ws-mob .mx-ws-p3 { display:flex; flex-direction:column; }
.mx-ws-mob .mx-ws-p3 .mx-ws-form { margin-top:6cqw; }
/* Contact page info card (no repeated photo) */
.mx-ws-info { position:absolute; inset-inline-end:6cqw; top:22%; width:32%; display:grid; gap:1.6cqw; padding:2.4cqw; border-radius:2cqw; background:#fff; box-shadow:0 2cqw 4cqw rgba(120,80,30,.14); }
.mx-ws-row { display:flex; align-items:center; gap:1.6cqw; }
.mx-ws-page.is-on .mx-ws-row { animation:mx-pop .5s cubic-bezier(.2,.75,.1,1) calc(.15s + var(--d) * .15s) both; }
.mx-ws-ri { display:grid; place-items:center; flex:none; width:4.6cqw; height:4.6cqw; border-radius:50%; background:#f3e4cf; color:#8a5419; }
.mx-ws-ri svg { width:55%; height:55%; }
.mx-ws-row b { display:block; font-size:1.7cqw; color:#1d2430; }
.mx-ws-row small { display:block; font-size:1.4cqw; color:#5b6470; }
.mx-ws-img { background:#e8dccb; }
.mx-ws-img .mx-ws-pic { object-position:50% 50%; }
.mx-ws-mob .mx-ws-info { position:relative; inset:auto; top:auto; width:100%; margin-top:6cqw; gap:3.4cqw; padding:5cqw; border-radius:4cqw; }
.mx-ws-mob .mx-ws-ri { width:10cqw; height:10cqw; }
.mx-ws-mob .mx-ws-row { gap:3.4cqw; }
.mx-ws-mob .mx-ws-row b { font-size:4.6cqw; }
.mx-ws-mob .mx-ws-row small { font-size:4cqw; }
/* How we work, no gap (Ali 2026-11-12): the round photo sits beside the title, the stairs start right below */
.mx-hw-top { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(24px,4vw,60px); align-items:center; }
.mx-hw-head { max-width:none; }
.mx-hw-top .mx-hw-float { position:relative; inset:auto; width:clamp(220px,21vw,290px); aspect-ratio:1; pointer-events:none; }
.mx-hw-top .mx-hw-shot { position:absolute; inset:0; width:100%; bottom:auto; transform:scale(.92); }
.mx-hw-top .mx-hw-shot.is-on { transform:none; }
.mx-hw-stage { height:470px; margin-top:clamp(12px,2vw,24px); }
@media (max-width:1023px) {
  .mx-hw-stage { height:auto; min-height:360px; }
  .mx-hw-top .mx-hw-float { width:190px; }
}
@media (max-width:719px) {
  .mx-hw-top { grid-template-columns:minmax(0,1fr); }
  .mx-hw-top .mx-hw-float { width:190px; height:auto; justify-self:center; }
  .mx-hw-stage { min-height:0; }
}
.mx-hw > .mx-pause { inset-inline-end:calc(clamp(20px,5vw,72px) + clamp(220px,21vw,290px) + 14px); } @media (max-width:1023px) { .mx-hw > .mx-pause { inset-inline-end:calc(clamp(20px,5vw,72px) + 204px); } } @media (max-width:719px) { .mx-hw > .mx-pause { inset-inline-end:clamp(20px,5vw,72px); } }