/* =====================================================
   צחי ברדוגו — Homepage
   Design: 1920px artboard / RTL
   ===================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Karantina';
  src: url('../fonts/Karantina-Light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Karantina';
  src: url('../fonts/Karantina-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Karantina';
  src: url('../fonts/Karantina-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Hebrew';
  src: url('../fonts/NotoSansHebrew.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}
/* Handwriting face used for the "משהו אישי" band. Recovered from the
   artboard PDF, which only embeds the glyphs that band uses — drop in the
   full Gveret Levin before changing that copy. */
@font-face {
  font-family: 'Gveret Levin';
  src: url('../fonts/GveretLevin-Regular.ttf?v=1') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* ---------- Variables ---------- */
:root {
  --navy: #153157;
  --periwinkle: #6B7FD7;
  --green: #82FF9E;
  --white: #FFFFFF;
  --font-display: 'Karantina', sans-serif;
  --font-body: 'Noto Sans Hebrew', sans-serif;
  --font-hand: 'Gveret Levin', 'Noto Sans Hebrew', sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  /* 1rem = 10px on the 1920px design; scales the whole layout proportionally below 1920 */
  font-size: min(calc(100vw / 192), 10px);
}
body {
  font-family: var(--font-body);
  color: var(--navy);
  background: var(--white);
  direction: rtl;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; border: none; }
blockquote { quotes: none; }

.container {
  width: 100%;
  max-width: 192rem;
  margin: 0 auto;
  padding-inline: 11.5rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 5.5rem;
  padding-inline: 4rem;
  border-radius: 1.4rem;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  transition: background-color .25s, color .25s;
}
.btn-green {
  border: 0.2rem solid var(--green);
  color: var(--white);
}
.btn-green:hover { background: var(--green); color: var(--navy); }
.btn-blue {
  border: 0.2rem solid var(--periwinkle);
  color: var(--navy);
}
.btn-blue:hover { background: var(--periwinkle); color: var(--white); }

/* ---------- Section titles ---------- */
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9.95rem;
  line-height: .9;
}
.section-title.green { color: var(--green); }
.section-title.blue { color: var(--periwinkle); }
.section-title.white { color: var(--white); }

/* =====================================================
   HEADER
   ===================================================== */
.site-header {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 100;
  padding-top: 2.7rem;
  padding-bottom: 1.2rem;
  transition: background-color .35s ease, box-shadow .35s ease, padding .35s ease;
}
/* sticky state: swapped in on scroll (see main.js) — compact navy bar
   with blur + shadow, replacing the transparent hero overlay look */
.site-header.is-sticky {
  position: fixed;
  background: rgba(21, 49, 86, 0.9);
  backdrop-filter: blur(1.2rem);
  -webkit-backdrop-filter: blur(1.2rem);
  box-shadow: 0 0.8rem 2.4rem rgba(8, 18, 33, 0.35);
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  animation: header-drop .4s ease;
}
.site-header.is-sticky .logo img { height: 3.8rem; }
.site-header.is-sticky .main-nav:not(.open) { height: 5.8rem; }
.site-header.is-sticky .main-nav:not(.open) a { padding-block: 0.3rem; }
@keyframes header-drop {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.logo img { height: 4.7rem; width: auto; transition: height .35s ease; }
.main-nav {
  background: var(--periwinkle);
  border-radius: 1.4rem;
  height: 7.2rem;
  display: flex;
  align-items: center;
  padding-inline: 1.4rem;
  transition: height .35s ease;
}
.main-nav ul {
  display: flex;
  align-items: center;
}
.main-nav a {
  display: inline-block;
  padding: 0.6rem 3.2rem;
  font-size: 2rem;
  color: var(--white);
  white-space: nowrap;
  transition: color .2s, padding-block .35s ease;
}
.main-nav a:hover { color: var(--green); }
.main-nav a.active {
  color: var(--green);
  font-weight: 700;
  position: relative;
}
.main-nav a.active::after {
  content: '';
  position: absolute;
  right: 3.2rem;
  left: 3.2rem;
  bottom: 0;
  height: 0.2rem;
  background: var(--green);
}
.nav-toggle { display: none; }

/* =====================================================
   HERO
   ===================================================== */
.hero {
  position: relative;
  min-height: 102.8rem;
  background: url('../images/hero-bg.png') center top / cover no-repeat;
  display: flex;
  align-items: flex-start;
}
/* fade the hero photo into the navy section below, so the next section
   doesn't read as a hard-edged separate block */
.hero::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 30rem;
  background: linear-gradient(to bottom, rgba(21, 49, 87, 0) 0%, rgba(21, 49, 87, .55) 55%, var(--navy) 100%);
  pointer-events: none;
}
.hero-content {
  padding-top: 21.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* RTL: right side */
  text-align: right;
}
.hero-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.6rem;
  line-height: .88;
  color: var(--green);
}
.hero-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 6.8rem;
  color: var(--white);
  margin-top: 2.8rem;
}
.hero .btn { margin-top: 3.8rem; min-width: 41rem; }

/* =====================================================
   ABOUT
   Design: band 827h; text column x115-1090; circle 810 at x1198/y97
   (overflows right + bottom); dot 112 at x1749/y98; photo 815 natural
   at x1093/y29; CTA 266x58 at x113/y642.
   ===================================================== */
.about { background: var(--navy); overflow: hidden; }
.about-inner {
  position: relative;
  display: flex;
  flex-direction: row-reverse; /* RTL: text left, portrait right */
  align-items: stretch;
  min-height: 82.7rem;
}
.about-text {
  flex: 1;
  max-width: 97.5rem;
  padding-top: 9.5rem;
  padding-bottom: 9rem;
  position: relative;
  z-index: 4;
}
.about-text .section-title { margin-bottom: 7rem; }
.about-text p {
  color: var(--white);
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 3.1rem;
}
.about-text p:last-of-type { margin-bottom: 0; }
.about-btn {
  display: flex;
  width: 26.6rem;
  margin-inline-start: auto; /* RTL: pushes the button to the far left, as in the design */
  margin-top: 8.6rem;
}
.about-visual { position: absolute; inset: 0; }
.about-circle {
  position: absolute;
  top: 9.7rem;
  right: -8.8rem; /* runs off the right edge, as in the design */
  width: 81rem;
  height: 81rem;
  border-radius: 50%;
  background: var(--periwinkle);
  z-index: 1;
}
.about-photo {
  position: absolute;
  bottom:-12px;
  right: 1.2rem;
  width: 81.5rem;
  max-width: none;
  z-index: 2;
}
.about-dot {
  position: absolute;
  top: 9.8rem;
  right: 5.9rem;
  width: 11.2rem;
  height: 11.2rem;
  border-radius: 50%;
  background: var(--green);
  z-index: 3;
}

/* =====================================================
   BOOK
   ===================================================== */
.book { background: var(--white); }
.book-inner {
  display: flex;
  align-items: flex-start;
  gap: 8rem;
  padding-top: 9.5rem;
  padding-bottom: 9.5rem;
  min-height: 71rem;
}
.book-text {
  flex: 1;
  max-width: 97.5rem;
  margin-inline-start: 0;
}
.book-text .section-title { margin-bottom: 4rem; }
.book-text p {
  font-size: 2.2rem;
  line-height: 1.55;
  margin-bottom: 2.8rem;
}
.book-btn { display: flex; width: 26rem; margin-top: 11.8rem; }
.book-inner { flex-direction: row-reverse; }
.book-visual {
  position: relative;
  width: 64rem;
  height: 52rem;
  flex-shrink: 0;
}
.book-circle {
  position: absolute;
  top: 20.8rem;
  left: 3rem;
  width: 61.1rem;
  height: 61.1rem;
  border-radius: 50%;
  background: var(--green);
}
.book-dot {
  position: absolute;
  top: 18.6rem;
  left: 4.3rem;
  width: 7.2rem;
  height: 7.2rem;
  border-radius: 50%;
  background: var(--periwinkle);
}
.book-img {
  position: absolute;
  top: -3.9rem;
  left: 11.9rem;
  width: 48.9rem;
}

/* =====================================================
   CELEB QUOTES
   ===================================================== */
.celebs { background: var(--white); padding-bottom: 11.5rem; }
.celebs-card {
  position: relative;
  background: var(--navy);
  border-radius: 2.4rem;
  min-height: 72rem;
  overflow: hidden;
  display: flex;
  flex-direction: row-reverse;
}
.celebs-content {
  width: 55%;
  position: relative;
  z-index: 2;
  padding: 11.5rem 9.5rem 6rem;
  display: flex;
  flex-direction: column;
}
.celebs-quote {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9.4rem;
  line-height: .92;
  color: var(--white);
  text-align: right;
  min-height: 25rem;
}
.celebs-tabs {
  display: flex;
  justify-content: center;
  gap: 5.4rem;
  margin-top: 11rem;
}
.celeb-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
}
.celeb-tab img {
  width: 9.9rem;
  height: 9.9rem;
  border-radius: 50%;
  opacity: .45;
  transition: opacity .25s;
}
.celeb-tab span {
  font-size: 1.8rem;
  color: #93A0B8;
  transition: color .25s;
}
.celeb-tab.active img, .celeb-tab:hover img { opacity: 1; }
.celeb-tab.active span { color: var(--green); font-weight: 700; }
.celebs-divider {
  position: absolute;
  top: 11.5rem;
  bottom: 11.5rem;
  left: 55%;
  width: 0.2rem;
  background: var(--green);
  z-index: 3;
}
.celebs-photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 48%;
  height: 100%;
  z-index: 1;
}
.celebs-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.celebs-photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* starts fully opaque navy — matching the solid content panel exactly so
     there's no brightness jump at the seam — then fades out gradually
     across most of the photo's width, reading as one continuous section
     instead of a text block sitting next to a separate photo */
  background: linear-gradient(to right, rgba(21, 49, 87, 1) 0%, rgba(21, 49, 87, .85) 12%, rgba(21, 49, 87, .5) 30%, rgba(21, 49, 87, .2) 48%, rgba(21, 49, 87, 0) 65%);
}

/* =====================================================
   STATS 3/30/300
   ===================================================== */
.stats { background: var(--navy); }
.stats-inner {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: 16rem;
  min-height: 79rem;
}
.stats-text p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9.8rem;
  line-height: 1;
  color: var(--white);
  text-align: right;
}
.stats-text .green-num { color: var(--green); }
.stats-visual { width: 56.5rem; flex-shrink: 0; margin-right: 7rem; }
.stats-visual img { width: 100%; }
.single-post .article-sec a{
	text-decoration:underline;
	color:#6B7FD7;
}
.cky-btn.cky-btn-reject{
	margin-right:0 !important;
	margin-left:10px !important;
}
/* =====================================================
   ACTIVITY CARDS
   ===================================================== */
.activities { padding-top: 11.5rem; padding-bottom: 12rem; background: var(--white); }
.activities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 1.8rem;
}
.activity-card {
  position: relative;
  border-radius: 1.6rem;
  overflow: hidden;
}
.activity-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.activity-card:hover img { transform: scale(1.03); }
.activity-card h3 {
  position: absolute;
  bottom: 4rem;
  right: 0;
  left: 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9.3rem;
  line-height: .9;
  color: var(--white);
}

/* =====================================================
   MEDIA QUOTES
   Design: band 651h; circle 400 at x115/y122; text ink top 176;
   dots 16px baseline y520; quote marks 90w.
   ===================================================== */
.media-quotes {
  background: var(--periwinkle);
  padding-top: 12.2rem;
  padding-bottom: 11.5rem;
}
.media-inner {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 12rem;
}
.media-logo-wrap {
  position: relative;
  width: 40rem;
  flex-shrink: 0;
}
.media-logo-circle {
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  background: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-logo-circle img {
  width: 28.7rem;
  height: auto;
  max-height: 16rem; /* keeps tall logos (e.g. כאן 11) inside the circle */
}
.qmark {
  position: absolute;
  width: 9.1rem;
  height: auto;
  z-index: 2;
}
.qmark-top { top: 1rem; right: .3rem; }
.qmark-bottom { top: 33.3rem; left: .9rem; transform: rotate(180deg); }
.media-quote {
  flex: 1;
  margin-top: 4.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 7rem;
  line-height: .9;
  color: var(--white);
  text-align: right;
}
.media-dots-wrap {
  display: flex;
  justify-content: flex-start; /* RTL start = right, matching the design */
  margin-top: -.2rem;
}
.media-dots {
  direction: ltr;
  display: flex;
  gap: 1.94rem;
}
.media-dots button {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--white);
  transition: background-color .25s;
}
.media-dots button.active { background: var(--green); }

/* =====================================================
   PODCAST
   ===================================================== */
