/* ==========================================================================
   אספן ההצלחות — חני זמיר | hani-zamir.com
   עיצוב: רקע קרם חם, גוון ורוד־עתיק, כרטיסים מעוגלים, גופן Assistant.
   Pure CSS, no framework.
   ========================================================================== */

:root {
  /* --- Surfaces --- */
  --cream: #fcf9f5;               /* page ground */
  --cream-soft: #fdfbf7;          /* top of the hero gradient */
  --blush: #f7ece7;               /* bottom of the hero gradient */
  --card: #ffffff;

  /* --- Accent (rose) --- */
  --rose: #d9777f;                /* decoration + large type only */
  --rose-deep: #a94f57;           /* links, small text, filled buttons (AA on white) */
  --rose-tint: #fdf1ef;           /* soft panels behind quotes / icons */
  --line: rgba(217, 119, 127, 0.16);

  /* --- Type --- */
  --color-heading: #3d3937;
  --color-text: #55504e;
  --color-muted: #8a8482;
  --color-link: var(--rose-deep);

  /* --- Brand colors (icons only) --- */
  --color-whatsapp: #1fa855;
  --color-instagram: #d63aad;
  --color-facebook: #1877f2;

  /* --- Shape & depth --- */
  --radius: 22px;
  --radius-lg: 30px;
  --radius-xl: 44px;
  --shadow-sm: 0 2px 8px rgba(96, 62, 60, 0.05);
  --shadow-md: 0 6px 20px rgba(96, 62, 60, 0.07);
  --shadow-lg: 0 14px 36px rgba(96, 62, 60, 0.10);

  --content-width: 1140px;

  /* Rose heart used as a section accent (inline SVG, no icon font). */
  --heart: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23d9777f'%3E%3Cpath%20d='M12%2021.3s-7.6-4.8-9.5-9.2C.8%208.5%202.5%204.8%206.1%204c2.4-.5%204.6.5%205.9%202.4C13.3%204.5%2015.5%203.5%2017.9%204c3.6.8%205.3%204.5%203.6%208.1-1.9%204.4-9.5%209.2-9.5%209.2z'/%3E%3C/svg%3E");
  --zoom: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23a94f57'%20stroke-width='2'%20stroke-linecap='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='7'/%3E%3Cpath%20d='M20%2020l-4.4-4.4M11%208v6M8%2011h6'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  position: relative;
  margin: 0;
  font-family: Assistant, Heebo, "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--color-text);
  background-color: var(--cream);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Soft blush panel behind the header + page title, closed by a wide curve. */
body::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 420px;
  background: linear-gradient(180deg, var(--cream-soft) 0%, var(--blush) 100%);
  border-bottom-left-radius: 50% 12%;
  border-bottom-right-radius: 50% 12%;
  z-index: -1;
  pointer-events: none;
}

img { max-width: 100%; height: auto; }

figure { margin: 0; }

a { color: var(--color-link); }

