/*
Theme Name: Michal Loren
Template: hello-elementor
Text Domain: michal-loren
Version: 1.0
*/

/* =============================================
   DESIGN TOKENS
   ============================================= */
:root {
  --ml-cream:       #FAF7F2;
  --ml-white:       #FFFFFF;
  --ml-blush:       #EDD9C8;
  --ml-blush-light: #F5EDE4;
  --ml-gold:        #C0975A;
  --ml-gold-light:  #D4B896;
  --ml-dark:        #2A2118;
  --ml-text:        #3D3028;
  --ml-text-light:  #7A6E64;
  --ml-border:      #E5DDD5;

  --ml-font-heading: 'Frank Ruhl Libre', 'David Libre', Georgia, serif;
  --ml-font-body:    'Heebo', 'Arial Hebrew', Arial, sans-serif;

  --ml-radius:   4px;
  --ml-shadow:   0 4px 24px rgba(42,33,24,.07);
  --ml-shadow-s: 0 2px 8px rgba(42,33,24,.05);
  --ml-max-w:    900px;
  --ml-max-w-lg: 1100px;
}

/* =============================================
   GLOBAL RESET & BASE
   ============================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  direction: rtl;
  font-size: 17px;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  font-family: var(--ml-font-body);
  background: var(--ml-cream);
  color: var(--ml-text);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ml-gold); text-decoration: none; }
a:hover { color: var(--ml-dark); }

/* =============================================
   TYPOGRAPHY
   ============================================= */
h1, h2, h3, h4 {
  font-family: var(--ml-font-heading);
  color: var(--ml-dark);
  line-height: 1.3;
  font-weight: 500;
}
h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem);   margin-bottom: .5rem; }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }

p { margin-bottom: 1.1rem; }
p:last-child { margin-bottom: 0; }

/* =============================================
   HEADER
   ============================================= */
.ml-header {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ml-border);
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  min-height: 78px;
  box-shadow: var(--ml-shadow-s);
}
.admin-bar .ml-header { top: 32px; }
.ml-header__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.5rem;
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ml-logo {
  font-family: var(--ml-font-heading);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ml-dark);
  letter-spacing: .02em;
  line-height: 1.2;
  flex-shrink: 0;
}
.ml-logo span { display: block; font-size: .75rem; color: var(--ml-text-light); font-family: var(--ml-font-body); letter-spacing: .1em; font-weight: 300; }

/* Nav */
.ml-nav { display: flex; align-items: center; gap: 1.8rem; list-style: none; }
.ml-nav a {
  font-size: .9rem;
  color: var(--ml-text);
  font-weight: 400;
  letter-spacing: .02em;
  transition: color .2s;
  position: relative;
  padding-bottom: 2px;
}
.ml-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  right: 0;
  width: 0;
  height: 1px;
  background: var(--ml-gold);
  transition: width .25s ease;
}
.ml-nav a:hover { color: var(--ml-dark); }
.ml-nav a:hover::after { width: 100%; }
.ml-nav .ml-nav__cta a {
  background: var(--ml-gold);
  color: var(--ml-white);
  padding: 13px 25px;
  border-radius: 4px;
  font-size: 17px;
  font-weight: 500;
  transition: background .2s;
}
.ml-nav .ml-nav__cta a:hover { background: var(--ml-dark); color: var(--ml-white); }

/* Hamburger */
.ml-hamburger { display: none; background: none; border: none; cursor: pointer; padding: .5rem; }
.ml-hamburger span { display: block; width: 24px; height: 2px; background: var(--ml-dark); margin: 5px 0; transition: .3s; }

/* =============================================
   PAGE HEADER (breadcrumb banner — template)
   ============================================= */
.ml-page-header {
  background: var(--ml-blush-light);
  padding: 4rem 1.5rem 3rem;
  text-align: center;
  border-bottom: 1px solid var(--ml-border);
}
.ml-page-header__breadcrumb {
  font-size: .8rem;
  color: var(--ml-text-light);
  margin-bottom: 1rem;
  display: flex;
  gap: .4rem;
  justify-content: center;
  flex-wrap: wrap;
}
.ml-page-header__breadcrumb a { color: var(--ml-text-light); }
.ml-page-header__breadcrumb a:hover { color: var(--ml-gold); }
.ml-page-header__breadcrumb span { color: var(--ml-gold); }

