/* ==========================================================================
   Mielova — homepage.

   One stylesheet, one system. The landscape photograph is the loudest thing
   on the page; everything after it is quiet commerce furniture: white cards,
   thin borders, one dark button per job.

   Order: tokens · type · header · hero · section header · products ·
   testimonials · features · closing · reveal · responsive · reduced motion.
   ========================================================================== */

.mlh {
  /* The palette lives in mielova-shop.css, which the catalogue shares.
     These are local names for it, not second copies. */
  --ink: var(--mls-ink);
  --forest: var(--mls-forest);
  --forest-deep: var(--mls-forest-deep);
  --honey: var(--mls-honey);
  --honey-deep: var(--mls-honey-deep);
  --honey-ink: var(--mls-honey-ink);
  --paper: var(--mls-paper);
  --panel: var(--mls-panel);
  --white: rgb(var(--mls-surface-rgb));
  --line: var(--mls-line);
  --line-soft: var(--mls-line);
  --copy: var(--mls-copy);
  --muted: var(--mls-muted);

  --display: var(--mls-heading);
  --ui: var(--mls-ui);
  --num: var(--mls-num);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --frame: 22px;
  --r-hero: calc(var(--mls-radius-card) * 1.12);
  --r-card: calc(var(--mls-radius-card) * .78);
  --r-panel: calc(var(--mls-radius-panel) * .8);
  --r-ctl: var(--mls-radius-btn);   /* set by Site Settings -> corner style */

  color: var(--ink);
  background: var(--paper);
  font-size: 1rem;
  line-height: 1.6;
  overflow: clip;
}

/* ------------------------------------------------------------ page + type */

html { scroll-behavior: smooth; }
body:has(.mlh) { background: var(--mls-paper); }
/* The hero owns the top of the page; the promo strip would split it in two. */
body:has(.mlh) > .utility { display: none; }

/* The shared sheet sets Kufi + negative tracking on every heading through
   `html[dir="rtl"] h1`. These selectors are weighted to clear it — Arabic
   never takes letter-spacing, and the homepage headings are Naskh. */
html[dir] .mlh,
html[dir] .mlh button,
html[dir] .mlh input {
  font-family: var(--ui);
  letter-spacing: 0;
}
html[dir] .mlh h1,
html[dir] .mlh h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: 0;
  text-wrap: balance;
}
/* The shared sheet also pins a colour on every h1-h4, which beats inherited
   colour outright — so any heading over a photograph has to say so itself. */
html[dir] .mlh h3 { margin: 0; color: var(--ink); font-family: var(--ui); font-weight: 600; letter-spacing: 0; }
.mlh p { margin: 0; text-wrap: pretty; }
.mlh a { color: inherit; text-decoration: none; }
.mlh [dir="ltr"],
.mlh .num { font-family: var(--num); font-variant-numeric: tabular-nums; }

.mlh-section { padding: clamp(64px, 8vw, 104px) 0; scroll-margin-top: 96px; }

/* Shared button language. Two weights only: solid forest, or quiet link.
   These are anchors, so they carry an extra `.mlh` to clear the
   `.mlh a { color: inherit }` reset above. */
.mlh .mlh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 22px;
  color: var(--honey-ink);
  background: var(--honey);
  border: 1px solid var(--honey);
  border-radius: var(--r-ctl);
  font-family: var(--ui);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;              /* keeps the Arabic optically centred */
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.mlh-btn > span { transform: translateY(1px); }   /* Arabic baseline sits high */
.mlh-btn:hover { background: var(--honey-deep); border-color: var(--honey-deep); }
.mlh-btn:active { transform: translateY(1px); }
.mlh-btn .i { flex: 0 0 auto; width: 16px; height: 16px; }
.mlh .mlh-btn-cream { color: var(--honey-ink); background: var(--honey); border-color: var(--honey); }
.mlh-btn-cream:hover { background: #e7b558; border-color: #e7b558; }

.mlh .mlh-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--forest);
  font-size: .9rem;
  font-weight: 600;
}
/* The shared sheet already mirrors #i-arrow / #i-chev-* under dir="rtl",
   so icons are authored LTR-first. These nudges have to carry that mirror
   forward, and enough weight to beat that rule. */
