/* ==========================================================================
   Lumanta method pages: Catch, Shift, Rise
   Loads after style.css and pages.css. Accent color per page: --ac (catch ember, shift glow, rise aqua).
   ========================================================================== */
@property --ps { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --fill { syntax: "<number>"; inherits: true; initial-value: 0; }
.page--method { --ac: var(--ember); --ac2: var(--glow); background: var(--off); }
.page--shift { --ac: var(--glow); --ac2: var(--lumen); }
.page--rise { --ac: var(--aqua); --ac2: var(--lumen); }
.page--method em.g, .page--method .g { background: linear-gradient(100deg, var(--ac), var(--ac2)); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }

/* ---------- Words that drift in (headings, statements) ---------- */
.js [data-split] .w { display: inline-block; opacity: 0; transform: translate3d(0, .5em, 0) rotate(2deg); filter: blur(8px);
  transition: opacity 1.1s var(--ease), transform 1.3s var(--ease), filter 1.1s var(--ease); transition-delay: calc(var(--i) * 55ms + var(--d, 0s)); }
.js [data-split].in .w { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .js [data-split] .w { opacity: 1; transform: none; filter: none; transition: none; } }

/* ---------- Hero: words on one side, a portal of light on the other ---------- */
.mh { position: relative; isolation: isolate; overflow: clip; min-height: 100vh; min-height: 100svh; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center;
  gap: clamp(30px, 5vw, 90px); padding: calc(var(--nav-h) + clamp(30px, 6vh, 70px)) var(--pad) clamp(60px, 10vh, 110px); }
.mh__aura { position: absolute; inset: -10% -10% -20%; z-index: -2; pointer-events: none; }
.mh__aura i { position: absolute; border-radius: 50%; filter: blur(80px); animation: drift 24s ease-in-out infinite alternate; }
.mh__aura i:nth-child(1) { width: 46vw; height: 46vw; left: 46%; top: -6%; background: var(--ac); opacity: .32; }
.mh__aura i:nth-child(2) { width: 34vw; height: 34vw; left: 72%; top: 34%; background: var(--ac2); opacity: .22; animation-duration: 30s; }
.mh__aura i:nth-child(3) { width: 30vw; height: 30vw; left: -8%; top: 52%; background: var(--sky); opacity: .35; animation-duration: 34s; }
@keyframes drift { to { transform: translate3d(-6vw, 4vh, 0) scale(1.12); } }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 400 12px/1.4 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.crumbs a { color: inherit; transition: color .3s; }
.crumbs a:hover { color: var(--ink); }
.crumbs span[aria-hidden] { opacity: .5; }
.mh__step { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(26px, 4vh, 40px); font: 500 12px/1 var(--body); letter-spacing: .3em; text-transform: uppercase; color: var(--ink); }
.mh__step i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 500 12px/1 var(--body); letter-spacing: 0; font-style: normal; color: #fff;
  background: linear-gradient(140deg, var(--ac), var(--ac2)); box-shadow: 0 10px 24px -10px var(--ac); }
.mh h1 { margin-top: clamp(14px, 2.4vh, 24px); }
.mh__title { display: block; font: 300 clamp(48px, 7.4vw, 128px)/.98 var(--head); letter-spacing: .03em; color: var(--ink); }
.mh__title em { font-weight: 500; }
.mh__sub { display: block; margin-top: clamp(16px, 2.6vh, 26px); max-width: 22em; font: 400 clamp(19px, 1.7vw, 28px)/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink); }
.mh__lead { margin-top: clamp(16px, 2.6vh, 26px); max-width: 34em; font: 300 clamp(16px, 1.25vw, 20px)/1.75 var(--body); color: var(--ink-2); }
.mh__cta { margin-top: clamp(24px, 4vh, 40px); display: flex; flex-wrap: wrap; gap: 12px; }
.mh__media { position: relative; justify-self: center; width: min(100%, 560px); }
.mh__portal { position: relative; z-index: 1; overflow: hidden; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--nav-h) - 80px); margin: 0 auto;
  border-radius: 999px 999px 48px 48px; background: var(--sand); box-shadow: 0 60px 100px -50px rgba(34, 36, 58, .55); }
