/* ============================================================
   KÖKSAL — Universal footer (shared)
   Injected on every page by site-footer.js. Mirrors the header
   system: single source of truth, brand tokens from
   koksal-brand.css. Demo-only styles live in footer.html.

   Tiers, top → bottom:
     · mf__engage   — conversion band (headline + CTA)
     · mf__main     — brand block + sitemap columns
     · mf__offices  — tri-city office directory
     · mf__legal    — grounding strip (© · legal · langs · top)
   ============================================================ */

.mf {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(120% 90% at 88% -8%, var(--crimson-surface-2) 0%, var(--crimson-surface) 42%, var(--crimson-surface-3) 100%);
  color: var(--crimson-fg-dim);
  font-family: var(--font-sans);
  overflow: hidden;
}
.mf a { color: var(--crimson-fg-dim); text-decoration: none; transition: color .25s var(--ease); }
.mf a:hover { color: #fff; }

/* —— shared inner width —— */
.mf__in { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }

/* —— texture: faint dot grid, masked to the upper-right —— */
.mf__texture {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(120% 80% at 92% 2%, #000, transparent 60%);
  mask-image: radial-gradient(120% 80% at 92% 2%, #000, transparent 60%);
}

/* —— watermark: oversized serif initial, bottom-left, barely there —— */
.mf__watermark {
  position: absolute; z-index: -1; pointer-events: none;
  left: clamp(-18px, -1vw, -8px); bottom: -0.34em;
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: clamp(240px, 36vw, 560px); line-height: 1;
  color: #fff; opacity: .035; letter-spacing: -.04em;
  -webkit-user-select: none; user-select: none;
}

/* shared eyebrow (matches header utility-strip texture) */
.mf__eyebrow {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--crimson-accent);
  display: inline-flex; align-items: center; gap: 12px;
}
.mf__eyebrow::before {
  content: ""; width: 22px; height: 2px; background: var(--crimson-500); display: inline-block;
}

/* ===== TIER 1 · ENGAGE BAND ============================== */
.mf__engage { border-bottom: 1px solid var(--crimson-line); }
.mf__engage .mf__in {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(28px, 5vw, 80px); flex-wrap: wrap;
  padding-top: clamp(56px, 7vw, 104px); padding-bottom: clamp(40px, 4.5vw, 64px);
}
.mf__engage h2 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); line-height: 1.06;
  letter-spacing: -.02em; color: #fff; margin: 18px 0 0; max-width: 18ch;
  text-wrap: balance;
}
.mf__engage h2 em { font-style: italic; color: var(--crimson-accent); }

