/* Shared Roee section: base styles, desktop card, and the approved About layout.
   All responsive rules for this component live here; edit once for every page. */

.roee-section{
    position:relative;
    background: var(--ry-bg);
    padding-block: var(--ry-pad-top) var(--ry-pad-bottom);
    overflow:hidden;
    isolation:isolate;
    /* אזור סיפור במסך מלא — התוכן ממורכז אנכית */
    min-height: var(--ry-min-h);
    display:flex;
    align-items:center;
  }

@supports (min-height: 100dvh){
.roee-section{ min-height: var(--ry-min-h-dvh, var(--ry-min-h)); }

}

.roee-section > .site-container{ width:100%; }

.roee-deco{
    position:absolute;
    z-index:0;
    pointer-events:none;
  }

.roee-arc{
    top: var(--ry-arc-y);
    right: var(--ry-arc-x);
    width: var(--ry-arc);
    height: var(--ry-arc);
    overflow:visible;
  }

.roee-arc circle{
    fill:none;
    stroke: var(--st-c1);
    stroke-width:2.5;
    stroke-dasharray: 13 18;
    opacity: var(--ry-arc-op);
    vector-effect:non-scaling-stroke;
  }

.roee-ring{
    bottom: var(--ry-ring-bottom);
    left: var(--ry-ring-x);
    width: var(--ry-circle);
    height: var(--ry-circle);
    overflow:visible;
    /* מעל התמונה, כמו הכתם — כך אפשר להגדיל אותו
       בלי שקצה התמונה יחתוך את הקו */
    z-index:3;
  }

.roee-ring circle{
    fill:none;
    stroke: rgba(255,255,255, var(--ry-ring-op));
    stroke-width:2;
    stroke-dasharray: 8 11;
    vector-effect:non-scaling-stroke;
  }

.roee-blob{
    bottom: var(--ry-blob-y);
    left: var(--ry-blob-x);
    width: var(--ry-blob);
    height: var(--ry-blob);
    border-radius:50%;
    /* מעל התמונה — כך אפשר להגדיל אותו בלי שקצה התמונה יחתוך אותו.
       הוא שקוף מאוד, ולכן לא מסתיר את רועי אלא עובר מעליו בעדינות. */
    z-index:2;
    background: rgba(255,255,255, var(--ry-blob-op));
  }

.roee-wrap{
    position:relative;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap: var(--ry-gap);
  }

.roee-photo{
    position:absolute;
    left: var(--ry-photo-x);
    bottom: var(--ry-photo-y);
    /* גובה במקום רוחב: התמונה תמיד מגיעה עד תחתית הסקשן
       ולא גולשת ממנו, בכל גובה שנבחר */
    height: calc(100% - var(--ry-photo-top));
    width:auto;
    max-width:none;
    z-index:1;
    pointer-events:none;
  }

.roee-photo img{
    width:auto;
    height:100%;
    display:block;
  }

.roee-copy{
    flex:0 1 auto;
    text-align:right;
    color:#fff;
    position:relative;
    z-index:3;
    /* ב-RTL הצד השמאלי הוא inline-END — שם עוגנת התמונה.
       התמונה מסתיימת ב-(photo-x + photo) ממש מקצה הסקשן; הקונטיינר כבר
       מתחיל אחרי הריפוד, ולכן מקזזים אותו כדי לא לשמור מקום פעמיים. */
    margin-inline-end: max(0px, calc(
      var(--ry-photo-x) + var(--ry-photo) + var(--ry-gap)
      - var(--ry-copy-overlap)
      - var(--page-padding)
      - max(0px, (100vw - var(--container-max-width)) / 2)
    ));
    margin-inline-start: var(--ry-copy-x);
    max-width: var(--ry-copy-w);
  }

.roee-title{
    margin:0;
    font-size: var(--ry-title);
    line-height: var(--ry-title-lh);
    font-weight:700;
    color:#fff;
  }

.roee-title > span{ display:block; }

.roee-title .roee-mark{
    display:inline-block;
    position:relative;
    padding-inline: var(--ry-mark-pad);
    font-size: var(--ry-mark-fs);
    font-weight:800;
    color:#fff;
    /* גראדיאנט כתום→שקוף: מלא מימין, דוהה לשקוף משמאל.
       שוחזר מ-index.backup-לפני-פוטר.html לבקשת חן. */
    background: linear-gradient(270deg,
      transparent 0%,
      var(--ry-mark-bg) 34%,
      var(--ry-mark-bg) 100%);
    /* אנימציית כניסה — נפתח מימין לשמאל, כמו .stats-mark-bar */
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .85s cubic-bezier(.22,.9,.3,1) .2s;
  }

.roee-section.is-in .roee-title .roee-mark{ transform: scaleX(1); }

.roee-title .roee-mark-line{ display:block; }

.roee-title .roee-mark > span{
    display:inline-block;
    opacity:0;
    transition: opacity .5s ease .55s;
  }

.roee-section.is-in .roee-title .roee-mark > span{ opacity:1; }

.roee-copy[data-font="script"]{
    font-family:'OhYaelLeibushor','Afek',sans-serif;
  }