/* =============================================
   MAIN CONTENT
   ============================================= */
.ml-main {
  max-width: var(--ml-max-w);
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

/* DNA sentence */
.ml-dna {
  text-align: center;
  font-family: var(--ml-font-heading);
  font-size: 1.2rem;
  color: var(--ml-text);
  border-top: 1px solid var(--ml-border);
  border-bottom: 1px solid var(--ml-border);
  padding: 1.5rem 1rem;
  margin: 2.5rem 0;
  line-height: 1.6;
}

/* Content sections */
.ml-section { margin-bottom: 2.5rem; }
.ml-section h2 { margin-bottom: .8rem; }
.ml-section h3 { margin: 1.5rem 0 .5rem; color: var(--ml-text); }

/* Tip box */
.ml-tip {
  background: #FFFBF0;
  border-right: 4px solid var(--ml-gold);
  border-radius: var(--ml-radius);
  padding: 1.25rem 1.4rem;
  margin: 2rem 0;
}
.ml-tip__title { font-weight: 700; color: var(--ml-gold); margin-bottom: .4rem; font-size: .95rem; }

/* Warning box */
.ml-warning {
  background: #FFF8F0;
  border-right: 4px solid #D4845A;
  border-radius: var(--ml-radius);
  padding: 1.25rem 1.4rem;
  margin: 2rem 0;
}
.ml-warning__title { font-weight: 700; color: #C0622A; margin-bottom: .4rem; font-size: .95rem; }
.ml-warning ul { padding-right: 1.2rem; }
.ml-warning li { margin-bottom: .4rem; }

/* =============================================
   CONTENT PAGE TYPOGRAPHY
   ============================================= */
.ml-main h2 {
  border-right: 3px solid var(--ml-gold);
  padding-right: .9rem;
  margin-top: 2.8rem;
  margin-bottom: 1rem;
}
.ml-main h3 {
  margin-top: 1.8rem;
  margin-bottom: .5rem;
  color: var(--ml-dark);
}
.ml-main hr {
  border: none;
  border-top: 1px solid var(--ml-gold);
  opacity: .25;
  margin: 2.8rem 0;
}
.ml-main ul { padding-right: 1.4rem; }
.ml-main ul li { margin-bottom: .4rem; }

/* Inline CTA link → mini button */
.ml-main p a[href*="contact"],
.ml-main p a[href*="trial"] {
  display: inline-block;
  border: 1px solid var(--ml-gold);
  color: var(--ml-gold);
  padding: .5rem 1.3rem;
  border-radius: var(--ml-radius);
  font-size: .88rem;
  font-weight: 500;
  transition: background .2s, color .2s;
  text-decoration: none;
}
.ml-main p a[href*="contact"]:hover,
.ml-main p a[href*="trial"]:hover {
  background: var(--ml-gold);
  color: #fff;
}

/* FAQ accordion — <details>/<summary> */
.ml-accordion { margin: 2rem 0; }
.ml-accordion details {
  border-bottom: 1px solid var(--ml-border);
}
.ml-accordion details:first-child { border-top: 1px solid var(--ml-border); }
.ml-accordion summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 0;
  font-family: var(--ml-font-heading);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ml-dark);
  cursor: pointer;
  user-select: none;
}
.ml-accordion summary::-webkit-details-marker { display: none; }
.ml-accordion summary::after {
  content: '+';
  font-size: 1.3rem;
  font-weight: 300;
  color: var(--ml-gold);
  flex-shrink: 0;
  margin-right: 1rem;
  transition: transform .25s;
}
.ml-accordion details[open] summary::after { transform: rotate(45deg); }
.ml-accordion details[open] summary { color: var(--ml-gold); }
.ml-accordion__body {
  padding: 0 0 1.2rem 0;
  color: var(--ml-text);
  font-size: .93rem;
  line-height: 1.85;
}

