/* ============================================================
   MegaAI Solutions: inner pages
   Applies the landing page's design system to the service pages,
   the services index, about / book / contact / legal, and the
   hand-built blog. Builds on css/ms-site.css.
   ============================================================ */

/* ------------------------------------------------------------
   Shared: kill the leftovers of the old look
   ------------------------------------------------------------ */

#inner-wrap,#primary,#main,.content-container,.content-wrap,
.entry-content-wrap,.entry-content{
  background:transparent !important;
  max-width:none !important;
}
article.entry{
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}
.megaai h1::after,.megaai h2::after,.megaai h3::after,
.entry-content h1::after,.entry-content h2::after{
  content:none !important;
  display:none !important;
}
.megaai h1,.megaai h2,.megaai h3{animation:none !important;}

/* ------------------------------------------------------------
   Headings: the display face everywhere, with the word gaps the
   tight tracking would otherwise swallow
   ------------------------------------------------------------ */

.megaai h1,.entry-content h1,
.megaai-services-hub h1,
body > article.article-wrap h1,
body > section.blog-hero h1{
  font-family:var(--font-display) !important;
  font-weight:900 !important;
  line-height:.94 !important;
  letter-spacing:-.028em !important;
  word-spacing:.14em !important;
  text-transform:uppercase;
  color:var(--bone) !important;
  font-size:clamp(2.1rem,5.4vw,4.4rem) !important;
  margin:0 0 .5em !important;
  text-shadow:none !important;
}
.megaai h2,.entry-content h2,
.megaai-services-hub h2,.msh-card h2,
.article-wrap h2,.blog-wrap h2{
  font-family:var(--font-display) !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:-.028em !important;
  word-spacing:.12em !important;
  text-transform:uppercase;
  color:var(--bone) !important;
  font-size:clamp(1.55rem,3.2vw,2.5rem) !important;
}
.megaai h3,.entry-content h3,
.megaai-services-hub h3,.msh-card h3,
.article-wrap h3{
  font-family:var(--font-display) !important;
  font-weight:900 !important;
  letter-spacing:-.026em !important;
  word-spacing:.1em !important;
  text-transform:uppercase;
  color:var(--bone) !important;
  font-size:clamp(1.15rem,1.9vw,1.5rem) !important;
  line-height:1.08 !important;
}

.megaai p,.entry-content p,
.megaai-services-hub p,
.article-wrap p,.blog-wrap p{
  font-family:var(--font-body);
  color:var(--bone-dim);
  line-height:1.75;
}
/* Prose links only. Scoped to paragraphs and list items because the service
   pages nest their whole body inside .entry-content, so a bare descendant
   selector also repainted component links like the partner card button. */
