/* ==========================================================================
   motion.css — additive motion layer (2026-09-02 motion pass)
   Rules: no token changes. Type, palette, spacing, layout, copy come from
   site.css. This file only adds how things move and reveal.
   Everything here is inert under prefers-reduced-motion (see bottom).
   ========================================================================== */

:root{
  --m-ease:var(--ease-out, cubic-bezier(.16,1,.3,1));
  --m-spring:var(--spring, cubic-bezier(.34,1.4,.64,1));
  --m-dur:.6s;
}

/* ---------- 1. Word reveal (hero H1) ---------- */
.mwr{ }
.mwr .mwr-m{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .04em .06em 0;margin:0 -.04em -.06em 0;}
.mwr .mwr-w{display:inline-block;transform:translateY(110%);opacity:0;
  transition:transform .75s var(--m-ease),opacity .4s linear;transition-delay:var(--wd,0s);will-change:transform;}
.mwr.in .mwr-w{transform:none;opacity:1;}
.mwr-follow{opacity:0;transform:translateY(10px);transition:opacity .6s var(--m-ease) .55s,transform .6s var(--m-ease) .55s;}
.mwr-follow.in{opacity:1;transform:none;}

/* ---------- 2. Glare sweep on primary buttons ---------- */
.glare{position:relative;overflow:hidden;isolation:isolate;}
.glare::after{content:"";position:absolute;inset:-40% -60%;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.42) 50%,transparent 60%);
  transform:translateX(-70%);opacity:0;transition:opacity .2s;}
.glare:hover::after,.glare:focus-visible::after{opacity:1;animation:m-glare .65s var(--m-ease) forwards;}
@keyframes m-glare{from{transform:translateX(-70%)}to{transform:translateX(70%)}}

/* ---------- 3. Link underline grows from the left (nav + text links) ---------- */
.nav-links a{position:relative;}
.nav-links a::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.42rem;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .28s var(--m-ease);}
.nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);}
.footer-nav a,.footer-col a{background:linear-gradient(currentColor,currentColor) left bottom/0 1px no-repeat;
  transition:background-size .3s var(--m-ease),color .3s;}
.footer-nav a:hover,.footer-col a:hover{background-size:100% 1px;}

/* ---------- 4. Flags strip — "Agape in the world" ---------- */
.flags{margin-top:2rem;display:flex;align-items:center;gap:1.1rem;}
.flags__stage{position:relative;width:64px;height:64px;flex:none;border-radius:50%;
  border:1px solid var(--hair-strong,rgba(255,255,255,.22));display:grid;place-items:center;overflow:hidden;
  background:color-mix(in oklch,var(--bone) 6%,transparent);}
.flags__stage .flag{position:absolute;inset:0;display:grid;place-items:center;font-size:2rem;line-height:1;
  opacity:0;transform:scale(1.04);transition:opacity .9s var(--m-ease),transform .9s var(--m-ease);}
.flags__stage .flag.on{opacity:1;transform:none;}
.flags__copy{min-width:0;}
.flags__label{display:block;font-family:var(--font-body);font-weight:600;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--flame);}
.flags__name{display:block;position:relative;height:1.5em;overflow:hidden;font-weight:var(--fw-semibold);font-size:1.05rem;color:var(--bone);}
.flags__name span{position:absolute;left:0;top:0;opacity:0;transform:translateY(60%);transition:opacity .5s var(--m-ease),transform .5s var(--m-ease);white-space:nowrap;}
.flags__name span.on{opacity:1;transform:none;}
.flags__dots{display:flex;gap:.35rem;margin-top:.35rem;}
.flags__dots i{width:5px;height:5px;border-radius:50%;background:var(--bone-dim);opacity:.5;transition:background .3s,opacity .3s,transform .3s;}
.flags__dots i.on{background:var(--flame);opacity:1;transform:scale(1.3);}

/* ---------- 5. Sticky media on the "why" section ---------- */
.why-media{display:none;}
@media(min-width:1040px){
  #why .shell{display:grid;grid-template-columns:minmax(0,58ch) 1fr;column-gap:clamp(2.5rem,5vw,5rem);align-items:start;}
  #why .shell > *:not(.why-media){grid-column:1;}
  .why-media{display:block;grid-column:2;grid-row:1 / span 20;position:sticky;top:clamp(5rem,12vh,8rem);align-self:start;margin:0;}
  .why-media .frame{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--lift-bone);aspect-ratio:4/5;background:var(--mist);}
  .why-media img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);transition:filter .6s var(--m-ease),transform 1.2s var(--m-ease);transform:scale(1.04);}
  .why-media.in img{transform:none;}
  .why-media .frame::after{content:"";position:absolute;inset:0;background:var(--flame);mix-blend-mode:multiply;opacity:.55;transition:opacity .6s var(--m-ease);pointer-events:none;}
  .why-media:hover img{filter:none;}
  .why-media:hover .frame::after{opacity:0;}
  .why-media figcaption{margin-top:.8rem;font-size:.85rem;color:var(--text-dim);letter-spacing:.02em;}
}

/* ---------- 6. Photo marquee ("pump") — one row, slow, pauses on hover ---------- */
.pump{--pump-h:clamp(180px,26vw,300px);--pump-dur:70s;position:relative;overflow:hidden;padding-block:clamp(1.2rem,2.5vw,2rem);}
.pump::before,.pump::after{content:"";position:absolute;top:0;bottom:0;width:clamp(2rem,8vw,8rem);z-index:2;pointer-events:none;}
.pump::before{left:0;background:linear-gradient(90deg,var(--surface,var(--bone)),transparent);}
.pump::after{right:0;background:linear-gradient(270deg,var(--surface,var(--bone)),transparent);}
.pump__track{display:flex;gap:clamp(.6rem,1.2vw,1rem);width:max-content;animation:m-pump var(--pump-dur) linear infinite;will-change:transform;}
.pump:hover .pump__track,.pump:focus-within .pump__track{animation-play-state:paused;}
.pump__item{position:relative;flex:none;height:var(--pump-h);aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--mist);}
.pump__item.wide{aspect-ratio:3/2;}
.pump__item img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05);transform:scale(1.02);
  transition:filter .35s var(--m-ease),transform .6s var(--m-ease);}
.pump__item::after{content:"";position:absolute;inset:0;background:var(--flame);mix-blend-mode:multiply;opacity:.6;transition:opacity .35s var(--m-ease);pointer-events:none;}
.pump__item:hover img,.pump__item.on img{filter:none;transform:scale(1.06);}
.pump__item:hover::after,.pump__item.on::after{opacity:0;}
.pump__item::before{content:"";position:absolute;inset:0;border:2px solid var(--flame);border-radius:inherit;z-index:1;opacity:.85;pointer-events:none;}
@keyframes m-pump{to{transform:translateX(-50%);}}
@media(max-width:719px){.pump{--pump-h:200px;--pump-dur:55s;}}

/* ---------- 7. Stats rings ---------- */
.mstats{display:grid;gap:clamp(1.2rem,2.5vw,2rem);grid-template-columns:repeat(2,1fr);margin-top:clamp(2rem,4vw,3rem);}
@media(min-width:820px){.mstats{grid-template-columns:repeat(4,1fr);}}
.mstat{position:relative;display:grid;justify-items:center;text-align:center;padding:clamp(1.2rem,2vw,1.8rem) 1rem;
  border:1px solid var(--hair-local);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--lift-bone);
  transition:transform .5s var(--m-spring),border-color .3s;cursor:default;}
.mstat:hover{transform:translateY(-3px);border-color:var(--flame);}
.mstat__ring{width:clamp(104px,12vw,132px);height:auto;display:block;}
.mstat__ring .track{fill:none;stroke:color-mix(in oklch,var(--growth) 22%,transparent);stroke-width:7;}
.mstat__ring .arc{fill:none;stroke:var(--flame);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:339.3;stroke-dashoffset:339.3;transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke-dashoffset 1.4s var(--m-ease);}
.mstat.in .mstat__ring .arc,.mstat:hover .mstat__ring .arc{stroke-dashoffset:calc(339.3 * (1 - var(--pct,1)));}
.mstat:active .mstat__ring .arc{stroke-dashoffset:339.3;transition-duration:.15s;}
.mstat__num{position:absolute;top:calc(clamp(1.2rem,2vw,1.8rem) + clamp(104px,12vw,132px)/2);left:0;right:0;transform:translateY(-50%);
  font-family:var(--font-body);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1;
  font-size:clamp(1.35rem,1rem + 1.2vw,1.9rem);color:var(--text);}
