/* ---- Motion 2 (26 Sept 2026) ----
   Service pages: What's included lights up, Common questions arrive as a
   text thread. Case studies: credits stagger in, the outcome lights word by
   word as it scrolls into place. Everything is progressive: without JS, or
   with reduced motion, the plain markup shows as before. */

/* What's included */
.m2-inc .inc-item{position:relative; overflow:hidden; isolation:isolate; transition:background-color .45s ease}
.m2-inc .inc-item::before{content:""; position:absolute; left:0; top:0; height:2px; width:100%; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.2,.8,.2,1); z-index:1}
.m2-inc .inc-item::after{content:attr(data-n); position:absolute; right:clamp(12px,1.4vw,20px); bottom:-.14em; z-index:-1; font-family:var(--display); font-weight:700; font-size:clamp(72px,7vw,118px); line-height:1; color:transparent; -webkit-text-stroke:1px #2A2B36; transition:-webkit-text-stroke-color .5s ease, transform .7s cubic-bezier(.2,.8,.2,1); pointer-events:none}
.m2-inc.pre .inc-item{opacity:0; transform:translateY(26px)}
.m2-inc.in .inc-item{opacity:1; transform:none; transition:opacity .6s ease calc(var(--i,0) * 90ms), transform .8s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 90ms), background-color .45s ease}
.m2-inc .inc-item h3, .m2-inc .inc-item p, .m2-inc .inc-item .n{transition:color .4s ease}
.m2-inc .inc-item.lit{background:#E4E5EA}
.m2-inc .inc-item.lit h3{color:#0B0C10}
.m2-inc .inc-item.lit p{color:#3A3C4A}
.m2-inc .inc-item.lit .n{color:#0B0C10}
.m2-inc .inc-item.lit::before{transform:scaleX(1)}
.m2-inc .inc-item.lit::after{-webkit-text-stroke-color:rgba(254,57,2,.6); transform:translateY(-8px)}
.m2-bar{height:2px; background:var(--rule); margin-top:14px; overflow:hidden; border-radius:2px}
.m2-bar i{display:block; height:100%; width:0; background:var(--orange)}
.m2-bar.run i{animation:m2bar 1.9s linear forwards}
@keyframes m2bar{to{width:100%}}

/* Common questions, as a text thread you tap through.
   Questions sit as reply chips. Tap one: it sends, dots type, the green answer
   pill grows into the answer. Answers stay in the thread; tap a sent question to tuck its answer away. */
.faq.m2-chat{max-width:760px; border:1px solid var(--rule); border-radius:28px; background:#07080B; padding:0 clamp(14px,2vw,26px) clamp(16px,2vw,24px); position:relative; overflow:hidden}
.m2-chat-head{display:flex; align-items:center; gap:12px; padding:16px 0 14px; border-bottom:1px solid var(--rule); margin-bottom:20px}
.m2-av{flex:none; width:38px; height:38px; border-radius:50%; background:#000; border:1px solid #2A2B36; display:grid; place-items:center; overflow:hidden}
.m2-av img{width:28px; height:auto; display:block}
.m2-who{display:flex; flex-direction:column; gap:3px; min-width:0}
.m2-who b{font-size:15px; font-weight:500; color:var(--ink)}
.m2-who span{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.m2-chat .faq-row{display:flex; flex-direction:column; gap:0; padding:0; margin:0 0 10px; border:0; grid-template-columns:none}
.m2-chat .faq-row:last-child{margin-bottom:4px}
.m2-chat .faq-n{display:none}
.m2-chat .faq-row h3{align-self:flex-end; max-width:78%; margin:0; font-size:clamp(15px,1.45vw,17px); font-weight:500; letter-spacing:-.01em; line-height:1.38; transform-origin:100% 100%}
.m2-q{-webkit-appearance:none; appearance:none; font:inherit; letter-spacing:inherit; line-height:inherit; text-align:left; display:block; width:100%; margin:0; cursor:pointer; padding:11px 15px; border-radius:20px 20px 6px 20px; border:1px solid #5E6174; background:transparent; color:var(--ink); transition:background-color .3s ease, color .3s ease, border-color .3s ease, transform .35s cubic-bezier(.2,1.4,.4,1)}
.m2-q:hover{border-color:#9A9DB0}
.m2-q:active{transform:scale(.97)}
.m2-q:focus-visible{outline:2px solid var(--orange); outline-offset:3px}
.faq-row.open .m2-q{background:#E4E5EA; border-color:#E4E5EA; color:#0B0C10}
.m2-ans{align-self:stretch; height:0; overflow:hidden; visibility:hidden; transition:height .5s cubic-bezier(.2,.8,.2,1), visibility 0s linear .5s}
.faq-row.open .m2-ans{visibility:visible; transition:height .5s cubic-bezier(.2,.8,.2,1), visibility 0s}
.faq-row.t .m2-ans{transition-duration:.3s, 0s}
.m2-ans-in{display:flex; flex-direction:column; gap:6px; padding:5px 0 8px}
.m2-meta{align-self:flex-end; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 4px 4px 0}
.m2-bub{align-self:flex-start; max-width:82%; position:relative; box-sizing:border-box; overflow:hidden; background:rgba(63,209,127,.2); border:1px solid rgba(63,209,127,.42); border-radius:20px 20px 20px 6px; transform-origin:0 100%; transition:width .5s cubic-bezier(.2,.8,.2,1), height .5s cubic-bezier(.2,.8,.2,1), opacity .2s ease}
.m2-chat.js .faq-row:not(.open) .m2-bub{opacity:0}
.faq-row.t .m2-bub{animation:m2pop .32s cubic-bezier(.2,1.4,.4,1) .08s backwards}
.m2-chat .faq-row p{margin:0; box-sizing:border-box; color:#EAF7EF; font-size:15px; line-height:1.52; padding:12px 16px}
.m2-chat.js .m2-bub p{color:transparent; transition:color .28s ease .16s}
.m2-chat.js .faq-row.a .m2-bub p{color:#EAF7EF}
.m2-chat.js .faq-row.t .m2-bub p{display:none}
.m2-typing{display:none; gap:5px; padding:14px 16px}
.faq-row.t .m2-typing{display:flex}
.faq-row.m .m2-typing{display:flex; position:absolute; left:0; top:0; transition:opacity .18s ease}
.faq-row.m.a .m2-typing{opacity:0}
.faq-row.m.d .m2-typing{display:none}
@keyframes m2pop{from{opacity:0; transform:scale(.85)} to{opacity:1; transform:none}}
.m2-typing i{width:7px; height:7px; border-radius:50%; background:#8FE3B4; animation:m2dot 1s infinite ease-in-out}
.m2-typing i:nth-child(2){animation-delay:.15s}
.m2-typing i:nth-child(3){animation-delay:.3s}
@keyframes m2dot{0%,80%,100%{transform:translateY(0); opacity:.45} 40%{transform:translateY(-4px); opacity:1; background:#3FD17F}}
.m2-chat.js.arrive .faq-row h3{opacity:0; transform:translateY(10px) scale(.94); transition:opacity .35s ease, transform .45s cubic-bezier(.2,1.4,.4,1)}
.m2-chat.js.arrive .faq-row.q h3{opacity:1; transform:none}
.m2-notif{position:absolute; left:50%; top:9px; z-index:3; width:min(92%,380px); display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; background:#1C1D25; border:1px solid #2E2F3B; box-shadow:0 12px 40px rgba(0,0,0,.5); transform:translate(-50%,-140%); opacity:0; transition:transform .55s cubic-bezier(.2,1.2,.4,1), opacity .35s ease; pointer-events:none; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.m2-notif.show{transform:translate(-50%,0); opacity:1}
.m2-notif .m2-av{width:30px; height:30px}
.m2-notif .m2-av img{width:22px}
.m2-notif div b{display:block; font-size:13px; font-weight:500; color:var(--ink)}
.m2-notif div span{display:block; font-size:12.5px; color:#B7B9C6}
.m2-notif em{margin-left:auto; font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); align-self:flex-start}
@media (max-width:640px){
  .faq.m2-chat{border-radius:22px}
  .m2-chat .faq-row h3{max-width:88%}
  .m2-bub{max-width:90%}
}

/* Case studies: credits stagger, outcome lights word by word */
.m2-cred.pre > div{opacity:0; transform:translateY(12px)}
.m2-cred.in > div{opacity:1; transform:none; transition:opacity .6s ease calc(var(--i,0) * 110ms + 250ms), transform .8s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 110ms + 250ms)}
.outcome.m2-out{position:relative}
.outcome.m2-out::after{content:""; position:absolute; left:0; top:-1px; height:2px; width:calc(var(--p,0) * 100%); background:var(--orange)}
/* Rack focus: words sit soft, the focus pulls across them as you scroll */
.m2-out h2 .w{color:var(--ink-display); opacity:.5; filter:blur(.07em); transition:filter .55s cubic-bezier(.2,.8,.2,1), opacity .55s ease}
.m2-out h2 .w.near{opacity:.78; filter:blur(.03em)}
.m2-out h2 .w.on{opacity:1; filter:none}

@media (prefers-reduced-motion:reduce){
  .m2-inc .inc-item, .m2-inc .inc-item::before, .m2-inc .inc-item::after, .m2-chat.js .faq-row h3, .m2-chat.js .m2-bub p, .m2-bub, .m2-q, .m2-ans, .m2-typing, .m2-notif, .m2-cred > div, .m2-out h2 .w{transition:none !important}
  .m2-out h2 .w{filter:none; opacity:1}
  .m2-typing i{animation:none}
}

/* ---- The six as photo rows (services index) ----
   Each service sits on its own photograph behind a dark scrim. The row
   nearest the middle of the screen lights: photo brightens, an orange line
   draws across, the number turns orange. Hover lights a row on desktop. */
.svr{display:flex; flex-direction:column; gap:clamp(10px,1.2vw,16px); margin-top:clamp(24px,3vw,40px); border-top:0}
.svr .svc-index-row{position:relative; overflow:hidden; isolation:isolate; display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto auto auto; align-content:end; column-gap:clamp(12px,1.6vw,22px); row-gap:10px; min-height:clamp(230px,21vw,300px); padding:clamp(22px,2.8vw,38px) clamp(20px,2.8vw,40px); border:1px solid var(--rule); border-radius:16px; background:#07080B; text-decoration:none}
.svr .svc-index-row::before{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.62) 48%,rgba(0,0,0,.30) 100%),linear-gradient(0deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 70%); transition:opacity .6s ease}
.svr .svc-index-row::after{content:""; position:absolute; left:0; top:0; height:2px; width:100%; background:var(--orange); transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.svr-bg{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; filter:saturate(.5) brightness(.45); transform:scale(1.05); transition:filter .7s ease, transform 1.4s cubic-bezier(.2,.8,.2,1)}
.svr .svc-index-row .n{grid-column:1; grid-row:1; align-self:baseline; color:#B7B9C6; transition:color .4s ease}
.svr .svc-index-row h2{grid-column:2; grid-row:1; align-self:baseline; color:#E9EAF0; font-size:clamp(24px,3vw,40px)}
.svr .svc-index-row .arrow{grid-column:3; grid-row:1; align-self:center; color:#DCDDE4}
.svr .svc-index-row p{grid-column:2 / -1; grid-row:2; max-width:52ch; color:#C9CAD3; font-size:15px}
.svr-tags{grid-column:2 / -1; grid-row:3; display:flex; flex-wrap:wrap; gap:6px; margin-top:4px}
.svr-tags span{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#DCDDE4; background:rgba(0,0,0,.62); border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:6px 10px}
.svr .svc-index-row.lit .svr-bg{filter:saturate(1) brightness(.62); transform:scale(1)}
.svr .svc-index-row.lit::after{transform:scaleX(1)}
.svr .svc-index-row.lit .n{color:#FFFFFF}
.svr .svc-index-row.lit h2{color:#FFFFFF}
.svr .svc-index-row:hover h2{color:#FFFFFF}
.svr .svc-index-row:hover .arrow,.svr .svc-index-row.lit .arrow{color:var(--orange)}
@media (max-width:640px){
  .svr .svc-index-row{min-height:260px; border-radius:14px}
  .svr .svc-index-row::before{background:linear-gradient(0deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.74) 60%,rgba(0,0,0,.6) 100%)}
}
@media (prefers-reduced-motion:reduce){
  .svr .svc-index-row::before,.svr .svc-index-row::after,.svr-bg,.svr .svc-index-row .n{transition:none !important}
}

/* ---- Capabilities (services index) ---- */
.cap-key{font-size:15px; color:var(--muted); margin-top:14px; max-width:52ch}
.cap-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(22px,3vw,48px); margin-top:clamp(28px,3.6vw,52px)}
.cap-col h3{font-size:clamp(17px,1.6vw,21px); font-weight:500; letter-spacing:-.015em; color:var(--ink-display); padding-bottom:14px; margin:0 0 16px; border-bottom:1px solid var(--rule); position:relative}
.cap-col h3::after{content:""; position:absolute; left:0; bottom:-1px; width:56px; height:2px; background:var(--orange)}
.cap-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
.cap-col li{font-size:15px; line-height:1.4; color:#A9ABBB}
.cap-col a{color:var(--ink); text-decoration:none; display:inline-flex; align-items:center; gap:6px; border-bottom:1px solid transparent; transition:color .25s ease, border-color .25s ease}
.cap-col a .arrow{width:12px; height:12px; color:var(--orange); transition:transform .25s ease}
.cap-col a:hover{color:#FFFFFF; border-bottom-color:var(--orange)}
.cap-col a:hover .arrow{transform:translate(2px,-2px)}
.cap-col a:focus-visible{outline:2px solid var(--orange); outline-offset:3px}
@media (max-width:1000px){ .cap-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .cap-grid{grid-template-columns:1fr} }
@media (prefers-reduced-motion: reduce){.faq-row.t .m2-bub{animation:none}}