.entry-content p > a:not(.btn):not(.ms-btn):not(.button),
.entry-content li > a:not(.btn):not(.ms-btn):not(.button),
.article-wrap p > a:not(.cta-btn),
.article-wrap li > a:not(.cta-btn){
  color:var(--accent-glow);
  text-decoration:none;
  border-bottom:1px solid rgba(226,59,255,.4);
  transition:border-color .3s var(--ease-out),color .3s var(--ease-out);
}
.entry-content p > a:not(.btn):not(.ms-btn):not(.button):hover,
.entry-content li > a:not(.btn):not(.ms-btn):not(.button):hover,
.article-wrap p > a:not(.cta-btn):hover,
.article-wrap li > a:not(.cta-btn):hover{color:#fff;border-bottom-color:#fff;}

/* ------------------------------------------------------------
   Service pages
   ------------------------------------------------------------ */

.megaai .container{
  width:100%;
  max-width:var(--maxw) !important;
  margin-inline:auto;
  padding-inline:var(--pad);
}
.megaai-section,.megaai-panel{
  position:relative;
  padding-block:clamp(3.5rem,9vh,6.5rem) !important;
  background:transparent !important;
}

/* The page opener gets the landing page's hero treatment: a violet glow
   behind it, generous space, and the display face at full size. */
.megaai-service-hero{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  min-height:min(78svh,760px);
  padding-block:clamp(5rem,13vh,9rem) !important;
  overflow:hidden;
  /* It used to be drawn as a bordered card, which read as a stray panel
     floating at the top of the page rather than as the page opening. */
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.megaai-service-hero::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  inset:-3%;
  z-index:0;
  background-image:var(--service-bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transform:scale(1.04);
  animation:ms-service-drift 16s cubic-bezier(.25,1,.5,1) infinite alternate;
  animation-play-state:paused;
  will-change:transform;
}
.megaai-service-hero.is-active::before{animation-play-state:running;}
.megaai-service-hero::after{
  content:"" !important;
  display:block !important;
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(5,3,12,.98) 0%,rgba(5,3,12,.88) 34%,rgba(5,3,12,.36) 65%,rgba(5,3,12,.06) 100%),
    linear-gradient(180deg,rgba(5,3,12,.36) 0%,transparent 30%,rgba(5,3,12,.58) 100%),
    radial-gradient(ellipse at 68% 46%,rgba(183,36,255,.15) 0%,transparent 58%);
  pointer-events:none;
  z-index:1;
}
.megaai-service-hero .container{position:relative;z-index:2;}
.megaai-service-hero h1{max-width:14ch;}
.megaai-service-hero .megaai-sub{
  max-width:52ch;
  text-shadow:0 2px 22px rgba(0,0,0,.92);
}
@keyframes ms-service-drift{
  from{transform:scale(1.04) translate3d(0,0,0);}
  to{transform:scale(1.10) translate3d(-1.2%,-.8%,0);}
}

.megaai-lead,.megaai-sub{
  font-family:var(--font-body);
  font-size:clamp(1rem,1.35vw,1.18rem) !important;
  line-height:1.7 !important;
  color:var(--bone-dim) !important;
  max-width:62ch;
}

.megaai-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:.9rem 2.2rem;
}
.megaai-list li{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  color:var(--bone-dim);
  padding-bottom:.9rem;
  border-bottom:1px solid var(--line);
}
/* A list item is a flex row, so any inline markup inside it would become its
   own column. Everything after the tick lives in one wrapper instead. */
.megaai-li{flex:1 1 auto;min-width:0;}
.megaai-li strong{color:var(--bone);font-weight:700;}

#video-localization .cblis-partner__logo{padding:16px 26px !important;}
#video-localization .cblis-partner__logo img{height:76px !important;}

.megaai-check{
  flex:none;
  width:24px;height:24px;
  border-radius:50%;
  display:grid;place-items:center;
  background:rgba(183,36,255,.12);
  box-shadow:inset 0 0 0 1px rgba(183,36,255,.4);
  color:var(--accent-glow);
  font-size:.75rem;line-height:1;
  margin-top:.15rem;
  transition:transform 220ms cubic-bezier(.22,1,.36,1),background-color 200ms ease,box-shadow 220ms cubic-bezier(.22,1,.36,1);
}

/* Lists arrive as a short sequence, making dense service detail easier to
   scan without turning the page into a motion demo. */
.megaai-list.ms-rv > li{
  opacity:0;
  transform:translate3d(0,14px,0);
  transition:opacity 520ms cubic-bezier(.22,1,.36,1),transform 520ms cubic-bezier(.22,1,.36,1);
  transition-delay:var(--ms-item-delay,0ms);
}
.megaai-list.ms-rv.ms-in > li{opacity:1;transform:none;}

@media (hover:hover) and (pointer:fine){
  .megaai-list li:hover .megaai-check{
    transform:scale(1.08) rotate(6deg);
    background:rgba(183,36,255,.22);
    box-shadow:inset 0 0 0 1px rgba(226,59,255,.66),0 0 22px -8px rgba(226,59,255,.8);
  }
}