.mh__portal img { position: absolute; left: 0; top: 0; width: 100%; height: 114%; object-fit: cover; transform-origin: 50% 0; transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1));
  will-change: transform; }
.js .mh__portal img { animation: portalIn 2.4s var(--ease) both; }
@keyframes portalIn { from { opacity: 0; filter: blur(12px); --ps: 1.16; } }
.mh__portal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11, 16, 38, .28)); pointer-events: none; }
.mh__ring { position: absolute; left: 50%; top: 50%; width: 150%; height: 130%; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; }
.mh__chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px 13px 14px; border-radius: 999px; white-space: nowrap;
  font: 500 clamp(13px, 1vw, 16px)/1 var(--body); color: var(--ink); background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 22px 44px -22px rgba(34, 36, 58, .55), inset 0 0 0 1px rgba(255, 255, 255, .9); animation: floaty 7s ease-in-out infinite; }
.mh__chip i { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(140deg, var(--ac), var(--ac2)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ac) 18%, transparent); }
.mh__chip--a { left: -9%; bottom: 18%; }
.mh__chip--b { right: -6%; top: 16%; animation-delay: -3.5s; font-weight: 400; color: var(--ink-2); }
@keyframes floaty { 50% { transform: translate3d(0, -12px, 0); } }
@media (max-width: 960px) {
  .mh { grid-template-columns: 1fr; min-height: 0; padding-top: calc(var(--nav-h) + 34px); }
  .mh__media { width: min(86%, 440px); margin-top: 10px; }
  .mh__chip--a { left: -6%; } .mh__chip--b { right: -4%; }
}

