/* ============================================================
   HOME.CSS - Wong Shu homepage. AESTHETIC: "GoodMeat" dark butcher.
   Dramatic near-black canvas · cleaver-red accents · gold hairline
   frames · cream/white type · sharp corners · full-bleed photo hero.
   Sections: hero · fresh-cuts · category-strip · catalog · stats-band
   · why(+bars) · banner · media · contact. Colors via tokens.
   ============================================================ */

/* ===== logo handled in main.css (cream chip) ===== */

/* shared section-head spacing for left-aligned heads on some sections */
.section-head { margin-bottom: 56px; }

/* ============================================================
   1. HERO - full-bleed dark photo, centered content
   ============================================================ */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  text-align: center; color: var(--white); overflow: hidden;
  padding: 140px 0 90px;
  /* dark fallback behind the video/poster - keeps the transparent ghost CTA
     ("שלחו WhatsApp") readable instantly, before the hero media paints */
  background: var(--bg-dark);
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img,
.hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(130% 100% at 50% 40%, rgba(18,6,6,0.08), rgba(8,3,3,0.30) 85%),
    linear-gradient(180deg, rgba(8,3,3,0.32) 0%, rgba(8,3,3,0.08) 38%, rgba(8,3,3,0.45) 100%);
}
.hero-inner { position: relative; z-index: 2; max-width: 1000px; margin: 0 auto; text-align: center; }
.hero-logo {
  width: auto; height: clamp(110px, 18vw, 220px); object-fit: contain;
  margin: 0 auto 14px; display: block; filter: drop-shadow(0 8px 30px rgba(0,0,0,0.5));
}
.hero-eyebrow {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  letter-spacing: 0.22em; color: var(--white); margin-bottom: 22px;
}
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(44px, 7vw, 96px); font-weight: 500; line-height: 1.0;
  letter-spacing: 0; color: #fff7ec; margin-bottom: 22px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
  white-space: nowrap;
}
.hero-title em { font-style: normal; color: #fff7ec; }
.hero-sub {
  font-size: clamp(15px, 1.6vw, 19px); color: #eeddcb;
  line-height: 1.85; max-width: 640px; margin: 0 auto 38px;
}
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-scroll {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 2; color: var(--cream-soft); cursor: pointer;
  width: 46px; height: 46px; border: 1px solid var(--line-strong); border-radius: 50%;
  display: grid; place-items: center; animation: hbob 2s ease-in-out infinite;
  transition: color 0.2s, border-color 0.2s;
}
.hero-scroll:hover { color: var(--gold); border-color: var(--gold); }
@keyframes hbob { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} }

/* ============================================================
   2. FRESH CUTS - split: framed photo + overlap cards / text + checklist
   ============================================================ */
.fresh { background: #eeddcb; position: relative; z-index: 1; }
/* mosaic spans the full viewport width; vertical breathing room above/below */
.fresh.section { padding-block: clamp(48px, 7vh, 96px); }
.fresh > .container { max-width: none; padding-inline: 0; }
/* ---- Bento collage (photo mosaic + brand panel + feature card) ----
   Brand: dark #240807 · red #950709 · cream #eeddcb · warm gold var(--gold-soft).
   Contained card (max-width) with slightly rounded tiles to match the reference. */
.mosaic {
  display: grid;
  direction: ltr;            /* lay tiles L→R to match the reference (RTL would mirror it) */
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
  height: clamp(540px, 62vh, 700px);
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas:
    "t1 t1 t2    t2    t3   t3"
    "t1 t1 brand brand t5   t5"
    "t4 t4 brand brand feat feat"
    "t4 t4 t6    t7    feat feat";
  gap: 8px;
}
.mosaic-tile {
  margin: 0; padding: 0; list-style: none;
  position: relative; overflow: hidden;
  border-radius: 0; background: #1a0c0b;
}

.m-t1 { grid-area: t1; } .m-t2 { grid-area: t2; } .m-t3 { grid-area: t3; }
.m-t4 { grid-area: t4; } .m-t5 { grid-area: t5; } .m-t6 { grid-area: t6; } .m-t7 { grid-area: t7; }
.m-brand { grid-area: brand; } .m-feat { grid-area: feat; }

/* photo tiles */
.ph picture { display: block; width: 100%; height: 100%; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.ph::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(20,7,6,.34)); }
.ph:hover img { transform: scale(1.06); }