/* FAQ (legacy) */
.ml-faq { margin: 2.5rem 0; }
.ml-faq h2 { margin-bottom: 1.2rem; }
.ml-faq__item { border-bottom: 1px solid var(--ml-border); padding: 1rem 0; }
.ml-faq__q { font-weight: 600; color: var(--ml-dark); margin-bottom: .4rem; cursor: pointer; }
.ml-faq__a { color: var(--ml-text); }

/* Cards grid — editorial image tiles, same language as the homepage service tiles */
.ml-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem;
  margin: 2rem 0;
}
.ml-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 2px;
  background: var(--ml-dark);
  height: 420px;
  text-decoration: none !important;
  transition: box-shadow .35s ease;
}
.ml-card:hover { box-shadow: 0 16px 48px rgba(42,33,24,.18); }
.ml-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  opacity: .85;
  transition: transform .65s ease, opacity .4s ease;
}
.ml-card:hover .ml-card__img { transform: scale(1.03); opacity: .7; }
.ml-card__img-placeholder { width: 100%; height: 100%; background: var(--ml-blush-light); }
.ml-card__body {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 1.8rem 1.5rem 1.5rem;
  background: linear-gradient(to top, rgba(42,33,24,.94) 0%, rgba(42,33,24,.45) 55%, rgba(42,33,24,0) 100%);
}
.ml-card__title { font-family: var(--ml-font-heading); font-size: 1.15rem; font-weight: 300; color: #FAF7F2; line-height: 1.3; margin-bottom: .4rem; }
.ml-card__desc { font-size: .82rem; color: rgba(250,247,242,.72); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ml-card__arr { display: inline-block; margin-top: .7rem; font-size: .75rem; letter-spacing: .08em; color: var(--ml-gold-light) !important; border-bottom: 1px solid rgba(192,151,90,.35); padding-bottom: 2px; transition: border-color .2s; }
.ml-card:hover .ml-card__arr { border-color: var(--ml-gold-light); }
/* Full-card overlay link — kept as an empty leaf <a> so WordPress's content
   balancer never sees block-level children inside an <a> and mangles the markup.
   Named ml-card__hitarea (not ml-card__link) to avoid colliding with the
   unrelated .ml-card__link used by the guide/blog card pattern elsewhere. */
.ml-card__hitarea { position: absolute; inset: 0; z-index: 3; text-indent: -9999px; overflow: hidden; }

@media (max-width: 600px) {
  .ml-cards { grid-template-columns: 1fr; }
  .ml-card { height: 340px; }
}

/* =============================================
   CONTENT IMAGE UTILITIES (gallery, hero, float)
   ============================================= */

/* Hero image at top of page content */
img.ml-content-hero {
  width: 100%;
  height: 480px;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: var(--ml-radius);
  margin-bottom: 2.5rem;
}

/* Gallery grid images — fixed height, always cropped */
img.ml-gallery-img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 4px;
}

/* In-text floating images */
img.ml-float-right {
  float: right;
  width: 44%;
  max-width: 420px;
  height: auto;
  border-radius: 4px;
  margin: 0.2rem 0 1.5rem 2rem;
}
img.ml-float-left {
  float: left;
  width: 44%;
  max-width: 420px;
  height: auto;
  border-radius: 4px;
  margin: 0.2rem 2rem 1.5rem 0;
}
.ml-clearfix { clear: both; }

@media (max-width: 600px) {
  img.ml-float-right,
  img.ml-float-left {
    float: none;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1.5rem 0;
  }
  img.ml-content-hero { height: 240px; }
  img.ml-gallery-img  { aspect-ratio: 3/4; }
}

/* =============================================
   BRIDE GUIDE HUB PAGE
   ============================================= */
.ml-guide-section-title {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  margin: 3rem 0 1.5rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--ml-gold);
  display: inline-block;
}
/* Most-read: 4 cards in a row */
.ml-guide-featured { margin: 0 0 3rem; }
.ml-guide-featured__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
/* All posts: 3 columns */
.ml-guide-all { margin: 2rem 0 4rem; }
.ml-guide-all__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
/* Pillar text spacing */
.ml-guide-pillar { max-width: 860px; margin: 0 auto 1rem; }
/* Card link — full card clickable */
.ml-card__link { display: block; color: inherit; text-decoration: none; }
.ml-card__link:hover { color: inherit; }
/* Date meta line */
.ml-card__meta { font-size: .78rem; color: var(--ml-text-light); margin-bottom: .3rem; }

