/* Monastic Media homepage, round 4 (lane home, 26 Sep). Loaded after v3-home.css. Brand palette only:
   teal #105B63 · yellow #FFD34E · gold #DB9E36 · rust #BD4932 · black #0D0D0D · slate #595959 · grey #F2F2F2. */

/* ---------- hero sound button: drawn from video.muted (aria-pressed), never from a click counter ---------- */
.hs-ph .snd{transition:background-color .2s ease,color .2s ease}
.hs-ph .snd svg{width:21px;height:21px}
.hs-ph .snd .s-on{display:none}
.hs-ph .snd[aria-pressed="true"]{background:var(--yellow);color:var(--black)}
.hs-ph .snd[aria-pressed="true"] .s-on{display:inline}
.hs-ph .snd[aria-pressed="true"] .s-off{display:none}
.hs-ph .snd:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
/* muted only because the browser is waiting for a first tap: a quiet ring, no words */
.hs-ph .snd.wait::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--yellow);pointer-events:none;animation:h4-ping 1.8s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes h4-ping{0%{transform:scale(.92);opacity:1}100%{transform:scale(1.28);opacity:0}}
@media (prefers-reduced-motion:reduce){.hs-ph .snd.wait::after{animation:none;opacity:.9}}

/* ---------- Naaptol testimonial between the brand marquees and the press row ---------- */
.h4-qw{margin-top:clamp(28px,3.4vw,40px)}
.h4-quote{position:relative;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:clamp(20px,3.4vw,44px);border:0;box-shadow:0 18px 40px -28px rgba(13,13,13,.35);overflow:hidden}
.h4-quote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--gold)}
.h4-quote img{width:100%;max-width:160px;height:auto;justify-self:center}
.h4-quote blockquote{font-size:clamp(21px,2.3vw,30px);line-height:1.28;color:var(--black)}
.h4-quote cite{color:var(--slate);font-size:15px}
@media (max-width:640px){.h4-quote{grid-template-columns:1fr;gap:16px;padding:24px 22px 24px 26px}.h4-quote img{justify-self:start;max-width:120px}.h4-quote blockquote{font-size:20px}}

/* ---------- services: Ads Video Creation card with its two sub-services ---------- */
.sv-ads{position:relative}
.sv-ads .sv-a{color:inherit;text-decoration:none;display:inline-block;padding:10px 0;margin:-10px 0}
.sv-ads .sv-a::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.sv-ads .sv-a:focus-visible{outline:none}
.sv-ads .sv-a:focus-visible::after{outline:3px solid var(--black);outline-offset:3px}
.sv-subs{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px;position:relative;z-index:2}
.sv-sub{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:#fff;color:var(--black);font:600 15px/1 var(--text);text-decoration:none;border:1px solid rgba(13,13,13,.1);transition:background-color .2s,color .2s}
.sv-sub .arr{width:16px;height:16px;flex:none}
.sv-sub:hover{background:var(--black);color:#fff}
.sv-sub:focus-visible{outline:3px solid var(--black);outline-offset:2px}

/* ---------- ads video wall foot: four actions ---------- */
@media (max-width:640px){.uw-foot{display:grid;grid-template-columns:1fr;gap:10px}.uw-foot .btn{width:100%;justify-content:center;text-align:center}}

/* review polish (r4b): the AV chip was yellow on the yellow Ads Video Creation card, so it vanished */
.sv.hy .ico.i-y{background:var(--black);color:var(--yellow)}