@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;400;600;700;900&display=swap');
/* Styles of the homepage blocks (src/puck/homepage-config.tsx; / renders them). Linked from inside
   each block so the editor canvas iframe gets it too. No next/font var (undefined in the canvas
   would invalidate the whole font stack). */
/* עמוד הבית החדש — scoped under .nh. Values are px/clamp straight from the design, so the
   viewport-rem scaling in marketing.css (html{font-size:calc(100vw/108)}) doesn't touch them. */
.nh {
  --navy: #15303e;
  --navy-glow: #25495c;
  --teal: #0f5568;
  --cream: #f7f2ee;
  --terra: #b76a50;
  --gold: #c9954f;
  --gutter: clamp(20px, 5vw, 72px);
  --fs-display: clamp(44px, 6.4vw, 140px);
  --fs-h2: clamp(28px, 3vw, 52px);
  --fs-h3: clamp(22px, 2.08vw, 36px);
  --fs-body: clamp(17px, 1.16vw, 20px);
  --fs-small: 14px;

  background: var(--cream);
  color: var(--navy);
  font-family: 'Noto Sans Hebrew', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.5;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
.nh *,
.nh *::before,
.nh *::after { box-sizing: border-box; }
.nh h1, .nh h2, .nh h3, .nh p { margin: 0; font-family: inherit; }
.nh a { color: inherit; text-decoration: none; }
.nh ::selection { background: var(--terra); color: var(--cream); }
.nh :focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; }

/* the terracotta underline: a 3px stroke under the right third of a heading */
.nh-line {
  display: inline-block;
  padding-bottom: 18px;
  background: linear-gradient(var(--terra), var(--terra)) 100% 100% / 34% 3px no-repeat;
}

.nh-body { font-size: var(--fs-body); line-height: 1.5; }
.nh-small { font-size: var(--fs-small); line-height: 1.5; }
.nh-kicker { font-size: var(--fs-small); font-weight: 700; }
.nh-gold { color: var(--gold); }
.nh-teal { color: var(--teal); }

.nh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  min-width: min(260px, 100%);
  min-height: 64px;
  padding: 0 30px;
  border-radius: 30px;
  background: var(--terra);
  color: var(--cream) !important;
  font-size: var(--fs-body);
  font-weight: 700;
  transition: transform 0.3s;
}
.nh-btn:hover { transform: translateY(-3px); }

html:has(.nh) { scroll-behavior: smooth; }

/* ── פתיח ── */
.nh-hero-wrap { padding: 0; }
.nh-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  background: var(--navy);
  color: var(--cream);
}
.nh-hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 42% 62% at 24% 45%, rgba(44, 82, 102, 0.9) 0%, rgba(44, 82, 102, 0.4) 45%, rgba(21, 48, 62, 0) 80%);
}
.nh-hero-photo {
  order: 2;
  position: relative;
  flex: 1 1 380px;
  min-height: min(86vh, 900px);
}
.nh-hero-photo img {
  /* box = the drawn photo (height-led, auto width), so the masks line up with its real edges:
     bottom fade + a soft right edge where the cut-out ends in a straight crop line */
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  height: calc(100% - 60px);
  width: auto;
  max-width: none;
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 14%), linear-gradient(to left, transparent 0, #000 16%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to top, transparent 0, #000 14%), linear-gradient(to left, transparent 0, #000 16%);
  mask-composite: intersect;
}
.nh-credit {
  position: absolute;
  left: 18px;
  bottom: 30px;
  z-index: 2;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.7;
  pointer-events: none;
}
.nh-hero-text {
  position: relative;
  flex: 1 1 440px;
  display: flex;
  align-items: center;
  padding: clamp(72px, 7vw, 120px) clamp(24px, 5vw, 90px);
}
.nh-hero-stack {
  max-width: min(100%, 640px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
}
.nh-name { display: inline-flex; flex-direction: column; align-items: flex-start; }
.nh-name-title { font-size: var(--fs-h2); font-weight: 300; line-height: 1; }
.nh-name-main {
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  padding-bottom: 27px;
}
.nh-hero-copy { display: flex; flex-direction: column; gap: 30px; max-width: 30em; }
.nh-lead { font-size: var(--fs-h3); font-weight: 300; line-height: 1.3; }

/* ── מה יש כאן בשבילך ── */
.nh-routes {
  scroll-margin-top: 90px;
  padding: clamp(72px, 7vw, 120px) var(--gutter) 0;
}
.nh-h2 {
  margin: 0 0 60px !important;
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.15;
}

.nh-studio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  overflow: hidden;
  color: var(--cream) !important;
  transition: transform 0.3s;
}
.nh-studio:hover { transform: translateY(-3px); }
.nh-studio-text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  padding: clamp(48px, 4vw, 60px);
  background: radial-gradient(ellipse 70% 90% at 25% 40%, var(--navy-glow) 0%, rgba(37, 73, 92, 0.5) 40%, rgba(21, 48, 62, 0) 75%), var(--navy);
}
.nh-studio-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 30px; }
.nh-studio-copy .nh-body { max-width: 30em; }
.nh-studio-title { font-size: var(--fs-h2); font-weight: 400; line-height: 1.15; }
.nh-studio-title strong { font-weight: 700; }
.nh-studio-cta { display: inline-flex; align-items: center; gap: 14px; font-size: var(--fs-body); font-weight: 700; }
.nh-studio-art { position: relative; min-height: 360px; }
.nh-studio-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 55%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 80% at 50% 55%, #000 55%, transparent 100%);
}

.nh-cards {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 30px;
}
.nh-card {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border: 1px solid rgba(21, 48, 62, 0.15);
  transition: transform 0.3s;
}
.nh-card:hover { transform: translateY(-3px); }
.nh-card-img { aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid rgba(21, 48, 62, 0.12); }
.nh-card-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.nh-card-body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 30px; }
.nh-card-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nh-soon {
  padding: 2px 12px;
  border: 1px solid var(--terra);
  border-radius: 10px;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--terra);
}
.nh-card-title { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; }

@media (max-width: 760px) {
  .nh-hero-stack { gap: 40px; }
  .nh-hero-photo { min-height: min(70vh, 560px); }
  .nh-hero-photo img { height: 100%; }
  .nh-name-main { white-space: normal; }
  .nh-studio-art { min-height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .nh-btn, .nh-studio, .nh-card { transition: none; }
}