.podcast { background: var(--white); padding-top: 8.5rem; padding-bottom: 11.5rem; }
.podcast-inner {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 12rem;
}
.podcast-visual {
  position: relative;
  width: 54.5rem;
  flex-shrink: 0;
  margin-top: 0.5rem;
}
.podcast-video {
  border-radius: 2rem;
  overflow: hidden;
  background: var(--navy);
  height: 56rem;
}
.podcast-video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.podcast-sticker {
  position: absolute;
  bottom: 11rem;
  right: -15rem;
  width: 24rem;
  z-index: 2;
}
.podcast-tape {
  position: absolute;
  top: 1rem;
  right: -4.1rem;
  width: 14rem;
  height: 4rem;
  background: var(--green);
  opacity: .85;
  transform: rotate(35deg);
  z-index: 2;
}
.podcast-text { flex: 1; text-align: right; }
.podcast-text .section-title { margin-bottom: 5rem; }
.podcast-text p {
  font-size: 2.2rem;
  line-height: 1.55;
  margin-bottom: 11rem;
}
.podcast-platforms {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 9.5rem;
  align-items: center;
}
.podcast-platforms img { width: auto; height: 6.9rem; }
.podcast-platforms a:first-child img { height: 5rem; }
.podcast-btn { display: flex; width: 40.5rem; margin-top: 8rem; }

/* =====================================================
   ADOPTION DATA
   ===================================================== */
.adoption-data { background: var(--white); padding-bottom: 11.5rem; }
.data-panel {
  background: var(--periwinkle);
  border-radius: 2.4rem;
  padding: 10rem 11.3rem 11.5rem;
}
.data-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9.8rem;
  color: var(--white);
  text-align: center;
  margin-bottom: 7.5rem;
}
.data-row {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.home h1.hero-title{
	margin-bottom:20px;
}
.data-row-2 { margin-top: 2rem; }
.data-card {
  width: 47.5rem;
  min-height: 34rem;
  background: var(--navy);
  border-radius: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3.5rem 3rem;
}
.data-card img { height: 11.9rem; width: auto; margin-bottom: 3rem; }
.data-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.8rem;
  line-height: 1;
  color: var(--green);
  margin-bottom: 1.2rem;
}
.data-desc {
  color: var(--white);
  font-size: 2.2rem;
  line-height: 1.4;
}

/* =====================================================
   FOOTER
   ===================================================== */
.footer { background: var(--navy); padding-top: 11rem; padding-bottom: 10.5rem; }
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
}
.footer-col ul li { margin-bottom: 2.1rem; }
.footer-col a { color: var(--white); font-size: 2rem; transition: color .2s; }
.footer-col a:hover { color: var(--green); }
.footer-contact { min-width: 26rem; }
.contact-row {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin-bottom: 2.6rem;
  font-weight: 700;
}
.contact-row svg {
  width: 3rem;
  height: 3rem;
  color: var(--green);
  flex-shrink: 0;
}
.contact-row span { font-size: 2.2rem; direction: ltr; }
.footer-social {
  display: flex;
  justify-content: flex-start;
  gap: 2.4rem;
  margin-top: 3.4rem;
}
.footer-social svg {
  width: 2.8rem;
  height: 2.8rem;
  color: var(--green);
}
.footer-social a:hover svg { color: var(--white); }
.footer-form { width: 55rem; flex-shrink: 0; }
.form-title {
  color: var(--green);
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 2.2rem;
  text-align: right;
}
.form-row {
  display: flex;
  gap: 2rem;
  margin-bottom: 2.2rem;
}
.footer-form input {
  width: 100%;
  height: 5.5rem;
  border: none;
  border-radius: 1.2rem;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 2rem;
  color: var(--navy);
  padding-inline: 2.2rem;
  text-align: right;
}
.footer-form input::placeholder { color: var(--navy); }
.form-row input:first-child { flex: 1.05; }
.form-row input:last-child { flex: 1; }
.form-message { margin-bottom: 2.2rem; }
.form-submit {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
}
.form-note {
  color: var(--white);
  font-size: 2rem;
  margin-top: 1.8rem;
  text-align: right;
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4rem;
}
.footer-logo img { height: 5.5rem; }
.copyright { color: var(--white); font-size: 2rem; }

/* =====================================================
   ABOUT PAGE
   Design: 1920px artboard, 9380 tall. Section bands (page y):
   hero 0-810 · psalm card 919-1356 · ההתחלה 1356-2088 ·
   השכלה 2088-2616 · בדק בית 2616-3224 · 2018 3224-4136 ·
   החיים אחרי 4136-4790 · stats 4790-5568 · הכתיבה 5568-6216 ·
   משהו אישי 6216-6832 · ציטוט 6944-7670 · פרקים 7788-8517.
   ===================================================== */

/* ---------- Inner page hero ---------- */
.page-hero {
  position: relative;
  height: 81rem;
  background: var(--navy) url('../images/about-hero.png') center top / cover no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.page-hero-content { padding-bottom: 6.4rem; }
.page-hero-title {
  font-size: 16.6rem;
  line-height: .88;
  text-align: right;
}

/* ---------- Shared section scaffolding ----------
   Photos and blobs sit on an absolutely positioned stage pinned to a
   centred 192rem box, so they keep the artboard coordinates at any
   width; the text column stays in normal flow above them. */
.abt-sec {
  position: relative;
  overflow: hidden;
  background: var(--white);
}
.abt-stage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 192rem;
  margin-inline: auto;
  pointer-events: none;
}
.abt-deco, .abt-photo { position: absolute; }
.abt-deco { border-radius: 50%; }

.abt-inner {
  position: relative;
  z-index: 2;
  padding-top: 10.2rem;
  padding-bottom: 9.5rem;
  text-align: right;
}
/* the text column is 978 wide inside the 1690 container */
.abt-inner > * { max-width: 97.8rem; }
/* …flush right by default, flush left on the flipped bands */
.abt-inner-end > * { margin-inline-start: auto; }

.abt-inner .section-title { margin-bottom: 6.4rem; }
.abt-inner p {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 3rem;
}
.abt-inner p:last-child { margin-bottom: 0; }
.abt-callout {
  font-weight: 700;
  text-align: center;
}

/* ---------- ההתחלה ---------- */
.abt-start { min-height: 73.2rem; }
.abt-start-photo {
  left: 11.3rem;
  top: 7.4rem;
  width: 55.2rem;
}

/* ---------- השכלה ---------- */
.abt-edu {
  background: var(--navy);
  min-height: 52.8rem;
}
.abt-edu .abt-inner p { color: var(--white); }
.abt-edu-circle {
  left: 161.2rem;
  top: 6rem;
  width: 38.2rem;
  height: 38.2rem;
  background: var(--white);
}
.abt-edu-dot {
  left: 133rem;
  top: 35.7rem;
  width: 9.5rem;
  height: 9.5rem;
  background: var(--periwinkle);
}
.abt-edu-cap {
  left: 121rem;
  top: 6.7rem;
  width: 65rem;
}

/* ---------- הקמת חברת "בדק בית" ---------- */
.abt-bdk { min-height: 60.8rem; }
.abt-bdk-circle {
  left: -3.1rem;
  top: 6.2rem;
  width: 49.3rem;
  height: 49.3rem;
  background: var(--green);
}
.abt-bdk-dot {
  left: 65.4rem;
  top: 27rem;
  width: 7.6rem;
  height: 7.6rem;
  background: var(--navy);
}
.abt-bdk-photo {
  left: 11.8rem;
  top: 6.2rem;
  width: 63.3rem;
}

/* ---------- יום ב', 17 בדצמבר 2018 ---------- */
.abt-2018 {
  background: var(--periwinkle);
  min-height: 91.2rem;
}
.abt-2018 .abt-inner p { color: var(--white); }
.abt-2018-circle {
  left: 139rem;
  top: 14rem;
  width: 62rem;
  height: 62rem;
  background: var(--white);
}
.abt-2018-dot {
  left: 179.3rem;
  top: 10rem;
  width: 5.9rem;
  height: 5.9rem;
  background: var(--green);
}
.abt-2018-photo {
  left: 125.8rem;
  top: 5.5rem;
  width: 59.3rem;
}

/* ---------- החיים אחרי פתיחת התיק ---------- */
.abt-after { min-height: 65.4rem; }
.abt-after-circle {
  left: -8.5rem;
  top: 8.6rem;
  width: 66rem;
  height: 66rem;
  background: var(--periwinkle);
}
.abt-after-dot {
  left: 63.2rem;
  top: 13rem;
  width: 10.5rem;
  height: 10.5rem;
  background: var(--green);
}
.abt-after-photo {
  left: 22rem;
  top: 9rem;
  width: 41.9rem;
}

/* ---------- עולם הכתיבה ---------- */
.abt-write { min-height: 64.8rem; }
.abt-write-circle {
  left: 13.7rem;
  top: 33.7rem;
  width: 61.3rem;
  height: 61.3rem;
  background: var(--green);
}
.abt-write-dot {
  left: 14.6rem;
  top: 27.2rem;
  width: 7.6rem;
  height: 7.6rem;
  background: var(--periwinkle);
}
.abt-write-book {
  left: 30rem;
  top: 8.8rem;
  width: 31.5rem;
  z-index: 2;
}

/* ---------- משהו אישי ---------- */
.abt-personal {
  background: var(--periwinkle);
  min-height: 61.6rem;
}
.abt-personal .abt-inner p {
  color: var(--white);
  font-family: var(--font-hand);
  font-size: 2.5rem;
  line-height: 1.4;
  margin-bottom: 3.5rem;
}
/* outranks the rule above, which would otherwise re-add the trailing
   margin and push the band past the photo */
.abt-personal .abt-inner p:last-child { margin-bottom: 0; }
.abt-personal-circle {
  left: 125.8rem;
  top: 11rem;
  width: 45.5rem;
  height: 45.5rem;
  background: var(--white);
}
.abt-personal-dot {
  left: 174.8rem;
  top: 14.8rem;
  width: 6rem;
  height: 6rem;
  background: var(--green);
}
/* pinned to the band's bottom edge so the arm always meets the white
   section below, whatever the copy does to the band height */
.abt-personal-photo {
  left: 118.8rem;
  bottom: 0;
  width: 67.2rem;
  z-index: 2;
}

/* =====================================================
   QUOTE CARDS (תהילים + ציטוט צחי)
   ===================================================== */
.abt-psalm { background: var(--white); padding-top: 10.9rem; }
.abt-quote { background: var(--white); padding-top: 11.2rem; }

.quote-card {
  position: relative;
  height: 43.7rem;
  border-radius: 2rem;
  overflow: hidden;
  background: var(--navy);
}
.quote-card-tall { height: 72.6rem; }

.quote-card-media {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 58%;
}
.quote-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* dissolve the photo into the navy panel, as in the design */
.quote-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(21, 49, 87, 0) 0%, rgba(21, 49, 87, .55) 38%, var(--navy) 82%);
}
.quote-card-rule {
  position: absolute;
  top: 11.5rem;
  bottom: 11.3rem;
  right: 75.7rem;
  width: 0.2rem;
  background: var(--green);
}
.quote-card-body {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 100.1rem;
}
.quote-card-tall .quote-card-body { right: 85.9rem; }

.quote-mark { position: absolute; width: 9rem; }
.quote-mark-top { top: 11rem; right: 0; }
.quote-mark-bottom { top: 27.8rem; left: 25.7rem; width: 10rem; }
.quote-card-tall .quote-mark-top { top: 10.6rem; width: 9.5rem; }
.quote-card-tall .quote-mark-bottom { top: 56.3rem; left: 14rem; }

.quote-card-text {
  position: absolute;
  right: 0;
  left: 0;
  top: 19.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5rem;
  line-height: 1;
  color: var(--white);
  text-align: right;
}
/* keeps the artboard's four-line break */
.quote-card-tall .quote-card-text { top: 25.5rem; left: 14.9rem; }
.quote-card-source {
  position: absolute;
  right: 0;
  left: 0;
  top: 28.4rem;
  font-family: var(--font-display);
  font-size: 3.6rem;
  line-height: 1;
  color: var(--white);
  text-align: right;
}
.quote-card-tall .quote-card-source { top: 57.8rem; }

/* =====================================================
   ערוץ האימוץ — episodes panel
   ===================================================== */
.abt-episodes {
  background: var(--white);
  padding-top: 11.8rem;
  padding-bottom: 11.5rem;
}
.episodes-panel {
  position: relative;
  background: var(--periwinkle);
  border-radius: 1.5rem;
  padding: 5rem;
  display: flex;
  flex-direction: row-reverse; /* RTL: playlist left, player right */
  gap: 5.4rem;
}
.episodes-side {
  width: 40.8rem;
  flex-shrink: 0;
}
.episodes-btn { display: flex; width: 100%; font-size: 2.5rem;}
.episodes-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #FFFFFF;
  text-align: right;
  margin-top: 11rem;
  margin-bottom: 2.8rem;
}
.episodes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 2rem;
}
.episode-thumb,
.episodes-player {
  background: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.episode-thumb {
  position: relative;
  height: 11.9rem;
  border-radius: 1.2rem;
  padding: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: box-shadow .2s, transform .2s;
}
/* thumbnail scrim — keeps the play icon readable against bright frames and
   the navy/cinematic tone consistent regardless of the YouTube thumbnail */
.episode-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(21, 49, 87, .45);
}
.episode-thumb .play-icon { position: relative; z-index: 1; }
.episode-thumb:hover { transform: translateY(-0.3rem); }
.episode-thumb.is-active { box-shadow: 0 0 0 0.3rem var(--green); }
.episodes-player {
  position: relative;
  flex: 1;
  height: 63rem;
  border-radius: 1.6rem;
  overflow: hidden;
}
.episodes-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--navy);
  background-size: cover;
  background-position: center;
}
/* the YouTube IFrame API replaces #episodeVideoWrap with its own <iframe>,
   which doesn't inherit the .episodes-video class — pin it to fill the
   player box regardless of whatever width/height the embed sets itself */