/* The old pill buttons become the site button. */
.megaai-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.7em;
  padding:1.05em 2em !important;
  border-radius:100px !important;
  font-family:var(--font-body);
  font-size:clamp(.72rem,.9vw,.82rem) !important;
  font-weight:700 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
  background:transparent !important;
  color:var(--bone) !important;
  box-shadow:inset 0 0 0 1px var(--line-strong) !important;
  overflow:hidden;
  isolation:isolate;
  border:0 !important;
  text-decoration:none !important;
  transition:color .45s var(--ease-out),transform .45s var(--ease-out);
}
.megaai-btn::after{content:none !important;}
.megaai-btn::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:var(--accent);
  transform:translateY(101%);
  transition:transform .55s var(--ease-out);
  left:0 !important;
  width:100% !important;
  height:100% !important;
}
.megaai-btn:hover{color:#fff !important;transform:translateY(-2px);}
.megaai-btn:hover::before{transform:translateY(0);}
.megaai-btn.primary{
  background:var(--accent-deep) !important;
  color:#fff !important;
  box-shadow:0 14px 44px -12px rgba(183,36,255,.55) !important;
}
.megaai-btn.primary::before{background:var(--bone);}
.megaai-btn.primary:hover{color:var(--ink) !important;}
.megaai-cta{display:flex;flex-wrap:wrap;gap:.9rem;}

/* Centred running text at a 750px measure is hard to read; the block stays
   centred on the page but the lines set left at a sane width. */
.megaai-intro p,
.megaai-section > .container > p{
  text-align:left;
  max-width:68ch;
  margin-inline:auto;
}
.megaai-section > .container > h2,
.megaai-panel > .container > h2{margin-bottom:.6em;}

/* ------------------------------------------------------------
   Services index: the card grid
   ------------------------------------------------------------ */

.msh-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1rem;
  padding:clamp(1.5rem,2.4vw,2.1rem) !important;
  border-radius:20px !important;
  background:linear-gradient(165deg,rgba(38,22,62,.72) 0%,rgba(17,11,29,.86) 62%) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:0 !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),
             inset 0 1px 0 0 rgba(255,255,255,.10),
             0 30px 70px -34px rgba(0,0,0,.95) !important;
  text-decoration:none !important;
  overflow:hidden;
  isolation:isolate;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.msh-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:linear-gradient(155deg,rgba(12,7,22,.25),rgba(12,7,22,.94) 78%),var(--card-bg);
  background-size:cover;
  background-position:center;
  opacity:.24;
  transform:scale(1.03);
  transition:opacity 500ms ease,transform 650ms cubic-bezier(.22,1,.36,1);
}
.msh-card > *{position:relative;z-index:1;}
.msh-card[href="/ai-chatbots/"]{--card-bg:url('/img/services/chatbots.webp');}
.msh-card[href="/ai-receptionist/"]{--card-bg:url('/img/services/receptionist.webp');}
.msh-card[href="/automated-outreach/"]{--card-bg:url('/img/services/automated-outreach.webp');}
.msh-card[href="/ai-ads-marketing/"]{--card-bg:url('/img/services/ads-marketing.webp');}
.msh-card[href="/ai-website-creation/"]{--card-bg:url('/img/services/website-creation.webp');}
.msh-card[href="/ai-translation-voice/"]{--card-bg:url('/img/services/localization.webp');}
.msh-card[href="/ai-content-generation/"]{--card-bg:url('/img/services/content-generation.webp');}
.msh-card:hover{
  transform:translateY(-6px);
  box-shadow:inset 0 0 0 1px rgba(226,59,255,.5),
             0 40px 90px -34px rgba(0,0,0,.95),
             0 0 60px -18px rgba(183,36,255,.6) !important;
}
@media (hover:hover) and (pointer:fine){
  .msh-card:hover::before{opacity:.42;transform:scale(1.09);}
}
.msh-card h2,.msh-card h3{
  color:var(--bone) !important;
  font-size:clamp(1.15rem,1.6vw,1.42rem) !important;
  line-height:1.02 !important;
  margin:0 !important;
}
/* The icon is a bare <img> on this page, so the tile treatment goes on it. */
img.msh-icon{
  width:92px !important;height:92px !important;
  padding:15px;
  border-radius:18px !important;
  object-fit:contain;
  background:radial-gradient(circle at 30% 25%,rgba(183,36,255,.34),rgba(183,36,255,.10) 70%) !important;
  box-shadow:inset 0 0 0 1px rgba(226,59,255,.45),0 0 34px -10px rgba(183,36,255,.75);
  filter:brightness(1.45) saturate(1.2);
}
.msh-intro{text-align:center;}
.msh-intro h1{margin-bottom:.35em !important;}
.msh-intro p{max-width:66ch;margin-inline:auto;}
.megaai-services-hub{padding-block:clamp(5rem,13vh,8.5rem) clamp(3rem,8vh,5rem);}
.msh-icon{
  width:92px !important;height:92px !important;
  display:grid;place-items:center;
  border-radius:18px !important;
  background:radial-gradient(circle at 30% 25%,rgba(183,36,255,.34),rgba(183,36,255,.10) 70%) !important;
  box-shadow:inset 0 0 0 1px rgba(226,59,255,.45),0 0 34px -10px rgba(183,36,255,.75);
}
.msh-icon img{
  width:62px;height:62px;object-fit:contain;
  filter:brightness(1.3) saturate(1.15) drop-shadow(0 0 10px rgba(226,59,255,.55));
}
.msh-more{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-body);
  font-size:.68rem !important;
  font-weight:700 !important;
  letter-spacing:.2em !important;
  text-transform:uppercase;
  color:var(--accent-glow) !important;
  border-bottom:0 !important;
}