h1, h2, h3, h4 {
  color: var(--color-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
}

::selection { background: var(--rose); color: #fff; }

:focus-visible {
  outline: 2px solid var(--rose-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Section accent: a small rose heart under a heading. */
.page-header .entry-title::after,
.carousel-heading::after,
.rec-heading::after {
  content: "";
  display: block;
  width: 19px;
  height: 19px;
  margin: 16px auto 0;
  background: var(--heart) center / contain no-repeat;
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  right: 8px;
  background: #fff;
  color: var(--rose-deep);
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  z-index: 200;
  text-decoration: none;
}
.skip-link:focus { top: 10px; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--line), 0 4px 18px rgba(96, 62, 60, 0.04);
}

.header-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5em;
}

.site-title {
  font-size: 1.75em;
  font-weight: 700;
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Heart mark next to the site name. */
.site-title::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  background: var(--heart) center / contain no-repeat;
}
.site-title a {
  color: var(--rose-deep);
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-title a:hover, .site-title a:focus { color: var(--rose); }

.site-description {
  margin: 0;
  font-size: 0.9em;
  color: var(--color-muted);
}

.site-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 1.75em;
}
.site-navigation a {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.95em;
  font-weight: 600;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.site-navigation a:hover,
.site-navigation a:focus { color: var(--rose-deep); border-bottom-color: var(--line); }
.site-navigation a[aria-current="page"] {
  color: var(--rose-deep);
  border-bottom-color: var(--rose);
}

/* Mobile menu toggle (hamburger) */
.menu-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 26px;
  height: 3px;
  margin: 5px 0;
  border-radius: 2px;
  background: var(--rose-deep);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-navigation { display: none; }

@media (max-width: 1024px) {
  .site-navigation { display: none; }
  .menu-toggle { display: block; }
  .mobile-navigation[data-open] {
    display: block;
    position: absolute;
    top: calc(100% + 8px);
    right: 12px;
    left: 12px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 100;
  }
  .mobile-navigation ul { list-style: none; margin: 0; padding: 8px; }
  .mobile-navigation a {
    display: block;
    padding: 0.7em 1.25em;
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    border-radius: 999px;
  }
  .mobile-navigation a:hover,
  .mobile-navigation a:focus { background: var(--rose-tint); color: var(--rose-deep); }
  .mobile-navigation a[aria-current="page"] { color: var(--rose-deep); }
}

/* --------------------------------------------------------------------------
   Main content
   -------------------------------------------------------------------------- */
.site-main {
  flex: 1;
  width: 100%;
  min-width: 0;                 /* flex item: allow shrinking below intrinsic content width */
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 18px 56px;
}

.page-header { text-align: center; padding: 26px 0 8px; }

.page-header .entry-title {
  margin: 0.3em auto 0;
  max-width: 22ch;
  font-size: 2.6em;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-heading);
}

.section { padding: 26px 0; }

/* --------------------------------------------------------------------------
   Home page — the book
   -------------------------------------------------------------------------- */
.intro-section {
  text-align: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 44px 36px 48px;
  margin-top: 10px;
}

/* Blush halo behind the book cover. */
.book-cover-figure {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.book-cover-figure::before {
  content: "";
  position: absolute;
  inset: -6% -4%;
  background: radial-gradient(circle at 50% 45%, var(--rose-tint) 0%, rgba(253, 241, 239, 0) 70%);
  border-radius: 50%;
  z-index: 0;
}
.book-cover-figure img {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 100%;
  border-radius: var(--radius-lg);
}

.book-quote {
  position: relative;
  max-width: 46em;
  margin: 34px auto 0;
  padding: 30px 34px;
  background: var(--rose-tint);
  border-radius: var(--radius-lg);
  font-size: 1.2em;
  font-weight: 600;
  line-height: 1.85;
  color: var(--color-heading);
}
/* Decorative opening quote mark (RTL: sits on the right). */
.book-quote::before {
  content: "”";
  position: absolute;
  top: 2px;
  right: 22px;
  font-size: 3.2em;
  line-height: 1;
  color: var(--rose);
  opacity: 0.35;
}

.spacer-28 { height: 20px; }
.spacer-100 { height: 48px; }

.book-desc {
  max-width: 44em;              /* keep the line length readable */
  margin: 26px auto 0;
  font-size: 1.06em;
  line-height: 1.9;
  text-align: center;
  color: var(--color-text);
}

.carousel-heading {
  margin: 0 0 24px;
  font-size: 1.7em;
  font-weight: 700;
  text-align: center;
  color: var(--color-heading);
}

/* Carousel (fade effect, like the original Elementor image carousel) */
.carousel {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 22px 22px 18px;
}

.carousel-track { position: relative; }

.carousel-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}
.carousel-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
}
/* The slide is a flex container; min-width:0 keeps a wide image shrinkable. */
.carousel-slide img { display: block; min-width: 0; max-width: 100%; border-radius: var(--radius); }

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-sm);
  color: var(--rose-deep);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.carousel-arrow:hover, .carousel-arrow:focus { background: var(--rose); color: #fff; border-color: var(--rose); }
.carousel-arrow svg { width: 20px; height: 20px; fill: currentColor; }
.carousel-prev { left: 18px; }
.carousel-next { right: 18px; }

.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.carousel-dots button {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: #e7d9d4;
  transition: background 0.2s ease, width 0.2s ease;
}
.carousel-dots button:hover { background: var(--rose); }
.carousel-dots button[aria-current="true"] { background: var(--rose); width: 26px; }

/* --------------------------------------------------------------------------
   Buttons — white pills with brand-colored icons; one filled rose CTA.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 30px;
  min-height: 54px;
  border-radius: 999px;
  background-color: var(--card);
  border: 1px solid var(--line);
  color: var(--color-heading);
  font-size: 1em;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.btn:hover, .btn:focus {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--rose-deep);
}

.btn .icon {
  width: 1.3em;
  height: 1.3em;
  fill: var(--rose);
  flex-shrink: 0;
  transition: fill 0.2s ease;
}

/* .btn-pill is a no-op now that every button is a pill (kept for the markup). */
.btn-pill { border-radius: 999px; }

/* Primary CTA — the purchase button. */
.btn-buy {
  background-color: var(--rose-deep);
  border-color: var(--rose-deep);
  color: #ffffff;
  padding: 16px 40px;
  font-size: 1.05em;
  box-shadow: 0 10px 26px rgba(169, 79, 87, 0.28);
  margin: 8px;
}
.btn-buy:hover, .btn-buy:focus {
  background-color: var(--rose);
  border-color: var(--rose);
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(169, 79, 87, 0.32);
}
.btn-buy .icon { fill: #ffffff; }

/* Brand-colored icons on the white pills. */
.btn[href^="https://wa.me"] .icon { fill: var(--color-whatsapp); }
.btn-instagram .icon { fill: var(--color-instagram); }
.btn-facebook .icon { fill: var(--color-facebook); }
.btn-contact-form .icon,
.btn[href^="mailto:"] .icon,
.btn[href^="tel:"] .icon { fill: var(--rose); }

.center { text-align: center; }

/* Social buttons row (home) */
.social-cols {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.social-cols .col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.social-cols .btn { width: 100%; max-width: 330px; }

/* Contact page buttons */
.contact-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-top: 34px;
}
.contact-buttons .btn { width: 100%; max-width: 360px; }
/* WhatsApp is the primary action on the contact page. */
.contact-buttons .btn[href^="https://wa.me"] {
  background-color: var(--rose-deep);
  border-color: var(--rose-deep);
  color: #ffffff;
  box-shadow: 0 10px 26px rgba(169, 79, 87, 0.24);
}
.contact-buttons .btn[href^="https://wa.me"]:hover,
.contact-buttons .btn[href^="https://wa.me"]:focus {
  background-color: var(--rose);
  border-color: var(--rose);
  color: #ffffff;
}
.contact-buttons .btn[href^="https://wa.me"] .icon { fill: #ffffff; }

/* --------------------------------------------------------------------------
   Sessions (המלצות) page — testimonial cards
   -------------------------------------------------------------------------- */
.testimonial-cols {
  display: flex;
  gap: 26px;
  align-items: flex-start;
  margin-bottom: 26px;
}
.testimonial-cols .col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 26px;
  align-items: center;
}
.testimonial-cols figure {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.testimonial-cols figure:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.testimonial-cols figure img { display: block; margin: 0 auto; border-radius: var(--radius); }

/* --------------------------------------------------------------------------
   Recommendations (המלצות) page — the testimonial wall
   --------------------------------------------------------------------------
   Recommendations arrive as photographed notes and phone screenshots, in
   every aspect ratio, and more are added over time. A multi-column masonry
   balances the columns itself, so adding a recommendation is one more
   <figure> in the markup — no column bookkeeping and no CSS change.
   Unlike .testimonial-cols above (still used by the book page), nothing here
   depends on how many items there are.
   The component keeps its own media queries so it all stays in one place.
   -------------------------------------------------------------------------- */
.rec-heading {
  margin: 0 0 26px;
  text-align: center;
  font-size: 1.9em;
  line-height: 1.3;
}

.rec-intro {
  max-width: 46em;
  margin: 0 auto 38px;
  text-align: center;
  font-size: 1.1em;
  color: var(--color-text);
}

.rec-grid {
  /* Two columns, not three: these are pages of text, and half of a 1140px
     column is the narrowest a handwritten note stays readable at. Raise this
     to 3 only if the wall grows long enough to be worth the smaller cards. */
  columns: 2;
  column-gap: 26px;
}

.rec-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;   /* Safari */
  margin: 0 0 26px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rec-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* The image is wrapped in a link to the file itself: JS turns it into the
   lightbox, and without JS it still opens full size — these are pages of
   text, unreadable at column width either way. */
.rec-zoom {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}
.rec-zoom img { display: block; width: 100%; height: auto; }

/* Magnifier badge, so the card reads as enlargeable. Visible without hover,
   which never happens on touch. */
.rec-zoom::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92) var(--zoom) center / 17px 17px no-repeat;
  box-shadow: var(--shadow-sm);
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.rec-card:hover .rec-zoom::after { opacity: 1; }

.rec-card figcaption { padding: 16px 6px 2px; }
.rec-quote {
  margin: 0;
  border-right: 3px solid var(--rose);
  padding-right: 14px;
  font-size: 1.02em;
  line-height: 1.65;
  color: var(--color-heading);
}
.rec-quote p { margin: 0; }
.rec-by {
  margin: 10px 17px 0 0;
  font-size: 0.92em;
  color: var(--color-muted);
}

@media (max-width: 767px) {
  .rec-grid { columns: 1; }
  .rec-heading { font-size: 1.5em; }
  .rec-intro { font-size: 1em; }
}

/* --------------------------------------------------------------------------
   Lightbox — opens one recommendation full size
   -------------------------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  padding: 74px 18px 28px;
  background: rgba(61, 57, 55, 0.86);
  overflow: auto;
  overscroll-behavior: contain;
}
/* margin:auto centers the content and, unlike justify-content, still lets a
   taller-than-screen note scroll from its top instead of clipping it. */
.lightbox-body {
  margin: auto;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
/* Shown as large as the overlay allows and scrolled, not shrunk to fit: these
   are pages of text, and fitting them on screen is what made them unreadable. */
.lightbox img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-lg);
}
.lightbox-caption {
  max-width: 46em;
  margin: 0;
  color: #ffffff;
  font-size: 0.98em;
  line-height: 1.6;
  text-align: center;
}
.lightbox-close {
  position: fixed;               /* stays reachable while a long note scrolls */
  top: 16px;
  left: 16px;
  width: 44px;                    /* a comfortable touch target */
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: var(--rose-deep);
  font-size: 1.6em;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: background-color 0.2s ease;
}
.lightbox-close:hover, .lightbox-close:focus { background: var(--rose-tint); }
/* Freeze the page behind the overlay. */
body.has-lightbox { overflow: hidden; }

@media (max-width: 767px) {
  .lightbox { padding: 66px 12px 18px; }
}

/* --------------------------------------------------------------------------
   Blog archive + posts
   -------------------------------------------------------------------------- */
.post {
  margin-bottom: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 30px 32px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.post:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.post .entry-title {
  margin: 0 0 0.5em;
  font-size: 1.55em;
  font-weight: 700;
  line-height: 1.3;
}
.post .entry-title a {
  color: var(--rose-deep);
  text-decoration: none;
  transition: color 0.2s ease;
}
.post .entry-title a:hover, .post .entry-title a:focus { color: var(--rose); text-decoration: underline; }
.post p { margin: 0; max-width: 46em; color: var(--color-text); }

/* Single post — a narrower reading column */
.post-content {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 40px 40px 34px;
  max-width: 900px;
  margin: 10px auto 0;
}
.post-content figure { margin: 0 0 1.8em; text-align: center; }
.post-content figure img { border-radius: var(--radius-lg); }
.post-content p { margin: 0 0 1.1em; font-size: 1.05em; line-height: 1.95; }

/* Plain pages (404) */
.page-content:not(.post-content) > p { text-align: center; font-size: 1.1em; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: 56px;
  padding: 46px 18px 30px;
  background: linear-gradient(180deg, #faf1ec 0%, var(--blush) 100%);
  border-top-left-radius: 50% 7%;
  border-top-right-radius: 50% 7%;
}

.footer-inner {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  flex-wrap: wrap;
}

.footer-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.75em;
}
.footer-navigation a {
  color: var(--color-text);
  text-decoration: none;
  font-size: 0.95em;
  font-weight: 600;
  transition: color 0.2s ease;
}
.footer-navigation a:hover,
.footer-navigation a:focus { color: var(--rose-deep); text-decoration: underline; }

.copyright p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9em;
  color: var(--color-muted);
}
.copyright p::before {
  content: "";
  width: 13px;
  height: 13px;
  background: var(--heart) center / contain no-repeat;
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  body { font-size: 16px; }
  body::before { height: 300px; border-bottom-left-radius: 50% 8%; border-bottom-right-radius: 50% 8%; }
  .page-header .entry-title { font-size: 1.85em; max-width: 100%; }
  .site-title { font-size: 1.4em; }
  .site-title::before { width: 18px; height: 18px; }
  .intro-section { padding: 26px 18px 30px; border-radius: var(--radius-lg); }
  .book-quote { padding: 24px 22px; font-size: 1.08em; border-radius: var(--radius); }
  .book-quote::before { font-size: 2.6em; right: 12px; }
  .carousel { padding: 12px 12px 10px; border-radius: var(--radius-lg); }
  .carousel-arrow { width: 38px; height: 38px; }
  .carousel-prev { left: 8px; }
  .carousel-next { right: 8px; }
  .social-cols { flex-direction: column; align-items: stretch; }
  .social-cols .col { width: 100%; }
  .social-cols .btn, .contact-buttons .btn { max-width: 100%; }
  .btn { padding: 13px 22px; }
  .btn-buy { padding: 15px 30px; margin: 6px; }
  .testimonial-cols { flex-direction: column; align-items: stretch; }
  .post { padding: 22px 20px; }
  .post .entry-title { font-size: 1.3em; }
  .post-content { padding: 24px 20px; border-radius: var(--radius-lg); }
  .footer-inner { flex-direction: column; text-align: center; }
  .copyright p { justify-content: center; }
  .site-footer { border-top-left-radius: 50% 4%; border-top-right-radius: 50% 4%; }
}

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
  .btn:hover, .btn:focus,
  .post:hover,
  .rec-card:hover,
  .testimonial-cols figure:hover { transform: none; }
}