.mstat__label{margin-top:.9rem;font-family:var(--font-body);font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
.mstat__sub{margin-top:.25rem;font-size:.85rem;color:var(--text-muted);}
.mstats-note{margin-top:1.4rem;font-size:.95rem;color:var(--text-muted);}

/* ---------- 8. Testimonies strip ---------- */
.testi{--testi-dur:90s;position:relative;overflow:hidden;padding-block:.5rem;}
.testi::before,.testi::after{content:"";position:absolute;top:0;bottom:0;width:clamp(2rem,8vw,7rem);z-index:2;pointer-events:none;}
.testi::before{left:0;background:linear-gradient(90deg,var(--surface,var(--bone)),transparent);}
.testi::after{right:0;background:linear-gradient(270deg,var(--surface,var(--bone)),transparent);}
.testi__track{display:flex;gap:clamp(1rem,2vw,1.6rem);width:max-content;animation:m-pump var(--testi-dur) linear infinite;will-change:transform;}
.testi:hover .testi__track,.testi:focus-within .testi__track{animation-play-state:paused;}
.testi__card{flex:none;width:min(78vw,26rem);display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:start;
  padding:1.4rem 1.5rem;border:1px solid var(--hair-local);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--lift-bone);
  transition:border-color .3s,transform .5s var(--m-spring);}
.testi__card:hover,.testi__card:focus-within{border-color:var(--flame);transform:translateY(-3px);}
.testi__face{width:48px;height:48px;border-radius:50%;flex:none;display:grid;place-items:center;overflow:hidden;
  background:color-mix(in oklch,var(--flame) 14%,transparent);border:1px solid color-mix(in oklch,var(--flame) 40%,transparent);
  font-family:var(--font-body);font-weight:600;color:var(--flame-ink);font-size:.95rem;}
.testi__face img{width:100%;height:100%;object-fit:cover;display:block;}
.testi__q{margin:0;font-size:1.02rem;line-height:1.45;color:var(--text);font-weight:var(--fw-medium);text-wrap:pretty;}
.testi__q::before{content:"\201C";color:var(--flame);margin-right:.05em;}
.testi__q::after{content:"\201D";color:var(--flame);margin-left:.05em;}
.testi__who{margin-top:.6rem;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);font-weight:600;}
.testi__more{margin-top:.5rem;font-size:.85rem;color:var(--text-muted);}
.testi__more summary{cursor:pointer;color:var(--accent);font-weight:600;list-style:none;}
.testi__more summary::-webkit-details-marker{display:none;}
.testi__more p{margin:.6rem 0 0;line-height:1.5;}

/* ---------- 9. Knot: sweep-in + breath ---------- */
@property --knot-p{syntax:"<percentage>";inherits:false;initial-value:0%;}
.knot-anim img,.knot-anim{--knot-p:0%;}
.knot-anim img{-webkit-mask:conic-gradient(from -20deg,#000 var(--knot-p),transparent 0);mask:conic-gradient(from -20deg,#000 var(--knot-p),transparent 0);
  transition:--knot-p 1.4s var(--m-ease);}
.knot-anim.in img{--knot-p:100%;animation:m-breath 6s ease-in-out 1.6s infinite;}
@keyframes m-breath{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}

/* ---------- 10. Count-up hosts ---------- */
[data-count]{font-variant-numeric:tabular-nums;}

/* ---------- 11. Tier stagger (Partners give tiers) ---------- */
.give-tiers .tier{opacity:0;transform:translateY(14px);transition:opacity .6s var(--m-ease),transform .6s var(--m-ease),border-color .3s;}
.give-tiers.in .tier{opacity:1;transform:none;}
.give-tiers.in .tier:nth-child(2){transition-delay:.07s;}
.give-tiers.in .tier:nth-child(3){transition-delay:.14s;}
.give-tiers.in .tier:hover{transform:translateY(-2px);}

/* ---------- 12. Card image swap + zoom (Events) — Circuit Riders physics ---------- */
.swap{position:relative;overflow:hidden;}
.swap img{transition:opacity .5s ease,transform .5s ease;}
.swap img.alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;}
@media(hover:hover) and (min-width:990px){
  .swap:hover img,.swap:focus-within img{transform:scale(1.03);}
  .swap:hover img.alt,.swap:focus-within img.alt{opacity:1;}
}
.swap.on img{transform:scale(1.03);} .swap.on img.alt{opacity:1;}

/* ---------- 13. Ken Burns one-shot (Events hero) ---------- */
.kb img{animation:m-kb 8s var(--m-ease) both;}
@keyframes m-kb{from{transform:scale(1.06)}to{transform:scale(1)}}

/* ---------- 14. Shiny eyebrow ---------- */
.shiny{background:linear-gradient(110deg,var(--flame-deep) 35%,#FFD1A3 50%,var(--flame-deep) 65%) 0 0/220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:m-shine 6s linear infinite;}
@keyframes m-shine{to{background-position:-220% 0}}

/* ---------- 15. Hover bios (About team grid) ---------- */
.bio-card{position:relative;}
.bio-card .bio-toggle{display:none;}
.bio-card .bio{transition:opacity .45s ease,transform .45s ease;}
@media(hover:hover) and (min-width:820px){
  .bio-card .frame img,.bio-card > img{transition:transform .5s ease,filter .5s ease;filter:grayscale(1);}
  .bio-card:hover .frame img,.bio-card:focus-within .frame img,.bio-card:hover > img,.bio-card:focus-within > img{transform:scale(1.03);filter:none;}
}

/* ---------- 16. Star border CTA (Summit) ---------- */
.star-border{position:relative;display:inline-block;overflow:hidden;border-radius:999px;padding:1px;vertical-align:top;}
.page-hero .star-border{margin-top:1.8rem;}
.star-border .sb-inner{margin:0!important;}
.star-border .sb-glow{position:absolute;width:300%;height:50%;opacity:.55;border-radius:50%;z-index:0;
  background:radial-gradient(circle,var(--flame),transparent 12%);}
.star-border .sb-top{top:-12px;right:-250%;animation:m-sb-t 5s linear infinite alternate;}
.star-border .sb-bottom{bottom:-12px;left:-250%;animation:m-sb-b 5s linear infinite alternate;}
.star-border .sb-inner{position:relative;z-index:1;border-radius:inherit;}
@keyframes m-sb-t{0%{transform:translate(0,0);opacity:1}100%{transform:translate(-100%,0);opacity:0}}
@keyframes m-sb-b{0%{transform:translate(0,0);opacity:1}100%{transform:translate(100%,0);opacity:0}}

/* ---------- 17. Reduced motion: everything static ---------- */
@media (prefers-reduced-motion:reduce){
  .mwr .mwr-w,.mwr-follow{transform:none!important;opacity:1!important;transition:none!important;}
  .glare::after{display:none;}
  .pump__track,.testi__track{animation:none!important;flex-wrap:wrap;width:auto;}
  .pump__item,.testi__card{width:auto;}
  .mstat__ring .arc{transition:none;stroke-dashoffset:0!important;}
  .knot-anim img{-webkit-mask:none;mask:none;animation:none!important;}
  .give-tiers .tier{opacity:1;transform:none;transition:none;}
  .kb img{animation:none;}
  .shiny{animation:none;color:var(--flame-deep);background:none;-webkit-text-fill-color:initial;}
  .why-media img{transform:none;transition:none;}
  .star-border .sb-glow{animation:none;display:none;}
}

/* ---------- 18. Hero WebGL backdrop host (Summit) ---------- */
.page-hero{position:relative;}
.hero-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:radial-gradient(60rem 28rem at 50% -10%,color-mix(in oklch,var(--flame) 18%,transparent),transparent 70%);}
.hero-fx::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,var(--ink) 100%);}
@media (prefers-reduced-motion:reduce){.hero-fx canvas{display:none;}}