.episodes-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* the big button sits over the video and steps aside once it plays */
.episodes-poster {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.episodes-player.is-playing .episodes-poster { display: none; }
.episodes-sticker {
  position: absolute;
  top: 0.8rem;
  right: 1.8rem;
  width: 17.2rem;
  transform: rotate(-7deg);
}
/* solid white disc with an outlined navy triangle, as drawn on the artboard */
.play-icon {
  width: 3.6rem;
  height: 3.6rem;
  flex-shrink: 0;
}
.play-icon circle { fill: var(--white); }
.play-icon path {
  fill: none;
  stroke: var(--navy);
  /* the artboard keeps the stroke ~0.75px at both sizes, so it is scaled
     down on the large disc rather than left proportional */
  stroke-width: 0.9;
  stroke-linejoin: miter;
}
.play-icon-lg { width: 8rem; height: 8rem; }
.play-icon-lg path { stroke-width: 0.4; }

/* =====================================================
   IN THE MEDIA PAGE
   Design: 1920px artboard, 8076 tall. Bands (page y):
   hero 0-816 · הכתבות 816-4160 · סדרת Ynet 4160-5264 ·
   אסותא 5264-6368 · ציטוט 6368-7326.
   Every card art file is the whole 552x731 tile (photo on top,
   navy below), so the copy is laid over the artwork.
   ===================================================== */
.page-hero-media { background-image: url('../images/media-hero.png'); }

.media-articles { background: var(--white); padding-top: 8rem; padding-bottom: 10.5rem; }
.media-series { background: var(--periwinkle); padding-top: 8.4rem; padding-bottom: 11.1rem; }
.media-assuta { background: var(--green); padding-top: 8.4rem; padding-bottom: 11.1rem; }

.media-heading {
  text-align: right;
  margin-bottom: 8.7rem;
}
.media-heading-navy { color: var(--navy); }

.media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 2.4rem;
}
.media-grid-wide { grid-template-columns: repeat(2, 1fr); }

.media-card {
  position: relative;
  display: block;
  /* pinned to the artboard's tile ratio so every row is exactly 732 tall
     and the bands below keep their design offsets */
  aspect-ratio: 547 / 732;
  border-radius: 1.6rem;
  overflow: hidden;
  background: var(--navy);
  transition: transform .25s;
}
.media-grid-wide .media-card { aspect-ratio: 833 / 732; }
.media-card:hover { transform: translateY(-0.6rem); }
.media-card > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* the artboard sinks every tile into navy towards its foot — sampled off
   the PDF, the ramp is ~0 at the top and fully opaque by 90% */
.media-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(21, 49, 87, 0) 0%,
    rgba(21, 49, 87, .42) 21%,
    rgba(21, 49, 87, .75) 48%,
    rgba(21, 49, 87, .95) 77%,
    var(--navy) 90%);
  pointer-events: none;
}
.media-card-body, .media-badge { z-index: 2; }
/* the copy sits over the tile's navy foot, pinned to the bottom */
.media-card-body {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 4.6rem;
  /* keeps the artboard's ~420px measure inside the 547 tile, which is what
     drives the title line breaks */
  padding-inline: 6.4rem;
  text-align: center;
}
.media-card-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--white);
}
.media-card-source {
  display: block;
  font-size: 2.5rem;
  line-height: 1.36;
  color: var(--white);
  margin-top: 0.4rem;
}

.media-badge {
  position: absolute;
  top: 2.2rem;
  left: 2rem;
  height: 5.2rem;
  border-radius: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  padding-inline: 1.8rem;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}
.media-badge-views {
  /* icon then "1M+", left to right — RTL would flip both */
  direction: ltr;
  background: var(--green);
  color: var(--navy);
}
.media-badge-views img { width: 3.6rem; height: auto; }
.media-badge-note {
  right: 2rem;
  justify-content: center;
  background: var(--periwinkle);
  color: var(--white);
}

/* the closing quote reuses the about-page card at the artboard's height */
.media-quote-band { background: var(--white); padding-top: 11.4rem; padding-bottom: 11.2rem; }
.quote-card-wide { height: 73.2rem; }
.quote-card-wide .quote-card-body { right: 85.9rem; }
.quote-card-wide .quote-mark-top { top: 11.5rem; width: 9.5rem; }
.quote-card-wide .quote-mark-bottom { top: 55rem; left: 14rem; }
.quote-card-wide .quote-card-text {
  top: 30.6rem;
  left: 11rem; /* the artboard keeps this quote on a single line */
  font-size: 8rem;
}
.quote-card-wide .quote-card-source { top: 57.6rem; }

/* =====================================================
   BLOG PAGE
   Design: 1920px artboard, 9314 tall. Bands (page y):
   hero 0-816 · מאמרי דעה 816-4912 · בדק בית 4912-6768 ·
   ציטוט + פרקים 6768-8568.
   Reuses the .media-card tile system; one card spans two columns.
   ===================================================== */
.page-hero-blog { background-image: url('../images/blog-hero.png'); }

.blog-opinion { background: var(--white); padding-top: 8rem; padding-bottom: 11.4rem; }
.blog-bdk { background: var(--periwinkle); padding-top: 8.3rem; padding-bottom: 10.2rem; }

.blog-grid { gap: 1.8rem 2.4rem; }
.blog-grid-bdk { gap: 3rem 2.4rem; }

/* the 1123-wide artboard tile straddles two columns and takes a step up
   in title size with the extra room */
.media-card-wide {
  grid-column: span 2;
  aspect-ratio: 1118 / 732;
}
/* the only card title the artboard sets in green */
.media-card-wide .media-card-title { font-size: 5rem; color: var(--green); }
/* the artboard runs one tile's measure wider than the rest */
.media-card-loose .media-card-body { padding-inline: 4.4rem; }

.blog-quote-band { background: var(--white); padding-top: 11rem; }
.quote-card-blog { height: 73.2rem; }
.quote-card-blog .quote-card-body { right: 85.9rem; }
.quote-card-blog .quote-card-rule { top: 8.7rem; bottom: 11.5rem; }
.quote-card-blog .quote-mark-top { top: 8.7rem; width: 9.5rem; }
.quote-card-blog .quote-mark-bottom { top: 56.7rem; left: 14rem; }
.quote-card-blog .quote-card-text {
  top: 19.8rem;
  left: 14.9rem;
  font-size: 4.5rem;
  line-height: 1;
}
.quote-card-blog .quote-card-source { top: 57.8rem; }

.blog-episodes { padding-top: 11.2rem; padding-bottom: 10.9rem; }

/* =====================================================
   LECTURES PAGE
   Design: 1920px artboard, 12702 tall. Bands (page y):
   hero 0-816 · רקע 816-1760 · לוגואים 1760-2360 · סרטונים 2360-3200 ·
   7 הרצאות 3200-3448 · i 3448-4432 · ii 4432-5656 · iii 5656-6440 ·
   iv 6440-7512 · v 7512-8296 · vi 8296-9064 · vii 9064-10160 ·
   ציטוט · פרקים.
   ===================================================== */
.page-hero-lectures { background-image: url('../images/lectures-hero.png'); }

/* ---------- רקע ---------- */
.lec-intro {
  position: relative;
  overflow: hidden;
  background: var(--white);
  min-height: 94.4rem;
  padding-bottom: 12rem;
}
.lec-intro-stage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 192rem;
  margin-inline: auto;
  pointer-events: none;
}
.lec-intro-circle {
  left: 20.5rem;
  top: 19.4rem;
  width: 52.5rem;
  height: 52.5rem;
  background: var(--green);
}
.lec-intro-dot {
  left: 10.5rem;
  top: 15.9rem;
  width: 9rem;
  height: 9rem;
  background: var(--navy);
}
.lec-intro-photo {
  position: absolute;
  left: 18.5rem;
  top:-3.6rem;
  width: 54.3rem;
  z-index: 2;
}
.lec-intro-inner {
  position: relative;
  z-index: 3;
  padding-top: 8rem;
  text-align: right;
}
.lec-intro-inner > * { max-width: 97.6rem; }
.lec-intro-title { margin-bottom: 5.6rem; }
.lec-intro-inner p {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 3rem;
}
.lec-intro-lead { font-weight: 700; }

/* the periwinkle stat / section banners.
   The text (a mix of words and .green-num spans) is wrapped in a single
   .lec-banner-text child — flex centers that one box, so its contents
   still wrap as normal inline text. Making the <p> itself the flex
   container would turn every text run and span into its own anonymous
   flex item and break word wrapping/spacing between them. */
.lec-banner {
  position: relative; /* the artboard runs the intro photo's bottom edge
    behind this banner — without its own stacking position, a static
    element always paints under an absolutely-positioned sibling
    regardless of DOM order, so the photo showed through on top instead
    of being cleanly cropped by the banner. */
  z-index: 4;
  background: var(--periwinkle);
  border-radius: 1.6rem;
  height: 13rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 8rem;
  line-height: 1;
  color: var(--white);
  text-align: center;
  margin-top: 80px;
}
.lec-banner-text { display: block; }
/* .lec-banner .green-num { color: var(--green); } */

/* ---------- סטריפ לוגואים ---------- */
.lec-clients { background: var(--navy); min-height: 60rem; padding-top: 11rem; padding-bottom: 10rem; }
.clients-viewport {
  background: var(--white);
  border-radius: 2rem;
  height: 27rem;
  overflow: hidden;
  /* carousel mechanics run LTR — RTL flex overflow makes the paging
     offsets unreliable; the logos themselves are direction-neutral */
  direction: ltr;
}
.clients-track {
  display: flex;
  height: 100%;
  transition: transform .5s ease;
}
.clients-page {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding-inline: 4rem;
  gap: 2rem;
}
.clients-page img {
  max-width: 14rem;
  max-height: 9rem;
  width: auto;
  object-fit: contain;
}
.clients-dots {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 7rem;
}
.clients-dots button {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--white);
  padding: 0;
  transition: background-color .2s;
}
.clients-dots button.active { background: var(--green); }

/* ---------- סרטונים ---------- */
.lec-videos { background: var(--green); min-height: 84rem; padding-top: 9.2rem; padding-bottom: 11.6rem; }
.lec-videos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
}
.lec-video-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 8rem;
  line-height: 1;
  color: var(--navy);
  text-align: center;
  margin-bottom: 6.7rem;
}
/* plays inline on click instead of navigating to YouTube — .lec-video-play
   is the thumbnail/scrim/icon poster button; .lec-video-embed is where the
   YouTube IFrame API mounts its player once clicked (see main.js) */
.lec-video-box {
  position: relative;
  height: 46.8rem;
  border-radius: 1.6rem;
  overflow: hidden;
  background: var(--navy);
}
.lec-video-embed { width: 100%; height: 100%; }
.lec-video-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lec-video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background-color: var(--navy);
  background-size: cover;
  background-position: center;
}
/* thumbnail scrim — same treatment as the episodes panel, keeps the play
   icon readable and the navy tone consistent regardless of the YouTube frame */
.lec-video-play::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(21, 49, 87, .35);
}
.lec-video-play .play-icon { position: relative; z-index: 1; }
.lec-video-box.is-playing .lec-video-play { display: none; }

.lec-list-head { background: var(--white); min-height: 24.8rem; padding-top: 11.2rem; padding-bottom: 0; }

/* =====================================================
   LECTURE BANDS
   ===================================================== */
.lec {
  position: relative;
  overflow: hidden;
  padding-top: 8.3rem;
  padding-bottom: 10rem;
}
/* pinned to the artboard band heights so the art keeps its coordinates
   and the bands below don't drift */
.lec-n1 { min-height: 98.4rem; }
.lec-n2 { min-height: 122.4rem; }
.lec-n3 { min-height: 78.4rem; }
.lec-n4 { min-height: 107.2rem; }
.lec-n5 { min-height: 78.4rem; }
.lec-n6 { min-height: 76.8rem; }
.lec-n7 { min-height: 109.6rem; padding-bottom: 11rem; }
/* the artboard sizes each band to its own copy, so these two run tighter */
.lec-n3 .lec-cta { margin-top: 4.3rem; }
.lec-n7 .lec-cta { margin-top: 3.5rem; }
.lec-n7 .lec-body ol { margin-bottom: 1.5rem; margin-top: -22px; }
.lec-light { background: var(--white); }
.lec-peri { background: var(--periwinkle); }
.lec-navy { background: var(--navy); }