/* ==========================================================================
   Landing page (lp-) and service pages (sv-)
   --------------------------------------------------------------------------
   Added for the 2026 restructure. Everything here reuses the :root tokens
   above - no new palette values. Namespaced with lp- / sv- prefixes because
   the landing layout needs its own section rhythm and full-bleed bands,
   which would otherwise collide with .section and .site-main.
   ========================================================================== */

/* --- header call to action ------------------------------------------------ */
.nav-cta {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 10px 20px;
  border-radius: 999px;
  background-color: var(--rose-deep);
  color: #ffffff;
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.nav-cta:hover, .nav-cta:focus {
  background-color: var(--rose);
  color: #ffffff;
  transform: translateY(-1px);
}

/* --- landing shell -------------------------------------------------------- */
.lp-main {
  flex: 1;
  width: 100%;
  min-width: 0;
}

.lp-wrap {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 18px;
}

.lp-section { padding: 64px 0; }

.lp-section-head {
  max-width: 44em;
  margin: 0 auto 38px;
  text-align: center;
}

/* --- landing typography --------------------------------------------------- */
.lp-kicker {
  display: block;
  margin-bottom: 14px;
  color: var(--rose-deep);
  font-size: 0.92em;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.lp-h1 {
  margin: 0 0 20px;
  font-size: clamp(2.3em, 5vw, 3.4em);
  font-weight: 700;
  line-height: 1.18;
  color: var(--color-heading);
}
.lp-rose { color: var(--rose); }
.lp-deep { color: var(--rose-deep); }

.lp-h2 {
  margin: 0 0 16px;
  font-size: clamp(1.7em, 3.2vw, 2.3em);
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-heading);
}

.lp-h3 {
  margin: 0 0 8px;
  font-size: 1.2em;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-heading);
}

