/* Studio design system. Elementor pages are the reference:
   black / white / Polin + Blauer Nue / yellow #FEFFB3.
   One accent. Five neutrals. One type scale. Two buttons. One radius set. */

@font-face {
  font-family: "Blauer Nue";
  src: url("/wp-content/uploads/2025/10/BlauerNue-Thin.ttf") format("truetype");
  font-weight: 100 500;
  font-display: swap;
}
@font-face {
  font-family: Polin;
  src: url("/wp-content/uploads/2025/10/Polin-Light.woff2") format("woff2");
  font-weight: 200 500;
  font-display: swap;
}
@font-face {
  font-family: Polin;
  src: url("/wp-content/uploads/2025/10/Polin-Bold.woff2") format("woff2");
  font-weight: 600 800;
  font-display: swap;
}

:root {
  /* canvas */
  --mk-black: #000000;
  --mk-white: #ffffff;
  /* five neutrals */
  --mk-ink: #111111;
  --mk-body: #2b2b2b;
  --mk-muted: #6b6b6b;
  --mk-line: #e6e6e6;
  --mk-line-dark: #2a2a2a;
  /* same muted role, lighter so it clears WCAG AA on black */
  --mk-muted-on-dark: #9a9a9a;
  /* the one accent: a fill, with black text on it */
  --mk-yellow: #feffb3;
  /* type scale */
  --mk-sans: Polin, sans-serif;
  --mk-display: "Blauer Nue", Blauer, sans-serif;
  --mk-h1: 32px;
  --mk-h2: 22px;
  --mk-h3: 18px;
  --mk-body-size: 16px;
  --mk-small: 14px;
  --mk-lh-heading: 1.15;
  --mk-lh-body: 1.6;
  /* four radii: images, cards, buttons, circles */
  --mk-radius-sm: 10px;
  --mk-radius-md: 20px;
  --mk-radius-btn: 33px;
  --mk-radius-round: 999px;
  /* spacing, matching the Elementor section rhythm */
  --mk-section: 72px;
  --mk-section-sm: 40px;
  --mk-gutter: clamp(20px, 5vw, 72px);
}

@media (min-width: 768px) {
  :root {
    --mk-h1: 38px;
    --mk-h2: 26px;
    --mk-h3: 20px;
    --mk-body-size: 17px;
  }
}
@media (min-width: 1025px) {
  :root {
    --mk-h1: 44px;
    --mk-h2: 28px;
    --mk-h3: 20px;
  }
}

/* Kit leftovers: purple headings, neon secondary, blue default buttons.
   Point them at the studio palette so widgets that still read the variables match. */
.elementor-kit-5 {
  --e-global-color-primary: var(--mk-ink);
  --e-global-color-secondary: var(--mk-yellow);
  --e-global-color-accent: var(--mk-yellow);
}

body.elementor-kit-5 {
  font-family: var(--mk-sans);
  color: var(--mk-body);
  font-size: var(--mk-body-size);
  line-height: var(--mk-lh-body);
}

/* Theme reset paints every link pink #c36 (4.23:1 on white) and the hover purple #336.
   Inherit the surrounding text colour, which is ink on light and white on dark. */
body.elementor-kit-5 a {
  color: inherit;
}
body.elementor-kit-5 a:hover,
body.elementor-kit-5 a:active,
body.elementor-kit-5 a:focus {
  color: inherit;
}
.elementor-widget-text-editor a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.elementor-widget-text-editor a:hover {
  background: var(--mk-yellow);
  color: var(--mk-black);
}

/* Theme reset also paints raw buttons pink, radius 3px. */
body.elementor-kit-5 button,
body.elementor-kit-5 [type="button"],
body.elementor-kit-5 [type="submit"] {
  font-family: var(--mk-sans);
  font-weight: 700;
  font-size: 16px;
  border-radius: var(--mk-radius-btn);
  border: 1px solid var(--mk-ink);
  background: transparent;
  color: var(--mk-ink);
}
body.elementor-kit-5 .jet-popup__close-button,
body.elementor-kit-5 .elementor-menu-toggle {
  border: 0;
  background: transparent;
  color: inherit;
  border-radius: 0;
  padding: 0;
}