/* ---------- 19. Hover bios — staff cards on About (panel lives inside the photo box) ---------- */
.bio-card{position:relative;}
.bio-card .brd-card__photo{position:relative;overflow:hidden;}
.bio-card .bio-panel{position:absolute;inset:0;z-index:2;padding:clamp(1rem,2vw,1.4rem);overflow:auto;overscroll-behavior:contain;
  background:var(--bone);color:var(--text-muted);font-size:.9rem;line-height:1.5;
  clip-path:inset(100% 0 0 0);transition:clip-path .45s ease;}
.bio-card .bio-panel p{font-size:inherit;}
.bio-card .bio-panel p + p{margin-top:.6rem;}
.bio-card .bio-panel::before{content:"";display:block;width:2.4rem;height:2px;background:var(--flame);margin-bottom:.8rem;}
.bio-card.open .bio-panel{clip-path:inset(0 0 0 0);}
@media(hover:hover) and (min-width:820px){
  .bio-card:hover .bio-panel,.bio-card:focus-within .bio-panel{clip-path:inset(0 0 0 0);}
  .bio-card .brd-card__photo img{transition:transform .5s ease;}
  .bio-card:hover .brd-card__photo img,.bio-card:focus-within .brd-card__photo img{transform:scale(1.03);}
}
.bio-card .bio-toggle{position:absolute;right:.8rem;top:.8rem;z-index:3;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;
  background:var(--flame);color:#111;display:grid;place-items:center;box-shadow:var(--lift-flame);transition:transform .35s var(--m-spring),background .3s;}
.bio-card .bio-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;}
.bio-card.open .bio-toggle{transform:rotate(45deg);background:var(--ink);color:var(--bone);}
.bio-card .bio-hint{display:block;margin-top:.4rem;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);font-weight:600;}
@media(hover:none),(max-width:819px){.bio-card .bio-hint{display:none;}}

/* ---------- 20. Summit day cards: deal-in + lift ---------- */
.jstep{transition:transform .5s var(--m-spring),border-color .3s,box-shadow .5s var(--m-ease);}
.jstep:hover{transform:translateY(-4px);}
.jstep .j-num{transition:color .3s;}
.jstep:hover .j-num{color:var(--flame);}

/* 21. View transitions: already declared in site.css / wolverine.css; nothing added here. */

/* ---------- 22. Footer socials ---------- */
.footer-social a{transition:transform .25s var(--m-ease),color .25s;}
.footer-social a:hover,.footer-social a:focus-visible{transform:translateY(-2px);color:var(--flame);}
.footer-social a svg{transition:transform .35s var(--m-spring);}
.footer-social a:hover svg{transform:scale(1.12);}

/* ==========================================================================
   ROUND 2 (2026-09-02 pm) — parallax engine, drift bands, cycling stacks,
   video band, footer logo rotor, board-card motion, mobile read-more, mosaic.
   Still additive: no token, layout, or copy changes. All inert under
   prefers-reduced-motion (block 31).
   ========================================================================== */

/* ---------- 23. Scroll parallax engine ----------
   Any element with data-px="0.3" moves on scroll. JS writes --px-y / --px-x;
   CSS composes the transform so hover/scale rules can layer on top.
   data-px       strength 0..1 (0.5 default)
   data-px-amp   travel in px (60 default; framed images ignore this)
   data-px-x     "1" | "-1": move horizontally instead (drift rows)
   data-px-desk  desktop only (frozen under 769px)
   .px-frame     parent clips; the child image is scaled (--px-s) so the
                 slide never shows an edge. */
@property --px-s{syntax:"<number>";inherits:false;initial-value:1;}
[data-px]{transform:translate3d(var(--px-x,0px),var(--px-y,0px),0) scale(var(--px-s,1));will-change:transform;}
.px-frame{overflow:hidden;position:relative;}
.px-frame>[data-px]{--px-s:1.12;display:block;width:100%;height:100%;object-fit:cover;transition:--px-s .8s var(--m-ease);}
@media(hover:hover){.px-frame:hover>[data-px],.px-hover:hover .px-frame>[data-px]{--px-s:1.17;}}

/* ---------- 24. Drift bands: photo rows that slide left→right on scroll ----------
   <div class="drift"><div class="drift__row" data-px-x="1" data-px="1" data-px-amp="220">…tiles…</div>
   <div class="drift__row" data-px-x="-1" …></div></div>  */
.drift{overflow:hidden;position:relative;padding:clamp(.6rem,1.4vw,1rem) 0;--drift-h:clamp(150px,20vw,260px);}
.drift__row{display:flex;gap:clamp(.5rem,1vw,.9rem);width:max-content;position:relative;left:50%;
  transform:translate3d(calc(-50% + var(--px-x,0px)),0,0);will-change:transform;}
.drift__row+.drift__row{margin-top:clamp(.5rem,1vw,.9rem);}
.drift__row>*{height:var(--drift-h);flex:none;border-radius:var(--radius-lg);overflow:hidden;background:var(--ink-2);}
.drift__row img{height:100%;width:auto;display:block;object-fit:cover;}
.drift--bw .drift__row img{filter:grayscale(1);transition:filter .35s var(--m-ease);}
.drift--bw .drift__row>*{position:relative;}
.drift--bw .drift__row>*::after{content:"";position:absolute;inset:0;background:var(--flame);mix-blend-mode:multiply;opacity:.55;transition:opacity .35s var(--m-ease);pointer-events:none;}
@media(hover:hover){.drift--bw .drift__row>*:hover img{filter:none;}.drift--bw .drift__row>*:hover::after{opacity:0;}}
.drift__row>.on img{filter:none!important;}.drift__row>.on::after{opacity:0!important;}
.drift__cap{display:block;text-align:center;font-family:var(--font-body);font-weight:600;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--flame);margin:.9rem 0 0;}
@media(max-width:719px){.drift{--drift-h:120px;}}

/* ---------- 25. Cycling photo stack: pictures change in place ----------
   <figure class="cycle" data-every="4200" style="--cycle-ar:3/2"><img …><img …><img …></figure> */
.cycle{position:relative;overflow:hidden;aspect-ratio:var(--cycle-ar,3/2);border-radius:var(--radius-lg);background:var(--ink-2);}
.cycle>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;
  transform:scale(1.08);transition:opacity 1.1s var(--m-ease),transform 7s linear;}
.cycle>img.on{opacity:1;transform:scale(1);}
.cycle__dots{position:absolute;left:0;right:0;bottom:.8rem;display:flex;justify-content:center;gap:.35rem;z-index:2;pointer-events:none;}
.cycle__dots i{width:5px;height:5px;border-radius:50%;background:var(--bone);opacity:.45;transition:opacity .3s,transform .3s;}
.cycle__dots i.on{opacity:1;transform:scale(1.35);background:var(--flame);}

/* ---------- 26. Video band ----------
   <section class="vband"><div class="vband__media px-frame"><video data-px="0.5" muted loop playsinline preload="metadata" poster="…"><source src="…"></video></div>
   <div class="vband__scrim"></div><div class="container vband__inner">…</div></section> */
.vband{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--bone);
  min-height:clamp(380px,62vh,680px);display:grid;align-items:end;}
.vband__media{position:absolute;inset:0;z-index:-2;}
.vband__media video,.vband__media img{width:100%;height:100%;object-fit:cover;display:block;}
.vband__media video{opacity:0;transition:opacity .9s ease;}
.vband__media video.playing{opacity:1;}
.vband__media .vband__poster{position:absolute;inset:0;z-index:-1;}
.vband__scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,20,20,.18) 0%,rgba(20,20,20,.28) 45%,rgba(20,20,20,.82) 100%);}
.vband__inner{position:relative;padding:clamp(2.2rem,5vw,4.2rem) 0;}
.vband__inner .eyebrow{color:var(--flame);}
.vband__inner h2{font-family:var(--font-display);font-weight:var(--fw-display-bold);letter-spacing:var(--tr-display);line-height:var(--lh-display);
  font-size:clamp(1.8rem,1rem + 2.8vw,3.2rem);max-width:20ch;color:var(--bone);margin:.6rem 0 0;}