.lp-lead {
  font-size: 1.1em;
  color: var(--color-text);
}

.lp-center { text-align: center; }

.lp-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rose-deep);
  font-weight: 700;
  text-decoration: none;
}
/* RTL: the arrow follows the reading direction, so it points leftwards. */
.lp-more::after { content: "\2190"; }

.lp-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
}

/* --- 1. hero -------------------------------------------------------------- */
.lp-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  padding-top: 34px;
  padding-bottom: 56px;
}

.lp-hero-image { position: relative; }
.lp-hero-image img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.lp-hero-note {
  position: absolute;
  inset-inline: 20px;
  bottom: 18px;
  margin: 0;
  padding: 12px 18px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  color: var(--rose-deep);
  font-size: 0.92em;
  font-weight: 600;
  text-align: center;
  box-shadow: var(--shadow-md);
}

/* --- 2. three ways in ----------------------------------------------------- */
.lp-paths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.lp-card {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-card:hover, .lp-card:focus {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.lp-card p {
  flex: 1;
  margin: 0 0 16px;
  color: var(--color-text);
}
.lp-card-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--rose-tint);
  color: var(--rose-deep);
  font-size: 1.5em;
  line-height: 1;
}

/* --- 3. + 4. two-column splits ------------------------------------------- */
.lp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}

