/* ===== Chen Digital — "בית 2026" page polish layer ===== */
/* Exact 1:1 match to the approved prototype — self-hosted Talent FS, prototype's
   own color tokens. Does not use the site's global Elementor kit fonts/colors. */

@font-face { font-family: "Talent FS"; src: url("fonts/TalentFS-Light.woff") format("woff"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Talent FS"; src: url("fonts/TalentFS-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Talent FS"; src: url("fonts/TalentFS-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Talent FS"; src: url("fonts/TalentFS-Demibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Talent FS"; src: url("fonts/TalentFS-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Talent FS"; src: url("fonts/TalentFS-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }

body.page-id-1850 {
  --cd-gold-dark: #a7855a;
  --cd-gold: #c9ae7b;
  --cd-gold-light: #d7c4a3;
  --cd-cream: #f6f2ea;
  --cd-paper: #fbf9f5;
  --cd-ink: #1b1815;
  --cd-ink-soft: #4a443c;
  --cd-line: #e6dfd2;
  --cd-shadow: 0 30px 60px -30px rgba(27,24,21,.25);
  --cd-ease: cubic-bezier(.22,1,.36,1);

  font-family: "Talent FS", "Segoe UI", Arial, sans-serif;
  color: var(--cd-ink);
  overflow-x: hidden;
}
html:has(body.page-id-1850) { overflow-x: hidden; }

/* ---------- Preloader ---------- */
body.page-id-1850 .cd-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--cd-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
body.page-id-1850 .cd-preloader-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
body.page-id-1850 .cd-preloader-glyph {
  font-size: 34px;
  color: var(--cd-gold-light);
  animation: cd-preloader-pulse 1.6s ease-in-out infinite;
}
@keyframes cd-preloader-pulse {
  0%, 100% { opacity: .45; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.05); }
}
body.page-id-1850 .cd-preloader-bar {
  width: 120px;
  height: 1px;
  background: rgba(215,196,163,.25);
  overflow: hidden;
}
body.page-id-1850 .cd-preloader-bar::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cd-gold-light);
  transform: translateX(-100%);
  animation: cd-preloader-fill 1.3s var(--cd-ease) forwards .1s;
}
@keyframes cd-preloader-fill { to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  body.page-id-1850 .cd-preloader { display: none; }
}

body.page-id-1850 h1,
body.page-id-1850 h2,
body.page-id-1850 h3,
body.page-id-1850 .elementor-heading-title,
body.page-id-1850 .elementor-icon-box-title,
body.page-id-1850 .elementor-image-box-title {
  font-family: "Talent FS", "Segoe UI", Arial, sans-serif !important;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--cd-ink);
}

body.page-id-1850 .elementor-widget-text-editor,
body.page-id-1850 p,
body.page-id-1850 .elementor-icon-box-description,
body.page-id-1850 .elementor-image-box-description,
body.page-id-1850 .elementor-counter-title,
body.page-id-1850 .elementor-icon-list-item {
  font-family: "Talent FS", "Segoe UI", Arial, sans-serif !important;
  color: var(--cd-ink-soft);
}