.vband__inner p{max-width:52ch;color:var(--bone-muted);margin-top:1rem;line-height:1.5;}
.vband__mute{position:absolute;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:3;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(20,20,20,.45);color:var(--bone);display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px);}
.vband__mute svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.vband__mute .off{display:none;}.vband__mute[aria-pressed="true"] .off{display:block;}.vband__mute[aria-pressed="true"] .on{display:none;}

/* ---------- 27. Footer logo rotor: knot → wordmark → oval badge ---------- */
.footer-logo.logo-rotor{position:relative;display:block;height:72px;width:224px;}
.logo-rotor img{position:absolute;left:0;top:0;height:72px;width:auto;max-width:224px;object-fit:contain;object-position:left center;
  opacity:0;transform:translateY(6px);transition:opacity .7s var(--m-ease),transform .7s var(--m-ease);animation:none!important;}
.logo-rotor img.on{opacity:1;transform:none;}
.knot-anim.logo-rotor img{-webkit-mask:none;mask:none;}
.knot-anim.logo-rotor img.knot{-webkit-mask:conic-gradient(from -20deg,#000 var(--knot-p),transparent 0);mask:conic-gradient(from -20deg,#000 var(--knot-p),transparent 0);}
@media(max-width:600px){.footer-logo.logo-rotor{width:200px;height:64px;}.logo-rotor img{height:64px;max-width:200px;}}

/* ---------- 28. Board + staff cards: lift, photo bloom, staggered entrance ---------- */
.brd-card{transition:transform .55s var(--m-ease),box-shadow .55s var(--m-ease);}
@media(hover:hover){
  .brd-card:hover{transform:translateY(-4px);box-shadow:0 1px 2px rgba(17,17,17,.06),0 40px 70px -36px rgba(17,17,17,.42);}
}
.brd-card__photo img,.brd-card--feature .frame img{transition:transform .9s var(--m-ease),filter .6s var(--m-ease);}
.brd-card__photo,.brd-card--feature .frame{position:relative;}
.brd-card__photo::after,.brd-card--feature .frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--flame);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--m-ease);}
@media(hover:hover){.brd-card:hover .brd-card__photo::after,.brd-card:hover .frame::after{transform:scaleX(1);}}
.brd-grid.stagger .brd-card{opacity:0;transform:translateY(22px);transition:opacity .7s var(--m-ease),transform .7s var(--m-ease),box-shadow .55s var(--m-ease);}
.brd-grid.stagger.in .brd-card{opacity:1;transform:none;}
.brd-grid.stagger.in .brd-card:nth-child(2){transition-delay:.08s}.brd-grid.stagger.in .brd-card:nth-child(3){transition-delay:.16s}
.brd-grid.stagger.in .brd-card:nth-child(4){transition-delay:.24s}.brd-grid.stagger.in .brd-card:nth-child(5){transition-delay:.32s}
.brd-grid.stagger.in .brd-card:nth-child(6){transition-delay:.40s}.brd-grid.stagger.in .brd-card:nth-child(n+7){transition-delay:.46s}

/* ---------- 29. Mobile read-more on long bios (board feature cards) ---------- */
.bio-clamp{position:relative;max-height:var(--clamp-h,11.5em);overflow:hidden;transition:max-height .5s var(--m-ease);
  -webkit-mask:linear-gradient(#000 calc(100% - 3.5em),transparent);mask:linear-gradient(#000 calc(100% - 3.5em),transparent);}
.bio-clamp.open{max-height:var(--clamp-open,4000px);-webkit-mask:none;mask:none;}
.bio-more{align-self:flex-start;margin-top:.4rem;font-family:var(--font-body);font-weight:600;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--flame-ink,#9A4D00);background:none;border:0;padding:.5rem 0;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;min-height:44px;}
.block-ink .bio-more{color:var(--flame);}
.bio-more svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .35s var(--m-ease);}
.bio-more[aria-expanded="true"] svg{transform:rotate(45deg);}

/* ---------- 30. Mosaic: in-flow photo grid with per-tile depth ----------
   <div class="mosaic"><div class="px-frame" style="--c:5;--cm:3;aspect-ratio:4/5"><img data-px="0.6" …></div>…</div> */
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.5rem,1.2vw,1rem);margin-top:clamp(1.6rem,3vw,2.6rem);}
.mosaic>*{grid-column:span var(--c,6);border-radius:var(--radius-lg);overflow:hidden;background:var(--ink-2);box-shadow:var(--lift-bone);}
.mosaic>*>img{display:block;width:100%;height:100%;object-fit:cover;}
@media(max-width:719px){.mosaic{grid-template-columns:repeat(6,1fr);}.mosaic>*{grid-column:span var(--cm,6);}}
.mosaic--bw img{filter:grayscale(1);transition:filter .4s var(--m-ease);}
@media(hover:hover){.mosaic--bw>*:hover img{filter:none;}}

/* ---------- 31. Reduced motion for round 2 ---------- */
@media (prefers-reduced-motion:reduce){
  [data-px]{transform:none!important;}
  .px-frame>[data-px]{--px-s:1;}
  .drift__row{transform:translate3d(-50%,0,0)!important;}
  .cycle>img{transition:none;transform:none;}
  .cycle>img:first-child{opacity:1;}
  .vband__media video{display:none;}
  .logo-rotor img{transition:none;}
  .brd-card,.brd-card__photo img,.brd-card--feature .frame img{transition:none;}
  .brd-grid.stagger .brd-card{opacity:1;transform:none;transition:none;}
  .bio-clamp{transition:none;}
}

/* ---------- 32. Round-2 precedence fixes (found while wiring pages) ----------
   site.css animates .moment img with momentPan (animation-timeline) and
   motion.css has a few transform:none / transform:scale rules from round 1.
   Animations beat transitions and those selectors outrank [data-px], so the
   engine states them here at higher specificity. */
.moment.cycle>img{animation:none;}
.moment.px-frame>img[data-px]{animation:none;transform:translate3d(var(--px-x,0px),var(--px-y,0px),0) scale(var(--px-s,1));}
.why-media .frame.px-frame>img[data-px],.why-media.in .frame.px-frame>img[data-px]{transform:translate3d(var(--px-x,0px),var(--px-y,0px),0) scale(var(--px-s,1));}
.give-bg.px-frame{position:absolute;}
.bio-card:hover .brd-card__photo.px-frame>img[data-px],.bio-card:focus-within .brd-card__photo.px-frame>img[data-px]{transform:translate3d(var(--px-x,0px),var(--px-y,0px),0) scale(var(--px-s,1));}
@media (prefers-reduced-motion:reduce){
  .moment.px-frame>img[data-px],.why-media .frame.px-frame>img[data-px],.bio-card:hover .brd-card__photo.px-frame>img[data-px]{transform:none!important;}
}

/* ==========================================================================
   ROUND 3 (2026-09-02, after Jason's screenshot) — footer logo pump,
   hero photo collage, pinned scene stack, art tiles.
   ========================================================================== */

/* ---------- 33. Footer logo pump: two vertical columns sliding opposite ways (Mello footer) ----------
   <a class="footer-logo logo-pump" href="/"><div class="pump-col" data-dir="up">…imgs…</div><div class="pump-col" data-dir="down">…imgs…</div></a>
   JS clones each column's children once so the -50% loop is seamless. */
