/* ===== Mashvera Group — base ===== */

:root {
  --brand-50:#EAF4EE; --brand-100:#CDE6D9; --brand-300:#5FA982; --brand-400:#2E8C60;
  --brand-500:#1A764F; --brand-600:#146142; --brand-700:#0F4D35; --brand-800:#0A3927;
  --night:#0A2318;
  --ink:#181818; --ink-700:#2E2E2C; --ink-500:#5C5C58; --ink-300:#8C8C86;
  --paper:#FAFAF8; --surface:#F1F1EE;
  --font-display:'Space Grotesk',sans-serif; --font-body:'IBM Plex Sans',sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:var(--font-body); background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { font-family:var(--font-display); margin:0; }
p { margin:0; }
a { color:inherit; text-decoration:none; }
ul { margin:0; padding:0; list-style:none; }
img { max-width:100%; display:block; }
button { font-family:inherit; cursor:pointer; }
::selection { background:var(--brand-500); color:var(--paper); }
:focus-visible { outline:2px solid var(--brand-500); outline-offset:2px; }

.container { max-width:1280px; margin:0 auto; padding:0 1.5rem; }
@media (min-width:768px){ .container{ padding:0 2.5rem; } }

/* ===== Header ===== */
.site-header { position:sticky; top:0; z-index:50; background:rgba(250,250,248,.95); backdrop-filter:blur(8px); border-bottom:1px solid rgba(24,24,24,.08); }
.site-header .container { height:78px; display:flex; align-items:center; justify-content:space-between; }
.site-header .logo img { height:32px; width:auto; }
.main-nav { display:none; align-items:center; gap:2.25rem; }
.main-nav a { font-size:15px; font-weight:500; color:var(--ink-700); transition:color .2s; }
.main-nav a:hover { color:var(--brand-500); }
.header-cta { display:none; }
.menu-toggle { display:flex; align-items:center; justify-content:center; width:40px; height:40px; background:none; border:none; color:var(--ink); }
.mobile-nav { display:none; position:absolute; inset-inline:0; top:78px; background:var(--paper); border-bottom:1px solid rgba(24,24,24,.08); padding:1.5rem; flex-direction:column; }
.mobile-nav.open { display:flex; }
.mobile-nav a { padding:.75rem 0; font-size:1.125rem; font-weight:500; color:var(--ink-700); }
.mobile-nav .btn { margin-top:.75rem; justify-content:center; }
@media (min-width:768px){ .main-nav{ display:flex; } .header-cta{ display:inline-flex; } .menu-toggle{ display:none; } }

.btn { display:inline-flex; align-items:center; gap:.5rem; border-radius:6px; padding:.85rem 1.5rem; font-size:15px; font-weight:500; border:none; cursor:pointer; transition:.2s; white-space:nowrap; }
.btn svg { width:16px; height:16px; }
.btn-dark { background:var(--ink); color:var(--paper); }
.btn-dark:hover { background:var(--brand-600); }
.btn-light { background:var(--paper); color:var(--night); }
.btn-light:hover { background:var(--brand-50); }
.btn-ghost { color:var(--paper); border:1px solid rgba(250,250,248,.3); }
.btn-ghost:hover { border-color:var(--brand-400); color:var(--brand-300); }
.btn-link { color:var(--ink); text-decoration:underline; text-decoration-color:rgba(24,24,24,.3); text-underline-offset:4px; padding:.85rem .25rem; }
.btn-link:hover { text-decoration-color:var(--brand-500); }

/* ===== Hero (home, dark + wave) ===== */
.hero { position:relative; background:var(--night); overflow:hidden; }
.hero-wave { position:absolute; top:-10%; right:-15%; width:900px; max-width:130%; opacity:.9; pointer-events:none; }
.hero .container { position:relative; z-index:1; padding:6rem 1.5rem 5rem; }
.eyebrow { display:inline-flex; align-items:center; gap:.5rem; color:var(--brand-300); font-size:14px; font-weight:500; }
.eyebrow svg { width:16px; height:16px; }
.hero h1 { color:var(--paper); font-size:2.6rem; font-weight:600; line-height:1.12; letter-spacing:-.02em; margin-top:1rem; max-width:600px; }
.hero .lede { color:rgba(250,250,248,.72); font-size:1.15rem; line-height:1.65; max-width:520px; margin-top:1.4rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem; }
.hero-trust { display:flex; flex-wrap:wrap; gap:1.75rem 2.5rem; margin-top:3.5rem; padding-top:2rem; border-top:1px solid rgba(250,250,248,.14); max-width:800px; }
.hero-trust .item { display:flex; align-items:center; gap:.65rem; }
.hero-trust .item .ic { width:34px; height:34px; border-radius:8px; background:rgba(250,250,248,.08); color:var(--brand-300); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hero-trust .item .ic svg { width:17px; height:17px; }
.hero-trust .item p { color:rgba(250,250,248,.8); font-size:.875rem; font-weight:500; max-width:190px; line-height:1.4; }
@media (min-width:768px){ .hero .container{ padding:8rem 2.5rem 7rem; } .hero h1{ font-size:3.6rem; } }

/* ===== Light inner-page hero ===== */
.page-hero { padding:5rem 0 3rem; background:var(--paper); border-bottom:1px solid rgba(24,24,24,.08); }
.page-hero .eyebrow-dark { display:inline-flex; align-items:center; gap:.4rem; color:var(--brand-600); font-size:14px; font-weight:600; }
.page-hero .eyebrow-dark svg { width:15px; height:15px; }
.page-hero h1 { font-size:2.5rem; font-weight:600; letter-spacing:-.02em; margin-top:.75rem; }
.page-hero .lede { margin-top:1.1rem; max-width:36rem; font-size:1.125rem; color:var(--ink-500); line-height:1.6; }
@media (min-width:768px){ .page-hero{ padding:6.5rem 0 3.5rem; } .page-hero h1{ font-size:3rem; } }

/* ===== Sections ===== */
.section { padding:5.5rem 0; }
@media (min-width:768px){ .section{ padding:7.5rem 0; } }
.section-head { max-width:560px; }
.section-head .eyebrow-dark { display:inline-flex; align-items:center; gap:.4rem; color:var(--brand-600); font-size:14px; font-weight:600; }
.section-head .eyebrow-dark svg { width:15px; height:15px; }
.section-head h2 { font-size:2rem; font-weight:600; letter-spacing:-.02em; margin-top:.6rem; }
.section-head p { margin-top:1rem; color:var(--ink-500); font-size:1.05rem; line-height:1.6; }
@media (min-width:768px){ .section-head h2{ font-size:2.5rem; } }

/* ===== Service cards ===== */
.service-grid { margin-top:3.5rem; display:grid; gap:1.5rem; grid-template-columns:1fr; }
@media (min-width:640px){ .service-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .service-grid{ grid-template-columns:1fr 1fr 1fr; } }
.service-card { display:block; background:var(--paper); border:1px solid rgba(24,24,24,.08); border-radius:14px; padding:2rem; transition:transform .25s, box-shadow .25s, border-color .25s; }
.service-card:hover { transform:translateY(-4px); box-shadow:0 20px 40px -20px rgba(10,35,24,.25); border-color:rgba(26,118,79,.3); }
.service-icon { width:48px; height:48px; border-radius:10px; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; }
.service-icon svg { width:24px; height:24px; }
.service-card h3 { font-size:1.15rem; font-weight:600; }
.service-card .tagline { margin-top:.4rem; font-size:.875rem; font-style:italic; color:var(--brand-600); }
.service-card .desc { margin-top:.75rem; font-size:.9rem; line-height:1.6; color:var(--ink-500); }
.service-card .learn { margin-top:1.25rem; display:inline-flex; align-items:center; gap:.4rem; font-size:.875rem; font-weight:500; color:var(--ink); }
.service-card .learn svg { width:15px; height:15px; transition:transform .2s; }
.service-card:hover .learn svg { transform:translateX(3px); }
.service-card .num { font-size:.8rem; color:var(--ink-300); display:block; margin-bottom:.5rem; }

/* ===== Why strip ===== */
.why { background:var(--surface); }
.why .container { display:grid; gap:2.5rem; grid-template-columns:1fr; }
.why-item { display:flex; gap:1rem; }
.why-item .ic { width:40px; height:40px; border-radius:9px; background:var(--night); color:var(--brand-300); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.why-item .ic svg { width:20px; height:20px; }
.why-item p:first-child { font-weight:600; }
.why-item p:last-child { margin-top:.35rem; font-size:.9rem; color:var(--ink-500); line-height:1.55; }
@media (min-width:768px){ .why .container{ grid-template-columns:1fr 1fr 1fr 1fr; } }

/* ===== Industry cards ===== */
.industry-grid { margin-top:3.5rem; display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:640px){ .industry-grid{ grid-template-columns:1fr 1fr; } }
@media (min-width:1024px){ .industry-grid.cols-3{ grid-template-columns:1fr 1fr 1fr; } }
.industry-card { position:relative; background:var(--paper); border:1px solid rgba(24,24,24,.08); border-radius:12px; padding:1.75rem; overflow:hidden; transition:transform .25s, box-shadow .25s; }
.industry-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--brand-400), var(--brand-700)); transform:scaleX(0); transform-origin:left; transition:transform .3s; }
.industry-card:hover { transform:translateY(-3px); box-shadow:0 16px 32px -20px rgba(10,35,24,.2); }
.industry-card:hover::before { transform:scaleX(1); }
.industry-card .ic { width:38px; height:38px; border-radius:8px; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.industry-card .ic svg { width:19px; height:19px; }
.industry-card h3 { font-size:1.05rem; font-weight:600; }
.industry-card p { margin-top:.5rem; font-size:.9rem; color:var(--ink-500); line-height:1.55; }

/* ===== CTA band (dark + wave, sitewide) ===== */
.cta { position:relative; background:var(--night); overflow:hidden; }
.cta-wave { position:absolute; bottom:-30%; left:-10%; width:700px; max-width:110%; opacity:.6; pointer-events:none; }
.cta .container { position:relative; z-index:1; padding:4.5rem 1.5rem; display:flex; flex-direction:column; gap:2rem; }
.cta h2 { color:var(--paper); font-size:2rem; font-weight:600; max-width:480px; }
.cta .sub { display:flex; flex-direction:column; gap:.4rem; margin-top:.9rem; }
.cta .sub span { display:flex; align-items:center; gap:.5rem; color:rgba(250,250,248,.65); font-size:.9375rem; }
.cta .sub svg { width:15px; height:15px; }
@media (min-width:768px){ .cta .container{ flex-direction:row; align-items:center; justify-content:space-between; padding:5.5rem 2.5rem; } .cta h2{ font-size:2.5rem; } }

/* ===== Footer ===== */
.site-footer { background:var(--ink); color:rgba(250,250,248,.9); }
.site-footer .container { padding:4rem 1.5rem 2.5rem; }
.footer-grid { display:grid; gap:2.5rem; grid-template-columns:1fr; }
.footer-grid img { height:30px; filter:brightness(0) invert(1); }
.footer-about p { margin-top:1.2rem; max-width:280px; font-size:.875rem; color:rgba(250,250,248,.55); line-height:1.6; }
.footer-col h4 { font-size:.8rem; font-weight:600; color:rgba(250,250,248,.45); font-family:var(--font-body); }
.footer-col ul { margin-top:1rem; display:flex; flex-direction:column; gap:.6rem; }
.footer-col a { font-size:.875rem; color:rgba(250,250,248,.75); }
.footer-col a:hover { color:var(--brand-400); }
.footer-contact { margin-top:1.5rem; display:flex; flex-direction:column; gap:.4rem; font-size:.875rem; color:rgba(250,250,248,.6); }
.footer-contact a:hover { color:var(--brand-400); }
.footer-contact p { max-width:220px; line-height:1.6; }
.footer-bottom { margin-top:3rem; padding-top:1.5rem; border-top:1px solid rgba(250,250,248,.1); display:flex; flex-direction:column; gap:.6rem; font-size:.75rem; color:rgba(250,250,248,.4); }
@media (min-width:768px){ .footer-grid{ grid-template-columns:1.3fr 1fr 1fr; } .footer-bottom{ flex-direction:row; justify-content:space-between; } }

/* ===== Service detail page ===== */
.back-link { display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500; color:var(--ink-500); }
.back-link:hover { color:var(--brand-600); }
.back-link svg { width:16px; height:16px; }
.service-detail { display:grid; gap:3rem; padding:2.5rem 0 5rem; }
@media (min-width:768px){ .service-detail{ grid-template-columns:1.3fr 1fr; padding-bottom:7rem; } }
.service-detail .icon-lg { width:56px; height:56px; border-radius:12px; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; margin-bottom:1.5rem; }
.service-detail .icon-lg svg { width:28px; height:28px; }
.service-detail .index { font-size:.875rem; color:var(--ink-300); }
.service-detail .tagline { margin-top:1rem; font-size:1.125rem; font-style:italic; color:var(--brand-600); }
.service-detail .desc { margin-top:1.25rem; max-width:40rem; font-size:1.0625rem; line-height:1.7; color:var(--ink-700); }
.capability-panel { border-top:1px solid rgba(24,24,24,.1); padding-top:2rem; }
@media (min-width:768px){ .capability-panel{ border-top:none; border-left:1px solid rgba(24,24,24,.1); padding-top:0; padding-left:2.5rem; } }
.capability-panel h2 { font-size:.875rem; font-weight:500; color:var(--ink-500); font-family:var(--font-body); }
.capability-panel ul { margin-top:1.25rem; display:flex; flex-direction:column; gap:1rem; }
.capability-panel li { display:flex; gap:.75rem; font-size:.9375rem; color:var(--ink-700); }
.capability-panel .check { flex-shrink:0; margin-top:.125rem; color:var(--brand-500); width:16px; height:16px; }
.next-service { border-top:1px solid rgba(24,24,24,.1); padding:2rem 0 5rem; }
.next-service a { display:flex; align-items:center; justify-content:space-between; }
.next-service .label { font-size:.875rem; color:var(--ink-500); }
.next-service .name { font-size:1.125rem; font-weight:500; }

/* ===== About / Careers info blocks ===== */
.info-grid { margin-top:4rem; padding-top:3rem; border-top:1px solid rgba(24,24,24,.1); display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media (min-width:768px){ .info-grid{ grid-template-columns:1fr 1fr 1fr; } }
.info-grid .ic { width:40px; height:40px; border-radius:9px; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
.info-grid .ic svg { width:20px; height:20px; }
.info-grid h2 { font-size:1rem; font-weight:600; font-family:var(--font-body); }
.info-grid p { margin-top:.5rem; font-size:.9375rem; line-height:1.6; color:var(--ink-500); }

.split-cta { margin-top:5rem; padding-top:3rem; border-top:1px solid rgba(24,24,24,.1); display:flex; flex-direction:column; gap:1.5rem; padding-bottom:5rem; }
@media (min-width:768px){ .split-cta{ flex-direction:row; align-items:center; justify-content:space-between; } }
.split-cta p { max-width:28rem; color:var(--ink-500); }

.role-grid { margin-top:1.25rem; display:grid; gap:.75rem; grid-template-columns:1fr; }
@media (min-width:640px){ .role-grid{ grid-template-columns:1fr 1fr; } }
.role-chip { display:flex; align-items:center; gap:.75rem; border:1px solid rgba(24,24,24,.1); border-radius:8px; padding:1rem 1.25rem; font-size:.9375rem; }
.role-chip svg { width:18px; height:18px; color:var(--brand-600); flex-shrink:0; }

/* ===== Contact form ===== */
.contact-layout { display:grid; gap:4rem; padding:2.5rem 0 5rem; grid-template-columns:1fr; }
@media (min-width:768px){ .contact-layout{ grid-template-columns:1.2fr 1fr; padding-bottom:7rem; } }
.form-group { margin-bottom:1.5rem; }
.form-group label { display:block; font-size:.875rem; font-weight:500; color:var(--ink-700); margin-bottom:.5rem; }
.form-group input, .form-group textarea {
  width:100%; border:1px solid rgba(24,24,24,.15); border-radius:6px; padding:.75rem 1rem;
  font-family:inherit; font-size:1rem; background:var(--paper); color:var(--ink);
}
.form-group input:focus, .form-group textarea:focus { outline:none; border-color:var(--brand-500); }
.contact-info-list { display:flex; flex-direction:column; gap:2rem; padding-top:2rem; border-top:1px solid rgba(24,24,24,.1); }
@media (min-width:768px){ .contact-info-list{ border-top:none; border-left:1px solid rgba(24,24,24,.1); padding-top:0; padding-left:3rem; } }
.contact-info-item { display:flex; gap:1rem; }
.contact-info-item .ic { width:40px; height:40px; border-radius:9px; background:var(--brand-50); color:var(--brand-600); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-info-item .ic svg { width:19px; height:19px; }
.contact-info-item .label { font-size:.875rem; color:var(--ink-500); }
.contact-info-item .value { font-weight:600; color:var(--ink); }
.form-note { margin-top:1rem; font-size:.875rem; padding:1rem; border-radius:6px; }
.form-note.success { background:var(--brand-50); color:var(--brand-700); }
.form-note.error { background:#FEF2F2; color:#B91C1C; }
.hidden { display:none; }