body.page-id-1850 .cd-accent { color: var(--cd-gold-dark); }
body.page-id-1850 .cd-hero-h1 {
  display: block;
  font-size: clamp(36px, 4.6vw, 62px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ---------- Section backgrounds — exact prototype alternation ---------- */
body.page-id-1850 .sec-hero,
body.page-id-1850 .sec-about,
body.page-id-1850 .sec-projects-head,
body.page-id-1850 .sec-projects,
body.page-id-1850 .sec-why,
body.page-id-1850 .sec-world { background-color: var(--cd-paper) !important; }

body.page-id-1850 .sec-statement,
body.page-id-1850 .sec-services-head,
body.page-id-1850 .sec-services,
body.page-id-1850 .sec-testimonials,
body.page-id-1850 .sec-contact { background-color: var(--cd-cream) !important; }

body.page-id-1850 .sec-numbers { background-color: var(--cd-ink) !important; }

/* ---------- Buttons: pill, ink / outline ---------- */
body.page-id-1850 .elementor-button {
  border-radius: 100px !important;
  padding: 16px 30px !important;
  font-family: "Talent FS", sans-serif !important;
  font-weight: 700 !important;
  background: var(--cd-ink);
  color: var(--cd-paper);
  box-shadow: none !important;
  transition: transform .35s var(--cd-ease), box-shadow .35s;
}
body.page-id-1850 .elementor-button:hover {
  box-shadow: 0 16px 30px -12px rgba(27,24,21,.4) !important;
}
/* An icon button's content-wrapper is a flex row with the default
   align-items:stretch, which stretches the icon box to match its own
   flex-context height — not simply the icon's own content size — so
   height:auto on the icon itself doesn't shrink it. The reliable fix is a
   fixed height on the whole button (both with and without an icon), so
   "לצפייה בעבודות" and "בואו נדבר" always match regardless of icon internals. */
body.page-id-1850 .sec-hero .elementor-button {
  height: 54px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}
body.page-id-1850 .sec-hero a.elementor-button:nth-of-type(2) {
  background: transparent;
  color: var(--cd-ink);
  border: 1.5px solid var(--cd-ink);
}

/* ---------- Hero image + badge ---------- */
body.page-id-1850 .hero-visual-wrap { position: relative; }
body.page-id-1850 .hero-visual-wrap::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  border: 1.5px solid var(--cd-gold);
  border-radius: 50%;
  top: -40px;
  left: -40px;
  z-index: -1;
  opacity: .7;
}
body.page-id-1850 .hero-visual-wrap .elementor-widget-image img {
  border-radius: 24px;
  box-shadow: var(--cd-shadow);
  object-fit: cover;
  aspect-ratio: 4/5;
}
body.page-id-1850 .cd-badge {
  position: absolute;
  bottom: 24px;
  right: 24px;
  left: 24px;
  z-index: 3;
  background: var(--cd-ink);
  color: var(--cd-paper);
  border-radius: 20px;
  padding: 16px 20px;
  box-shadow: var(--cd-shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
body.page-id-1850 .cd-dot {
  flex: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--cd-gold);
  animation: cd-pulse 1.8s infinite;
}
@keyframes cd-pulse {
  0% { box-shadow: 0 0 0 0 rgba(201,174,123,.55); }
  70% { box-shadow: 0 0 0 10px rgba(201,174,123,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,174,123,0); }
}

/* ---------- About image + tag ---------- */
body.page-id-1850 .about-visual-wrap { position: relative; }
body.page-id-1850 .sec-about .elementor-widget-image img {
  border-radius: 24px;
  box-shadow: var(--cd-shadow);
  object-fit: cover;
  aspect-ratio: 3/4;
}
body.page-id-1850 .cd-tag {
  position: absolute;
  top: 24px;
  right: -18px;
  z-index: 3;
  background: var(--cd-paper);
  border: 1px solid var(--cd-line);
  border-radius: 100px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--cd-shadow);
  white-space: nowrap;
}

/* ---------- Services icon-box ---------- */
body.page-id-1850 .sec-services.e-con > .e-con-inner { flex-wrap: wrap !important; }
body.page-id-1850 .sec-services.e-con > .e-con-inner > .e-con { flex: 1 1 220px !important; position: relative; }
body.page-id-1850 .elementor-widget-icon-box {
  position: relative;
  background: var(--cd-paper);
  border-radius: 20px;
  padding: 36px 26px;
  border: 1px solid var(--cd-line);
  height: 100%;
  transition: transform .4s var(--cd-ease), box-shadow .4s;
}
body.page-id-1850 .elementor-widget-icon-box:hover {
  transform: translateY(-8px);
  box-shadow: var(--cd-shadow);
}
body.page-id-1850 .elementor-icon-box-icon .elementor-icon { color: var(--cd-gold-dark); }

/* ---------- Services card numbering (01/02/03/04) ---------- */
/* Static heading widget inserted directly in each card's Elementor data (not
   CSS nth-child) so the number is always tied to the actual card, regardless
   of DOM/RTL ordering. */
body.page-id-1850 .sec-services .proj-service-num {
  position: absolute;
  top: 24px;
  left: 26px;
  /* The icon-box sibling that follows it in the DOM is also `position:
     relative` with an opaque background; without a higher z-index it paints
     on top per normal stacking order (later DOM element wins) and hides
     the number completely despite the number itself being fully opaque. */
  z-index: 2;
}
body.page-id-1850 .sec-services .proj-service-num .elementor-heading-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--cd-gold-dark) !important;
  letter-spacing: .08em;
}