.lp-split-media img {
  width: 100%;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.lp-split-copy p { margin: 0 0 1em; }

.lp-signature {
  margin: 22px 0 26px;
  padding-inline-start: 18px;
  border-inline-start: 3px solid var(--rose);
  color: var(--rose-deep);
  font-size: 1.05em;
  font-weight: 600;
}

.lp-book { background: var(--rose-tint); }

.lp-book-media { position: relative; }
.lp-book-media img {
  max-height: 560px;
  object-fit: cover;
  object-position: center 22%;
}
.lp-badge {
  position: absolute;
  inset-inline-start: 18px;
  top: 18px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--card);
  color: var(--rose-deep);
  font-size: 0.9em;
  font-weight: 700;
  box-shadow: var(--shadow-md);
}

.lp-checks {
  margin: 20px 0 4px;
  padding: 0;
  list-style: none;
}
.lp-checks li {
  position: relative;
  margin: 10px 0;
  padding-inline-start: 28px;
  color: var(--color-text);
}
.lp-checks li::before {
  content: "\2713";
  position: absolute;
  inset-inline-start: 0;
  color: var(--rose-deep);
  font-weight: 700;
}

/* --- 5. articles ---------------------------------------------------------- */
.lp-strip {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 26px;
  align-items: start;
}