.lec-stage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 192rem;
  margin-inline: auto;
  pointer-events: none;
}
.lec-photo { position: absolute; }
.lec-deco { position: absolute; border-radius: 50%; }

.lec-inner {
  position: relative;
  z-index: 3;
  text-align: right;
}
/* every band's title/body/meta/links/cta live in one 97.7rem column, so
   narrower children (the CTA button, the 2x2 link grid) fall back to this
   column's own right edge instead of the full band width. Giving each of
   them their own margin would fight this and put buttons on the wrong
   side — that was the bug. */
.lec-col { max-width: 97.7rem; }
/* the artboard alternates which half carries the copy */
.lec-text-left .lec-col { margin-inline-start: auto; }

.lec-title {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9.95rem;
  line-height: .9;
}
.lec-num {
  flex-shrink: 0;
  width: 12.3rem;
  height: 12.3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10rem;
  line-height: 1;
}
.lec-sub {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 9.6rem;
  line-height: .9;
  margin-top: 1rem;
  padding-inline-start: 13.3rem; /* clears the numeral badge */
}
.lec-body { margin-top: 5.4rem; max-width: 96%;}
.lec-body p {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 3rem;
}
.lec-body p:last-child { margin-bottom: 0; }
.lec-strong { font-weight: 700; }
.lec-body ol {
  list-style: decimal;
  padding-inline-start: 2.6rem;
  margin-inline-end: 0;
  margin-bottom: 3rem;
}
.lec-body ol li {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 0.8rem;
}
.lec-body ol li::marker { font-weight: 700; font-family: var(--font-display);
    font-size: 4rem; }

.lec-meta {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 5rem;
}
.lec-meta img { width: 3.9rem; height: auto; flex-shrink: 0; }

.lec-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem 2rem;
  max-width: 83rem;
  margin-top: 5rem;
}
.lec-link {
  height: 5.5rem;
  border-radius: 1.2rem;
  font-size: 2.5rem;
  padding-inline: 2rem;
}
.lec-link-soon { cursor: default; }

.lec-cta {
  display: flex;
  width: 27.2rem;
  margin-top: 7rem;
  /* no side margin here — being narrower than .lec-col, it naturally
     falls back to .lec-col's own right edge (RTL block default), same
     as the title/body/meta above it. An own margin-inline-start:auto
     used to fight that and flip the button to the wrong side. */
}

/* ---------- per-background palette ---------- */
.lec-light .lec-title { color: var(--periwinkle); }
.lec-light .lec-sub { color: var(--periwinkle); }
.lec-light .lec-num { background: var(--periwinkle); color: var(--white); }
.lec-light .lec-body, .lec-light .lec-meta, .lec-light .lec-body ol { color: var(--navy); }
.lec-light .lec-cta { border: 0.2rem solid var(--periwinkle); color: var(--navy); }
.lec-light .lec-cta:hover { background: var(--periwinkle); color: var(--white); }
.lec-light .lec-body ol li::marker { color: var(--periwinkle); }

.lec-peri .lec-title, .lec-peri .lec-sub { color: var(--green); }
.lec-peri .lec-num { background: var(--green); color: var(--periwinkle); }
.lec-peri .lec-body, .lec-peri .lec-meta, .lec-peri .lec-body ol { color: var(--white); }
.lec-peri .lec-cta, .lec-peri .lec-link { border: 0.2rem solid var(--green); color: var(--white); }
.lec-peri .lec-cta:hover, .lec-peri .lec-link:hover { background: var(--green); color: var(--navy); }
.lec-peri .lec-link-soon:hover { background: none; color: var(--white); }

.lec-navy .lec-title, .lec-navy .lec-sub { color: var(--green); }
.lec-navy .lec-num { background: var(--green); color: var(--navy); }
.lec-navy .lec-body, .lec-navy .lec-meta, .lec-navy .lec-body ol { color: var(--white); }
.lec-navy .lec-cta { border: 0.2rem solid var(--green); color: var(--white); }
.lec-navy .lec-cta:hover { background: var(--green); color: var(--navy); }

/* ---------- per-lecture art ----------
   Positions pulled from the PDF's own vector/image placement rects
   (not eyeballed), band-relative. Photos whose artboard top is negative
   (they bleed slightly above their band) are clamped to 0 — the band's
   overflow:hidden would just clip that sliver anyway. */
.lec1-circle { left: -8.2rem; top: 40.6rem; width: 79.6rem; height: 79.6rem; background: var(--navy); }
.lec1-dot    { left: 10.2rem; top: 23.7rem; width: 10.8rem; height: 10.8rem; background: var(--periwinkle); }
.lec1-photo  { left: 6.9rem; top: 0; width: 61.6rem; z-index: 2; }
.lec-award {
  position: absolute;
  left: 59.1rem;
  top: 60.1rem;
  width: 31.3rem;
  height: 31.3rem;
  border-radius: 50%;
  background: var(--green);
  color: var(--navy);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem;
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  z-index: 3;
}
.lec-award img { width: 6.2rem; height: auto; }

.lec2-photo { left: 125.5rem; top: 11.4rem; width: 55.2rem; }
.lec3-circle { left: 9.5rem; top: 15.5rem; width: 47.3rem; height: 47.3rem; background: var(--green); }
.lec3-dot    { left: 59.8rem; top: 54rem; width: 8.7rem; height: 8.7rem; background: var(--periwinkle); }
.lec3-photo  { left: 25.5rem; top: 0; width: 26.6rem; z-index: 2; }
.lec4-circle { left: 126.7rem; top: 13.7rem; width: 79.6rem; height: 79.6rem; background: var(--white); }
.lec4-dot    { left: 126.7rem; top: 86.2rem; width: 10.8rem; height: 10.8rem; background: var(--green); }
.lec4-photo  { left: 114.4rem; top: 17.9rem; width: 78.6rem; z-index: 2; }
.lec5-circle { left: 12.5rem; top: 16.4rem; width: 52.8rem; height: 52.8rem; background: var(--navy); }
.lec5-dot    { left: 71.3rem; top: 57.1rem; width: 7.9rem; height: 7.9rem; background: var(--periwinkle); }
.lec5-photo  { left: 15.7rem; top: 0; width: 46.4rem; z-index: 2; }
.lec6-photo  { left: 125.5rem; top: 11.5rem; width: 55.2rem; border-radius: 2rem; }
.lec7-circle { left: -4.4rem; top: 25.8rem; width: 79.6rem; height: 79.6rem; background: var(--green); }
.lec7-dot    { left: 63rem; top: 17.5rem; width: 10.8rem; height: 10.8rem; background: var(--navy); }
.lec7-photo  { left: 19.8rem; top: 46.3rem; width: 74.5rem; z-index: 2; }

/* ---------- closing quote + episodes ---------- */
.lec-quote-band { background: var(--white); padding-top: 0rem; }
.quote-card-lectures { height: 72.8rem; }
.quote-card-lectures .quote-card-body { right: 85.9rem; }
.quote-card-lectures .quote-card-rule { top: 11.5rem; bottom: 11.5rem; }
.quote-card-lectures .quote-mark-top { top: 10.6rem; width: 9.5rem; }
.quote-card-lectures .quote-mark-bottom { top: 56.3rem; left: 14rem; }
.quote-card-lectures .quote-card-text {
  top: 25.7rem;
  left: 11rem;
  font-size: 5rem;
}
.quote-card-lectures .quote-card-source { top: 52rem; }
.lec-episodes { padding-top: 11.2rem; padding-bottom: 11.2rem; }

/* =====================================================
   MENTOR PAGE
   Design: 1920px artboard, 12175.9 tall. Band totals (all pinned via
   min-height, summing to the exact artboard height):
   hero 81.6 · quote1-band 63.11 · about 57.66 · process-peri 54.92 ·
   quote2-band 93.12 · media 186.8 · service-peri 86.74 ·
   quote3-band 96.66 · openadopt 54.89 · dna-navy 69.3 ·
   advantages 133.2 · testimonial 69.2 · episodes 95.61.
   ===================================================== */
.page-hero-mentor { background-image: url('../images/mentor-hero.png'); }
.mentor-hero-title { font-size: 16.5rem; max-width: 145rem; }
.mentor-quote-band .quote-card-source{
  font-weight: 100;
  font-size: 4.6rem;
}
.mentor-quote-band .quote-mark-bottom{
  transform: rotate(180deg);
}

/* ---------- quote bands (default-height + tall variant) ---------- */
.mentor-quote-band { background: var(--white); padding-top: 10.5rem; }
.quote-card-mentor { height: 73.1rem; }
.quote-card-mentor .quote-card-body { right: 85.9rem; }
.quote-card-mentor .quote-mark-top { top: 10.6rem; width: 9.5rem; }
.quote-card-mentor .quote-mark-bottom { top: 56.3rem; left: 14.3rem; }
.quote-card-mentor .quote-card-source { top: 57.7rem; font-weight: 100; font-size: 4.7rem;}
.quote-card-text-3l { top: 28.9rem; }
.quote-card-text-2l { top: 31.3rem; }

/* ---------- shared two-column section scaffolding ----------
   Same safe pattern used on lectures.html: every band's title/body/
   link live in ONE .mentor-col wrapper (max-width 97.7rem) instead of
   being separate direct children — narrower children (the link pill)
   would otherwise fall back to the full band width instead of the
   column's own edge. */
.mentor-sec {
  position: relative;
  overflow: hidden;
  background: var(--white);
  padding-top: 9rem;
  padding-bottom: 10rem;
}
.mentor-peri { background: var(--periwinkle); }
.mentor-navy { background: var(--navy); }
/* n2 and n8's titles sit almost flush with their section's top (the
   preceding quote-band was sized to end right at the title) — the
   generic 9rem default overshoots for these two specifically */
.mentor-n2, .mentor-n8 { padding-top: 0.5rem; }

.mentor-stage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 192rem;
  margin-inline: auto;
  pointer-events: none;
}
.mentor-deco { position: absolute; border-radius: 50%; }

.mentor-inner { position: relative; z-index: 2; text-align: right; }
.mentor-col { max-width: 97.7rem; }
.mentor-text-left .mentor-col { margin-inline-start: auto; }

.mentor-inner .section-title { margin-bottom: 6rem; }
.mentor-body p {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 3rem;
}
.mentor-body p:last-child { margin-bottom: 0; }

.mentor-light .mentor-body p, .mentor-sec:not(.mentor-peri):not(.mentor-navy) .mentor-body p { color: var(--navy); }
.mentor-peri .mentor-body p { color: var(--white); }
.mentor-navy .mentor-body p { color: var(--white); }

/* the bordered pill link ("לטור של צחי ב-Ynet...") — full column width,
   text centred, sits below the body copy */
.mentor-link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 5.7rem;
  margin-top: 5rem;
  border: 0.2rem solid var(--green);
  border-radius: 1.2rem;
  padding: 1.5rem 3rem;
  font-size: 2.3rem;
  font-weight: 700;
  text-align: center;
  transition: background-color .25s, color .25s;
}
.mentor-sec:not(.mentor-peri):not(.mentor-navy) .mentor-link { color: var(--navy); }
.mentor-peri .mentor-link, .mentor-navy .mentor-link { color: var(--white); }
.mentor-link:hover { background: var(--green); color: var(--navy); }

/* ---------- מהו מנטור לאימוץ ---------- */
.mentor-note-circle { left: -7.7rem; top: 0; width: 52rem; height: 52rem; background: var(--periwinkle); }
.mentor-note-dot { left: 68.3rem; top: 0; width: 10.8rem; height: 10.8rem; background: var(--green); }
.mentor-note {
  position: absolute;
  left: 10.1rem;
  top: 1.1rem;
  width: 69.8rem;
  filter: drop-shadow(0 1.2rem 2.4rem rgba(0, 0, 0, .35));
  transform: rotate(-6deg);
}
.mentor-note img:first-child { width: 100%; display: block; }

/* ---------- תהליך צמוד עם צחי (dark sticky-note card) ---------- */
.mentor-text-left .mentor-stage .mentor-note {
  position: absolute;
  left: auto;
  right: 12.5rem;
  top: 9.9rem;
  width: 54rem;
  background: var(--navy);
  border-radius: 1.4rem;
  padding: 5.5rem 5rem 4rem;
  transform: rotate(2deg);
  filter: drop-shadow(0 1.2rem 2.4rem rgba(0, 0, 0, .35));
}
.mentor-note-dark p {
  color: var(--white);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
  font-family: var(--font-display);
}
.mentor-note-tape-piece {
  position: absolute;
  top: -1.8rem;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 12.6rem;
  height: 3.9rem;
  background: var(--green);
  opacity: .9;
  border-radius: .2rem;
}