/* ---------- Projects image-box → full-bleed card ---------- */
body.page-id-1850 .sec-projects.e-con > .e-con-inner {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px !important;
}
body.page-id-1850 .sec-projects.e-con > .e-con-inner > .e-con {
  width: auto !important;
  height: auto !important;
  flex: none !important;
  display: block !important;
}
body.page-id-1850 .sec-projects.e-con > .e-con-inner > .e-con > .e-con-inner {
  height: auto !important;
  display: block !important;
}
@media (max-width: 900px) {
  body.page-id-1850 .sec-projects.e-con > .e-con-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  body.page-id-1850 .sec-projects.e-con > .e-con-inner { grid-template-columns: 1fr; }
}
body.page-id-1850 .sec-projects .elementor-widget-image-box {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4/3.3;
  min-height: clamp(220px, 45vw, 340px);
  flex: none !important;
}
body.page-id-1850 .sec-projects .elementor-image-box-wrapper { position: static; }
body.page-id-1850 .sec-projects .elementor-image-box-img {
  margin: 0 !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
body.page-id-1850 .sec-projects .elementor-image-box-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform .6s var(--cd-ease);
}
body.page-id-1850 .sec-projects .elementor-widget-image-box:hover .elementor-image-box-img img {
  transform: scale(1.06);
}
body.page-id-1850 .sec-projects .elementor-image-box-content {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 24px;
  text-align: right;
  background: linear-gradient(0deg, rgba(15,13,11,.86) 0%, rgba(15,13,11,.1) 60%, transparent 80%);
}
body.page-id-1850 .sec-projects .elementor-image-box-title {
  color: #fff !important;
  font-size: 21px;
  margin: 0 0 4px;
}
body.page-id-1850 .sec-projects .elementor-image-box-description {
  color: var(--cd-gold-light) !important;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ---------- Eyebrows (heading widgets set to header_size: span) ---------- */
body.page-id-1850 span.elementor-heading-title {
  display: inline-block !important;
  font-size: 13px !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cd-gold-dark) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-bottom: 6px;
}
body.page-id-1850 .sec-numbers span.elementor-heading-title,
body.page-id-1850 .sec-final-cta span.elementor-heading-title { color: var(--cd-gold-light) !important; }

@media (max-width: 600px) {
  /* inline-block eyebrows sitting immediately before a large heading with no
     dedicated top margin can visually crowd/overlap it once the heading
     wraps to multiple lines on narrow screens. Force the eyebrow onto its
     own line with real breathing room below it. */
  body.page-id-1850 span.elementor-heading-title {
    display: block !important;
    margin-bottom: 14px;
  }
}

/* ---------- Marquee ---------- */
body.page-id-1850 .sec-marquee { overflow: hidden; border-top: 1px solid var(--cd-line); border-bottom: 1px solid var(--cd-line); }
body.page-id-1850 .sec-marquee .e-con-inner { overflow: hidden; }
body.page-id-1850 .cd-marquee-track {
  display: flex;
  width: max-content;
  gap: 60px;
}
body.page-id-1850 .cd-marquee-track span {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: clamp(22px,3vw,32px);
  font-weight: 700;
  color: var(--cd-ink);
  white-space: nowrap;
}
body.page-id-1850 .cd-marquee-track span i { font-style: normal; color: var(--cd-gold-dark); font-size: 16px; }