.roee-copy[data-font="script"] .roee-title{
    font-weight:400;
    font-size: calc(var(--ry-title) * 1.24);
  }

.roee-copy[data-font="script"]{
    max-width: calc(var(--ry-copy-w) * 1.1);
  }

.roee-copy[data-font="script"] .roee-mark{
    font-weight:400;
    font-size: calc(var(--ry-mark-fs) * 1.24);
  }

.roee-copy[data-font="script"] .roee-mark{
    transform:none;
    transition:none;
  }

.roee-copy[data-font="script"] .roee-mark > span{
    opacity:1;
    transition:none;
  }

.roee-copy[data-font="script"] .roee-icons span{
    font-weight:400;
    font-size: calc(var(--ry-icon-label) * 1.18);
  }

.roee-icons{
    list-style:none;
    margin: var(--ry-icons-top) 0 0;
    padding:0;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap: var(--ry-icons-gap);
  }

.roee-icons li{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    text-align:center;
  }

.roee-icons img{
    width: var(--ry-icon);
    height: var(--ry-icon);
    object-fit:contain;
    display:block;
  }

.roee-icons span{
    font-size: var(--ry-icon-label);
    line-height:1.3;
    font-weight:600;
    color:#fff;
    white-space:nowrap;
  }

@media (max-width: 1200px){
.roee-section{ --ry-title: 42px; --ry-mark-fs: 42px; --ry-photo: 460px; --ry-icons-gap: 34px; }

}

@media (max-width: 900px){
.roee-section{
      --ry-title: clamp(19px, 5.4vw, 34px);
      /* ההדגשה מעט קטנה מהכותרת: השורה 'לזכרו של רועי בן
         דוד ז״ל' היא 23 תווים, ובגודל זהה הפס הכתום נגע
         בשני קצוות המסך. 5.0vw משאיר לו אוויר משני הצדדים. */
      --ry-mark-fs: clamp(18px, 5.0vw, 32px);
      --ry-icon: 40px; --ry-icon-label: 14px;
    }

.roee-section{
      min-height:0;
      display:flex;
      flex-direction:column;
      align-items:center;
    }

.roee-wrap{
      flex-direction:column;
      align-items:center;
      width:100%;
      gap: var(--gap-desc-content);
    }

.roee-photo{
      position:static;
      order:-1;
      height:auto;
      width:auto;
      max-width:min(420px, 78%);
      margin-inline:auto;
    }

.roee-photo img{
      width:100%;
      height:auto;
      max-height: 46vh;
      object-fit:contain;
      object-position:center top;
    }

.roee-copy{
      text-align:center;
      padding-inline-end:0;
      margin-inline: auto;
      max-width:100%;
      width:100%;
    }

.roee-icons{ justify-content:center; flex-wrap:wrap; }

}

@media (max-width: 560px){
.roee-section{ --ry-icons-gap: 26px; }

.roee-title > span,

    .roee-title .roee-mark-line{ white-space:nowrap; }

.roee-title .roee-mark-line{
      display:block;
      text-align:center;
    }

.roee-title .roee-mark{
      display:inline-block;
      width:fit-content;
      max-width:100%;
      margin-inline:auto;
      padding-inline: 10px;
      background: var(--ry-mark-bg);
      border-radius:3px;
    }

.roee-icons{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px 6px;
      justify-items:center;
      align-items:start;
      width:100%;
    }

.roee-icons li{
      width:100%;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:6px;
      text-align:center;
    }

.roee-section{
      --ry-icon: 38px;
      --ry-icon-label: 12.5px;
      /* --ry-pad-top הוא 120px של הדסקטופ — שם הוא מפריד
         בין ראש הסקשן לתמונה שיושבת אבסולוטית בצד. בפריסה
         המוערמת התמונה בראש הסקשן, והריפוד נראה כרווח ענק
         מעליה. */
      --ry-pad-top: 34px;
      --ry-pad-bottom: 40px;
    }

.roee-icons li span,

    .roee-icons li em,

    .roee-icons li b{
      white-space:normal;
      line-height:1.2;
      display:block;
    }

.roee-blob{ display:none; }

.roee-ring{
      display:block;
      width: 210px;
      height: 210px;
      left:auto;
      right: -96px;              /* רוב העיגול מחוץ למסך */
      bottom:auto;
      top: 34px;                 /* בגובה ראשו של רועי */
      opacity:.55;
      z-index:1;                 /* מאחורי התמונה והטקסט */
      pointer-events:none;
    }

}

@media (prefers-reduced-motion: reduce){
.roee-title .roee-mark,

    .roee-title .roee-mark > span{ transition:none; transform:none; opacity:1; }

}

.roee-cta.abt-cta{
    opacity:1;
    transform:none;
    animation:none;
    font-size:16px;
    height:46px;
    padding-inline:26px;
  }

.roee-cta.cta-btn{ margin-top: var(--ry-cta-gap); }

@media (prefers-reduced-motion: reduce){
.roee-cta.cta-btn{ transition:none; }

}

