/* =====================================================================
   NYE v4 — "החוט" (The Thread)
   Cinematic design layer, brand book May 2026.
   One signature: the gradient thread (yellow→orange→magenta→violet).
   Loaded LAST — deliberately overrides site/polish/wellspring.
   Design only. No content lives here.
   ===================================================================== */

:root {
  --t-grad: linear-gradient(100deg, #F9DA59 0%, #E2783A 34%, #872B64 68%, #572B73 100%);
  --t-grad-warm: linear-gradient(115deg, #E2783A 0%, #A63357 55%, #872B64 100%);
  --t-grad-deep: linear-gradient(150deg, #D06B33 0%, #A03A56 38%, #872B64 66%, #572B73 100%);
  --t-ink: #252123;
  --t-ink-deep: #1B1719;
  --t-font-latin: 'Fahkwang', 'Noto Sans Hebrew', sans-serif;
  --t-font-script: 'Mrs Saint Delafield', cursive;
  --t-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --he-nav-h: 78px;
}

::selection { background: #872B64; color: #fff; }

/* =====================  TYPE — cinematic scale  ===================== */
.h1, h1.h1 {
  font-weight: 275 !important;
  font-size: clamp(34px, 4.6vw, 72px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.028em;
}
.h2, h2.h2 {
  font-weight: 275 !important;
  font-size: clamp(27px, 3.7vw, 58px) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.022em;
}
/* the one emphasized phrase inside a display line: Noto Sans, heavier weight + brand gradient (Noa) */
.h1 em, .h1 .italic, .h2 em, .h2 .italic,
.h1 .text-orange, .h1 .text-magenta, .h1 .text-purple,
.h2 .text-orange, .h2 .text-magenta, .h2 .text-purple, .h2 .text-blue {
  font-family: var(--he-font-sans);
  font-style: normal;
  font-weight: 800;
  background: var(--t-grad-warm);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  padding-inline-end: 0.03em;
}
/* English display type follows the brand book: Fahkwang */
html[dir="ltr"] .h1, html[dir="ltr"] .h2, html[dir="ltr"] .h3,
html[dir="ltr"] .card h3, html[dir="ltr"] .eyebrow {
  font-family: 'Fahkwang', var(--he-font-sans);
}
.lead { font-weight: 350; }
.lead-lg { font-size: 20px; }
.h1, .h2 { text-wrap: balance; }
.section-head h2 { max-width: 18ch; }

/* Eyebrow — bigger (Noa), no lines (Noa: "הקווים המעצבנים על כל הכותרות") */
.eyebrow {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--b-magenta);
  gap: 12px;
}
.eyebrow::before { display: none; }
.kicker { font-size: 13px; }

/* Latin words inside UI chrome pick up Fahkwang automatically */
.eyebrow, .kicker, .breadcrumb, .metrics, .topstrip { font-family: var(--t-font-latin); }

/* =====================  NAV — couture chrome  ===================== */
.nav { height: var(--he-nav-h); }
.nav, .nav.scrolled { background: rgba(255,255,255,0.88); }
.nav { backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4); }
.nav.scrolled {
  background: rgba(255,255,255,0.95);
  box-shadow: 0 10px 34px -18px rgba(37,33,35,0.28);
  border-bottom-color: transparent;
}
/* gradient thread under the nav = reading-progress indicator */
.nav::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 2.5px;
  background: var(--t-grad);
  transform: scaleX(var(--scrollp, 0));
  transform-origin: right;
}
html[dir="ltr"] .nav::after { transform-origin: left; }
.brand .mark { height: 34px; }
.brand .sub {
  font-size: 12px; letter-spacing: 0.02em; color: var(--he-fg-3);
  border-inline-start: 1px solid var(--he-border-strong);
  padding-inline-start: 14px;
}
.nav-links { font-size: 14px; gap: 22px; }
.nav-trigger { font-size: 14px; }
.nav-links a, .nav-trigger { position: relative; }
.nav-links > a::after, .nav-item .nav-trigger::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -4px; height: 2px;
  border-radius: 2px; background: var(--t-grad);
  transform: scaleX(0); transform-origin: center;
  transition: transform .35s var(--t-ease-out);
}
.nav-links > a:hover::after, .nav-item:hover .nav-trigger::after { transform: scaleX(1); }
.nav-menu {
  border: 0; border-radius: 18px;
  box-shadow: 0 8px 18px rgba(42,24,37,0.07), 0 30px 70px -18px rgba(42,24,37,0.28);
  padding: 10px;
  min-width: 240px;
}
.nav-menu::after {
  content: ""; position: absolute; inset-inline: 14px; top: 0; height: 3px;
  border-radius: 0 0 4px 4px; background: var(--t-grad); opacity: .9;
}
.nav-menu a { padding: 11px 16px; border-radius: 10px; }
.nav-menu a:hover { background: #FAF6F8; color: var(--b-magenta); padding-inline-start: 20px; }
.nav-ic:hover { background: #FAF6F8; }

/* =====================  TOP STRIP  ===================== */
.topstrip { background: var(--t-ink-deep); font-size: 12px; letter-spacing: 0.05em; }
.topstrip .pulse { background: #E2783A; box-shadow: 0 0 0 3px rgba(226,120,58,0.25); }
.topstrip .signup { color: #F3C7A6; }
.topstrip a:hover { color: #F9DA59; }

/* =====================  SECTION RHYTHM  ===================== */
.section { padding-top: clamp(44px, 5.4vw, 92px) !important; padding-bottom: clamp(44px, 5.4vw, 92px) !important; }
.section-tight { padding-top: clamp(36px, 4vw, 64px) !important; padding-bottom: clamp(36px, 4vw, 64px) !important; }
.section-head { margin-bottom: clamp(34px, 4vw, 60px) !important; }

/* =====================  HOME HERO — the opening scene  ===================== */
.hero-money {
  min-height: calc(100svh - var(--he-nav-h) - var(--he-topstrip-h));
  background: #101010;
}
.hero-money-bg {
  object-position: 50% 18%;
  will-change: transform;
  transform: scale(1.001);
}
@keyframes heroKen { from { transform: scale(1.07); } to { transform: scale(1.001); } }
.hero-money-fade {
  background:
    linear-gradient(to top, rgba(255,255,255,0.97) 0%, rgba(255,255,255,0) 20%),
    linear-gradient(105deg, rgba(20,12,18,0.34) 0%, rgba(20,12,18,0) 46%);
}
.hero-money-card {
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.75);
  border-radius: 26px !important;
  padding: 46px 42px 42px;
  width: min(490px, 42vw);
  box-shadow: 0 40px 110px -18px rgba(24,12,20,0.35) !important;
}
.hero-money-card .h1 {
  font-size: clamp(23px, 2.3vw, 34px) !important;
  line-height: 1.26 !important;
  font-weight: 350 !important;
}
.hero-money-card .lead { font-size: 16.5px; margin-top: 20px; }
.hero-money-card .btn { margin-top: 30px; }
.hero-money-wm {
  width: 210px; opacity: 0.08;
  top: -30px; inset-inline-end: -34px;
  filter: none;
}
/* the thread drawn under the headline */
.hero-money-card .nye-thread { margin: 22px 0 0; height: 44px; }
/* ghost signature over the photo (decorative) */
/* the ghost signature is the REAL brand script from the brand book */
.hero-ghost {
  position: absolute; z-index: 1;
  inset-inline-end: 5%; bottom: 5%;
  width: clamp(280px, 32vw, 520px); height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 2px 30px rgba(24,12,20,0.45));
  opacity: 0.55;
  pointer-events: none;
}
.hero-money-chevron {
  color: #fff; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(24,12,20,0.28); backdrop-filter: blur(6px);
}

/* Entrance choreography (motion-safe) */
@media (prefers-reduced-motion: no-preference) {
  .hero-money-bg { animation: heroKen 7s var(--t-ease-out) both; }
  /* `translate` composes with the card's centering transform — never overrides it */
  .hero-money-card { opacity: 0; translate: 0 34px; }
  .hero-ghost { opacity: 0; translate: 0 14px; }
  .hero-money-chevron { opacity: 0; }
  html.v4-in .hero-money-card {
    opacity: 1; translate: 0 0;
    transition: opacity 1.1s var(--t-ease-out) .25s, translate 1.1s var(--t-ease-out) .25s;
  }
  html.v4-in .hero-ghost {
    opacity: 1; translate: 0 0;
    transition: opacity 1.4s var(--t-ease-out) 1.05s, translate 1.4s var(--t-ease-out) 1.05s;
  }
  html.v4-in .hero-money-chevron { opacity: 1; transition: opacity .9s ease 1.7s; }
}

/* =====================  INNER-PAGE HEROES — opening frames  ===================== */
/* Noa: the thick opening lines are gone — inner pages open on clean breathing light */
.ab-hero, .articles-hero, .r-hero, .sm-hero, .cards-hero, .totem-page-hero,
.p-hero, .m-hero, .s-hero, .pp-hero, .elv-hero, .article-hero, .hero {
  position: relative;
  background:
    radial-gradient(90% 120% at 85% -10%, rgba(135,43,100,0.05), transparent 60%),
    radial-gradient(80% 110% at 10% 110%, rgba(226,120,58,0.05), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FAF7F9 100%);
  overflow: hidden;
}
.hero::before { opacity: 0.5; }

/* =====================  THE THREAD — dividers & watermarks  ===================== */
.nye-thread { position: relative; height: 56px; }
.nye-thread-wide { max-width: 520px; margin: 34px auto 0; height: 48px; opacity: 0.9; }
.nye-thread svg { width: 100%; height: 100%; display: block; }
.nye-thread svg path {
  stroke-dasharray: var(--len, 1800);
  stroke-dashoffset: var(--len, 1800);
}
.nye-thread.drawn svg path {
  animation: threadDraw 2.4s var(--t-ease-out) forwards;
  animation-delay: calc(var(--i) * 55ms);
}
@keyframes threadDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nye-thread svg path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important; }
}

/* =====================  BUTTONS  ===================== */
.btn { font-size: 16px; padding: 15px 30px; font-weight: 600; }
.btn-lg { padding: 17px 34px; font-size: 17px; }
.btn-accent {
  background: var(--t-grad-warm);
  background-size: 160% 100%;
  background-position: 0% 50%;
  color: #fff;
  box-shadow: 0 14px 34px -10px rgba(135,43,100,0.5);
  transition: background-position .5s var(--t-ease-out), transform .2s var(--t-ease-out), box-shadow .3s;
}
.btn-accent:hover {
  background-position: 96% 50%;
  transform: translateY(-2px);
  box-shadow: 0 20px 44px -12px rgba(135,43,100,0.55);
}
.btn-primary { background: var(--t-ink); }
.btn-primary:hover { background: var(--b-magenta); transform: translateY(-2px); }
.btn-outline:hover { background: var(--t-ink); border-color: var(--t-ink); transform: translateY(-2px); }
.btn-yellow { box-shadow: 0 14px 30px -12px rgba(249,218,89,0.45); }

/* =====================  CARDS — quiet luxury  ===================== */
.card, .product, .article-card, .episode, .research-card, .vision-card, .team-card {
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(37,33,35,.03), 0 18px 44px -22px rgba(87,43,115,.16);
}
.card:hover, .product:hover, .article-card:hover, .episode:hover, .research-card:hover, .vision-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 64px -22px rgba(135,43,100,.26);
}
/* gradient thread reveals along the card top on hover */
.card::after, .product::after, .course-row::after {
  content: ""; position: absolute; inset-inline: 0; top: 0; height: 3px;
  background: var(--t-grad);
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--t-ease-out);
  border-radius: 3px;
}
.card:hover::after, .product:hover::after, .course-row:hover::after { transform: scaleX(1); }
.card .step, .card[class*="c-"] .step {
  border: 1.5px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--t-grad) border-box !important;
  color: var(--b-magenta) !important;
  font-weight: 500;
  font-style: normal;
}
/* card titles: same voice as the big headings (Sapir: the small titles too) */
.card h3, .card .ch, .course-main h3, .home-rima-step h3, .meeting h4, .product h3 {
  font-family: var(--he-font-sans) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-size: 21px;
  letter-spacing: -0.01em;
}
.course-row { position: relative; overflow: hidden; border-radius: 20px; }
.course-row { transition: transform .3s var(--t-ease-out), box-shadow .3s; }
.course-row:hover { transform: translateY(-4px); box-shadow: 0 26px 54px -24px rgba(135,43,100,.28); }