/* central brand panel (red) */
.brand-panel {
  direction: rtl;            /* Hebrew text (grid is LTR) */
  background: #930709; border-radius: 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: clamp(8px, 1vw, 14px); padding: clamp(16px, 1.8vw, 30px);
  text-align: center; box-shadow: inset 0 0 0 1px rgba(238,221,203,.06);
}
.brand-mark { display: flex; align-items: center; gap: 12px; }
.brand-icon { flex: 0 0 auto; display: grid; place-items: center;
  width: clamp(40px, 3.2vw, 52px); height: clamp(40px, 3.2vw, 52px);
  background: #eeddcb; border-radius: 50%; }
.brand-icon img { width: 58%; height: 58%; object-fit: contain; }
.brand-word { display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--font-display); font-weight: 800; color: #eeddcb; line-height: 1;
  font-size: clamp(18px, 1.7vw, 26px); }
.brand-word small { font-size: .42em; letter-spacing: .22em; font-weight: 600;
  color: rgba(238,221,203,.82); }
.brand-title { margin: 0; color: #eeddcb; font-family: var(--font-display);
  font-weight: 700; line-height: 1.14; font-size: clamp(20px, 2.05vw, 32px); white-space: nowrap; }
.brand-title span { display: block; font-weight: 900; font-size: 1.16em; }
.brand-divider { width: 56px; height: 3px; border-radius: 3px; background: #eeddcb; }
.brand-sub { margin: 0; color: #eeddcb; font-weight: 600;
  line-height: 1.45; font-size: clamp(13px, 1.05vw, 17px); }

/* feature card (dark) */
.feat-card { direction: rtl; background: #000;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(16px, 2vh, 30px); padding: clamp(20px, 1.8vw, 34px); }
.feat-card li { display: flex; align-items: center; gap: 14px; }
.feat-card .ft-tx { flex: 1; text-align: start; color: var(--cream); white-space: nowrap;
  font-weight: 700; line-height: 1.3; font-size: clamp(14px, 1.05vw, 18px); }
.feat-card .ft-ic { flex: 0 0 auto; display: grid; place-items: center;
  width: 60px; height: 60px; border-radius: 50%;
  border: 1px solid rgba(238,221,203,.4); }
.feat-card .ft-ic img { width: 80%; height: 80%; object-fit: contain;
  display: block; margin: auto; }

/* top-left advantages panel - same layout + background as the feature card */
.adv-gray { background: #000; }

/* reveal stagger (JS adds .reveal to every .mosaic-tile) */
.mosaic-tile.reveal { transition-duration: .7s; }
.mosaic-tile:nth-child(2)  { transition-delay: .04s; }
.mosaic-tile:nth-child(3)  { transition-delay: .08s; }
.mosaic-tile:nth-child(4)  { transition-delay: .12s; }
.mosaic-tile:nth-child(5)  { transition-delay: .16s; }
.mosaic-tile:nth-child(6)  { transition-delay: .20s; }
.mosaic-tile:nth-child(7)  { transition-delay: .24s; }
.mosaic-tile:nth-child(8)  { transition-delay: .28s; }
.mosaic-tile:nth-child(9)  { transition-delay: .32s; }
.mosaic-tile:nth-child(10) { transition-delay: .36s; }
.mosaic-tile:nth-child(11) { transition-delay: .40s; }
.mosaic-tile:nth-child(12) { transition-delay: .44s; }

/* ---- About (mosaic variant) - experimental alt of the #about section ----
   Reuses the bento system (.mosaic / .mosaic-tile / .brand-panel / .ph) with
   its own grid-areas + a text panel and a stats panel. Sits below #about. */
.about-alt { background: #000; }
.about-mosaic {
  grid-template-rows: repeat(5, 1fr);
  grid-template-areas:
    "text text t1    t1    t2    t2"
    "text text brand brand t3    t3"
    "text text brand brand t3    t3"
    "text text brand brand t3    t3"
    "text text stats stats stats stats";
}
.am-text  { grid-area: text; }
.am-t1    { grid-area: t1; } .am-t2 { grid-area: t2; }
.am-t3    { grid-area: t3; }
.am-brand { grid-area: brand; }
.am-stats { grid-area: stats; }

/* logo lockup inside the red brand panel (replaces the icon+word mark) */
.brand-panel .brand-logo { width: min(82%, 320px); height: auto;
  margin-bottom: clamp(4px, .6vw, 10px); }

/* text panel (cream, mirrors the #about voice) */
.about-panel { direction: rtl; background: #eeddcb;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(12px, 1.4vw, 18px); padding: clamp(22px, 2.2vw, 38px); }
.about-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .08em;
  color: var(--gold); }
.about-title { margin: 0; color: #1f1a1b; font-family: var(--font-display);
  font-weight: 900; line-height: 1.12; font-size: clamp(24px, 2.4vw, 38px); }
.about-title span { color: var(--gold); }
.about-lead { margin: 0; color: #3a3330; line-height: 1.8;
  font-size: clamp(14px, 1.05vw, 16px); }
.about-cta { align-self: flex-start; margin-top: 4px;
  font-size: 14px; font-weight: 800; color: #eeddcb;
  background: var(--gold); padding: 13px 28px; border-radius: var(--radius);
  transition: background .25s, transform .25s; }
.about-cta:hover { background: var(--gold-2); transform: translateY(-2px); }

/* stats panel (dark) */
.about-stats { direction: rtl; background: #190b0a;
  display: flex; align-items: center; justify-content: space-around;
  flex-wrap: wrap; gap: clamp(14px, 2vw, 28px);
  padding: 14px clamp(18px, 1.8vw, 30px); }
.am-stat { display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center; }
.am-stat-num { font-family: var(--font-display); font-weight: 900; line-height: 1;
  color: var(--gold-soft); font-size: clamp(28px, 3vw, 44px); }
.am-stat-lbl { font-size: 13px; font-weight: 600; letter-spacing: .04em;
  color: var(--cream-soft); }

/* ============================================================
   3. CERTIFICATIONS / TRUST STRIP → shared, moved to main.css
   (used by both home and kosher pages)
   ============================================================ */

/* ============================================================
   4. CATALOG - "Nice to Meat You" product grid
   ============================================================ */
/* .catalog section bg + the .prod-* card styles are shared with the catalog
   pages, so the cards now live in main.css. Only home-section specifics here. */
.catalog { background: #000; }

/* ============================================================
   5. STATS - numbers over a dark meat-photo band
   ============================================================ */
.statsband { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 250px; padding: 24px 0; overflow: hidden; }
.statsband-bg { position: absolute; inset: 0; z-index: 0;
  background-color: #1a0a08;
  background-image: linear-gradient(180deg, rgba(16,6,5,0.30), rgba(16,6,5,0.45)), url("/assets/images/brand/wong-shu-bg.jpg"); /* hard fallback */
  background-image:
    linear-gradient(180deg, rgba(16,6,5,0.30), rgba(16,6,5,0.45)),
    image-set(
      url("/assets/images/brand/wong-shu-bg.webp") type("image/webp"),
      url("/assets/images/brand/wong-shu-bg.jpg")  type("image/jpeg")
    );
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.statsband-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); }
.statn {
  text-align: center; color: var(--white); padding: 12px 20px;
  border-inline-start: 1px solid var(--line); position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.statn:first-child { border-inline-start: none; }
.statn .counter, .statn .stat-text {
  font-family: var(--font-display); font-size: clamp(40px, 5.4vw, 66px);
  font-weight: 900; line-height: 1; color: #eeddcb; display: inline-block;
}
.statn .stat-text { color: #eeddcb; }
.statn-num { display: flex; align-items: flex-start; justify-content: center; gap: 2px; }
.statn-plus { font-family: var(--font-display); font-size: clamp(24px, 3vw, 38px); font-weight: 900; color: #eeddcb; line-height: 1; margin-top: 0.1em; }
.statn p { margin-top: 12px; font-size: 13px; color: var(--cream-soft); font-weight: 600; letter-spacing: 0.04em; }

/* ============================================================
   7. BANNER - parallax-style meat photo + centered CTA
   ============================================================ */
.banner { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 250px; padding: 24px 0; overflow: hidden; text-align: center; }
.banner-bg { position: absolute; inset: 0; z-index: 0;
  background-color: #120a08;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  background-image: url("/assets/images/brand/wong-shu-bg.jpg"); /* hard fallback */
  background-image: image-set(
    url("/assets/images/brand/wong-shu-bg.webp") type("image/webp"),
    url("/assets/images/brand/wong-shu-bg.jpg")  type("image/jpeg")
  );
}
.banner-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(16,6,5,0.30), rgba(16,6,5,0.45)); }
.banner-inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.banner-eyebrow { justify-content: center; }
.banner-eyebrow::before { display: none; }
.banner-title { font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 56px); font-weight: 900; line-height: 1.06; color: var(--white); margin-bottom: 16px; direction: rtl; unicode-bidi: plaintext; text-shadow: 0 2px 12px rgba(0,0,0,0.55); }
.banner-title span { color: var(--gold); }
.banner-sub { font-size: 16px; color: var(--cream-soft); line-height: 1.7; margin-bottom: 30px; text-shadow: 0 1px 8px rgba(0,0,0,0.5); }

/* ============================================================
   9. CONTACT - split card (form + contact-info panel), dark
   ============================================================ */
/* The contact split-card layout (.contact-section / .contact-form-wrap /
   .contact-form / .contact-form-info) is shared with the contact page,
   so it lives in main.css. Nothing home-specific remains. */

/* ============================================================
   2b. PRODUCT CATEGORIES - two big cards (בשר / עוף)
   ============================================================ */
/* Pull the black section up to swallow the 1–2px light seam at the
   bottom edge of the .catstrip background image (all viewports). */
.catstrip + .cats { margin-top: -2px; }
.cats { background: #000000; }
.cats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.cat-card {
  position: relative; cursor: pointer; overflow: hidden;
  background: var(--bg-soft);
  transition: transform 0.3s, box-shadow 0.3s;
}
.cat-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(0,0,0,0.5); }
.cat-card-img { aspect-ratio: 16/9; overflow: hidden; }
.cat-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.cat-card:hover .cat-card-img img { transform: scale(1.06); }
.cat-card-body { padding: 26px 28px 30px; }
.cat-card-body h3 { font-family: var(--font-display); font-size: 30px; font-weight: 900; color: var(--white); margin-bottom: 10px; }
.cat-card-body p { font-size: 14.5px; color: var(--cream-soft); line-height: 1.75; margin-bottom: 16px; }
.cat-card-link {
  display: inline-block; font-size: 14px; font-weight: 800; color: #1a1a1a;
  background: #eeddcb; padding: 10px 22px; border-radius: 4px;
  transition: background 0.25s, transform 0.25s;
}
.cat-card:hover .cat-card-link { background: #d4c2ab; }

/* ============================================================
   4b. WHY RESTAURANTS CHOOSE US - ROI grid + comparison table
   ============================================================ */
.choose { background: var(--bg-dark); }
.choose-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 56px; }
.choose-item {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--maroon); border: 1px solid var(--line-gold); padding: 22px 24px;
}
.choose-ic { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--white); font-weight: 900; font-size: 16px; }
.choose-item strong { display: block; font-size: 16.5px; font-weight: 800; color: var(--white); margin-bottom: 5px; }
.choose-item p { font-size: 13.5px; color: var(--cream-soft); line-height: 1.6; }

.compare { max-width: 820px; margin: 0 auto; border: 1px solid var(--line-gold); }
.compare-head, .compare-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; }
.compare-row { border-top: 1px solid var(--line); }
.compare-cell { padding: 16px 18px; font-size: 14.5px; display: flex; align-items: center; }
.compare-label { font-weight: 800; color: var(--cream); background: var(--bg-soft); }
.compare-them { color: var(--text-dim); }
.compare-us { color: var(--white); font-weight: 700; background: rgba(236,0,5,0.06); border-inline-start: 2px solid var(--gold); }
.compare-head .compare-cell { font-family: var(--font-display); font-weight: 900; font-size: 16px; background: var(--bg-soft); }
.compare-head .compare-them { color: var(--text-dim); }
.compare-head .compare-us { color: var(--gold); }

/* ============================================================
   5b. FEATURED PRODUCTS - gallery grid
   ============================================================ */
.featured { background: #eeddcb; }   /* cream section - only photos show (titles/badges hidden) */
.feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
/* gallery cards reuse .feat-card (also styled in the bento) - reset its frame so only the photo shows */
.featured .feat-card { cursor: pointer; padding: 0; background: none; display: block; position: relative; }
.featured .feat-card:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 3px; }
.feat-img { position: relative; aspect-ratio: 1/1; overflow: hidden; background: #0d0404; }
.feat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.feat-card:hover .feat-img img { transform: scale(1.07); }
.feat-badge { display: none; }
.feat-badge-chick { background: var(--gold-soft); color: #1a1a1a; }
/* The gallery is photo-only by design, but the card is a link - display:none would
   strip the product name from the accessibility tree and leave the link named only
   by the image alt. Hide it visually, keep it for AT and for the heading outline. */
.featured .feat-card h3 {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================
   7b. FACTORY - photo gallery (placeholders)
   ============================================================ */
.factory { background: var(--bg-warm); }
.factory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.factory-tile { aspect-ratio: 3/4; overflow: hidden; border: 1px solid var(--line-gold); margin: 0; }
.factory-tile img { width: 100%; height: 100%; object-fit: cover; }
.factory-ph {
  display: grid; place-items: center; background: var(--bg-soft);
  background-image: repeating-linear-gradient(45deg, rgba(238,221,203,0.04) 0 12px, transparent 12px 24px);
}
.factory-ph span { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--text-dim); letter-spacing: 0.04em; }
.factory-note { text-align: center; margin-top: 26px; font-size: 13.5px; color: var(--text-dim); }

/* ============================================================
   7c. PROCESS - 4-step timeline
   ============================================================ */
.process { background: #000000; }   /* black from here down to the footer */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.step { text-align: center; padding: 0 10px; position: relative; }
.step:not(:last-child)::after {
  content: "‹"; position: absolute; top: 12px; inset-inline-start: -14px;
  font-family: var(--font-display); font-size: 34px; font-weight: 300; line-height: 1;
  color: var(--cream-soft); opacity: 0.55;
  direction: ltr; unicode-bidi: isolate;
}
.step-num {
  width: 56px; height: 56px; margin: 0 auto 18px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 24px; font-weight: 900; color: #1a1a1a;
  background: #eedecb; border-radius: 50%;
}
.step h3 { font-size: 18px; font-weight: 800; color: var(--white); margin-bottom: 8px; }
.step p { font-size: 13.5px; color: var(--cream-soft); line-height: 1.7; }

/* ============================================================
   8b. CLIENTS - logo wall (placeholders)
   ============================================================ */
.clients { background: #000000; }
.logo-marquee {
  position: relative; overflow: hidden; width: 100%; margin-top: 8px;
  direction: ltr;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.logo-track {
  display: flex; gap: 18px; width: max-content;
  animation: logo-scroll 32s linear infinite;
}
.logo-marquee:hover .logo-track { animation-play-state: paused; }
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.logo-ph {
  flex: 0 0 auto; width: 220px; aspect-ratio: 5/3;
  border: 1px solid var(--line); border-radius: 4px;
  background: var(--bg-soft);
  background-image: repeating-linear-gradient(45deg, rgba(238,221,203,0.05) 0 10px, transparent 10px 20px);
}

/* ============================================================
   8c. NAVIGATION TO FACTORY - map / Waze card
   ============================================================ */
/* The factory navigation card (.navsec / .nav-card) is shared with the
   contact page, so it now lives in main.css. */

/* ============================================================
   8d. FAQ - accordion
   ============================================================ */
.faq { background: #000000; }
.faq-container { max-width: 820px; }
.faq-item { border: 1px solid #eeddcb; margin-bottom: 12px; background: var(--bg-soft); }
.faq-q {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 24px; cursor: pointer; font-size: 16.5px; font-weight: 700; color: var(--white);
}
.faq-toggle { flex-shrink: 0; font-family: var(--font-display); font-size: 24px; font-weight: 400; color: var(--gold); line-height: 1; transition: transform 0.3s; }
.faq-item.open .faq-toggle { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq-item.open .faq-a { max-height: 320px; }
.faq-a-inner { padding: 0 24px 22px; font-size: 14.5px; color: var(--cream-soft); line-height: 1.8; }

/* ============================================================
   REVEAL ON SCROLL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE - 1200 / 767 only
   ============================================================ */
@media (min-width: 768px) and (max-width: 1200px) {
  .hero { min-height: 78vh; padding: 120px 0 80px; }
  .mosaic {
    height: auto; padding-inline: clamp(16px, 3vw, 28px);
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(5, 150px);
    grid-template-areas:
      "t1    t1    t2   t3"
      "t1    t1    t5   t5"
      "brand brand feat feat"
      "brand brand feat feat"
      "t4    t4    t6   t7";
  }
  .about-mosaic {
    grid-template-rows: repeat(5, 150px);
    grid-template-areas:
      "text text t1    t2"
      "text text brand brand"
      "text text brand brand"
      "text text t3    t3"
      "stats stats stats stats";
  }
  .statsband-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .statn:nth-child(3) { border-inline-start: none; }

  .feat-grid { grid-template-columns: repeat(3, 1fr); }
  .factory-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 36px 22px; }
  .step:nth-child(2)::after, .step:last-child::after { display: none; }
}

@media (max-width: 767px) {
  .hero { min-height: 88vh; padding: 110px 0 70px; }
  /* מובייל: הלוגו (יחס 3.12:1) והכותרת ב-nowrap גלשו מעבר לרוחב המסך
     ונחתכו ע"י ה-overflow:hidden של ה-hero. מגבילים לרוחב הקונטיינר. */
  .hero-logo { height: auto; width: min(100%, 320px); }
  .hero-title {
    white-space: normal;
    font-size: clamp(28px, 8.5vw, 44px); line-height: 1.15;
  }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; }

  /* mobile: no photos - just the 3 panels stacked (flex avoids stray grid rows) */
  .mosaic {
    height: auto; padding-inline: 14px;
    display: flex; flex-direction: column; gap: 8px;
  }
  .mosaic .ph { display: none; }
  .mosaic .m-brand { order: 1; }
  .mosaic .m-feat  { order: 2; }
  .mosaic .m-t1    { order: 3; }
  .feat-card { padding: 26px 22px; }
  .brand-panel { padding: 30px 22px; }

  /* about-mosaic mobile order: text → brand → stats (photos hidden via .ph rule above) */
  .about-mosaic .am-text  { order: 1; }
  .about-mosaic .am-brand { order: 2; }
  .about-mosaic .am-stats { order: 3; }
  .about-panel { padding: 28px 22px; }

  .statsband-grid { grid-template-columns: 1fr 1fr; gap: 24px 0; }
  .statn:nth-child(3) { border-inline-start: none; }

  .cats-grid { grid-template-columns: 1fr; gap: 20px; }
  .choose-grid { grid-template-columns: 1fr; }
  .compare-cell { padding: 13px 12px; font-size: 13px; }
  .feat-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .factory-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .step::after { display: none !important; }
  .logo-ph { width: 160px; }
}