/* Primary: yellow pill, black text. The form submit is the reference. */
.elementor-location-footer .elementor-button[type="submit"],
.mk-btn,
a.mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--mk-yellow) !important;
  color: var(--mk-black) !important;
  border: 0 !important;
  border-radius: var(--mk-radius-btn) !important;
  font-family: var(--mk-sans) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  padding: 14px 22px !important;
  text-decoration: none !important;
  cursor: pointer;
}
.elementor-location-footer .elementor-button[type="submit"]:hover,
.mk-btn:hover,
a.mk-btn:hover {
  background: var(--mk-white) !important;
  color: var(--mk-black) !important;
}

/* Secondary: outline pill. Instagram in the footer is the reference shape. */
.elementor-location-footer .lea-btn .elementor-button,
.mk-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  color: var(--mk-white) !important;
  border: 1px solid var(--mk-white) !important;
  border-radius: var(--mk-radius-btn) !important;
  font-family: var(--mk-sans) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 10px 18px !important;
  text-decoration: none !important;
}
.elementor-location-footer .lea-btn .elementor-button:hover,
.mk-btn-secondary:hover {
  background: var(--mk-yellow) !important;
  color: var(--mk-black) !important;
  border-color: var(--mk-yellow) !important;
}

/* Footer text links stay links, not pills. */
.elementor-location-footer .elementor-widget-button:not(.lea-btn) .elementor-button {
  background: transparent !important;
  color: var(--mk-white) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--mk-sans) !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  padding: 6px 0 !important;
  text-decoration: none !important;
}
.elementor-location-footer .elementor-widget-button:not(.lea-btn) .elementor-button:hover {
  color: var(--mk-yellow) !important;
  background: transparent !important;
}