/* ------------------------------------------------------------
   Editorial pages: about, book, legal, privacy, contact
   ------------------------------------------------------------ */

body:not(.ms-overlap-header) .entry-content{
  width:100%;
  max-width:calc(var(--maxw) - 8rem) !important;
  margin-inline:auto !important;
  padding-inline:var(--pad) !important;
  padding-block:clamp(2.5rem,7vh,5rem) !important;
}
.entry-content > h1:first-of-type{margin-top:0 !important;}
.entry-content ul,.entry-content ol{color:var(--bone-dim);line-height:1.75;}
.entry-content li{margin-bottom:.5rem;}
.entry-content hr{border:0;height:1px;background:var(--line);margin-block:2.5rem;}
.entry-content img{border-radius:16px;}
.entry-content blockquote{
  margin:2rem 0;
  padding:1.2rem 1.6rem;
  border-left:2px solid var(--accent);
  background:rgba(183,36,255,.06);
  border-radius:0 14px 14px 0;
}

/* Kadence blocks (contact form, groups) sit on the new surface. */
.wp-block-group,.kb-row-layout-wrap{background:transparent !important;}
.entry-content input[type=text],
.entry-content input[type=email],
.entry-content input[type=tel],
.entry-content textarea,
.entry-content select{
  width:100%;
  background:rgba(255,255,255,.045) !important;
  color:var(--bone) !important;
  border:0 !important;
  box-shadow:inset 0 0 0 1px var(--line-strong) !important;
  border-radius:14px !important;
  padding:.95em 1.1em !important;
  font-family:var(--font-body) !important;
  transition:box-shadow .3s var(--ease-out);
}
.entry-content input:focus,
.entry-content textarea:focus{
  outline:none;
  box-shadow:inset 0 0 0 1px var(--accent) !important;
}
.entry-content ::placeholder{color:var(--bone-faint);}
.entry-content button:not(.ms-video-play),
.entry-content .button,
.entry-content input[type=submit]{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  padding:1.05em 2em !important;
  border-radius:100px !important;
  font-family:var(--font-body) !important;
  font-size:.8rem !important;
  font-weight:700 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
  background:var(--accent-deep) !important;
  color:#fff !important;
  border:0 !important;
  cursor:pointer;
  box-shadow:0 14px 44px -12px rgba(183,36,255,.55);
  transition:transform .4s var(--ease-out),filter .4s var(--ease-out);
}
.entry-content button:not(.ms-video-play):hover,
.entry-content .button:hover,
.entry-content input[type=submit]:hover{transform:translateY(-2px);filter:saturate(1.15);}

/* The Calendly embed needs a surface of its own or it floats. */
.calendly-inline-widget{
  border-radius:20px;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line),0 40px 90px -40px rgba(0,0,0,.9);
}


/* ------------------------------------------------------------
   The WP page title lives in its own header, outside .entry-content,
   so it needs the display treatment and the same measure as the body.
   ------------------------------------------------------------ */

.entry-header.page-title{
  width:100%;
  max-width:calc(var(--maxw) - 8rem);
  margin-inline:auto !important;
  padding-inline:var(--pad);
  padding-top:clamp(2.5rem,7vh,5rem);
  border:0 !important;
  background:transparent !important;
}
.entry-header.page-title .entry-title,
.entry-title{
  font-family:var(--font-display) !important;
  font-weight:900 !important;
  line-height:.94 !important;
  letter-spacing:-.028em !important;
  word-spacing:.14em !important;
  text-transform:uppercase;
  color:var(--bone) !important;
  font-size:clamp(2.1rem,5.4vw,4.4rem) !important;
  margin:0 !important;
  text-shadow:none !important;
}
.entry-header.page-title .entry-title::after{content:none !important;}
/* The title now carries the section eyebrow rule the rest of the site uses. */
.entry-header.page-title::before{
  content:"";
  display:block;
  width:clamp(28px,4vw,58px);
  height:1px;
  background:var(--accent);
  margin-bottom:clamp(1rem,2vw,1.5rem);
}
body:not(.ms-overlap-header) .entry-header.page-title + .entry-content-wrap .entry-content,
.entry-header.page-title ~ .entry-content-wrap .entry-content{padding-top:clamp(1.5rem,4vh,2.5rem) !important;}

