/*
Theme Name: Moni Digital Media
Theme URI: https://monidigitalmedia.com
Author: ASC Fashion Store Pvt Ltd
Description: Custom theme for Moni Digital Media: websites, Meta and Google ads, reels and Instagram management. Contact details are set in Appearance > Customize > Moni contact details.
Version: 1.0.4
Requires at least: 6.0
Requires PHP: 7.4
License: Proprietary
Text Domain: moni
*/
/* Layout: sticky header, then full-width bands alternating paper / surface / navy; content in a 1160px column with a 2-column hero that stacks on phones. */
:root{
  --paper:#F7F6F2; --surface:#FFFFFF; --ink:#14163A; --muted:#55566B;
  --violet:#5B3DF5; --orange:#FF6A2C; --on-orange:#14163A;
  --line:#E2E0EA; --chip:#EEEBFF; --chip-ink:#3A23B8;
  --band:#14163A; --band-ink:#F4F3FB; --band-muted:#C3C1E6; --band-line:#2C2F66;
  --focus:#5B3DF5;
  --font-display:'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-body:'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0E1030; --surface:#171A45; --ink:#F2F1FA; --muted:#AEB0CC;
    --violet:#A797FF; --orange:#FF7A40; --line:#2A2E63; --chip:#262A66; --chip-ink:#D9D3FF;
    --band:#1B1F57; --band-ink:#F4F3FB; --band-muted:#C3C1E6; --band-line:#353A7A;
    --focus:#A797FF; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0E1030; --surface:#171A45; --ink:#F2F1FA; --muted:#AEB0CC;
  --violet:#A797FF; --orange:#FF7A40; --line:#2A2E63; --chip:#262A66; --chip-ink:#D9D3FF;
  --band:#1B1F57; --band-ink:#F4F3FB; --band-muted:#C3C1E6; --band-line:#353A7A;
  --focus:#A797FF; color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important; animation:none!important} }
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--surface)}
img,svg{max-width:100%}
a{color:var(--violet)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:6px}
h1,h2,h3{font-family:var(--font-display); line-height:1.12; letter-spacing:-0.02em; text-wrap:balance; margin:0}
h2{font-size:clamp(1.8rem, 3.6vw, 2.7rem); font-weight:800}
h3{font-size:1.18rem; font-weight:700}
p{margin:0}
.wrap{max-width:1160px; margin-inline:auto; padding-left:max(20px, env(safe-area-inset-left,0px)); padding-right:max(20px, env(safe-area-inset-right,0px))}
.section{padding-block:clamp(64px, 9vw, 112px)}
.section--surface{background:var(--surface)}
.section--band{background:var(--band); color:var(--band-ink)}
.eyebrow{font-family:var(--font-mono); font-size:0.8rem; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--violet)}
.section--band .eyebrow{color:#FFB08C}
.lead{font-size:1.12rem; color:var(--muted); max-width:62ch}
.section--band .lead{color:var(--band-muted)}
.section-head{display:flex; flex-direction:column; gap:14px; margin-bottom:48px; max-width:760px}

.skip-link{position:absolute; left:-9999px; top:8px; z-index:100; background:var(--surface); color:var(--ink); padding:10px 14px; border-radius:8px}
.skip-link:focus{left:16px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 22px; border-radius:999px; font-family:var(--font-display); font-weight:700; font-size:0.98rem; text-decoration:none; border:2px solid transparent; cursor:pointer; transition:transform .15s ease, background-color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--orange); color:var(--on-orange)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.section--band .btn--ghost{color:var(--band-ink); border-color:var(--band-ink)}
.btn-row{display:flex; flex-wrap:wrap; gap:12px}

/* Header */
.site-header{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:var(--surface); border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:72px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand svg{flex:0 0 auto}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-word{font-family:var(--font-display); font-weight:800; font-size:1.55rem; letter-spacing:-0.03em}
.brand-word sup{font-size:0.45em; font-weight:600; margin-left:2px; vertical-align:top; position:relative; top:0.1em}
.brand-sub{font-family:var(--font-display); font-weight:600; font-size:0.56rem; letter-spacing:0.34em; color:var(--violet); margin-top:4px}
.nav{display:flex; align-items:center; gap:28px}
.nav a{color:var(--ink); text-decoration:none; font-weight:600; font-size:0.96rem}
.nav a:hover{color:var(--violet)}
.nav .btn{color:var(--on-orange)}
.nav-toggle{display:none; background:none; border:2px solid var(--line); color:var(--ink); border-radius:10px; width:48px; height:48px; cursor:pointer}
@media (max-width: 900px){
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}
  .nav{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:4px; background:var(--surface); border-bottom:1px solid var(--line); padding:12px max(20px, env(safe-area-inset-right,0px)) 20px max(20px, env(safe-area-inset-left,0px))}
  .nav.is-open{display:flex}
  .nav a{padding:12px 4px}
}

/* Hero */
.hero{padding-block:clamp(48px, 7vw, 96px) clamp(56px, 8vw, 104px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr); gap:56px; align-items:center}
.hero-copy{display:flex; flex-direction:column; gap:22px; min-width:0}
.hero h1{font-size:clamp(2.5rem, 6.2vw, 4.7rem); font-weight:800; letter-spacing:-0.035em}
.hero h1 .hl{color:var(--violet); position:relative; white-space:nowrap}
.hero h1 .hl::after{content:""; position:absolute; right:-0.06em; top:0.02em; width:0.5em; height:0.14em; border-radius:999px; background:var(--orange)}
.trust{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.trust span{font-size:0.86rem; font-weight:600; padding:6px 12px; border-radius:999px; background:var(--chip); color:var(--chip-ink)}
@media (max-width: 900px){ .hero-grid{grid-template-columns:minmax(0,1fr); gap:40px} }

/* Tracking chain card */
.chain{background:var(--band); color:var(--band-ink); border-radius:22px; padding:28px; display:flex; flex-direction:column; gap:18px; min-width:0}
.chain-title{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.chain-title strong{font-family:var(--font-display); font-size:1.12rem}
.chain-title span{font-family:var(--font-mono); font-size:0.75rem; color:var(--band-muted); letter-spacing:0.08em; text-transform:uppercase}
.chain ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0}
.chain li{display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:14px; align-items:center; padding-block:12px; position:relative}
.chain li + li{border-top:1px dashed var(--band-line)}
.dot{width:28px; height:28px; border-radius:50%; border:2px solid #FFB08C; display:grid; place-items:center; font-family:var(--font-mono); font-size:0.75rem; color:#FFB08C}
.chain li:last-child .dot{background:var(--orange); border-color:var(--orange); color:#14163A}
.chain .step-text{font-size:0.98rem}
.event{font-family:var(--font-mono); font-size:0.78rem; padding:4px 9px; border-radius:6px; background:rgba(255,255,255,0.1); color:var(--band-ink); white-space:nowrap}
.chain-foot{font-size:0.9rem; color:var(--band-muted); border-top:1px solid var(--band-line); padding-top:16px}

/* Problem */
.problem{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:start}
.problem ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.problem li{display:flex; gap:12px; align-items:flex-start; color:var(--muted)}
.problem li svg{flex:0 0 22px; margin-top:3px; color:var(--orange)}
@media (max-width: 800px){ .problem{grid-template-columns:minmax(0,1fr); gap:28px} }

/* Services */
.services{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px}
.service{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:flex; flex-direction:column; gap:14px; min-width:0}
.section--surface .service{background:var(--paper)}
.service-icon{width:48px; height:48px; border-radius:12px; background:var(--band); color:#FFFFFF; display:grid; place-items:center}
.service p{color:var(--muted)}
.service ul{margin:0; padding-left:18px; color:var(--ink); font-size:0.95rem; display:flex; flex-direction:column; gap:4px}
.service a{margin-top:auto; font-weight:700; text-decoration:none; font-family:var(--font-display); font-size:0.95rem}
.service a:hover{text-decoration:underline}
@media (max-width: 980px){ .services{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 640px){ .services{grid-template-columns:minmax(0,1fr)} }

/* Process */
.steps{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; list-style:none; margin:0; padding:0; counter-reset:step}
.steps li{display:flex; flex-direction:column; gap:10px; padding-top:20px; border-top:3px solid var(--ink); counter-increment:step}
.steps li::before{content:"Step " counter(step); font-family:var(--font-mono); font-size:0.8rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--violet)}
.steps p{color:var(--muted)}
@media (max-width: 900px){ .steps{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 560px){ .steps{grid-template-columns:minmax(0,1fr)} }

/* Why */
.why{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px 40px}
.why div{display:flex; flex-direction:column; gap:8px; padding-block:20px; border-bottom:1px solid var(--line)}
.why p{color:var(--muted)}
@media (max-width: 700px){ .why{grid-template-columns:minmax(0,1fr)} }

/* Own brand band */
.proof{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,0.9fr); gap:56px; align-items:center}
.proof-copy{display:flex; flex-direction:column; gap:18px; min-width:0}
.facts{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px}
.fact{border:1px solid var(--band-line); border-radius:var(--radius); padding:20px; display:flex; flex-direction:column; gap:6px}
.fact strong{font-family:var(--font-display); font-size:1.5rem; font-weight:800}
.fact span{color:var(--band-muted); font-size:0.92rem}
.channels{display:flex; flex-wrap:wrap; gap:8px}
.channels span{font-size:0.85rem; font-weight:600; padding:6px 12px; border-radius:999px; border:1px solid var(--band-line); color:var(--band-ink)}
@media (max-width: 900px){ .proof{grid-template-columns:minmax(0,1fr); gap:32px} }

/* Clients */
.clients{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px}
.client{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; display:flex; gap:20px; align-items:flex-start; min-width:0}
.client-mark{flex:0 0 64px; height:64px; border-radius:16px; background:var(--band); color:#FFFFFF; display:grid; place-items:center; font-family:var(--font-display); font-weight:800; font-size:1.05rem; letter-spacing:0.04em}
.client-body{display:flex; flex-direction:column; gap:8px; min-width:0}
.client-meta{font-size:0.9rem; font-weight:600; color:var(--violet)}
.client-body p:last-child{color:var(--muted)}
@media (max-width: 700px){ .clients{grid-template-columns:minmax(0,1fr)} }
.section--surface .client{background:var(--paper)}

/* Industries */
.chips{display:flex; flex-wrap:wrap; gap:10px}
.chips span{padding:10px 16px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-weight:600}

/* Packages */
.pkg-groups{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; align-items:start}
.pkg-group{display:flex; flex-direction:column; gap:12px; min-width:0}
.pkg-group > h3{font-size:0.82rem; font-family:var(--font-mono); font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--violet); padding-bottom:6px}
.pkg{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:22px; display:flex; flex-direction:column; gap:8px}
.pkg h4{margin:0; font-family:var(--font-display); font-size:1.08rem}
.pkg .for{font-size:0.88rem; color:var(--violet); font-weight:600}
.pkg p{color:var(--muted); font-size:0.95rem}
.pkg a{margin-top:6px; font-weight:700; font-family:var(--font-display); font-size:0.92rem; text-decoration:none}
.pkg a:hover{text-decoration:underline}
.combo{margin-top:24px; background:var(--band); color:var(--band-ink); border-radius:18px; padding:28px; display:flex; flex-wrap:wrap; gap:20px; justify-content:space-between; align-items:center}
.combo div{display:flex; flex-direction:column; gap:6px; max-width:62ch}
.combo p{color:var(--band-muted)}
.note{margin-top:18px; font-size:0.92rem; color:var(--muted)}
@media (max-width: 980px){ .pkg-groups{grid-template-columns:minmax(0,1fr)} }

/* FAQ */
.faq{display:flex; flex-direction:column; gap:12px; max-width:860px}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:4px 22px}
.faq summary{cursor:pointer; list-style:none; font-family:var(--font-display); font-weight:700; padding-block:16px; display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--violet); font-size:1.4rem; line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--muted); padding-bottom:18px}

/* Contact */
.contact{display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:56px; align-items:start}
.contact-copy{display:flex; flex-direction:column; gap:18px}
.contact-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.contact-list li{display:flex; flex-direction:column}
.contact-list span{font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--band-muted)}
.contact-list strong{font-size:1.08rem; user-select:all}
.form{background:var(--surface); color:var(--ink); border-radius:20px; padding:28px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field--full{grid-column:1 / -1}
.field label{font-weight:600; font-size:0.92rem}
.field input,.field select,.field textarea{font:inherit; font-size:1rem; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:10px; padding:12px 14px; min-height:48px; width:100%}
.field textarea{min-height:96px; resize:vertical}
.form .btn{grid-column:1 / -1}
.form-note{grid-column:1 / -1; font-size:0.85rem; color:var(--muted)}
.form-done{grid-column:1 / -1; background:var(--chip); color:var(--chip-ink); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:12px}
.form-done pre{margin:0; white-space:pre-wrap; font-family:var(--font-mono); font-size:0.82rem; color:var(--ink); background:var(--surface); border-radius:8px; padding:12px; overflow-x:auto}
@media (max-width: 900px){ .contact{grid-template-columns:minmax(0,1fr); gap:32px} }
@media (max-width: 560px){ .form{grid-template-columns:minmax(0,1fr); padding:20px} }

/* Footer */
.site-footer{background:var(--surface); border-top:1px solid var(--line); padding-block:48px 32px}
.foot{display:grid; grid-template-columns:minmax(0,1.4fr) repeat(2, minmax(0,1fr)); gap:32px}
.foot h3{font-size:0.8rem; font-family:var(--font-mono); font-weight:500; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:12px}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.foot a{color:var(--ink); text-decoration:none}
.foot a:hover{color:var(--violet)}
.foot p{color:var(--muted); font-size:0.95rem}
.legal{margin-top:36px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:0.86rem; color:var(--muted)}
@media (max-width: 760px){ .foot{grid-template-columns:minmax(0,1fr)} }

/* Floating WhatsApp */
.wa-float{position:fixed; right:calc(20px + env(safe-area-inset-right,0px)); bottom:calc(20px + env(safe-area-inset-bottom,0px)); z-index:40; display:inline-flex; align-items:center; gap:8px; background:#1F8F4E; color:#FFFFFF; padding:12px 18px; border-radius:999px; font-weight:700; font-family:var(--font-display); text-decoration:none; box-shadow:0 6px 20px rgba(20,22,58,0.25)}

/* Inner WordPress pages */
.page-body{padding-block:56px 80px}
.entry{max-width:760px}
.entry h1{font-size:clamp(2rem, 4.6vw, 3rem); font-weight:800; margin-bottom:24px}
.entry > * + *{margin-top:1em}
.entry h2{font-size:1.6rem; margin-top:1.6em}
.entry p,.entry li{color:var(--ink)}

/* WordPress admin bar offset for the sticky header */
.admin-bar .site-header{top:32px}
@media (max-width: 782px){ .admin-bar .site-header{top:46px} }
@media (max-width: 600px){ .admin-bar .site-header{top:0} }
.entry img{height:auto}
.alignwide,.alignfull{max-width:100%}

/* VFX section on the navy band */
.section--band .why div{border-bottom-color:var(--band-line)}
.section--band .why p{color:var(--band-muted)}
.vfx-list{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width: 900px){ .vfx-list{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 560px){ .vfx-list{grid-template-columns:minmax(0,1fr)} }