/* ---------- Catch / Shift / Rise switcher ---------- */
.mstrip { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 var(--pad); padding: 8px; border-radius: 26px;
  background: #fff; box-shadow: 0 30px 60px -44px rgba(34, 36, 58, .5), inset 0 0 0 1px rgba(34, 36, 58, .05); }
.mstrip a { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 14px; padding: 16px 18px; border-radius: 20px; transition: background-color .4s, transform .5s var(--ease); }
.mstrip a:hover { background: var(--off); transform: translateY(-2px); }
.mstrip .num { grid-row: span 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; letter-spacing: 0; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.mstrip b { font: 500 clamp(15px, 1.2vw, 19px)/1 var(--head); letter-spacing: .24em; color: var(--ink); }
.mstrip small { font: 300 13px/1.35 var(--body); color: var(--ink-2); }
.mstrip a[aria-current="page"] { background: linear-gradient(140deg, color-mix(in srgb, var(--ac) 16%, #fff), color-mix(in srgb, var(--ac2) 12%, #fff)); }
.mstrip a[aria-current="page"] .num { color: #fff; background: linear-gradient(140deg, var(--ac), var(--ac2)); box-shadow: none; }
@media (max-width: 760px) { .mstrip { grid-template-columns: 1fr; } .mstrip a { padding: 12px 14px; } }

/* ---------- Quick answer ---------- */
.mqa { margin: clamp(70px, 11vh, 120px) var(--pad) 0; display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(30px, 6vw, 100px); align-items: start; }
.mqa__label { position: sticky; top: calc(var(--nav-h) + 40px); }
.mqa__label h2 { margin-top: 16px; font: 300 clamp(30px, 3.4vw, 56px)/1.08 var(--head); letter-spacing: .04em; }
.mqa .short { padding: clamp(28px, 3.4vw, 46px); }
.mqa .short::before { background: linear-gradient(90deg, var(--ac), var(--ac2)); }
.mqa .short li::before { background: linear-gradient(140deg, var(--ac), var(--ac2)); }
.mqa .short p { margin-top: 18px; font-size: 17px; line-height: 1.75; color: var(--ink-2); }
@media (max-width: 900px) { .mqa { grid-template-columns: 1fr; } .mqa__label { position: static; } }

/* ---------- Long-form sections ---------- */
.mbody { padding: clamp(40px, 6vh, 70px) var(--pad) 0; }
.msec { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(30px, 6vw, 100px); padding: clamp(60px, 10vh, 110px) 0; border-bottom: 1px solid var(--line); }
.msec:last-child { border-bottom: 0; }
.msec h2 { position: sticky; top: calc(var(--nav-h) + 40px); align-self: start; font: 300 clamp(28px, 2.9vw, 50px)/1.12 var(--head); letter-spacing: .04em; }
.msec__body { max-width: 760px; }
.msec__body > p { font-size: clamp(16.5px, 1.2vw, 19px); line-height: 1.9; color: #3d3f56; }
.msec__body > p + p { margin-top: 20px; }
.msec__body a { color: var(--lumen); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.msec__body strong { font-weight: 500; color: var(--ink); }
.msteps { list-style: none; margin: 30px 0; padding: 0; display: grid; gap: 14px; counter-reset: s; }
.msteps li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 6px 18px; padding: 24px 26px 24px 22px; border-radius: 26px; background: #fff;
  box-shadow: 0 30px 60px -46px rgba(34, 36, 58, .5), inset 0 0 0 1px rgba(34, 36, 58, .05); counter-increment: s; transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.msteps li:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -46px rgba(34, 36, 58, .6), inset 0 0 0 1px rgba(34, 36, 58, .05); }
.msteps li::before { content: "0" counter(s); grid-row: span 2; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 500 13px/1 var(--body); color: #fff;
  background: linear-gradient(140deg, var(--ac), var(--ac2)); box-shadow: 0 12px 24px -12px var(--ac); }
.msteps b { font: 500 clamp(16px, 1.25vw, 20px)/1.3 var(--body); color: var(--ink); }
.msteps span { font-size: 16.5px; line-height: 1.75; color: var(--ink-2); }
.msteps a { color: var(--lumen); }
@media (max-width: 900px) { .msec { grid-template-columns: 1fr; gap: 22px; } .msec h2 { position: static; } }
@media (max-width: 560px) { .msteps li { grid-template-columns: 1fr; padding: 22px; } .msteps li::before { grid-row: auto; } }

/* ---------- Statement ---------- */
.mquote { position: relative; isolation: isolate; overflow: clip; padding: clamp(110px, 20vh, 220px) var(--pad); text-align: center; }
.mquote p { max-width: 20ch; margin: 0 auto; font: 300 clamp(30px, 4.6vw, 80px)/1.22 var(--head); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.mquote p em { font-weight: 500; }
.mquote img { width: clamp(56px, 5vw, 80px); margin: 0 auto clamp(30px, 5vh, 50px); animation: spin 30s linear infinite; transform-origin: 49.6% 55%; }
.mquote__glow { position: absolute; left: 50%; top: 50%; width: min(80vw, 900px); aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1; border-radius: 50%; filter: blur(90px); opacity: .28;
  background: conic-gradient(from 0deg, var(--ac), var(--ac2), var(--aqua), var(--ac)); animation: spin 50s linear infinite; }

/* ---------- Interactive demo (dark glass phone) ---------- */
.mdemo { position: relative; isolation: isolate; overflow: clip; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 100px); align-items: center;
  margin: 0 var(--pad); padding: clamp(50px, 7vw, 100px); border-radius: 44px; background: var(--night); color: #f4f1ee; }
.mdemo::before { content: ""; position: absolute; inset: -30%; z-index: -1; background: radial-gradient(40% 40% at 70% 40%, color-mix(in srgb, var(--ac) 45%, transparent), transparent 70%),
  radial-gradient(35% 35% at 20% 80%, color-mix(in srgb, var(--lumen) 40%, transparent), transparent 70%); filter: blur(30px); animation: drift 26s ease-in-out infinite alternate; }
.mdemo .kicker { color: var(--aqua); }
.mdemo h2 { margin-top: 16px; font: 300 clamp(30px, 3.2vw, 56px)/1.1 var(--head); letter-spacing: .04em; color: #fff; }
.mdemo p { margin-top: 20px; max-width: 32em; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.85; color: rgba(244, 241, 238, .78); }
.mdemo__try { margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--body); letter-spacing: .3em; text-transform: uppercase; color: #fff; }
.mdemo__try i { width: 9px; height: 9px; border-radius: 50%; background: var(--ac); box-shadow: 0 0 0 0 var(--ac); animation: ping 2s ease-out infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.mdemo__device { position: relative; display: grid; place-items: center; }
.mdemo .phone { width: clamp(250px, 23vw, 330px); --sc: var(--ac); }
.mdemo .phone__screen { padding-bottom: 8%; }
.mdemo button { cursor: pointer; }
.phone__big:active, .phone__big.is-tap { transform: scale(.94); }
.phone__small { transition: transform .4s cubic-bezier(.2, .9, .25, 1.3), box-shadow .4s; }
.phone__small:active, .phone__small.is-tap { transform: scale(.95); }
.phone__feedback { position: relative; margin-top: 6%; min-height: 3.2em; display: grid; place-items: center; text-align: center; font: 400 clamp(12px, 1vw, 15px)/1.4 var(--body); color: #fff; }
.phone__feedback span { animation: fbIn .8s var(--ease) both; }
@keyframes fbIn { from { opacity: 0; transform: translateY(8px); filter: blur(6px); } }
.mdemo__ripple { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; border: 2px solid #fff; pointer-events: none; animation: ripple 1.1s var(--ease) forwards; }
@keyframes ripple { to { transform: scale(26); opacity: 0; } }
/* shift demo: a thought you can let go of */
.thought { position: relative; width: 100%; margin-top: 10%; padding: 9% 8%; text-align: left; transition: opacity .9s var(--ease), transform 1.2s var(--ease), filter 1s var(--ease); }
.thought small { display: block; font: 400 clamp(8px, .7vw, 10px)/1 var(--body); letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.thought q { display: block; margin-top: 10px; quotes: "\201C" "\201D"; font: 400 clamp(13px, 1.2vw, 18px)/1.4 var(--body); color: #fff; }
.thought.is-gone { opacity: 0; transform: translate3d(0, -60px, 0) scale(.9); filter: blur(10px); }
.release { margin-top: 7%; width: 100%; padding: 6% 0; border-radius: 999px; font: 500 clamp(10px, .85vw, 13px)/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  background: linear-gradient(135deg, #fff, #ffe0ea); box-shadow: 0 14px 30px -14px var(--glow); transition: transform .4s var(--ease); }
.release:hover { transform: translateY(-2px); }
.release:disabled { opacity: .6; }
.drift-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; border-radius: inherit; }
/* rise demo: choose what fills the space */
.space-orb { position: relative; width: 74%; aspect-ratio: 1; margin: 9% auto 0; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .16), rgba(255, 255, 255, .03) 60%, transparent 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.space-orb::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 2px; background: conic-gradient(var(--aqua) calc(var(--fill, 0) * 1%), rgba(255, 255, 255, .1) 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: --fill 1s; }
.space-orb b { display: block; font: 500 clamp(11px, 1vw, 15px)/1.3 var(--body); color: #fff; padding: 0 14%; }
.space-orb small { display: block; margin-top: 6px; font: 300 clamp(8px, .7vw, 11px)/1.3 var(--body); color: rgba(255, 255, 255, .7); }
.space-chips { margin-top: 8%; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.space-chips button { padding: 8px 12px; border-radius: 999px; font: 400 clamp(9px, .75vw, 12px)/1 var(--body); color: #fff; background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); transition: background-color .4s, transform .4s var(--ease), opacity .6s; }
.space-chips button:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }
.space-chips button.is-on { background: var(--aqua); color: var(--night); box-shadow: 0 0 18px rgba(46, 223, 207, .6); }
@media (max-width: 900px) { .mdemo { grid-template-columns: 1fr; border-radius: 32px; } }

/* ---------- Particle stage (scroll story with the Lumanta logomark) ---------- */
.mstage { position: relative; height: 260vh; margin-top: clamp(80px, 13vh, 150px); }
.mstage__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--night); transition: background-color .2s linear; }
.mstage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mstage__fallback { display: none; position: absolute; left: 50%; top: 50%; width: min(34vw, 260px); transform: translate(-50%, -50%); }
.no-webgl .mstage__fallback { display: block; }
.mstage__copy { position: absolute; left: 0; right: 0; bottom: clamp(70px, 14vh, 140px); padding: 0 var(--pad); text-align: center; opacity: 0; pointer-events: none; }
.mstage__copy p { font: 300 clamp(36px, 6vw, 104px)/1.02 var(--head); letter-spacing: .05em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 30px rgba(10, 15, 36, .6); }
.mstage__copy p em { font-weight: 500; font-style: normal; background: linear-gradient(100deg, #ffc08a, #ff9bb6, #8fd0ff, #8ff3ea); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mstage.is-light .mstage__copy p { color: var(--ink); text-shadow: none; }
.mstage.is-light .mstage__copy p em { background-image: var(--grad); }
.mstage__hint { position: absolute; left: 0; right: 0; top: calc(var(--nav-h) + 26px); text-align: center; font: 400 11px/1 var(--body); letter-spacing: .36em; text-transform: uppercase; color: rgba(250, 247, 245, .6); animation: cuePulse 4.2s ease-in-out infinite; }
.mstage.is-light .mstage__hint { color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .mstage { height: auto; } .mstage__stage { position: relative; } .mstage__copy { position: relative; opacity: 1; bottom: auto; padding: 30vh var(--pad) 10vh; } .mstage__copy + .mstage__copy { display: none; } }

/* ---------- Next step ---------- */
.mnext { display: block; position: relative; isolation: isolate; overflow: hidden; margin: clamp(80px, 13vh, 150px) var(--pad) 0; padding: clamp(40px, 6vw, 80px); border-radius: 40px;
  color: #fff; background: linear-gradient(130deg, var(--nx1), var(--nx2)); box-shadow: 0 50px 90px -50px var(--nx1); transition: transform .8s var(--ease), box-shadow .8s var(--ease); }
.mnext::after { content: ""; position: absolute; z-index: -1; right: -8%; top: -40%; width: 50%; aspect-ratio: 1; border-radius: 50%; border: 40px solid rgba(255, 255, 255, .14); transition: transform 1.2s var(--ease); }
.mnext:hover { transform: translateY(-6px); box-shadow: 0 60px 100px -50px var(--nx1); }
.mnext:hover::after { transform: scale(1.12) rotate(20deg); }
.mnext small { font: 500 12px/1 var(--body); letter-spacing: .32em; text-transform: uppercase; opacity: .85; }
.mnext strong { display: flex; align-items: center; gap: .4em; margin-top: 14px; font: 300 clamp(44px, 7vw, 120px)/1 var(--head); letter-spacing: .05em; text-transform: uppercase; }
.mnext strong span { display: inline-block; transition: transform .6s var(--ease); }
.mnext:hover strong span { transform: translateX(14px); }
.mnext p { margin-top: 12px; font-size: clamp(16px, 1.3vw, 21px); opacity: .92; }

/* ---------- Sources and care note ---------- */
.mnote { margin: clamp(60px, 9vh, 100px) var(--pad) 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mnote .crisis { margin: 0; }
.mnote__src { padding: 22px 26px; border-radius: 24px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(34, 36, 58, .07); }
.mnote__src b { font: 600 11px/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.mnote__src ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.mnote__src a { font-size: 15px; line-height: 1.5; color: var(--lumen); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 900px) { .mnote { grid-template-columns: 1fr; } }

/* ---------- Join (reuses the homepage join section) ---------- */
.page--method .join { margin-top: clamp(80px, 13vh, 150px); }
.page--method .join__bg img { transform: translate3d(0, var(--py, 0px), 0) scale(1.15); }
.page--method .help { padding-bottom: 0; }

/* ---------- Pattern cards (kinds of thoughts, everyday moments, ways to use the space) ---------- */
.mpatterns { list-style: none; margin: 28px 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mpatterns li { position: relative; overflow: hidden; padding: 22px 22px 22px 26px; border-radius: 22px; background: #fff;
  box-shadow: 0 26px 50px -42px rgba(34, 36, 58, .5), inset 0 0 0 1px rgba(34, 36, 58, .05); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.mpatterns li::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--ac), var(--ac2)); }
.mpatterns li:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 34px 60px -40px rgba(34, 36, 58, .55), inset 0 0 0 1px rgba(34, 36, 58, .05); }
.mpatterns b { display: block; font: 500 12px/1.2 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); }
.mpatterns q { display: block; margin-top: 10px; quotes: none; font: 300 16.5px/1.6 var(--body); color: var(--ink-2); }
.page--catch .mpatterns q::before { content: "\201C"; } .page--catch .mpatterns q::after { content: "\201D"; }
.space-chips button, .phone__small, .phone__big { position: relative; overflow: hidden; }
@media (max-width: 640px) { .mpatterns { grid-template-columns: 1fr; } }