/* One page ships its body inside a hardcoded dark card. Give it the same
   surface every other card on the site uses. */
.entry-content > div[style*="background"]{
  background:linear-gradient(165deg,rgba(38,22,62,.55) 0%,rgba(17,11,29,.75) 62%) !important;
  color:var(--bone) !important;
  border-radius:22px !important;
  padding:clamp(1.8rem,3.4vw,3rem) !important;
  box-shadow:inset 0 0 0 1px var(--line),0 40px 90px -44px rgba(0,0,0,.9);
  max-width:none !important;
}

/* Kadence's boxed content background. */
article.entry.content-bg,
.content-style-boxed .entry,
.entry-content-wrap{background:transparent !important;}

/* ------------------------------------------------------------
   Blog (hand-built pages: own header and footer markup)
   ------------------------------------------------------------ */

.blog-hero{
  position:relative;
  padding-block:clamp(6rem,14vh,9.5rem) clamp(2.5rem,6vh,4rem) !important;
  background:transparent !important;
  text-align:center;
}
.blog-hero::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:min(120vw,1200px);aspect-ratio:1.8;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center,rgba(183,36,255,.18) 0%,transparent 62%);
  pointer-events:none;
  z-index:-1;
}
.blog-hero .eyebrow{justify-content:center;}

.blog-wrap,.related-wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
  padding-bottom:clamp(3rem,8vh,6rem);
}
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(1rem,1.8vw,1.6rem);
}
.blog-card,.featured{
  border-radius:20px !important;
  overflow:hidden;
  background:linear-gradient(165deg,rgba(38,22,62,.72) 0%,rgba(17,11,29,.86) 62%) !important;
  border:0 !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),
             0 30px 70px -34px rgba(0,0,0,.95) !important;
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.blog-card:hover,.featured:hover{
  transform:translateY(-6px);
  box-shadow:inset 0 0 0 1px rgba(226,59,255,.5),
             0 40px 90px -34px rgba(0,0,0,.95),
             0 0 60px -18px rgba(183,36,255,.6) !important;
}
.card-thumb img,.f-img img{transition:transform 1.1s var(--ease-out);}
.blog-card:hover .card-thumb img,.featured:hover .f-img img{transform:scale(1.06);}
.card-tag,.f-badge,.article-tag{
  display:inline-block;
  font-family:var(--font-body);
  font-size:.62rem !important;
  font-weight:700;
  letter-spacing:.2em !important;
  text-transform:uppercase;
  color:var(--accent-glow) !important;
  background:rgba(183,36,255,.12) !important;
  box-shadow:inset 0 0 0 1px rgba(226,59,255,.34);
  border-radius:100px;
  padding:.45em 1em !important;
}
.card-meta,.f-meta,.article-meta,.breadcrumb{
  font-family:var(--font-body);
  font-size:.72rem !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--bone-faint) !important;
}
.card-link,.f-link{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-body);
  font-size:.68rem !important;
  font-weight:700 !important;
  letter-spacing:.2em !important;
  text-transform:uppercase;
  color:var(--accent-glow) !important;
  border-bottom:0 !important;
}

.article-wrap{
  width:100%;
  max-width:820px;
  margin-inline:auto;
  padding-inline:var(--pad);
  padding-block:clamp(6rem,14vh,9rem) clamp(3rem,8vh,5rem);
}
.article-wrap p,.article-wrap li{font-size:1.06rem;line-height:1.8;}
.article-hero{border-radius:20px;overflow:hidden;margin-block:2rem;}
.highlight-box,.good-fit{
  border-radius:18px;
  padding:1.4rem 1.6rem;
  background:rgba(183,36,255,.07) !important;
  box-shadow:inset 0 0 0 1px rgba(226,59,255,.28);
  border:0 !important;
}
.cta-box{
  position:relative;
  border-radius:22px;
  padding:clamp(1.8rem,4vw,2.8rem);
  text-align:center;
  background:linear-gradient(150deg,rgba(143,0,214,.30),rgba(17,11,29,.7)) !important;
  box-shadow:inset 0 0 0 1px rgba(226,59,255,.34);
  border:0 !important;
}
.cta-btn{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  padding:1.05em 2em !important;
  border-radius:100px !important;
  font-family:var(--font-body) !important;
  font-size:.8rem !important;
  font-weight:700 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase;
  background:var(--accent-deep) !important;
  color:#fff !important;
  text-decoration:none !important;
  border:0 !important;
  box-shadow:0 14px 44px -12px rgba(183,36,255,.55);
  transition:transform .4s var(--ease-out),filter .4s var(--ease-out);
}
.cta-btn:hover{transform:translateY(-2px);filter:saturate(1.15);}
.related-links{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;
}
.related-links a{
  display:block;
  padding:1.1rem 1.3rem;
  border-radius:16px;
  background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px var(--line);
  border-bottom:0 !important;
  color:var(--bone) !important;
  transition:box-shadow .4s var(--ease-out),transform .4s var(--ease-out);
}
.related-links a:hover{
  transform:translateY(-4px);
  box-shadow:inset 0 0 0 1px rgba(226,59,255,.5);
}

