/* ============================================================
   MOYA marketing / light theme.
   The --ml-* custom properties live at :root (not scoped to
   .theme-light) so that the marketing header/footer chrome can be
   reused on pages that keep the dark Estimator body (page_nav
   'marketing'/'marketing-app' without page_theme 'light') - e.g.
   estimate.php, which wraps the dark estimator in the site's
   normal light header/footer. Full page backgrounds/typography
   below (.ml-*, body.theme-light) still only apply when
   body.theme-light is present, so the dark Estimator/admin pages
   are unaffected either way.
   ============================================================ */

:root{
  --ml-bg:#FFFFFF;
  --ml-surface:#F7F6F4;
  --ml-ink:#23262B;
  --ml-muted:#5B5F66;
  --ml-border:#E7E5E1;
  --ml-green:#7FB88A;
  --ml-blue:#8FB3D9;
  --ml-pink:#D98FA8;
  --ml-gold:#D7A66F;
}

.theme-light{
  background:var(--ml-bg);
  color:var(--ml-ink);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.theme-light .moya-wrap-light{
  padding:0;
  max-width:none;
  margin:0;
  display:flex;
  flex-direction:column;
  flex:1 0 auto;
}


/* Keep the fixed header aligned on short and long pages alike. */
html{overflow-y:scroll;scrollbar-gutter:stable}

/* ---------- marketing header ---------- */
.moya-marketing-header{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:20px clamp(20px,5vw,64px);
  border-bottom:1px solid var(--ml-border);
  background:var(--ml-bg);
  position:sticky;top:0;z-index:20;
}
.moya-marketing-logo{display:inline-flex;align-items:center;line-height:0;flex:0 0 106px;width:106px;height:26px}
.moya-marketing-logo img{display:block;width:106px;height:26px;object-fit:contain}
.moya-marketing-right{display:flex;align-items:center;gap:24px}
.moya-marketing-nav{display:flex;gap:28px;align-items:center}
.moya-marketing-nav a{
  color:var(--ml-ink);text-decoration:none;font-size:14px;font-weight:600;letter-spacing:.01em;
  padding:6px 2px;border-bottom:2px solid transparent;
}
/* Each top-nav item gets its own accent colour on hover/active, matching
   the order of the M/O/Y/A dots in the logo (green, blue, pink, gold). */
.moya-marketing-nav a[data-accent="green"]:hover,.moya-marketing-nav a[data-accent="green"].active{border-bottom-color:var(--ml-green)}
.moya-marketing-nav a[data-accent="blue"]:hover,.moya-marketing-nav a[data-accent="blue"].active{border-bottom-color:var(--ml-blue)}
.moya-marketing-nav a[data-accent="pink"]:hover,.moya-marketing-nav a[data-accent="pink"].active{border-bottom-color:var(--ml-pink)}
.moya-marketing-nav a[data-accent="gold"]:hover,.moya-marketing-nav a[data-accent="gold"].active{border-bottom-color:var(--ml-gold)}
.moya-marketing-nav-toggle{display:none;background:none;border:none;color:var(--ml-ink);cursor:pointer;padding:6px}

@media(max-width:720px){
  .moya-marketing-nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--ml-bg);
    flex-direction:column;gap:0;border-bottom:1px solid var(--ml-border);padding:8px 20px 16px;
  }
  .moya-marketing-nav.is-open{display:flex}
  .moya-marketing-nav a{padding:12px 0;border-bottom:1px solid var(--ml-border)}
  .moya-marketing-nav-toggle{display:inline-flex}
}

/* ---------- shared marketing page building blocks ---------- */
.ml-section{padding:clamp(48px,8vw,96px) clamp(20px,6vw,64px)}
.ml-section-narrow{max-width:860px;margin:0 auto}
.ml-section-wide{max-width:1180px;margin:0 auto}
.ml-eyebrow{
  display:inline-block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ml-muted);margin:0 0 12px;
}
.ml-h1{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-weight:800;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(34px,5.5vw,58px);margin:0 0 20px;color:var(--ml-ink);
}
.ml-h2{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-weight:800;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(24px,3.4vw,34px);margin:0 0 16px;color:var(--ml-ink);
}
.ml-lede{font-size:19px;line-height:1.55;color:var(--ml-muted);max-width:640px;margin:0 0 28px}
.ml-body{font-size:16px;line-height:1.7;color:var(--ml-ink)}
.ml-body p{margin:0 0 16px}