/* ---------- ארבעה סיפורים מיוחדים (media grid, reuses .media-card) ---------- */
.mentor-media { background: var(--white); padding-top: 9.8rem; padding-bottom: 11rem; }
.mentor-media .media-heading { margin-bottom: 6.7rem; color: #153157;}
.mentor-wide-card {
  position: relative;
  display: block;
  border-radius: 1.6rem;
  overflow: hidden;
  background: var(--navy);
  margin-bottom: 2rem;
}
.mentor-wide-card img { width: 100%; height: 73.1rem; object-fit: cover; display: block; }
.mentor-wide-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(21, 49, 87, 0) 0%, rgba(21, 49, 87, .5) 55%, var(--navy) 88%);
}
.mentor-wide-card-body {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 4.4rem;
  z-index: 2;
  text-align: center;
  padding-inline: 6rem;
}
.mentor-wide-card-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5.5rem;
  line-height: 1;
  color: var(--white);
  margin-bottom: 3.2rem;
}
.mentor-wide-card-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
.mentor-wide-link {
  height: 5.5rem;
  border-radius: 1.2rem;
  font-size: 2.2rem;
  padding-inline: 3rem;
  border: 0.2rem solid var(--green);
  color: var(--white);
}
.mentor-wide-link:hover { background: var(--green); color: var(--navy); }
.mentor-media-grid { margin-top: 0; }
.mentor-media-grid .media-card-body { bottom: 5rem; }
.mentor-media-grid .media-card-title { font-size: 5.3rem; }
.mentor-media-grid .media-card-source {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 5.6rem;
  margin-top: 4.3rem;
  padding-inline: 3rem;
  border: 0.2rem solid var(--green);
  border-radius: 1.2rem;
  font-size: 2.5rem;
  transition: background .2s, color .2s;
}
.mentor-media-grid .media-card:hover .media-card-source { background: var(--green); color: var(--navy); }
.mentor-quote-band.mentor-n4 .quote-card-body{
    max-width: 69rem;
}
@media screen and (min-width: 768px) {
.mentor-quote-band.mentor-n4 .quote-card-media img{
      position: absolute;
    object-fit: contain;
    right: -53px;
}}

/* ---------- השירות למען הילד ---------- */
.mentor-welfare-circle { left: 11.2rem; top: 9rem; width: 40.9rem; height: 40.9rem; background: var(--white); }
.mentor-welfare-dot { left: 39.9rem; top: 38.1rem; width: 26.5rem; height: 26.5rem; background: var(--green); }
.mentor-welfare-logo {
  position: absolute;
  left: 14.2rem;
  top: 22.7rem;
  width: 35rem;
  z-index: 2;
}
/* the artboard keeps this heading and its link on a single line each,
   both wider than the 97.7rem text column the body copy sits in */
.mentor-n6 .mentor-inner .section-title { max-width: none; white-space: nowrap; }
.mentor-n6 .mentor-link { width: max-content; max-width: none; white-space: nowrap; }

/* ---------- קצת על אימוץ פתוח ---------- */
.mentor-open-circle { left: 27.8rem; top: 0; width: 36rem; height: 36rem; background: var(--periwinkle); }
.mentor-open-dot { left: 15.2rem; top: 33.4rem; width: 12.5rem; height: 12.5rem; background: var(--green); }

/* ---------- בדיקות גנטיות DNA ---------- */
.mentor-dna-photo {
  position: absolute;
  left: 106.2rem;
  top: 0;
  /* the artboard only ever shows the on-page slice of this photo
     (106.2rem to the 192rem right edge) — the old asset was stretched
     to the full off-page placement width, blowing up its height and
     zooming in on the helix instead of matching the design's crop */
  width: 85.8rem;
  max-width: none;
}
/* the artboard hugs this link to its own text instead of the full
   97.7rem column, unlike the other mentor-link instances */
.mentor-n9 .mentor-link { width: max-content; max-width: 100%; }

/* =====================================================
   MENTOR — 5 advantages (white outer, periwinkle inset panel)
   ===================================================== */
.mentor-advantages { background: var(--white); padding-top: 11.3rem; padding-bottom: 11.3rem; }
.advantages-panel {
  background: var(--periwinkle);
  border-radius: 2.4rem;
  padding: 8.9rem 6rem 11.3rem;
}
.advantages-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10rem;
  line-height: 1;
  color: var(--white);
  text-align: center;
  margin-bottom: 7.1rem;
}
.advantages-row { display: flex; justify-content: center; gap: 2rem; }
.advantages-row-3 { margin-bottom: 2rem; }
.advantage-card {
  width: 47.5rem;
  min-height: 34.1rem;
  background: var(--navy);
  border-radius: 1.6rem;
  padding: 3.5rem 3rem;
  text-align: center;
}
/* icons keep their own aspect ratio at a shared height, per the artboard,
   rather than a fixed width — the five glyphs are different widths */
.advantage-card img { width: auto; height: 11.8rem; margin: 0 auto 3.8rem; }
.advantage-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5rem;
  line-height: 1;
  color: var(--green);
}
.advantage-card p {
  font-size: 2.5rem;
  line-height: 1.35;
  color: var(--white);
}

/* =====================================================
   MENTOR — testimonial carousel (full-bleed photo, RTL-safe like the
   lectures logo carousel: swap the photo/name/caption, no translateX)
   ===================================================== */
.mentor-testimonial {
  position: relative;
  min-height: 69.2rem;
  background: var(--navy);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 11.4rem;
}
.mentor-testimonial-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.mentor-testimonial-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.mentor-testimonial-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top right;
}
.mentor-testimonial-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  /* the artboard fades to solid navy much sooner (by ~41% of the width)
     than the old stops did (85%), leaving the photo bleeding too far
     into the text panel instead of giving it clean navy backing */
  background: linear-gradient(to left, rgba(21, 49, 87, 0) 15%, rgba(21, 49, 87, .7) 30%, var(--navy) 41%);
}
.mentor-testimonial-text { max-width: 97.7rem; margin-bottom: 21.9rem; }
.mentor-testimonial-text h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 8rem;
  line-height: 1;
  color: var(--green);
  margin-bottom: 0.3rem;
}
.mentor-testimonial-text p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 8rem;
  line-height: 1;
  color: var(--white);
}
.mentor-testimonial-dots {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 1.8rem;
}
.mentor-testimonial-dots button {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--white);
  padding: 0;
  transition: background-color .2s;
}
.mentor-testimonial-dots button.active { background: var(--green); }

.mentor-episodes { padding-top: 11.3rem; padding-bottom: 11.3rem; }

/* band totals, pinned so they sum to the exact 12175.9pt artboard
   height — same approach as lectures.html's .lec-n1..n7 */
.mentor-n1 { min-height: 63.1rem; }
.mentor-n2 { min-height: 57.7rem; }
.mentor-n3 { min-height: 54.9rem; }
.mentor-n4 { min-height: 93.1rem; }
.mentor-n5 { min-height: 186.8rem; }
.mentor-n6 { min-height: 86.7rem; }
.mentor-n7 { min-height: 96.7rem; }
.mentor-n8 { min-height: 54.9rem; }
.mentor-n9 { min-height: 69.3rem; }
.mentor-n10 { min-height: 133.2rem; }
.mentor-n11 { min-height: 69.2rem; }
.mentor-n12 { min-height: 95.6rem; }

/* =====================================================
   BOOKS PAGE
   Design: 1920px artboard, 6227.2 tall. Bands (page y):
   hero 0-809 · quote 809-1652 · ילדותי השלישית 1652-2624.6 ·
   ילד למכירה 2624.6-3673 · גלריה 3673-4630.8 · פרקים 4630.8-5477.6.
   Reuses the quote-card-mentor / media-grid / episodes-panel
   components verbatim; only the book-specific scaffolding is new.
   ===================================================== */
.page-hero-books { background-image: url('../images/books-hero.png'); }

.books-quote-band { background: var(--white); padding-top: 11.2rem; }
.books-quote-band .quote-mark-bottom { transform: rotate(180deg); }
/* the artboard keeps this 7-line quote higher in the card than the
   shorter 2l/3l variants used elsewhere */
.quote-card-text-7l { top: 18.9rem; }

/* ---------- shared book-section scaffolding ----------
   Namespaced "bks-" (not "book-") because .book/.book-inner already
   belong to the unrelated homepage book-teaser component. */
.bks-sec { position: relative; overflow: hidden; padding-top: 9rem; padding-bottom: 11.3rem; background: var(--white); }
.bks-peri { background: var(--periwinkle); }
.bks-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 192rem;
  margin-inline: auto;
  pointer-events: none;
}
.bks-deco { position: absolute; border-radius: 50%; }
.bks-cover { position: absolute; z-index: 2; }
.bks-inner { position: relative; z-index: 3; text-align: right; }
.bks-col { max-width: 97.7rem; }
.bks-text-left .bks-col { margin-inline-start: auto; }
.bks-inner .section-title { margin-bottom: 6.5rem; }
.bks-body p {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 3rem;
  color: var(--navy);
}
.bks-body p:last-child { margin-bottom: 0; }
.bks-peri .bks-body p { color: var(--white); }

/* flex-end packs to the main-axis end, which in this RTL row is the
   LEFT edge — flex-start is what actually hugs the column's right
   edge the way the artboard does */
.bks-facts { display: flex; justify-content: flex-start; gap: 14.6rem; margin-top: 7.8rem; }
.bks-fact { text-align: right; }
.bks-fact img { height: 4rem; margin-bottom:1.2rem; }
.bks-fact p { font-size: 2.5rem; line-height: 1.2; color: var(--navy); }
.bks-peri .bks-fact p { color: var(--white); }

.bks-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 27.2rem;
  height: 5.7rem;
  margin-top: 7.8rem;
  border: 0.2rem solid var(--periwinkle);
  border-radius: 1.2rem;
  padding-inline: 3rem;
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--navy);
  transition: background-color .25s, color .25s;
}
.bks-cta:hover { background: var(--periwinkle); color: var(--white); }
.bks-peri .bks-cta { border-color: var(--green); color: var(--white); }
.bks-peri .bks-cta:hover { background: var(--green); color: var(--navy); }
/* "ילד למכירה"'s CTA text is long enough that the artboard just hugs
   the button to its own content instead of the fixed 27.2rem width */
.bks-cta-wide { width: max-content; }

/* "ילד למכירה" keeps its CTA and genre fact on one row (bottom-aligned),
   unlike "ילדותי השלישית" which stacks the facts row above its CTA */
.bks-bottom-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 7.8rem; }
.bks-bottom-row .bks-cta,
.bks-bottom-row .bks-facts { margin-top: 0; }

/* ---------- ילדותי השלישית ---------- */
.bks1-circle { left: -5.2rem; top: 38.1rem; width: 79.6rem; height: 79.6rem; background: var(--green); }
.bks1-dot    { left: 9.3rem; top: 23.9rem; width: 10.8rem; height: 10.8rem; background: var(--periwinkle); }
.bks1-cover  { left: 14.5rem; top: 10.5rem; width: 61.5rem; }

/* ---------- ילד למכירה ---------- */
.bks2-navy-dot { left: 139.9rem; top: 11.8rem; width: 9.6rem; height: 9.6rem; background: var(--navy); }
.bks2-circle   { left: 138.4rem; top: 21.4rem; width: 62.1rem; height: 62.1rem; background: var(--white); }
.bks2-dot      { left: 125.2rem; top: 45.3rem; width: 7.1rem; height: 7.1rem; background: var(--green); }
.bks2-cover    { left: 128.7rem; top: 17.7rem; width: 49.6rem; }

.bks-n1 { min-height: 97.3rem; }
.bks-n2 { min-height: 104.8rem; }

/* ---------- גלריה ---------- */
.books-gallery { background: var(--white); padding-top: 11.3rem; }
/* plain photos in this row — the artboard has no title/source overlay,
   so the shared .media-card::after legibility gradient is switched off */
.books-gallery-grid .media-card::after { content: none; }

/* ---------- פרקים נוספים ---------- */
.books-episodes { padding-top: 11.3rem; padding-bottom: 11.3rem; }

/* =====================================================
   GHOST WRITER PAGE
   Design: 1920px artboard, 8889.2 tall. Bands (page y):
   hero 0-809 · continuous navy body 809-8148 (torn-paper photo,
   chameleon photo, 2 border quote cards, 4-things panel, writer
   card, how-it-works grid) · footer 8148-8889.2.
   Reuses quote-card-mentor's mark/rule/body/source offsets with a
   new "ghost" skin (border instead of fill, periwinkle marks).
   ===================================================== */
.page-hero-gw { background-image: url('../images/gw-hero.png'); }
.gw-body { background: var(--navy); }

/* ---------- shared band scaffolding ---------- */
.gw-sec { position: relative; overflow: hidden; padding-top: 9rem;}
/* .gw-sec's height otherwise comes only from its in-flow text column — if the
   text is shorter than the absolutely-positioned decorative photo, the
   section's own overflow:hidden clips the photo's bottom (border included).
   Force enough height to always contain each photo fully. */