.footer-logo.logo-pump{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;width:236px;height:190px;overflow:hidden;
  -webkit-mask:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(transparent,#000 14%,#000 86%,transparent);}
.logo-pump .pump-col{display:flex;flex-direction:column;gap:18px;width:100%;will-change:transform;animation:m-pump-up var(--pump-t,16s) linear infinite;}
.logo-pump .pump-col[data-dir="down"]{animation-name:m-pump-down;}
.logo-pump .pump-col>img{display:block;width:100%;height:auto;max-height:64px;object-fit:contain;object-position:center;flex:none;}
.logo-pump .pump-col>img.knot{max-height:56px;}
.logo-pump:hover .pump-col,.logo-pump:focus-visible .pump-col{animation-play-state:paused;}
@keyframes m-pump-up{to{transform:translate3d(0,-50%,0)}}
@keyframes m-pump-down{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}
@media(max-width:600px){
  .footer-logo.logo-pump{grid-template-columns:1fr;width:100%;max-width:420px;height:64px;
    -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);}
  .logo-pump .pump-col{flex-direction:row;align-items:center;gap:28px;width:max-content;height:64px;animation-name:m-pump-left;}
  .logo-pump .pump-col[data-dir="down"]{display:none;}
  .logo-pump .pump-col>img{width:auto;height:44px;max-height:44px;}
  @keyframes m-pump-left{to{transform:translate3d(-50%,0,0)}}
}

/* ---------- 34. Hero photo collage: floating frames at different depths behind the headline ----------
   <div class="collage" aria-hidden="true"><div class="collage__tile" data-px="0.7" data-px-amp="90" style="left:6%;top:12%;width:14%;--rot:-4deg;--f:7s"><img …></div>…</div>
   Goes inside .page-hero before its content wrapper. Content wrapper gets .collage-over. */
.page-hero .collage{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.page-hero .collage-over{position:relative;z-index:2;}
.collage__tile{position:absolute;aspect-ratio:4/5;border-radius:var(--radius-lg);overflow:hidden;background:var(--ink-2);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);opacity:0;transform:translate3d(var(--px-x,0px),calc(var(--px-y,0px) + 24px),0) rotate(var(--rot,0deg)) scale(.92);
  transition:opacity 1.1s var(--m-ease),transform 1.1s var(--m-ease);}
.collage__tile.wide{aspect-ratio:3/2;}
.collage.in .collage__tile{opacity:var(--o,.55);transform:translate3d(var(--px-x,0px),var(--px-y,0px),0) rotate(var(--rot,0deg)) scale(1);transition-delay:var(--d,0s);}
.collage__tile>img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05);animation:m-float var(--f,8s) ease-in-out infinite alternate;}
.collage__tile::after{content:"";position:absolute;inset:0;background:var(--flame);mix-blend-mode:multiply;opacity:.6;}
.collage__tile.color>img{filter:none;}.collage__tile.color::after{opacity:0;}
@keyframes m-float{from{transform:translate3d(0,-6px,0) scale(1.06)}to{transform:translate3d(0,6px,0) scale(1.06)}}
.page-hero .collage::after{content:"";position:absolute;inset:0;background:
  radial-gradient(70% 60% at 30% 55%,color-mix(in oklch,var(--ink) 78%,transparent) 0%,color-mix(in oklch,var(--ink) 55%,transparent) 55%,transparent 100%),
  linear-gradient(180deg,color-mix(in oklch,var(--ink) 40%,transparent),transparent 30%,transparent 70%,var(--ink) 100%);}
@media(max-width:768px){.collage__tile.md-hide{display:none;}.collage.in .collage__tile{--o:.4;}}

/* ---------- 35. Scene stack: pinned photo that flips as the steps scroll past ----------
   <section class="scene"><div class="container scene__grid">
     <div class="scene__media"><figure class="scene__stack"><img …><img …></figure></div>
     <div class="scene__steps"><article class="scene__step"><span class="scene__num">01</span><h3>…</h3><p>…</p></article>…</div>
   </div></section> */
.scene__grid{display:grid;grid-template-columns:1fr;gap:clamp(1.2rem,3vw,3rem);align-items:start;}
@media(min-width:900px){.scene__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}}
.scene__media{position:sticky;top:clamp(4.5rem,10vh,7rem);height:min(54vh,470px);}   /* r5: shorter pin (was 70vh / 640px) */
@media(max-width:899px){.scene__media{height:min(46vh,380px);z-index:1;}}
.scene__stack{position:relative;margin:0;width:100%;height:100%;border-radius:var(--radius-lg);overflow:hidden;background:var(--ink-2);box-shadow:var(--lift-bone);}
.scene__stack>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transform:scale(1.08);
  transition:opacity .9s var(--m-ease),transform 1.6s var(--m-ease);filter:grayscale(1);}
.scene__stack>img.on{opacity:1;transform:scale(1);filter:none;transition:opacity .9s var(--m-ease),transform 1.6s var(--m-ease),filter 1.4s var(--m-ease) .2s;}
.scene__stack::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(20,20,20,.55));pointer-events:none;}
.scene__cap{position:absolute;left:clamp(1rem,2.5vw,1.8rem);bottom:clamp(1rem,2.5vw,1.6rem);z-index:2;color:var(--bone);font-family:var(--font-body);font-weight:600;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;}
.scene__cap span{display:inline-block;opacity:0;transform:translateY(8px);transition:opacity .5s var(--m-ease),transform .5s var(--m-ease);position:absolute;left:0;bottom:0;white-space:nowrap;}
.scene__cap span.on{opacity:1;transform:none;}
.scene__steps{display:flex;flex-direction:column;}
.scene__step{min-height:min(46vh,400px);display:flex;flex-direction:column;justify-content:center;padding:clamp(1rem,2.6vw,2rem) 0;   /* r5: each step ~40% shorter */
  opacity:.28;transform:translateY(12px);transition:opacity .6s var(--m-ease),transform .6s var(--m-ease);}
.scene__step.on{opacity:1;transform:none;}
@media(max-width:899px){.scene__step{min-height:auto;padding:clamp(1.6rem,6vw,2.4rem) 0;}}
.scene__num{font-family:var(--font-display);font-weight:var(--fw-display-bold);font-size:clamp(2.2rem,4vw,3.6rem);line-height:1;color:var(--flame);letter-spacing:-.03em;}
.scene__step h3{font-family:var(--font-display);font-weight:var(--fw-display-bold);letter-spacing:var(--tr-display);line-height:var(--lh-tight);font-size:clamp(1.6rem,1rem + 2vw,2.6rem);margin:.6rem 0 0;color:var(--text);}
.scene__step p{margin:.9rem 0 0;max-width:46ch;color:var(--text-muted);font-size:var(--text-lead,1.05rem);line-height:1.55;}
.scene__bar{height:2px;width:100%;max-width:220px;background:var(--hair-local);margin-top:1.2rem;position:relative;overflow:hidden;}
.scene__bar i{position:absolute;inset:0;background:var(--flame);transform:scaleX(0);transform-origin:left;transition:transform 4s linear;}
.scene__step.on .scene__bar i{transform:scaleX(1);}

/* ---------- 36. Art tiles: clip reveal + tilt + tag, for .mosaic--art ---------- */
.mosaic--art>*{clip-path:inset(100% 0 0 0);transform:translate3d(0,24px,0) rotate(var(--rot,0deg));transition:clip-path 1.1s var(--m-ease),transform 1.1s var(--m-ease);transition-delay:var(--d,0s);position:relative;}
.mosaic--art.in>*{clip-path:inset(0 0 0 0);transform:translate3d(0,0,0) rotate(var(--rot,0deg));}
.mosaic--art>*>img{filter:grayscale(1);transition:filter .5s var(--m-ease);}
.mosaic--art>*::before{content:"";position:absolute;inset:0;background:var(--flame);mix-blend-mode:multiply;opacity:.5;transition:opacity .5s var(--m-ease);pointer-events:none;z-index:1;}
@media(hover:hover){.mosaic--art>*:hover>img{filter:none;}.mosaic--art>*:hover::before{opacity:0;}.mosaic--art>*:hover{transform:translate3d(0,-6px,0) rotate(0deg);}}
.mosaic--art>.on>img{filter:none;}.mosaic--art>.on::before{opacity:0;}
.tile__tag{position:absolute;left:.9rem;bottom:.8rem;z-index:2;color:var(--bone);font-family:var(--font-body);font-weight:600;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.4rem .6rem;background:rgba(20,20,20,.55);backdrop-filter:blur(6px);border-radius:4px;opacity:0;transform:translateY(6px);transition:opacity .5s var(--m-ease) .4s,transform .5s var(--m-ease) .4s;}
.mosaic--art.in .tile__tag{opacity:1;transform:none;}