/* Clickable email and phone. The phone widget was line-height: 1px, which clipped it. */
.elementor-location-footer a.mk-contact,
a.mk-contact {
  color: var(--mk-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  direction: ltr;
  unicode-bidi: isolate;
}
.elementor-1964 .elementor-element.elementor-element-a645725,
.elementor-1964 .elementor-element.elementor-element-383f3fd {
  line-height: 1.5 !important;
  font-size: 16px !important;
}
.elementor-location-footer a.mk-contact:hover {
  background: var(--mk-yellow);
  color: var(--mk-black);
}

/* Type scale for real headings. The homepage hero sentence (.mk-seo-h1) and the
   "Ready. Steady. Site" display line (a div, not a heading) stay as designed. */
body.elementor-kit-5 .elementor-widget-heading h1.elementor-heading-title,
body.elementor-kit-5 h1.elementor-heading-title,
body.elementor-kit-5 h1.mk-page-h1,
body.elementor-kit-5:not(.home) h1.mk-seo-h1 {
  font-family: var(--mk-sans) !important;
  font-size: var(--mk-h1) !important;
  font-weight: 600 !important;
  line-height: var(--mk-lh-heading) !important;
}
body.elementor-kit-5 .elementor-widget-heading h2.elementor-heading-title {
  font-family: var(--mk-sans) !important;
  font-size: var(--mk-h2) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}
body.elementor-kit-5 .elementor-widget-heading h3.elementor-heading-title {
  font-family: var(--mk-sans) !important;
  font-size: var(--mk-h3) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
body.mk-guides h1.elementor-heading-title { color: var(--mk-ink); }

/* ---- shared footer used by the hand-built pages ---- */
.mk-footer {
  background: var(--mk-black);
  color: var(--mk-white);
  margin: var(--mk-section) 0 0;
  padding: var(--mk-section-sm) var(--mk-gutter) 28px;
  position: relative;
  direction: rtl;
  text-align: start;
  letter-spacing: 0;
  font-family: var(--mk-sans);
  font-size: var(--mk-body-size);
  font-weight: 400;
}
.wrap .mk-footer { margin-left: calc(-1 * var(--g, 0px)); margin-right: calc(-1 * var(--g, 0px)); }
.mk-footer-grid {
  display: grid;
  gap: 36px;
}
.mk-footer-lead p {
  margin: 0 0 22px;
  font-size: var(--mk-body-size);
  line-height: 1.6;
  max-width: 46ch;
}
.mk-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.mk-form input[type="text"],
.mk-form input[type="email"],
.mk-form input[type="tel"],
.mk-form input:not([type="checkbox"]):not([type="hidden"]) {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--mk-white);
  border-radius: 0;
  color: var(--mk-white);
  font-family: var(--mk-sans);
  font-size: 16px;
  padding: 10px 0;
  width: 100%;
}
.mk-form input::placeholder { color: var(--mk-muted-on-dark); }
.mk-form input:focus { outline: 2px solid var(--mk-yellow); outline-offset: 2px; }
.mk-consent {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: var(--mk-small);
  line-height: 1.5;
  color: var(--mk-white);
}
.mk-consent a { color: var(--mk-yellow); text-decoration: underline; text-underline-offset: 2px; }
.mk-form .mk-btn { justify-self: start; margin-top: 4px; }
.mk-form-msg { margin: 0; font-size: var(--mk-small); color: var(--mk-yellow); }
.mk-footer-label {
  font-family: var(--mk-sans);
  font-size: 16px;
  margin-bottom: 12px;
}
.mk-footer-social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.mk-footer-social .mk-contact { font-size: 16px; }
.mk-footer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.mk-footer-nav a {
  color: var(--mk-white);
  text-decoration: none;
  font-size: 16px;
  padding: 4px 0;
}
.mk-footer-nav a:hover,
.mk-footer-nav a[aria-current="page"] { color: var(--mk-yellow); }
.mk-footer-display {
  direction: ltr;
  text-align: center;
  font-family: var(--mk-display);
  font-weight: 400;
  font-size: clamp(32px, 8.5vw, 120px);
  line-height: 0.95;
  margin: 28px 0 8px;
  color: var(--mk-white);
}
.mk-badge {
  position: absolute;
  left: var(--mk-gutter);
  bottom: 18px;
  width: 72px;
  height: 72px;
  display: block;
}
.mk-badge img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.mk-badge img:first-child { animation: mk-spin 30s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .mk-badge img:first-child { animation: none; }
}
@keyframes mk-spin { to { transform: rotate(360deg); } }

@media (min-width: 900px) {
  .mk-footer-grid { grid-template-columns: 1.4fr 0.8fr 0.7fr; align-items: start; }
  .mk-form { grid-template-columns: 1fr 1fr 1fr; }
  .mk-consent, .mk-form .mk-btn, .mk-form-msg { grid-column: 1 / -1; }
}

/* Hand-built header, same items and order as the Elementor header.
   Logo on the left, Hebrew nav on the right (the bar itself is LTR). */
header.top {
  background: var(--mk-black);
  color: var(--mk-white);
}
.site-nav {
  display: none;
  direction: rtl;
  gap: clamp(16px, 2.2vw, 40px);
  align-items: center;
}
.site-nav a {
  font-family: var(--mk-sans);
  font-weight: 300;
  font-size: clamp(15px, 1.05vw, 18px);
  color: var(--mk-white);
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a.on { color: var(--mk-yellow); }
.menu-btn {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: var(--mk-white);
  border: 1px solid var(--mk-white);
  border-radius: var(--mk-radius-btn);
  padding: 10px 18px;
  font-family: var(--mk-display);
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
}
.menu-sheet {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--mk-yellow);
  color: var(--mk-black);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 0 8vw;
  transform: translateY(-100%);
  transition: transform 0.45s ease;
  direction: rtl;
}
.menu-sheet.open { transform: none; }
.menu-sheet a {
  font-family: var(--mk-sans);
  font-weight: 700;
  font-size: clamp(28px, 8vw, 48px);
  color: var(--mk-black);
  text-decoration: none;
  line-height: 1.2;
}
.menu-sheet .close {
  position: absolute;
  top: 24px;
  left: 24px;
  background: var(--mk-black);
  color: var(--mk-yellow);
  border: 0;
  border-radius: var(--mk-radius-btn);
  padding: 10px 18px;
  font-family: var(--mk-display);
  font-size: 14px;
  letter-spacing: 1px;
  cursor: pointer;
}
.menu-sheet .wa2 { font-size: 20px; margin-top: 8px; }
@media (min-width: 1025px) {
  .site-nav { display: flex; }
  .menu-btn { display: none; }
}

/* Mobile: three fixed widgets (H/W/A rail, portrait, UserWay) were covering the text.
   The MENU sheet already has the nav, so the rail goes away. The portrait and
   the accessibility button each take one bottom corner, and the footer clears them. */
@media (max-width: 767px) {
  .tal3b-wrap { display: none !important; }
  .elementor-1964 .elementor-element.elementor-element-401c225 {
    position: fixed !important;
    width: 64px !important;
    min-height: 64px !important;
    height: 64px !important;
    bottom: 12px !important;
    left: 12px !important;
    right: auto !important;
    margin: 0 !important;
    z-index: 40;
  }
  .elementor-1964 .elementor-element.elementor-element-7f5459c,
  .elementor-1964 .elementor-element.elementor-element-6e8fbde {
    width: 64px !important;
    max-width: 64px !important;
    height: 64px !important;
  }
  .elementor-1964 .elementor-element.elementor-element-7f5459c img,
  .elementor-1964 .elementor-element.elementor-element-6e8fbde img {
    width: 64px !important;
    height: 64px !important;
  }
  body .uwy,
  body #userwayAccessibilityIcon,
  body .userway_buttons_wrapper {
    top: auto !important;
    bottom: 12px !important;
    left: auto !important;
    right: 12px !important;
  }
  .elementor-location-footer { padding-bottom: 88px; }
  .elementor-1964 .elementor-element.elementor-element-aa73ac7.elementor-hidden-mobile {
    display: flex !important;
    --padding-top: 12px;
    --padding-bottom: 12px;
  }
  .mk-badge { position: fixed; left: 12px; bottom: 12px; width: 64px; height: 64px; z-index: 40; }
  .mk-footer { padding-bottom: 96px; }
  /* link-in-bio rail duplicates the site menu on a narrow screen */
  .rail { display: none !important; }
  .headline { padding-left: 0 !important; }
  .badge { width: 64px !important; height: 64px !important; left: 12px !important; bottom: 12px !important; }
}

/* Mobile header MENU / CLOSE pills use the same radius as every other button. */
.mdw-side-menu-button .elementor-button {
  border-radius: var(--mk-radius-btn) !important;
}

/* Link-in-bio section titles sit on the scale. The hero lockup (.big) stays
   the size it was drawn at. */
body.links .row h3 { font-size: var(--mk-h3); line-height: 1.3; }
body.links .work h2 { font-size: var(--mk-h2); }

/* Hero poster so the first screen is the same frame while the lighter video buffers. */
#hero-vid {
  background: #000 url("/wp-content/uploads/2026/01/hero-poster.jpg") center / cover no-repeat;
}