.gw-sec:has(.gw-photo-a) { min-height: 55rem; }
.gw-sec:has(.gw-photo-b) { min-height: 48.5rem; }
.gw-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: 192rem;
  margin-inline: auto;
  pointer-events: none;
}
.gw-deco { position: absolute; }
.gw-inner { position: relative; z-index: 2; text-align: right; }
.gw-col { max-width: 97.7rem; }
.gw-text-left .gw-col { margin-inline-start: auto; }
.gw-inner .section-title { margin-bottom: 6.5rem; }
.gw-body-text p {
  font-size: 2.5rem;
  line-height: 1.2;
  margin-bottom: 3rem;
  color: var(--white);
}
.gw-body-text p:last-child { margin-bottom: 0; }

.gw-sec-wide .gw-wide-col { max-width: 169.4rem; margin-inline: auto; }

/* ---------- יש לך סיפור חיים שמחכה להיכתב ----------
   The border lives on the frame; the mask (navy fade at the foot of
   the photo) lives on the img inside it, so the border itself never
   gets clipped by the mask. */
.gw-photo-frame {
  display: block;
  overflow: hidden;
  border-radius: 1.6rem;
  border: 0.2rem solid var(--periwinkle);
}
.gw-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gw-photo-a {
  left: 11.4rem;
  top: 11.3rem;
  width: 55.1rem;
  height: 42.1rem;
}
.gw-photo-a img {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 15%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 15%, transparent 88%);
}
.gw-tape-a { left: 56.7rem; top: 8.8rem; width: 12rem; height: 9.6rem; }

/* ---------- סופר הצללים הוא זיקית ---------- */
.gw-photo-b {
  left: 125.6rem;
  top: 11.3rem;
  width: 55.1rem;
  height: 35.7rem;
}
.gw-photo-b img {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 85%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 85%);
}
.gw-tape-b { left: 172.9rem; top: 38.1rem; width: 10.6rem; height: 11.3rem; }

/* ---------- ציטוטים (border cards on the navy body) ---------- */
.gw-quote-band { padding-top: 11.3rem; padding-bottom: 11.3rem; border-bottom: 0.2rem solid var(--periwinkle);}
.gw-sec.gw-text-right.gw-sec-wide .section-title.blue{
    text-align: center;
    margin-bottom: 7rem;
}
.gw-quote-band .quote-card-body .quote-card-text{
  width: 80%;
}
.quote-card-ghost { background: transparent; border: 0.2rem solid var(--periwinkle); }
.quote-card-ghost .quote-card-rule { background: var(--periwinkle); }
.quote-card-ghost .quote-mark-bottom { transform: rotate(180deg); }
.gw-book-cover {
  position: absolute;
  left: 105.5rem;
  top: 10.1rem;
  width: 52.6rem;
  height: 52.7rem;
  object-fit: cover;
  border-radius: 1.2rem;
  z-index: 2;
}

/* ---------- 4 דברים שמבדלים אותי ---------- */
.gw-differ-panel {
  position: relative;
  border: 0.2rem solid var(--periwinkle);
  border-radius: 2.4rem;
  padding: 8.9rem 11.3rem 9.3rem;
}
.gw-differ-title { text-align: center; margin-bottom: 6rem; }
.gw-differ-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.gw-differ-card {
  background: var(--periwinkle);
  border-radius: 1.6rem;
  padding: 5rem 4rem;
  text-align: center;
}
.gw-differ-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.35rem;
  height: 12.35rem;
  margin: 0 auto 3.4rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--periwinkle);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9rem;
}
.gw-differ-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5rem;
  line-height: 1;
  color: var(--navy);
  margin-bottom: 2.6rem;
}
.gw-differ-card p { font-size: 2.5rem; line-height: 1.2; color:#FFFFFF; }
.gw-differ-line {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 10rem;
  line-height: 1;
  color: var(--green);
  text-align: center;
  margin-top: 6.2rem;
}

/* ---------- הסיפורים שלהם, הכתיבה שלי ---------- */
.gw-writers-title { text-align: center; margin-bottom: 1.5rem; }
.gw-writers-sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 10rem;
  line-height: 1;
  color: var(--white);
  text-align: center;
  margin-bottom: 8rem;
}
.gw-writer-card { height: 91.3rem; }
.gw-writer-inner {
  position: relative;
  z-index: 2;
  /* content column measures 72.3rem edge-to-edge (matches the widest
     body line and the full avatar row) plus 11.3rem padding each side */
  max-width: 95.1rem;
  /* the photo sits on the right (quote-card-media, right:0), so this
     column — being in normal flow, not absolutely positioned — needs
     pushing to the left edge instead of defaulting to the right */
  margin-inline-start: auto;
  padding: 11.8rem 11.3rem;
  text-align: right;
}
.gw-writer-inner h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5rem;
  line-height: 1;
  color: var(--periwinkle);
  margin-bottom: 2rem;
}
.gw-writer-body { font-size: 2.5rem; line-height: 1.2; color: var(--white); margin-bottom: 4.5rem; }
.gw-writer-facts { display: flex; justify-content: flex-start; gap: 22.5rem; margin-bottom: 5.4rem; }
.gw-writer-fact { text-align: center; }
.gw-writer-fact img { height: 3.6rem; width: auto; margin: 0 auto 1.2rem; }
.gw-writer-fact p { font-size: 2.5rem; line-height: 1.2; color: var(--white); }
.gw-writer-avatars { display: flex; justify-content: space-between; gap: 2.1rem; }
.gw-avatar { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; cursor: pointer; }
.gw-avatar img {
  width: 9.8rem;
  height: 9.8rem;
  border-radius: 50%;
  object-fit: cover;
  opacity: .6;
  transition: opacity .2s;
}
.gw-avatar span { font-size: 2rem; color: var(--white); opacity: .6; transition: opacity .2s; }
.gw-avatar:hover img, .gw-avatar:hover span { opacity: .85; }
.gw-avatar.is-active img { opacity: 1; box-shadow: 0 0 0 0.2rem var(--periwinkle); }
.gw-avatar.is-active span { opacity: 1; color: var(--periwinkle); font-weight: 700; }

/* ---------- איך זה עובד ---------- */
.gw-steps-title { text-align: center; margin-bottom: 6rem; }
.gw-steps-grid {
  display: grid;
  grid-template-columns: 83.6rem 40.9rem 40.9rem;
  gap: 1.8rem 2.1rem;
}
.gw-step-card, .gw-step-note {
  border-radius: 1.6rem;
  padding: 5rem 4rem;
  text-align: center;
}
.gw-step-card { background: var(--periwinkle); }
.gw-step-card .gw-differ-num { margin-bottom: 3.4rem; }
.gw-step-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5rem;
  line-height: 1;
  color: var(--navy);
  margin-bottom: 2.6rem;
}
.gw-step-card p { font-size: 2.5rem; line-height: 1.2; color: var(--white); }
.gw-step-1 { grid-column: 1; grid-row: 1; }
.gw-step-2 { grid-column: 2; grid-row: 1; }
.gw-step-3 { grid-column: 3; grid-row: 1; }
.gw-step-note {
  grid-column: 2 / 4;
  grid-row: 2;
  border: 0.2rem solid var(--periwinkle);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gw-step-note p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 6rem;
  line-height: 1.15;
  color: var(--white);
}
.gw-step-4 { grid-column: 1; grid-row: 2; }

/* =====================================================
   ARTICLE PAGE (single blog post)
   Design: 1920px artboard, 2566.3 tall. Bands (page y):
   navy title band 0-425.6 · white article body 425.6-1818.5 ·
   footer 1818.5-2566.3 (standard shared footer).
   The share sidebar is one continuous green pill that starts in
   the title band (behind the author photo) and runs down through
   most of the body — positioned absolute, bleeding above its
   section the same way mentor.html's decos do.
   ===================================================== */
.article-hero { background: var(--navy); padding-bottom: 4.5rem; }
/* .site-header is position:absolute (overlays, not in flow), so this
   padding-top is the article title's full page-top offset, not just
   a gap under the header */
.article-hero-content { padding-top: 21.7rem; }
.article-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5rem;
  line-height: 1.08;
  color: var(--green);
  text-align: right;
}
.article-sub {
  font-size: 2.5rem;
  line-height: 1.2;
  color: var(--white);
  text-align: right;
  margin-top: 1rem;
}
.article-meta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1.4rem;
  font-size: 2rem;
  color: var(--white);
  margin-top: 3.5rem;
}
.article-meta-sep { color: var(--green); }
.article-meta-read { display: flex; align-items: center; gap: 0.6rem; }
.article-meta-read img { width: 2.2rem; height: auto; }