@media (max-width: 900px) {
  .ml-guide-featured__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ml-guide-featured__grid,
  .ml-guide-all__grid { grid-template-columns: 1fr; }
}

/* CTA button */
.ml-cta-btn {
  display: inline-block;
  background: var(--ml-gold);
  color: var(--ml-white);
  padding: .75rem 2rem;
  border-radius: var(--ml-radius);
  font-weight: 600;
  font-size: 1rem;
  transition: background .2s;
  margin-top: .5rem;
}
.ml-cta-btn:hover { background: var(--ml-dark); color: var(--ml-white); }
.ml-cta-block { text-align: center; margin: 3rem 0 1rem; }
.ml-cta-block p { color: var(--ml-text-light); margin-bottom: 1rem; }

/* Divider */
.ml-divider { border: none; border-top: 1px solid var(--ml-border); margin: 2.5rem 0; }

/* =============================================
   FOOTER
   ============================================= */
.ml-footer {
  background: var(--ml-dark);
  color: rgba(255,255,255,.7);
  padding: 3rem 1.5rem 1.5rem;
}
.ml-footer__inner {
  max-width: var(--ml-max-w-lg);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
}
.ml-footer__logo { font-family: var(--ml-font-heading); font-size: 1.4rem; color: var(--ml-white); margin-bottom: .5rem; }
.ml-footer__tagline { font-size: .85rem; color: rgba(255,255,255,.5); }
.ml-footer h4 { color: var(--ml-white); font-size: .9rem; letter-spacing: .08em; margin-bottom: .8rem; font-family: var(--ml-font-body); font-weight: 600; }
.ml-footer ul { list-style: none; }
.ml-footer ul li { margin-bottom: .4rem; }
.ml-footer ul a { color: rgba(255,255,255,.65); font-size: .875rem; transition: color .2s; }
.ml-footer ul a:hover { color: var(--ml-gold-light); }
.ml-footer__bottom {
  max-width: var(--ml-max-w-lg);
  margin: 2rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.1);
  text-align: center;
  font-size: .8rem;
  color: rgba(255,255,255,.35);
}

/* =============================================
   HOMEPAGE SPECIFIC
   ============================================= */
.ml-home-hero {
  background: var(--ml-blush-light);
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
  position: relative;
  overflow: hidden;
}
.ml-home-hero__content { position: relative; z-index: 1; max-width: 680px; }
.ml-home-hero h1 { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1rem; }
.ml-home-hero p { font-size: 1.1rem; color: var(--ml-text-light); margin-bottom: 2rem; }
.ml-home-hero__badge { display: inline-block; font-size: .78rem; letter-spacing: .15em; color: var(--ml-gold); text-transform: uppercase; margin-bottom: 1.2rem; }

.ml-section-title {
  text-align: center;
  margin-bottom: 2.5rem;
}
.ml-section-title h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.ml-section-title p { color: var(--ml-text-light); max-width: 520px; margin: .5rem auto 0; font-size: .95rem; }

.ml-services { padding: 4rem 1.5rem; width: 100%; }
.ml-services > .ml-section-title,
.ml-services > .ml-cards { max-width: var(--ml-max-w-lg); margin-left: auto; margin-right: auto; }
.ml-testimonials { background: var(--ml-white); padding: 4rem 1.5rem; }
.ml-testimonials__inner { max-width: var(--ml-max-w); margin: 0 auto; }
.ml-testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 2rem; margin-top: 2rem; }
.ml-testimonial {
  background: var(--ml-cream);
  border-radius: var(--ml-radius);
  padding: 2rem 1.8rem 1.6rem;
  border: 1px solid var(--ml-border);
}
.ml-testimonial__quote { display: block; font-family: Georgia, serif; font-size: 3.2rem; line-height: .9; color: var(--ml-gold); opacity: .3; margin-bottom: .5rem; }
.ml-testimonial p { font-size: .9rem; color: var(--ml-text); font-style: italic; line-height: 1.85; margin-bottom: 1.2rem; }
.ml-testimonial__author { font-weight: 600; font-size: .85rem; color: var(--ml-dark); }
.ml-testimonial__author span { font-weight: 400; color: var(--ml-gold); margin-right: .35rem; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 768px) {
  .ml-nav { display: none; }
  .ml-hamburger { display: block; }
  .ml-footer__inner { grid-template-columns: 1fr 1fr; }
  .ml-home-hero { min-height: 70vh; }
}
@media (max-width: 540px) {
  .ml-footer__inner { grid-template-columns: 1fr; }
  .ml-main { padding: 2rem 1rem 3rem; }
}