.ml-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ml-ink);color:#fff;text-decoration:none;
  font-weight:700;font-size:15px;padding:14px 26px;border-radius:8px;
  border:1px solid var(--ml-ink);
}
.ml-btn:hover,
.ml-btn:focus-visible{background:#000;color:#fff}
.ml-btn-ghost{
  background:transparent;color:var(--ml-ink);border:1px solid var(--ml-border);
}
a.ml-btn-ghost:hover,
a.ml-btn-ghost:visited:hover,
a.ml-btn-ghost:focus-visible{
  background:#000;
  border-color:#000;
  color:#fff !important;
}
.ml-btn-system{background:var(--ml-blue);border-color:var(--ml-blue);color:var(--ml-ink)}
.ml-btn-system:hover{background:#6f9fce;border-color:#6f9fce;color:#fff}
.ml-btn-document{background:var(--ml-pink);border-color:var(--ml-pink);color:var(--ml-ink)}
.ml-btn-document:hover{background:#c66f8d;border-color:#c66f8d;color:#fff}
.ml-btn-automation{background:var(--ml-gold);border-color:var(--ml-gold);color:var(--ml-ink)}
.ml-btn-automation:hover{background:#bd8240;border-color:#bd8240;color:#fff}
.ml-btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}

/* ---------- hero ---------- */
.ml-hero{
  padding:clamp(56px,9vw,110px) clamp(20px,6vw,64px) clamp(40px,6vw,72px);
  text-align:center;
  background:linear-gradient(180deg, var(--ml-surface) 0%, var(--ml-bg) 65%);
}
.ml-hero-mark{margin:0 0 28px}
.ml-hero-mark svg{width:min(360px,70vw);height:auto}
.ml-hero .ml-h1{max-width:920px;margin-left:auto;margin-right:auto}
.ml-hero .ml-lede{max-width:640px;margin-left:auto;margin-right:auto}
.ml-hero .ml-btn-row{justify-content:center}

/* ---------- pillar tags ---------- */
.ml-pillars{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 0 32px}
.ml-pillar{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  padding:7px 13px;border-radius:999px;background:var(--ml-surface);color:var(--ml-ink);
}
.ml-pillar-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.ml-pillar-green .ml-pillar-dot{background:var(--ml-green)}
.ml-pillar-blue .ml-pillar-dot{background:var(--ml-blue)}
.ml-pillar-pink .ml-pillar-dot{background:var(--ml-pink)}
.ml-pillar-gold .ml-pillar-dot{background:var(--ml-gold)}

/* ---------- cards / grids ---------- */
.ml-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ml-card{
  background:var(--ml-bg);border:1px solid var(--ml-border);border-radius:10px;
  padding:24px;
}
.ml-card h3{margin:0 0 8px;font-size:17px;font-weight:700;font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;color:var(--ml-ink)}
.ml-card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ml-muted)}
.ml-card-accent{border-top:3px solid var(--ml-gold)}

/* Cards that are themselves links (e.g. "explore other categories" grids) -
   same look as a normal .ml-card, plus a hover state since the whole card
   is clickable rather than just a button inside it. */
a.ml-card-link{
  display:block;text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
a.ml-card-link:hover{
  border-color:var(--ml-ink);transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(16,19,18,.08);
}
a.ml-card-link .ml-card-arrow{
  display:inline-flex;align-items:center;gap:4px;margin-top:12px;
  font-size:13px;font-weight:700;color:var(--ml-ink);
}

/* Small round icon badges, colour-coded to match the M/O/Y/A brand dots -
   used wherever a card wants a quick visual identity instead of just text. */
.ml-icon-badge{
  width:44px;height:44px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.ml-icon-badge svg{width:22px;height:22px;stroke:#fff}
.ml-icon-badge-green{background:var(--ml-green)}
.ml-icon-badge-blue{background:var(--ml-blue)}
.ml-icon-badge-pink{background:var(--ml-pink)}
.ml-icon-badge-gold{background:var(--ml-gold)}
.ml-icon-badge-ink{background:var(--ml-ink)}

/* Client logo mark (homepage case-study cards) - shows an uploaded logo
   image if present, otherwise falls back to plain styled text. */
.ml-client-mark{margin-bottom:16px;min-height:32px;display:flex;align-items:center}
.ml-client-logo-img{max-height:32px;max-width:170px;width:auto;object-fit:contain}
.ml-client-logo-text{
  font-family:'Manrope',sans-serif;font-weight:800;font-size:14px;
  letter-spacing:.03em;color:var(--ml-muted);text-transform:uppercase;
}
.ml-client-logo-chip{
  display:inline-flex;align-items:center;
  background:var(--ml-ink);
  padding:9px 16px;
  border-radius:8px;
}
.ml-client-logo-chip .ml-client-logo-img{max-height:24px}

.ml-steps{counter-reset:ml-step;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ml-step{position:relative;padding-left:44px}
.ml-step::before{
  counter-increment:ml-step;content:counter(ml-step);
  position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;
  background:var(--ml-ink);color:#fff;font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.ml-step h3{margin:0 0 6px;font-size:16px;font-weight:700;font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
.ml-step p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ml-muted)}

/* ---------- proof / stats ---------- */
.ml-proof{
  background:var(--ml-surface);border-radius:14px;padding:clamp(28px,4vw,44px);
  display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));text-align:center;
}
.ml-proof-stat{font-family:'Manrope',sans-serif;font-weight:800;font-size:clamp(26px,3vw,36px);color:var(--ml-ink)}
.ml-proof-label{font-size:13px;color:var(--ml-muted);margin-top:4px}

/* ---------- case study teaser ---------- */
.ml-case-teaser{
  border:1px solid var(--ml-border);border-radius:14px;overflow:hidden;
  display:grid;grid-template-columns:1fr;gap:0;
}
.ml-case-teaser-body{padding:clamp(24px,4vw,40px)}
.ml-case-teaser .ml-eyebrow{color:var(--ml-gold)}

/* ---------- quote / testimonial ---------- */
.ml-quote{
  font-family:'Manrope',sans-serif;font-weight:700;font-size:clamp(20px,2.6vw,28px);
  line-height:1.4;color:var(--ml-ink);max-width:760px;margin:0 auto 16px;
}
.ml-quote-attribution{font-size:14px;color:var(--ml-muted)}

/* ---------- section dividers / bg variants ---------- */
.ml-section-surface{background:var(--ml-surface)}
.ml-section-dark{background:var(--ml-ink);color:#fff}
.ml-section-dark .ml-h1,.ml-section-dark .ml-h2{color:#fff}
.ml-section-dark .ml-lede,.ml-section-dark .ml-body{color:rgba(255,255,255,.72)}

/* ---------- simple content lists (About / Legal) ---------- */
.ml-body ul{margin:0 0 16px;padding-left:22px}
.ml-body li{margin:0 0 8px;line-height:1.6}
.ml-body h2{font-family:'Manrope',sans-serif;font-weight:800;font-size:22px;margin:32px 0 12px;color:var(--ml-ink)}

/* ---------- systems library ---------- */
.ml-lib-group{margin-bottom:36px}
.ml-lib-group h3{
  font-family:'Manrope',sans-serif;font-weight:800;font-size:18px;margin:0 0 14px;
  display:flex;align-items:center;gap:8px;
}
.ml-lib-swatch{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.ml-lib-items{display:grid;gap:10px 20px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));list-style:none;margin:0;padding:0}
.ml-lib-items li{font-size:14px;line-height:1.5;padding:10px 0;border-bottom:1px solid var(--ml-border)}
.ml-lib-cat{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ml-muted);display:block;margin-top:2px}

/* ---------- footer (light) ---------- */
.moya-site-footer-light{
  border-top:1px solid var(--ml-border);background:var(--ml-surface);color:var(--ml-ink);
  padding:0;
  margin-top:auto;
}
.moya-footer-inner{
  max-width:1180px;margin:0 auto;padding:40px clamp(20px,6vw,64px) 32px;
  display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;
}
.moya-site-footer-light .moya-footer-mark{color:var(--ml-ink)}
.moya-footer-nav{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.moya-footer-nav a{color:var(--ml-ink);text-decoration:none;font-size:13px;font-weight:600}
.moya-footer-nav a:hover{text-decoration:underline}
.moya-footer-nav a.moya-footer-moya{font-weight:700}
.moya-footer-nav a.moya-footer-m{color:var(--ml-green)}
.moya-footer-nav a.moya-footer-o{color:var(--ml-blue)}
.moya-footer-nav a.moya-footer-y{color:var(--ml-pink)}
.moya-footer-nav a.moya-footer-a{color:var(--ml-gold)}
.moya-site-footer-light p{margin:0;font-size:12px;color:var(--ml-muted);letter-spacing:.02em}

@media(max-width:640px){
  .ml-case-teaser{grid-template-columns:1fr}
}

/* ============================================================
   White-theme override for the Estimator itself (estimate.php).
   moya.css's dark component styling is built almost entirely on
   the CSS custom properties below (--bg/--surface/--fg/--muted/
   --border etc). Redeclaring them here, scoped to .theme-light,
   re-themes every component that consumes them automatically —
   no HTML, JS or animation logic is touched anywhere.
   Brand/status accent colours (pillar colours, money/good/warn/
   danger and their -ink pairs) are deliberately left as-is: they
   are saturated accents meant to read the same on either
   background.
   ============================================================ */
.theme-light{
  --bg:#FFFFFF;
  --surface:#F7F6F4;
  --surface-2:#EFEDE9;
  --border:#E3E1DC;
  --border-hover:#C9C6C0;
  --fg:#23262B;
  --muted:#5B5F66;
  --overlay-rgb:35,38,43;
  --progress-bg:#F7F6F4;
  --tile-glass-rgb:247,246,244;
}


/* Structured MOYA footer navigation. */
.moya-footer-wordmark{display:block;width:112px;height:auto}
.moya-footer-nav{display:flex;flex-direction:column;align-items:center;gap:12px}
.moya-footer-nav-row{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.moya-footer-nav-row-main{padding-top:12px;border-top:1px solid rgba(16,19,18,.12)}