.mlh-link .i { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.mlh .mlh-link:hover svg.i { transform: translateX(3px); }
html[dir="rtl"] .mlh .mlh-link:hover svg.i { transform: scaleX(-1) translateX(3px); }

/* ---------------------------------------------------------------- header */
/* Home only. One glass surface on the whole page — this is the exception,
   not the design language. Other pages keep the shared .hdr treatment. */

.hdr.hdr-home {
  position: fixed !important;
  top: 40px !important;
  right: auto !important;
  left: 50%;
  z-index: 60;
  width: min(1240px, calc(100% - 88px));
  min-height: 60px;
  margin: 0;
  color: var(--ink) !important;
  background: rgba(250, 249, 244, .8) !important;
  border: 1px solid rgba(255, 255, 255, .6) !important;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(23, 40, 30, .08) !important;
  backdrop-filter: blur(14px) saturate(130%);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  transform: translateX(-50%);
  transition: top .35s var(--ease), width .35s var(--ease), background .3s ease;
}
.hdr.hdr-home.is-scrolled {
  top: 12px !important;
  width: min(1360px, calc(100% - 32px));
  background: rgba(250, 249, 244, .95) !important;
}
.hdr.hdr-home .hdr-bar { min-height: 60px; }
.hdr.hdr-home .hdr-nav { gap: clamp(16px, 2vw, 30px); }
.hdr.hdr-home .hdr-nav a { color: #3f4a41 !important; font-family: var(--ui); font-size: .84rem; font-weight: 500; }
.hdr.hdr-home .hdr-search { width: 44px; min-width: 44px; padding: 0; }
.hdr.hdr-home .hdr-search span { display: none; }
.hdr.hdr-home .mark-img { width: 116px; height: 48px; }

/* ------------------------------------------------------------------ hero */
/* A tall contained photograph with the copy centred over the open sky.
   As the page scrolls the frame eases back — the photo recedes rather than
   simply sliding away. `--hero-shrink` is driven by JS (0 → 1). */

.mlh-hero {
  position: relative;
  height: clamp(600px, 92vh, 900px);
  margin: var(--frame);
  overflow: hidden;
  border-radius: calc(var(--r-hero) + var(--hero-shrink, 0) * 14px);
  transform: scale(calc(1 - var(--hero-shrink, 0) * .07));
  transform-origin: 50% 0;
  isolation: isolate;
  will-change: transform;
}
.mlh-hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* A taller frame crops the sides; hold the hives inside it. */
  object-position: 56% 52%;
}
/* The only gradient on the page, and it exists purely so the headline stays
   readable against the sky. It sits over the sky the copy uses and clears
   the meadow and the hives entirely. */
.mlh-hero-wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(255, 252, 244, .58) 0%, rgba(255, 252, 244, .34) 40%, rgba(255, 252, 244, 0) 68%);
}

.mlh-hero-copy {
  position: absolute;
  z-index: 2;
  inset-block-start: clamp(120px, 17%, 190px);
  inset-inline: 0;
  width: min(680px, calc(100% - 56px));
  margin-inline: auto;
  text-align: center;
}
.mlh-eyebrow {
  margin-bottom: 18px;
  color: #3d5343;
  font-size: .82rem;
  font-weight: 500;
}
html[dir] .mlh-hero h1 {
  color: #0f1c14;
  font-size: clamp(2.35rem, 3.9vw, 3.45rem);
  font-weight: 700;
  line-height: 1.34;
}
.mlh-hero h1 span { display: block; }
.mlh-hero-lede {
  max-width: 42ch;
  margin: 18px auto 0;
  color: #1f2b23;
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.75;
  text-wrap: balance;
}
.mlh-hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; }
/* Secondary is deliberately lighter than primary — one action leads. */
.mlh .mlh-hero-actions .mlh-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  color: #1c2c21;
  background: rgba(255, 253, 247, .74);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: var(--r-ctl);
  font-size: .92rem;
  font-weight: 500;
  line-height: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .25s var(--ease);
}
.mlh-hero-actions .mlh-secondary:hover { background: rgba(255, 255, 255, .92); }
.mlh-hero-actions .mlh-secondary span { transform: translateY(1px); }