/* =============================================
   HERO COMPONENT  ·  .ml-hero
   Used on all hairstyle sub-pages.
   Modifier classes control text position:
     .ml-hero--pos-right  (default — RTL start)
     .ml-hero--pos-left
     .ml-hero--pos-center
   ============================================= */
.ml-hero {
  position: relative;
  height: clamp(480px, 60vh, 680px);
  margin: -2rem -2rem 2.8rem;
  overflow: hidden;
  direction: rtl;
}

.ml-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Gradient — direction adapts to text position */
.ml-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ml-hero--pos-right::after {
  background: linear-gradient(
    270deg,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.90) 38%,
    rgba(255,255,255,.45) 58%,
    rgba(255,255,255,0)   70%
  );
}
.ml-hero--pos-left::after {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.82) 0%,
    rgba(255,255,255,.42) 30%,
    rgba(255,255,255,0)   58%
  );
}
.ml-hero--pos-center::after {
  background: radial-gradient(
    ellipse 55% 65% at 50% 50%,
    rgba(255,255,255,.70) 0%,
    rgba(255,255,255,0)   100%
  );
}

/* Content box */
.ml-hero__content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  max-width: 480px;
  padding-inline: clamp(24px, 6vw, 100px);
  text-align: right;
  direction: rtl;
}
.ml-hero--pos-right .ml-hero__content { right: 0; left: auto; padding-left: 0; }
.ml-hero--pos-left  .ml-hero__content { left: 0; right: auto; padding-right: 0; }
.ml-hero--pos-center .ml-hero__content {
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: 520px;
  padding-inline: 24px;
}

/* Typography */
.ml-hero__content h1 {
  font-family: var(--ml-font-heading);
  font-size: clamp(40px, 4vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--ml-dark);
  margin: 0 0 .65rem;
}
.ml-hero__content p {
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.5;
  color: var(--ml-dark);
  margin: 0 0 1.4rem;
}