.lp-strip-intro {
  padding: 34px 30px;
  background: var(--rose-tint);
  border-radius: var(--radius-lg);
}
.lp-strip-intro p { color: var(--color-text); }
.lp-strip-intro .btn { margin-top: 8px; }

.lp-articles {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.lp-article:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.lp-article h3 {
  margin: 0;
  font-size: 1.08em;
  font-weight: 700;
  line-height: 1.35;
}
.lp-article h3 a { color: var(--color-heading); text-decoration: none; }
.lp-article h3 a:hover, .lp-article h3 a:focus { color: var(--rose-deep); }
.lp-article p {
  margin: 3px 0 0;
  font-size: 0.94em;
  color: var(--color-muted);
}
.lp-article > .lp-more { flex: 0 0 auto; }

/* --- 6. testimonials ------------------------------------------------------ */
.lp-quotes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 30px;
}
.lp-quotes figure {
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.lp-quotes img { display: block; width: 100%; }
.lp-quote-wide { grid-column: 1 / -1; }

/* --- 7. workshops banner -------------------------------------------------- */
.lp-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.lp-banner img {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
}
.lp-banner-copy { align-self: center; padding: 44px 40px; }
.lp-banner-copy p { color: var(--color-text); }
.lp-banner-copy .btn { margin-top: 8px; }

/* --- 8. closing call to action ------------------------------------------- */
.lp-cta {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--rose-deep);
  box-shadow: var(--shadow-lg);
}
.lp-cta img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  object-fit: cover;
  object-position: center 30%;
}
.lp-cta-copy { align-self: center; padding: 44px 40px; }
.lp-cta-copy .lp-h2 { color: #ffffff; }
.lp-cta-copy .lp-kicker { color: var(--rose-tint); }
.lp-cta-copy p { margin: 0; color: #ffffff; }

/* --- reveal on scroll ----------------------------------------------------- */
/* The hidden start state applies only when JS is running, so a visitor with
   scripts disabled sees the content rather than a blank page. */
.has-js .fade-up {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.has-js .fade-up.is-visible {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   Service pages
   ========================================================================== */
.sv-lead {
  max-width: 40em;
  margin: 0 auto;
  font-size: 1.15em;
  color: var(--color-text);
  text-align: center;
}

.sv-h2 {
  margin: 0 0 14px;
  font-size: 1.5em;
  font-weight: 700;
  color: var(--color-heading);
}

.sv-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 44em;
}
.sv-list li {
  position: relative;
  margin: 10px 0;
  padding-inline-start: 26px;
  color: var(--color-text);
}
.sv-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--rose);
}

.sv-approach {
  padding: 32px 30px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.sv-approach p { margin: 0 0 1em; }

.sv-quote {
  margin: 22px 0 0;
  padding-inline-start: 18px;
  border-inline-start: 3px solid var(--rose);
  color: var(--rose-deep);
  font-weight: 600;
}

.sv-cta {
  margin: 34px 0 10px;
  padding: 30px 26px;
  background: var(--rose-tint);
  border-radius: var(--radius-lg);
  text-align: center;
}
.sv-cta p { margin: 0 0 18px; font-size: 1.08em; }

/* The promoted parents page keeps the .post-content card, so its added
   sections sit inside that rhythm rather than breaking out of it. */
.sv-page .sv-h2 { margin-top: 34px; }

/* ==========================================================================
   Landing + service responsive
   ========================================================================== */
@media (max-width: 1024px) {
  .nav-cta { display: none; }

  .lp-hero-grid,
  .lp-split,
  .lp-strip,
  .lp-banner,
  .lp-cta { grid-template-columns: 1fr; }

  .lp-hero-grid { gap: 32px; padding-bottom: 40px; text-align: center; }
  .lp-hero-copy .lp-lead { margin-inline: auto; }
  .lp-btn-row { justify-content: center; }

  .lp-paths { grid-template-columns: 1fr 1fr; }

  .lp-split { gap: 34px; }
  .lp-book-media img { max-height: 460px; }

  .lp-banner img, .lp-cta img { min-height: 280px; }
  .lp-cta-copy, .lp-banner-copy { padding: 32px 26px; text-align: center; }
  .lp-cta-copy .lp-btn-row { justify-content: center; }
}

@media (max-width: 767px) {
  .lp-section { padding: 44px 0; }
  .lp-wrap { padding: 0 14px; }

  .lp-hero-image img { border-radius: var(--radius-lg); }
  .lp-hero-note {
    inset-inline: 12px;
    bottom: 12px;
    padding: 10px 14px;
    font-size: 0.85em;
  }

  .lp-paths { grid-template-columns: 1fr; }
  .lp-card { padding: 24px 22px; }

  .lp-split-media img { border-radius: var(--radius-lg); }
  .lp-strip-intro { padding: 26px 22px; }

  .lp-article {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 20px;
  }

  .lp-quotes { grid-template-columns: 1fr; }

  .lp-banner, .lp-cta { border-radius: var(--radius-lg); }

  .sv-approach { padding: 24px 20px; }
  .sv-cta { padding: 24px 20px; }
}

/* Reduced motion: the reveal must never leave anything hidden. */
@media (prefers-reduced-motion: reduce) {
  .has-js .fade-up { opacity: 1; transform: none; transition: none; }
  .lp-card:hover, .lp-card:focus,
  .lp-article:hover,
  .nav-cta:hover, .nav-cta:focus { transform: none; }
}

/* Footer brand lockup. The logo is a full lockup (mark + name + credentials),
   so it needs enough width for the credential line to stay legible. */
.footer-brand { flex: 0 0 auto; }
.footer-brand img {
  display: block;
  width: 170px;
  height: auto;
}

@media (max-width: 767px) {
  .footer-brand { margin-inline: auto; }
  .footer-brand img { width: 140px; }
}