/* --------------------------------------------------------- section header */

.mlh-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 20px 32px;
  margin-bottom: clamp(30px, 4vw, 44px);
}
.mlh-head h2 { font-size: clamp(2rem, 3vw, 2.6rem); }
.mlh-head p { margin-top: 10px; color: var(--muted); font-size: .98rem; }

/* -------------------------------------------------------------- products */
/* The grid and the glass card itself are in mielova-shop.css — the catalogue
   uses exactly the same component. Only the homepage section frame is here. */

/* Glass needs something to refract; this is the ground the cards sit on. */
.mlh-products { position: relative; background: var(--paper); }
.mlh-products::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 72% 4%, color-mix(in srgb, var(--mls-honey) 10%, transparent), transparent 72%),
    radial-gradient(900px 560px at 6% 96%, color-mix(in srgb, var(--mls-forest) 5%, transparent), transparent 74%);
}
.mlh-products > .wrap-wide { position: relative; z-index: 1; }

.mlh-products-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  padding: 26px;
  background: var(--white);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
}
.mlh-products-empty img { width: min(320px, 100%); border-radius: var(--r-panel); }
.mlh-products-empty h3 { margin-bottom: 8px; font-size: 1.2rem; }
.mlh-products-empty p { max-width: 46ch; margin-bottom: 18px; color: var(--muted); }

/* ---------------------------------------------------- source problem/answer */

.mlh-trust { padding: clamp(76px, 9vw, 124px) 0; }
.mlh-trust-layout,
.mlh-answer-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(42px, 7vw, 104px);
}
.mlh-trust-copy,
.mlh-answer-copy { max-width: 590px; }
.mlh-trust-label {
  margin-bottom: 16px !important;
  color: var(--honey);
  font-size: .9rem;
  font-weight: 700;
}
html[dir] .mlh .mlh-trust h2 {
  font-size: clamp(2.25rem, 4.4vw, 4.6rem);
  font-weight: 700;
  line-height: 1.18;
}
.mlh-trust-lede {
  max-width: 56ch;
  margin-top: 22px !important;
  font-size: clamp(1rem, 1.25vw, 1.16rem);
  line-height: 1.95;
}

