/* mrunstuck motion layer (2026-11-03). Loaded by every live mrunstuck page after its own <style>.
   Rule: everything is readable at rest. Motion only starts when motion-mr.js adds .mm-on to <html>,
   and never when the visitor asks for reduced motion. */

/* scroll progress */
.mm-progress{position:fixed;top:0;left:0;right:0;height:3px;transform-origin:0 50%;transform:scaleX(0);background:var(--red,#e3122b);z-index:300;pointer-events:none;box-shadow:0 0 12px rgba(227,18,43,.6)}

/* background + inline video */
.mm-bgvid{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;z-index:-2;background:#0a0a0b}
.mm-vid{display:block;width:100%;height:100%;object-fit:cover;background:#0a0a0b}

/* headline word reveal */
.mm-on [data-words] .mw{display:inline-block;opacity:0;transform:translateY(.42em) rotateX(-35deg);transform-origin:50% 100%;transition:opacity .75s ease,transform .9s cubic-bezier(.2,.75,.2,1);transition-delay:calc(var(--i,0) * 60ms)}
.mm-on [data-words].mw-in .mw{opacity:1;transform:none}
[data-words]{perspective:900px}

/* 3D tilt + glare (pointer devices only, set up by JS) */
.mm-tilt{transform-style:preserve-3d;transition:transform .6s cubic-bezier(.2,.75,.2,1),box-shadow .4s ease;will-change:transform}
.mm-tilt.mm-tilting{transition:transform .08s linear,box-shadow .4s ease}
.mm-tilt.mm-tilting{box-shadow:0 30px 60px -28px rgba(0,0,0,.75)}
.mm-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;transition:opacity .35s ease;background:radial-gradient(520px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.16),rgba(255,255,255,0) 45%)}
.mm-tilting>.mm-glare{opacity:1}
.mm-pop{transform:translateZ(36px)}

/* magnetic buttons */
.mm-mag{transition:transform .35s cubic-bezier(.2,.75,.2,1),background .15s,box-shadow .15s}
.mm-mag.mm-magging{transition:transform .1s linear,background .15s,box-shadow .15s}

/* pinned stack: the four "is this you" questions stack like cards while you scroll (desktop only) */
@media (min-width:981px){
  .mm-stack .q{position:sticky;top:calc(92px + var(--k,0) * 22px);background:#fbf8f2;border:1px solid #e3dccf;border-top:4px solid var(--red,#e3122b);border-radius:6px;padding:clamp(28px,3vw,40px) clamp(28px,3vw,44px);margin-bottom:28px;box-shadow:0 -18px 40px -26px rgba(0,0,0,.35)}
  .mm-stack .q:last-child{margin-bottom:0}
  .mm-stack .q.mm-behind{filter:brightness(.97)}
}

/* stories wall: 3D cards */
.vgrid{perspective:1400px}
.vid.mm-tilt .play{transform:translateZ(40px)}
.vid .mm-name{position:absolute;right:14px;bottom:18px;z-index:2;font:800 11px/1 var(--sans,Inter,sans-serif);letter-spacing:.18em;text-transform:uppercase;color:#fff;background:rgba(10,10,11,.72);padding:8px 10px;border-radius:2px;transform:translateZ(30px)}
.modal .mm-dialog{position:relative;width:min(1100px,100%);display:grid;gap:14px;justify-items:center}
.modal .x:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ===== Testimonials ===== */
.tst{background:var(--ink,#0a0a0b);border-top:1px solid var(--line,#2a2a2e);overflow:hidden}
.tst .head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:34px}
.tst h2{font-size:clamp(42px,6vw,84px)}
.tst .head p{color:var(--bone-2,#cfc9bf);max-width:38ch;font-size:18px}
.tst .head>div:last-child{margin-left:auto;text-align:right}
@media (max-width:760px){.tst .head>div:last-child{margin-left:0;text-align:left;justify-items:start!important}}
.tst .nav-btns{display:flex;gap:10px}
.tst .nav-btns button{width:52px;height:52px;border:1px solid var(--line,#2a2a2e);border-radius:50%;color:#fff;font-size:20px;display:grid;place-items:center;transition:border-color .15s,background .15s}
.tst .nav-btns button:hover{border-color:var(--red,#e3122b);background:rgba(227,18,43,.12)}
.tcar{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px max(var(--g,24px),calc((100vw - var(--wrap,1200px))/2 + var(--g,24px))) 40px;scrollbar-width:none;perspective:1600px;-webkit-overflow-scrolling:touch}
.tcar::-webkit-scrollbar{display:none}
.tcard{flex:0 0 min(420px,84vw);scroll-snap-align:center;background:linear-gradient(180deg,#17171a,#111113);border:1px solid var(--line,#2a2a2e);border-radius:8px;padding:30px 28px 26px;display:flex;flex-direction:column;gap:18px;position:relative;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.75,.2,1),opacity .5s,border-color .3s;align-self:stretch}
.tcard::before{content:"\201C";position:absolute;top:-6px;right:20px;font:700 120px/1 var(--serif,'Playfair Display',Georgia,serif);color:var(--red,#e3122b);opacity:.35}
.tcard.is-center{border-color:rgba(227,18,43,.6)}
.tcard blockquote{margin:0;font:500 18px/1.55 var(--serif,'Playfair Display',Georgia,serif);font-style:italic;color:var(--bone,#f3efe8);display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.tcard.open blockquote{-webkit-line-clamp:unset;display:block}
.tcard .more{align-self:flex-start;font:800 12px/1 var(--sans,Inter,sans-serif);letter-spacing:.16em;text-transform:uppercase;color:var(--red,#e3122b);padding:4px 0;border-bottom:1px solid currentColor}
.tcard .who{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line,#2a2a2e)}
.tcard .av{flex:0 0 56px;width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--red,#e3122b);background:#222;display:grid;place-items:center;font:400 22px/1 var(--display,Anton,sans-serif);color:#fff}
.tcard .nm{font:800 15px/1.2 var(--sans,Inter,sans-serif);color:#fff}
.tcard .rl{font:500 13px/1.35 var(--sans,Inter,sans-serif);color:#a9a49c;margin-top:4px}
.mm-on .tcar .tcard{opacity:.55}
.mm-on .tcar .tcard.is-center{opacity:1}

/* quote marquee */
.tmarq{border-top:1px solid var(--line,#2a2a2e);border-bottom:1px solid var(--line,#2a2a2e);overflow:hidden;padding:20px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.tmarq .row{display:flex;gap:48px;width:max-content;animation:mm-marq 70s linear infinite}
.tmarq:hover .row{animation-play-state:paused}
.tmarq span{white-space:nowrap;font:500 19px/1.2 var(--serif,'Playfair Display',Georgia,serif);font-style:italic;color:var(--bone-2,#cfc9bf)}
.tmarq span b{font:800 12px/1 var(--sans,Inter,sans-serif);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--red,#e3122b);margin-left:12px}
@keyframes mm-marq{to{transform:translateX(-50%)}}

/* single quote (calendar pages) */
.tq{margin-top:28px;padding:24px 24px 22px;border:1px solid var(--line,#2a2a2e);border-left:4px solid var(--red,#e3122b);background:rgba(17,17,19,.86);border-radius:4px;position:relative}
.tq blockquote{margin:0;font:500 17px/1.55 var(--serif,'Playfair Display',Georgia,serif);font-style:italic;color:var(--bone,#f3efe8)}
.tq .who{display:flex;align-items:center;gap:12px;margin-top:16px}
.tq .av{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--red,#e3122b)}
.tq .nm{font:800 14px/1.2 var(--sans,Inter,sans-serif);color:#fff}
.tq .rl{font:500 12.5px/1.35 var(--sans,Inter,sans-serif);color:#a9a49c;margin-top:3px}

/* family clip (about) */
.mm-family{margin:28px 0 8px;position:relative;border-radius:4px;overflow:hidden;aspect-ratio:16/9;border:1px solid var(--line,#2a2a2e)}
.mm-family figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 18px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);font:700 12.5px/1.3 var(--sans,Inter,sans-serif);letter-spacing:.2em;text-transform:uppercase;color:#fff}

@media (max-width:640px){.tcard{padding:24px 20px 22px}.tcard blockquote{font-size:17px}.tmarq span{font-size:17px}}

/* reduced motion: no autoplay, no marquee, no transforms */
@media (prefers-reduced-motion:reduce){
  .tmarq .row{animation:none}
  .tmarq{overflow-x:auto}
  .mm-tilt,.mm-mag,.tcard{transition:none!important;transform:none!important}
  .mm-on [data-words] .mw{opacity:1;transform:none;transition:none}
  .mm-on .tcar .tcard{opacity:1}
}

/* Portraits: no hard frames. Edges fade into the page, with a slow parallax drift (2026-11-04). */
.who figure::after,.story figure::after{display:none!important}
.who figure,.story figure,.mm-family{overflow:visible;border:0!important;border-radius:0}
.mm-family video{width:100%;height:100%;object-fit:cover}
.who figure video,.who figure img,.story figure video,.story figure img,.mm-family video{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 66%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%),linear-gradient(180deg,transparent 0,#000 16%,#000 66%,transparent 100%);
          mask-composite:intersect;
  filter:grayscale(.2) contrast(1.06) brightness(.88);
  will-change:transform}
.who figcaption,.story figcaption,.mm-family figcaption{background:none!important;text-align:center;text-shadow:0 2px 12px #000}

/* Hero video at native 16:9, never cropped, scaled or drifting (2026-11-04) */
.hero-bg{transform:none!important;animation:none!important;background:#0a0a0b!important}
.hero-bg .mm-bgvid{inset:auto!important;top:12%!important;left:-16vw!important;right:auto!important;width:min(72vw,1280px)!important;height:auto!important;aspect-ratio:16/9;object-fit:contain!important;transform:none!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 80%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 80%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-composite:intersect}
@media (max-width:820px){.hero-bg .mm-bgvid{top:64px!important;left:0!important;width:100%!important;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 65%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 65%,transparent 100%)}}