/* האתר הציבורי — sufwed.com. העתק 1:1 של העיצוב מ-Base44 (Tailwind),
   כתוב כאן ביד. נקודות השבירה כמו שם: sm 640, md 768, lg 1024. */
/* Assistant — הגופן שהאתר תוכנן איתו (ב-Base44 הוא אף פעם לא נטען, וכל
   מכשיר הציג גופן אחר). גופן משתנה: כל העוביים בקובץ אחד, מהשרת שלנו. */
@font-face { font-family: 'Assistant'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/static/fonts/Assistant-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Assistant'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url('/static/fonts/Assistant-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --gold: #C9A96E;
  --gold-light: #D4BA8A;
  --ivory: #FAF8F5;
  --ink: #1A1A1A;
  --muted: #8A8680;
  --line: #E8E3DD;
  --zinc-100: #f4f4f5; --zinc-200: #e4e4e7; --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa; --zinc-500: #71717a; --zinc-600: #52525b;
  --gray-100: #f3f4f6;
  --sans: 'Assistant', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --display: 'Assistant', ui-sans-serif, system-ui, sans-serif;
}
*, ::before, ::after { box-sizing: border-box; border: 0 solid #e5e5e5; margin: 0; padding: 0; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; tab-size: 4; font-family: var(--sans); }
body { margin: 0; line-height: inherit; background: #fff; color: hsl(0 0% 3.9%); }
img, svg { display: block; vertical-align: middle; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: inherit; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: transparent; cursor: pointer; }
h1, h2, h3, p { font-size: inherit; font-weight: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.disp { font-family: var(--display); }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* כניסה עדינה כשגוללים — רק כשיש JS; בלעדיו הכל גלוי */
.js .rv { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.js .rv.x-in { transform: translateX(20px); }
.js .rv.x-in-l { transform: translateX(-20px); }
.js .rv.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .rv { opacity: 1; transform: none; transition: none; } }

/* ---------- סרגל עליון ---------- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: #fff; box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); }
.nav-in { width: 100%; padding: 0 20px; }
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 64px; width: 100%; direction: rtl; }
.nav-mob { display: flex; align-items: center; gap: 12px; }
.nav-mob .tog { color: var(--ink); }
.nav-desk { display: none; align-items: center; gap: 24px; }
.nav-link { font-size: 14px; line-height: 20px; letter-spacing: .12em; font-weight: 300; white-space: nowrap; color: var(--ink); transition: color .3s; }
.nav-link:hover, .nav-link.cur { color: var(--gold); }
[dir=ltr] .nav-desk { direction: ltr; }
[dir=ltr] .nav-desk .lang { order: 2; }
.nav-logo { display: flex; align-items: center; transition: opacity .15s; }
.nav-logo:hover { opacity: .8; }
.nav-logo img { height: 48px; width: auto; }
.soc { color: var(--zinc-400); transition: color .15s; }
.soc:hover { color: var(--gold); }
.lang { color: var(--zinc-400); font-size: 12px; line-height: 16px; letter-spacing: .1em; font-weight: 300; border: 1px solid var(--zinc-300); border-radius: 9999px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; transition: color .15s, border-color .15s; }
.lang:hover { color: var(--gold); border-color: var(--gold); }
.mob-menu { background: var(--ivory); border-top: 1px solid var(--line); overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.mob-menu.open { grid-template-rows: 1fr; }
.mob-menu > div { min-height: 0; }
.mob-menu nav { padding: 32px 24px; display: flex; flex-direction: column; gap: 24px; }
.mob-menu a { font-size: 14px; line-height: 20px; letter-spacing: .12em; font-weight: 300; color: var(--ink); }
.mob-menu a.cur { color: var(--gold); }
.mob-menu:not(.open) { border-top-width: 0; }
main.pad { padding-top: 64px; }
@media (min-width: 768px) {
  .nav-in { padding: 0 32px; }
  .nav-mob, .mob-menu { display: none; }
  .nav-desk { display: flex; }
  .nav-link { font-size: 16px; line-height: 24px; }
}
@media (min-width: 1024px) {
  .nav-in { padding: 0 40px; }
  .nav-row { height: 80px; }
  .nav-desk { gap: 40px; }
  .nav-logo img { height: 64px; }
  main.pad { padding-top: 80px; }
}

/* ---------- תחתית ---------- */
.foot { background: var(--gray-100); color: var(--zinc-600); padding: 64px 0; }
.foot-in { max-width: 1280px; margin: 0 auto; padding: 0 24px; text-align: center; }
.foot-name { color: var(--zinc-500); margin-bottom: 24px; font-size: 18px; line-height: 28px; font-weight: 300; letter-spacing: .15em; }
.foot-tag { color: var(--zinc-400); font-size: 12px; line-height: 16px; letter-spacing: .1em; }
.foot-icons { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
.foot-contact { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; }
.foot-contact a { display: inline-flex; align-items: center; gap: 8px; color: var(--zinc-600); font-size: 14px; transition: color .15s; }
.foot-contact a:hover { color: var(--gold); }
.foot-contact .ico { width: 17px; height: 17px; color: var(--gold); }
.foot-contact svg.ico[fill] { fill: currentColor; stroke: none; }
.foot-legal { margin-top: 24px; }
.foot-legal a { color: var(--zinc-400); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.foot-links { margin-top: 32px; display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; }
.foot-links a { color: var(--zinc-500); font-size: 12px; line-height: 16px; letter-spacing: .05em; transition: color .15s; }
.foot-links a:hover { color: var(--gold); }
@media (min-width: 768px) { .foot { padding: 80px 0; } }

/* ---------- רכיבים חוזרים ---------- */
.bg-ivory { background: var(--ivory); }
.minh { min-height: 100vh; }
.eyebrow { color: var(--gold); font-size: 14px; line-height: 20px; letter-spacing: .3em; text-transform: uppercase; margin-bottom: 16px; }
.h-page { font-size: 30px; line-height: 36px; font-weight: 200; color: var(--ink); }
.goldline { width: 48px; height: 1px; background: var(--gold); margin: 24px auto 0; }
.page-head { padding: 48px 20px 24px; text-align: center; }
.btn-line { display: inline-block; padding: 12px 32px; border: 1px solid var(--gold); color: var(--gold); font-size: 14px; line-height: 20px; letter-spacing: .15em; font-weight: 300; white-space: nowrap; transition: all .3s; }
.btn-line:hover { background: var(--gold); color: #fff; }
.cta-row { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 56px 20px; text-align: center; }
.cta-row p { color: var(--ink); font-weight: 300; font-size: 18px; line-height: 28px; }
@media (min-width: 640px) { .cta-row { flex-direction: row; } }
@media (min-width: 768px) {
  .h-page { font-size: 48px; line-height: 1; }
  .page-head { padding: 96px 20px 48px; }
}

/* ---------- דף הבית ---------- */
.hero { position: relative; height: 100vh; height: 100svh; width: 100%; overflow: hidden; background: #222; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; z-index: 0; transition: opacity 1.8s ease-in-out; }
.hero-slide.on { opacity: 1; z-index: 1; }
.hero-shade { position: absolute; inset: 0; background: rgb(0 0 0 / .3); z-index: 2; }
/* הכותרת יושבת נמוך, על פס כהה בתחתית — לא על הפנים של הזוג */
.hero-txt { position: absolute; inset: auto 0 0; z-index: 3; text-align: center; padding: 120px 20px 84px; color: #fff;
  background: linear-gradient(to top, rgb(0 0 0 / .55), rgb(0 0 0 / .25) 55%, transparent); }
.hero-eye { color: var(--gold-light); font-size: 13px; letter-spacing: .35em; margin-bottom: 6px; }
.hero-h1 { font-size: 40px; line-height: 1.1; font-weight: 200; letter-spacing: .04em; margin-bottom: 22px; }
.hero .hero-btn { border-color: rgb(255 255 255 / .9); color: #fff; padding: 12px 30px; font-size: 14px; letter-spacing: .15em; }
.hero .hero-btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
@media (min-width: 768px) { .hero-txt { padding-bottom: 96px; } .hero-h1 { font-size: 60px; } .hero-eye { font-size: 15px; } }
.hero-ctl { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; z-index: 3; }
.hero-ctl .arr { color: rgb(255 255 255 / .5); transition: color .3s; }
.hero-ctl .arr:hover { color: #fff; }
.hero-dots { display: flex; gap: 12px; }
.hero-dots button { width: 32px; height: 2px; background: rgb(255 255 255 / .3); transition: all .5s; }
.hero-dots button.on { background: #fff; }

.stories-sec { padding: 64px 16px; background: var(--ivory); }
.wrap7 { max-width: 1280px; margin: 0 auto; }
.sec-head { text-align: center; margin-bottom: 48px; }
.feat-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.card { position: relative; display: block; overflow: hidden; }
.card-img { aspect-ratio: 3 / 4; overflow: hidden; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease-out; }
.card:hover .card-img img { transform: scale(1.05); }
.card-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .6), rgb(0 0 0 / .1), transparent); opacity: .7; transition: opacity .5s; }
.card:hover .card-shade { opacity: .9; }
.card-txt { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px; }
.card-venue { color: var(--gold); font-size: 12px; line-height: 16px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 8px; }
.card-names { font-size: 20px; line-height: 28px; font-weight: 300; color: #fff; margin-bottom: 4px; }
.card-title { color: rgb(255 255 255 / .6); font-size: 14px; line-height: 20px; font-weight: 300; }
.card-go { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: rgb(255 255 255 / 0); transform: translateY(8px); transition: all .5s; }
.card:hover .card-go { color: rgb(255 255 255 / .8); transform: none; }
.card-go span { font-size: 12px; line-height: 16px; letter-spacing: .15em; }
.card-go .ico { width: 14px; height: 14px; }
.all-link-wrap { text-align: center; margin-top: 64px; }
.all-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 18px; line-height: 28px; letter-spacing: .2em; text-transform: uppercase; transition: color .3s; }
.all-link:hover { color: var(--gold); }
.all-link .ico { width: 32px; height: 32px; transition: transform .15s; }
.all-link:hover .ico { transform: translateX(-4px); }
[dir=ltr] .all-link:hover .ico { transform: translateX(4px); }
@media (min-width: 640px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) {
  .stories-sec { padding: 128px 24px; }
  .sec-head { margin-bottom: 80px; }
  .feat-grid { gap: 24px; max-width: 896px; margin: 0 auto; }
  .feat-grid .card-img { aspect-ratio: 2 / 3; }
  .feat-grid .card-txt { padding: 40px; }
  .card-names { font-size: 24px; line-height: 32px; }
}
@media (min-width: 1024px) { .feat-grid { gap: 40px; } }

.cta-band { position: relative; padding: 128px 0; overflow: hidden; }
.cta-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cta-shade { position: absolute; inset: 0; background: rgb(0 0 0 / .5); }
.cta-in { position: relative; z-index: 10; text-align: center; padding: 0 20px; }
.cta-title { font-size: 30px; line-height: 1.625; font-weight: 200; color: #fff; max-width: 672px; margin: 0 auto; transition: color .5s; }
.cta-in a.t:hover .cta-title { color: var(--gold); }
.cta-line { width: 48px; height: 1px; background: var(--gold); margin: 32px auto 48px; }
.btn-cta { display: inline-block; padding: 16px 48px; border: 1px solid var(--gold); color: var(--gold); font-size: 14px; line-height: 20px; letter-spacing: .2em; text-transform: uppercase; transition: all .5s; }
.btn-cta:hover { background: var(--gold); color: #fff; }
@media (min-width: 768px) { .cta-band { padding: 160px 0; } .cta-title { font-size: 48px; } }

/* ---------- חתונות ---------- */
.stories-grid-wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px 96px; }
.stories-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stories-grid .card-shade { background: linear-gradient(to top, rgb(0 0 0 / .6), transparent, transparent); opacity: .6; }
.stories-grid .card:hover .card-shade { opacity: .8; }
.stories-grid .card-venue { font-size: 10px; line-height: 15px; margin-bottom: 4px; }
.stories-grid .card-names { font-size: 16px; line-height: 24px; margin-bottom: 2px; }
.stories-grid .card-title { display: none; color: rgb(255 255 255 / .5); }
.stories-grid .card-go { margin-top: 8px; }
.stories-grid .card:hover .card-go { color: rgb(255 255 255 / .7); }
.stories-head { padding: 48px 20px 32px; text-align: center; }
@media (min-width: 768px) {
  .stories-head { padding: 80px 20px 64px; }
  .stories-grid-wrap { padding: 0 24px 128px; }
  .stories-grid { gap: 24px; }
  .stories-grid .card-txt { padding: 32px; }
  .stories-grid .card-venue { font-size: 12px; line-height: 16px; margin-bottom: 8px; }
  .stories-grid .card-names { font-size: 20px; line-height: 28px; margin-bottom: 4px; }
  .stories-grid .card-title { display: block; font-size: 14px; line-height: 20px; }
  .stories-grid .card-go { margin-top: 16px; }
}
@media (min-width: 1024px) { .stories-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; } }

/* ---------- סיפור ---------- */
.st-hero { position: relative; height: 60vh; overflow: hidden; }
.st-hero img { width: 100%; height: 100%; object-fit: cover; }
.st-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .7), rgb(0 0 0 / .2), transparent); }
.st-txt { position: absolute; bottom: 0; left: 0; right: 0; padding: 32px; }
.st-back { display: inline-flex; align-items: center; gap: 8px; color: rgb(255 255 255 / .6); font-size: 12px; line-height: 16px; letter-spacing: .05em; margin-bottom: 24px; transition: color .15s; }
.st-back:hover { color: #fff; }
.st-back .ico, .st-back2 .ico { width: 14px; height: 14px; }
.st-h1 { font-size: 30px; line-height: 36px; font-weight: 200; color: #fff; margin-bottom: 12px; }
.st-title { color: rgb(255 255 255 / .6); font-size: 16px; line-height: 24px; font-weight: 300; margin-bottom: 16px; }
.st-meta { display: flex; align-items: center; gap: 24px; color: rgb(255 255 255 / .4); font-size: 12px; line-height: 16px; letter-spacing: .05em; }
.st-meta span { display: flex; align-items: center; gap: 6px; }
.st-meta .ico { width: 12px; height: 12px; }
.st-desc { max-width: 768px; margin: 0 auto; text-align: center; padding: 64px 24px; }
.st-desc .l { width: 40px; height: 1px; background: var(--gold); margin: 0 auto 32px; }
.st-desc .l.b { margin: 32px auto 0; }
.st-desc p { color: var(--muted); font-size: 16px; line-height: 1.625; font-weight: 300; white-space: pre-line; }
.gal-wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px 64px; }
.gal { display: flex; flex-direction: column; gap: 12px; }
.gal.cols { flex-direction: row; align-items: flex-start; }
.gal-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.gal-item { cursor: pointer; }
.gal-item .fr { position: relative; overflow: hidden; }
.gal-item img { width: 100%; height: auto; object-fit: cover; transition: transform .7s; }
.gal-item:hover img { transform: scale(1.03); }
.gal-item .fr::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0); transition: background .5s; }
.gal-item:hover .fr::after { background: rgb(0 0 0 / .1); }
.gal-item p { margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--muted); font-weight: 300; }
.st-next { position: relative; display: block; max-width: 1232px; margin: 0 auto 48px; height: 220px; overflow: hidden; color: #fff; }
.st-next img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease-out; }
.st-next:hover img { transform: scale(1.04); }
.st-next-shade { position: absolute; inset: 0; background: linear-gradient(to left, rgb(0 0 0 / .65), rgb(0 0 0 / .25)); }
.st-next-txt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 32px; gap: 4px; }
.st-next-eye { color: var(--gold-light); font-size: 12px; letter-spacing: .3em; }
.st-next-name { font-size: 28px; font-weight: 200; }
.st-next-venue { color: rgb(255 255 255 / .7); font-size: 14px; font-weight: 300; }
.st-next-arr { position: absolute; left: 28px; top: 50%; transform: translateY(-50%); transition: transform .3s; }
.st-next-arr .ico { width: 28px; height: 28px; stroke-width: 1.5; }
.st-next:hover .st-next-arr { transform: translate(-6px, -50%); }
@media (max-width: 1263px) { .st-next { margin-inline: 16px; } }
@media (min-width: 768px) { .st-next { height: 300px; } .st-next-txt { padding: 0 64px; } .st-next-name { font-size: 40px; } }
.st-end { display: flex; justify-content: center; padding-bottom: 96px; }
.st-back2 { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; line-height: 16px; letter-spacing: .05em; border: 1px solid rgb(201 169 110 / .4); padding: 12px 32px; transition: all .3s; }
.st-back2:hover { border-color: var(--gold); color: var(--gold); }
@media (min-width: 768px) {
  .st-hero { height: 75vh; }
  .st-txt { padding: 64px; }
  .st-h1 { font-size: 48px; line-height: 1; }
  .st-desc { padding: 80px 24px; }
  .st-desc p { font-size: 18px; }
  .gal-wrap { padding: 0 24px 80px; }
  .gal, .gal-col { gap: 16px; }
  .st-end { padding-bottom: 128px; }
}
@media (min-width: 1024px) { .st-h1 { font-size: 60px; } }

.lb { position: fixed; inset: 0; z-index: 60; background: rgb(0 0 0 / .95); display: flex; align-items: center; justify-content: center; }
.lb[hidden] { display: none; }
.lb img { max-height: 90vh; max-width: 90vw; object-fit: contain; }
.lb button { position: absolute; z-index: 50; color: rgb(255 255 255 / .4); transition: color .15s; }
.lb button:hover { color: #fff; }
.lb .x { top: 24px; left: 24px; color: rgb(255 255 255 / .6); }
.lb .x .ico { width: 24px; height: 24px; }
.lb .nx { left: 16px; }
.lb .pv { right: 16px; }
.lb .nx .ico, .lb .pv .ico { width: 32px; height: 32px; }
.lb .ct { position: absolute; bottom: 24px; color: rgb(255 255 255 / .4); font-size: 12px; line-height: 16px; letter-spacing: .1em; direction: ltr; }
@media (min-width: 768px) { .lb .nx { left: 32px; } .lb .pv { right: 32px; } }

.missing { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 24px; }
.missing h1 { font-size: 24px; line-height: 32px; font-weight: 300; color: var(--ink); margin-bottom: 16px; }
.missing a { color: var(--gold); font-size: 14px; letter-spacing: .05em; }
.missing a:hover { text-decoration: underline; }

/* ---------- אודות ---------- */
.ab-hero { position: relative; height: 50vh; overflow: hidden; background: var(--zinc-200); }
.ab-hero img { width: 100%; height: 100%; object-fit: cover; }
.ab-hero .dk { position: absolute; inset: 0; background: #000; }
.ab-hero .tx { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; }
.ab-h1 { font-size: 36px; line-height: 40px; font-weight: 200; color: #fff; }
.ab-body { max-width: 1152px; margin: 0 auto; padding: 56px 20px; }
.ab-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
.ab-pic-wrap { display: flex; justify-content: center; }
.ab-pic { position: relative; width: 75%; background: var(--zinc-200); isolation: isolate; }
.ab-pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ab-pic::after { content: ""; position: absolute; bottom: -16px; left: -16px; width: 100%; height: 100%; border: 1px solid rgb(201 169 110 / .2); z-index: -1; }
.ab-line { width: 48px; height: 1px; background: var(--gold); margin-bottom: 32px; }
.ab-h2 { font-size: 24px; line-height: 1.625; font-weight: 200; color: var(--ink); margin-bottom: 32px; }
.ab-bio { color: var(--muted); font-size: 16px; line-height: 1.625; font-weight: 300; display: flex; flex-direction: column; gap: 20px; }
.ab-bio p { white-space: pre-line; }
.ab-contact { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; }
.ab-contact div { display: flex; align-items: center; gap: 12px; color: var(--muted); }
.ab-contact .ico { width: 16px; height: 16px; color: var(--gold); }
.ab-contact a:hover { color: var(--gold); }
.vals { background: var(--ivory); padding: 64px 0; }
.vals-in { max-width: 1152px; margin: 0 auto; padding: 0 20px; }
.vals .sec-head { margin-bottom: 64px; }
.h-sec { font-size: 30px; line-height: 36px; font-weight: 200; color: var(--ink); }
.vals-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
.val { text-align: center; }
.val .n { width: 48px; height: 48px; margin: 0 auto 24px; border: 1px solid rgb(201 169 110 / .3); border-radius: 9999px; display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 18px; font-weight: 300; }
.val h3 { font-size: 20px; line-height: 28px; font-weight: 300; color: var(--ink); margin-bottom: 16px; }
.val p { color: var(--muted); font-size: 14px; line-height: 1.625; font-weight: 300; }
@media (min-width: 768px) {
  .ab-hero { height: 60vh; }
  .ab-h1 { font-size: 60px; line-height: 1; }
  .ab-body { padding: 112px 20px; }
  .ab-pic { width: 100%; }
  .ab-h2 { font-size: 30px; }
  .vals { padding: 112px 0; }
  .h-sec { font-size: 36px; line-height: 40px; }
  .vals-grid { grid-template-columns: repeat(3, 1fr); gap: 64px; }
}
@media (min-width: 1024px) {
  .ab-grid { grid-template-columns: repeat(2, 1fr); gap: 96px; }
  .ab-pic-wrap { justify-content: flex-start; }
  .ab-txt { padding-top: 32px; }
}

/* ---------- שאלות ותשובות ---------- */
.inv-head { padding: 48px 20px 32px; text-align: center; }
.steps-wrap { max-width: 1152px; margin: 0 auto; padding: 0 20px 80px; }
.steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.step { text-align: center; }
.step .c { width: 56px; height: 56px; margin: 0 auto 16px; border: 1px solid rgb(201 169 110 / .3); border-radius: 9999px; display: flex; align-items: center; justify-content: center; transition: background .5s; }
.step:hover .c { background: rgb(201 169 110 / .1); }
.step .c .ico { width: 24px; height: 24px; color: var(--gold); stroke-width: 1.5; }
.step h2 { font-size: 16px; line-height: 24px; font-weight: 300; color: var(--ink); margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 14px; line-height: 1.625; font-weight: 300; }
.faq-wrap { max-width: 768px; margin: 0 auto; padding: 56px 20px; }
.faq-wrap .sec-head { margin-bottom: 64px; }
.faq { border-bottom: 1px solid var(--line); }
.faq button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 24px 0; text-align: right; }
[dir=ltr] .faq button { text-align: left; }
.faq .q { font-size: 16px; line-height: 24px; font-weight: 300; color: var(--ink); flex: 1; padding-right: 16px; transition: color .3s; }
.faq button:hover .q { color: var(--gold); }
.faq .sg { color: var(--gold); flex-shrink: 0; }
.faq .sg .ico { width: 16px; height: 16px; }
.faq .sg .mi, .faq.open .sg .pl { display: none; }
.faq.open .sg .mi { display: block; }
.faq .a { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .3s ease-in-out, opacity .3s ease-in-out; }
.faq.open .a { grid-template-rows: 1fr; opacity: 1; }
.faq .a > div { overflow: hidden; }
.faq .a p { padding: 0 24px 24px 0; color: var(--muted); font-size: 14px; line-height: 1.625; font-weight: 300; white-space: pre-line; }
.faq-cta { margin-top: 56px; padding: 0; }
@media (min-width: 768px) {
  .inv-head { padding: 96px 20px 64px; }
  .steps-wrap { padding-bottom: 112px; }
  .steps { gap: 40px; }
  .step .c { width: 64px; height: 64px; margin-bottom: 24px; }
  .step h2 { font-size: 18px; line-height: 28px; margin-bottom: 12px; }
  .faq-wrap { padding: 112px 20px; }
  .faq button { padding: 28px 0; }
  .faq .q { font-size: 18px; line-height: 28px; }
  .faq .a p { padding-bottom: 28px; font-size: 16px; }
}
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, 1fr); } }

