/* gold.css v8: ~10% gold. Everything else stays your original black + ivory manga look.
   Gold is used ONLY for: veins inside cards, faded kanji, heading underline bar,
   one highlighted word, scroll progress bar, current timeline step, small marquee separators.
   Delete this file + the <link> lines in each page to undo. */
html.mg{--gold:#d4af37;--gold-hi:#f0d27a;--gold-lo:#8a6a1c;
  --gold-grad:linear-gradient(135deg,#9a7620,#e6c35c 40%,#b8892b 70%,#f0d27a)}
.mg ::selection{background:var(--gold);color:#000}
.mg #mprog{background:var(--gold-grad)}

/* kanji behind sections: faded gold */
.mg [data-sfx]::before{color:rgba(212,175,55,.28);-webkit-text-stroke:0}

/* cards: solid black, original ivory border + grey shadow untouched, gold veins inside */
.mg .svc,.mg .offer,.mg .work,.mg .cta,.mg .tl,.mg .slide-tl,.mg .cmp,.mg .x-sc,.mg .x-stage,.mg .fact,.mg .promise,
.mg .stats-in,.mg .x-gl,.mg .reel .work.more,.mg details,.mg #faq details{
  background:#050505!important;background-image:none!important}
/* NOTE: .x-sc is position:sticky (stacking cards) - never override its position or overflow */
.mg .svc,.mg .offer,.mg .work,.mg .cta,.mg .cmp,.mg .x-stage,.mg .fact,.mg .promise{position:relative;isolation:isolate;overflow:hidden}
.mg .x-sc{isolation:isolate}
.mg .svc::before,.mg .offer::before,.mg .work::before,.mg .cta::before,.mg .cmp::before,.mg .x-sc::before,
.mg .x-stage::before,.mg .fact::before,.mg .promise::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("assets/veins2-card.svg") center/cover no-repeat;opacity:.75}
.mg .svc:nth-child(even)::before,.mg .offer:nth-child(even)::before,.mg .work:nth-child(even)::before{
  background-image:url("assets/veins2-card-b.svg")}
.mg .cta::before{background-image:url("assets/veins2-wide.svg")}

/* one highlighted word + small underline bar under headings */
.mg h1 em,.mg h2 em,.mg .x-bl em{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;text-shadow:none}
.mg section>h2::after{background:var(--gold)}

/* buttons: left exactly as the original manga look (no gold) */
.mg .marq i::after{color:var(--gold)}

/* timeline: only the current step is gold */
#process .steps li.cur::before{background:var(--gold);border-color:var(--gold);color:#140f02;animation-name:stPulseGold}
@keyframes stPulseGold{0%{box-shadow:0 0 0 0 rgba(212,175,55,.5)}80%,100%{box-shadow:0 0 0 12px rgba(212,175,55,0)}}

/* ===== v9 GLASS + ROUND =====================================================
   Translucent frosted cards (background blur) and smooth rounded shapes instead of sharp squares.
   Gold stays only on veins + small accents. Delete this block to go back to the square manga look. */
html.mg{--r-lg:26px;--r-md:18px;--r-sm:12px;
  --glass-bg:linear-gradient(155deg,rgba(255,255,255,.13),rgba(255,255,255,.04) 45%,rgba(255,255,255,.07));
  --glass-bd:rgba(255,255,255,.22)}

/* ONLY cards/frames get glass + round. Buttons, pills, header, menu stay in the original manga style. */
/* cards, frames, steps, FAQ: see-through + blur + round */
html.mg .svc,html.mg .offer,html.mg .work,html.mg .cta,html.mg .tl,html.mg .slide-tl,html.mg .cmp,html.mg .x-sc,
html.mg .x-stage,html.mg .fact,html.mg .promise,html.mg .stats-in,html.mg .x-gl,html.mg .reel .work.more,
html.mg .steps li,html.mg details,html.mg #faq details,html.mg .lb-box{
  background:var(--glass-bg)!important;background-image:var(--glass-bg)!important;
  -webkit-backdrop-filter:blur(16px) saturate(140%)!important;backdrop-filter:blur(16px) saturate(140%)!important;
  border:1px solid var(--glass-bd)!important;border-radius:var(--r-lg)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 22px 44px -20px rgba(0,0,0,.9)!important}
html.mg .steps li,html.mg details,html.mg #faq details{border-radius:var(--r-md)!important}
html.mg .svc.pop,html.mg .offer.pop,html.mg .work.pop,html.mg .cta.pop,html.mg .x-sc.pop,html.mg .svc:hover,
html.mg .offer:hover,html.mg .work:hover,html.mg .cta:hover,html.mg .x-sc:hover,html.mg .vfeed .work.live{
  border-color:rgba(255,255,255,.45)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 28px 50px -18px rgba(0,0,0,.9),0 0 30px -10px rgba(212,175,55,.25)!important}
html.mg .stats-in{border-radius:var(--r-lg)!important}
html.mg .x-gl{background:rgba(255,255,255,.07)!important}

/* video frames, thumbnails, players, strips: soft rounded corners */
html.mg .thumb,html.mg .film img,html.mg .pl-box,html.mg .pl-screen,html.mg .hreel,html.mg .vfeed .work,
html.mg .lb-box video,html.mg .work video,html.mg .work img{border-radius:var(--r-md)}
html.mg .work .thumb{border-radius:var(--r-md) var(--r-md) var(--r-sm) var(--r-sm)}
html.mg .pl-box>*:not(.pl-screen):not(.pl-c){border-radius:var(--r-md)!important}
html.mg .pl-screen{overflow:hidden}

/* keep blur cheap on phones: smaller radius of blur, no blur on huge sticky stack cards */
@media (max-width:640px){
  html.mg .svc,html.mg .offer,html.mg .work,html.mg .cta,html.mg .cmp,html.mg .x-stage,html.mg .fact,html.mg .promise,
  html.mg .steps li,html.mg details{-webkit-backdrop-filter:blur(10px)!important;backdrop-filter:blur(10px)!important;
    box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 14px 28px -16px rgba(0,0,0,.9)!important}
  html.mg{--r-lg:22px;--r-md:16px}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html.mg .svc,html.mg .offer,html.mg .work,html.mg .cta,html.mg .tl,html.mg .cmp,html.mg .x-sc,html.mg .x-stage,html.mg details{
    background:linear-gradient(165deg,rgba(40,40,44,.92),rgba(14,14,16,.95))!important}}

/* hero player: glass frame, round corners (beats the inline square rules in index.html) */
html.mg .pl-box{background:var(--glass-bg)!important;border:1px solid var(--glass-bd)!important;border-radius:var(--r-lg)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 22px 44px -20px rgba(0,0,0,.9)!important;
  -webkit-backdrop-filter:blur(16px)!important;backdrop-filter:blur(16px)!important;overflow:hidden}
html.mg .pl-screen{border-radius:var(--r-md)!important;border:1px solid var(--glass-bd)!important;overflow:hidden}
html.mg .pl-box>*:not(.pl-screen):not(.pl-c){border-radius:var(--r-md)!important}

/* v11: every video holder = smooth rounded glass box (hero reel, player, timeline, thumbnails strip, film strip, lightbox) */
html.mg{--r-vid:28px}
html.mg .hreel,html.mg .pl-box{border-radius:var(--r-vid)!important}
html.mg .pl-screen,html.mg .pl-screen video,html.mg .pl-screen img,html.mg .pl-screen::after{border-radius:calc(var(--r-vid) - 8px)!important}
html.mg .pl-screen{overflow:hidden;-webkit-mask-image:-webkit-radial-gradient(#fff,#000);transform:translateZ(0)}
html.mg .pl-tl{border-radius:calc(var(--r-vid) - 8px)!important;border:1px solid var(--glass-bd)!important;background:rgba(255,255,255,.05)!important}
html.mg #thumbs .tcard,html.mg .tcard{border-radius:24px!important;border:1px solid var(--glass-bd)!important;overflow:hidden;
  -webkit-mask-image:-webkit-radial-gradient(#fff,#000);box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 18px 36px -18px rgba(0,0,0,.9)!important}
html.mg .tcard img,html.mg .tcard video{border-radius:inherit}
html.mg .film img{border-radius:18px!important}
html.mg .work .thumb,html.mg .vcard .thumb,html.mg .vfeed .thumb{border-radius:22px!important;overflow:hidden;
  -webkit-mask-image:-webkit-radial-gradient(#fff,#000)}
html.mg .thumb video,html.mg .thumb img,html.mg .work video{border-radius:inherit}
html.mg .lb-box,html.mg .lb-box video{border-radius:var(--r-vid)!important;overflow:hidden}
html.mg video{border-radius:inherit}

/* v13: the Work page video holders (Gaming / Documentary / Reels / Podcast rows) + full-screen player */
html.mg .vs-c{border-radius:var(--r-vid)!important;border:1px solid var(--glass-bd)!important;overflow:hidden;
  -webkit-mask-image:-webkit-radial-gradient(#fff,#000);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 18px 36px -16px rgba(0,0,0,.9)!important}
html.mg .vs-c:active{box-shadow:0 8px 18px -10px rgba(0,0,0,.9)!important}
html.mg .vs-c video{border-radius:inherit}
html.mg #vr-lb video{border-radius:var(--r-vid)!important;border:1px solid var(--glass-bd)!important;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.95)!important}