/* CTA button */
.ml-hero__cta {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  min-height: 46px;
  background: var(--ml-gold);
  color: #fff !important;
  font-size: .87rem;
  font-weight: 600;
  letter-spacing: .06em;
  border-radius: 3px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .22s;
}
.ml-hero__cta:hover { background: #a8813a; color: #fff !important; }
.ml-hero__cta:focus-visible {
  outline: 2px solid var(--ml-gold);
  outline-offset: 3px;
}

/* Tablet */
@media (max-width: 1024px) and (min-width: 769px) {
  .ml-hero { height: clamp(430px, 55vh, 580px); }
}

/* Mobile */
@media (max-width: 768px) {
  .ml-hero { height: clamp(360px, 48vh, 460px); }
  .ml-hero--pos-right .ml-hero__content,
  .ml-hero--pos-left  .ml-hero__content,
  .ml-hero--pos-center .ml-hero__content {
    right: 0; left: 0;
    transform: translateY(-50%);
    text-align: right;
    max-width: 100%;
    padding-inline: 20px;
  }
  .ml-hero__content h1 { font-size: clamp(30px, 9vw, 42px); }
  .ml-hero__content p  { font-size: 17px; line-height: 1.45; }
}

/* =============================================
   HOME HERO  ·  .ml-home-hero
   קומפוזיציה דו-עמודית: תמונה משמאל, טקסט מימין
   ============================================= */
.ml-home-hero {
  width: 100%;
  padding-top: clamp(70px, 6vw, 85px);
  padding-bottom: clamp(60px, 6vw, 80px);
  background: linear-gradient(180deg, #faf7f2, #f7f3ed);
  direction: rtl;
}
.ml-home-hero__inner {
  max-width: 1440px;
  width: calc(100% - 80px);
  margin: 0 auto;
  min-height: 650px;
  display: grid;
  grid-template-columns: 54% 46%;
  column-gap: clamp(70px, 6vw, 80px);
  align-items: center;
  direction: ltr; /* התמונה (child ראשון) נשארת בצד שמאל */
}
.ml-home-hero__media {
  position: relative;
  width: 100%;
  height: clamp(700px, 48vw, 760px);
  overflow: hidden;
  border-radius: 4px;
  opacity: 0;
  animation: mlHeroRise .8s ease forwards;
}
.ml-home-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left 35%;
  display: block;
}
/* מעבר רך בקצה התמונה הצמוד לטקסט, לתוך צבע הרקע — לא נוגע בקובץ התמונה עצמו */
.ml-home-hero__media::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(40px, 4vw, 60px);
  background: linear-gradient(to right, transparent, #f7f3ed);
  pointer-events: none;
}
.ml-home-hero__content {
  direction: rtl;
  max-width: 570px;
  position: relative;
  z-index: 2;
  text-align: right;
  transform: translateY(-45px);
}
.ml-home-hero__h1 {
  font-family: var(--ml-font-heading);
  font-size: clamp(52px, 4.2vw, 76px);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: #2f271f;
  margin: 0 0 26px;
  max-width: 520px;
  opacity: 0;
  animation: mlHeroRise .8s ease forwards;
  animation-delay: .2s;
}
.ml-home-hero__sub {
  font-size: 21px;
  line-height: 1.65;
  font-weight: 400;
  color: #887d72;
  max-width: 520px;
  margin: 0 0 34px;
  opacity: 0;
  animation: mlHeroRise .8s ease forwards;
  animation-delay: .2s;
}
.ml-home-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 34px;
  border-radius: 4px;
  background: #c69b5d;
  color: #fff !important;
  font-size: 19px;
  font-weight: 600;
  border: none;
  box-shadow: none;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .25s ease, transform .25s ease;
  opacity: 0;
  animation: mlHeroRise .8s ease forwards;
  animation-delay: .4s;
}
.ml-home-hero__cta:hover {
  background: #ad824a;
  color: #fff !important;
  transform: translateY(-1px);
}
.ml-home-hero__cta:focus-visible {
  outline: 2px solid var(--ml-gold);
  outline-offset: 3px;
}

@keyframes mlHeroRise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .ml-home-hero__media,
  .ml-home-hero__h1,
  .ml-home-hero__sub,
  .ml-home-hero__cta { animation: none; opacity: 1; }
}

/* Tablet — still 2 columns, tighter proportions */
@media (max-width: 1024px) and (min-width: 901px) {
  .ml-home-hero__inner { column-gap: clamp(40px, 5vw, 60px); }
  .ml-home-hero__content { max-width: 400px; }
  .ml-home-hero__h1 { font-size: clamp(44px, 4.6vw, 60px); }
}

/* Mobile — single column, text first, image below */
@media (max-width: 900px) {
  .ml-home-hero__inner {
    width: 100%;
    padding-inline: 22px;
    min-height: 0;
    grid-template-columns: 1fr;
    direction: rtl;
    gap: 40px;
  }
  .ml-home-hero__media { order: 2; height: clamp(480px, 60vw, 560px); }
  .ml-home-hero__media::after { display: none; }
  .ml-home-hero__content {
    order: 1;
    max-width: none;
    text-align: right;
    transform: none;
  }
  .ml-home-hero__img { object-position: 28% center; }
  .ml-home-hero__h1 { font-size: clamp(40px, 8vw, 48px); }
}

@media (max-width: 600px) {
  .ml-home-hero { padding-top: 45px; }
  .ml-home-hero__inner { gap: 35px; }
  .ml-home-hero__media { height: 460px; }
  .ml-home-hero__h1 { font-size: 39px; line-height: 1.12; }
  .ml-home-hero__cta { width: 100%; }
}