/* =============================================================
   Law firm site MOCKUPS (rendered as live HTML inside before/after sliders)
   Two visual languages: .mk-before (dated 2014) and .mk-after (refined modern)
   All sizes use cqw/cqh so they scale inside any container.
   ============================================================= */

.mk {
  container-type: size;
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: 'Times New Roman', Times, serif;
  position: relative;
  background: #fff;
  pointer-events: none;
  /* lift sizes off container; default mockup base = ~16px */
  --mk-base: 1.6cqw;
}

/* ============================================================
   BEFORE — generic 2014-era Serbian law firm site
   ============================================================ */
.mk-before {
  background: #f4f4f0;
  color: #222;
}
.mk-before .b-topbar {
  background: #16243a;
  color: #d8d2bf;
  font-size: calc(0.7 * var(--mk-base));
  padding: 0.5cqw 2cqw;
  display: flex; justify-content: space-between;
  letter-spacing: 0.04em;
  font-family: Arial, sans-serif;
}
.mk-before .b-header {
  background: #1d2b44;
  color: #fff;
  padding: 1.8cqw 2cqw 1.5cqw;
  text-align: center;
  border-bottom: 4px solid #a48f4a;
}
.mk-before .b-firm {
  font-size: calc(1.4 * var(--mk-base));
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.3cqw;
}
.mk-before .b-tagline {
  font-style: italic;
  font-size: calc(0.78 * var(--mk-base));
  color: #c4b88a;
  letter-spacing: 0.04em;
}
.mk-before .b-nav {
  background: #243453;
  color: #fff;
  display: flex;
  font-family: Arial, sans-serif;
  font-size: calc(0.72 * var(--mk-base));
  padding: 0;
}
.mk-before .b-nav a {
  padding: 0.6cqw 1.2cqw;
  border-right: 1px solid #3a4a6a;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.mk-before .b-nav a.active { background: #a48f4a; color: #1d2b44; font-weight: 700; }

.mk-before .b-body {
  display: grid;
  grid-template-columns: 1fr 30%;
  gap: 1.5cqw;
  padding: 1.5cqw 2cqw;
}
.mk-before .b-hero {
  width: 100%;
  aspect-ratio: 16 / 6;
  background:
    linear-gradient(135deg, rgba(20,30,55,0.6), rgba(20,30,55,0.2)),
    radial-gradient(ellipse at 30% 60%, #6a5a36 0%, #2c2a26 70%);
  display: grid; place-items: center;
  margin-bottom: 1cqw;
  position: relative;
  overflow: hidden;
  border: 1px solid #c0bba4;
}
.mk-before .b-hero::after {
  content: '⚖';
  font-size: 5cqw;
  color: #d8c98c;
  text-shadow: 0 0.4cqw 0.6cqw rgba(0,0,0,0.4);
}
.mk-before .b-h1 {
  color: #1d2b44;
  font-size: calc(1.05 * var(--mk-base));
  font-weight: 700;
  margin: 1cqw 0 0.4cqw;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.mk-before .b-h2 {
  color: #1d2b44;
  font-size: calc(0.9 * var(--mk-base));
  font-weight: 700;
  margin: 0.8cqw 0 0.3cqw;
  border-bottom: 1px dotted #99876a;
  padding-bottom: 0.2cqw;
}
.mk-before .b-p {
  font-size: calc(0.72 * var(--mk-base));
  line-height: 1.45;
  color: #333;
  margin: 0.3cqw 0;
}
.mk-before .b-p.justify { text-align: justify; }
.mk-before .b-link { color: #1d4a8a; text-decoration: underline; font-size: calc(0.7 * var(--mk-base)); }

.mk-before .b-side {
  background: #ebe5d3;
  border: 1px solid #c5b78f;
  padding: 1cqw;
  font-size: calc(0.7 * var(--mk-base));
}
.mk-before .b-side h3 {
  background: #a48f4a;
  color: #1d2b44;
  font-size: calc(0.72 * var(--mk-base));
  margin: -1cqw -1cqw 0.6cqw;
  padding: 0.5cqw 0.8cqw;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mk-before .b-side ul { margin: 0; padding-left: 1cqw; }
.mk-before .b-side li { margin: 0.25cqw 0; color: #1d2b44; }

.mk-before .b-form {
  margin-top: 0.6cqw;
  display: flex; flex-direction: column; gap: 0.4cqw;
}
.mk-before .b-form input, .mk-before .b-form textarea {
  width: 100%;
  border: 1px solid #999;
  background: #fff;
  padding: 0.3cqw 0.5cqw;
  font-size: calc(0.66 * var(--mk-base));
  font-family: 'Times New Roman', serif;
}
.mk-before .b-form label {
  font-size: calc(0.64 * var(--mk-base));
  color: #444;
}
.mk-before .b-form button {
  background: #a48f4a;
  color: #1d2b44;
  font-weight: 700;
  border: 1px outset #c4b88a;
  padding: 0.4cqw 0.8cqw;
  font-size: calc(0.7 * var(--mk-base));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: default;
}

.mk-before .b-footer {
  background: #16243a;
  color: #c4b88a;
  font-size: calc(0.6 * var(--mk-base));
  padding: 0.7cqw 2cqw;
  text-align: center;
  font-family: Arial, sans-serif;
  border-top: 2px solid #a48f4a;
}

/* ---------- BEFORE variant: commercial (corporate blue template) ---------- */
.mk-before.b-commercial { background: #fff; }
.mk-before.b-commercial .b-header {
  background: linear-gradient(180deg, #1f5fb3, #144789);
  text-align: left;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: none;
  padding: 1.2cqw 2cqw;
}
.mk-before.b-commercial .b-firm {
  font-family: Arial, sans-serif;
  font-size: calc(1.1 * var(--mk-base));
  letter-spacing: 0.02em;
}
.mk-before.b-commercial .b-firm small {
  display: block;
  font-weight: 400;
  font-style: italic;
  font-size: 0.55em;
  color: #cfe1f5;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 0.2cqw;
}
.mk-before.b-commercial .b-nav { background: #0e3066; }
.mk-before.b-commercial .b-nav a.active { background: #fff; color: #144789; }
.mk-before.b-commercial .b-hero {
  background:
    linear-gradient(180deg, rgba(20,71,137,0.15), rgba(20,71,137,0.55)),
    repeating-linear-gradient(45deg, #5a89bd 0 1cqw, #6b96c4 1cqw 2cqw);
  aspect-ratio: 16 / 5;
  position: relative;
}
.mk-before.b-commercial .b-hero::after {
  content: 'Profesionalna usluga · Iskustvo · Poverenje';
  font-family: Arial, sans-serif;
  font-style: italic;
  color: #fff;
  font-size: calc(1 * var(--mk-base));
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.mk-before.b-commercial .b-hero-dots {
  position: absolute; bottom: 0.6cqw; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.3cqw;
}
.mk-before.b-commercial .b-hero-dots span {
  width: 0.5cqw; height: 0.5cqw; border-radius: 50%;
  background: rgba(255,255,255,0.5); border: 1px solid #fff;
}
.mk-before.b-commercial .b-hero-dots span.on { background: #fff; }
.mk-before.b-commercial .b-tiles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw;
  margin: 1cqw 0;
}
.mk-before.b-commercial .b-tile {
  border: 1px solid #b6c8df;
  background: #f0f5fb;
  padding: 0.8cqw;
  text-align: center;
}
.mk-before.b-commercial .b-tile-ico {
  width: 3cqw; height: 3cqw; margin: 0 auto 0.4cqw;
  background: #144789;
  color: #fff;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: calc(1.4 * var(--mk-base));
}
.mk-before.b-commercial .b-tile-title {
  color: #144789;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: calc(0.78 * var(--mk-base));
}

/* ---------- BEFORE variant: family (cluttered, garish) ---------- */
.mk-before.b-family {
  background: #fff7ec;
}
.mk-before.b-family .b-topbar { background: #c7202a; color: #fff; }
.mk-before.b-family .b-header {
  background: #fff;
  color: #2a1a14;
  border-bottom: 3px dashed #d8a042;
  padding: 1.5cqw 2cqw;
  text-align: left;
  display: flex; justify-content: space-between; align-items: center;
}
.mk-before.b-family .b-firm {
  font-family: 'Comic Sans MS', 'Brush Script MT', cursive;
  font-size: calc(1.6 * var(--mk-base));
  color: #c7202a;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 700;
  font-style: italic;
}
.mk-before.b-family .b-firm-mark {
  width: 4cqw; height: 4cqw; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f0c34a, #c7202a);
  display: grid; place-items: center;
  color: #fff;
  font-size: calc(1.5 * var(--mk-base));
  font-family: 'Comic Sans MS', cursive;
  font-weight: 700;
  border: 2px solid #c7202a;
}
.mk-before.b-family .b-tagline { color: #6a4a20; }
.mk-before.b-family .b-nav {
  background: #fff;
  color: #c7202a;
  border-top: 2px solid #c7202a;
  border-bottom: 2px solid #c7202a;
  font-family: 'Comic Sans MS', cursive;
  font-size: calc(0.78 * var(--mk-base));
}
.mk-before.b-family .b-nav a { color: #c7202a; border-right: 1px solid #f0c34a; }
.mk-before.b-family .b-nav a.active { background: #ffe9b0; color: #c7202a; }
.mk-before.b-family .b-hero {
  background:
    linear-gradient(rgba(255,255,255,0.1), rgba(0,0,0,0.3)),
    radial-gradient(ellipse at center, #f7d287, #c08f44);
  border: 3px solid #c7202a;
  aspect-ratio: 16 / 5;
}
.mk-before.b-family .b-hero::after {
  content: '👨‍👩‍👧 Vaša porodica je naš prioritet! 👨‍👩‍👧';
  font-family: 'Comic Sans MS', cursive;
  font-size: calc(1 * var(--mk-base));
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
  font-weight: 700;
}
.mk-before.b-family .b-h1 {
  color: #c7202a;
  font-family: 'Comic Sans MS', cursive;
  text-transform: none;
}
.mk-before.b-family .b-side {
  background: #ffe9b0;
  border: 2px dashed #c7202a;
}
.mk-before.b-family .b-side h3 {
  background: #c7202a;
  color: #fff;
  font-family: 'Comic Sans MS', cursive;
}

/* ============================================================
   AFTER — refined modern editorial law firm
   ============================================================ */
.mk-after {
  background: #faf6ec;
  color: #1A1614;
  font-family: 'Inter', system-ui, sans-serif;
}
.mk-after .a-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.4cqw 2.5cqw;
  font-size: calc(0.72 * var(--mk-base));
  letter-spacing: 0.04em;
  color: #1A1614;
  border-bottom: 1px solid rgba(184, 172, 149, 0.4);
}
.mk-after .a-brand {
  font-family: 'EB Garamond', serif;
  font-size: calc(1.05 * var(--mk-base));
  font-weight: 500;
  letter-spacing: -0.005em;
  display: flex; align-items: center; gap: 0.5cqw;
}
.mk-after .a-brand-mark {
  width: 1.6cqw; height: 1.6cqw;
  background: #6B1F2E;
  color: #FBF6EC;
  border-radius: 0.25cqw;
  display: grid; place-items: center;
  font-style: italic;
  font-weight: 600;
  font-size: calc(0.85 * var(--mk-base));
}
.mk-after .a-nav-links {
  display: flex; gap: 1.6cqw;
  color: #3A322C;
  font-weight: 400;
}
.mk-after .a-nav-cta {
  background: #1A1614; color: #FBF6EC;
  padding: 0.5cqw 1cqw;
  border-radius: 0.4cqw;
  font-weight: 500;
}

.mk-after .a-hero {
  padding: 4cqw 3cqw 3.2cqw;
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 3cqw; align-items: center;
}
.mk-after .a-eyebrow {
  font-size: calc(0.6 * var(--mk-base));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6B1F2E;
  font-weight: 500;
  margin-bottom: 1cqw;
  display: flex; align-items: center; gap: 0.6cqw;
}
.mk-after .a-eyebrow::before { content: ''; width: 1.5cqw; height: 1px; background: #6B1F2E; }
.mk-after .a-h1 {
  font-family: 'EB Garamond', serif;
  font-size: calc(3.4 * var(--mk-base));
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.022em;
  color: #1A1614;
  margin: 0;
}
.mk-after .a-h1 em { font-style: italic; color: #6B1F2E; font-weight: 500; }
.mk-after .a-sub {
  font-size: calc(0.86 * var(--mk-base));
  color: #3A322C;
  line-height: 1.5;
  margin: 1.2cqw 0 1.6cqw;
  max-width: 32cqw;
}
.mk-after .a-cta-row { display: flex; gap: 1cqw; align-items: center; }
.mk-after .a-cta {
  background: #6B1F2E; color: #FBF6EC;
  padding: 0.7cqw 1.4cqw;
  border-radius: 0.4cqw;
  font-size: calc(0.78 * var(--mk-base));
  font-weight: 500;
  border: 2px solid #6B1F2E;
}
.mk-after .a-cta-ghost {
  background: transparent;
  color: #1A1614;
  font-size: calc(0.74 * var(--mk-base));
  border-bottom: 1px solid #1A1614;
  padding-bottom: 0.2cqw;
}
.mk-after .a-hero-art {
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(180deg, rgba(26,22,20,0.05) 0%, rgba(26,22,20,0.35) 100%),
    linear-gradient(135deg, #c9b896 0%, #8a7558 60%, #4e3f30 100%);
  border-radius: 0.5cqw;
  position: relative;
  overflow: hidden;
}
.mk-after .a-hero-art::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(255,240,210,0.4) 0%, transparent 50%),
    repeating-linear-gradient(120deg, transparent 0 2cqw, rgba(0,0,0,0.04) 2cqw 2.1cqw);
}
.mk-after .a-hero-art::after {
  content: '';
  position: absolute; left: 1cqw; bottom: 1cqw; right: 1cqw;
  height: 0.8cqw;
  display: block;
  background: linear-gradient(90deg, #FBF6EC, transparent);
  opacity: 0.4;
}

.mk-after .a-strip {
  display: flex; justify-content: space-around; align-items: center;
  border-top: 1px solid rgba(184, 172, 149, 0.5);
  border-bottom: 1px solid rgba(184, 172, 149, 0.5);
  padding: 1cqw 3cqw;
  font-size: calc(0.6 * var(--mk-base));
  color: #7A6F62;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- AFTER variant: civil litigation editorial ---------- */
.mk-after.a-civil {}

/* ---------- AFTER variant: dark editorial (commercial) ---------- */
.mk-after.a-dark {
  background: #15110E;
  color: #F0E5D2;
}
.mk-after.a-dark .a-nav {
  border-bottom: 1px solid rgba(240, 229, 210, 0.12);
  color: #F0E5D2;
}
.mk-after.a-dark .a-nav-links { color: #C4B89E; }
.mk-after.a-dark .a-brand-mark { background: #C9A24A; color: #15110E; }
.mk-after.a-dark .a-nav-cta {
  background: #C9A24A; color: #15110E;
}
.mk-after.a-dark .a-h1 { color: #F0E5D2; }
.mk-after.a-dark .a-h1 em { color: #C9A24A; }
.mk-after.a-dark .a-sub { color: rgba(240,229,210,0.7); }
.mk-after.a-dark .a-eyebrow { color: #C9A24A; }
.mk-after.a-dark .a-eyebrow::before { background: #C9A24A; }
.mk-after.a-dark .a-cta { background: #C9A24A; color: #15110E; border-color: #C9A24A; }
.mk-after.a-dark .a-cta-ghost { color: #F0E5D2; border-bottom-color: #F0E5D2; }
.mk-after.a-dark .a-hero-art {
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.5) 100%),
    linear-gradient(135deg, #3a3024 0%, #1f1a14 100%);
}
.mk-after.a-dark .a-hero-art::before {
  background:
    radial-gradient(ellipse at 60% 25%, rgba(201,162,74,0.45) 0%, transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 3cqw, rgba(201,162,74,0.06) 3cqw 3.05cqw);
}
.mk-after.a-dark .a-strip {
  border-color: rgba(240,229,210,0.15);
  color: #8A7F69;
}

/* ---------- AFTER variant: warm boutique family ---------- */
.mk-after.a-warm {
  background: #F4ECDD;
  color: #2A1B17;
}
.mk-after.a-warm .a-brand-mark { background: #8A3338; }
.mk-after.a-warm .a-h1 em { color: #8A3338; }
.mk-after.a-warm .a-eyebrow { color: #8A3338; }
.mk-after.a-warm .a-eyebrow::before { background: #8A3338; }
.mk-after.a-warm .a-cta { background: #8A3338; border-color: #8A3338; }
.mk-after.a-warm .a-hero-art {
  background:
    linear-gradient(180deg, rgba(42,27,23,0.05) 0%, rgba(42,27,23,0.25) 100%),
    linear-gradient(135deg, #e8c79a 0%, #b88157 60%, #6a3a28 100%);
}

/* ---------- AFTER content right side: form variant ---------- */
.mk-after .a-form {
  background: #FBF6EC;
  border: 1px solid rgba(184, 172, 149, 0.5);
  border-radius: 0.6cqw;
  padding: 1.8cqw 1.6cqw;
  display: flex; flex-direction: column; gap: 0.9cqw;
  aspect-ratio: auto;
}
.mk-after.a-dark .a-form { background: rgba(240,229,210,0.06); border-color: rgba(201,162,74,0.25); }
.mk-after .a-form-label {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: calc(0.78 * var(--mk-base));
  color: #6B1F2E;
}
.mk-after.a-dark .a-form-label { color: #C9A24A; }
.mk-after.a-warm .a-form-label { color: #8A3338; }
.mk-after .a-form-h {
  font-family: 'EB Garamond', serif;
  font-size: calc(1.3 * var(--mk-base));
  margin: 0;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.mk-after .a-field {
  font-size: calc(0.66 * var(--mk-base));
  color: #7A6F62;
  padding-bottom: 0.6cqw;
  border-bottom: 1px solid #B8AC95;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.02em;
}
.mk-after.a-dark .a-field { color: #8A7F69; border-color: rgba(240,229,210,0.2); }
.mk-after .a-form-meta {
  font-size: calc(0.58 * var(--mk-base));
  color: #7A6F62;
  font-style: italic;
  margin-top: 0.4cqw;
}
.mk-after.a-dark .a-form-meta { color: #8A7F69; }

/* ---------- AFTER lower band (3 columns) ---------- */
.mk-after .a-cols {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 2cqw;
  padding: 2.5cqw 3cqw 3cqw;
  border-top: 1px solid rgba(184, 172, 149, 0.4);
}
.mk-after.a-dark .a-cols { border-color: rgba(240,229,210,0.12); }
.mk-after .a-col-num {
  font-family: 'EB Garamond', serif;
  font-style: italic;
  font-size: calc(0.72 * var(--mk-base));
  color: #6B1F2E;
  margin-bottom: 0.4cqw;
}
.mk-after.a-dark .a-col-num { color: #C9A24A; }
.mk-after.a-warm .a-col-num { color: #8A3338; }
.mk-after .a-col-title {
  font-family: 'EB Garamond', serif;
  font-size: calc(1.05 * var(--mk-base));
  font-weight: 500;
  margin: 0 0 0.5cqw;
  letter-spacing: -0.01em;
}
.mk-after .a-col-body {
  font-size: calc(0.66 * var(--mk-base));
  color: #3A322C;
  line-height: 1.45;
}
.mk-after.a-dark .a-col-body { color: rgba(240,229,210,0.7); }