/* The blog pages carry their own header/footer markup; give them the same
   nav treatment the Kadence header gets. */
body > header.site-header .logo img{height:55px;width:auto;}
body > header.site-header nav a{
  position:relative;
  font-family:var(--font-body);
  font-weight:500;
  font-size:15px;
  letter-spacing:.4px;
  color:rgba(255,255,255,.8);
  text-decoration:none;
  padding:6px 2px;
  transition:color .3s var(--ease-out);
}
body > header.site-header nav a::after{
  content:"";
  position:absolute;
  left:0;bottom:-4px;
  width:100%;height:1px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .45s var(--ease-out);
}
body > header.site-header nav a:hover{color:#fff;}
body > header.site-header nav a:hover::after{transform:scaleX(1);transform-origin:left;}

@media (max-width:900px){
  .megaai-list{grid-template-columns:1fr;}
  .megaai-service-hero{
    min-height:min(74svh,680px);
    padding-block:clamp(4.5rem,11vh,7rem) !important;
    padding-inline:0 !important;
  }
  .megaai-service-hero h1{
    max-width:100%;
    word-break:normal;
    overflow-wrap:normal;
    hyphens:none;
  }
  .megaai-service-hero::before{background-position:66% center;}
  .megaai-service-hero::after{
    background:
      linear-gradient(90deg,rgba(5,3,12,.97) 0%,rgba(5,3,12,.84) 58%,rgba(5,3,12,.48) 100%),
      linear-gradient(180deg,rgba(5,3,12,.48) 0%,transparent 24%,rgba(5,3,12,.82) 100%);
  }
}

@media (prefers-reduced-motion:reduce){
  .megaai-service-hero::before{animation:none;transform:scale(1.04);will-change:auto;}
  .megaai-list.ms-rv > li{opacity:1;transform:none;transition:none;}
}

/* == ms-proof == */
/* ------------------------------------------------------------
   Proof blocks: the live demo, the portfolio, the sample video.
   Every service page gets one, high on the page, before the sell.
   ------------------------------------------------------------ */

.ms-proof{
  position:relative;
  margin:clamp(2.2rem,5vw,3.4rem) auto 0;
  padding:clamp(1.6rem,3.4vw,2.6rem);
  border-radius:26px;
  background:
    radial-gradient(120% 140% at 12% 0%,rgba(183,36,255,.20),transparent 62%),
    linear-gradient(180deg,var(--surface-2),var(--surface));
  box-shadow:inset 0 0 0 1px var(--line-strong),0 40px 90px -50px rgba(183,36,255,.7);
  overflow:hidden;
}
/* A slow sweep of light along the top edge, so the block reads as live. */
.ms-proof::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-glow),transparent);
  opacity:.85;
}
.ms-proof-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  margin:0 0 1rem;
  font-family:var(--font-body);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent-glow);
}
.ms-proof-eyebrow .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent-glow);
  box-shadow:0 0 0 0 rgba(226,59,255,.6);
  animation:ms-proof-pulse 2.4s var(--ease-io) infinite;
}
@keyframes ms-proof-pulse{
  0%{box-shadow:0 0 0 0 rgba(226,59,255,.55);}
  70%{box-shadow:0 0 0 12px rgba(226,59,255,0);}
  100%{box-shadow:0 0 0 0 rgba(226,59,255,0);}
}
.ms-proof h2,.ms-proof h3{
  margin:0 0 .5em !important;
  text-align:left !important;
  max-width:22ch;
}
.ms-proof > p{
  margin:0 0 1.5rem !important;
  max-width:62ch;
  text-align:left !important;
  color:var(--bone-dim);
}
.ms-proof .megaai-cta{gap:.8rem;}
.ms-proof-note{
  margin:1.2rem 0 0 !important;
  font-size:.86rem !important;
  color:var(--bone-faint);
  max-width:60ch;
}

