/* ==========================================================================
   Mona Moradian Portfolio — theme styles
   --------------------------------------------------------------------------
   • Every color comes from the WordPress palette
     (Appearance → Editor → Styles → Colors → Palette), so changing a color
     there changes it everywhere.
   • Written with logical properties (inline-start / inline-end), so the
     same rules work for English (LTR) and Persian (RTL).
   • Class names starting with "mm-" are added to blocks in
     Block settings → Advanced → Additional CSS class(es).
   ========================================================================== */

:root{
  --mm-ink: var(--wp--preset--color--ink, #1c1424);
  --mm-ink-soft: var(--wp--preset--color--ink-soft, #5c5468);
  --mm-paper: var(--wp--preset--color--paper, #ffffff);
  --mm-lavender: var(--wp--preset--color--lavender, #f2eef8);
  --mm-lavender-dim: var(--wp--preset--color--lavender-dim, #e7e1f1);
  --mm-accent: var(--wp--preset--color--accent, #c11f6b);
  --mm-accent-dark: var(--wp--preset--color--accent-dark, #9c1857);
  --mm-night: var(--wp--preset--color--night, #241531);
  --mm-divider: var(--wp--preset--color--divider, #d9d2e6);

  --mm-radius: 20px;
  --mm-header-h: 78px;
  --mm-admin-bar: var(--wp-admin--admin-bar--height, 0px);
  --mm-sticky-top: calc(var(--mm-header-h) + var(--mm-admin-bar));
}

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--mm-sticky-top) + 20px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

/* Persian pages use Vazirmatn automatically */
html[dir="rtl"] body,
html[dir="rtl"] .mm-header{
  font-family: var(--wp--preset--font-family--vazirmatn);
}

/* ---------- Page frame ---------- */
.wp-site-blocks{ padding:0; }
.wp-site-blocks > .mm-main,
.wp-site-blocks > .mm-footer-part{ margin-block-start:0; }

.mm-main{ padding-top:var(--mm-header-h); }

.mm-inner{
  box-sizing:border-box;
  max-width:1180px;
  margin-inline:auto;
  padding-inline:32px;
}

:root [class*="mm-"],
:root [class*="mm-"] *{ box-sizing:border-box; }

:root figure.wp-block-image{ margin:0; }
:root figure.wp-block-image img{ display:block; }
:where([class*="mm-"]) figure.wp-block-image img,
figure.wp-block-image:where([class*="mm-"]) img{ width:100%; height:auto; }
/* grid / flex children may shrink below their image's natural size */
:root [class*="mm-"] > *{ min-width:0; }
:root .wp-block-embed{ margin:0; }

/* Tight text groups: the theme sets the spacing itself instead of WordPress's default gap */
:root :is(.mm-role, .mm-case-text, .mm-case-text-full, .mm-col, .mm-hero-copy, .mm-about-col,
          .mm-stat, .mm-trio-item, .mm-icon-pair-body, .mm-tab-panel, .mm-photo-caption,
          .mm-media-stack, .mm-narrow, .mm-reveal, .mm-reveal-group, .mm-case, .mm-showcase,
          .mm-showcase-pin, .mm-hero-pin, .mm-about, .mm-divider-color) > *{
  margin-block-start:0;
}

.mm-archive{ padding-block:56px 80px; }

/* ==========================================================================
   HEADER (rendered by the "Site Header" block)
   ========================================================================== */
.mm-header{
  position:fixed;
  top:var(--mm-admin-bar);
  inset-inline:0;
  z-index:100;
  background:var(--mm-paper);
  box-shadow:0 1px 0 var(--mm-lavender-dim);
  font-size:14px;
}

.mm-header-inner{
  max-width:1180px;
  margin-inline:auto;
  padding-inline:32px;
  height:var(--mm-header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.mm-brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--mm-ink);
  flex-shrink:0;
}
.mm-brand:hover{ color:var(--mm-ink); }

.mm-brand-mark{
  width:34px; height:34px;
  border-radius:9px;
  background:var(--mm-ink);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.mm-brand-mark img{ width:20px; height:auto; display:block; }
.mm-brand-mark--custom{ background:transparent; }
.mm-brand-mark--custom img{ width:100%; height:100%; object-fit:contain; }

.mm-brand-name{
  font-size:13px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.mm-nav-links{
  display:flex;
  align-items:center;
  gap:34px;
  list-style:none;
  margin:0; padding:0;
}

.mm-nav-links a,
.mm-mega-btn{
  color:var(--mm-ink-soft);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  text-transform:uppercase;
  transition:color .15s ease;
}
html[dir="rtl"] .mm-nav-links a,
html[dir="rtl"] .mm-mega-btn{ text-transform:none; font-weight:600; }

.mm-nav-links a:hover,
.mm-nav-links .current-menu-item > a{ color:var(--mm-ink); }

.home .mm-hide-on-home{ display:none !important; }

/* Work mega-menu */
.mm-has-mega{ position:relative; }

.mm-mega-btn{
  display:flex; align-items:center; gap:6px;
  background:none; border:0; padding:0;
  font-family:inherit; cursor:pointer;
}
.mm-mega-btn svg{ width:10px; height:10px; transition:transform .2s ease; }

.mm-has-mega:hover .mm-mega-btn,
.mm-has-mega.is-open .mm-mega-btn{ color:var(--mm-ink); }
.mm-has-mega:hover .mm-mega-btn svg,
.mm-has-mega.is-open .mm-mega-btn svg{ transform:rotate(180deg); }

.mm-mega{
  position:absolute;
  top:calc(100% + 18px);
  left:50%;
  transform:translateX(-50%) translateY(6px);
  width:520px;
  background:var(--mm-paper);
  border-radius:16px;
  box-shadow:0 18px 48px rgba(28,15,38,.16);
  border:1px solid var(--mm-lavender-dim);
  display:grid;
  grid-template-columns:200px 1fr;
  overflow:hidden;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:20;
}
/* invisible bridge so the menu doesn't close while the mouse travels down */
.mm-mega::before{ content:""; position:absolute; inset-inline:0; top:-20px; height:20px; }

.mm-has-mega:hover .mm-mega,
.mm-has-mega:focus-within .mm-mega,
.mm-has-mega.is-open .mm-mega{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.mm-mega-list{
  display:flex; flex-direction:column; gap:2px;
  padding:14px;
  background:var(--mm-lavender);
  list-style:none; margin:0;
}
.mm-nav-links .mm-mega-list a{
  display:block;
  border-radius:9px;
  padding:12px 14px;
  font-size:13px;
  font-weight:600;
  text-transform:none;
  line-height:1.4;
  color:var(--mm-ink-soft);
  transition:background .15s ease, color .15s ease;
}
.mm-nav-links .mm-mega-list a:hover,
.mm-nav-links .mm-mega-list a.is-active{
  background:var(--mm-paper);
  color:var(--mm-accent);
}

.mm-mega-preview{ padding:16px; display:flex; }
.mm-mega-preview-box{
  flex:1;
  border-radius:12px;
  background:var(--mm-lavender);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px;
  min-height:180px;
  padding:20px;
  text-align:center;
}
.mm-mega-preview-box img{ width:112px; height:112px; border-radius:10px; object-fit:cover; display:block; }
.mm-mega-preview-box img[src=""]{ display:none; }
.mm-mega-preview-label{ font-size:12px; font-weight:700; color:var(--mm-ink-soft); }

/* Right side: language switch + CV button + mobile burger */
.mm-header-actions{ display:flex; align-items:center; gap:14px; }

.mm-lang{
  display:flex;
  gap:2px;
  padding:3px;
  border-radius:10px;
  background:var(--mm-lavender);
}
.mm-lang a{
  display:block;
  padding:6px 10px;
  border-radius:8px;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  color:var(--mm-ink-soft);
  text-decoration:none;
}
.mm-lang a:hover{ color:var(--mm-ink); }
.mm-lang a.is-current{ background:var(--mm-paper); color:var(--mm-accent); }
.mm-lang a[lang^="fa"]{ font-family:var(--wp--preset--font-family--vazirmatn); font-size:13.5px; padding-block:4px; }

.mm-cv-btn{
  display:inline-block;
  background:var(--mm-accent);
  color:#fff;
  text-decoration:none;
  padding:11px 22px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
  transition:background .15s ease;
}
.mm-cv-btn:hover,
.mm-cv-btn:focus{ background:var(--mm-accent-dark); color:#fff; }

.mm-burger{
  display:none;
  width:40px; height:40px;
  border:0; border-radius:10px;
  background:var(--mm-lavender);
  color:var(--mm-ink);
  cursor:pointer;
  align-items:center; justify-content:center;
}
.mm-burger svg{ width:20px; height:20px; }

.mm-mobile-panel{
  display:none;
  border-top:1px solid var(--mm-lavender-dim);
  background:var(--mm-paper);
  padding:12px 24px 24px;
  max-height:calc(100vh - var(--mm-sticky-top));
  overflow-y:auto;
}
.mm-mobile-panel ul{ list-style:none; margin:0; padding:0; }
.mm-mobile-panel a{
  display:block;
  padding:12px 4px;
  color:var(--mm-ink);
  text-decoration:none;
  font-weight:600;
  border-bottom:1px solid var(--mm-lavender-dim);
}
.mm-mobile-group{ padding:16px 4px 4px; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mm-ink-soft); }
.mm-mobile-panel .mm-mobile-sub a{ padding-inline-start:20px; font-weight:500; color:var(--mm-ink-soft); }
.mm-mobile-panel .mm-cv-btn{ margin-top:16px; border:0; color:#fff; text-align:center; }
.mm-header.is-menu-open .mm-mobile-panel{ display:block; }

@media (max-width: 960px){
  :root{ --mm-header-h: 66px; }
  .mm-header-inner{ padding-inline:20px; }
  .mm-nav, .mm-header-actions > .mm-cv-btn{ display:none; }
  .mm-burger{ display:flex; }
}

/* ==========================================================================
   SHARED PIECES
   ========================================================================== */

/* Buttons (Button block + extra style classes) */
:root .wp-block-buttons{ gap:12px; }
:root .wp-block-button__link{ transition:background .15s ease, border-color .15s ease, color .15s ease; }

.mm-btn-outline .wp-block-button__link{
  background:transparent;
  border:1.5px solid rgba(255,255,255,.6);
  color:#fff;
  padding:11px 26px;
  font-size:13.5px;
  font-weight:600;
}
.mm-btn-outline .wp-block-button__link:hover{ background:rgba(255,255,255,.12); border-color:#fff; color:#fff; }

.mm-btn-light .wp-block-button__link{
  background:var(--mm-paper);
  color:var(--mm-ink);
  padding:12px 26px;
  font-size:13px;
  font-weight:600;
}
.mm-btn-light .wp-block-button__link:hover{ background:var(--mm-lavender-dim); color:var(--mm-ink); }

/* Videos (Embed block — paste an Aparat / YouTube / Vimeo link) */
:root .wp-block-embed .wp-block-embed__wrapper{
  position:relative;
  aspect-ratio:16 / 9;
  border-radius:16px;
  overflow:hidden;
  background:var(--mm-night);
}
:root .wp-block-embed .wp-block-embed__wrapper::before{ display:none; }
:root .wp-block-embed iframe{
  position:absolute; inset:0;
  width:100% !important; height:100% !important;
  border:0; display:block;
}
.mm-aparat{ position:absolute; inset:0; }

/* Carousel (a Group with class mm-carousel; arrows are added automatically) */
.mm-carousel-wrap{ position:relative; width:calc(100% - 56px); margin:0 auto 20px; }

.mm-carousel{
  display:flex;
  gap:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:4px;
  scrollbar-width:none;
}
.mm-carousel::-webkit-scrollbar{ display:none; }
:root .mm-carousel > *{
  flex:0 0 auto;
  width:min(280px, 68vw);
  scroll-snap-align:start;
  margin:0;
}
.mm-carousel figure.wp-block-image{ border-radius:16px; overflow:hidden; background:var(--mm-lavender); }
.mm-carousel figure.wp-block-image img{ aspect-ratio:4 / 5; object-fit:cover; }
:root .mm-carousel--video > *{ width:min(440px, 82vw); }

.mm-carousel-nav{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:16px;
  margin-bottom:40px;
}
.mm-carousel-nav button{
  width:38px; height:38px;
  border-radius:50%;
  border:1.5px solid var(--mm-divider);
  background:var(--mm-paper);
  color:var(--mm-ink);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.mm-carousel-nav button:hover{ background:var(--mm-lavender); border-color:var(--mm-lavender-dim); }
.mm-carousel-nav svg{ width:16px; height:16px; }
html[dir="rtl"] .mm-carousel-nav svg{ transform:scaleX(-1); }

/* Keyboard focus */
.mm-header a:focus-visible,
.mm-header button:focus-visible,
.mm-inner a:focus-visible,
.mm-carousel-nav button:focus-visible,
.mm-tab-btn:focus-visible{
  outline:2px solid var(--mm-accent);
  outline-offset:2px;
}

/* ==========================================================================
   HOME PAGE
   ========================================================================== */

/* Hero: a Group with a background image (Block settings → Styles → Background image) */
.mm-hero-pin{ position:sticky; top:var(--mm-sticky-top); z-index:1; }

:root .mm-hero{
  position:relative;
  margin:8px 0 0;
  border-radius:var(--mm-radius);
  overflow:hidden;
  aspect-ratio:1400 / 839;
  background-color:var(--mm-night);
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
}
/* dark fade on the right side so the text is readable (kept on the right in both languages, because of the photo) */
.mm-hero::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--mm-ink) 15%, transparent) 0%,
    color-mix(in srgb, var(--mm-ink) 55%, transparent) 45%,
    color-mix(in srgb, var(--mm-ink) 94%, transparent) 68%,
    color-mix(in srgb, var(--mm-ink) 97%, transparent) 100%);
  pointer-events:none;
}

:root .mm-hero-copy{
  position:relative;
  max-width:480px;
  margin:0 32px 0 auto;   /* physical right side on purpose */
  padding:48px 56px;
  color:#fff;
}
.mm-hero-copy > *{ margin-block:0; }
:root .mm-hero-title{
  color:#fff;
  font-size:30px;
  font-weight:800;
  line-height:1.35;
  margin:0;
}
:root .mm-hero-desc{
  font-size:14.5px;
  color:rgba(255,255,255,.75);
  margin-top:16px;
}
.mm-hero-copy .wp-block-buttons{ margin-top:22px; }

/* Everything after the hero slides up over it */
:root .mm-reveal{
  position:relative;
  z-index:2;
  background:var(--mm-paper);
  margin-top:-48px;
  padding-top:48px;
  border-radius:28px 28px 0 0;
}

/* Stats */
:root .mm-stats{
  background:var(--mm-lavender);
  border-radius:var(--mm-radius);
  padding:38px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 56px;
}
:root .mm-stat{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:0 56px;
  margin:0;
  text-align:center;
}
.mm-stat + .mm-stat{ border-inline-start:1px solid var(--mm-divider); }
.mm-stat-number{ font-size:34px; font-weight:800; color:var(--mm-ink); line-height:1.3; }
.mm-stat-label{ font-size:13.5px; color:var(--mm-ink-soft); }

/* Experience tabs: each Group "mm-tab-panel" becomes a tab.
   Its first paragraph (class mm-tab-label) is the tab's button text. */
:root .mm-tabs{ margin:0 0 80px; scroll-margin-top:calc(var(--mm-sticky-top) + 20px); }
.mm-tabs.is-ready{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:40px;
  align-items:start;
}
.mm-tab-list{ display:flex; flex-direction:column; gap:12px; grid-column:1; grid-row:1; }
.mm-tab-btn{
  text-align:center;
  background:var(--mm-lavender-dim);
  border:0;
  border-radius:12px;
  padding:16px 20px;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  color:var(--mm-ink-soft);
  cursor:pointer;
  transition:background .18s ease, color .18s ease;
}
.mm-tab-btn:hover{ background:color-mix(in srgb, var(--mm-lavender-dim) 80%, var(--mm-ink-soft)); color:var(--mm-ink); }
.mm-tab-btn.is-active{ background:var(--mm-accent); color:#fff; }

:root .mm-tab-panel{ margin:0 0 32px; }
.mm-tabs.is-ready > .mm-tab-panel{ display:none; grid-column:2; grid-row:1; margin:0; }
.mm-tabs.is-ready > .mm-tab-panel.is-active{ display:block; animation:mm-fade .25s ease; }
.mm-tabs.is-ready .mm-tab-label{ display:none; }
.mm-tab-label{ font-size:18px; font-weight:800; color:var(--mm-accent); margin-bottom:12px !important; }
@keyframes mm-fade{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

:root .mm-role{ margin:0 0 26px; }
.mm-role:last-child{ margin-bottom:0; }
.mm-role-title{ font-size:15px; font-weight:700; color:var(--mm-ink); margin-bottom:4px !important; }
.mm-role-meta{ font-size:13px; color:var(--mm-ink-soft); margin-bottom:2px !important; }
.mm-role-desc{ font-size:13.5px; color:var(--mm-ink-soft); max-width:520px; margin-top:10px !important; line-height:1.85; }

/* Work showcases: tiles pin while the banner below rises over them */
:root .mm-showcase{ margin:0 0 80px; }
.mm-showcase-pin{ position:sticky; top:var(--mm-sticky-top); z-index:1; }
:root .mm-showcase-banner{
  position:relative;
  z-index:2;
  background:var(--mm-paper);
  margin-top:-40px;
  padding-top:40px;
}
:root .mm-banner{
  background:var(--mm-lavender);
  border-radius:var(--mm-radius);
  padding:30px 34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0;
}
.mm-banner > *{ margin:0 !important; }
.mm-banner-title{ font-size:26px; font-weight:800; color:var(--mm-ink); line-height:1.3; }

/* Campaigns grid: three columns (Group mm-grid-col) of labelled tiles (Group mm-cell) */
:root .mm-grid-campaigns{
  display:grid;
  grid-template-columns:249fr 253fr 218fr;
  align-items:start;
  gap:20px;
  width:calc(100% - 56px);
  margin:0 auto 20px;
}
:root .mm-grid-col{ display:flex; flex-direction:column; gap:20px; margin:0; }
:root .mm-cell{ display:flex; flex-direction:column; gap:10px; margin:0; }
.mm-cell > *{ margin:0 !important; }
.mm-cell-label{ font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--mm-ink); }
.mm-cell figure.wp-block-image,
.mm-grid-brand figure.wp-block-image{ border-radius:14px; overflow:hidden; background:var(--mm-lavender); }
.mm-cell figure img,
.mm-grid-brand figure img{ transition:transform .3s ease; }
.mm-cell figure:hover img,
.mm-grid-brand figure:hover img{ transform:scale(1.04); }

/* Brand grid: 2×2 squares (Group mm-grid-small) + one tall image */
:root .mm-grid-brand{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:stretch;
  gap:20px;
  width:calc(100% - 56px);
  margin:0 auto 20px;
}
:root .mm-grid-small{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:0; }
:root .mm-grid-small figure.wp-block-image{ aspect-ratio:1 / 1; }
:root .mm-grid-small figure img{ height:100%; object-fit:cover; }
:root .mm-grid-brand > figure.wp-block-image{ position:relative; min-height:100%; margin:0; }
:root .mm-grid-brand > figure.wp-block-image img{ position:absolute; inset:0; height:100%; object-fit:cover; }

/* About */
:root .mm-about{ margin:0 0 80px; }
:root .mm-about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; margin:0 0 52px; }
.mm-about-grid > *{ margin:0 !important; }
.mm-label{
  display:block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--mm-accent);
  margin-bottom:18px !important;
}
html[dir="rtl"] .mm-label{ letter-spacing:0; font-size:14px; }
.mm-about-text{ font-size:17px; line-height:1.85; color:var(--mm-ink); max-width:480px; }

:root .mm-about-list{ list-style:none; display:flex; flex-direction:column; gap:16px; margin:0; padding:0; }
.mm-about-list li{
  font-size:18px;
  font-weight:700;
  color:var(--mm-ink);
  padding-inline-start:24px;
  position:relative;
}
.mm-about-list li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  top:.72em;
  width:12px; height:2px;
  background:var(--mm-accent);
}

:root .mm-about-cta-row{
  border-top:1.5px solid var(--mm-divider);
  padding-top:40px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:28px;
  margin:0;
}
.mm-about-cta-row > *{ margin:0 !important; }
.mm-about-cta{
  font-size:clamp(24px, 3.6vw, 42px);
  font-weight:800;
  letter-spacing:-.01em;
  line-height:1.15;
}
.mm-about-cta a{
  display:inline-flex;
  align-items:center;
  gap:18px;
  color:var(--mm-ink);
  text-decoration:none;
}
.mm-about-cta a::after{
  content:"";
  width:30px; height:30px;
  flex-shrink:0;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H9M17 7V15'/%3E%3C/svg%3E") center / contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M17 7H9M17 7V15'/%3E%3C/svg%3E") center / contain no-repeat;
  transition:transform .2s ease;
}
html[dir="rtl"] .mm-about-cta a::after{ transform:scaleX(-1); }
.mm-about-cta a:hover{ color:var(--mm-accent); }
.mm-about-cta a:hover::after{ transform:translate(6px, -6px); }
html[dir="rtl"] .mm-about-cta a:hover::after{ transform:scaleX(-1) translate(6px, -6px); }

:root .mm-contacts{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.mm-contacts > *{ margin:0 !important; }
.mm-contact a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 20px;
  border-radius:12px;
  background:var(--mm-lavender);
  color:var(--mm-ink);
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  transition:background .15s ease;
  direction:ltr;         /* emails / phone numbers always read left-to-right */
  unicode-bidi:isolate;
}
.mm-contact a:hover{ background:var(--mm-lavender-dim); color:var(--mm-ink); }
.mm-contact a::before{
  content:"";
  width:18px; height:18px;
  flex-shrink:0;
  background:var(--mm-accent);
  -webkit-mask:var(--mm-icon) center / contain no-repeat;
          mask:var(--mm-icon) center / contain no-repeat;
}
.mm-contact--email{ --mm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E"); }
.mm-contact--linkedin{ --mm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='M8 10v6M8 7.5v.01M12 16v-3.5c0-1.5 1-2.5 2.2-2.5S16 11 16 12.5V16'/%3E%3C/svg%3E"); }
.mm-contact--phone{ --mm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 4h3l1.5 4.5-2 1.5a11 11 0 0 0 5 5l1.5-2 4.5 1.5v3a1.5 1.5 0 0 1-1.6 1.5A16 16 0 0 1 5 10.6 1.5 1.5 0 0 1 6.5 9V4z'/%3E%3C/svg%3E"); }
.mm-contact--instagram{ --mm-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='.8' fill='black'/%3E%3C/svg%3E"); }

/* ==========================================================================
   CASE STUDIES (Campaigns / Brand / Motion pages)
   ========================================================================== */
:root .mm-case{ padding-top:56px; padding-bottom:80px; margin:0; }
:root .mm-case--tight{ padding-top:0; }
:root .mm-case--last{ padding-bottom:110px; }

/* Project name above a case study. Pick its color in Block settings → Styles → Text. */
.mm-case-tag{
  display:block;
  font-size:32px;
  font-weight:800;
  line-height:1.1;
  letter-spacing:.01em;
  color:var(--mm-accent);
  margin-bottom:28px !important;
}
.mm-case-tag--sm{ font-size:24px; margin-bottom:8px !important; }
.mm-case-tag-sub{
  display:block;
  font-size:14px;
  font-weight:600;
  color:var(--mm-ink-soft);
  margin-top:-18px !important;
  margin-bottom:28px !important;
}

:root .mm-case-title{
  font-size:19px;
  font-weight:700;
  color:var(--mm-ink);
  margin:0 0 2px;
  line-height:1.3;
}
:root .mm-case-title--sm{ font-size:17px; }
:root .mm-case-title--xl{ font-size:32px; }
:root .mm-case-title--lg{ font-size:28px; }
.mm-case-subtitle{ font-size:13px; color:var(--mm-ink-soft); margin-bottom:24px !important; }
.mm-case-subhead{ font-size:15px; font-weight:700; color:var(--mm-ink); margin-bottom:6px !important; }
.mm-case-desc{ font-size:14.5px; line-height:1.85; color:var(--mm-ink); }
.mm-case-desc + .mm-case-desc{ margin-top:1.1em !important; }
.mm-case-title + .mm-case-desc{ margin-top:10px !important; }
.mm-case-desc strong{ font-weight:700; }
.mm-case-text > *,
.mm-case-text-full > *{ margin-top:0; }
.mm-case-text-full .wp-block-buttons,
.mm-case-text .wp-block-buttons{ margin-top:24px; }

/* Two-column case study layout: Group "mm-split" with two inner Groups */
:root .mm-split{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:56px;
  align-items:start;
  margin:0;
}
.mm-split > *{ margin:0 !important; min-width:0; }
:root .mm-split--equal{ grid-template-columns:1fr 1fr; }
:root .mm-split--media-left{ grid-template-columns:1.7fr 1fr; }
:root .mm-split--wide-text{ grid-template-columns:1.2fr 1fr; }
:root .mm-split--center{ align-items:center; }
:root .mm-split + .mm-split{ margin-top:44px; }

/* Rounded images inside case studies */
.mm-case figure.wp-block-image,
.mm-reveal-group figure.wp-block-image{ border-radius:16px; overflow:hidden; }

/* Two images side by side */
:root .mm-media-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0; }
.mm-media-row > *{ margin:0 !important; }

/* Big image on top + three below */
:root .mm-media-stack{ display:flex; flex-direction:column; gap:16px; margin:0; }
.mm-media-stack > *{ margin:0 !important; }
:root .mm-media-trio{ display:flex; gap:12px; align-items:stretch; aspect-ratio:286 / 107; margin:0; }
:root .mm-media-trio > figure{ flex:109 0 0; min-width:0; border-radius:14px; background:var(--mm-lavender); }
:root .mm-media-trio > figure:nth-child(2){ flex-grow:75; }
:root .mm-media-trio > figure:nth-child(3){ flex-grow:97; }
:root .mm-media-trio > figure img{ height:100%; object-fit:cover; }

/* Four-column image strip (the third column can be a Group mm-media-stack2 with two images) */
:root .mm-media-grid4{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin:0 0 32px;
  align-items:stretch;
}
.mm-media-grid4 > *{ margin:0 !important; }
:root .mm-media-grid4 > figure{ aspect-ratio:1 / 1; border-radius:14px; background:var(--mm-lavender); }
:root .mm-media-grid4 figure img{ height:100%; object-fit:cover; }
:root .mm-media-stack2{ display:flex; flex-direction:column; gap:8px; }
:root .mm-media-stack2 > figure{ flex:1; min-height:0; margin:0; border-radius:14px; aspect-ratio:2.15 / 1; }
:root .mm-media-stack2 > figure img{ height:100%; object-fit:cover; }

/* square / fixed-shape tiles always follow their column width */
:root :is(.mm-media-grid4, .mm-staircase, .mm-social-row, .mm-grid-small, .mm-divider-pin, .mm-photos) > figure{ width:100%; align-self:start; }

/* Overlapping cards */
:root .mm-cascade{ position:relative; width:100%; aspect-ratio:662 / 104; margin:0 0 32px; }
:root .mm-cascade > figure{
  position:absolute;
  top:0;
  height:100%;
  width:46.68%;
  margin:0;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(28,15,38,.12);
}
:root .mm-cascade > figure img{ height:100%; object-fit:cover; }
.mm-cascade > figure:nth-child(1){ inset-inline-start:0%; z-index:1; }
.mm-cascade > figure:nth-child(2){ inset-inline-start:18.88%; z-index:2; }
.mm-cascade > figure:nth-child(3){ inset-inline-start:35.35%; z-index:3; }
.mm-cascade > figure:nth-child(4){ inset-inline-start:53.32%; z-index:4; }

/* Wide banner image */
:root figure.mm-wide{ margin:0 0 32px; background:var(--mm-lavender); }

/* Three square images in a row */
:root .mm-staircase{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:36px; }
:root .mm-staircase > figure{ aspect-ratio:1 / 1; margin:0; border-radius:12px; background:var(--mm-lavender); }
:root .mm-staircase > figure img{ height:100%; object-fit:cover; }

/* Social media rows */
:root .mm-social-row{ display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; margin:0 0 20px; }
:root .mm-social-row > figure{ margin:0; aspect-ratio:4 / 5; border-radius:10px; background:var(--mm-lavender); }
:root .mm-social-row--square > figure{ aspect-ratio:1 / 1; }
:root .mm-social-row > figure img{ height:100%; object-fit:cover; transition:transform .3s ease; }
.mm-social-row > figure:hover img{ transform:scale(1.06); }
.mm-social-caption{ font-size:13.5px; line-height:1.7; color:var(--mm-ink); margin-bottom:44px !important; max-width:820px; }

/* ==========================================================================
   BRAND & VISUAL IDENTITY PAGE
   ========================================================================== */

/* Big project cover that stays pinned while the project slides over it */
.mm-divider-pin{
  position:sticky;
  top:var(--mm-sticky-top);
  z-index:1;
  background:var(--mm-paper);
  margin:0 !important;
}
:root .mm-divider-pin > figure.wp-block-image{ aspect-ratio:16 / 8; border-radius:64px; overflow:hidden; margin:0; }
:root .mm-divider-pin > figure.wp-block-image img{ height:100%; object-fit:cover; }
:root .mm-divider-color{
  aspect-ratio:16 / 8;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0;
  background:var(--mm-accent);
}
.mm-divider-word{
  font-size:clamp(40px, 7vw, 90px);
  font-weight:800;
  color:#fff;
  letter-spacing:.01em;
  text-align:center;
  line-height:1;
  margin:0 !important;
}

:root .mm-reveal-group{
  position:relative;
  z-index:2;
  background:var(--mm-paper);
  margin:-48px 0 0 !important;
  padding-top:48px;
  padding-bottom:80px;
}
.mm-reveal-group > .mm-case:first-child{ padding-top:56px; }

/* Color swatches: paragraphs with a background color inside Group mm-swatches */
:root .mm-swatches{ display:flex; border-radius:12px; overflow:hidden; margin-top:24px; }
:root .mm-swatches > p{
  flex:1;
  margin:0;
  padding:14px 12px;
  font-size:11px;
  line-height:1.6;
  min-width:0;
  overflow-wrap:anywhere;
}
.mm-swatches strong{ display:block; font-weight:700; text-transform:uppercase; letter-spacing:.02em; margin-bottom:4px; }
:root .mm-swatches--pantone > p{ padding:16px 14px; }

/* Color dots */
:root .mm-dots{ display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
:root .mm-dots > p{
  width:36px; height:36px;
  border-radius:50%;
  margin:0;
  flex-shrink:0;
  font-size:0;
  padding:0;
}

.mm-block-title{ font-size:22px; font-weight:800; color:var(--mm-ink); margin-bottom:10px !important; line-height:1.3; }
.mm-block-title--sm{ font-size:17px; }
.mm-block-title--lg{ font-size:28px; }
.mm-block-title--xl{ font-size:32px; }
.mm-block-desc{ font-size:14px; line-height:1.75; color:var(--mm-ink-soft); margin-bottom:28px !important; }

:root .mm-cols-2,
:root .mm-cols-3{ display:grid; gap:56px; align-items:start; margin:0 0 32px; }
:root .mm-cols-2{ grid-template-columns:1fr 1fr; }
:root .mm-cols-3{ grid-template-columns:repeat(3, 1fr); margin-bottom:44px; }
.mm-cols-2 > *, .mm-cols-3 > *{ margin:0 !important; min-width:0; }

.mm-caps{ letter-spacing:.15em; text-transform:uppercase; font-size:11px; line-height:1.75; color:var(--mm-ink-soft); margin-top:20px !important; }
.mm-script{ font-family:"Segoe Script", "Brush Script MT", cursive; font-size:26px; color:var(--mm-accent); margin-top:8px !important; }
html[dir="rtl"] .mm-script{ font-family:var(--wp--preset--font-family--vazirmatn); font-weight:800; }
.mm-mini-caption{ text-align:center; font-size:11px; color:var(--mm-ink-soft); margin-top:10px !important; }

/* Photo grids */
:root .mm-photos{ display:grid; gap:14px; margin-top:20px; }
.mm-photos > *{ margin:0 !important; min-width:0; }
:root .mm-photos--2{ grid-template-columns:1fr 1fr; }
:root .mm-photos--3{ grid-template-columns:repeat(3, 1fr); }
:root .mm-photos--4{ grid-template-columns:repeat(4, 1fr); }
:root .mm-photos > figure,
.mm-photos .mm-tile,
.mm-photos .mm-photo-caption > figure{ border-radius:14px; overflow:hidden; background:var(--mm-lavender); }
:root .mm-photos--narrow{ max-width:88%; }
.mm-photos .mm-photo-caption{ margin:0; }

/* Logo shown on white with padding (Image block, class mm-mark) */
:root figure.mm-mark{ background:#fff !important; padding:6%; aspect-ratio:1 / 1; }
:root figure.mm-mark img{ height:100%; object-fit:contain; mix-blend-mode:multiply; }
:root figure.mm-mark--small{ padding:20%; }

/* Image sitting on a colored square (Group mm-tile with a background color) */
:root .mm-tile{ margin:0; aspect-ratio:1 / 1; display:flex; }
:root .mm-tile > figure{ margin:0; width:100%; background:transparent !important; }
:root .mm-tile > figure img{ height:100%; object-fit:contain; }

:root .mm-narrow{ max-width:82%; margin:0; }
:root .mm-narrow--end{ max-width:80%; margin-inline-start:auto; }

/* Small icon + text pairs */
:root .mm-icon-pair{ display:flex; gap:12px; align-items:flex-start; margin:0 0 18px; }
.mm-icon-pair > *{ margin:0 !important; }
:root .mm-icon{
  width:34px; height:34px;
  border-radius:8px;
  background:var(--mm-lavender);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-size:16px;
}
.mm-icon-pair-title{ font-size:13px; font-weight:700; color:var(--mm-accent); margin-bottom:2px !important; }
.mm-icon-pair-text{ font-size:12.5px; color:var(--mm-ink-soft); line-height:1.5; }

/* ==========================================================================
   MOTION PAGE
   ========================================================================== */
:root .mm-trio{ display:grid; grid-template-columns:repeat(3, 1fr); gap:40px; margin:0; }
.mm-trio > *{ margin:0 !important; min-width:0; }
.mm-trio .mm-case-title{ margin-top:20px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.mm-footer{
  max-width:1180px;
  margin:0 auto;
  padding:28px 32px 36px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  font-size:12.5px;
  color:var(--mm-ink-soft);
  border-top:1px solid var(--mm-lavender-dim);
}
.mm-footer a{ color:inherit; }

/* ==========================================================================
   MOBILE
   ========================================================================== */
@media (max-width: 860px){
  .mm-inner{ padding-inline:20px; }

  .mm-hero-pin{ position:relative; top:0; }
  :root .mm-hero{ aspect-ratio:auto; min-height:420px; align-items:flex-end; background-position:25% center; }
  .mm-hero::before{ background:linear-gradient(180deg, transparent 20%, color-mix(in srgb, var(--mm-ink) 92%, transparent) 75%); }
  :root .mm-hero-copy{ padding:32px 24px 72px; max-width:100%; margin:0; }
  :root .mm-hero-title{ font-size:24px; }

  :root .mm-stats{ flex-wrap:wrap; gap:20px; }
  :root .mm-stat{ padding:0 20px; }
  .mm-stat + .mm-stat{ border:0; }

  .mm-tabs.is-ready{ grid-template-columns:1fr; gap:24px; }
  .mm-tab-list{ flex-direction:row; flex-wrap:wrap; }
  .mm-tab-btn{ flex:1 1 auto; padding:12px 14px; font-size:14px; }
  .mm-tabs.is-ready > .mm-tab-panel{ grid-column:1; grid-row:2; }

  .mm-showcase-pin{ position:relative; top:0; }
  :root .mm-showcase-banner{ margin-top:0; padding-top:0; }
  :root .mm-grid-campaigns,
  :root .mm-grid-brand{ grid-template-columns:1fr; width:100%; }
  :root .mm-grid-brand > figure.wp-block-image{ aspect-ratio:1 / 1; }
  .mm-carousel-wrap{ width:100%; }
  :root .mm-banner{ flex-direction:column; align-items:flex-start; }
  .mm-banner-title{ font-size:22px; }

  :root .mm-about-grid{ grid-template-columns:1fr; gap:36px; }

  :root .mm-split,
  :root .mm-split--equal,
  :root .mm-split--media-left,
  :root .mm-split--wide-text,
  :root .mm-cols-2,
  :root .mm-cols-3,
  :root .mm-trio{ grid-template-columns:1fr; gap:28px; }

  :root .mm-media-grid4{ grid-template-columns:1fr 1fr; }
  :root .mm-cascade{ aspect-ratio:340 / 104; }
  :root .mm-cascade > figure{ width:60%; }
  .mm-cascade > figure:nth-child(2){ inset-inline-start:13.33%; }
  .mm-cascade > figure:nth-child(3){ inset-inline-start:26.66%; }
  .mm-cascade > figure:nth-child(4){ inset-inline-start:40%; }
  :root .mm-staircase{ grid-template-columns:1fr 1fr; }
  :root .mm-social-row{ grid-template-columns:repeat(3, 1fr); }
  :root .mm-photos--4{ grid-template-columns:repeat(2, 1fr); }
  :root .mm-narrow, :root .mm-narrow--end, :root .mm-photos--narrow{ max-width:100%; }

  :root .mm-divider-pin > figure.wp-block-image{ aspect-ratio:16 / 11; border-radius:32px; }
  :root .mm-divider-color{ aspect-ratio:16 / 11; }
  :root .mm-swatches{ flex-wrap:wrap; }
  :root .mm-swatches > p{ flex:1 1 40%; }
}

@media (prefers-reduced-motion: reduce){
  .mm-hero-pin, .mm-showcase-pin, .mm-divider-pin{ position:relative; top:0; }
  .mm-cell figure img, .mm-grid-brand figure img, .mm-social-row > figure img{ transition:none; }
}

.mm-photos + .mm-block-title{ margin-top:24px !important; }