/* ---------- 37. Reduced motion for round 3 ---------- */
@media (prefers-reduced-motion:reduce){
  .logo-pump .pump-col{animation:none!important;}
  .footer-logo.logo-pump{height:auto;-webkit-mask:none;mask:none;}
  .logo-pump .pump-col[data-dir="down"]{display:none;}
  .logo-pump .pump-col>img:not(:first-child){display:none;}
  .collage__tile,.collage.in .collage__tile{opacity:.35;transform:rotate(var(--rot,0deg));transition:none;}
  .collage__tile>img{animation:none;}
  .scene__media{position:static;height:auto;}
  .scene__stack{height:auto;aspect-ratio:4/5;}
  .scene__stack>img{transition:none;transform:none;}
  .scene__step{opacity:1;transform:none;transition:none;}
  .scene__bar i{transition:none;}
  .mosaic--art>*,.mosaic--art.in>*{clip-path:none;transform:none;transition:none;}
  .tile__tag{opacity:1;transform:none;}
}

/* ---------- 38. Flag line: auto-scrolling nations strip with a stepped, jittery scroll kick ----------
   <div class="flagline" aria-label="Agape in the world"><div class="flagline__jit"><div class="flagline__track">
     <span class="flagline__item"><img src="/assets/flags/br.svg" alt=""><span>Brazil</span></span>…</div></div></div> */
.flagline{position:relative;overflow:hidden;margin-top:clamp(1.6rem,3vw,2.4rem);padding:clamp(.8rem,1.4vw,1.1rem) 0;
  border-top:1px solid var(--hair-strong,rgba(255,255,255,.22));border-bottom:1px solid var(--hair-strong,rgba(255,255,255,.22));
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.flagline__jit{transform:translate3d(var(--jit,0px),0,0);transition:transform .16s steps(2,jump-end);will-change:transform;}
.flagline__track{display:flex;align-items:center;gap:clamp(1.6rem,3vw,2.8rem);width:max-content;animation:m-flagline var(--fl-t,44s) linear infinite;will-change:transform;}
.flagline:hover .flagline__track{animation-play-state:paused;}
.flagline__item{display:flex;align-items:center;gap:.75rem;flex:none;font-family:var(--font-body);font-weight:600;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-muted);white-space:nowrap;}
.flagline__item img{width:46px;height:32px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 10px 24px -12px rgba(0,0,0,.8);display:block;}
.flagline__item i{width:5px;height:5px;border-radius:50%;background:var(--flame);margin-left:.4rem;}
@keyframes m-flagline{to{transform:translate3d(-50%,0,0)}}
.flagline__label{position:absolute;left:0;top:0;transform:translateY(-100%);padding-bottom:.45rem;font-family:var(--font-body);font-weight:600;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--flame);}
.page-hero .flagline{margin-left:calc(-1 * var(--pad,1.25rem));margin-right:calc(-1 * var(--pad,1.25rem));padding-left:var(--pad,1.25rem);}

/* ---------- 39. Trading cards: testimonies as a snap-scroll deck with tilt + foil ----------
   <div class="tdeck"><div class="tdeck__track"><article class="tdcard"><div class="tdcard__art"><img …><span class="tdcard__no">01</span></div>
   <div class="tdcard__body"><p class="tdcard__q">…</p><p class="tdcard__who">…</p><details>…</details></div></article>…</div>
   <div class="tdeck__nav"><button class="tdeck__btn" data-dir="-1">…</button><button class="tdeck__btn" data-dir="1">…</button></div></div> */
.tdeck{position:relative;margin-top:clamp(1.6rem,3vw,2.6rem);}
.tdeck__track{display:flex;gap:clamp(1rem,2vw,1.6rem);overflow-x:auto;scroll-snap-type:x mandatory;padding:1.2rem var(--pad,1.25rem) 1.6rem;margin:0 calc(-1 * var(--pad,1.25rem));
  scrollbar-width:none;-webkit-overflow-scrolling:touch;cursor:grab;perspective:1200px;}
.tdeck__track::-webkit-scrollbar{display:none;}
.tdeck__track.dragging{cursor:grabbing;scroll-snap-type:none;}
.tdcard{flex:0 0 clamp(260px,26vw,320px);scroll-snap-align:center;position:relative;border-radius:16px;overflow:hidden;background:var(--ink,#141414);color:var(--bone,#fff);
  border:1px solid color-mix(in oklch,var(--flame) 55%,transparent);box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 40px 70px -40px rgba(0,0,0,.7);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));transition:transform .5s var(--m-ease),box-shadow .5s var(--m-ease);transform-style:preserve-3d;
  opacity:0;translate:0 22px;}
.tdeck.in .tdcard{opacity:1;translate:0 0;transition:opacity .7s var(--m-ease),translate .7s var(--m-ease),transform .5s var(--m-ease),box-shadow .5s var(--m-ease);transition-delay:var(--d,0s);}
.tdcard::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:radial-gradient(60% 45% at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 60%),
    linear-gradient(115deg,transparent 30%,color-mix(in oklch,var(--flame) 35%,transparent) 45%,color-mix(in oklch,var(--growth) 30%,transparent) 55%,transparent 70%);
  background-size:100% 100%,260% 260%;background-position:0 0,var(--fx,0%) 0;opacity:0;transition:opacity .4s var(--m-ease);mix-blend-mode:screen;}
.tdcard:hover::before,.tdcard.on::before{opacity:.75;}
.tdcard::after{content:"";position:absolute;inset:6px;border:1px solid rgba(255,255,255,.12);border-radius:12px;pointer-events:none;z-index:2;}
.tdcard__art{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--ink-2);}
.tdcard__art img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05);transform:scale(1.04);transition:transform .9s var(--m-ease),filter .6s var(--m-ease);}
.tdcard__art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,var(--ink) 100%),var(--flame);background-blend-mode:normal,multiply;mix-blend-mode:multiply;opacity:.7;pointer-events:none;transition:opacity .6s var(--m-ease);}
.tdcard:hover .tdcard__art img,.tdcard.on .tdcard__art img{filter:grayscale(.2);transform:scale(1.1);}
.tdcard:hover .tdcard__art::after,.tdcard.on .tdcard__art::after{opacity:.45;}
.tdcard__no{position:absolute;left:1rem;top:.9rem;z-index:2;font-family:var(--font-display);font-weight:var(--fw-display-bold);font-size:1.5rem;line-height:1;color:var(--flame);letter-spacing:-.03em;}
.tdcard__tag{position:absolute;right:1rem;top:1rem;z-index:2;font-family:var(--font-body);font-weight:600;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);
  padding:.35rem .55rem;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(20,20,20,.35);backdrop-filter:blur(4px);}