/* Two demo buttons that must not read as one primary and one afterthought. */
.ms-proof-langs{display:flex;flex-wrap:wrap;gap:.8rem;}
.ms-proof-langs .megaai-btn .flag{
  display:inline-grid;
  place-items:center;
  min-width:2.1em;
  padding:.25em .45em;
  border-radius:5px;
  background:rgba(255,255,255,.16);
  font-size:.86em;
  font-weight:800;
  letter-spacing:.08em;
  line-height:1;
}

/* ---- portfolio grid ---- */
.ms-work{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.1rem;
  margin-top:1.6rem;
}
.ms-work-card{
  position:relative;
  display:block;
  border-radius:18px;
  overflow:hidden;
  text-decoration:none !important;
  background:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
}
.ms-work-card:hover{
  transform:translateY(-6px);
  box-shadow:inset 0 0 0 1px var(--line-strong),0 30px 60px -30px rgba(183,36,255,.6);
}
.ms-work-shot{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  transition:transform .8s var(--ease-out);
}
.ms-work-card:hover .ms-work-shot{transform:scale(1.05);}
.ms-work-body{
  position:relative;
  padding:1rem 1.15rem 1.15rem;
  background:linear-gradient(180deg,rgba(5,3,12,.4),var(--ink-2));
}
.ms-work-body h3{
  margin:0 0 .3em !important;
  font-family:var(--font-display);
  font-size:1.05rem !important;
  font-weight:800;
  letter-spacing:-.01em;
  color:var(--bone) !important;
  text-align:left !important;
}
.ms-work-body h3::after{content:none !important;}
.ms-work-body p{
  margin:0 !important;
  font-size:.83rem !important;
  line-height:1.5;
  color:var(--bone-faint) !important;
  text-align:left !important;
}
.ms-work-go{
  display:inline-flex;
  align-items:center;
  gap:.4em;
  margin-top:.75rem;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-glow);
}
.ms-work-card:hover .ms-work-go{color:var(--bone);}

/* ---- sample video ---- */
.ms-video{
  position:relative;
  margin-top:1.6rem;
  border-radius:18px;
  overflow:hidden;
  background:#000;
  box-shadow:inset 0 0 0 1px var(--line-strong);
}
/* The radius goes on the video itself too: a rounded parent with overflow
   hidden does not clip a replaced element cleanly in every browser. */
.ms-video video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:18px;
  background:#000;
}
/* The play affordance is a real button so keyboard users get it too. */
.ms-video-play{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.9rem;
  border:0;
  cursor:pointer;
  color:var(--bone);
  border-radius:18px;
  background:linear-gradient(0deg,rgba(5,3,12,.86) 0%,rgba(5,3,12,.42) 55%,rgba(5,3,12,.62) 100%);
  transition:background .4s var(--ease-out);
}
.ms-video-play:hover{background:linear-gradient(0deg,rgba(5,3,12,.8) 0%,rgba(5,3,12,.3) 55%,rgba(5,3,12,.55) 100%);}
.ms-video.is-playing .ms-video-play{display:none;}
.ms-video-ring{
  display:grid;
  place-items:center;
  width:76px;height:76px;
  border-radius:50%;
  background:var(--accent-deep);
  box-shadow:0 18px 50px -14px rgba(183,36,255,.9);
  transition:transform .45s var(--ease-out);
}
.ms-video-play:hover .ms-video-ring{transform:scale(1.08);}
.ms-video-label{
  text-shadow:0 2px 14px rgba(5,3,12,.9);
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.ms-video-label small{
  display:block;
  margin-top:.35em;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.08em;
  text-transform:none;
  color:var(--bone-faint);
}

@media (max-width:620px){
  .ms-proof{padding:1.35rem;border-radius:20px;}
  .ms-proof-langs .megaai-btn{width:100%;justify-content:center;}
  .ms-video-ring{width:60px;height:60px;}
}
@media (prefers-reduced-motion:reduce){
  .ms-proof-eyebrow .dot{animation:none;}
  .ms-work-card,.ms-work-shot{transition:none;}
}