.mf__engage-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; flex: none; }
.mf a.mf__bigcta {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--crimson-surface); background: var(--crimson-fg);
  padding: 16px 28px; border-radius: 100px;
  transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.mf a.mf__bigcta:hover {
  color: var(--crimson-surface); background: #fff; transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
.mf__bigcta svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.mf__bigcta:hover svg { transform: translateX(4px); }

.mf__mail {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .02em;
  color: var(--crimson-fg-dim); padding-left: 2px;
}
.mf__mail svg { width: 15px; height: 15px; color: var(--crimson-accent); }
.mf__mail:hover { color: #fff; }

/* ===== TIER 2 · MAIN (brand + sitemap) =================== */
.mf__main .mf__in {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  padding-top: clamp(48px, 5vw, 72px); padding-bottom: clamp(40px, 4vw, 56px);
}
.mf__brand { max-width: 34ch; }
.mf__logo { height: 128px; width: auto; display: block; margin-bottom: 22px; }
.mf__tagline { font-size: var(--fs-small); line-height: 1.6; color: var(--crimson-fg-dim); margin: 0 0 26px; }

.mf__social { display: flex; gap: 10px; }
.mf__social a {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--crimson-line); display: grid; place-items: center;
  color: var(--crimson-fg-dim);
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.mf__social a:hover { border-color: var(--crimson-accent); color: #fff; background: rgba(255,255,255,.06); transform: translateY(-2px); }
.mf__social svg { width: 17px; height: 17px; }

/* sitemap columns */
.mf__col h5 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(244,232,229,.5); margin: 6px 0 18px; font-weight: 500;
}
.mf__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mf__col a {
  font-size: var(--fs-small); color: var(--crimson-fg); position: relative;
  display: inline-block; padding-bottom: 1px;
  background-image: linear-gradient(var(--crimson-accent), var(--crimson-accent));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: left 100%;
  transition: background-size .3s var(--ease), color .25s var(--ease);
}
.mf__col a:hover { color: #fff; background-size: 100% 1px; }

/* ===== TIER 3 · OFFICE DIRECTORY ========================= */
.mf__offices { border-top: 1px solid var(--crimson-line); }
.mf__offices .mf__in {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  padding-top: 0; padding-bottom: 0;
}
.mf__office {
  display: block; padding: clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 36px);
  border-left: 1px solid var(--crimson-line);
  transition: background .3s var(--ease);
}
.mf__office:first-child { border-left: 0; margin-left: calc(-1 * clamp(20px, 2.4vw, 36px)); }
.mf__office:hover { background: rgba(255,255,255,.035); }
.mf__office-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.mf__office-code {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  color: var(--crimson-accent); border: 1px solid var(--crimson-line);
  border-radius: 3px; padding: 3px 7px; flex: none;
}
.mf__office-city { font-family: var(--font-serif); font-size: 1.45rem; font-weight: 500; color: #fff; line-height: 1; }
.mf__office-country { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(244,232,229,.42); margin-left: auto; }
.mf__office-addr { font-size: 13.5px; line-height: 1.6; color: var(--crimson-fg-dim); margin: 0 0 16px; max-width: 30ch; }
.mf__office-dir {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--crimson-fg);
}
.mf__office-dir .ar { color: var(--crimson-accent); transition: transform .25s var(--ease); }
.mf__office:hover .mf__office-dir { color: #fff; }
.mf__office:hover .mf__office-dir .ar { transform: translateX(4px); }

/* ===== TIER 4 · LEGAL STRIP (grounding) ================== */
.mf__legal { background: rgba(54,10,16,.45); border-top: 1px solid var(--crimson-line); }
.mf__legal .mf__in {
  display: flex; flex-direction: column; gap: 18px;
  padding-top: 22px; padding-bottom: 22px;
}
.mf__legal-row { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; width: 100%; }
.mf__legal-row--top { padding-bottom: 18px; border-bottom: 1px solid var(--crimson-line); }
.mf__legal-copy { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; color: rgba(244,232,229,.5); }

/* compact social cluster — bottom-left of the legal strip */
.mf__legal-social { display: flex; align-items: center; gap: 8px; }
.mf__legal-social a {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--crimson-line); display: grid; place-items: center;
  color: rgba(244,232,229,.66);
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.mf__legal-social a:hover { border-color: var(--crimson-accent); color: #fff; background: rgba(255,255,255,.06); transform: translateY(-2px); }
.mf__legal-social svg { width: 15px; height: 15px; }
.mf__legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.mf__legal-links a { font-size: 12.5px; color: rgba(244,232,229,.66); }
.mf__legal-links a:hover { color: #fff; }

.mf__legal-right { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.mf__langs { display: flex; gap: 4px; }
.mf__lang {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  padding: 4px 9px; border-radius: 3px; color: rgba(244,232,229,.55); cursor: pointer;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.mf__lang:hover { color: #fff; }
.mf__lang.active { background: var(--crimson-600); color: #fff; }

.mf__top {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(244,232,229,.66); background: none; border: 0; cursor: pointer; padding: 0;
}
.mf__top:hover { color: #fff; }
.mf__top span {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--crimson-line);
  display: grid; place-items: center; transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.mf__top:hover span { border-color: var(--crimson-accent); transform: translateY(-2px); }
.mf__top svg { width: 15px; height: 15px; }

/* ===== RESPONSIVE ======================================== */
@media (max-width: 900px){
  .mf__main .mf__in { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
  .mf__brand { grid-column: 1 / -1; max-width: 40ch; }
  .mf__offices .mf__in { grid-template-columns: 1fr; }
  .mf__office { border-left: 0; border-top: 1px solid var(--crimson-line); padding-inline: 0; }
  .mf__office:first-child { border-top: 0; margin-left: 0; }
  .mf__office-addr { max-width: none; }
}
@media (max-width: 560px){
  .mf__main .mf__in { grid-template-columns: 1fr; gap: 32px; }
  .mf__engage .mf__in { flex-direction: column; align-items: flex-start; }
  .mf__engage-cta { width: 100%; }
  .mf__bigcta { width: 100%; justify-content: center; }
  .mf__legal-row { flex-direction: column; align-items: flex-start; }
  .mf__legal-right { margin-left: 0; width: 100%; justify-content: space-between; }
}