.mlh-trust-problem {
  color: #f8f6ef;
  background: #191b19;
}
html[dir] .mlh .mlh-trust-problem h2 { color: #fff; }
.mlh-trust-problem .mlh-trust-lede { color: #c8cbc4; }

.mlh-source-check {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: clamp(24px, 3.2vw, 42px);
  color: #20231f;
  background: #f7f5ef;
  border-radius: 16px;
  box-shadow: 0 8px 0 rgba(0, 0, 0, .24);
}
.mlh-source-check figcaption {
  margin-bottom: 22px;
  color: #5e625c;
  font-size: .9rem;
  line-height: 1.7;
}
.mlh-source-line {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 104px;
  padding: 18px 0;
  border-bottom: 1px solid #d9d7d0;
}
.mlh-source-line:last-of-type { border-bottom: 0; }
.mlh-source-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: #282b27;
  background: #e8e4da;
  border-radius: 50%;
}
.mlh-source-icon .i { width: 18px; height: 18px; }
.mlh-source-line b { display: block; font-size: 1.02rem; }
.mlh-source-line small { display: block; margin-top: 5px; color: #6b6e68; font-size: .82rem; line-height: 1.65; }
.mlh-source-status {
  min-width: 72px;
  padding: 7px 11px;
  color: #762f25;
  background: #f0ded6;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  text-align: center;
}
.mlh-source-scan {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  top: -2px;
  height: 2px;
  opacity: 0;
  background: var(--honey);
  box-shadow: 0 0 14px rgba(229, 162, 26, .65);
  pointer-events: none;
}

.mlh-trust-solution {
  color: #edf3ed;
  background: #174c34;
}
.mlh-answer-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.mlh-answer-product {
  overflow: hidden;
  margin: 0;
  background: #f7f5ef;
  border-radius: 16px;
}
.mlh-answer-product img { display: block; width: 100%; height: auto; }
html[dir] .mlh .mlh-answer-copy h2 { color: #fff; }
.mlh-answer-copy .mlh-trust-lede { color: #d3e0d7; }
.mlh-honey-route {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 34px 0 32px;
  padding: 0;
  list-style: none;
}
.mlh-honey-route::before,
.mlh-honey-route::after {
  content: "";
  position: absolute;
  top: 20px;
  right: 8%;
  left: 8%;
  height: 2px;
}
.mlh-honey-route::before { background: rgba(255, 255, 255, .2); }
.mlh-honey-route::after {
  background: var(--honey);
  transform: scaleX(1);
  transform-origin: right;
}
.mlh-honey-route li { position: relative; z-index: 1; min-width: 0; text-align: center; }
.mlh-honey-route li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: #203b2d;
  background: var(--honey);
  border-radius: 50%;
}
.mlh-honey-route .i { width: 18px; height: 18px; }
.mlh-honey-route b { display: block; margin-top: 10px; color: #fff; font-size: .86rem; }
.mlh-honey-route small { display: block; margin-top: 3px; color: #b9ccbf; font-size: .71rem; line-height: 1.5; }
.mlh .mlh-answer-cta { color: #33250a; }

/* The two sections tell different stories when they enter the viewport:
   the first scans missing facts, the second completes a visible route. */
.mlh-enhanced .mlh-source-check[data-reveal] .mlh-source-line {
  opacity: .45;
  transform: translateX(-10px);
}
.mlh-enhanced .mlh-source-check[data-reveal].is-in .mlh-source-line {
  opacity: 1;
  transform: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.mlh-enhanced .mlh-source-check[data-reveal].is-in .mlh-source-line:nth-of-type(2) { transition-delay: .12s; }
.mlh-enhanced .mlh-source-check[data-reveal].is-in .mlh-source-line:nth-of-type(3) { transition-delay: .24s; }
.mlh-enhanced .mlh-source-check[data-reveal].is-in .mlh-source-line:nth-of-type(4) { transition-delay: .36s; }
.mlh-enhanced .mlh-source-check[data-reveal].is-in .mlh-source-scan { animation: mlh-scan 1.2s cubic-bezier(.16, 1, .3, 1) .2s both; }
@keyframes mlh-scan {
  0% { opacity: 0; transform: translateY(0); }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translateY(390px); }
}
.mlh-enhanced .mlh-answer-product[data-reveal] {
  opacity: 1;
  clip-path: inset(5% 0 0 0);
  transform: translateY(10px);
}
.mlh-enhanced .mlh-answer-product[data-reveal].is-in {
  opacity: 1;
  clip-path: inset(0);
  transform: none;
  transition: clip-path .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
}
.mlh-enhanced .mlh-answer-copy[data-reveal] .mlh-honey-route::after { transform: scaleX(0); }
.mlh-enhanced .mlh-answer-copy[data-reveal].is-in .mlh-honey-route::after {
  transform: scaleX(1);
  transition: transform 1s cubic-bezier(.16, 1, .3, 1) .2s;
}
.mlh-enhanced .mlh-answer-copy[data-reveal] .mlh-honey-route li { opacity: .5; transform: translateY(8px); }
.mlh-enhanced .mlh-answer-copy[data-reveal].is-in .mlh-honey-route li {
  opacity: 1;
  transform: none;
  transition: opacity .42s var(--ease), transform .42s var(--ease);
}
.mlh-enhanced .mlh-answer-copy[data-reveal].is-in .mlh-honey-route li:nth-child(1) { transition-delay: .18s; }
.mlh-enhanced .mlh-answer-copy[data-reveal].is-in .mlh-honey-route li:nth-child(2) { transition-delay: .34s; }
.mlh-enhanced .mlh-answer-copy[data-reveal].is-in .mlh-honey-route li:nth-child(3) { transition-delay: .5s; }
.mlh-enhanced .mlh-answer-copy[data-reveal].is-in .mlh-honey-route li:nth-child(4) { transition-delay: .66s; }

/* ---------------------------------------------------------- testimonials */

.mlh-testimonials { background: var(--panel); }
.mlh-carousel { position: relative; overflow: hidden; }
.mlh-track {
  display: flex;
  transition: transform .6s var(--ease);
}
.mlh-slide { flex: 0 0 calc((100% - 2 * var(--gap, 20px)) / 3); margin-inline-end: var(--gap, 20px); }
.mlh-slide:last-child { margin-inline-end: 0; }

.mlh-quote {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
  margin: 0;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 13px;
}
.mlh-quote p { color: var(--copy); font-size: .98rem; line-height: 1.85; }
.mlh-quote footer { margin-top: auto; }
.mlh-quote b { display: block; font-size: .92rem; font-weight: 600; }
.mlh-quote span { color: var(--muted); font-size: .82rem; }

.mlh-carousel-foot { display: flex; align-items: center; gap: 14px; margin-top: 26px; }
.mlh-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--forest);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.mlh-arrow:hover { background: var(--white); border-color: #c6cdc3; }
.mlh-arrow[disabled] { opacity: .35; cursor: default; }
.mlh-arrow .i { width: 16px; height: 16px; }
.mlh-dots { display: flex; gap: 7px; margin-inline-start: 4px; }
.mlh-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  background: #c2c9c1;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background .25s var(--ease), width .25s var(--ease);
}
.mlh-dots button[aria-current="true"] { width: 20px; background: var(--forest); border-radius: 4px; }

/* Honest empty state: no invented names, no invented quotes. */
.mlh-noquotes {
  max-width: 62ch;
  padding: 24px 26px;
  color: var(--copy);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 13px;
}
.mlh-noquotes b { display: block; margin-bottom: 7px; color: var(--ink); font-size: .95rem; }

/* -------------------------------------------------------------- features */

.mlh-features { background: var(--paper); }
/* Deliberately not three equal cards: one photographic story holds the left
   of the grid while two short facts stack beside it. */
.mlh-features-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(196px, auto);
  gap: clamp(16px, 1.6vw, 22px);
}

.mlh-story {
  position: relative;
  grid-column: span 7;
  grid-row: span 2;
  overflow: hidden;
  border-radius: var(--r-card);
}
.mlh-story img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mlh-story-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 30px;
  color: #fff;
  /* The beekeepers wear white — the scrim has to be strong enough to read over it. */
  background: linear-gradient(to top, rgba(9, 20, 13, .94) 0%, rgba(9, 20, 13, .78) 28%, rgba(9, 20, 13, .34) 55%, rgba(9, 20, 13, 0) 82%);
}
html[dir] .mlh .mlh-story-text h3 { color: #fff; font-family: var(--display); font-size: clamp(1.35rem, 2vw, 1.7rem); font-weight: 600; line-height: 1.4; }
.mlh-story-text p { max-width: 40ch; margin-top: 10px; color: rgba(255, 255, 255, .88); font-size: .95rem; line-height: 1.7; }

.mlh-field-notes {
  display: flex;
  flex-direction: column;
  grid-column: span 5;
  justify-content: stretch;
  padding: 12px clamp(24px, 3vw, 38px);
  color: #edf3ed;
  background: var(--forest-deep);
  border-radius: var(--r-card);
}
.mlh-field-note {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  flex: 1 1 50%;
  padding: 28px 0;
}
.mlh-field-note + .mlh-field-note { border-top: 1px solid rgba(255, 255, 255, .17); }
.mlh-field-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: #2a351f;
  background: var(--honey);
  border-radius: 50%;
}
.mlh-field-symbol .i { width: 21px; height: 21px; }
html[dir] .mlh .mlh-field-note h3 { color: #fff; font-size: 1.08rem; }
.mlh-field-note p { margin-top: 8px; color: #c4d2c8; font-size: .92rem; line-height: 1.78; }

/* ------------------------------------------------------------- closing cta */

.mlh-closing { padding: 0 0 clamp(64px, 8vw, 104px); background: var(--paper); }
.mlh-closing-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 40px;
  min-height: 280px;
  padding: clamp(36px, 4vw, 54px);
  color: #f3f0e6;
  background: var(--forest-deep);
  border-radius: 16px;
}
.mlh-closing-card > div { max-width: 46ch; }
.mlh-closing-card p:first-child { margin-bottom: 14px; color: var(--honey); font-size: .85rem; font-weight: 500; }
html[dir] .mlh .mlh-closing-card h2 { color: #fff; font-size: clamp(1.9rem, 2.8vw, 2.5rem); }
.mlh-closing-card > div > p:last-child { margin-top: 14px; color: rgba(243, 240, 230, .78); font-size: 1rem; line-height: 1.75; }

/* ---------------------------------------------------------------- motion */
/* Entry only, and only enough to signal hierarchy. */

.mlh-hero-photo { animation: mlh-settle 1.6s var(--ease) both; }
@keyframes mlh-settle { from { transform: scale(1.02); } to { transform: scale(1); } }
@keyframes mlh-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mlh-pop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes mlh-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.mlh-eyebrow { animation: mlh-rise .7s var(--ease) .05s both; }

/* Typewriter. The line box is fixed at the text's own measured width and
   centred, so nothing reflows; the text inside is uncovered right-to-left in
   character-sized steps while a gold caret rides the uncovering edge.
   `--type-w` and `--type-steps` come from JS; with no JS the lines just show. */
.mlh-enhanced .mlh-type {
  position: relative;
  display: block;
  width: var(--type-w, auto);
  max-width: 100%;
  margin-inline: auto;
}
.mlh-enhanced .mlh-type > i {
  display: block;
  font-style: normal;
  white-space: nowrap;
  clip-path: inset(0 0 0 100%);
  animation: mlh-typeline var(--type-dur, .7s) steps(var(--type-steps, 18), end) var(--type-delay, 0s) both;
}
html[dir="ltr"] .mlh-enhanced .mlh-type > i { clip-path: inset(0 100% 0 0); animation-name: mlh-typeline-ltr; }

.mlh-enhanced .mlh-type::after {
  content: "";
  position: absolute;
  inset-block: 14%;
  inset-inline-start: 0;
  width: 2px;
  background: var(--honey);
  animation:
    mlh-caret-move var(--type-dur, .7s) steps(var(--type-steps, 18), end) var(--type-delay, 0s) both,
    mlh-caret .75s steps(1, end) var(--type-delay, 0s) var(--type-blinks, 3) both;
}

@keyframes mlh-typeline { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes mlh-typeline-ltr { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mlh-caret-move { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--type-w, 0px))); } }
html[dir="ltr"] .mlh-enhanced .mlh-type::after { animation-name: mlh-caret-move-ltr, mlh-caret; }
@keyframes mlh-caret-move-ltr { from { transform: translateX(0); } to { transform: translateX(var(--type-w, 0px)); } }

/* A line too long to sit on one row opts out and simply rises in. */
.mlh-enhanced .mlh-type.is-wrapped {
  width: auto;
  animation: mlh-rise .7s var(--ease) var(--type-delay, 0s) both;
}
.mlh-enhanced .mlh-type.is-wrapped > i { clip-path: none; animation: none; }
.mlh-enhanced .mlh-type.is-wrapped::after { content: none; }

.mlh-enhanced .mlh-hero-lede { animation: mlh-rise .7s var(--ease) var(--lede-delay, 1.7s) both; }
.mlh-enhanced .mlh-hero-actions > * { animation: mlh-pop .6s var(--ease) both; }
.mlh-enhanced .mlh-hero-actions > :nth-child(1) { animation-delay: var(--cta-delay, 1.9s); }
.mlh-enhanced .mlh-hero-actions > :nth-child(2) { animation-delay: calc(var(--cta-delay, 1.9s) + .12s); }

.mlh-enhanced [data-reveal] { opacity: 0; transform: translateY(12px); }
.mlh-enhanced [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1100px) {
  .hdr.hdr-home { top: 26px !important; width: calc(100% - 52px); }
  .mlh-trust-layout,
  .mlh-answer-layout { grid-template-columns: 1fr; }
  .mlh-trust-copy,
  .mlh-answer-copy { max-width: 680px; }
  .mlh-answer-product { max-width: 720px; }
  .mlh-story { grid-column: span 12; grid-row: span 1; min-height: 340px; }
  .mlh-field-notes { grid-column: span 12; }
}

@media (max-width: 880px) {
  .mlh-hero-copy { inset-block-start: clamp(104px, 17%, 150px); }
  .mlh-slide { flex-basis: 100%; margin-inline-end: 0; }
}

@media (max-width: 640px) {
  .mlh { --frame: 12px; }
  .hdr.hdr-home { top: 14px !important; width: calc(100% - 24px); border-radius: 12px; }
  .hdr.hdr-home.is-scrolled { top: 8px !important; width: calc(100% - 16px); }

  .mlh-hero { height: min(78vh, 620px); border-radius: 16px; }
  .mlh-hero-photo { object-position: 66% 50%; }
  .mlh-hero-wash { background: linear-gradient(to bottom, rgba(255, 253, 246, .72) 0%, rgba(255, 253, 246, .34) 42%, rgba(255, 253, 246, 0) 68%); }
  /* Sized so the second headline line still fits on one row — that is what
     keeps the typewriter running on a phone instead of falling back. */
  .mlh-hero-copy { inset-block-start: 96px; inset-inline: 12px; width: auto; }
  html[dir] .mlh-hero h1 { font-size: clamp(1.85rem, 8.3vw, 2.4rem); }
  .mlh-hero-lede { margin-top: 14px; font-size: .98rem; }
  .mlh-hero-actions { gap: 10px; margin-top: 22px; }
  .mlh-hero-actions .mlh-btn,
  .mlh-hero-actions .mlh-secondary { flex: 1 1 auto; justify-content: center; }

  .mlh-section { padding: 56px 0; }
  .mlh-head { align-items: start; justify-content: flex-start; }

  .mlh-trust { padding: 66px 0; }
  .mlh-trust-layout,
  .mlh-answer-layout { gap: 34px; }
  html[dir] .mlh .mlh-trust h2 { font-size: clamp(2rem, 10vw, 3rem); }
  .mlh-source-check { padding: 22px 20px; }
  .mlh-source-line { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
  .mlh-source-status { grid-column: 2; justify-self: start; margin-top: -8px; }
  .mlh-honey-route { grid-template-columns: repeat(2, 1fr); gap: 24px 12px; }
  .mlh-honey-route::before,
  .mlh-honey-route::after { display: none; }
  .mlh-field-notes { grid-column: span 12; padding: 8px 22px; }
  .mlh-field-note { grid-template-columns: 42px minmax(0, 1fr); gap: 14px; padding: 24px 0; }
  .mlh-field-symbol { width: 42px; height: 42px; }
  .mlh-closing-card { min-height: 0; padding: 30px 24px; }
  .mlh-closing-card .mlh-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .mlh-hero { transform: none; }
  .mlh-hero-photo,
  .mlh-eyebrow,
  .mlh-enhanced .mlh-hero-lede,
  .mlh-enhanced .mlh-hero-actions > * { animation: none; }
  .mlh-enhanced .mlh-type { width: auto; animation: none; }
  .mlh-enhanced .mlh-type > i { clip-path: none; animation: none; }
  .mlh-enhanced .mlh-type::after { content: none; }
  .mlh-enhanced [data-reveal] { opacity: 1; transform: none; }
  .mlh-enhanced .mlh-source-check[data-reveal] .mlh-source-line,
  .mlh-enhanced .mlh-answer-copy[data-reveal] .mlh-honey-route li { opacity: 1; transform: none; }
  .mlh-enhanced .mlh-source-check[data-reveal].is-in .mlh-source-scan { animation: none; }
  .mlh-enhanced .mlh-answer-product[data-reveal] { clip-path: none; }
  .mlh-enhanced .mlh-answer-copy[data-reveal] .mlh-honey-route::after { transform: none; }
  .mlh-track { transition: none; }
  .mlh-btn,
  .mlh-link .i { transition: none; }
}