.tdcard__body{position:relative;z-index:2;padding:clamp(1.1rem,2vw,1.4rem) clamp(1.1rem,2vw,1.4rem) clamp(1.2rem,2vw,1.5rem);display:flex;flex-direction:column;gap:.6rem;min-height:190px;}
.tdcard__q{margin:0;font-family:var(--font-display);font-weight:var(--fw-display-bold);letter-spacing:var(--tr-display);line-height:1.15;font-size:clamp(1.15rem,1rem + .6vw,1.45rem);color:var(--bone);}
.tdcard__who{margin:0;font-family:var(--font-body);font-weight:600;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--flame);}
.tdcard details{margin-top:auto;font-size:.92rem;line-height:1.5;color:var(--bone-muted);}
.tdcard details summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-body);font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);min-height:44px;}
.tdcard details summary::-webkit-details-marker{display:none;}
.tdcard details summary::after{content:"+";font-size:1.1rem;color:var(--flame);transition:transform .3s var(--m-ease);}
.tdcard details[open] summary::after{transform:rotate(45deg);}
.tdcard details p{margin:.5rem 0 0;}
.tdeck__nav{display:flex;gap:.6rem;justify-content:flex-end;margin-top:.2rem;}
.tdeck__btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--hair-local-strong,rgba(0,0,0,.18));background:var(--surface,#fff);color:var(--text,#141414);display:grid;place-items:center;cursor:pointer;transition:transform .3s var(--m-spring),background .3s,color .3s,border-color .3s;}
.tdeck__btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.tdeck__btn:hover{background:var(--flame);color:#111;border-color:transparent;transform:translateY(-2px);}
.tdeck__btn:disabled{opacity:.35;pointer-events:none;}
.block-ink .tdeck__btn{background:transparent;color:var(--bone);border-color:rgba(255,255,255,.25);}
.tdeck__hint{font-family:var(--font-body);font-weight:600;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-muted);margin-right:auto;align-self:center;}

/* ---------- 40. Footer social bar: Instagram / YouTube / Facebook on the bottom banner ---------- */
.footer-socialbar{display:flex;flex-wrap:wrap;gap:.7rem;margin:clamp(1.4rem,3vw,2.2rem) 0 clamp(1rem,2vw,1.4rem);}
.footer-socialbar a{position:relative;display:inline-flex;align-items:center;gap:.7rem;min-height:48px;padding:.65rem 1.1rem .65rem .85rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);color:var(--bone);text-decoration:none;font-family:var(--font-body);font-weight:600;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  overflow:hidden;isolation:isolate;transition:transform .35s var(--m-spring),border-color .35s,color .35s;}
.footer-socialbar a::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--flame);transform:translateX(-101%);transition:transform .45s var(--m-ease);border-radius:inherit;}
.footer-socialbar a:hover,.footer-socialbar a:focus-visible{transform:translateY(-2px);border-color:transparent;color:#111;}
.footer-socialbar a:hover::before,.footer-socialbar a:focus-visible::before{transform:translateX(0);}
.footer-socialbar a .ico{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);transition:background .35s,transform .45s var(--m-spring);}
.footer-socialbar a:hover .ico{background:rgba(0,0,0,.14);transform:rotate(-8deg) scale(1.08);}
.footer-socialbar a svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.footer-socialbar a .arrow{width:14px;height:14px;opacity:.5;transition:transform .35s var(--m-ease),opacity .35s;}
.footer-socialbar a:hover .arrow{transform:translate(2px,-2px);opacity:1;}
.footer-socialbar a .name{white-space:nowrap;}
.footer-socialbar a .handle{opacity:.55;font-weight:500;letter-spacing:.04em;text-transform:none;display:none;}
@media(min-width:720px){.footer-socialbar a .handle{display:inline;}}

@media (prefers-reduced-motion:reduce){
  .flagline__track{animation:none!important;}
  .flagline__jit{transform:none!important;transition:none;}
  .tdcard,.tdeck.in .tdcard{opacity:1;translate:0 0;transform:none!important;transition:none;}
  .tdcard::before{display:none;}
  .footer-socialbar a,.footer-socialbar a::before,.footer-socialbar a .ico{transition:none;}
}

/* deck guard: the shell must not grow to the track */
.tdeck{display:block;}
.tdeck .shell{min-width:0;}
.tdeck__track{min-width:0;}

/* rotated art tiles: clip 6px outside the grid so a tilted corner never widens the page */
.container:has(> .mosaic--art),.shell:has(> .mosaic--art){overflow:clip;}

/* ==========================================================================
   ROUND 4 (2026-09-02 eve) — epic flag line, readable story deck, small art
   tiles, footer social band, Monthly Partnership polish. Additive; tokens,
   layout system, and copy untouched (two lead lines on Partners re-worded
   because the cards no longer open). Inert under prefers-reduced-motion.
   ========================================================================== */

/* ---------- 41. Flag line, epic: full-bleed, medium flags, depth + glow ---------- */
.flagline--epic{margin-top:clamp(2rem,4vw,3.2rem);padding:clamp(2.6rem,4vw,3.6rem) 0 clamp(1.4rem,2.8vw,2.4rem);}
.page-hero .flagline--epic{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding-left:0;}
.flagline--epic::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 140% at 50% 50%,color-mix(in oklch,var(--flame) 14%,transparent),transparent 72%);}
.flagline--epic .flagline__track{gap:clamp(2.4rem,4.8vw,4.8rem);}
.flagline--epic .flagline__item{gap:1.1rem;font-size:clamp(.82rem,.72rem + .4vw,1.02rem);letter-spacing:.2em;color:var(--bone);}
.flagline--epic .flagline__item img{width:clamp(78px,7.8vw,118px);height:auto;aspect-ratio:4/3;border-radius:7px;
  box-shadow:0 0 0 1px rgba(255,255,255,.22),0 26px 44px -18px rgba(0,0,0,.9);
  transform:perspective(700px) rotateY(-12deg);transition:transform .55s var(--m-ease);}
@media(hover:hover){.flagline--epic .flagline__item:hover img{transform:perspective(700px) rotateY(0deg) scale(1.06);}}
.flagline--epic .flagline__item i{width:7px;height:7px;margin-left:.8rem;box-shadow:0 0 12px var(--flame);}
.flagline--epic .flagline__label{left:50%;top:clamp(.8rem,1.4vw,1.2rem);transform:translateX(-50%);font-size:.72rem;letter-spacing:.22em;padding-bottom:0;white-space:nowrap;}   /* inside the band: the wrapper clips overflow, so the old above-the-line label never showed */
@media(max-width:719px){.flagline--epic .flagline__item img{width:64px;}.flagline--epic .flagline__track{gap:1.8rem;}}