/* ---------- Contact split card ---------- */
body.page-id-1850 .sec-contact.e-con { border-radius: 28px; overflow: hidden; }
body.page-id-1850 .contact-info-panel {
  color: var(--cd-paper);
  /* This container's default Elementor flex direction is row, laying its 3
     text children (eyebrow, heading, paragraph) side by side instead of as
     a normal stacked text block. */
  flex-direction: column !important;
  justify-content: center;
  padding: 48px 40px;
  text-align: center;
}
body.page-id-1850 .contact-info-panel .elementor-heading-title {
  color: var(--cd-paper) !important;
  font-size: clamp(24px, 3.2vw, 32px) !important;
  line-height: 1.25 !important;
}
/* The eyebrow label ("בואו נדבר") is also a `heading` widget, so without this
   it inherits the same large size as the real heading above and reads as a
   second, overlapping-looking title instead of a small label. */
body.page-id-1850 .contact-info-panel span.elementor-heading-title {
  display: inline-block !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cd-gold-light) !important;
  line-height: 1.3 !important;
  margin-bottom: 8px;
}
body.page-id-1850 .contact-info-panel .elementor-widget-text-editor { color: rgba(251,249,245,.75) !important; }
body.page-id-1850 .contact-info-panel,
body.page-id-1850 .contact-form-panel { flex: 1 1 0; min-width: 300px; }

@media (max-width: 900px) {
  /* The panels never had a mobile stacking rule, so at min-width:300px each
     they stayed side-by-side in the default row direction and got squeezed
     into each other on narrow screens. */
  body.page-id-1850 .sec-contact.e-con > .e-con-inner { flex-direction: column !important; }
  body.page-id-1850 .contact-info-panel,
  body.page-id-1850 .contact-form-panel { width: 100% !important; min-width: 0 !important; }
}

/* ---------- Numbers (counter widgets) ---------- */
body.page-id-1850 .sec-numbers .elementor-counter-number-wrapper {
  color: var(--cd-gold-light);
  font-weight: 800;
  font-size: clamp(44px,6vw,72px);
}
body.page-id-1850 .sec-numbers .elementor-counter-title {
  color: rgba(251,249,245,.7) !important;
  margin-top: 8px;
}
body.page-id-1850 .sec-numbers .elementor-heading-title {
  color: var(--cd-gold-light);
  font-weight: 800;
  font-size: clamp(30px,4vw,44px);
}

/* ---------- Why: icon-list rendered as A/B/C lettered cards ---------- */
body.page-id-1850 .sec-why .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
body.page-id-1850 .sec-why .elementor-icon-list-item {
  flex: 1 1 220px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: var(--cd-cream);
  border: none;
  border-radius: 18px;
  padding: 22px;
  margin-bottom: 0;
  font-weight: 700;
  color: var(--cd-ink) !important;
}
body.page-id-1850 .sec-why .elementor-icon-list-icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--cd-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cd-gold-dark);
  font-size: 16px;
  font-weight: 700;
  position: relative;
}
body.page-id-1850 .sec-why .elementor-icon-list-icon svg { display: none; }
body.page-id-1850 .sec-why .elementor-icon-list-item:nth-child(1) .elementor-icon-list-icon::before { content: "A"; }
body.page-id-1850 .sec-why .elementor-icon-list-item:nth-child(2) .elementor-icon-list-icon::before { content: "B"; }
body.page-id-1850 .sec-why .elementor-icon-list-item:nth-child(3) .elementor-icon-list-icon::before { content: "C"; }
body.page-id-1850 .sec-why .elementor-icon-list-text {
  padding-top: 4px;
  color: var(--cd-ink-soft) !important;
  font-weight: 600 !important;
  opacity: 1 !important;
}

/* ---------- World/Instagram follow button ---------- */
body.page-id-1850 .elementor-element-90e6d2e .elementor-button {
  background: transparent !important;
  color: var(--cd-ink) !important;
  border: 1.5px solid var(--cd-ink) !important;
  border-radius: 100px !important;
  padding: 12px 26px !important;
  font-family: "Talent FS", sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  box-shadow: none !important;
  margin-bottom: 30px;
  transition: transform .35s var(--cd-ease), background .35s;
}
body.page-id-1850 .elementor-element-90e6d2e .elementor-button:hover {
  background: var(--cd-ink) !important;
  color: var(--cd-paper) !important;
  transform: translateY(-2px);
}