/* ---------- צור קשר ---------- */
.ct-wrap { max-width: 1152px; margin: 0 auto; padding: 0 20px 80px; }
.ct-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
.ct-intro { color: var(--muted); font-size: 16px; line-height: 1.625; font-weight: 300; margin-bottom: 40px; }
.ct-ways { display: flex; flex-direction: column; gap: 24px; }
.ct-way { display: flex; align-items: center; gap: 16px; }
.ct-way .c { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 9999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; }
.ct-way:active .c { background: rgb(201 169 110 / .1); }
.ct-way .c .ico { width: 16px; height: 16px; color: var(--gold); }
.ct-way .l { font-size: 12px; line-height: 16px; color: var(--muted); letter-spacing: .05em; margin-bottom: 2px; }
.ct-way .v { font-size: 14px; line-height: 20px; color: var(--ink); font-weight: 300; }
.ct-photo { margin-top: 48px; display: none; }
.ct-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.form { display: flex; flex-direction: column; gap: 24px; }
.form .two { display: grid; grid-template-columns: 1fr; gap: 24px; }
.form label { display: block; font-size: 12px; line-height: 16px; color: var(--muted); letter-spacing: .05em; margin-bottom: 8px; }
.form input, .form textarea { display: block; width: 100%; height: 48px; background: #fff; border: 1px solid var(--line); border-radius: 0; padding: 4px 12px; font-size: 16px; line-height: 24px; box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.form input[type=date] { font-size: 14px; min-height: 48px; }
.form textarea { height: auto; min-height: 120px; padding: 8px 12px; resize: none; }
.form input::placeholder, .form textarea::placeholder { color: #737373; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px rgb(201 169 110 / .2); }
.form .btns { display: flex; flex-direction: column; gap: 12px; }
.form .bt { flex: 1; height: 48px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; line-height: 20px; letter-spacing: .15em; border-radius: 0; transition: all .5s; }
.form .bt span { display: flex; align-items: center; gap: 8px; }
.form .bt .ico { width: 16px; height: 16px; }
.form .send { background: var(--ink); }
.form .send:hover { background: var(--gold); }
.form .wa { background: #25D366; letter-spacing: .1em; }
.form .wa:hover { background: #1ebe5d; }
.form .wa svg { width: 16px; height: 16px; fill: currentColor; }
.form .bt:disabled { opacity: .5; pointer-events: none; }
.spin { width: 20px; height: 20px; border: 2px solid #fff; border-top-color: transparent; border-radius: 9999px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* שדה למלכודת רובוטים: מוסתר בלי להזיז אותו הצידה — בדף מימין לשמאל הזזה
   שמאלה מרחיבה את הדף, והטלפון מקטין את הכל */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.form-err { color: #b45309; font-size: 14px; }
.thanks { text-align: center; padding: 80px 0; }
.thanks .c { width: 64px; height: 64px; margin: 0 auto 24px; border: 2px solid var(--gold); border-radius: 9999px; display: flex; align-items: center; justify-content: center; }
.thanks .c .ico { width: 28px; height: 28px; color: var(--gold); }
.thanks h2 { font-size: 24px; line-height: 32px; font-weight: 300; color: var(--ink); margin-bottom: 16px; }
.thanks p { color: var(--muted); font-weight: 300; }
@media (min-width: 640px) { .form .btns { flex-direction: row; } }
@media (min-width: 768px) {
  .ct-wrap { padding: 0 40px 128px; }
  .ct-photo { display: block; }
  .form .two { grid-template-columns: repeat(2, 1fr); }
  .form input, .form textarea { font-size: 14px; line-height: 20px; }
}
@media (min-width: 1024px) {
  .ct-grid { grid-template-columns: repeat(5, 1fr); gap: 80px; }
  .ct-side { grid-column: span 2; padding-top: 16px; }
  .ct-main { grid-column: span 3; }
}

/* ---------- אלבומים ---------- */
.al-hero { position: relative; width: 100%; height: 55vh; overflow: hidden; }
.al-hero img { width: 100%; height: 100%; object-fit: cover; }
.al-hero .dk { position: absolute; inset: 0; background: rgb(0 0 0 / .35); }
.al-hero .tx { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; }
.al-hero h1 { font-size: 36px; line-height: 40px; font-weight: 200; color: #fff; margin-bottom: 20px; }
.al-hero p { color: rgb(255 255 255 / .75); font-size: 16px; line-height: 24px; max-width: 576px; margin: 0 auto; font-weight: 300; }
.al-specs { background: var(--ivory); padding: 64px 0; }
.al-in { max-width: 1024px; margin: 0 auto; padding: 0 20px; }
.al-h2 { font-size: 30px; line-height: 36px; font-weight: 200; color: var(--ink); text-align: center; margin-bottom: 12px; }
.al-line { width: 32px; height: 1px; background: var(--gold); margin: 0 auto 40px; }
.spec-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.spec { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px; border: 1px solid var(--line); background: #fff; border-radius: 2px; }
.spec .c { width: 28px; height: 28px; border-radius: 9999px; border: 1px solid var(--gold); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.spec .c .ico { width: 14px; height: 14px; color: var(--gold); }
.spec p { color: var(--ink); font-size: 14px; line-height: 1.375; font-weight: 300; }
.al-covers { max-width: 1024px; margin: 0 auto; padding: 40px 20px; }
.al-sub { color: var(--ink); font-size: 24px; line-height: 32px; font-weight: 200; text-align: center; margin-bottom: 12px; }
.al-covers img { width: 100%; object-fit: cover; }
.al-gal { padding-bottom: 80px; }
.al-gal .al-line { margin: 12px auto 32px; }
.flip { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 16px; user-select: none; }
.flip-side { display: none; position: relative; flex-shrink: 0; width: 96px; overflow: hidden; cursor: pointer; }
.flip-side img { width: 100%; height: 100%; object-fit: contain; opacity: .5; transition: opacity .15s; }
.flip-side:hover img { opacity: .7; }
.flip-side .o { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; }
.flip-side:hover .o { opacity: 1; }
.flip-side .o span { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgb(255 255 255 / .8); border: 1px solid var(--gold); color: var(--gold); }
.flip-btn { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gold); color: var(--gold); transition: all .15s; }
.flip-btn:hover { background: var(--gold); color: #fff; }
.flip-main { position: relative; flex: 1; max-width: 768px; overflow: hidden; background: var(--zinc-100); }
.flip-main img { width: 100%; height: auto; object-fit: contain; transition: transform .3s ease-in-out, opacity .3s ease-in-out; }
.flip-main img.out-l { transform: translateX(-80px); opacity: 0; }
.flip-main img.out-r { transform: translateX(80px); opacity: 0; }
.al-cta { position: relative; padding: 80px 0; overflow: hidden; }
.al-cta .cta-title { font-size: 20px; }
@media (min-width: 768px) {
  .al-hero { height: 70vh; }
  .al-hero h1 { font-size: 60px; line-height: 1; }
  .al-hero p { font-size: 18px; line-height: 28px; }
  .al-specs { padding: 80px 0; }
  .al-h2 { font-size: 36px; line-height: 40px; }
  .spec-grid { grid-template-columns: repeat(4, 1fr); }
  .al-sub { font-size: 30px; line-height: 36px; }
  .flip { gap: 20px; }
  .flip-side { display: block; }
  .flip-btn { display: none; }
  .al-cta { padding: 112px 0; }
  .al-cta .cta-title { font-size: 30px; }
}
@media (min-width: 1024px) { .flip-side { width: 144px; } }

/* ---------- שירותים ---------- */
.sv { padding-top: 80px; }
.sv-head { max-width: 1024px; margin: 0 auto; padding: 64px 24px; text-align: center; }
.sv-head .tag { color: var(--gold); font-size: 12px; line-height: 16px; letter-spacing: .35em; text-transform: uppercase; margin-bottom: 16px; }
.sv-head h1 { font-size: 36px; line-height: 40px; font-weight: 200; color: var(--ink); margin-bottom: 24px; }
.sv-head p { color: var(--muted); font-size: 18px; line-height: 1.625; max-width: 672px; margin: 0 auto; font-weight: 300; }
.sv-list { max-width: 1152px; margin: 0 auto; padding: 0 24px 96px; display: flex; flex-direction: column; gap: 112px; }
.sv-item { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
.sv-item .t { display: flex; flex-direction: column; gap: 20px; }
.sv-item .t .l { width: 40px; height: 1px; background: var(--gold); }
.sv-item h2 { font-size: 30px; line-height: 36px; font-weight: 200; color: var(--ink); }
.sv-item p { color: var(--muted); font-weight: 300; line-height: 1.625; font-size: 16px; }
.sv-ph { aspect-ratio: 4 / 5; background: var(--zinc-100); }
.sv-end { background: #fff; border-top: 1px solid var(--line); padding: 64px 0; text-align: center; }
.sv-end a { display: inline-block; border: 1px solid var(--gold); color: var(--gold); padding: 12px 40px; font-size: 14px; letter-spacing: .2em; transition: all .3s; }
.sv-end a:hover { background: var(--gold); color: #fff; }
@media (min-width: 768px) {
  .sv-head { padding: 96px 24px; }
  .sv-head h1 { font-size: 48px; line-height: 1; }
  .sv-item { grid-template-columns: repeat(2, 1fr); gap: 64px; }
  .sv-item.flipd { direction: rtl; }
  .sv-item h2 { font-size: 36px; line-height: 40px; }
}

/* ---------- תצוגה (רק במערכת) ---------- */
.pvbar { position: fixed; bottom: 12px; right: 12px; z-index: 70; background: #1A1A1A; color: #fff; font-size: 12px; padding: 8px 12px; border-radius: 9999px; display: flex; gap: 10px; align-items: center; box-shadow: 0 4px 14px rgb(0 0 0 / .25); }
.pvbar a { color: var(--gold-light); }

/* ---------- וואטסאפ צף (בכל הדפים חוץ מצור קשר) ---------- */
.wa-float { position: fixed; z-index: 45; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 54px; height: 54px; border-radius: 9999px; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgb(0 0 0 / .22); transition: transform .2s, box-shadow .2s; }
.wa-float:hover { transform: scale(1.06); box-shadow: 0 8px 26px rgb(0 0 0 / .28); }
/* בדף הבית — מופיע אחרי שגוללים מעבר לתמונה הגדולה (לא מסתיר את החיצים שלה) */
.wa-float.later { opacity: 0; transform: scale(.6); pointer-events: none; }
.wa-float { transition: transform .2s, box-shadow .2s, opacity .25s; }
.wa-float svg { width: 28px; height: 28px; }

/* ---------- צור קשר: בדיקת תאריך ---------- */
.dc { background: #fff; border: 1px solid var(--line); padding: 28px 24px; text-align: center; margin-bottom: 32px; }
.dc-q { font-size: 26px; font-weight: 200; color: var(--ink); }
.dc-sub { color: var(--muted); font-size: 15px; font-weight: 300; margin: 6px 0 20px; }
.dc-row { display: flex; gap: 10px; max-width: 420px; margin: 0 auto; }
.dc-row input { flex: 1; min-width: 0; height: 48px; border: 1px solid var(--line); background: #fff; padding: 4px 12px; font-size: 16px; border-radius: 0; -webkit-appearance: none; appearance: none; }
.dc-row input:focus { outline: none; border-color: var(--gold); }
.dc-row .bt { flex: 0 0 auto; padding: 0 28px; height: 48px; color: #fff; background: var(--ink); font-size: 14px; letter-spacing: .15em; transition: background .4s; }
.dc-row .bt:hover { background: var(--gold); }
.dc-res { margin: 18px auto 0; max-width: 460px; padding: 14px 16px; font-size: 15px; line-height: 1.6; font-weight: 300; color: var(--ink); background: var(--ivory); border: 1px solid var(--line); }
.dc-res.free { background: #f2f8f1; border-color: #cfe5cb; }
.dc-res.held { background: #fbf6ec; border-color: #eadbb8; }
.dc-res.busy { background: #f8f3f1; border-color: #e8d9d3; }
.dc-res b { font-weight: 600; }
.dc-skip { margin-top: 16px; color: var(--muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.dc-skip:hover { color: var(--gold); }
.js .form.wait { display: none; }
.form-hint { margin-top: -12px; font-size: 12px; color: var(--muted); }
.dc-inline { margin-top: 6px; font-size: 13px; color: var(--muted); }
.dc-inline.free { color: #3f7d3a; }
.dc-inline.busy { color: #a0522d; }
@media (min-width: 768px) { .dc { padding: 36px 32px; } .dc-q { font-size: 30px; } }

/* ---------- הצהרת נגישות ---------- */
.legal { max-width: 768px; margin: 0 auto; padding: 0 20px 96px; color: var(--ink); font-weight: 300; line-height: 1.8; }
.legal h2 { font-size: 22px; font-weight: 400; margin: 32px 0 8px; }
.legal p, .legal li { color: #4a4743; }
.legal ul { padding-inline-start: 22px; }
.legal a { color: var(--gold); text-decoration: underline; }

/* ===================================================================
   קצב אחיד (3.10.2026): 96px בין חלקים במחשב, 64 בטלפון; כותרת→תוכן
   48/36. במקום ריפודים שנערמו זה על זה (עד 224px בין חלקים), חלקים
   שכנים באותו רקע מופרדים ברצועה לבנה ולא ברווח ענק.
   =================================================================== */
:root { --sec: 64px; --head-gap: 36px; }
@media (min-width: 768px) { :root { --sec: 96px; --head-gap: 48px; } }

/* רצועה לבנה לכל הרוחב, גם כשהתוכן עצמו ברוחב מוגבל */
.band { background: #fff; box-shadow: 0 0 0 100vmax #fff; clip-path: inset(0 -100vmax); }

/* דף הבית */
.stories-sec { padding-block: var(--sec); }
.sec-head { margin-bottom: var(--head-gap); }
.all-link-wrap { margin-top: 48px; }
.cta-band { padding-block: 112px; }
@media (min-width: 768px) { .cta-band { padding-block: 144px; } }

/* חתונות */
.stories-grid-wrap { padding-bottom: 0; }
.stories-head { padding-bottom: var(--head-gap); }
.cta-row { padding-block: var(--sec); }
.card-shade { background: linear-gradient(to top, rgb(0 0 0 / .72), rgb(0 0 0 / .15) 55%, transparent); }
.stories-grid .card-shade { background: linear-gradient(to top, rgb(0 0 0 / .7), transparent 60%); opacity: .75; }

/* סיפור */
.st-desc { padding-block: 56px; }
.gal-wrap { padding-bottom: var(--sec); }
.st-next { margin-bottom: 40px; }
.st-end { padding-bottom: var(--sec); }
@media (min-width: 768px) { .st-desc { padding-block: 72px; } }

/* אודות */
.ab-body { padding-block: var(--sec); }
.vals { padding-block: var(--sec); background: #fff; }
.vals .sec-head { margin-bottom: var(--head-gap); }

/* שאלות ותשובות */
.inv-head { padding-bottom: var(--head-gap); }
.steps-wrap { padding-block: 56px; }
.faq-wrap { padding-block: var(--sec) 0; }
.faq-wrap .sec-head { margin-bottom: 28px; }
.faq-cta { margin-top: 0; }
@media (min-width: 768px) { .steps-wrap { padding-block: 72px; } }

/* צור קשר — הבדיקה והטופס בכרטיס אחד */
.page-head { padding-bottom: var(--head-gap); }
.ct-wrap { padding-bottom: var(--sec); }
.ct-main { background: #fff; border: 1px solid var(--line); padding: 28px 20px; align-self: start; }
.ct-main .dc { background: none; border: 0; padding: 0 0 4px; margin-bottom: 0; }
.ct-main .form:not(.wait) { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.ct-main .form[hidden] { display: none; }
@media (min-width: 768px) { .ct-main { padding: 40px 36px; } }
.form .wa { background: #0F7B42; }
.form .wa:hover { background: #0C6636; }

/* אלבומים */
.al-specs { padding-block: var(--sec); }
.al-covers { padding: 0 20px var(--sec); }
.al-gal { padding-bottom: var(--sec); }
.al-line { margin-bottom: 32px; }

/* הצהרת נגישות */
.legal { padding-bottom: var(--sec); }

/* גלילה לטופס/לעוגן — לא אל מתחת לסרגל העליון הקבוע */
html { scroll-padding-top: 88px; }
@media (min-width: 1024px) { html { scroll-padding-top: 104px; } }
/* בטלפון: קודם בדיקת התאריך (הפעולה עצמה), אחר כך הטקסט ופרטי הקשר */
@media (max-width: 1023px) { .ct-main { order: -1; } }

/* דף התודה — עוד חתונות בזמן שמחכים */
.th-more { margin: 28px 0 14px; color: var(--ink); font-size: 15px; }
.th-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 520px; margin: 0 auto; }
.th-grid .card-txt { padding: 10px; }
.th-grid .card-names { font-size: 14px; line-height: 1.3; margin: 0; }
.thanks { padding: 48px 0 8px; }

/* סיפור: המקום והתאריך קריאים (היו 12px באפור שקוף) */
.st-title { color: rgb(255 255 255 / .85); font-size: 18px; }
.st-meta { color: rgb(255 255 255 / .85); font-size: 14px; gap: 20px; flex-wrap: wrap; }
.st-meta .ico { width: 15px; height: 15px; color: var(--gold-light); }
.st-shade { background: linear-gradient(to top, rgb(0 0 0 / .78), rgb(0 0 0 / .25) 55%, transparent); }
@media (min-width: 768px) { .st-title { font-size: 20px; } .st-meta { font-size: 15px; } }

/* אלבומים: מה יש בסט */
.al-set { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin: -8px auto 32px; text-align: center; }
.al-set div { display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--line); padding: 14px 22px; min-width: 180px; }
.al-set b { font-weight: 500; font-size: 17px; color: var(--ink); }
.al-set span { font-size: 13px; color: var(--muted); }
.al-set i { font-style: normal; color: var(--gold); font-size: 22px; font-weight: 200; }

/* <picture> לא משנה את הפריסה — התמונה מתנהגת כאילו היא ישירות בתוך המסגרת */
picture { display: contents; }

/* הסליידר: מי בתמונה — קישור לסיפור שלהם */
.hero-cap { position: absolute; z-index: 4; right: 20px; bottom: 34px; display: inline-flex; align-items: center; gap: 8px;
  color: rgb(255 255 255 / .85); font-size: 13px; letter-spacing: .06em; opacity: 0; pointer-events: none; transition: opacity 1.2s, color .2s; }
.hero-cap.on { opacity: 1; pointer-events: auto; }
.hero-cap:hover { color: #fff; }
.hero-cap .ico { width: 14px; height: 14px; }
@media (max-width: 767px) { .hero-cap { right: 0; left: 0; justify-content: center; bottom: 76px; font-size: 12px; } .hero-txt { padding-bottom: 104px; } }
@media (min-width: 768px) { .hero-cap { right: 32px; bottom: 38px; } }
@media (min-width: 1024px) { .hero-cap { right: 40px; } }
.th-grid .card-shade { opacity: 1; background: linear-gradient(to top, rgb(0 0 0 / .78), transparent 60%); }
.th-grid .card-names { text-shadow: 0 1px 6px rgb(0 0 0 / .4); }

/* סיפור בלי תיאור נפרד — הגלריה לא נצמדת לתמונה הגדולה */
.st-hero + .gal-wrap { padding-top: 40px; }
@media (min-width: 768px) { .st-hero + .gal-wrap { padding-top: 64px; } }

/* כותרת על תמונה (שאלות ותשובות) — כמו אודות ואלבומים, רק נמוכה יותר: דף לקריאה */
.ph-head { position: relative; height: 38vh; min-height: 240px; overflow: hidden; background: var(--zinc-200); }
.ph-head img { width: 100%; height: 100%; object-fit: cover; }
.ph-shade { position: absolute; inset: 0; background: rgb(0 0 0 / .45); }
.ph-txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 20px; }
.ph-h1 { font-size: 36px; line-height: 1.1; font-weight: 200; color: #fff; }
@media (min-width: 768px) { .ph-head { height: 46vh; } .ph-h1 { font-size: 56px; } }
.ph-head + .steps-wrap { margin-top: 0; }

/* ===================================================================
   כפתורים (6.10.2026): שני סוגים בלבד.
   btn-solid — הפעולה העיקרית (צרו קשר, בדקו תאריך): מלא, עם חץ.
   go-link   — מעבר לדף אחר (אודות, שאלות, כל הסיפורים): טקסט עם קו זהב
               קצר שמתארך במעבר עכבר — בלי מסגרת.
   =================================================================== */
.btn-solid { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 30px;
  background: var(--ink); color: #fff; font-size: 14px; line-height: 20px; letter-spacing: .14em; font-weight: 400;
  border: 0; transition: background .3s, color .3s; }
.btn-solid .ico { width: 16px; height: 16px; transition: transform .3s; }
.btn-solid:hover { background: var(--gold); color: #fff; }
.btn-solid:hover .ico { transform: translateX(-4px); }
.btn-solid.light { background: #fff; color: var(--ink); }
.btn-solid.light:hover { background: var(--gold); color: #fff; }
.go-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 16px; line-height: 24px;
  letter-spacing: .1em; padding-bottom: 6px;
  background: linear-gradient(var(--gold), var(--gold)) no-repeat right bottom / 40% 1px;
  transition: background-size .4s, color .3s; }
.go-link:hover { background-size: 100% 1px; color: #a8874d; }
.go-link .ico { width: 16px; height: 16px; transition: transform .3s; }
.go-link:hover .ico { transform: translateX(-4px); }
.go-link.back:hover .ico { transform: translateX(4px); }
.go-link.lg { font-size: 18px; letter-spacing: .16em; }
.cta-line { margin-bottom: 36px; }
.cta-row { gap: 18px; }
.missing a.go-link { color: var(--ink); font-size: 16px; letter-spacing: .1em; }
.missing a.go-link:hover { text-decoration: none; }

/* ---------- נגישות (ת"י 5568, רמה AA) — 7.10.2026 ----------
   ניגודיות: טקסט על רקע בהיר לפחות 4.5:1. הזהב המקורי (#C9A96E) נשאר לקווים,
   לאייקונים ולטקסט על תמונות; טקסט זהב על רקע בהיר עובר לגוון עמוק יותר. */
:root { --gold-ink: #876B3D; --muted: #6F6B65; }
.eyebrow, .val .n, .nav-link.cur, .mob-menu a.cur, .legal a, .missing a, .sv-head .tag, .al-set i { color: var(--gold-ink); }
.ph-txt .eyebrow, .ab-hero .eyebrow, .al-hero .eyebrow { color: var(--gold-light); }
.nav-link:hover, .soc:hover, .foot-contact a:hover, .foot-links a:hover, .all-link:hover, .ab-contact a:hover,
.faq button:hover .q, .dc-skip:hover, .go-link:hover { color: var(--gold-ink); }
.foot-name, .foot-links a, .foot-contact a { color: var(--zinc-600); }
.foot-tag, .foot-legal a { color: #63636b; }
.lb .ct { color: rgb(255 255 255 / .7); }
.lb button { color: rgb(255 255 255 / .7); }
.hero-ctl .arr { color: rgb(255 255 255 / .75); }

/* פוקוס מקלדת: מסגרת כהה ברורה; על תמונות כהות — לבנה */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hero :focus-visible, .cta-band :focus-visible, .al-cta :focus-visible, .lb :focus-visible, .st-hero :focus-visible,
.ph-head :focus-visible, .ab-hero :focus-visible, .al-hero :focus-visible, .st-next:focus-visible { outline-color: #fff; }
.st-next:focus-visible { outline-offset: -4px; }
.gal-item .fr:focus-visible { outline-offset: 2px; }
.form input:focus-visible, .form textarea:focus-visible, .dc-row input:focus-visible { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
main:focus { outline: none; }

/* דילוג לתוכן — מופיע רק כשמגיעים אליו במקלדת */
.skip { position: absolute; top: -100px; right: 16px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 18px; font-size: 15px; }
.skip:focus { top: 12px; }

/* תפריט סגור / שאלה סגורה / כיתוב שלא מוצג — לא נגישים במקלדת ולא מוקראים */
.mob-menu > div { visibility: visible; transition: visibility 0s; }
.mob-menu:not(.open) > div { visibility: hidden; transition: visibility 0s .3s; }
.faq .a { visibility: visible; }
.faq:not(.open) .a { visibility: hidden; transition: grid-template-rows .3s ease-in-out, opacity .3s ease-in-out, visibility 0s .3s; }
.hero-cap { transition: opacity 1.2s, color .2s, visibility 0s; }
.hero-cap:not(.on) { visibility: hidden; transition: opacity 1.2s, color .2s, visibility 0s 1.2s; }

/* הגלריה — כל תמונה היא כפתור */
button.fr { display: block; width: 100%; padding: 0; cursor: zoom-in; }
/* נקודות הסליידר: שטח לחיצה גדול יותר משני פיקסלים */
.hero-dots button { position: relative; }
.hero-dots button::after { content: ""; position: absolute; inset: -12px 0; }
.hero-pause .ico { width: 16px; height: 16px; }

/* צור קשר */
label.dc-q { display: block; }
.req-note { margin-top: 0; }
.form-err:empty, .dc-inline:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-slide, .hero-cap, .gal-item img, .mob-menu, .faq .a, .flip-main img { transition: none !important; }
  html { scroll-behavior: auto; }
}
.legal-date { margin-top: 32px; color: var(--muted); font-size: 14px; }
/* אנימציית הכניסה מהצד (x-in) לא תיצור גלילה לרוחב בטלפון צר */
main { overflow-x: clip; }

/* דף הבית — «היי, אני סוף»: כותרת מעל התמונה, הטקסט מתחת */
.me { padding: var(--sec) 20px; }
.me-in { max-width: 640px; margin: 0 auto; text-align: center; }
.me-head { margin-bottom: var(--head-gap); }
.me-pic { width: min(340px, 80vw); aspect-ratio: 4 / 5; max-width: 100%; margin: 0 auto; overflow: hidden; background: var(--zinc-200); }
.me-pic img { width: 100%; height: 100%; object-fit: cover; }
.me-line { width: 48px; height: 1px; background: var(--gold); margin: 32px auto 24px; }
.me-p { color: var(--muted); font-size: 16px; line-height: 1.75; font-weight: 300; max-width: 30em; margin: 0 auto 12px; }
.me-wink { color: var(--ink); margin-bottom: 28px; }
@media (min-width: 768px) { .me-pic { width: 380px; } .me-p { font-size: 17px; } }

/* ---------- אלבומים — «מבפנים»: הספר מהסקיצה של הזוגות ----------
   הכריכה נפתחת על השדרה, דף מתהפך בכל דפדוף, קיפול באמצע, וגב הכריכה בסוף.
   ברירת המחדל — פתיחה לועזית (הכריכה בחצי הימני, הבא מימין); .rtl = פתיחה עברית */
.bk { max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.bk-stage { position: relative; padding: 0 64px; touch-action: pan-y; }
.bk-book { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.bk-cap { min-height: 3.6em; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center; line-height: 1.4; margin: 0; }
.bk-cap .t { font-size: 18px; font-weight: 400; color: var(--ink); }
.bk-cap .s { font-size: 14px; color: var(--muted); }
.bk-cap .h { font-size: 14px; color: var(--gold-ink); margin-top: 2px; }
.bk-flat { margin: 0; text-align: center; font-size: 14px; color: var(--muted); }

.bk-page { position: relative; width: 100%; max-width: min(1050px, calc((100vh - 230px) * 1.97)); display: flex; background: #fff; border: 1px solid #d9d4cd; border-radius: 3px;
  overflow: hidden; box-shadow: 0 2px 10px rgb(63 52 44 / .12); perspective: 2400px; transition: transform .55s cubic-bezier(.4,.1,.2,1); }
.bk-page > img { display: block; width: 100%; height: auto; }
.bk-page.notrans { transition: none; }
.bk-fold { position: absolute; top: 0; bottom: 0; left: 50%; width: 6px; margin-left: -3px; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, rgb(0 0 0 / 0), rgb(0 0 0 / .12) 45%, rgb(0 0 0 / .18) 50%, rgb(0 0 0 / .12) 55%, rgb(0 0 0 / 0)); }

/* הכריכה — חצי, על השדרה */
.bk-cover { display: none; position: absolute; top: 0; bottom: 0; width: 50%; right: 0; z-index: 4; transform-style: preserve-3d;
  transform-origin: left center; transition: transform .9s cubic-bezier(.4,.1,.2,1); }
.bk-page.rtl .bk-cover { right: auto; left: 0; transform-origin: right center; }
.bk-cvf, .bk-cvb { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 2px; }
.bk-cvf { background-size: cover; background-position: center; box-shadow: 0 6px 24px rgb(40 30 20 / .35), inset 6px 0 10px -6px rgb(0 0 0 / .35); }
.bk-page.rtl .bk-cvf { box-shadow: 0 6px 24px rgb(40 30 20 / .35), inset -6px 0 10px -6px rgb(0 0 0 / .35); }
.bk-cvb { background: #f7f3ec; transform: rotateY(180deg); background-size: 200% 100%; background-repeat: no-repeat; background-position: 0 0; }
.bk-page.rtl .bk-cvb { background-position: 100% 0; }
.bk-page.closed { transform: translateX(-25%); }
.bk-page.rtl.closed { transform: translateX(25%); }
.bk-page.closed.opening { transform: none; }
.bk-page.closing { transition-delay: .85s; }
.bk-page.closed, .bk-page.opening, .bk-page.closing, .bk-page.ended { background: transparent; border-color: transparent; box-shadow: none; overflow: visible; }
.bk-page.closed .bk-cover, .bk-page.opening .bk-cover, .bk-page.closing .bk-cover { display: block; }
.bk-page.closed > img, .bk-page.ended > img { opacity: 0; }
.bk-page.closed .bk-fold, .bk-page.opening .bk-fold, .bk-page.closing .bk-fold, .bk-page.ended .bk-fold { display: none; }
.bk-page.opening > img, .bk-page.closed.closing > img { opacity: 1; clip-path: inset(0 0 0 50%); }
.bk-page.rtl.opening > img, .bk-page.rtl.closed.closing > img { clip-path: inset(0 50% 0 0); }
.bk-page.opening .bk-cover { transform: rotateY(-180deg); transition-delay: .5s; }
.bk-page.rtl.opening .bk-cover { transform: rotateY(180deg); }
.bk-page.closing .bk-cover { animation: bk-close .9s cubic-bezier(.4,.1,.2,1); }
.bk-page.rtl.closing .bk-cover { animation-name: bk-close-rtl; }
@keyframes bk-close { from { transform: rotateY(-180deg); } to { transform: rotateY(0); } }
@keyframes bk-close-rtl { from { transform: rotateY(180deg); } to { transform: rotateY(0); } }

/* גב הכריכה — אחרי העמוד האחרון הצד האחרון מתהפך, והאלבום נסגר */
.bk-back { display: none; position: absolute; top: 0; bottom: 0; width: 50%; left: 50%; z-index: 4; transform-style: preserve-3d;
  transform-origin: left center; transition: transform .9s cubic-bezier(.4,.1,.2,1); }
.bk-page.rtl .bk-back { left: 0; transform-origin: right center; }
.bk-bki, .bk-bko { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 2px; }
.bk-bki { background-size: 200% 100%; background-repeat: no-repeat; background-position: 100% 0; }
.bk-page.rtl .bk-bki { background-position: 0 0; }
.bk-bko { transform: rotateY(180deg); background-size: 100% 100%; background-repeat: no-repeat;
  box-shadow: 0 6px 24px rgb(40 30 20 / .35), inset -6px 0 10px -6px rgb(0 0 0 / .35); }
.bk-page.rtl .bk-bko { box-shadow: 0 6px 24px rgb(40 30 20 / .35), inset 6px 0 10px -6px rgb(0 0 0 / .35); }
.bk-page.ended { transform: translateX(25%); }
.bk-page.rtl.ended { transform: translateX(-25%); }
.bk-page.ended .bk-back { display: block; transform: rotateY(-180deg); }
.bk-page.rtl.ended .bk-back { transform: rotateY(180deg); }
.bk-page.ended.endclosing > img, .bk-page.ended.endopening > img { opacity: 1; clip-path: inset(0 50% 0 0); }
.bk-page.rtl.ended.endclosing > img, .bk-page.rtl.ended.endopening > img { clip-path: inset(0 0 0 50%); }
.bk-page.ended.endclosing { transition-delay: .85s; }
.bk-page.ended.endclosing .bk-back { animation: bk-end .9s cubic-bezier(.4,.1,.2,1); }
.bk-page.rtl.ended.endclosing .bk-back { animation-name: bk-end-rtl; }
@keyframes bk-end { from { transform: rotateY(0); } to { transform: rotateY(-180deg); } }
@keyframes bk-end-rtl { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }
.bk-page.ended.endopening { transform: none; }
.bk-page.ended.endopening .bk-back { transform: rotateY(0); transition-delay: .5s; }

/* הדף שמתהפך בדפדוף */
.bk-under { position: absolute; inset: 0; z-index: 3; }
.bk-half { position: absolute; top: 0; bottom: 0; width: 50%; background-size: 200% 100%; background-repeat: no-repeat; }
.bk-half.l { left: 0; background-position: 0 0; }
.bk-half.r { right: 0; background-position: 100% 0; }
.bk-leaf { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 5; transform-style: preserve-3d; transition: transform .85s cubic-bezier(.45,.05,.25,1); }
.bk-page.turning { overflow: visible; }
.bk-shade { position: absolute; top: 0; bottom: 0; width: 50%; pointer-events: none; transition: opacity .85s ease-in; }
.bk-shade.r { right: 0; background: linear-gradient(90deg, rgb(0 0 0 / .28), rgb(0 0 0 / 0) 70%); }
.bk-shade.l { left: 0; background: linear-gradient(270deg, rgb(0 0 0 / .28), rgb(0 0 0 / 0) 70%); }
.bk-shade.go { opacity: 0; }
.bk-leaf.r { right: 0; transform-origin: left center; }
.bk-leaf.l { left: 0; transform-origin: right center; }
.bk-leaf .bk-half { width: 100%; left: 0; right: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 0 18px rgb(0 0 0 / .18); }
.bk-leaf .back { transform: rotateY(180deg); }
.bk-leaf.r.go { transform: rotateY(-180deg); }
.bk-leaf.l.go { transform: rotateY(180deg); }

/* החצים — בצדדים במחשב, מתחת לאלבום בטלפון */
.bk-nav { display: contents; }
.bk-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gold);
  background: #fff; color: var(--gold-ink); display: flex; align-items: center; justify-content: center; z-index: 6; transition: background .2s, color .2s; }
.bk-arrow:hover:not(:disabled) { background: var(--gold); color: #fff; }
.bk-arrow:disabled { opacity: .35; cursor: default; }
.bk-arrow.next { right: 0; }
.bk-arrow.prev { left: 0; }
@media (max-width: 767px) {
  .bk-stage { padding: 0; }
  .bk-nav { display: flex; justify-content: center; gap: 28px; margin-top: 14px; }
  .bk-arrow { position: static; transform: none; }
  .bk-cap { min-height: 3.2em; }
  .bk-cap .t { font-size: 16px; }
  .bk-cap .s, .bk-cap .h, .bk-flat { font-size: 13px; }
}

/* צבע הכריכה */
.bk-colors { border: 0; margin: 22px 0 0; padding: 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 22px; }
.bk-colors legend { float: right; width: auto; font-size: 14px; color: var(--muted); padding: 0; margin-inline-end: 4px; }
.bk-color { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); cursor: pointer; position: relative; }
.bk-color input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bk-color .sw { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgb(0 0 0 / .15); box-shadow: 0 0 0 3px #fff, 0 0 0 4px transparent; }
.bk-color input:checked + .sw { box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--ink); }
.bk-color input:focus-visible + .sw { outline: 2px solid var(--ink); outline-offset: 5px; }
@media (prefers-reduced-motion: reduce) { .bk-page, .bk-cover, .bk-back, .bk-leaf, .bk-shade { transition: none !important; animation: none !important; } }

/* נגישות — תיקונים אחרי בדיקה חיצונית (OpenTab, 10.10.2026) */
/* תפריט פתוח במסך נמוך: הסרגל הקבוע נגלל בעצמו (F02) */
.nav.menu-open { max-height: 100vh; max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; }
/* מסגרות השדות — 3:1 מול הרקע, כדי שקל לזהות איפה ממלאים (R02) */
.form input, .form textarea, .dc-row input { border-color: #958F87; }