/* =====================  DARK "CINEMA" SECTIONS  ===================== */
.dark, .pf-band {
  background-color: var(--t-ink-deep);
  background-image:
    url('/assets/brand/thread-soft.svg'),
    radial-gradient(ellipse 900px 640px at 88% 8%, rgba(135,43,100,0.38), transparent 55%),
    radial-gradient(ellipse 760px 560px at 6% 92%, rgba(226,120,58,0.26), transparent 55%);
  background-repeat: no-repeat;
  background-position: 50% -30%, 0 0, 0 0;
  background-size: 160% auto, auto, auto;
}
.dark::before { display: none; }
.dark .h2, .pf-band .h2 { color: #fff; }
.dark .eyebrow { color: #F3C7A6; }
.dark .eyebrow::before, .dark .eyebrow::after { background: var(--t-grad); }
.cards-cta-tile {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  backdrop-filter: blur(4px);
  transition: transform .3s var(--t-ease-out), background .3s, border-color .3s;
}
.cards-cta-tile:hover { transform: translateY(-5px); background: rgba(255,255,255,0.09); border-color: rgba(249,218,89,0.5); }
.dark .btn-outline { color: #fff; border-color: rgba(255,255,255,0.42); }
.dark .btn-outline:hover { background: #fff; border-color: #fff; color: var(--t-ink); }

/* =====================  MARQUEE — silk ribbon  ===================== */
.nye-marquee {
  background: var(--t-ink-deep);
  padding: 17px 0;
  position: relative;
  box-shadow: none;
}
.nye-marquee::before, .nye-marquee::after {
  content: ""; position: absolute; inset-inline: 0; height: 2px;
  background: var(--t-grad); opacity: .85;
}
.nye-marquee::before { top: 0; }
.nye-marquee::after { bottom: 0; }
.nye-marquee-track { font-weight: 450; font-size: 14.5px; letter-spacing: 0.05em; }
.nye-marquee-track span { opacity: 0.85; }
.nye-marquee-track span::before {
  content: "✦";
  background: var(--t-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 1;
}

/* =====================  FOOTER — end credits  ===================== */
.footer-nye {
  background:
    url('/assets/brand/thread-soft.svg') no-repeat 50% -40% / 150% auto,
    var(--t-grad-deep);
  padding: 84px 0 30px;
  position: relative;
  overflow: hidden;
}
.footer-nye::after {
  /* giant script signature ghost, bottom-left */
  content: "";
  position: absolute; inset-inline-start: -2%; bottom: -6%;
  width: min(560px, 60vw); aspect-ratio: 1000/314;
  background: url('/assets/brand/nye-script-noa.png') no-repeat center / contain;
  filter: brightness(0) invert(1);
  opacity: 0.10;
  pointer-events: none;
}
.footer-nye-logo-img { height: 54px; }
.footer-nye-tag { font-size: 13.5px; letter-spacing: 0.1em; }
.footer-nye-cta { border-width: 1px; padding: 12px 26px; }
.footer-nye-cta:hover { background: #fff; color: var(--b-magenta); }
.footer-nye-col h5 {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  font-family: var(--t-font-latin);
  opacity: 0.75; font-weight: 600;
}
.footer-nye-col a { transition: opacity .15s, transform .2s var(--t-ease-out); }
.footer-nye-col a:hover { transform: translateX(-4px); }
.footer-nye-bottom { border-top-color: rgba(255,255,255,0.2); }

/* =====================  QUIET DETAILS  ===================== */
.quote-block {
  border: 0;
  border-inline-start: 3px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    var(--t-grad) border-box;
  box-shadow: 0 18px 44px -24px rgba(87,43,115,.18);
  font-size: 25px;
}
.wc-divider { background: var(--t-grad); height: 3px; border-radius: 3px; }
.home-faq details {
  border-radius: 16px;
  border: 1px solid rgba(37,33,35,0.07);
  transition: box-shadow .3s, border-color .3s;
}
.home-faq details[open] {
  border-color: transparent;
  box-shadow: 0 20px 48px -22px rgba(135,43,100,.22);
}
.home-faq summary { font-size: 17px; }
/* consult box — clean, soft light only (Noa: the static lines behind were unpleasant) */
.home-consult.art-consult-in, .art-consult-in {
  border: 0;
  border-radius: 26px;
  box-shadow: 0 30px 70px -30px rgba(87,43,115,.30);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(249,218,89,0.10), transparent 55%),
    radial-gradient(120% 140% at 0% 100%, rgba(135,43,100,0.07), transparent 55%),
    #fff;
}
.form-card input:focus, .form-card textarea:focus, .form-card select:focus,
.art-consult-form input:focus {
  outline: none;
  border-color: var(--b-magenta);
  box-shadow: 0 0 0 3px rgba(135,43,100,0.12);
}
.home-4step > div { font-size: 22px; }
.home-4step .n {
  background: var(--t-grad-warm);
  font-weight: 600;
}
.home-stepper .step-n { background: var(--t-grad-warm); }

/* image frames get gentle life */
.split img, .split image-slot { transition: transform 1.2s var(--t-ease-out); }

/* metrics — display numbers */
.metrics strong {
  font-family: var(--t-font-latin);
  font-style: normal;
  font-weight: 300;
  font-size: 42px;
  background: var(--t-grad-warm);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* video slots & WhatsApp strip polish */
.home-vidslots .vidslot video, .vidslot-ph { border-radius: 20px; }
.vidslot-ph {
  background:
    url('/assets/brand/thread-soft.svg') no-repeat 50% 75% / 220% auto,
    radial-gradient(120% 90% at 70% 10%, rgba(135,43,100,0.5), transparent 60%),
    var(--t-ink-deep);
  border: 0;
}
.vidslot-play {
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.5);
  backdrop-filter: blur(4px);
  color: #fff;
}
.vidslot-soon { color: rgba(255,255,255,0.75); }
.home-wa-strip img { border-radius: 16px; }

/* breadcrumbs quieter */
.breadcrumb { opacity: 0.8; font-size: 11px; }

/* =====================  REVEAL upgrades  ===================== */
.nye-reveal { transform: translateY(26px); transition-duration: .9s; }
.v4-stagger { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--t-ease-out), transform .9s var(--t-ease-out); }
.v4-stagger.nye-in, .v4-stagger.v4-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .v4-stagger { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* =====================  MOBILE  ===================== */
@media (max-width: 820px) {
  :root { --he-nav-h: 64px; }
  .brand .mark { height: 28px; }
  .topstrip-in { height: auto; min-height: var(--he-topstrip-h); padding-block: 7px; flex-wrap: wrap; gap: 6px 12px; font-size: 11px; line-height: 1.4; }
  .topstrip .sep { display: none; }
  .hero-money-bg { height: 52vh; animation: none; }
  .hero-money-card {
    width: auto; margin: -64px 14px 0;
    padding: 34px 26px 32px;
    border-radius: 22px !important;
  }
  .hero-ghost { display: none; }
  .footer-nye::after { width: 78vw; opacity: 0.08; }
  .home-4step > div { font-size: 18px; }
  .nye-thread { height: 40px; }
}