.article-sec { position: relative; background: var(--white); padding-top: 10.4rem; padding-bottom: 11.3rem; }
.article-inner { position: relative; display: flex; }
.article-sidebar {
  position: absolute;
  right: auto;
  left: 11.5rem;
  top: -30.6rem;
  width: 26.45rem;
  height: 148.8rem;
  border-radius: 13.3rem;
  background: var(--green);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.article-avatar {
  width: 26.45rem;
  height: 26.45rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.article-share {
  margin-top: auto;
  margin-bottom: 4.2rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.article-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 9.26rem;
  height: 9.26rem;
  border-radius: 50%;
  background: var(--navy);
  transition: transform .2s;
}
.article-share-btn:hover { transform: scale(1.06); }
.article-share-btn img { width: 3.6rem; height: auto; }

.article-main { margin-inline-end: 38rem; max-width: 142.6rem; }
.article-image {
  float: left;
  width: 78rem;
  height: auto;
  border-radius: 1.6rem;
  margin-inline-start: 3rem;
  margin-bottom: 2rem;
}
.article-body { text-align: right; }
.article-body p {
  font-size: 2.5rem;
  line-height: 1.35;
  color: var(--navy);
  margin-bottom: 3rem;
}
.article-body p:last-child { margin-bottom: 0; }
.article-body::after { content: ''; display: block; clear: both; }

/* =====================================================
   BLOG (empty-state fallback)
   ===================================================== */
.blog-empty { text-align: center; font-size: 2rem; color: var(--navy); padding: 4rem 0; }
.blog-empty a { color: var(--periwinkle); text-decoration: underline; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 600px) {
       .quote-card-media::after {
    background: /*linear-gradient(to bottom, rgba(21, 49, 87, .25) 100%, var(--navy) 100%)*/ none;
   }
   
   
@media (max-width: 1200px) {
  html { font-size: 10px; }
  .site-header .container { padding-inline: 40px; }
  .logo img { height: 40px; }
  .main-nav { height: 60px; padding-inline: 10px; }
  .main-nav a { padding: 6px 12px; font-size: 16px; }
  .main-nav a.active::after { right: 12px; left: 12px; }
  .hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 220px;
    background: linear-gradient(180deg, rgba(21,49,87,0) 0%, #153157 100%);
    pointer-events: none;
  }
  .hero-content { position: relative; z-index: 1; }
  .hero { min-height: 820px; }
  .hero-content { padding-top: 170px; }
  .hero-title { font-size: 92px; }
  .about-inner { flex-direction: column; min-height: 0; }
  .about-visual { width: 100%; height: 560px; }
  .about-circle { right: auto; left: 50%; transform: translateX(-50%); }
  .about-dot { right: auto; left: calc(50% + 230px); }
  .about-photo { right: auto; left: 50%; transform: translateX(-50%); width: 600px; }
  .book-inner { flex-direction: column; align-items: center; }
  .celebs-card { flex-direction: column; min-height: 0; }
  .celebs-content { width: 100%; padding: 60px 40px; }
  .celebs-quote { text-align: center; padding-left: 0; min-height: 0; margin-bottom: 40px; }
  .celebs-divider { display: none; }
  .celebs-photo { position: relative; width: 100%; height: 420px; order: -1; }
  /* photo stacks above the text on mobile, so the blend needs to run
     vertically instead of left-to-right: clear at the top, fading to
     solid navy at the bottom where it meets the content below it */
  .celebs-photo-overlay {
    background: linear-gradient(to bottom, rgba(21, 49, 87, 0) 40%, rgba(21, 49, 87, .5) 75%, rgba(21, 49, 87, 1) 100%);
  }
  .stats-inner { flex-direction: column; padding-block: 70px; min-height: 0; justify-content: center; }
  .stats-visual { margin-right: 0; }
  .stats-text p { text-align: center; }
  .media-quotes { padding-top: 90px; padding-bottom: 70px; }
  .media-inner { flex-direction: column; align-items: center; gap: 70px; }
  .media-quote { text-align: center; margin-top: 0; }
  .media-dots-wrap { justify-content: center; margin-top: 50px; }
  .podcast-inner { flex-direction: column; align-items: center; gap: 60px; }
  .podcast-sticker { right: -10px; left: auto; }
  .podcast-btn { margin-inline: auto; }
  .data-row { flex-wrap: wrap; }
  .data-card { width: calc((100% - 20px) / 2) !important; }
  .footer-inner { flex-wrap: wrap; }
  .footer-form { width: 100%; order: 4; }

  /* ----- About page ----- */
  .page-hero { height: 620px; }
  .page-hero-content { padding-bottom: 50px; }
  .page-hero-title { font-size: 110px; }

  /* the artboard blobs are pinned to 1920 coordinates — below that the
     photo stacks above the copy and the blobs step aside */
  .abt-sec { min-height: 0; }
  .abt-stage {
    position: static;
    max-width: none;
    display: flex;
    justify-content: center;
    padding-top: 70px;
  }
  .abt-deco { display: none; }
  .abt-photo {
    position: static;
    width: auto;
    max-width: 380px;
    max-height: 430px;
    object-fit: contain;
  }
  .abt-inner { padding-top: 50px; padding-bottom: 80px; }
  .abt-inner > *, .abt-inner-end > * { max-width: none; margin-inline-start: 0; }
  .abt-inner .section-title { margin-bottom: 40px; }
  .abt-inner p { font-size: 18px; line-height: 1.45; margin-bottom: 22px; }
  .abt-personal .abt-inner p { font-size: 21px; line-height: 1.5; margin-bottom: 26px; }

  .abt-psalm { padding-top: 80px; }
  .abt-quote { padding-top: 80px; }
  .quote-card, .quote-card-tall, .quote-card-wide, .quote-card-blog, .quote-card-lectures { height: auto; }
  .quote-card-media {
    position: static;
    width: 100%;
    height: 260px;
  }
  .quote-card-media::after {
   /* background: linear-gradient(to bottom, rgba(21, 49, 87, .25) 0%, var(--navy) 100%);*/
  }
  .quote-card-rule { display: none; }
  .quote-card-body {
    position: static;
    padding: 36px 40px 48px;
  }
  .quote-mark, .quote-card-text, .quote-card-source {
    position: static;
    width: auto;
  }
  .quote-mark { width: 62px; }
  .quote-mark-bottom { margin-right: auto; } /* RTL: pushes it to the left */
  .quote-card-text,
  .quote-card-wide .quote-card-text,
  .quote-card-blog .quote-card-text,
  .quote-card-lectures .quote-card-text { font-size: 40px; margin: 26px 0 20px; }

  /* ----- In the media page ----- */
  .media-articles { padding-top: 60px; padding-bottom: 80px; }
  .media-series, .media-assuta { padding-top: 70px; padding-bottom: 80px; }
  .media-heading { font-size: 58px; margin-bottom: 46px; }
  .media-grid, .media-grid-wide { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .media-card-body { bottom: 30px; padding-inline: 26px; }
  .media-card-title { font-size: 30px; }
  .media-card-source { font-size: 18px; margin-top: 6px; }
  .media-badge {
    height: 40px;
    top: 16px;
    left: 16px;
    gap: 8px;
    padding-inline: 12px;
    font-size: 18px;
    border-radius: 8px;
  }
  .media-badge-views img { width: 26px; }
  .media-badge-note { right: 16px; }
  .media-quote-band { padding-top: 70px; padding-bottom: 80px; }

  /* ----- Blog page ----- */
  .blog-opinion { padding-top: 60px; padding-bottom: 80px; }
  .blog-bdk { padding-top: 70px; padding-bottom: 80px; }
  .blog-grid, .blog-grid-bdk { gap: 20px; }
  .media-card-wide { aspect-ratio: 547 / 732; }
  .media-card-wide .media-card-title { font-size: 30px; }
  .blog-quote-band { padding-top: 70px; padding-bottom: 0; }
  .blog-episodes { padding-top: 70px; padding-bottom: 90px; }
  .quote-card-source { font-size: 26px; }

  .abt-episodes { padding-top: 80px; padding-bottom: 90px; }
  .episodes-panel { flex-direction: column; padding: 30px; gap: 30px; }
  .episodes-side { width: 100%; }
  /* flex:1 is a height rule once the panel stacks — pin it instead */
  .episodes-player { order: -1; flex: none; height: 380px; }
  .episodes-title { margin-top: 40px; margin-bottom: 20px; font-size: 20px; }
  .episode-thumb { height: 130px; }
  .episodes-sticker { width: 130px; top: 14px; right: 14px; }
  .play-icon { width: 38px; height: 38px; }
  .play-icon-lg { width: 76px; height: 76px; }

  /* ----- Lectures page ----- */
  .lec-intro { min-height: 0; padding-top: 40px; padding-bottom: 60px; }
  .lec-intro-stage {
    position: relative;
    max-width: none;
    display: flex;
    justify-content: center;
    padding-top: 0;
    margin-bottom: 40px;
  }
  .lec-intro-photo { position: static; width: auto; max-width: 340px; }
  .lec-intro-circle, .lec-intro-dot { display: none; }
  .lec-intro-inner { padding-top: 0; }
  .lec-intro-inner p { font-size: 18px; margin-bottom: 22px; }
  .lec-banner { height: auto; min-height: 90px; font-size: 44px; padding: 20px; }

  .lec-clients { min-height: 0; padding-top: 60px; padding-bottom: 60px; }
  .clients-viewport { height: 180px; }
  .clients-page img { max-width: 110px; max-height: 60px; }

  .lec-videos { min-height: 0; padding-top: 60px; padding-bottom: 70px; }
  .lec-videos-grid { grid-template-columns: 1fr; gap: 30px; }
  .lec-video-title { font-size: 44px; margin-bottom: 30px; }
  .lec-video-box { height: 320px; }

  .lec-list-head { min-height: 0; padding-top: 60px; }

  /* the artboard blobs are pinned to 1920 coordinates — stack the
     photo above the copy below that, same pattern as the about page */
  .lec-n1, .lec-n2, .lec-n3, .lec-n4, .lec-n5, .lec-n6, .lec-n7 { min-height: 0; }
  .lec { padding-top: 50px; padding-bottom: 60px; }
  .lec-stage {
    position: relative;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
    margin-bottom: 40px;
  }
  .lec-deco { display: none; }
  .lec-photo {
    position: static !important;
    width: auto !important;
    max-width: 320px;
    max-height: 360px;
    object-fit: contain;
    border-radius: 1.6rem;
  }
  .lec-award {
    position: static;
    width: 260px;
    height: 260px;
    margin-top: 24px;
  }
  .lec-inner, .lec-text-left .lec-inner { text-align: right; }
  .lec-col, .lec-text-left .lec-col { max-width: none; margin-inline-start: 0; }
  .lec-title { font-size: 58px; gap: 14px; }
  .lec-num { width: 70px; height: 70px; font-size: 34px; }
  .lec-sub { font-size: 46px; padding-inline-start: 84px; }
  .lec-body { margin-top: 30px; }
  .lec-body p { font-size: 18px; margin-bottom: 20px; }
  .lec-body ol li { font-size: 18px; }
  .lec-meta { font-size: 18px; margin-top: 30px; }
  .lec-meta img { width: 28px; }
  .lec-links { grid-template-columns: 1fr 1fr; max-width: none; margin-top: 30px; }
  .lec-link { font-size: 18px; }
  /* the column already fills full width on mobile, so the CTA (narrower
     than its column, same as desktop) just needs its own top spacing */
  .lec-cta { margin-top: 40px; }

  .lec-quote-band { padding-top: 60px; }
  .lec-episodes { padding-top: 60px; padding-bottom: 70px; }

  /* ----- Mentor page ----- */
  .page-hero-mentor { height: 620px; }
  .mentor-hero-title { font-size: 74px; max-width: 900px; }
  .mentor-quote-band { padding-top: 60px; }
  .quote-card-mentor { height: auto; }
  .quote-card-mentor .quote-card-text { top: auto; }

  .mentor-sec, .mentor-n2, .mentor-n8 { min-height: 0; padding-top: 50px; padding-bottom: 60px; }
  .mentor-stage {
    position: relative;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
    margin-bottom: 30px;
  }
  .mentor-deco { display: none; }
  .mentor-welfare-logo { position: static; width: 200px; margin: 0 auto; }
  .mentor-dna-photo { position: static; width: 100%; max-width: 500px; }
  .mentor-inner, .mentor-text-left .mentor-inner { text-align: right; }
  .mentor-col, .mentor-text-left .mentor-col { max-width: none; margin-inline-start: 0; }
  .mentor-n6 .mentor-inner .section-title { white-space: normal; }
  .mentor-n6 .mentor-link { width: auto; white-space: normal; }
  .mentor-n9 .mentor-link { width: auto; }
  .mentor-inner .section-title { margin-bottom: 30px; }
  .mentor-body p { font-size: 18px; margin-bottom: 20px; }
  .mentor-link { font-size: 18px; margin-top: 30px; min-height: 50px; }

  .mentor-note { position: static; width: 100%; max-width: 480px; margin: 0 auto; transform: rotate(-3deg); }
  .mentor-text-left .mentor-stage .mentor-note { position: static; width: 100%; max-width: 480px; transform: rotate(1.5deg); }

  .mentor-media { padding-top: 50px; padding-bottom: 70px; }
  .mentor-media .media-heading { margin-bottom: 40px; }
  .mentor-wide-card img { height: auto; min-height: 300px; }
  .mentor-wide-card-title { font-size: 32px; margin-bottom: 20px; }
  .mentor-wide-card-links { flex-wrap: wrap; gap: 14px; }
  .mentor-wide-link { font-size: 16px; padding-inline: 20px; }
  .mentor-media-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .mentor-media-grid .media-card-body { bottom: 34px; }
  .mentor-media-grid .media-card-title { font-size: 40px; }
  .mentor-media-grid .media-card-source { height: 38px; margin-top: 28px; padding-inline: 20px; border-radius: 8px; font-size: 16px; }

  .mentor-advantages { padding-top: 60px; padding-bottom: 60px; }
  .advantages-panel { padding: 60px 24px 70px; }
  .advantages-title { font-size: 48px; margin-bottom: 40px; }
  .advantages-row { flex-wrap: wrap; gap: 20px; }
  .advantage-card { width: 100%; min-height: 0; padding: 30px 24px; }
  .advantage-card img { height: 70px; margin-bottom: 24px; }
  .advantage-card h3 { font-size: 32px; }
  .advantage-card p { font-size: 20px; }

  .mentor-testimonial { min-height: 0; padding-bottom: 40px; padding-top: 260px; }
  .mentor-testimonial-text { margin-bottom: 30px; }
  .mentor-testimonial-text h2 { font-size: 60px; }
  .mentor-testimonial-text p { font-size: 56px; }

  .mentor-episodes { padding-top: 60px; padding-bottom: 70px; }

  .page-hero-books { height: 460px; }
  .quote-card-text-7l { top: auto; }
  .bks-sec { padding-top: 50px; padding-bottom: 60px; }
  .bks-stage {
    position: relative;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;
    margin-bottom: 30px;
  }
  .bks-deco { display: none; }
  .bks-cover { position: static; width: 100%; max-width: 320px; height: auto; }
  .bks-inner { text-align: right; }
  .bks-col { max-width: none; margin-inline-start: 0; }
  .bks-inner .section-title { margin-bottom: 30px; }
  .bks-body p { font-size: 18px; margin-bottom: 20px; }
  .bks-facts { flex-wrap: wrap; gap: 30px; margin-top: 40px; }
  .bks-fact img { height: 50px; margin-bottom: 12px; }
  .bks-fact p { font-size: 18px; }
  .bks-cta { width: auto; font-size: 18px; margin-top: 40px; min-height: 50px; height: auto; padding-block: 14px; }
  .bks-bottom-row { flex-direction: column; align-items: flex-end; gap: 30px; margin-top: 40px; }
  .bks-bottom-row .bks-facts, .bks-bottom-row .bks-cta { margin-top: 0; }

  .books-gallery { padding-top: 60px; padding-bottom: 60px; }
  .books-episodes { padding-top: 60px; padding-bottom: 70px; }

  .page-hero-gw { height: 460px; }
  .gw-sec { padding-top: 50px; padding-bottom: 60px; }
  .gw-stage {
    position: relative;
    max-width: none;
    display: flex;
    justify-content: center;
    padding-top: 0;
  }
  .gw-tape { display: none; }
  .gw-photo-a, .gw-photo-b {
    position: static;
    width: 100%;
    max-width: 400px;
    height: 280px;
    margin: 0 auto 30px;
  }
  .gw-photo-a img, .gw-photo-b img {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .gw-inner { text-align: right; }
  .gw-col { max-width: none; margin-inline-start: 0; }
  .gw-inner .section-title { margin-bottom: 30px; }
  .gw-body-text p { font-size: 18px; margin-bottom: 20px; }

  .gw-quote-band { padding-top: 60px; padding-bottom: 50px; }
  .gw-book-cover { position: static; width: 100%; max-width: 300px; height: auto; margin: 0 auto 30px; }

  .gw-differ-panel { padding: 50px 30px 60px; }
  .gw-differ-title { margin-bottom: 40px; }
  .gw-differ-grid { grid-template-columns: 1fr; gap: 20px; }
  .gw-differ-card { padding: 40px 24px; }
  .gw-differ-num { width: 70px; height: 70px; font-size: 30px; margin-bottom: 20px; }
  .gw-differ-card h3 { font-size: 28px; margin-bottom: 16px; }
  .gw-differ-card p { font-size: 17px; }
  .gw-differ-line { font-size: 40px; margin-top: 40px; }

  .gw-writers-sub { font-size: 40px; margin-bottom: 40px; }
  .gw-writer-card { height: auto; }
  .gw-writer-inner { max-width: none; padding: 30px 24px; }
  .gw-writer-inner h3 { font-size: 32px; }
  .gw-writer-body { font-size: 17px; margin-bottom: 30px; }
  .gw-writer-facts { gap: 40px; margin-bottom: 30px; }
  .gw-writer-avatars { flex-wrap: wrap; gap: 20px; }

  .gw-steps-title { margin-bottom: 40px; }
  .gw-steps-grid { grid-template-columns: 1fr; gap: 20px; }
  .gw-step-card, .gw-step-note { grid-column: 1; padding: 40px 24px; }
  .gw-step-1 { grid-row: 1; } .gw-step-2 { grid-row: 2; } .gw-step-3 { grid-row: 3; }
  .gw-step-note { grid-row: 4; }
  .gw-step-4 { grid-row: 5; }
  .gw-step-card h3 { font-size: 28px; margin-bottom: 16px; }
  .gw-step-card p { font-size: 17px; }
  .gw-step-note p { font-size: 24px; }

  .article-hero-content { padding-top: 100px; }
  .article-title { font-size: 40px; }
  .article-sub { font-size: 18px; }
  .article-meta { font-size: 16px; flex-wrap: wrap; margin-top: 20px; }
  .article-sec { padding-top: 40px; padding-bottom: 60px; }
  .article-inner { flex-direction: column; align-items: center; }
  .article-sidebar {
    position: static;
    flex-direction: row;
    width: auto;
    height: auto;
    border-radius: 100px;
    padding: 20px 30px;
    gap: 24px;
    margin-bottom: 30px;
  }
  .article-avatar { width: 90px; height: 90px; }
  .article-share { margin: 0; flex-direction: row; gap: 16px; }
  .article-share-btn { width: 50px; height: 50px; }
  .article-share-btn img { width: 20px; }
  .article-main { margin-inline-end: 0; max-width: 100%; }
  .article-image { float: none; width: 100%; margin-inline-start: 0; margin-bottom: 20px; }
  .article-body p { font-size: 18px; }
}

@media (max-width: 1024px) {
  .main-nav { display: none; }
  .logo img { height: 44px; }
  .nav-toggle {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--white);
    border-radius: 10px;
    padding: 12px;
  }
  .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--navy); }
  .main-nav.open {
    display: block;
    position: absolute;
    top: 90px;
    right: 24px;
    left: 24px;
    height: auto;
    padding: 20px;
    background: var(--periwinkle);
    border-radius: 14px;
  }
  .main-nav.open ul { flex-direction: column; align-items: flex-start; gap: 10px; }
  .main-nav.open a { font-size: 18px; padding: 6px 12px; }
}

@media (max-width: 768px) {
  .container { padding-inline: 24px; }
  .header-inner { flex-direction: row; }
  .hero { min-height: 640px; }
  .hero-content { padding-top: 140px; }
  .hero-title { font-size: 52px; }
  .hero-name { font-size: 40px; }
  .hero .btn { min-width: 0; width: 100%; }
  .section-title { font-size: 48px; }
  .about-text p, .book-text p, .podcast-text p { font-size: 18px; }
  .about-visual { position: relative; inset: auto; order: -1; height: 380px; overflow: hidden; }
  .about-text { padding-top: 40px; }
  .about-circle { width: 320px; height: 320px; top: 60px; }
  .about-dot { width: 56px; height: 56px; left: calc(50% + 100px); top: 60px; }
  .about-photo { width: 340px; }
  .book-visual { width: 100%; max-width: 342px; height: 400px; }
  .book-circle { width: 300px; height: 300px; top: 80px; left: 20px; }
  .book-dot { width: 48px; height: 48px; left: 28px; top: 90px; }
  .book-img { width: 280px; left: 40px; top: 0; }
  .book-btn, .podcast-btn { width: 100%; }
  .celebs { padding-top: 90px; }
  .celebs-quote { font-size: 44px; }
  .celebs-tabs { flex-wrap: wrap; gap: 24px; }
  .stats-text p { font-size: 38px; }
  .stats-visual { width: 100%; max-width: 380px; }
  .activities-grid { grid-template-columns: 1fr; }
  .activity-card h3 { font-size: 40px; bottom: 30px; }
  .media-quotes { padding-top: 60px; padding-bottom: 50px; }
  .media-logo-wrap, .media-logo-circle { width: 280px; }
  .media-logo-circle { height: 280px; }
  .media-logo-circle img { width: 200px; max-height: 112px; }
  .qmark { width: 64px; }
  .qmark-top { top: 7px; right: 2px; }
  .qmark-bottom { top: 233px; left: 6px; }
  .media-quote { font-size: 32px; line-height: .95; }
  .media-dots-wrap { margin-top: 40px; }
  .podcast-visual { width: 100%; max-width: 420px; }
  .podcast-tape { right: -12px; }
  .podcast-video { height: 430px; }
  .podcast-sticker { width: 180px; bottom: 40px; }
  .podcast-platforms { gap: 40px; justify-content: center; }
  .podcast-platforms img { height: 52px; }
  .data-panel { padding: 50px 24px; }
  .data-title { font-size: 44px; margin-bottom: 40px; }
  .data-card { width: 100% !important; }
  .footer-inner { flex-direction: column; }
  .footer-bottom { flex-direction: column; gap: 24px; margin-top: 60px; }

  /* ----- About page ----- */
  .page-hero { height: 460px; }
  .page-hero-title { font-size: 62px; }
  .abt-stage { padding-top: 50px; }
  .abt-photo { max-width: 300px; max-height: 330px; }
  .abt-inner { padding-top: 36px; padding-bottom: 60px; }
  .abt-inner .section-title { margin-bottom: 28px; }
  .abt-inner p { font-size: 17px; }
  .abt-personal .abt-inner p { font-size: 19px; }
  .abt-psalm, .abt-quote, .abt-episodes { padding-top: 60px; }
  .quote-card-media { height: 190px; }
  .quote-card-body { padding: 28px 24px 36px; }
  .quote-mark { width: 48px; }
  .quote-card-text,
  .quote-card-wide .quote-card-text,
  .quote-card-blog .quote-card-text { font-size: 30px; }
  .media-card-wide { grid-column: span 1; }

  /* ----- In the media page ----- */
  .media-articles, .media-series, .media-assuta, .media-quote-band {
    padding-top: 50px;
    padding-bottom: 60px;
  }
  .media-heading { font-size: 38px; margin-bottom: 32px; }
  .media-grid, .media-grid-wide { grid-template-columns: 1fr; gap: 18px; }
  .media-card-body { bottom: 26px; padding-inline: 30px; }
  .media-card-title { font-size: 32px; }
  .media-card-source { font-size: 17px; }
  .quote-card-source { font-size: 22px; }
  .abt-episodes { padding-bottom: 70px; }
  .episodes-panel { padding: 20px; }
  .episodes-btn { padding-inline: 16px; font-size: 18px; }
  .episodes-player { height: 260px; }
  .episode-thumb { height: 84px; }
  .episodes-sticker { width: 84px; top: 8px; right: 8px; }

  /* ----- Lectures page ----- */
  .lec-intro, .lec-clients, .lec-videos, .lec-list-head, .lec, .lec-quote-band, .lec-episodes {
    padding-top: 40px;
    padding-bottom: 50px;
  }
  .lec-intro-photo { max-width: 260px; }
  .lec-intro-inner p { font-size: 16px; }
  .lec-banner { font-size: 30px; min-height: 70px; }
  .clients-viewport { height: 130px; }
  .clients-page img { max-width: 80px; max-height: 44px; }
  .lec-video-title { font-size: 30px; margin-bottom: 20px; }
  .lec-video-box { height: 200px; }
  .lec-photo { max-width: 240px; max-height: 260px; }
  .lec-award { width: 200px; height: 200px; font-size: 16px; }
  .lec-title { font-size: 40px; }
  .lec-num { width: 54px; height: 54px; font-size: 26px; }
  .lec-sub { font-size: 30px; padding-inline-start: 64px; }
  .lec-body p, .lec-body ol li, .lec-meta { font-size: 16px; }
  .lec-links { grid-template-columns: 1fr; }

  /* ----- Mentor page ----- */
  .page-hero-mentor { height: 460px; }
  .mentor-hero-title { font-size: 44px; max-width: none; }
  .mentor-sec, .mentor-n2, .mentor-n8 { padding-top: 36px; padding-bottom: 50px; }
  .mentor-inner .section-title { font-size: 48px; margin-bottom: 24px; }
  .mentor-body p { font-size: 16px; }
  .mentor-note, .mentor-text-left .mentor-stage .mentor-note { max-width: 340px; }
  .mentor-note-dark p { font-size: 18px; }
  .mentor-n4, .mentor-n7 { min-height: auto; }

  .mentor-media { padding-top: 36px; padding-bottom: 60px; }
  .mentor-wide-card-title { font-size: 26px; }
  .mentor-wide-link { font-size: 15px; height: 46px; padding-inline: 16px; }
  .mentor-media-grid { grid-template-columns: 1fr; }
  .mentor-media-grid .media-card-title { font-size: 26px; }
  .mentor-media-grid .media-card-source { height: 34px; margin-top: 20px; padding-inline: 16px; font-size: 14px; }

  .mentor-advantages { padding-top: 50px; padding-bottom: 50px; }
  .advantages-title { font-size: 32px; }
  .advantage-card h3 { font-size: 24px; }
  .advantage-card p { font-size: 17px; }

  .mentor-testimonial { padding-top: 220px; }
  .mentor-testimonial-text h2 { font-size: 44px; }
  .mentor-testimonial-text p { font-size: 40px; }

  .mentor-dna-photo { max-width: 320px; }
  .mentor-welfare-logo { width: 160px; }

  /* ----- Books page ----- */
  .page-hero-books { height: 460px; }
  .bks-sec { padding-top: 36px; padding-bottom: 50px; }
  .bks-cover { max-width: 260px; }
  .bks-inner .section-title { font-size: 48px; margin-bottom: 24px; }
  .bks-body p { font-size: 16px; }
  .bks-facts { gap: 24px; margin-top: 30px; }
  .bks-fact img { height: 40px; }
  .bks-fact p { font-size: 16px; }
  .bks-cta { margin-top: 30px; font-size: 16px; }

  .books-gallery { padding-top: 36px; padding-bottom: 50px; }
  .books-episodes { padding-top: 50px; padding-bottom: 50px; }

  /* ----- Ghost writer page ----- */
  .page-hero-gw { height: 460px; }
  .gw-sec { padding-top: 36px; padding-bottom: 50px; }
  .gw-inner .section-title { font-size: 40px; margin-bottom: 24px; }
  .gw-body-text p { font-size: 16px; }
  .gw-photo-a, .gw-photo-b { max-width: 320px; height: 240px; }
  .gw-differ-title { font-size: 32px; }
  .gw-differ-line { font-size: 28px; }
  .gw-writers-title { font-size: 40px; }
  .gw-writers-sub { font-size: 28px; }
  .gw-writer-inner h3 { font-size: 28px; }
  .gw-avatar img { width: 60px; height: 60px; }
  .gw-avatar span { font-size: 14px; }
  .gw-steps-title { font-size: 40px; }
  .gw-step-note p { font-size: 20px; }
}

@media (max-width: 480px) {
  /* keep author/date/category/read-time on one row instead of wrapping
     with an orphaned separator dangling at the line end */
  .article-meta { font-size: 12px; gap: 8px; flex-wrap: nowrap; }
  .article-meta-read { gap: 3px; white-space: nowrap; }
  .article-meta-read img { width: 14px; }

  .footer-inner, .footer-bottom { display: contents; }
  .footer {
    display: flex;
    flex-wrap: wrap;
    padding-inline: 24px;
  }
  .footer-logo { order: 1; display: flex; width: 100%; justify-content: center; margin-bottom: 24px; }
  .footer-nav { order: 2; width: 50%; }
  .footer-topics { order: 3; width: 50%; }
  .footer-contact { order: 4; width: 100%; margin-top: 24px; }
  .footer-form { order: 5; width: 100%; margin-top: 24px; }
  .copyright { order: 6; width: 100%; margin-top: 24px; }
}
@media (max-width: 767px) {
    .page-hero {
        background-position: calc(26%) top;
    }
}