/* ===== Chen Digital — "אודות" page polish layer ===== */
/* Same exact system as the homepage (בית 2026): self-hosted Talent FS, prototype tokens. */

@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-116 {
  --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);
}

body.page-id-116 h1, body.page-id-116 h2, body.page-id-116 h3,
body.page-id-116 .elementor-heading-title,
body.page-id-116 .elementor-icon-box-title {
  font-family: "Talent FS", "Segoe UI", Arial, sans-serif !important;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--cd-ink);
}
body.page-id-116 .elementor-widget-text-editor,
body.page-id-116 p,
body.page-id-116 .elementor-icon-box-description {
  font-family: "Talent FS", "Segoe UI", Arial, sans-serif !important;
  color: var(--cd-ink-soft);
  line-height: 1.75;
}
body.page-id-116 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: 8px;
}

/* ---------- Section backgrounds ---------- */
body.page-id-116 .sec-about-hero,
body.page-id-116 .sec-about-background { background-color: var(--cd-paper) !important; }
body.page-id-116 .sec-about-story,
body.page-id-116 .sec-about-how { background-color: var(--cd-cream) !important; }
body.page-id-116 .sec-about-personal { background-color: var(--cd-paper) !important; }
body.page-id-116 .about-cta { background-color: var(--cd-ink) !important; color: var(--cd-paper); }
body.page-id-116 .about-cta .elementor-heading-title { color: var(--cd-paper) !important; }
body.page-id-116 .about-cta span.elementor-heading-title { color: var(--cd-gold-light) !important; }
body.page-id-116 .about-cta .elementor-widget-text-editor { color: rgba(251,249,245,.75) !important; }

/* ---------- Buttons ---------- */
body.page-id-116 .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-116 .elementor-button:hover { box-shadow: 0 16px 30px -12px rgba(27,24,21,.4) !important; }
body.page-id-116 .about-cta .elementor-button,
body.page-id-116 .about-cta .elementor-button.elementor-button-link {
  background: var(--cd-paper) !important;
  color: var(--cd-ink) !important;
  border-radius: 100px !important;
}

/* ---------- Portrait images ---------- */
body.page-id-116 .about-hero-visual-wrap,
body.page-id-116 .about-story-visual-wrap { position: relative; }
body.page-id-116 .about-hero-visual-wrap img,
body.page-id-116 .about-story-visual-wrap img {
  border-radius: 24px;
  box-shadow: var(--cd-shadow);
  object-fit: cover;
  width: 100%;
}
body.page-id-116 .about-hero-visual-wrap .cd-tag,
body.page-id-116 .about-story-visual-wrap .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;
}

body.page-id-116 .cd-about-h1 {
  font-size: clamp(36px,4.6vw,56px);
  line-height: 1.08;
  font-weight: 700;
}

/* ---------- Gradient text ---------- */
body.page-id-116 .gradient-text {
  background: linear-gradient(90deg, var(--cd-gold-dark), var(--cd-gold), var(--cd-gold-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--cd-gold-dark);
}
body.page-id-116 .sec-about-how { text-align: center; }
body.page-id-116 .sec-about-how .elementor-heading-title { font-size: clamp(28px,4vw,44px); margin-bottom: 20px; }

/* ---------- "How I work" cards — keep the existing hover-reveal, retint to brand ink ---------- */
body.page-id-116 .card { border-color: var(--cd-line) !important; }
body.page-id-116 .card .elementor-icon-box-title {
  color: var(--cd-ink) !important;
  font-family: "Talent FS", sans-serif !important;
}
body.page-id-116 .card .elementor-icon-box-description {
  color: var(--cd-ink-soft) !important;
  font-family: "Talent FS", sans-serif !important;
}
body.page-id-116 .card:hover .elementor-icon-box-title { color: var(--cd-gold-dark) !important; }
body.page-id-116 .card:hover { background: var(--cd-paper) !important; border-color: var(--cd-gold-light) !important; }

/* ---------- Personal facts row ---------- */
body.page-id-116 .sec-about-personal .elementor-widget-icon-box {
  background: var(--cd-cream);
  border-radius: 16px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  height: 100%;
}
/* The icon-box widget's own internal layout stacks icon above text by
   default; force it horizontal (icon beside text) so it reads as a compact
   fact badge instead of a tall, awkwardly-rounded oval. */
body.page-id-116 .sec-about-personal .elementor-icon-box-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px;
  text-align: right !important;
}
body.page-id-116 .sec-about-personal .elementor-icon-box-icon { margin: 0 !important; }
/* The icon itself has Elementor's own circular hover-background baked in
   (separate from the card's own hover background, which looks fine) —
   neutralize just the icon's own background so only the card highlights. */
body.page-id-116 .sec-about-personal .elementor-icon-box-icon .elementor-icon,
body.page-id-116 .sec-about-personal .elementor-widget-icon-box:hover .elementor-icon-box-icon .elementor-icon,
body.page-id-116 .sec-about-personal .elementor-icon-box-icon .elementor-icon:hover {
  background: transparent !important;
  background-color: transparent !important;
}
body.page-id-116 .sec-about-personal .elementor-icon-box-description {
  font-weight: 600;
  color: var(--cd-ink) !important;
  font-size: 14px;
}

/* ---------- Curtain text reveal (reused from homepage) ---------- */
body.page-id-116 .cd-curtain { display: block; overflow: hidden; }
body.page-id-116 .cd-curtain-inner { display: block; transform: translateY(112%); }

/* ---------- Custom cursor ---------- */
body.page-id-116.has-cursor, body.page-id-116.has-cursor a, body.page-id-116.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; }

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

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

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  body.page-id-116 .cd-tag { right: 12px; }
}

/* The hero and story sections are built as two 50%-width row columns with no
   mobile override in their own Elementor settings, so on narrow screens the
   image and text columns stay side-by-side (each squeezed to ~180px) instead
   of stacking — which reads as the heading text sitting on top of the photo.
   Force a proper stacked, full-width layout below tablet width. */
@media (max-width: 900px) {
  body.page-id-116 .sec-about-hero,
  body.page-id-116 .sec-about-story {
    flex-direction: column !important;
  }
  body.page-id-116 .sec-about-hero > .e-con-inner > .e-con,
  body.page-id-116 .sec-about-story > .e-con-inner > .e-con,
  body.page-id-116 .about-hero-visual-wrap,
  body.page-id-116 .about-story-visual-wrap {
    width: 100% !important;
  }
  /* Stacking alone left the image and the text column flush against each
     other with zero gap (the row layout's spacing came from side-by-side
     column gap, which doesn't apply once stacked) — the heading read as
     sitting directly on top of the photo below it. */
  body.page-id-116 .about-hero-visual-wrap,
  body.page-id-116 .about-story-visual-wrap {
    margin-bottom: 32px;
  }
}