/* ---------- 42. Story deck: testimony cards you can read; photo beside the words ---------- */
.tdeck--story .tdcard{flex-basis:clamp(300px,54vw,640px);}
.tdeck--story .tdcard__body{min-height:0;gap:.7rem;padding:clamp(1.2rem,2.2vw,1.7rem) clamp(1.2rem,2.2vw,1.7rem) clamp(1.3rem,2.2vw,1.8rem);}
.tdeck--story .tdcard__q{font-size:clamp(1.2rem,1rem + .7vw,1.55rem);}
.tdcard__story{margin:0;font-family:var(--font-body);font-size:clamp(.94rem,.9rem + .15vw,1.02rem);line-height:1.6;color:var(--bone-muted);text-wrap:pretty;}
.tdeck--story .tdcard__who{margin-top:.2rem;}
.tdeck--story .tdcard__art{aspect-ratio:16/9;max-height:200px;}
@media(min-width:720px){
  .tdeck--story .tdcard{display:grid;grid-template-columns:38% 1fr;}
  .tdeck--story .tdcard__art{aspect-ratio:auto;max-height:none;height:100%;min-height:100%;}
  .tdeck--story .tdcard__art::after{background:linear-gradient(90deg,transparent 40%,var(--ink) 100%),var(--flame);}
}
.tdeck--story .tdcard.is-active{--ty:-4px;box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 48px 80px -40px rgba(0,0,0,.75),0 0 0 1px color-mix(in oklch,var(--flame) 70%,transparent);}
.tdeck__count{font-family:var(--font-body);font-variant-numeric:tabular-nums;font-weight:600;font-size:.7rem;letter-spacing:.16em;color:var(--text-muted);align-self:center;margin-right:.6rem;}
.tdeck__dots{display:flex;gap:.45rem;align-items:center;margin-right:.6rem;}
.tdeck__dot{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:color-mix(in oklch,var(--text,#141414) 25%,transparent);cursor:pointer;transition:width .35s var(--m-ease),background .35s;}
.tdeck__dot.on{width:26px;background:var(--flame);}
@media(max-width:719px){.tdeck__hint{display:none;}.tdeck__nav{justify-content:space-between;}.tdeck__dots{margin-right:auto;}}

/* ---------- 43. Art tiles, small: tighter gap and radius so eight tiles fit on one screen ---------- */
.mosaic--sm{gap:clamp(.45rem,1vw,.8rem);}
.mosaic--sm>*{border-radius:var(--radius);}

/* ---------- 44. Footer social band: the IG / YouTube / Facebook pills run as a marquee across the full width,
   with the same stepped scroll kick as the flag line. JS wraps the existing .footer-socialbar links, so no page
   markup changes; without JS or under reduced motion the static pill row from round 3 stays. ---------- */
.site-footer,footer{overflow-x:clip;}
.footer-socialbar.socialband{display:block;margin:clamp(1.6rem,3.4vw,2.6rem) calc(50% - 50vw) clamp(1.2rem,2.4vw,1.8rem);padding:clamp(1rem,1.8vw,1.4rem) 0;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);}
.socialband__jit{transform:translate3d(var(--jit,0px),0,0);transition:transform .16s steps(2,jump-end);will-change:transform;}
.socialband__track{display:flex;align-items:center;gap:clamp(1.2rem,2.6vw,2.4rem);width:max-content;padding-left:clamp(1.2rem,2.6vw,2.4rem);animation:m-flagline var(--sb-t,40s) linear infinite;will-change:transform;}
.socialband:hover .socialband__track,.socialband:focus-within .socialband__track{animation-play-state:paused;}
.socialband a{flex:none;}
.socialband a .handle{display:inline;}
.socialband__sep{width:7px;height:7px;border-radius:50%;background:var(--flame);flex:none;box-shadow:0 0 12px var(--flame);}

/* ---------- 45. CTA pulse ring: one soft ring every few seconds on the partnership button ---------- */
.cta-pulse{position:relative;}
.cta-pulse::after{content:"";position:absolute;inset:-5px;border-radius:999px;border:2px solid var(--flame);opacity:0;pointer-events:none;animation:m-ctapulse 3.8s var(--m-ease) infinite;}
@keyframes m-ctapulse{0%{opacity:.75;transform:scale(.96)}55%{opacity:0;transform:scale(1.16)}100%{opacity:0;transform:scale(1.16)}}

/* ---------- 47. Round 5 (Jason, 1:10pm screenshots): no dots on the flag line or the social band; footer logo
   back to the in-place rotor (knot → wordmark → oval) but snapping, not fading; scene stack shorter (block 35);
   parallax eased in JS. The round-3 pump CSS (33) stays for reference; no page uses it now. ---------- */
.flagline__item i,.socialband__sep{display:none;}
.flagline__jit,.socialband__jit{transition:transform .45s cubic-bezier(.22,.61,.36,1);}   /* r6: scroll kick glides instead of stepping */
.flagline--epic .flagline__item{gap:1rem;}
.logo-rotor--snap img{transition:transform .28s var(--m-spring),opacity 0s;transform:translateY(10px) scale(.94);}
.logo-rotor--snap img.on{transform:none;}
.logo-rotor--snap img.knot{max-height:none;}
/* r6 (Jason 4:18pm): bigger. 72px → 150px tall, up to 440px wide; 110px on phones */
.site-footer .footer-logo.logo-rotor--snap{height:150px;width:440px;max-width:100%;}   /* fixed width: min(440px,100%) collapsed to 0 in the auto grid column */
.site-footer .footer-logo.logo-rotor--snap img{height:150px;max-width:440px;}   /* outranks wolverine-chrome's .site-footer .footer-logo img{height:72px} */
@media(max-width:600px){.site-footer .footer-logo.logo-rotor--snap{height:110px;width:320px;}.site-footer .footer-logo.logo-rotor--snap img{height:110px;max-width:320px;}}

/* ---------- 46. Reduced motion for round 4 ---------- */
@media (prefers-reduced-motion:reduce){
  .flagline--epic .flagline__item img{transform:none;transition:none;}
  .tdeck__dot{transition:none;}
  .socialband__track{animation:none!important;flex-wrap:wrap;width:auto;}
  .socialband__jit{transform:none!important;transition:none;}
  .cta-pulse::after{display:none;}
}

/* ---------- 48. Drift signatures: one band treatment per page ----------
   Jason (2026-09-02, 9:33pm screenshot): the same two-row band ran on six
   pages and read as one template. Each page now takes its own modifier set,
   so the band belongs to the page it sits on.

   These change SHAPE and RHYTHM only. The parallax engine (block 23) is
   untouched; travel and direction still come from data-px-amp / data-px-x
   in the markup, so a band can be retuned without editing CSS.

   Assignments (2026-09-02):
     about         .drift--arch .drift--fade        two rows, opposed, amp 150
     partner       .drift--bw .drift--tilt          two rows, opposed, amp 320
     summit        .drift--strip .drift--fade       two rows, SAME way, 300/190
     events        .drift--bw .drift--single .drift--wide   one row, amp 170
     mission-trips .drift--stagger                  two rows, opposed, 240/190
     life-school   .drift--bw .drift--fade          two rows, opposed, amp 110
   ------------------------------------------------------------------------ */

/* edge fade — the band dissolves into the section instead of butting the frame */
.drift--fade{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);}

/* arch — tiles read as windows rather than cards */
.drift--arch .drift__row>*{border-radius:calc(var(--drift-h) * .5) calc(var(--drift-h) * .5) var(--radius-lg) var(--radius-lg);}

/* tilt — every tile sits a hair off square, alternating; scrapbook, not grid */
.drift--tilt{padding-block:clamp(1.2rem,2.6vw,2rem);}
.drift--tilt .drift__row>*{transform:rotate(-1.9deg);}
.drift--tilt .drift__row>*:nth-child(even){transform:rotate(1.9deg);}

/* stagger — the second row drops and offsets so the two rows interlock */
.drift--stagger .drift__row+.drift__row{margin-top:calc(var(--drift-h) * -.05);
  padding-left:calc(var(--drift-h) * .55);}

/* wide — fewer, bigger tiles with air between them */
.drift--wide{--drift-h:clamp(190px,26vw,340px);}
.drift--wide .drift__row{gap:clamp(1.1rem,2.4vw,2rem);}

/* strip — short and dense, like a contact sheet running past */
.drift--strip{--drift-h:clamp(96px,12vw,150px);}
.drift--strip .drift__row{gap:clamp(.3rem,.6vw,.5rem);}
.drift--strip .drift__row>*{border-radius:calc(var(--radius-lg) * .45);}

/* ladder — tiles alternate height, so the band has a pulse instead of a flat edge */
.drift--ladder .drift__row{align-items:center;}
.drift--ladder .drift__row>*:nth-child(odd){height:calc(var(--drift-h) * .68);}

/* single — one row; the second stays in the markup for a later swap */
.drift--single .drift__row+.drift__row{display:none;}

@media(max-width:719px){
  /* phones: keep the shapes, drop the tilt and the interlock so nothing clips */
  .drift--tilt .drift__row>*,
  .drift--tilt .drift__row>*:nth-child(even){transform:none;}
  .drift--stagger .drift__row+.drift__row{margin-top:clamp(.5rem,1vw,.9rem);padding-left:0;}
  .drift--wide{--drift-h:clamp(150px,34vw,210px);}
  .drift--strip{--drift-h:84px;}
}

@media (prefers-reduced-motion:reduce){
  .drift--tilt .drift__row>*,
  .drift--tilt .drift__row>*:nth-child(even){transform:none;}
}

/* ---------- 49. Primary nav at eight items ----------
   Adding L.I.F.E. Summit takes the primary nav from seven links to eight.
   wolverine-chrome keeps the desktop nav on screen down to 769px at a fixed
   28px gap, and eight items wrapped to a second row below ~1180px. Tighten
   the gap and the type through that band only; the nav is untouched at
   1180px and up, and still becomes the Menu button at 768px. */
@media(min-width:769px) and (max-width:1179px){
  .site-header .site-nav{gap:clamp(11px,1.7vw,22px);}
  .site-header .site-nav a{font-size:15px;letter-spacing:0;}
}
@media(min-width:769px) and (max-width:889px){
  .site-header .site-nav a{font-size:14px;}
}