@media (max-width: 900px){
body:not(.desktop-preview) .roee-section{
      --ry-title: var(--m-title) !important; --ry-mark-fs: var(--m-title) !important;
      --ry-photo: var(--m-ry-photo) !important; --ry-icon: var(--m-ry-icon) !important;
      --ry-icons-gap: var(--m-ry-icons-gap) !important;
    }


    body:not(.desktop-preview) .roee-title{
      line-height: var(--m-title-lh) !important;
    }

}

@media (max-width: 767px){
body:not(.desktop-preview) .roee-icons{
      gap: var(--m-ry-icons-gap) !important;
    }

body:not(.desktop-preview) .roee-icons img{
      width: var(--m-ry-icon) !important;
      height: var(--m-ry-icon) !important;
    }

}

@media (max-width: 480px){

    body:not(.desktop-preview) .roee-title{
      font-size: var(--m-title-sm) !important;
    }

}



@media (min-width: 1025px){
  .roee-section.roee-card{
    position: relative;
    width: min(1453.373px, calc(100% - 80px));
    height: 453px;
    min-height: 453px;
    margin: 96px auto;
    padding: 0;
    border-radius: 50px;
    background: var(--ink, #431f10);
    overflow: hidden;
    isolation: isolate;
    display: block;
  }

  /* הכתם החום השקוף בפינה השמאלית העליונה. */
  .roee-section.roee-card::before{
    content: "";
    position: absolute;
    z-index: 0;
    left: 19px;
    top: -111px;
    width: 181px;
    height: 181px;
    border-radius: 50%;
    background: rgba(241,106,44,.10);
    pointer-events: none;
  }

  .roee-section.roee-card > .site-container{
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .roee-section.roee-card .roee-wrap{
    position: absolute;
    inset: 0;
    display: block;
  }

  /* קשת הפיגמה: נקודת הייחוס שלה היא x=47.63, y=-65.63 בתוך הכרטיס. */
  .roee-section.roee-card .roee-arc{
    z-index: 2;
    top: -65.633px;
    right: auto;
    left: 47.627px;
    width: 299.205px;
    height: 293.404px;
  }
  .roee-section.roee-card .roee-arc circle{
    fill: none;
    stroke: #8bc0e0;
    stroke-width: 3;
    stroke-dasharray: 9 13;
    opacity: .82;
    vector-effect: non-scaling-stroke;
  }
  .roee-section.roee-card .roee-ring{ display: none; }

  /* ה-Intersect התכלכל המקורי מהפיגמה, בפינה הימנית התחתונה. */
  .roee-section.roee-card .roee-blob{
    z-index: 1;
    left: auto;
    right: 0;
    bottom: 0;
    width: 230.785px;
    height: 195.815px;
    border-radius: 0;
    background: url("/assets/about/roee-decoration-bottom.svg") no-repeat 100% 100% / 100% 100%;
  }

  /* תמונת רועי המדויקת כוללת את החיתוך העליון ואת ה-fade התחתון. */
  .roee-section.roee-card .roee-photo{
    position: absolute;
    z-index: 2;
    left: 213.943px;
    bottom: 2.217px;
    width: 404.479px;
    height: 432.702px;
    max-width: none;
    pointer-events: none;
  }
  .roee-section.roee-card .roee-photo img{
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center;
  }
  .roee-section.roee-card .roee-photo picture{ display: contents; }

  .roee-section.roee-card .roee-copy{
    position: absolute;
    z-index: 4;
    top: 48.509px;
    right: 184.365px;
    width: 863px;
    max-width: 863px;
    margin: 0;
    color: #fffefb;
    text-align: right;
  }

  .roee-section.roee-card .roee-title{
    margin: 0;
    color: #fffefb;
    font-family: 'Afek', sans-serif;
    font-size: 55px;
    font-weight: 400;
    line-height: 65px;
  }
  .roee-section.roee-card .roee-title > span,
  .roee-section.roee-card .roee-title .roee-mark-line{
    display: block;
    white-space: nowrap;
  }

  .roee-section.roee-card .roee-title .roee-mark-line{
    position: relative;
    z-index: 1;
  }
  .roee-section.roee-card .roee-title .roee-mark{
    display: inline-block;
    width: fit-content;
    padding: 0 70px 2px 12px;
    color: #fffefb;
    font-size: 55px;
    font-weight: 700;
    line-height: 65px;
    background: linear-gradient(90deg,
      #f16a2c 0%,
      #f16a2c 56%,
      rgba(241,106,44,.68) 76%,
      rgba(241,106,44,0) 100%);
    border-radius: 0;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .85s cubic-bezier(.22,.9,.3,1) .12s;
  }
  .roee-section.roee-card.is-in .roee-title .roee-mark{
    transform: scaleX(1);
  }
  .roee-section.roee-card .roee-title .roee-mark > span{
    display: inline-block;
    opacity: 0;
    transition: opacity .4s ease .5s;
  }
  .roee-section.roee-card.is-in .roee-title .roee-mark > span{
    opacity: 1;
  }

  /* בדסקטופ הכרטיס תואם את גרסת האודות: שני כפתורים, ללא שורת אייקונים. */
  .roee-section.roee-card .roee-icons,
  .roee-section.roee-card > .roee-cta,
  .roee-section.roee-card .roee-copy > .roee-cta{
    display: none;
  }

  .roee-section.roee-card .roee-desktop-actions{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    margin-top: 20px;
  }
  .roee-section.roee-card .roee-action{
    height: 53.141px;
    border-radius: 30px;
    padding-inline: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fffefb;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease,
      background-color .28s ease, border-color .28s ease;
  }
  .roee-section.roee-card .roee-action:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0,0,0,.20);
  }
  .roee-section.roee-card .roee-action--read{
    min-width: 227.823px;
    background: var(--grad-accent, linear-gradient(90deg, #ff6a3d, #fb8c2e));
    border: 1px solid transparent;
  }
  .roee-section.roee-card .roee-action--join{
    min-width: 313.169px;
    background: transparent;
    border: 1px solid #fffefb;
    direction: ltr;
    flex-direction: row;
  }
  .roee-section.roee-card .roee-action--join span{ direction: rtl; }
  .roee-section.roee-card .roee-action--join:hover,
  .roee-section.roee-card .roee-action--join:focus-visible{
    background: var(--grad-accent, linear-gradient(90deg, #ff6a3d, #fb8c2e));
    border-color: transparent;
  }
  .roee-section.roee-card .roee-action svg{
    width: 28.696px;
    height: 28.696px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }
}

@media (max-width: 1024px){
  .roee-section.roee-card .roee-desktop-actions{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  .roee-section.roee-card .roee-title .roee-mark,
  .roee-section.roee-card .roee-title .roee-mark > span,
  .roee-section.roee-card .roee-action{
    transition: none;
  }
  .roee-section.roee-card .roee-title .roee-mark{
    transform: none;
  }
  .roee-section.roee-card .roee-title .roee-mark > span{
    opacity: 1;
  }
}

/* The About design is the shared design at every breakpoint. */

.roee-section.roee-card[data-roee-section]{
  margin-top: 52px;
  margin-bottom: 68px;
}

.roee-section.roee-card[data-roee-section] .roee-title .roee-mark{
  transform: none !important;
  opacity: 1 !important;
}

.roee-section.roee-card[data-roee-section] .roee-title .roee-mark > span{
  opacity: 1 !important;
}

.roee-section.roee-card[data-roee-section] .roee-title .rv-w{
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}

@media (max-width: 1024px){

  .roee-section[data-roee-section]{
    min-width: 1025px;
  }

}

@media (max-width: 1024px){

  .roee-section[data-roee-section]{
    min-width: 0;
  }

.roee-section.roee-card[data-roee-section]{
    --m-ry-icon:18px;
    position: relative;
    width: calc(100% - 29px);
    max-width: 361px;
    height: auto;
    min-height: 0;
    aspect-ratio:361 / 596.293457;
    container-type:inline-size;
    margin: 20px auto 42px;
    padding: 0;
    display: block;
    overflow: hidden;
    border-radius: 50px;
    background: #431f10;
    isolation: isolate;
  }

.roee-section.roee-card[data-roee-section]::before{
    display:none;
  }

.roee-section.roee-card[data-roee-section] > .site-container,

  .roee-section.roee-card[data-roee-section] .roee-wrap{
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    padding: 0;
    display: block;
  }

.roee-section.roee-card[data-roee-section] .roee-arc{
    display: block;
    z-index: 0;
    top: -26.86342cqw;
    right: auto;
    left: 13.37282cqw;
    width: 54.58046cqw;
    height: 64.59501cqw;
    background:url("/assets/about/roee-mobile-decoration-top.svg") no-repeat center / 100% 100%;
    /* Original Figma rotation/skew, including the SVG's overflow above its frame. */
    transform:matrix(.8057374954,.5922728777,-.6084225774,.7936132550,0,0);
    transform-origin:0 0;
    clip-path:none;
  }

.roee-section.roee-card[data-roee-section] .roee-arc circle{
    display:none;
  }

.roee-section.roee-card[data-roee-section] .roee-ring{ display: none; }

.roee-section.roee-card[data-roee-section] .roee-blob{
    display: block;
    z-index: 1;
    left: auto;
    right: 0;
    bottom: 0;
    width: 60.37495cqw;
    height: 50.52606cqw;
    border-radius: 0;
    background: url("/assets/about/roee-mobile-decoration-bottom.svg") no-repeat 100% 100% / 100% 100%;
    opacity: 1;
  }

/* 5.10.2026: רועי קטן ב-13.5% ומרוכז, כדי שייראו יותר מהשמיים סביבו —
   מעל ראשו ומשני הצדדים. המרכז האופקי לא זז, והתחתית נעצרת בדיוק מעל הטקסט. */
.roee-section.roee-card[data-roee-section] .roee-photo{
    position: absolute;
    z-index: 1;
    left: 15.5cqw;
    top: 18cqw;
    bottom: auto;
    width: 68cqw;
    height: 67.85cqw;
    max-width: none;
    margin: 0;
    overflow: hidden;
    border-radius:0;
  }

.roee-section.roee-card[data-roee-section] .roee-photo::after{
    display:none;
  }

.roee-section.roee-card[data-roee-section] .roee-photo img{
    display: block;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center top;
  }

.roee-section.roee-card[data-roee-section] .roee-copy{
    position: absolute;
    z-index: 4;
    top: 86.99366cqw;
    left: 50%;
    width: 87.92092cqw;
    max-width: none;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    color: #fffefb;
    text-align: center;
  }

.roee-section.roee-card[data-roee-section] .roee-title{
    margin: 0;
    color: #fffefb;
    font-family: 'Afek',sans-serif;
    font-size: 6.92521cqw !important;
    font-weight: 400;
    line-height: 8.31025cqw !important;
  }

.roee-section.roee-card[data-roee-section] .roee-title > span,

  .roee-section.roee-card[data-roee-section] .roee-title .roee-mark-line{
    display: block;
    white-space: nowrap;
    text-align: center;
  }

.roee-section.roee-card[data-roee-section] .roee-title .roee-mark{
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 2.22cqw .55cqw 1.94cqw;
    color: #fffefb;
    font-size: 6.92521cqw;
    font-weight: 700;
    line-height: 8.31025cqw;
    border-radius: 0;
    background: linear-gradient(90deg,#f16a2c 0%,rgba(241,106,44,0) 100%);
    transform: none;
    transition: none;
  }

.roee-section.roee-card[data-roee-section] .roee-title .roee-mark > span{
    opacity: 1 !important;
    color:#fffefb !important;
    transition: none;
  }

.roee-section.roee-card[data-roee-section] .roee-title .roee-mark{
    transform:none;
    transition:none;
  }

.roee-section.roee-card[data-roee-section] .roee-icons{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:3px;
    flex-wrap:nowrap;
    width:100%;
    margin:20px 0 0;
    padding:0;
    list-style:none;
    direction:rtl;
  }

.roee-section.roee-card[data-roee-section] .roee-icons li{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    min-width:0;
    flex:1 1 0;
    text-align:center;
  }

.roee-section.roee-card[data-roee-section] .roee-icons img{
    display:block;
    width:18px !important;
    height:18px !important;
    object-fit:contain;
  }

.roee-section.roee-card[data-roee-section] .roee-icons span{
    color:#fffefb;
    font-size:8px;
    line-height:1.05;
    font-weight:600;
    white-space:nowrap;
  }

.roee-section.roee-card[data-roee-section] .roee-desktop-actions{
    position: relative;
    left: auto;
    top: auto;
    width: 84.76cqw;
    margin: 20px auto 0;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    direction: rtl;
  }

.roee-section.roee-card[data-roee-section] .roee-action{
    height: 7.76cqw;
    min-height: 7.76cqw;
    padding: 0 2.77cqw;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 18px;
    color: #fffefb;
    font-size: 3.74cqw;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease, background-color .25s ease;
  }

.roee-section.roee-card[data-roee-section] .roee-action--read{
    width: 32.96cqw;
    min-width: 32.96cqw;
    background: var(--grad-accent);
    border: 1px solid transparent;
  }

.roee-section.roee-card[data-roee-section] .roee-action--join{
    width: 47.65cqw;
    min-width: 47.65cqw;
    direction: ltr;
    background: transparent;
    border: 1px solid #fffefb;
  }

.roee-section.roee-card[data-roee-section] .roee-action--join span{ direction: rtl; }

.roee-section.roee-card[data-roee-section] .roee-action--join:hover,

  .roee-section.roee-card[data-roee-section] .roee-action--join:focus-visible{
    background: var(--grad-accent);
    border-color: transparent;
  }

.roee-section.roee-card[data-roee-section] .roee-action svg{
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }

.roee-section.roee-card[data-roee-section] .roee-title .roee-mark,

  .roee-section.roee-card[data-roee-section] .roee-title .roee-mark > span{
    opacity:1 !important;
    color:#fffefb !important;
    filter:none !important;
    mix-blend-mode:normal !important;
    transform:none !important;
    animation:none !important;
    transition:none !important;
  }

.roee-section.roee-card[data-roee-section] .roee-title .rv-w{
    opacity:1 !important;
    color:inherit !important;
    transform:none !important;
    animation:none !important;
    transition:none !important;
  }

}

@media (min-width: 1025px){
.roee-section.roee-card[data-roee-section]{
    margin-top:40px;
    height:auto;
    min-height:0;
  }

.roee-section.roee-card[data-roee-section] > .roee-wrap{
    position:relative;
    inset:auto;
  }

.roee-section.roee-card[data-roee-section] .roee-copy{
    position:relative;
    top:auto;
    right:auto;
    margin:0 184.365px 0 auto;
    padding:80px 0;
  }

.roee-section.roee-card[data-roee-section] .roee-title,

  .roee-section.roee-card[data-roee-section] .roee-title .roee-mark{
    font-size:45px;
    line-height:55px;
  }

.roee-section.roee-card[data-roee-section] .roee-title .roee-mark{
    padding-right:0;
  }

.roee-section.roee-card[data-roee-section] .roee-photo{
    width:467px;
    height:500px;
    max-height:100%;
    bottom:0;
  }

.roee-section.roee-card[data-roee-section] .roee-photo img{
    object-fit:contain;
    object-position:center top;
  }

.roee-section.roee-card[data-roee-section] .roee-icons{
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap:18px;
    margin:40px 0 0;
    padding:0;
    list-style:none;
    direction:rtl;
  }

.roee-section.roee-card[data-roee-section] .roee-icons li{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    min-width:68px;
    text-align:center;
  }

.roee-section.roee-card[data-roee-section] .roee-icons img{
    display:block;
    width:36px;
    height:36px;
    object-fit:contain;
  }

.roee-section.roee-card[data-roee-section] .roee-icons span{
    color:#fffefb;
    font-size:13px;
    line-height:1.15;
    font-weight:600;
    white-space:nowrap;
  }

.roee-section.roee-card[data-roee-section] .roee-desktop-actions{
    margin-top:40px;
  }

.roee-section.roee-card[data-roee-section] .roee-action{
    height:46px;
    padding-inline:20px;
    gap:8px;
    font-size:20px;
  }

.roee-section.roee-card[data-roee-section] .roee-action--read{ min-width:200px; }

.roee-section.roee-card[data-roee-section] .roee-action--join{ min-width:280px; }

.roee-section.roee-card[data-roee-section] .roee-action svg{
    width:24px;
    height:24px;
  }

}

/* 17.9.2026 (ניסיון לבקשת חן): אותו אור שזורח מאחורי רועי כמו בעמוד רועי,
   כאן סביב הראש באזור החום בדף הבית ובאודות. הרקע סביב הדמות בתמונה שקוף
   למחצה רק בתוך קשת, ולכן אור מאחורי התמונה היה יוצר קו בגבול הקשת. במקום זה
   האור יושב מעל התמונה, ומסכה בצורת הצללית של רועי (roee-figure-mask.png)
   מוציאה אותו מהדמות עצמה — כך הוא אחיד מסביב ולא נוגע בפנים.
   קופסת האור רחבה מקופסת התמונה, ולכן גודל ומיקום המסכה מחושבים לפי היחס:
   20% מכל צד ו-16% מעל, תחתית משותפת. */
.roee-section.roee-card[data-roee-section] .roee-light{
  position:absolute; z-index:2; pointer-events:none;
  left:-20%; top:-16%; width:140%; height:116%;
  -webkit-mask-image:url("/assets/about/roee-figure-mask.png?v=2"), linear-gradient(#000 0 0);
          mask-image:url("/assets/about/roee-figure-mask.png?v=2"), linear-gradient(#000 0 0);
  -webkit-mask-size:71.429% 86.207%, 100% 100%;
          mask-size:71.429% 86.207%, 100% 100%;
  -webkit-mask-position:50% 100%, 0 0;
          mask-position:50% 100%, 0 0;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}
.roee-section.roee-card[data-roee-section] .roee-light::before{
  content:''; position:absolute; inset:0;
  /* עדין מאוד — על הרקע הכהה האור מורגש חזק (הוחלש בכ-60% לבקשת חן) */
  background:radial-gradient(ellipse 34% 30% at 50% 40%, rgba(255,244,222,.11) 0%, rgba(255,230,194,.07) 24%, rgba(255,218,176,.03) 48%, rgba(255,214,168,0) 70%);
  animation:roeeLightBreathe 7s ease-in-out infinite;
}
.roee-section.roee-card[data-roee-section] .roee-light__rays{
  position:absolute; left:50%; top:40%; width:120%; aspect-ratio:1;
  translate:-50% -50%;
  background:repeating-conic-gradient(from 0deg, rgba(255,238,210,0) 0deg 6deg, rgba(255,238,210,.05) 9deg 11.5deg, rgba(255,238,210,0) 14.5deg 20deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.6) 22%, transparent 46%);
          mask-image:radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.6) 22%, transparent 46%);
  filter:blur(2.5px);
  animation:roeeRaysTurn 110s linear infinite;
}
/* בטאבלט ובנייד התמונה חתוכה בקופסה בלי גלישה (object-fit:cover מלמעלה): האור
   בגודל הקופסה בדיוק, והמסכה ממלאת את הרוחב מלמעלה כמו התמונה. מתחת ל-600px
   מוצגת התמונה לנייד, ואיתה המסכה שלה. */
@media (max-width:1024px){
  .roee-section.roee-card[data-roee-section] .roee-light{
    left:0; top:0; width:100%; height:100%;
    -webkit-mask-size:100% auto, 100% 100%;
            mask-size:100% auto, 100% 100%;
    -webkit-mask-position:50% 0, 0 0;
            mask-position:50% 0, 0 0;
  }
  .roee-section.roee-card[data-roee-section] .roee-light::before{
    /* 5.10.2026: on a phone the card is small and the light at .11 was invisible.
       Same warm tone, strong enough to read as a halo around his head. */
    /* 5.10.2026: מאז שהשמיים בהירים מאחוריו, אור חלש נבלע בהם לגמרי. ההילה
       חזקה וצרה יותר, ולכן היא נקראת כטבעת סביב הראש ולא כהבהרה כללית. */
    background:radial-gradient(ellipse 40% 35% at 50% 31%, rgba(255,249,234,.88) 0%, rgba(255,238,208,.58) 24%, rgba(255,226,188,.28) 46%, rgba(255,218,176,.08) 64%, rgba(255,214,168,0) 78%);
  }
  .roee-section.roee-card[data-roee-section] .roee-light__rays{
    top:36%; width:118%;
    background:repeating-conic-gradient(from 0deg, rgba(255,238,210,0) 0deg 6deg, rgba(255,238,210,.11) 9deg 11.5deg, rgba(255,238,210,0) 14.5deg 20deg);
  }
}
@media (max-width:599px){
  /* 5.10.2026: בטלפון האור חורג מקופסת התמונה אל השמיים — טבעת שנראית סביבו
     ולא רק בתוך הריבוע שלו. קופסת האור גדולה ב-28%/24%, ולכן מסכת הצללית
     מוקטנת ומוזזת באותו יחס בדיוק (100/128 ו-100/124), כך שהיא עדיין יושבת
     על הדמות עצמה ומוציאה אותה מהאור. התמונה עצמה לא זזה. */
  .roee-section.roee-card[data-roee-section] .roee-photo{ overflow:visible; }
  /* 5.10.2026: השכבה השנייה של המסכה הייתה מלבן אטום על כל הקופסה, ולכן האור
     נמשך עד קצותיה — בדיוק במקום שבו התמונה עצמה נמוגה בצדדים. התוצאה הייתה
     שני פסים בהירים אנכיים לימין ולשמאל של רועי. עכשיו היא נמוגה בצדדים
     ובתחתית לפני הקצה, והאור נגמר בלי שום קו. */
  .roee-section.roee-card[data-roee-section] .roee-light{
    left:-14%; top:-10%; width:128%; height:124%;
    -webkit-mask-image:url("/assets/about/roee-mobile-figure-mask.png?v=2"),
      radial-gradient(ellipse 52% 54% at 50% 38%, #000 0%, #000 46%, rgba(0,0,0,.55) 68%, rgba(0,0,0,0) 92%);
            mask-image:url("/assets/about/roee-mobile-figure-mask.png?v=2"),
      radial-gradient(ellipse 52% 54% at 50% 38%, #000 0%, #000 46%, rgba(0,0,0,.55) 68%, rgba(0,0,0,0) 92%);
    -webkit-mask-size:78.125% 80.645%, 100% 100%;
            mask-size:78.125% 80.645%, 100% 100%;
    -webkit-mask-position:50% 41.67%, 0 0;
            mask-position:50% 41.67%, 0 0;
  }
  .roee-section.roee-card[data-roee-section] .roee-light::before{
    /* 5.10.2026: on a phone the card is small and the light at .11 was invisible.
       Same warm tone, strong enough to read as a halo around his head. */
    /* 5.10.2026: מאז שהשמיים בהירים מאחוריו, אור חלש נבלע בהם לגמרי. ההילה
       חזקה וצרה יותר, ולכן היא נקראת כטבעת סביב הראש ולא כהבהרה כללית. */
    background:radial-gradient(ellipse 40% 35% at 50% 31%, rgba(255,249,234,.88) 0%, rgba(255,238,208,.58) 24%, rgba(255,226,188,.28) 46%, rgba(255,218,176,.08) 64%, rgba(255,214,168,0) 78%);
  }
  .roee-section.roee-card[data-roee-section] .roee-light__rays{
    top:36%; width:118%;
    background:repeating-conic-gradient(from 0deg, rgba(255,238,210,0) 0deg 6deg, rgba(255,238,210,.11) 9deg 11.5deg, rgba(255,238,210,0) 14.5deg 20deg);
  }
}
/* 17.9.2026 (ניסיון): שמיים עדינים בכרטיס החום — אותו וידאו עננים של עמוד רועי,
   בשקיפות נמוכה ובמיזוג "screen" כך שהוא רק מבהיר מעט את החום. מהקצה השמאלי של
   הכרטיס ועד תחילת הטקסט (‎--roee-sky-w‎ נמדד ב-roee-section.js), ונמס לפני
   הטקסט ובקצה העליון והתחתון. הכרטיס חותך את הגלישה (overflow:hidden). */
.roee-section.roee-card[data-roee-section] .roee-sky{
  position:absolute; z-index:0; left:0; top:0;
  /* 17.9.2026: נוכחות מתונה (.3 — בין .22 שהיה עדין מדי ל-.5 שהיה אפור מדי),
     וגלישה של 180px אל תוך אזור הטקסט. המעבר ימינה ארוך ורך יותר, ובחלק העליון
     העננים לא נעלמים לגמרי — המעבר החד משקוף למלא יצר פס רוחבי מעל הראש. */
  width:calc(var(--roee-sky-w, 45%) + 180px); height:100%; max-width:none;
  object-fit:cover; pointer-events:none;
  /* 17.9.2026: מיזוג soft-light (כמו שכבה ב-Photoshop) — העננים מקבלים את הגוון
     החמים של החום ונראים חלק ממנו, במקום שכבה אפורה מעליו (היה screen .3).
     השוואה בין שיטות המיזוג: _lab/roee-blend.html */
  opacity:1; mix-blend-mode:soft-light;
  -webkit-mask-image:linear-gradient(to right, #000 0%, #000 30%, rgba(0,0,0,.55) 62%, transparent 100%), linear-gradient(to bottom, rgba(0,0,0,.7) 0%, #000 34%, #000 72%, transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right, #000 0%, #000 30%, rgba(0,0,0,.55) 62%, transparent 100%), linear-gradient(to bottom, rgba(0,0,0,.7) 0%, #000 34%, #000 72%, transparent 100%);
          mask-composite:intersect;
}
/* לתמונה של רועי יש רקע חום חצי-שקוף בצורת קשת. על חום אחיד לא רואים אותו,
   אבל מעל השמיים הקשת הכהה בלטה — לכן מוצגת רק הצללית של רועי (אותה מסכה של האור).
   חלק מהניסיון: כשמורידים את השמיים, מורידים גם את זה. */
/* השכבה השנייה של המסכה מעמעמת את שני צידי התמונה, כדי שקצה הקופסה בתחתית
   (ליד הכתפיים) לא ייראה כקו ישר */
.roee-section.roee-card[data-roee-section] .roee-photo img{
  -webkit-mask-image:url("/assets/about/roee-figure-mask.png?v=2"), linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image:url("/assets/about/roee-figure-mask.png?v=2"), linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-size:100% auto, 100% 100%; mask-size:100% auto, 100% 100%;
  -webkit-mask-position:50% 0, 0 0; mask-position:50% 0, 0 0;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
@media (max-width:599px){
  .roee-section.roee-card[data-roee-section] .roee-photo img{
    -webkit-mask-image:url("/assets/about/roee-mobile-figure-mask.png?v=2"), linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
            mask-image:url("/assets/about/roee-mobile-figure-mask.png?v=2"), linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-size:100% 100%, 100% 100%; mask-size:100% 100%, 100% 100%;
  }
}
/* בטאבלט ובנייד התמונה מעל הטקסט: השמיים ברוחב הכרטיס, מאחורי התמונה בלבד */
@media (max-width:1024px){
  .roee-section.roee-card[data-roee-section] .roee-sky{
    /* 5.10.2026: soft-light מעל חום כהה כמעט ולא נראה — העננים נבלעו. בטלפון
       הם מוצגים בשכבה רגילה בשקיפות חלקית, ולכן הכחול והלבן באמת נראים,
       והמסכה היא שממיסה אותם אל החום בקצוות. */
    width:100%; height:68%;
    mix-blend-mode:normal;
    opacity:.5;
    filter:saturate(1.35) contrast(1.06) brightness(1.04);
    /* 5.10.2026: השמיים מגיעים מהקצה הימני ועד הקצה השמאלי של הכרטיס. הדהייה
       הצדדית (18%/82%) הייתה מה שעצר אותם לפני הקצוות ונראה כקטע תלוש. נשארה
       רק הדהייה כלפי מטה, שממיסה אותם אל החום לפני הטקסט. */
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,.45) 78%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 0%, #000 52%, rgba(0,0,0,.45) 78%, transparent 100%);
  }
}
@keyframes roeeLightBreathe{ 0%, 100%{ opacity:.85; } 50%{ opacity:1; } }
@keyframes roeeRaysTurn{ to{ rotate:360deg; } }
@media (prefers-reduced-motion:reduce){
  .roee-section.roee-card[data-roee-section] .roee-light::before,
  .roee-section.roee-card[data-roee-section] .roee-light__rays{ animation:none; }
}
html.a11y-still .roee-section .roee-light::before,
html.a11y-still .roee-section .roee-light__rays{ animation-play-state:paused; }


/* 24.9.2026: הכרטיס החום בלי עיגולי הרקע, לבקשת חן: לא הקשת המקווקוה
   ולא רבע העיגול המלא, בכל הפריסות (המחשב וגם הכרטיס המוערם). הסלקטור
   עם data-roee-section גובר על כללי ה-display:block של הפריסה המוערמת. */
.roee-section.roee-card[data-roee-section] .roee-arc,
.roee-section.roee-card[data-roee-section] .roee-ring,
.roee-section.roee-card[data-roee-section] .roee-blob{ display:none; }

/* 24.9.2026: הדמות בכרטיס נחתכת עכשיו מהתצלום המקורי בצבע טבעי
   (assets/roei/portrait.png, עם שקיפות), במקום הגרסה הצבועה בחום שנבלעה
   בכרטיס. הפנים בגוון עור אמיתי, לא צהוב; בלי פילטר. */
.roee-section.roee-card[data-roee-section] .roee-photo img{ filter: none; }

/* 24.9.2026: גם הכתם העגול השקוף בפינה השמאלית העליונה של הכרטיס (ה-::before,
   בשתי הפריסות) הוסר, לבקשת חן. */
.roee-section.roee-card[data-roee-section]::before{ display:none; }