/* The home works block, reused everywhere: full-width films on the WORK word.
   70vh on desktop, 25vh on mobile, radius 10. The gaps and the side padding
   are where Frame-7-1.webp shows. No white panel, no cream, no captions. */
.mk-films {
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-inline-start: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 0;
  padding: 15vw 7vw 7vw;
  background-color: #000;
  color: #fff;
  /* Clip a viewport-fixed WORK word so it shows in the gaps, the way the
     project pages do, and nowhere else on the page. */
  clip-path: inset(0);
}
.mk-films::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: url("/wp-content/uploads/2025/12/Frame-7-1.webp") center / contain no-repeat;
  pointer-events: none;
  z-index: 0;
}
.mk-films-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
}
.mk-films-list {
  margin-top: calc(15vh / -2);
  margin-bottom: calc(15vh / -2);
}
.mk-films-item {
  padding-top: calc(15vh / 2);
  padding-bottom: calc(15vh / 2);
}
.mk-films .mk-film {
  position: relative;
  display: block;
  container-type: size;
  min-height: 70vh;
  border-radius: 10px;
  overflow: hidden;
  background-color: #111;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  text-decoration: none;
}
.mk-film-title,
.mk-film-sub {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.mk-films .elementor-background-video-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.mk-films video,
.mk-films iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  max-width: none !important;
}
.mk-films video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mk-films iframe {
  width: max(100cqw, calc(100cqh * 16 / 9));
  height: auto;
  aspect-ratio: 16 / 9;
}
@media (max-width: 767px) {
  .mk-films-list {
    margin-top: calc(6vh / -2);
    margin-bottom: calc(6vh / -2);
  }
  .mk-films-item {
    padding-top: calc(6vh / 2);
    padding-bottom: calc(6vh / 2);
  }
  .mk-films .mk-film { min-height: 25vh; }
}
/* A parent painted white or cream must not frame this block. */
.e-con:has(> .mk-films),
.e-con-inner:has(> .mk-films),
.elementor-widget:has(.mk-films),
.elementor-widget:has(.mk-films) > .elementor-widget-container {
  background: #000 !important;
  background-image: none !important;
  padding: 0 !important;
  overflow: visible !important;
}
/* The pinned project title sits at z-index 99. Once the hero has scrolled
   away, chrome.js marks it and the works cards stay uncovered. */
.elementor-widget-theme-post-title.mk-title-released {
  position: absolute !important;
  top: auto !important;
  inset-inline-start: auto !important;
  width: auto !important;
  visibility: hidden !important;
  pointer-events: none !important;
}