/* ---------- Testimonials ---------- */
body.page-id-1850 .sec-testimonials .elementor-testimonial-content {
  font-size: 22px;
  font-weight: 500;
  color: var(--cd-ink) !important;
}
body.page-id-1850 .sec-testimonials .elementor-testimonial-name { font-weight: 700; }

/* ---------- Final CTA ---------- */
body.page-id-1850 .sec-final-cta { position: relative; color: #fff; text-align: center; }
body.page-id-1850 .sec-final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Elementor's own native overlay on this container was ALSO enabled
     (background_overlay_opacity) — with both stacked the background photo
     was nearly black. That native overlay is now disabled (opacity 0) and
     this single gradient is the only darkening, kept light enough that the
     photo actually reads instead of just this gradient's color. */
  background: linear-gradient(180deg, rgba(15,13,11,.35), rgba(15,13,11,.55));
  z-index: 0;
}
body.page-id-1850 .sec-final-cta > .e-con-inner { position: relative; z-index: 1; }
body.page-id-1850 .sec-final-cta .elementor-heading-title,
body.page-id-1850 .sec-final-cta p { color: #fff !important; }
body.page-id-1850 .sec-final-cta .elementor-button,
body.page-id-1850 .sec-final-cta .elementor-button.elementor-button-link {
  background: var(--cd-paper) !important;
  color: var(--cd-ink) !important;
  border-radius: 100px !important;
}
body.page-id-1850 .sec-final-cta .elementor-heading-title {
  font-size: clamp(26px, 4.5vw, 56px) !important;
  line-height: 1.25 !important;
}
@media (max-width: 600px) {
  body.page-id-1850 .sec-final-cta { padding-top: 70px !important; padding-bottom: 70px !important; }
}

/* ---------- Contact form ---------- */
body.page-id-1850 .sec-contact form { max-width: 700px; margin: 0 auto; }
body.page-id-1850 .sec-contact .elementor-field-group input,
body.page-id-1850 .sec-contact .elementor-field-group select,
body.page-id-1850 .sec-contact .elementor-field-group textarea {
  border-radius: 12px !important;
  border: 1.5px solid var(--cd-line) !important;
  background: var(--cd-paper) !important;
  padding: 14px 16px !important;
  font-family: "Talent FS", sans-serif !important;
}
body.page-id-1850 .sec-contact .elementor-button { width: 100%; justify-content: center; }

/* ---------- Curtain text reveal ---------- */
body.page-id-1850 .cd-curtain { display: block; overflow: hidden; }
body.page-id-1850 .cd-curtain-inner { display: block; transform: translateY(112%); }
body.page-id-1850 .cd-statement-h2 { text-align: center; font-size: clamp(28px,4.4vw,52px); }

/* ---------- Custom cursor ---------- */
body.page-id-1850.has-cursor, body.page-id-1850.has-cursor a, body.page-id-1850.has-cursor button { cursor: none; }
.cd-cursor-dot, .cd-cursor-ring { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 9998; }
.cd-cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--cd-ink, #1b1815); }
.cd-cursor-ring {
  width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid var(--cd-ink, #1b1815); opacity: .55;
  transition: width .35s, height .35s, margin .35s, opacity .35s, background .35s;
}
.cd-cursor-ring.hover { width: 60px; height: 60px; margin: -30px 0 0 -30px; background: rgba(27,24,21,.06); opacity: 1; }
.cd-cursor-ring.on-dark { border-color: #fff; }
.cd-cursor-dot.on-dark { background: #fff; }

/* ---------- Reveal (generic) ---------- */
body.page-id-1850 .cd-reveal { opacity: 0; transform: translateY(28px); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  body.page-id-1850 .cd-curtain-inner { transform: none !important; }
  body.page-id-1850 .cd-reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  body.page-id-1850 .sec-hero .e-con-inner,
  body.page-id-1850 .sec-about .e-con-inner { flex-wrap: wrap; }
  body.page-id-1850 .cd-tag { right: 12px; }
  body.page-id-1850 .cd-badge { position: static; margin-top: 16px; }
}