/*!
Theme Name: oribsn
Author: Ori Ben-Simon
Author URI: oribsn.dev
Description: Custom WordPress Theme - Gene-G
Version: 1.0.0
Text Domain: oribsn
*/

/* ==========================================================================
   Reset & Base
   ========================================================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
* { outline: none !important; box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
strong { font-weight: 600; }

/* ==========================================================================
   CSS Variables & Typography (Base 1920px)
   ========================================================================== */
:root {
    /* Colors */
    --c-primary: #9cc360;
    --c-dark: #000000;
    --c-light: #FFFFFF;
    --c-bg-gray: #F7F7F7; /* section 3 background */
    --c-text: #333333;
    
    /* Layout & Utilities */
    --trans-fast: all 0.3s ease-in-out;
    --trans-smooth: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --header-height: 5.2vw; /* ~100px at 1920px */
}

/* מוסיפים את מנגנון ה-Snap ישירות לשורש המסמך */
html {
    font-size: clamp(14px, 0.9375vw, 24px);
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory; /* הוסף את השורה הזו */
}

body {
    overflow-x: hidden; /* למניעת גלילה רוחבית מקרית */
}

body {
    font-family: acumin-pro, sans-serif;
    color: var(--c-dark);
    background-color: var(--c-light);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   Background & Overlay Utilities
   ========================================================================== */
.sec_bg {
    position: relative;
}

.bg_im {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.bg_im img, .cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* מוודא שהתוכן תמיד יושב מעל תמונת הרקע */
.sec_bg .wrap, 
.sec_bg .container {
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   Snap Scrolling Layout
   ========================================================================== */
.snap-container {
    height: auto;
    overflow-y: visible;
    scroll-snap-type: none;
}
.snap-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.snap-section {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
}
.hero-section {
   padding-top: 34vw;
}
/*
.hero-section.sec_bg .bg_im::after {
    content: '';
    display: block;
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2;
    pointer-events: none;
    
    background-image: url('assets/img/hero-bg.png');
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: 100% 100%, 100% 100%, auto;
}
*/

.container {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 5.2vw; /* ~100px side padding */
    position: relative;
    z-index: 2;
}

/* ==========================================================================
   Header Component
   ========================================================================== */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    padding: 1vw 0;
    /* חשוב: הוספנו את ה-transform לטרנזישן כדי שההעלמות תהיה חלקה בגלילה */
    transition: background-color 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
}

/* המצב החדש: כשמגיעים לפוטר (או לכל סקשן עם data-theme="hide") */
.site-header.theme-hide {
    transform: translateY(-100%); /* מחליק את ההדר למעלה מחוץ למסך */
    pointer-events: none; /* מוודא שהדר שקוף לא יפריע ללחיצות */
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Header Dynamic Themes (Controlled by JS IntersectionObserver) */
.site-header.theme-transparent {
    background-color: transparent;
    color: var(--c-light);
}




/* ==========================================================================
   Header Component
   ========================================================================== */

.header-inner {
    justify-content: space-between;
    align-items: center;
}

.logo-img {
    height: 2.61111111rem; /* 30px */
    width: auto;
    display: block;
}

/* התאמת צבע הלוגו לפי ה-Theme (בהנחה שזה SVG Inline או פילטר. לחלופין נחליף src ב-JS) */
.site-header.theme-transparent .logo-img { filter: brightness(0) invert(1); }

.header-menu {
   display: flex;
    gap: 1.6vw; /* 50px */
    align-items: center;
    margin-right: 1.6vw;
}

.header-menu li a {
    font-size: 1.2rem; /* 16px */
    font-weight: 400;
    transition: var(--trans-fast);
}

.site-header.theme-transparent .header-menu li a { color: var(--c-light); }
.site-header.theme-light .header-menu li a,
.site-header.theme-gray .header-menu li a { color: var(--c-dark); }

.header-menu li a:hover {
    color: var(--c-primary) !important;
}

/* --- Active Menu Item --- */
.header-menu li.current-menu-item > a,
.header-menu li.current_page_item > a,
.header-menu li > a.active {
    color: var(--c-primary) !important;
}

.theme-transparent li a:hover, 
.theme-transparent .header-menu li.current-menu-item > a,
.theme-transparent .header-menu li.current_page_item > a,
.theme-transparent .header-menu li > a.active {
   color: var(--c-light) !important;
}

/* כפתור בהדר */
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-light);
    border-radius: 50px;
    padding: 0.94rem 1.38rem; /* 8px 25px */
    font-size: 1.5rem; /* 16px */
    color: var(--c-light);
}

.site-header.theme-light .btn-outline,
.site-header.theme-gray .btn-outline {
    border-color: var(--c-dark);
    color: var(--c-dark);
}

.btn-outline:hover {
    background-color: var(--c-light);
    border-color: var(--c-light);
    color: var(--c-dark) !important;
}

.site-header.theme-light .btn-outline:hover, .site-header.theme-gray .btn-outline:hover {
  background-color: var(--c-dark);
  border-color: var(--c-dark);
  color: var(--c-light) !important;
}


/* ==========================================================================
   Plant Health Header Sync (Preserving Green Hover & Active States)
   ========================================================================== */

/* צבע שחור לקישורים בתפריט - אך ורק כשהם לא בריחוף ולא בעמוד האקטיבי! */
body:has(.ph-scrolly-section) .site-header .header-menu li:not(.active):not(:hover) > a,
body:has(.ph-scrolly-section) header .header-menu li:not(.active):not(:hover) > a {
    color: var(--c-dark);
}

/* צבע שחור ומסגרת שחורה לכפתור ה-Login - אך ורק כשהוא לא בריחוף! */
body:has(.ph-scrolly-section) .site-header [class*="login"]:not(:hover),
body:has(.ph-scrolly-section) header [class*="login"]:not(:hover) {
    color: var(--c-dark);
    border-color: var(--c-dark);
}

/* מוודא שטקסט פנימי בכפתור הלוגין (אם קיים) נשאר שחור במנוחה */
body:has(.ph-scrolly-section) .site-header [class*="login"]:not(:hover) *,
body:has(.ph-scrolly-section) header [class*="login"]:not(:hover) * {
    color: var(--c-dark);
}

/* ==========================================================================
   Buttons (Global)
   ========================================================================== */
.btn-pill, .btn-dark, .btn-primary {
    display: inline-flex;
    align-items: center;
    border-radius: 50px;
    padding: 0.83rem 1.66rem; /* 15px 30px */
    font-size: 1.22222222rem;
    font-weight: 500;
    font-family: inherit;
}

.btn-arrow {
    margin-left: 0.83rem;
    display: flex;
    align-items: center;
}

.btn-pill {
    background-color: var(--c-light);
    color: var(--c-dark);
}

.btn-dark {
    background-color: var(--c-dark);
    color: var(--c-light);
    padding: 0.55rem 1.38rem;
}

.btn-primary {
    background-color: var(--c-primary);
    color: var(--c-light);
    padding: 0.55rem 1.38rem;
}

.btn-pill:hover, .btn-dark:hover {
    background-color: var(--c-primary);
    color: var(--c-light);
}

/* הפיכת החץ ללבן בהובר (אם החץ שחור במקור) */
.btn-pill:hover .btn-arrow img {
    filter: brightness(0) invert(1);
}

/* ==========================================================================
   Home Page Sections
   ========================================================================== */
/* Hero Section */
.hero-content {
    max-width: 36.45vw; /* 700px */
    color: var(--c-light);
}

.hero-title {
    font-size: 3.33rem; /* 60px */
    font-weight: 600;
    margin-bottom: 0.55rem;
    line-height: 1.1;
}

.hero-subtitle {
    font-size: 1.33rem; /* 24px */
    font-weight: 300;
    margin-bottom: 2.77rem; /* 50px */
}

/* About Section */
.about-section {
    background-color: var(--c-light);
}

.about-grid {
    justify-content: space-between;
    align-items: flex-start;
}

.about-left {
    width: 40vw;
}

.section-title {
    font-size: 4.26611111rem; /* 70px */
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 1.66rem;
}

.about-right {
    width: 45vw;
    font-size: 1.44444444rem; /* 18px */
    font-weight: 300;
    line-height: 1.5;
}

.about-right p {
    margin-bottom: 1.66rem;
}

/* ==========================================================================
   Technologies Section (Section 3)
   ========================================================================== */
.tech-section {
    background-color: var(--c-bg-gray);
    /* חשוב: מבטל את ה-space-between מהסקשן הקודם כדי למרכז את התוכן פה */
}

/* דורס את הגדרות הקונטיינר הכלליות וממרכז הכל אנכית */
.tech-section .container {
    justify-content: center; 
    align-items: center;     
    display: flex;
    flex-direction: column;
    padding: 0 11.71875vw !important; /* פאדינג אחיד מוקטן */
}

/* --- Tech Header (Title & Subtitle) --- */
.tech-header {
    max-width: 55vw; /* נותן מספיק מקום לטקסט לא להישבר מוקדם מדי */
    text-align: center; /* ממרכז את הטקסט למעלה */
    margin-bottom: 5vw; /* מרווח מהאייקונים */
}

.tech-header .section-title {
    margin-bottom: 1.66rem;
}

.section-subtitle {
    font-size: 1.33rem; /* ~24px התאמה לעיצוב */
    font-weight: 300;
    line-height: 1.3;
}

/* --- Tech Grid (The 3 Columns) --- */
.tech-grid {
    display: flex;
    flex-direction: row; /* מסדר אותם אחד ליד השני */
    justify-content: space-between;
    align-items: flex-start;
    width: 100%; /* מתפרס על כל רוחב הקונטיינר */
    margin-bottom: 4vw; /* מרווח מהכפתור התחתון */
}

.tech-item {
    width: 30%; /* כל כרטיסייה לוקחת קצת פחות משליש כדי להשאיר מרווחים */
    text-align: left; /* מיישר את התוכן של כל כרטיסייה לשמאל */
}

/* --- Tech Icons & Content --- */
.tech-icon {
    height: 4.44rem; /* ~80px מרווח קבוע לאייקונים כדי שכולם יתחילו באותו קו */
    display: flex;
    align-items: flex-end; /* מצמיד את האייקונים לתחתית של האזור המוקצה להם */
    margin-bottom: 1.66rem;
}

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

.tech-title {
    font-size: 1.33rem; /* 24px */
    font-weight: 600;
    margin-bottom: 0.83rem;
    line-height: 1.2;
}

.tech-desc {
    font-size: 1rem; /* 18px */
    line-height: 1.5;
    margin-bottom: 1.5rem;
    font-weight: 300;
}

/* --- Tech Link & Hover Animation --- */
.tech-link {
    font-size: 1rem;
    font-weight: 500;
    color: var(--c-dark);
    display: inline-flex; /* שונה מ-inline-block כדי ליישר את האייקון עם הטקסט */
    align-items: center;
    transition: var(--trans-fast);
}

.tech-link:hover {
    color: var(--c-primary);
}

/* מעטפת האייקונים (פלוס וחץ) */
.tech-link .link-icon-wrap {
    position: relative;
    width: 1em;
    height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
}

/* עיצוב בסיסי משותף לפלוס ולחץ */
.tech-link .icon-plus, 
.tech-link .icon-arrow {
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-weight: 400;
}

/* מצב התחלתי: החץ שקוף ומוזז שמאלה */
.tech-link .icon-arrow {
    opacity: 0;
    transform: translateX(-0.5rem);
}

/* בהובר: הפלוס קטן ונעלם, החץ מחליק פנימה */
.tech-link:hover .icon-plus {
    opacity: 0;
    transform: scale(0.5);
}

.tech-link:hover .icon-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* --- Tech Action (Bottom Button) --- */
.tech-action {
    text-align: center; /* ממרכז את הכפתור הירוק */
    width: 100%;
}

.main-nav {display: flex;}


/* ==========================================================================
   Button Hover Animation (Arrow Fly)
   ========================================================================== */
@keyframes arrowFly {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    40% {
        transform: translateX(1.5rem); /* יוצא ימינה */
        opacity: 0;
    }
    41% {
        transform: translateX(-1.5rem); /* מועבר שמאלה כשהוא שקוף */
        opacity: 0;
    }
    100% {
        transform: translateX(0); /* נכנס חזרה למקום */
        opacity: 1;
    }
}

/* הפעלת האנימציה על כל הכפתורים בעת ריחוף */
.btn-pill:hover .btn-arrow img,
.btn-dark:hover .btn-arrow img,
.btn-primary:hover .btn-arrow img {
    animation: arrowFly 0.4s ease-in-out forwards;
}

/* חשוב: שילוב האנימציה יחד עם היפוך הצבע (ללבן) שמוגדר לכפתור ה-pill */
.btn-pill:hover .btn-arrow img, .btn-primary .btn-arrow img {
    filter: brightness(0) invert(1);
}


.btn-pill, .btn-dark, .btn-primary, .btn-outline {
    overflow: hidden; 
    transition: all 0.3s ease-in-out;
}

.btn-arrow img {
    width: 1.2rem; /* בערך 21px - תוכל לשחק עם זה טיפה כדי שיישב בול כמו בעיצוב */
    height: auto;
    display: block;
}

/* כדאי גם להוסיף את זה כדי לוודא שהחץ לא נמעך אם הטקסט בכפתור ארוך מדי */
.btn-arrow {
    flex-shrink: 0;
}


/* ==========================================================================
   About Section
   ========================================================================== */
.about-section {
    background-color: var(--c-light);
    display: flex;
    align-items: center; /* ממרכז את כל התוכן הפנימי בגובה מסך מלא */
}

/* --- Top Area (Title & Text) --- */
.about-grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 6vw; /* דוחף את אזור הירקות למטה */
}

.about-left {
    width: 38%; /* שומר על רוחב מדויק למניעת שבירה */
}

.section-title {
    font-size: 4.26611111rem; /* 70px */
    font-weight: 500;
    line-height: 1.05;
    margin-bottom: 1.66rem; /* 30px */
    letter-spacing: -0.02em; /* הידוק קל כמו בעיצוב */
}

.about-right {
    width: 48%; /* שומר על רוחב מדויק לפסקאות */
    font-size: 1.11rem; /* 20px - הגדלנו כדי שיתאים לעיצוב */
    font-weight: 300;
    line-height: 1.6;
}

.about-right p {
    margin-bottom: 1.66rem; /* 30px */
}

.about-right p:last-child {
    margin-bottom: 0;
}

/* --- Bottom Area (Vegetables & Features) --- */
.about-bottom {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end; /* מיישר את הטקסטים לתחתית התמונה */
    height: 15vw; /* גובה גמיש לאזור התחתון */
}

.about-image-wrapper {
    position: absolute;
    left: 16vw;
    bottom: -1vw;
    width: 30vw; /* שולט בגודל הירקות */
    z-index: 1;
    pointer-events: none; /* כדי שלא יפריע ללחיצות על טקסטים לידו */
}

.about-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.about-feat-left, .about-feat-right {
    position: relative;
    z-index: 2;
    padding-bottom: 2vw; /* מרים את הטקסטים טיפה מעל התחתית של הירקות */
}

.about-feat-right {
    gap: 4.5vw; /* מרווח בין שני הפיצ'רים בצד ימין */
    width: 44vw;
    display: flex;
    justify-content: space-between;
}

/* --- Feature Items & Hover Effects --- */
.feature-item {
    font-size: 1.44444444rem;
    font-weight: 500;
    color: var(--c-dark);
    display: inline-flex;
    align-items: center;
    transition: var(--trans-fast);
}

.feature-item:hover {
    color: var(--c-primary) !important;
}

/* מעטפת האייקונים (פלוס וחץ) */
.feature-item .link-icon-wrap {
    position: relative;
    width: 1em;
    height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
}

/* עיצוב בסיסי משותף לפלוס ולחץ */
.feature-item .icon-plus, 
.feature-item .icon-arrow {
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-weight: 400; /* שומר על עובי דק וקלאסי לאייקון */
}

/* מצב התחלתי: החץ שקוף ומוזז שמאלה */
.feature-item .icon-arrow {
    opacity: 0;
    transform: translateX(-0.5rem);
}

/* בהובר: הפלוס קטן ונעלם, החץ מחליק פנימה */
.feature-item:hover .icon-plus {
    opacity: 0;
    transform: scale(0.5);
}

.feature-item:hover .icon-arrow {
    opacity: 1;
    transform: translateX(0);
}

section .container {
   padding: 0 11.71875vw;
}


/* איפוס הקונטיינר הספציפי הזה כדי שנשלוט ברווחים של כל שורה בנפרד */
.about-section .container {
    padding: 0 !important; /* דורס את ה-11.7vw הגלובלי ששמת */
    height: 100vh; /* מתפרס על כל המסך */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* דוחף שורה למעלה ושורה למטה */
}

/* השורה העליונה: מקבלת את הפאדינג המוקטן ומרווח עליון גדול יותר */
.about-grid {
    padding: 0 11.71875vw;
    padding-top: 13vw; /* הגדלנו את המרווח מהחלק העליון / מההדר */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

/* השורה התחתונה: מקבלת את הפאדינג המקורי כמו הלוגו ונצמדת למטה */
.about-bottom {
    padding: 0 5.2vw;
    padding-bottom: 3vw; /* ריווח קל מתחתית המסך שלא ייחתך לגמרי */
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}

/* הפיכת חץ שחור ללבן בתוך הכפתור הכהה */
.btn-dark .btn-arrow img {
    filter: brightness(0) invert(1);
}


/* ==========================================================================
   Footer Component
   ========================================================================== */
.site-footer {
    background-color: #f3f3f3; /* האפור הבהיר מהעיצוב */
}
/* ==========================================================================
   Footer Component & Snap Fix
   ========================================================================== */
.site-footer.snap-section {
    height: auto;
    min-height: auto;
    /* במקום start, הפוטר יינעל בצורה חלקה אל תחתית המסך */
    scroll-snap-align: end; 
    /* מאפשר שחרור מהיר וחלק כשגוללים חזרה למעלה */
    scroll-snap-stop: normal; 
}
/* איפוס הקונטיינר של הפוטר */
.site-footer .container {
    height: auto; /* מחליף את ה-100vh */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* אין צורך ב-space-between כשהגובה אוטומטי */
}
/* --- Footer Top (Navs & Button) --- */
.footer-top {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding-top: 3vw; /* מרווח מהקצה העליון של הפוטר */
    padding-bottom: 9vw; /* מרווח טבעי שמפריד בין התפריטים ללוגו שלמטה */
}

.footer-navs {
    display: flex !important;
    flex-direction: row !important; /* נועל את העמודות לשורה */
    gap: 7vw; /* המרווח המדויק בין כל עמודת תפריט */
}

.footer-col {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.footer-heading {
    font-size: 0.8rem; /* ~14px - קטן ואפור כמו בעיצוב */
    color: #999999; 
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.footer-col ul li {
    margin-bottom: 0.8rem;
}

.footer-col ul li:last-child {
    margin-bottom: 0;
}

.footer-col ul li a {
    font-size: 1.16666667rem; /* ~20px - טקסט קריא וברור מול הכותרת הקטנה */
    color: var(--c-dark);
    font-weight: 400;
    transition: color 0.3s ease;
}

.footer-col ul li a:hover {
    color: var(--c-primary);
}

/* כפתור הפוטר (Client Login) */
.btn-outline-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--c-dark);
    border-radius: 50px;
    padding: 0.94rem 1.38rem;
    font-size: 1.5rem;
    color: var(--c-dark);
    transition: all 0.3s ease;
}

.btn-outline-dark:hover {
    background-color: var(--c-dark);
    color: var(--c-light);
}
/* --- Footer Bottom (Logo & Copyright) --- */
.footer-bottom {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.footer-logo img {
    height: 4vw; /* לוגו ה-G הגדול */
    width: auto;
    display: block;
}

.footer-copy {
    font-size: 0.94444444rem; /* ~16px */
    color: var(--c-dark);
    font-weight: 400;
    margin-top: 0.5vw; /* ממרכז ויזואלית מול בסיס הלוגו */
}


/* ==========================================================================
   Typewriter Effect
   ========================================================================== */
.typewriter-cursor {
    display: inline-block;
    color: var(--c-dark);
    animation: blinkCursor 0.8s step-end infinite;
}

@keyframes blinkCursor {
    from, to { opacity: 1; }
    50% { opacity: 0; }
}



/* ==========================================================================
   Card Stacking Effect (Section 3 sticky fix)
   ========================================================================== */
.tech-section {
    position: sticky;
    top: 0;
    z-index: 1; /* נשאר דבוק למעלה בזמן שגוללים הלאה */
}

/* ==========================================================================
   Plant Health Section (Section 4)
   ========================================================================== */
.plant-health-section {
    position: relative;
    z-index: 2; /* גבוה יותר מסקשן 3 כדי לעלות מעליו */
    background-color: var(--c-light);
    /* יצירת רקע הנקודות העדין ב-CSS */
    background-image: url('assets/img/plant-health-bg.png');
    background-size: auto auto;
    background-repeat: repeat;
}

/* ==========================================================================
   Plant Health Section Layout Updates
   ========================================================================== */
/* עדכון הקונטיינר שיסדר את הגריד והכפתור מלמעלה למטה */
.plant-health-section .container {
    height: 100vh;
    display: flex;
    flex-direction: column; /* הופך את כיוון הפריסה לטור */
    justify-content: center;
    padding: 0 11.71875vw !important;
}

/* --- Centered Action Button --- */
.ph-action {
    width: 100%;
    display: flex;
    justify-content: center; /* ממרכז את הכפתור אופקית ביחס לכל המסך */
}

/* הצרת הכפתור הספציפי הזה כדי שיתאים לעיצוב */
.ph-action .btn-primary {
    padding: 0.44rem 1.11rem; /* הקטנו את הריווח בצדדים כדי שיהיה צר יותר */
    font-size: 1.11rem; /* התאמה עדינה של גודל הטקסט (20px) */
}

/* --- Layout Grid --- */
.ph-grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start; /* מיישר למעלה כדי להתאים לקווי ההתקדמות */
    width: 100%;
}

.ph-left {
    width: 38%; /* הקטנה קלה כדי להגדיל חלל אמצעי */
}

/* --- Slider Layout (Replaces .ph-image-wrapper) --- */
.ph-slider-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    position: relative;
    cursor: grab; /* מסמן למשתמש שאפשר לגרור */
}

.ph-slider-wrapper img {
   border-radius: 2rem;
}

.ph-slider-wrapper:active {
    cursor: grabbing;
}

.ph-slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease-in-out;
    will-change: transform;
}

.ph-slide {
    min-width: 100%; /* כל תמונה תופסת 100% מהמסגרת */
    height: 100%;
    flex-shrink: 0;
}

.ph-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none; /* חובה כדי למנוע מבאג הגרירה המובנה של הדפדפן להפריע לסווייפ */
}


/* --- Typography & Elements (Right Column) --- */
.ph-right {
    width: 54%; /* נותן לטקסט קצת יותר מרחב */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 2vw; /* מיישר את הבלוק מול התמונה העליונה */
}

.ph-tag {
    display: inline-flex;
    align-items: center;
    background-color: #a3a3a3; /* אפור כהה יותר לפי העיצוב */
    padding: 0.3rem 0.9rem;
    font-size: 0.77rem; /* ~14px */
    font-weight: 500;
    color: #ffffff; /* טקסט לבן */
    border-radius: 50px; /* תגית כדורית */
    margin-bottom: 2rem;
    transition: var(--trans-fast);
}
.ph-tag:hover {
  background-color: var(--c-dark);
}

.ph-tag .tag-arrow {
    margin-left: 0.4rem;
    font-size: 1rem;
    font-weight: 300;
}

.ph-right .section-title {
    margin-bottom: 1.5rem;
    font-size: 4.26611111rem; /* 70px */
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.ph-desc {
    font-size: 1.11rem; /* 20px */
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 2.5rem;
    max-width: 95%; /* שובר את השורות בצורה מדויקת לעיצוב */
}

/* --- Slider Arrows (White circles with shadow) --- */
.ph-nav-arrows {
    display: flex;
    gap: 1.2rem;
    margin-bottom: 5rem; /* דוחף את הכפתור הירוק למטה כמו בעיצוב */
}

.nav-arrow {
    width: 4.22222222rem;
    height: 4.22222222rem;
    padding: 0;
    border-radius: 50%;
    border: none;
    background-color: #ffffff; /* עיגול לבן מלא */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--trans-fast);
}

.nav-arrow img {
    width: 1.5rem;
    height: auto;
    opacity: 0.8;
}

.nav-arrow:hover {
    transform: scale(1.08); /* אפקט ריחוף עדין למעלה */
}


/* --- Splide Custom Layout --- */
.ph-slider-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1; /* שומר על התמונה ריבועית */
    border-radius: 1.5rem; /* הפינות המעוגלות מהעיצוב */
    overflow: hidden;
    /* Splide מסדרת את השאר */
}

.splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* ==========================================================================
   Slider Progress Lines (Fill Animation)
   ========================================================================== */
.ph-slider-progress {
    display: flex;
    justify-content: space-between;
    align-items: center; /* חשוב כדי לשמור עליהם ממורכזים אם נשנה עובי */
    gap: 1rem;
    margin-top: 1.5rem;
}

.progress-line {
    height: 2px;
    flex: 1; /* הרוחב הרגיל של כל קו (חלק יחסי אחד) */
    background-color: #d1d1d1;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    /* הוספנו אנימציה שתחליק את ההתרחבות של הקו עצמו */
    transition: flex 0.4s ease, height 0.4s ease; 
}

/* הקו האקטיבי מקבל יותר מקום (רוחב) */
.progress-line.active {
    flex: 1.8; /* תופס פי 2.5 יותר רוחב אופקי מהקווים האחרים - שחק עם המספר הזה */
    /* height: 4px; /* <--- אם התכוונת שיהיה גם יותר *עבה*, תוכל להסיר את ההערה משורת הגובה */
}

/* הפס הפנימי שירוץ בפנים */
.progress-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--c-dark);
    transform-origin: left; /* האנימציה תתחיל מצד שמאל ותמתח ימינה */
    transform: scaleX(0); /* במצב רגיל האורך הוא 0% */
    transition: none; /* כשהוא מאבד את הקלאס - מתאפס מייד לאפס ללא אנימציה */
}

/* כשהקו פעיל: מילוי חלק של 4 שניות */
.progress-line.active::after {
    transform: scaleX(1); /* נמתח ל-100% */
    transition: transform 4s linear; 
}

.tech-section > .container, .plant-health-section > .container {
   padding-top: 7vw !important;
}


/* ==========================================================================
   Solutions Page Styles
   ========================================================================== */

/* --- Solutions Hero (Section 1) --- */
.sol-hero-section {
    background-color: var(--c-light);
    position: relative;
    height: 200vh; /* יוצר את שטח הגלילה כדי שהתמונה תעלה בזמן שהטקסט עומד */
    display: block; /* דורס את הפריסה הדיפולטיבית של הסנאפ */
    overflow: unset;
}

/* שכבת הטקסט הנדבקת */
.sol-hero-sticky {
    position: sticky;
    top: 0;
    height: 100vh; /* תופסת בדיוק מסך אחד */
    display: flex;
    z-index: 1; /* נמוך מהתמונה */
}

.sol-hero-sticky .container {
    padding-top: 10vw !important; /* מרחיק מההדר העליון */
}

/* שכבת התמונה הנגללת */
.image-scroll-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200vh; /* מתפרסת על כל הגובה של הסקשן */
    pointer-events: none; /* קריטי: מוודא שאם התמונה עוברת מעל הכפתור הירוק, עדיין תוכל להקליק עליו דרכה */
    z-index: 3; /* עולה מעל הטקסט */
}

.image-scroll-wrapper .container {
    height: 200vh;
    position: relative;
}

.sol-hero-grid {
    width: 100%;
    display: block;
}

.sol-hero-left {
    width: 100%;
    position: relative;
}

.sol-hero-left .section-title {
    font-size: 4.26611111rem; /* 70px */
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 2rem;
    letter-spacing: -0.02em;
}

.sol-hero-desc {
    font-size: 1.88888889rem; /* 22px */
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.btn-link-green {
    font-size: 1.11rem; /* 20px */
    font-weight: 500;
    color: var(--c-primary);
    transition: var(--trans-fast);
    display: inline-block;
    pointer-events: auto; /* מחזיר לחיצה לכפתור */
}

.btn-link-green:hover {
    color: var(--c-dark);
}

/* מיקום התמונה */
.sol-hero-right {
    position: absolute;
    top: 55vh; /* ממקם אותה בחצי התחתון של המסך הראשון */
    right: 8vw; 
    width: 35vw; 
    pointer-events: none;
}

.sol-hero-right img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Typewriter Cursor State --- */
.typewriter-cursor.is-typing {
    animation: none;
    opacity: 1;
}

/* --- Solutions List (Section 2 - Sticky) --- */
.sol-list-section {
    background-color: var(--c-light);
    /* בוטל ה-sticky כדי לאפשר לאקורדיונים לדחוף את העמוד למטה ולאפשר גלילה חופשית */
    position: relative;
    z-index: 2;
    /* דורס את הסנאפ הכללי כדי לאפשר גובה משתנה */
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
    display: block !important; /* דורס את הפלקסבוקס */
}

.sol-list-section .container {
    padding-top: 5vw !important;
    padding-bottom: 10vw !important; /* נותן מרווח נשימה למטה אחרי שהשורות נפתחות */
    height: auto !important;
    display: block !important; /* מבטל את המירכוז שדחף את התוכן למעלה */
}

.sol-rows-wrapper {
    width: 100%;
}

.sol-row {
    padding: 3vw 0;
}

.sol-row-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.sol-row-title {
    width: 38%;
    font-size: 2.22rem; /* 40px */
    font-weight: 600;
    line-height: 1.2;
}

.sol-row-excerpt {
    width: 48%;
    font-size: 1.16666667rem;
    font-weight: 300;
    line-height: 1.6;
}

/* Toggle Buttons */
.sol-toggle-btn {
    background: none;
    border: none;
    padding: 0;
    margin-top: 1.5rem;
    font-family: inherit;
    font-size: 1.42222222rem;
    font-weight: 500;
    color: var(--c-dark);
    cursor: pointer;
    border-bottom: 1px solid var(--c-dark);
    padding-bottom: 2px;
    display: inline-flex;
    align-items: center;
}

.sol-toggle-btn .toggle-icon {
    width: 0.8rem;
    margin-left: 0.5rem;
    transition: transform 0.4s ease;
}

.sol-row .btn-text-open { display: none; }
.sol-row.active .btn-text-closed { display: none; }
.sol-row.active .btn-text-open { display: inline-flex; align-items: center; }
.sol-toggle-btn > span {font-size: 1.23rem !important;}

.sol-row.active .toggle-icon {
    transform: rotateX(180deg);
}

/* --- Solutions List (Section 2 - Sticky) --- */
.sol-rows-wrapper {
    width: 100%;
    position: relative;
    /* ביטלנו את ה-border הרגיל */
}

/* הפס העליון שמעל הכל - מתוח לרוחב מלא */
.sol-rows-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    background-color: #cccccc; /* צבע הקו - תוכל לשנות ל-#000 אם תרצה שחור חזק */
}

.sol-row {
    position: relative;
    padding: 3.5vw 0; /* קצת יותר מרווח לנשימה */
}

/* הפס התחתון של כל שורה - מתוח לרוחב מלא */
.sol-row::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 1px;
    background-color: #dcdcdc;
}
.sol-row:last-child:after {
  display: none;
}

/* השורה הפנימית שבה התוכן */
.sol-row-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.sol-row-title {
    width: 40%;
    font-size: 2.44444444rem; /* 40px */
    font-weight: 600;
    line-height: 1.2;
}

.sol-row-excerpt {
    width: 48%;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6;
}

/* --- Toggle Buttons --- */
.sol-toggle-btn {
    background: none;
    border: none;
    padding: 0;
    margin-top: 1.5rem;
    font-family: inherit;
    font-weight: 500;
    color: var(--c-dark);
    cursor: pointer;
    border-bottom: 1px solid var(--c-dark);
    padding-bottom: 2px;
    display: inline-flex;
    align-items: center;
}

.sol-toggle-btn .toggle-icon {
    width: 0.8rem;
    margin-left: 0.5rem;
    transition: transform 0.4s ease;
}

.sol-row .btn-text-open { display: none; }
.sol-row.active .btn-text-closed { display: none; }
.sol-row.active .btn-text-open { display: inline-flex; align-items: center; }

/* כאשר השורה פתוחה, הכפתור העליון נעלם לגמרי ונותן מקום לכפתור התחתון */
.sol-row.active .toggle-open-btn { display: none; }

.sol-row.active .toggle-icon {
    transform: rotateX(180deg);
}

/* מיקום התמונה המורחבת */
.sol-row-img {
    width: 38%; /* אותו רוחב כמו הכותרת - כך שיישב בול מתחתיה */
    display: flex;
    align-items: flex-start;
}

.sol-row-img img {
    max-width: 100%; /* תופס את הרוחב הזמין */
    height: auto;
    display: block;
}

.sol-row-extra {
    width: 48%;
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6;
}

.sol-row-extra a {
  color: var(--c-primary);
}
.sol-row-extra a:hover {
  text-decoration: underline;
}

/* כשאין תמונה, sol-row-extra הוא הילד היחיד ב-wrapper — נותנים לו את כל הרוחב במקום להשאיר חלל ריק */
.sol-row-content-inner .sol-row-extra:only-child {
    margin-left: auto;
}

/* --- FAQ Section (Section 3) --- */
.sol-faq-section {
    position: relative;
    z-index: 3;
    background-color: #eaeaea;
    /* מאפשר גם ל-FAQ לגדול כשהשאלות נפתחות, ללא חיתוך התוכן */
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
    display: block !important;
}

.sol-faq-section .container {
    padding-top: 10vw !important;
    padding-bottom: 10vw !important;
    height: auto !important;
    display: block !important;
}

.faq-wrapper {
    width: 100%;
}

.faq-item {
    border-bottom: 1px solid var(--c-dark);
}

/*
.faq-item:first-child {
    border-top: 1px solid var(--c-dark);
}
*/

.faq-item:last-child {
  border-bottom: none;
}

.faq-header {
    width: 100%;
    background: none;
    border: none;
    padding: 2.5vw 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: inherit;
    color: var(--c-dark);
}

.faq-title {
    font-size: 1.88rem; /* 34px */
    font-weight: 400;
    text-align: left;
}

/* CSS Only +/- Icon */
.faq-icon {
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
}

.faq-icon::before, .faq-icon::after {
    content: '';
    position: absolute;
    background-color: var(--c-dark);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease;
}

.faq-icon::before {
    width: 1.5rem;
    height: 2px;
}

.faq-icon::after {
    width: 2px;
    height: 1.5rem;
}

.faq-item.active .faq-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.faq-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
}

.faq-content-inner {
    overflow: hidden;
    font-size: 1.11rem; /* 20px */
    font-weight: 300;
    line-height: 1.6;
    max-width: 80%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.faq-item.active .faq-content {
    grid-template-rows: 1fr;
}

.faq-item.active .faq-content-inner {
    padding-bottom: 2.5vw;
    opacity: 1;
    transition: opacity 0.5s ease 0.2s;
}

/* --- Expandable Content Area --- */
.sol-row-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sol-row-content-inner {
    min-height: 0; /* קריטי: זה מה שמכריח את התמונה להסתתר כשהשורה סגורה */
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sol-row.active .sol-row-content {
    grid-template-rows: 1fr;
}

.sol-row.active .sol-row-content-inner {
    opacity: 1;
    transition: opacity 0.5s ease 0.2s;
}

/* התמונה המורחבת (משמאל) */
.sol-row-img {
    width: 38%;
    display: flex;
    align-items: flex-start;
    padding-top: 1.5rem; /* נותן לה קצת אוויר מתחת לכותרת כשהיא מופיעה */
}

.sol-row-img img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* הטקסט הנוסף (מימין) */
.sol-row-extra {
    width: 48%; /* שומר על יישור קו מדויק לעמודה הימנית */
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6;
    /* ביטלנו את ה-padding-top כדי שהטקסט ייצמד למעלה וייראה כמו המשך ישיר של הפסקה */
}

.sol-row-extra p {
    margin-bottom: 1.5rem; /* מרווח יפה בין הטקסט לכפתור הסגירה שיושב מתחתיו */
}


/* ==========================================================================
   Contact Page Styles
   ========================================================================== */

/* --- Contact Hero (Section 1) --- */
   .contact-hero-section {
       background-color: var(--c-light);
       display: flex;
       align-items: center;
       position: relative; /* קריטי כדי שהתמונה האבסולוטית תתייחס לסקשן הזה */
       overflow: hidden; /* מוודא שאין גלילה אופקית בטעות */
   }
   
   .contact-hero-grid {
       display: flex;
       flex-direction: row;
       justify-content: flex-start; /* מצמיד את בלוק הטקסט לשמאל */
       align-items: center;
       width: 100%;
   }
   
   .contact-hero-left {
       width: 40%; /* שומר על רוחב יפה לטקסט ולרשימה */
       position: relative;
       z-index: 2;
   }
   
   /* שאר ההגדרות של הטקסט והאייקונים נשארות זהות */
   .contact-hero-left .section-title {
       font-size: 2.77rem; /* 50px */
       font-weight: 500;
       margin-bottom: 3rem;
   }
   
   .contact-details-list {
       display: flex;
       flex-direction: column;
       gap: 1.8rem;
   }
   
   .contact-details-list li {
       display: flex;
       align-items: flex-start;
       font-size: 1.88888889rem; /* 20px */
       font-weight: 300;
       line-height: 1.5;
   }
   
   .contact-detail-icon {
       width: 2rem;
       height: auto;
       margin-right: 1.2rem;
       margin-top: 0.8rem;
   }
   
   .contact-link-green {
       color: var(--c-primary);
       transition: var(--trans-fast);
   }
   
   .contact-link-green:hover {
       color: var(--c-dark);
   }
   
   .contact-link-dark {
       color: var(--c-dark);
       transition: var(--trans-fast);
   }
   
   .contact-link-dark:hover {
       color: var(--c-primary);
   }
   
   /* --- כאן הקסם של התמונה --- */
   .contact-hero-right {
       position: absolute; /* מוציא את התמונה מהגריד */
       right: -3vw; /* מצמיד לחלוטין לקצה הימני של הדפדפן */
       top: 50%;
       transform: translateY(-50%); /* ממרכז אותה אנכית */
       width: 48vw; /* תופסת כמעט חצי מסך - שחק עם זה אם תרצה אותה רחבה/צרה יותר */
       z-index: 1;
   }
   
   .contact-main-img {
       width: 100%;
       height: auto;
       display: block;
       /* התיקון הקריטי: מעגל רק את הפינות השמאליות (למעלה ולמטה) ומשאיר את הימניות ישרות */
       border-radius: 2rem 0 0 2rem; 
       object-fit: cover;
   }

/* --- Contact Form (Section 2) --- */
.contact-form-section {
    background-color: var(--c-light);
    position: relative;
    /* הגדרות גמישות כדי לאפשר גלילה אם הטופס ארוך מהמסך */
    height: auto !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 8vw 0;
}

.contact-form-grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.contact-form-left {
    width: 35%;
    position: sticky;
    top: 0; /* מאפשר לכותרת ללוות את הטופס אם גוללים בו */
}

.contact-form-left .section-title {
    font-size: 2.22rem; /* 40px */
    font-weight: 600;
}

.contact-form-right {
    width: 58%;
}

.contact-intro p {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.contact-socials {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.social-link img {
    width: 3.23rem;
    height: auto;
    transition: transform 0.3s ease;
}

.social-link:hover img {
    transform: translateY(-3px);
}

.privacy-note {
    font-size: 0.88rem; /* 16px */
    color: #666;
    margin-bottom: 4rem !important; /* מרחיק את הטופס מהפתיח */
}

/* --- CF7 Ready Form Styles --- */
.custom-contact-form {
    width: 100%;
}

.form-group {
    margin-bottom: 2.5rem;
}

.form-group label {
    display: block;
    font-size: 1.33333333rem; /* 16px */
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--c-dark);
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #cccccc; /* הקו התחתון המעוצב */
}

.input-wrapper input,
.input-wrapper textarea {
    width: 100%;
    font-family: inherit !important;
    border: none;
    background: transparent;
    padding: 0.5rem 2rem 0.5rem 0; /* משאיר מקום לאייקון מצד ימין */
    font-size: 1.88888889rem; /* 20px */
    font-family: inherit;
    font-weight: 300;
    color: var(--c-dark);
    outline: none !important;
}

.input-wrapper input::placeholder,
.input-wrapper textarea::placeholder {
    color: #b3b3b3;
    font-weight: 300;
}

/* אייקונים של השדות */
.input-icon {
    position: absolute;
    right: 0;
    bottom: 0.8rem;
    width: 2rem;
    height: auto;
    pointer-events: none; /* שלא יפריע להקלקה על השדה */
}

/* טיפול ספציפי בשדה הטלפון (עם הקידומת) */
.phone-wrapper {
    display: flex;
    align-items: center;
}

.phone-prefix {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.88888889rem;
    font-weight: 300;
    margin-right: 0.8rem;
    color: var(--c-dark);
}

.flag-icon {
    width: 1.2rem;
    height: auto;
}

.phone-wrapper input {
    padding-left: 0; /* מתחבר ישר לקידומת */
}

/* כפתור שליחה */
.form-submit-wrapper {
    margin-top: 3.5rem;
}

/* --- Contact Form Submit Button (Specific Overrides) --- */
.form-submit-wrapper button[type="submit"] {
    justify-content: space-between; /* דוחף את הטקסט לשמאל ואת החץ לימין */
    width: 15rem;
    max-width: 100%;
    height: 4.27777778rem;
    padding: 0 2.22222222rem; /* מרווח מדויק מהצדדים כדי שיישב בדיוק כמו בעיצוב */
    font-size: 1.22222222rem;
    font-weight: 600;
    /* איפוסים כהכנה ל-CF7 */
    cursor: pointer;
    font-family: inherit;
    border: none;
    -webkit-appearance: none;
    appearance: none;
}

/* ביטול המרווח הדיפולטיבי של החץ רק עבור כפתור הסאבמיט, כי ה-space-between עושה את העבודה */
.form-submit-wrapper button[type="submit"] .btn-arrow {
    margin-left: 0;
}

.input-wrapper textarea {
   height: 13rem;
}


/* ==========================================================================
   Updates Page Styles
   ========================================================================== */

/* --- Updates Hero (Tags Section) --- */
.updates-hero-section {
    background-color: var(--c-bg-gray);
    height: auto !important;
    min-height: 25rem;
    display: flex;
    align-items: center;
    padding-top: 10rem !important;
    padding-bottom: 4rem !important;
    overflow: visible !important;
}

.updates-hero-section .section-title {
    font-size: 4.375rem; 
    font-weight: 500;
    margin-bottom: 2.5rem;
}

.updates-tags-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

/* הקטנת התגיות כפי שביקשת */
.update-tag {
    background-color: var(--c-light);
    color: var(--c-dark);
    border: none;
    border-radius: 3.125rem;
    padding: 0.4rem 1.25rem; /* ~6px 20px */
    font-size: 0.875rem; /* ~14px */
    font-family: inherit;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.3s ease;
}

.update-tag:hover, .update-tag.active {
    background-color: var(--c-dark);
    color: var(--c-light);
    box-shadow: none;
}

/* --- Updates List --- */
.updates-list-section {
    background-color: var(--c-light);
    height: auto !important;
    min-height: 60vh;
    overflow: visible !important;
    padding-top: 0 !important; /* מבטל את המרווח העליון - נצמד למעלה */
    padding-bottom: 5rem !important;
}

.updates-rows-wrapper {
    width: 100%;
    position: relative;
}

/* הקו העליון שתוחם את הרשימה מלמעלה (רוחב מלא) */
.updates-rows-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 0.0625rem;
    background-color: #dcdcdc;
    z-index: 1;
}
.update-row {
    width: 100%;
    padding: 3.5rem 0;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    
    /* אנימציית סינון ללא ספריות חיצוניות */
    max-height: 40rem; /* גובה מקסימלי מספיק גדול לשורה */
    opacity: 1;
    transform: scale(1);
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                opacity 0.4s ease, 
                padding 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                transform 0.4s ease;
}

/* הקו התחתון של כל שורה */
.update-row::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 0.0625rem;
    background-color: #dcdcdc;
    transition: opacity 0.3s ease;
}

/* מצב מוסתר (בעת סינון) */
.update-row.hidden {
    max-height: 0;
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform: scale(0.95); /* מקטין טיפה את האלמנט כשהוא נעלם */
    border: none;
}

/* מעלים את הקו התחתון כשהשורה נסתרת כדי שלא יצטברו קווים */
.update-row.hidden::after {
    opacity: 0; 
}

.update-left {
    width: 40%;
    padding-right: 2rem;
}

.update-date {
    display: block;
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.update-title {
    font-size: 2.25rem; 
    font-weight: 600;
    line-height: 1.2;
}

.update-right {
    width: 48%;
    margin-top: 2rem;
}

.update-excerpt {
    font-size: 1.125rem; 
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.btn-link-green {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--c-primary);
    transition: color 0.3s ease;
    display: inline-block;
}

.btn-link-green:hover {
    color: var(--c-dark);
}

/* --- Updates Bottom Links (With Icon Swap Animation) --- */
.updates-bottom-section {
    background-color: var(--c-light);
    height: auto !important;
    padding: 6rem 0 10rem 0 !important;
    overflow: visible !important;
    text-align: center;
}

.bottom-subtitle {
    font-size: 1.125rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.bottom-links {
   display: flex;
    justify-content: center;
    gap: 3rem;
}

.bottom-link {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--c-dark);
    display: inline-flex;
    align-items: center;
    transition: color 0.3s ease;
}

/* המעטפת של האייקון */
.link-icon-wrap {
    position: relative;
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.5rem;
}

/* ה- + והחץ יושבים אחד על השני */
.icon-plus, .icon-arrow {
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* מצב התחלתי: החץ שקוף ומוזז הצידה */
.icon-arrow {
    opacity: 0;
    transform: translateX(-0.625rem);
}

/* בהובר: הצבע הופך ירוק, הפלוס נעלם, החץ מחליק פנימה */
.bottom-link:hover {
    color: var(--c-primary);
}

.bottom-link:hover .icon-plus {
    opacity: 0;
    transform: scale(0.5);
}

.bottom-link:hover .icon-arrow {
    opacity: 1;
    transform: translateX(0);
}


/* ==========================================================================
   Values Page Styles
   ========================================================================== */

/* --- Button Gray (Add to Global Buttons if not there) --- */
.btn-gray {
    display: inline-flex;
    align-items: center;
    border-radius: 3.125rem;
    padding: 0.3125rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    background-color: #a3a3a3;
    color: var(--c-light);
    transition: var(--trans-fast);
}

.btn-gray:hover {
    background-color: var(--c-dark);
    color: var(--c-light);
}

/* --- Values Hero (Section 1) --- */
.values-hero-section {
    background-color: var(--c-light);
    display: flex;
    align-items: center;
    height: auto !important; /* דורס את ה-100vh של מערכת הסנאפ */
    min-height: 0 !important;
    padding-top: 15rem !important; /* נותן ספייס מההדר הסטיקי - תוכל לשחק עם המספר */
    padding-bottom: 6rem !important;
}

.v-hero-grid {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    position: relative; /* עוגן לתמונה האבסולוטית */
}

/* שאר ההגדרות (v-hero-left, v-hero-title וכו') נשארות בדיוק אותו דבר */

.v-hero-left {
    width: 70%; /* נותן לכותרת מספיק מקום לפני שבירת השורה היזומה */
    position: relative;
    z-index: 2; /* שומר את הטקסט והכפתור מעל התמונה אם יש חפיפה */
}

.v-hero-title {
    font-size: 3.875rem;
    font-weight: 500;
    line-height: 1.1;
    margin-bottom: 2.5rem;
    letter-spacing: -0.02em;
}

/* מיקום אבסולוטי לתמונה בצד ימין */
.v-hero-right {
    position: absolute;
    right: 0;
    top: -10rem;
    width: 27rem; /* גודל קבוע לתמונה - תוכל לשחק עם המספר הזה כדי לדייק לגודל בעיצוב */
    z-index: 1;
    pointer-events: none; /* מונע מהתמונה להפריע ללחיצות במידה ויש חפיפה */
}

.v-hero-img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- Values Tabs & Table (Section 2) --- */
.values-content-section {
    background-color: var(--c-light);
    height: auto !important;
    min-height: 100vh;
    padding-top: 5rem !important;
    padding-bottom: 8rem !important;
    overflow: visible !important;
}

.v-tabs-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* התיקון הקריטי: מותח את כל הטאבים לגובה של הטאב הארוך ביותר */
    align-items: stretch; 
    margin-bottom: 5rem;
    border-bottom: 0.125rem solid #eaeaea;
}

/* מוודא שהפס המודגש נשאר תמיד למטה בקו 0 עם המסגרת האפורה */
.v-tab {
    width: 30%;
    opacity: 0.4;
    cursor: pointer;
    padding-bottom: 2.5rem;
    position: relative;
    transition: opacity 0.3s ease;
}

.v-tab::after {
    content: '';
    position: absolute;
    bottom: -0.125rem; /* יושב בול על הפס התחתון של ה-wrapper */
    left: 0;
    width: 100%;
    height: 0.125rem;
    background-color: var(--c-dark);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.v-tab.active {
    opacity: 1;
}

.v-tab.active::after {
    opacity: 1;
}

.v-tab-title {
    font-size: 2.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.v-tab-desc {
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.6;
}

/* Table */
.v-table-wrapper {
    width: 100%;
    margin-bottom: 3rem;
    position: relative; /* קריטי כדי להוות עוגן לפסאודו אלמנט */
}

/* המסגרת של Gene-G שמרחפת מעל הכל */
.v-table-wrapper::after {
    content: '';
    position: absolute;
    top: -1.5rem; /* מושך את המסגרת מעל הטבלה */
    bottom: -1.5rem; /* דוחף את המסגרת מתחת לטבלה */
    right: -0.4rem; /* מצמיד לעמודה האחרונה */
    width: 14%; /* בדיוק הרוחב של עמודת Gene-G */
    border: 0.22222222rem solid var(--c-primary); /* בורדר עבה יותר (כ-3px) */
    border-radius: 1.25rem; /* פינות מעוגלות רכות */
    pointer-events: none; /* מוודא שהמסגרת לא חוסמת לחיצות במידה ויהיו בעתיד */
    z-index: 2; /* מרים אותה מעל הרקעים של השורות */
}

.v-table-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: stretch;
    /* בוטל ה-border-bottom האופקי מהשורות הכלליות */
}

/* שורות זברה - רקע מתחלף לשורות (השורה הראשונה היא הדר, לכן שורה 3 ו-5 יהיו אפורות) */
.v-table-row:nth-child(odd):not(.v-table-header) {
    background-color: #f7f7f7; /* אפור עדין ובהיר במיוחד לשורות המתחלפות */
}

/* כותרת הטבלה */
.v-table-header {
    border-bottom: 0.0625rem solid #cccccc; /* פס אפור תחתון רק להדר */
}

.v-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.1rem 0.625rem;
    position: relative; /* קריטי כדי שהפס המפריד יתמקם נכון */
}

.v-col-name { width: 30%; align-items: flex-start; font-size: 1.125rem; font-weight: 600; }
.v-col-comp { width: 14%; font-size: 0.8125rem; font-weight: 600; text-align: center; line-height: 1.3; }

/* פסים אנכיים מפרידים (90% מגובה השורה וממורכזים) */
.v-col-comp::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    width: 1px;
    background-color: #e6e6e6; /* צבע אפור בהיר לפס האנכי */
}

/* עמודת Gene-G *//* עמודת Gene-G */
.v-col-geneg { 
    width: 14%; 
    position: relative; 
    background-color: transparent; /* שקוף לטובת שורות הזברה */
}

/* איפוס הקלאסים הישנים - אפשר גם למחוק אותם מה-HTML אם תרצה, אבל זה שומר עליהם נקיים */
.v-geneg-top, .v-geneg-bottom {
    border: none;
    border-radius: 0;
}

/* אייקונים ותמונות בטבלה */
.v-flag {
    width: 2rem;
    height: auto;
    margin-bottom: 0.5rem;
}

.v-geneg-logo {
    width: 5rem;
    height: auto;
}

.v-col-comp img, .v-col-geneg img {
    width: 1.25rem;
    height: auto;
}

.v-table-footer-text {
    font-size: 1.125rem;
    font-weight: 600;
    text-align: left;
}

.v-geneg-top img {
    width: 8rem;
}


/* --- Values Stats (Section 3) --- */
.values-stats-section {
    background-color: #f3f3f3; /* הסקשן עצמו אפור */
    height: auto !important;
    padding: 4vw 0 !important;
    overflow: visible !important;
    border-bottom: 1px solid #cccccc;
}

/* דורסים את ה-Padding הצר של הקונטיינר ומחזירים לרוחב המלא (תואם להדר) */
.values-stats-section .container {
    padding: 0 5.2vw !important;
    max-width: 100%;
}

.v-stats-box {
    display: flex;
    flex-direction: row; /* פריסה אופקית לקופסה */
    background-color: var(--c-light); /* הקופסה הפנימית לבנה */
    border-radius: 2.5rem;
    padding: 7rem 5rem;
    width: 100%;
    justify-content: space-between;
    align-items: center;
}

.v-stats-left {
    width: 35%;
}

.v-stats-title {
    font-size: 2.5rem; 
    font-weight: 600; 
    line-height: 1.1;
}

.v-stats-right {
    display: flex;
    flex-direction: row; /* פריסה אופקית למספרים */
    width: 65%;
    justify-content: space-between;
    align-items: flex-start;
}

.v-stat-item {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.v-stat-num {
    font-size: 8.88888889rem; 
    font-weight: 500; 
    line-height: 1;
    margin-bottom: 0.5rem;
    letter-spacing: -0.03em;
}

.v-stat-label {
    font-size: 1.27777778rem; 
    font-weight: 500; 
    line-height: 1.4;
}


/* ==========================================================================
   About Page Styles
   ========================================================================== */

/* --- Section 1: Vision --- */
.about-vision-section {
    background-color: var(--c-light);
    height: auto !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 10rem !important;
    padding-bottom: 5rem !important;
}

.vision-quotes {
    width: 3.5rem;
    height: auto;
    margin-bottom: 2rem;
}

.vision-text {
    font-size: 2.25rem; /* 36px */
    font-weight: 300;
    line-height: 1.4;
    color: var(--c-dark);
    margin-bottom: 2.5rem;
}

.vision-signature {
    width: 10rem;
    height: auto;
}

/* --- Section 2: Meet the Team --- */
.about-team-section {
    background-color: var(--c-bg-gray);
    height: auto !important;
    min-height: 100vh;
    padding-top: 13rem !important;
    padding-bottom: 8rem !important;
    position: relative; /* הופך לעוגן המוחלט היציב עבור התמונה */
}

.team-grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

/* Left: Title */
.team-left {
    width: 25%;
    position: sticky;
    top: 13rem; /* מתיישר בדיוק עם הפאדינג העליון של הסקשן */
    align-self: flex-start; /* קריטי כדי שהסטיקי יעבוד נכון בתוך הגריד */
    height: fit-content;
}

.team-section-title {
    font-size: 4.27777778rem; /* ~56px */
    font-weight: 500;
    line-height: 1.1;
}

/* Center: Accordion */
.team-center {
    width: 40%;
}

.team-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.team-member {
    border-bottom: none; /* למקרה שיש איפוס גלובלי */
}

.team-member-name {
    font-size: 2.5rem; /* 40px */
    font-weight: 600;
    color: var(--c-dark);
    opacity: 0.25; /* שקיפות במצב רגיל */
    margin: 0;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

/* Hover + Active State */
.team-member:hover .team-member-name,
.team-member.active .team-member-name {
    opacity: 1;
}

/* Panel Animation - סנכרון מושלם עם CSS Grid */
.team-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.team-member.active .team-panel {
    grid-template-rows: 1fr;
}

.team-panel-inner {
    min-height: 0; /* קריטי ל-Grid כדי להשלים את הסגירה */
    overflow: hidden;
    /* מעבירים את הריווח לפה עם אנימציה זהה כדי שהמגירה תיסגר לאפס מוחלט */
    padding-top: 0;
    padding-bottom: 0;
    transition: padding 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.team-member.active .team-panel-inner {
    padding-top: 1rem;
    padding-bottom: 2rem;
}

.team-role {
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 1.25rem;
    color: var(--c-dark);
}

.team-desc {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    max-width: 90%;
}

.team-linkedin {
    display: inline-block;
}

.team-linkedin img {
    width: 1.875rem; /* 30px */
    height: auto;
    transition: transform 0.3s ease;
}

.team-linkedin:hover img {
    transform: translateY(-0.1875rem);
}

/* Right Spacer Column to lock grid structure */
.team-right-spacer {
    width: 25%; /* שומר על המרווח הימני פנוי לתמונה המרחפת */
}

/* המיקום המוחלט והעצמאי של תיבת התמונות ביחס לכל הסקשן */
.team-image-wrapper {
    position: absolute;
    top: 8rem; /* מתחיל בדיוק בגובה ה-padding-top של הסקשן */
    right: 11vw; /* מתיישר במדויק עם קו הגריד הכללי וההדר */
    width: 20%; /* תופס בדיוק את רוחב העמודה הימנית */
    aspect-ratio: 3 / 4;
    background-color: #eaeaea;
    border-radius: 1.5rem;
    overflow: hidden;
    will-change: transform; /* הכנה להאצת חומרה חלקה */
    z-index: 5;
    transform: none !important;
}

.team-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.team-img.active {
    opacity: 1;
    visibility: visible;
}

/* --- Section 3: Testimonials Slider --- */
.about-testi-section {
    background-color: var(--c-primary);
    height: auto !important;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 8rem 0 !important;
}

.testimonials-slider {
    width: 100%;
}

.splide__slide {
    padding-right: 0; /* נותן מרווח נשימה לטקסט */
}

.testi-quotes {
    display: block; /* מבטיח שהמרכאות עומדות בפני עצמן בשורה */
    width: 3rem;
    height: auto;
    margin-bottom: 2.5rem;
    filter: brightness(0) invert(1); 
}

.testi-text {
    font-size: 1.44444444rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--c-light);
    margin-bottom: 3rem;
    max-width: 90%;
}

.testi-author-box {
    display: flex;
    flex-direction: column;
}

.testi-author {
    font-size: 1.44444444rem;
    font-weight: 600; /* מודגש לעיצוב */
    color: var(--c-light);
}

.testi-role {
    font-size: 1.44444444rem;
    font-weight: 400;
    color: var(--c-light);
}

/* עיצוב חיצי Splide לפי העיצוב (ממורכזים לשמאל ומתחת לטקסט) */
.about-testi-section .splide__arrows {
    display: flex;
    justify-content: flex-start; /* מצמיד לשמאל לפי העיצוב */
    gap: 1.2rem;
    margin-top: 4.5rem; /* נותן את המרווח הגדול מעל החצים */
    padding: 0; /* מאפס פאדינג דיפולטיבי אם קיים */
}

/* מבטל את המיקום האבסולוטי של החצים וקובע להם גודל וצבע */
.about-testi-section .splide__arrow {
    position: static;
    transform: none;
    width: 4.22222222rem;
     height: 4.22222222rem;
     padding: 0;
     border-radius: 50%;
     border: none;
     background-color: #ffffff; /* עיגול לבן מלא */
     display: flex;
     justify-content: center;
     align-items: center;
     cursor: pointer;
     transition: var(--trans-fast);
     opacity: 1 !important;
}

.about-testi-section .splide__arrow:hover {
    transform: scale(1.08);
}

.about-testi-section .splide__arrow img {
    width: 1.5rem;
    height: auto;
    opacity: 0.8;
}

/* --- Typewriter Cursor Blink --- */
.ph-full-typewriter .cursor {
    display: inline-block;
    font-weight: inherit;
    animation: blinkCursor 1s step-end infinite;
}

@keyframes blinkCursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}


/* ==========================================================================
   Plant Health Page Styles (Neuralink Scrollytelling - Fixed)
   ========================================================================== */

/* קריטי: שיחרור overflow מהורים כדי לאפשר ל-position: sticky לעבוד בדפדפן! */
.page_wrap, .plant_health_wrap, .ph-scrolly-section {
    overflow: visible !important;
}

/* --- Section 1: Pinned Scrollytelling Hero --- */
.ph-scrolly-section {
    position: relative;
    height: 300vh !important;
    background-color: var(--c-light);
    z-index: 1;
}

/* ה-Viewport שננעל למסך */
.ph-sticky-viewport {
    position: sticky !important;
    top: 0 !important;
    left: 0;
    width: 100%;
    height: 100vh !important;
    overflow: hidden !important;
    z-index: 2;
}

/* נקודות עצירה וירטואליות למערכת ה-Scroll Snap (שמנעו קודם את הגלילה) */
.ph-snap-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300vh;
    pointer-events: none;
    z-index: 0;
}

.ph-snap-point {
    height: 100vh;
    width: 100%;
    scroll-snap-align: start; /* יוצר 3 נקודות סנאפ בתוך ההירו ככה שאפשר לגלול חלק בין השקפים! */
}

/* בולים לסימון התקדמות */
.ph-progress-bullets {
    position: absolute;
    left: 3.5vw;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ph-bullet {
    width: 0.1875rem;
    height: 1.5rem;
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 1rem;
    transition: height 0.4s ease, background-color 0.4s ease;
}

.ph-bullet.active {
    height: 3.5rem;
    background-color: var(--c-dark);
}

/* שקפים */
.ph-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.7s ease;
    pointer-events: none;
}

.ph-slide.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 2;
}

.ph-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* שכבת התוכן */
.ph-content-layer {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    align-items: center;
}

.ph-content-layer.pos-right {
    justify-content: flex-end;
    padding-right: 5.2vw;
}

.ph-content-layer.pos-left {
    justify-content: flex-start;
    padding-left: 8vw; 
}

.ph-text-box {
    max-width: 46rem;
    margin-top: -9rem;
}
.ph-slide[data-index="2"] .ph-typewriter {
  max-width: 46rem;
}

.ph-typewriter {
    font-size: 3.25rem;
    font-weight: 500;
    line-height: 1.15;
    color: var(--c-dark);
    margin-bottom: 1.5rem;
    min-height: 3.8rem;
    letter-spacing: -0.05rem;
}

.ph-typewriter .tm-super {
    font-size: 0.7em;
    vertical-align: super;
    margin-left: 0.1rem;
    font-weight: 500;
}

.ph-typewriter .cursor {
    display: inline-block;
    font-weight: inherit;
    animation: blinkCursor 1s step-end infinite;
}

@keyframes blinkCursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.ph-desc {
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--c-dark);
}

.ph-scroll-indicator {
    position: absolute;
    bottom: 2.5rem;
    left: 5.2vw;
    z-index: 10;
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--c-dark);
}

/* --- Section 2: Full Image --- */
.ph-image-section {
    height: 100vh !important; /* גובה מסך מלא כדי שמערכת הסנאפ תנעל את הבראוזר עליו */
    min-height: 100vh !important;
    padding: 0 !important;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important; /* דוחף את התמונה בול לתחתית החלון של הבראוזר */
    width: 100%;
}

.ph-full-image-wrap {
    width: 100%;
    padding: 0 5.2vw !important; /* הריווח הקבוע של הקונטיינרים באתר (~10.4vw סך הכל) */
    margin: 0 auto;
}

.ph-full-img {
    width: 100%;
    height: auto;
    max-height: 85vh; /* הגנה חכמה: מוודא שלפחות 15% מהמסך למעלה נשאר פנוי ולא מסתיר את ההדר בלפטופים */
    object-fit: contain;
    object-position: bottom; /* מצמיד את התמונה לתחתית במידה והיא הוקטנה על ידי ה-max-height */
    display: block;
    margin: 0 auto;
}

/* --- Section 3: Pricing Tiers (Exact Design Match) --- */
.ph-pricing-section {
    background-color: #fbfbfa;
    height: auto !important;
    min-height: 100vh;
    padding: 8rem 0 !important;
    display: flex !important;
    align-items: center !important;
    width: 100%;
}

.ph-pricing-container {
    width: 100%;
    max-width: 100% !important;
    padding: 0 5.2vw !important; /* ריווח צדדי מדויק לפי הגריד הראשי */
    margin: 0 auto;
}

.pricing-title {
    font-size: 3.5rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 5.5rem;
    color: var(--c-dark);
    width: 100%;
}

/* הגריד המרכזי של המחירים */
.pricing-grid {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 2.5rem !important; /* רווח מדויק וקבוע בין העמודות */
    width: 100% !important;
}

/* עיצוב כרטיס בודד - צר יותר ומדויק */
.pricing-card {
    width: 28.5vw !important; /* מצר את העמודות ומאזן מול הריווח הכללי */
    max-width: 26rem;
    background-color: #ffffff;
    border: 0.0625rem solid #e6e6e6;
    border-radius: 2rem;
    padding: 3.5rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.02);
}

.pricing-card:hover {
    transform: translateY(-0.4rem);
    box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.06);
}

/* מסגרת ירוקה מודגשת לכרטיס ה-VIP האמצעי */
.pricing-card.featured {
    border: 0.125rem solid var(--c-primary);
    background-color: #fdfefd;
}

.tier-top {
    display: flex;
    flex-direction: column;
}

.tier-name {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 2.5rem;
    color: var(--c-dark);
}

.tier-name .tm-super {
    font-size: 0.4em;
    vertical-align: super;
    margin-left: 0.1rem;
    font-weight: 500;
}

.tier-name strong {
    font-size: 2.375rem;
    font-weight: 600;
    color: #000000;
}

/* רשימת הפיצ'רים עם קווי הפרדה */
.tier-features {
    margin: 0 0 6.5rem 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.tier-features li {
    font-size: 1.4rem; /* ~18px - גדול וברור יותר */
    font-weight: 500; /* משקל עבה ויציב יותר (Medium) */
    color: #111111; /* שחור חזק וקריא */
    display: flex;
    align-items: center;
    padding: 1.125rem 0;
    border-bottom: 0.0625rem solid #e0e0e0; /* קו הפרדה ברור לפי העיצוב */
    line-height: 1.4;
}

/* הסרת קו ההפרדה מהשורה האחרונה ברשימה */
.tier-features li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* תמונת הצ'ק המעוצבת */
.check-img {
    width: 1.25rem !important; /* ~20px */
    height: 1.25rem !important;
    min-width: 1.25rem;
    margin-right: 1rem;
    object-fit: contain;
    display: inline-block;
}

/* לינק תחתון */
.tier-link {
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--c-primary);
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
    margin-top: auto;
}

.tier-link:hover {
    color: var(--c-dark);
    transform: translateX(0.25rem);
}


/* Contact Form 7 Reset & Styling */
.gene-cf7-wrapper form.wpcf7-form {
    margin: 0;
    padding: 0;
}
.gene-cf7-wrapper input,
.gene-cf7-wrapper textarea {
    width: 100% !important;
    box-sizing: border-box;
}

/* Terms Checkbox Styling */
.form-terms-group {
    margin-top: 15px;
    margin-bottom: 25px;
}

.terms-label {
    gap: 10px;
    font-size: 14px;
    font-weight: 400 !important; /* מוודא שהטקסט בולט/רזה ולא ב-Bold */
    color: #333;
    cursor: pointer;
}

.terms-label a {
    text-decoration: underline;
    color: inherit;
    font-weight: 400; /* מוודא שגם הלינק לא ב-Bold */
}

/* איפוס הצ'קבוקס הדיפולטיבי ועיצוב קוביה מותאמת אישית */
.terms-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #fff;
    margin: 0;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* מצב מסומן - רקע ירוק (שנה להקס של התבנית) + שילוב SVG של וי לבן */
.terms-label input[type="checkbox"]:checked {
    background-color: var(--c-primary); /* <-- שנה כאן לירוק המדויק של התבנית */
    border-color: var(--c-primary);     /* <-- שנה גם כאן לאותו ירוק */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 7.5L6 10.5L11 3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
}

/* CF7 Validation & Alert Messages */
.wpcf7-not-valid-tip {
    color: #d32f2f;
    display: block;
}
.wpcf7-response-output {
    margin: 20px 0 0 0 !important;
    padding: 12px 15px !important;
    border-radius: 4px;
    font-size: 14px;
}

.wpcf7-form-control-wrap {
  width: 100%;
  position: static;
}
.form-terms-group {
  position: relative;
}
.wpcf7-not-valid-tip {
  position: absolute;
  left: 0;
  font-size: 1.1rem;
  margin-top: 0.4rem;
}
.wpcf7-list-item {
    margin: 0.5rem 0 0 0;
}

.wpcf7-response-output {
  display: none !important;
}
.form-submit-wrapper {
  display: inline-block;
  position: relative;
}
.wpcf7-spinner {
  position: absolute !important;
  margin: 0 !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.wpcf7-list-item {
    position: relative;
    margin: 0;
    top: 0.3rem;
    margin-right: 0.3rem;
}


/* ==========================================================================
   Thank You Page Styling
   ========================================================================== */
.thank-you-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
}

.thank-you-grid {
    width: 100%;
    justify-content: center;
    align-items: center;
}

.thank-you-box {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.thank-you-box .ty-title {
    margin-bottom: 1.5rem;
}

.thank-you-box .ty-desc {
    margin-bottom: 2.5rem;
}

.thank-you-box .ty-desc p {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

.ty-btn-wrapper {
    display: flex;
    justify-content: center;
}

.ty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-width: 200px;
    padding: 15px 25px;
    text-decoration: none;
}

.ty-btn .btn-arrow {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    display: flex;
    align-items: center;
    margin: 0;
}


/* ==========================================================================
   Green Text Links Hover Effect (+ to →)
   ========================================================================== */
.btn-link-green {
    display: inline-flex;
    align-items: center;
    color: var(--c-primary);
    transition: color 0.3s ease;
}

.btn-link-green:hover {
    color: var(--c-dark) !important;
}

.btn-link-green .link-icon-wrap {
    position: relative;
    width: 1em;
    height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.4rem;
}

.btn-link-green .icon-plus, 
.btn-link-green .icon-arrow {
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-weight: 400; /* שומר על אייקון דק ואלגנטי */
}

/* מצב התחלתי - חץ שקוף ומוזז שמאלה */
.btn-link-green .icon-arrow {
    opacity: 0;
    transform: translateX(-0.5rem);
}

/* Hover - הפלוס קטן ונעלם, החץ מחליק פנימה */
.btn-link-green:hover .icon-plus {
    opacity: 0;
    transform: scale(0.5);
}

.btn-link-green:hover .icon-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================================================
   Solutions Page: FAQ Overlay Effect (Card Stacking) — REMOVED
   ========================================================================== */

/* This sticky + high z-index "climb over" effect broke whenever an accordion
   row expanded to more than one viewport's height: the sticky list section
   stayed pinned at top:0, so the newly revealed (bottom of the) accordion
   content fell below the visible slice and could never be scrolled to before
   the FAQ section covered it. Removed in favor of normal, reliable stacking —
   .sol-list-section and .sol-faq-section now use their base position/z-index
   rules further up in this file (position: relative, z-index: 2 / 3). */

/* ==========================================================================
   Plant Health: Clickable Scrollytelling Indicators
   ========================================================================== */

/* 1. הפיכת הקווים האנכיים ללחיצים עם אזור מגע מוגדל */
.ph-progress-bullets .ph-bullet {
    cursor: pointer !important;
    position: relative;
    transition: all 0.3s ease;
}

/* הגדלת אזור הלחיצה השקוף סביב הקו הדק (מצוין למובייל ולדיוק בעכבר) */
.ph-progress-bullets .ph-bullet::after {
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -15px;
    right: -15px;
}

/* אינדיקציה ויזואלית בעת מעבר עכבר על קו לא פעיל */
.ph-progress-bullets .ph-bullet:not(.active):hover {
    background-color: #888888 !important;
    transform: scaleX(1.5); /* עיבוי קל לזיהוי */
}

/* 2. הפיכת כפתור ה-Scroll ↓ ללחיץ ומזמין */
.ph-scroll-indicator {
    cursor: pointer !important;
    display: inline-block;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.ph-scroll-indicator:hover {
    transform: translateY(5px); /* תזוזה עדינות למטה שמסמנת כיוון גלילה */
    opacity: 0.7;
}


/* ==========================================================================
   Plant Health: Pricing Cards Hover Border & Typography Precision
   ========================================================================== */

/* --- 1. כרטיסיית התמחור: גבול שקוף בשגרה, מסגרת ירוקה אך ורק ב-Hover --- */
.pricing-card {
    background-color: #ffffff;
    border: 2px solid transparent !important; /* מונע קפיצת פיקסלים ומסתיר מסגרת בשגרה */
    border-radius: 24px; /* עיגול פינות מדויק וחלק כמו בעיצוב */
    padding: 2.5rem 2rem;
    transition: all 0.3s ease !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03); /* צללית רקע בסיסית ועדינה */
}

/* ביטול מסגרת קבועה במידה והייתה מוגדרת לקלאס featured */
.pricing-card.featured {
    border-color: transparent !important;
}

/* אפקט ההאבר - המסגרת הירוקה נדלקת + הרמה אלגנטית של הכרטיסייה */
.pricing-card:hover,
.pricing-card.featured:hover {
    border-color: var(--c-primary) !important; /* הירוק המדויק של המותג (או var(--c-primary)) */
    box-shadow: 0 15px 40px rgba(124, 193, 66, 0.12) !important;
    transform: translateY(-6px); /* מיקרו-אינטראקציה יוקרתית */
}


/* --- 2. דיוק משקלים וגדלי טיפוגרפיה (לפי 1rem = 18px בדסקטופ) --- */
@media only screen and (min-width: 769px) {
    
    /* כותרת המשנה הקטנה מעל החבילה (למשל PlantHealth™) - 30.93px במשקל דק */
    .tier-name {
        font-size: 1.7183rem !important;
        font-weight: 600 !important;
        color: #555555;
        margin-bottom: 0.5rem;
    }

    /* שם החבילה המרכזי (Express VIP) - 51.2px במשקל בולט וחזק */
    .tier-name strong,
    .tier-name b {
        display: block;
        font-size: 2.8444rem !important;
        font-weight: 700 !important;
        color: #000000;
        margin-top: 0.2rem;
    }

    /* רשימת הפיצ'רים עם הצ'קמרק הירוק - 25.6px במשקל קריא ונקי */
    .tier-features li {
        font-size: 1.4222rem !important;
        font-weight: 500 !important;
        line-height: 1.6;
        color: #222222;
        padding: 0.8rem 0;
        border-bottom: 1px solid #f2f2f2; /* קו הפרדה עדין מאוד בין השורות לפי העיצוב */
        display: flex;
        align-items: center;
        gap: 12px;
    }

    /* הקישור בתחתית הכרטיסייה (Learn more about Express →) */
    .tier-link {
        font-size: 1.1850rem !important; /* 21.33px */
        font-weight: 500 !important;
        color: var(--c-primary) !important;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        margin-top: 2rem;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .tier-link:hover {
        opacity: 0.8;
        transform: translateX(4px); /* החלקה עדינה של החץ קדימה */
    }
    .btn-outline, .btn-outline-dark {
      padding: 0.33rem 0.86rem;
      font-size: 1.1256rem;
    }
    .tech-header .section-title {
        text-align: left;
    }
}


/* ==========================================================================
   Our Values: Hero Down Push, Black Tabs & Right-Edge Line
   ========================================================================== */


.values-content-section {
    padding-top: 7rem !important;
}

/* 2. עיצוב הטאבים ומרווח תחתון שידחף את הטבלה אל מחוץ למסך הראשוני */
.v-tabs-wrapper {
    position: relative;
    margin-bottom: 6rem !important;
    padding-bottom: 0.125rem !important;
    border-bottom: 1px solid #d0d0d0 !important; /* הקו התחתון של הטאבים */
}

/* משיכת הקו התחתון עד לקצה הימני של המסך (לפי ההערה של מנחם) */
.v-tabs-wrapper::after {
    content: '';
    position: absolute;
    bottom: -1px;
    right: 50%;
    transform: translateX(50%);
    width: 100vw;
    height: 1px;
    background-color: #d0d0d0 !important;
}

/* 3. מצב בסיסי בטעינה (סקשן 1) - כל הטאבים בשחור מוחלט וקריא לחלוטין! */
.v-tab {
    opacity: 1 !important;
    color: #000000 !important;
    cursor: pointer;
    transition: opacity 0.3s ease, color 0.3s ease !important;
}

.v-tab-title,
.v-tab-desc {
    color: #000000 !important; /* דריסה של כל אפור או שקיפות שהיו קודם */
}

/* 4. האפקט של "טאב לא נבחר" עובד אך ורק כשגוללים לסקשן השני (הטבלה) */
.v-tabs-wrapper.tabs-scrolled-state .v-tab:not(.active) {
    opacity: 0.35 !important; /* הדהייה עדינה לטאב הלא פעיל */
}

.v-tabs-wrapper.tabs-scrolled-state .v-tab:not(.active) .v-tab-title,
.v-tabs-wrapper.tabs-scrolled-state .v-tab:not(.active) .v-tab-desc {
    color: #777777 !important;
}


/* ==========================================================================
   Our Values: Section 2 Top Spacing & Tab Panels Layout
   ========================================================================== */

/* 1. ריווח עליון משמעותי כדי להרחיק את סקשן 2 מהתפריט העליון בדיוק כמו שמנחם ביקש */
.values-content-section {
    padding-top: 8.5rem !important; /* מרחק נשימה גדול ואלגנטי מההדר המקובע */
    padding-bottom: 6rem !important;
}

/* 2. ניהול תצוגת הפאנלים (רק פאנל אקטיבי מוצג) */
.v-panels-container {
    position: relative;
    width: 100%;
    margin-top: 3.5rem;
}

.v-panel-item {
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.v-panel-item.active {
    display: block;
    opacity: 1;
    animation: fadeInPanel 0.5s ease forwards;
}

@keyframes fadeInPanel {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 3. עיצוב הגריד של טאבים 1 ו-2 (כותרת + טקסט משמאל, תמונה מימין) */
.v-panel-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4rem;
}

.v-panel-left {
    flex: 1;
    max-width: 49.47916667vw;
}

.v-panel-right {
    flex: 1;
    max-width: 23.47916667vw;
}

.v-panel-img {
    width: 100%;
    height: auto;
    border-radius: 20px; /* פינות עגולות ויפהפיות לתמונה המרובעת */
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    display: block;
}

/* 4. דיוק טיפוגרפיה לפאנלים בדסקטופ (לפי הסולם שלנו 1rem = 18px) */
@media only screen and (min-width: 769px) {
    .v-panel-title {
        font-size: 2.8444rem !important; /* ~51.2px (כמו Results Reliabilit_) */
        font-weight: 400 !important;
        margin-bottom: 1.5rem;
        line-height: 1.1;
        color: #000000;
    }

    .v-panel-desc p {
        font-size: 1.1850rem !important; /* ~21.33px */
        line-height: 1.6;
        font-weight: 300 !important;
        color: #444444;
        margin-bottom: 1.2rem;
    }
}


/* ==========================================================================
   Home Page: Unified Floating Button (Tech + Plant Health)
   ========================================================================== */

/* הסתרת הכפתורים המקוריים שלא נצטרך יותר */
.tech-action, .ph-action {
    display: none !important;
}

/* מעטפת הכפתור המרחף - מקובעת למסך */
.unified-floating-wrapper {
    position: fixed;
    bottom: 2.22222222rem;
    left: 0;
    width: 100%;
    z-index: 50; /* קריטי: מעל זד-אינדקס 2 של סקשן Plant Health */
    display: flex;
    justify-content: center;
}
.btn-floating-dynamic {
  opacity: 0;
  visibility: hidden;
}
/* מצב גלוי */
.btn-floating-dynamic.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ==========================================================================
   Single Article Page (single.php) — long-form content, no snap-scroll
   ========================================================================== */
.article_wrap {
    overflow: visible;
}

.article-container {
    max-width: 64rem;
    margin: 0 auto;
    width: 100%;
}

/* --- Header (date + title) --- */
.article-hero-section {
    padding-top: 10rem;
    padding-bottom: 2rem;
}

.article-date {
    display: block;
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 1rem;
}

.article-title {
    font-size: 3.55555556rem; /* ~64px */
    font-weight: 600;
    line-height: 1.15;
    color: var(--c-dark);
}

.article-excerpt {
    font-size: 1.35rem;
    font-weight: 300;
    line-height: 1.55;
    color: #333333;
    margin-top: 2rem;
}

.article-featured-image {
    max-width: 45rem;
    margin: 2.5rem 0 0;
}

.article-featured-image img {
    width: 100%;
    height: auto;
    border-radius: 0;
    display: block;
}

/* --- Body content (rendered from the default WP content field) --- */
.article-body-section {
    padding-bottom: 6rem;
}

.article-content > *:first-child {
    margin-top: 0;
}

.article-content p {
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.6;
    color: #444444;
    margin-bottom: 1.5rem;
}

.article-content h2 {
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--c-dark);
    margin: 3rem 0 1.25rem;
}

.article-content h3 {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--c-dark);
    margin: 2.5rem 0 1rem;
}

.article-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.6rem;
    display: block;
    margin: 0.5rem 0 2.5rem;
}

.article-content a {
    color: var(--c-primary);
    font-weight: 500;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.article-content a:hover {
    color: var(--c-dark);
}

.article-content ul,
.article-content ol {
    margin: 0 0 1.5rem 1.4rem;
}

.article-content ul li {
    list-style: disc;
}

.article-content ol li {
    list-style: decimal;
}

.article-content li {
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.6;
    color: #444444;
    margin-bottom: 0.5rem;
}

.article-content blockquote {
    border-left: 3px solid var(--c-primary);
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #333333;
}

/* ==========================================================================
   Global Badge Pill CTAs (Gray to Black, + to → on the right)
   ========================================================================== */
.badge-pill-cta {
    display: inline-flex;
    align-items: center;
    background-color: #a3a3a3 !important; /* האפור מהפלטה המקורית */
    color: #ffffff !important; /* טקסט לבן שיהיה קריא על האפור והשחור */
    border-radius: 50px;
    padding: 0.4rem 0.9rem 0.4rem 1.2rem;
    font-size: 0.95rem; /* ~14px בדסקטופ */
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease !important;
    text-decoration: none;
    border: none;
}

/* אפקט ההאבר - הרקע הופך לשחור והכפתור מתרומם קלות */
.badge-pill-cta:hover {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* מעטפת האייקונים (ממוקמת מימין לטקסט) */
.badge-pill-cta .link-icon-wrap {
    position: relative;
    width: 1em;
    height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.4rem; /* הריווח שדוחף את האייקון לימין הטקסט */
    margin-right: 0;
    position: relative;
    top: -0.05rem;
}

/* עיצוב בסיסי משותף לפלוס ולחץ (שניהם לבנים) */
.badge-pill-cta .icon-plus, 
.badge-pill-cta .icon-arrow {
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-weight: 400;
    color: #ffffff !important; 
}

/* מצב התחלתי: החץ שקוף ומוזז שמאלה */
.badge-pill-cta .icon-arrow {
    opacity: 0;
    transform: translateX(-0.5rem);
}

/* בהובר: הפלוס קטן ונעלם, החץ מחליק פנימה והחוצה למקום */
.badge-pill-cta:hover .icon-plus {
    opacity: 0;
    transform: scale(0.5);
}

.badge-pill-cta:hover .icon-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================================================
   Plant Health: Highlight Scroll Section & Stacking Fix
   ========================================================================== */

/* 1. ההירו - השכבה התחתונה ביותר */
.ph-scrolly-section {
    z-index: 1 !important; 
}

/* 2. שכבת הטקסט הצבוע - עולה מעל ההירו */
.ph-highlight-section {
    position: relative;
    height: 400vh !important; /* אורך גלילה שמספיק גם לצביעה וגם להחלקת התמונה */
    background-color: var(--c-light) !important;
    z-index: 2 !important; 
    display: block !important;
    overflow: visible !important;
}

.ph-highlight-sticky {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* ננעל בדיוק בגובה המסך */
    display: flex;
    align-items: center;
    justify-content: center;
}

.ph-highlight-text {
    font-size: 2.13333333rem;
    font-weight: 300;
    line-height: 1.2;
    max-width: 62%;
    margin: 0 auto;
    letter-spacing: -0.02em;
}

/* המשפט הראשון נצבע בירוק המותג במקום שחור */
.ph-highlight-text span.hl-green.active {
    color: var(--c-primary);
}

/* מצב ברירת המחדל של המילים (אפור) */
.ph-highlight-text span {
    color: #e0e0e0;
    transition: color 0.1s ease-out; 
}

/* המצב הצבוע (הסקריפט מוסיף את הקלאס הזה בגלילה) */
.ph-highlight-text span.active {
    color: var(--c-dark);
}

/* 3. שכבת התמונה - הכי גבוהה, מחליקה על הטקסט מלמטה */
.ph-image-section {
    position: relative;
    z-index: 3 !important; 
    margin-top: -100vh; /* <--- הפתרון: משיכת הסקשן מעלה כדי שיכסה את ה-Sticky בזמן אמת! */
}





/* ==========================================================================
   About Page: Intro Section (New) & Card Overlay Stacking
   ========================================================================== */

/* A stable snap area, independent of the sticky intro's moving visual box. */
.about-intro-snap-point {
    display: none;
}

@media only screen and (min-width: 769px) {
    .about-page .about-intro-snap-point {
        display: block;
        height: var(--about-intro-height, 100vh);
        margin-bottom: calc(-1 * var(--about-intro-height, 100vh));
        scroll-snap-align: start;
        scroll-snap-stop: always;
        pointer-events: none;
    }

    .about-page .about-intro-section {
        scroll-snap-align: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.about-page {
        scroll-behavior: auto;
        scroll-snap-type: none !important;
    }
}

/* סקשן 2 החדש נעול למקומו כדי שסקשן הצוות יוכל לעלות עליו כמו כרטיסייה */
 .about-intro-section {
     position: sticky !important;
     top: 0;
     z-index: 1;
     background-color: #fcfcfc; /* הרקע הלבן האטום נשאר כאן */
     
     height: auto !important;
     min-height: 100vh;
     display: flex !important;
     align-items: center;
     padding-top: 10vw !important;
     padding-bottom: 10vw !important;
     overflow: visible !important;
 }
 
 /* השכבה של הפאטרן עם ה-15% שקיפות */
 .about-intro-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     
     background-image: url('assets/img/grey-sec-bg.png'); 
     background-repeat: repeat;
     
     opacity: 0.35; /* השקיפות המדויקת שרצית */
     pointer-events: none; /* מוודא שהרשת לא תחסום לחיצות על אלמנטים */
     z-index: 0; /* שם את הרשת מאחורי התוכן */
 }
/* סקשן הצוות (אפור) עולה ויזואלית מעל הסקשן הלבן */
.about-team-section {
    position: relative;
    z-index: 2; /* גבוה יותר מהסקשן שמעליו */
    background-color: var(--c-bg-gray);
    overflow: unset;
}

/* --- עיצוב הגריד והטקסט --- */
.about-intro-grid {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 82vw;
}

.about-intro-left {
    width: 73.3%;
    padding-right: 6%;
}

.about-intro-text p {
    font-size: 1.42222222rem; /* תואם לטקסט הרץ הרגיל באתר (25.6px) */
    font-weight: 300;
    line-height: 1.5;
    color: var(--c-dark);
    margin-bottom: 1.5rem;
}

/* --- כפתורי ההורדה --- */
.about-intro-docs-wrap {
    margin-top: 3.5rem;
    display: flex;
    align-items: center;
    gap: 3rem;
}

.docs-label {
    font-size: 1.54055556rem; /* תואם לפונט הראשי של ההורדות */
    font-weight: 600;
    color: var(--c-dark);
}

.docs-list {
    display: flex;
    gap: 2.5rem;
}

.doc-download-btn {
    display: inline-flex;
    align-items: center;
    color: var(--c-primary);
    font-size: 1.25rem;
    font-weight: 500;
    transition: transform 0.3s ease, color 0.3s ease;
}

.doc-download-btn:hover {
    transform: translateY(-4px); /* האנימציה שביקשת */
}

.icon-download {
    width: 1.2rem;
    height: auto;
    margin-right: 0.8rem;
    transition: filter 0.3s ease;
}

/* --- תמונה וכפתור מרחף בצד ימין --- */
.about-intro-right {
    width: 26.7%;
    position: relative;
}

.intro-image {
    width: 100%;
    height: auto;
    border-radius: 1rem;
    display: block;
}

.contact-pill {
    position: absolute !important;
    top: -4.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
}

.about-intro-text p {
  font-size: 1.185rem !important;
}

/* ==========================================================================
   About Page: Team Title Sticky Effect
   ========================================================================== */

/* זה מחליף את ה- .team-left הקיים שהיה ב-relative */
.team-left {
    width: 25%;
    position: sticky;
    top: 15rem; /* כשהסקשן יגיע לגובה הזה במסך, הכותרת תינעל ותמתין בסבלנות */
    height: fit-content;
}

/* ==========================================================================
   About Page: Z-Index Stacking Fix (Testimonials & Footer)
   ========================================================================== */

/* מוודא שסקשן ההמלצות עולה מעל סקשן הצוות וסקשן ה-Intro */
.about-testi-section {
    position: relative;
    z-index: 3 !important; 
}

/* מוודא שהפוטר עולה מעל כולם בסוף הגלילה */
.site-footer {
    position: relative;
    z-index: 4 !important; 
}


.v-stat-num {
    font-variant-numeric: tabular-nums; /* כל הספרות ברוחב אחיד, כדי שהטקסט לא "יקפוץ" בזמן הספירה */
}


.no_m { display: block !important; }
.m_only { display: none !important; }





/* ==========================================================================
   Breakpoints (Mobile to 5K)
   ========================================================================== */
@media only screen and (min-width: 5119px) { }
@media only screen and (min-width: 2559px) { }
@media only screen and (max-width: 1919px) { }
@media only screen and (max-width: 1700px) { }
@media only screen and (max-width: 1024px) { }
/* ==========================================================================
   DESKTOP TYPOGRAPHY SCALE - PIXEL PERFECT (Based on 1rem = 18px @ 1920px)
   ========================================================================== */
@media only screen and (min-width: 769px) {

    /* --- 1. ניווט, פוטר וכפתורים (Global) --- */
    
    /* תפריט עליון (20.26px) */
    .header-menu li > a { font-size: 1.1256rem !important; }
    
    /* כפתור תפריט עליון - Client Login (20.26px) */
    .site-header .btn-outline { font-size: 1.1256rem !important; }
    
    /* כותרות פוטר קטנות (14.93px) */
    .footer-heading { font-size: 0.8294rem !important; }
    
    /* קישורי פוטר (21.33px) */
    .footer-col ul li a { font-size: 1.1850rem !important; }
    
    /* כפתורי גלולה רגילים (17.07px) */
    .btn-pill, .btn-dark, .btn-primary, .btn-floating-black, .btn-gray { font-size: 0.9483rem !important; }


    /* --- 2. טקסטים כלליים ולינקים --- */
    
    /* טקסט גוף רגיל שמופיע ברוב האתר (25.6px) */
    p, .update-excerpt, .faq-content-inner p, .sol-row-excerpt p, .contact-intro p, .about-right p, .v-tab-desc, .sol-row-extra p {
        font-size: 1.42222222rem !important;
        line-height: 1.33333333;
        font-weight: 300;
    }
    
    /* קישורי טקסט בולטים (+ Learn more / + See all) (25.6px) */
    .solutions-link-item, .hp-solutions-list a, .btn-see-all-sol, .btn-link-green {
        font-size: 1.4222rem !important;
        font-weight: 500 !important;
    }
    .btn-link-green {
      font-size: 1.18518333rem !important;
    }

    .section-subtitle {
      font-size: 1.77777778rem !important;
      font-weight: 500;
      text-align: left;
    }
    
    .tech-desc {
      font-size: 1.185rem !important;
      line-height: 1.3;
    }
    .tech-link {
      font-size: 1.185rem !important;
    }

    /* --- 3. עמוד הבית (Homepage) --- */
    
    /* כותרת ענק סקשן 2 (76.79px) */
    .hp-section-2 .section-title, .we-breathe-title { font-size: 4.2661rem !important; line-height: 1.05; }
    
    /* טקסט מוביל סקשן 2 (25.6px) */
    .hp-section-2 .section-desc, .we-breathe-desc { font-size: 1.4222rem !important; }
    
    /* כותרות פתרונות בגריד טכנולוגיות (76.79px) */
    .tech-title { font-size: 1.5rem !important; line-height: 1.1; margin-bottom: 1.5rem; }


    /* --- 4. עמוד פתרונות (Solutions) ו-FAQ --- */
    
    /* כותרת הירו (76.79px) */
    .sol-hero-left .section-title { font-size: 4.2661rem !important; }
    
    /* טקסט מוביל הירו (34.14px) */
    .sol-hero-desc { font-size: 1.8967rem !important; line-height: 1.4; }
    
    /* כותרות אקורדיון (44.81px) */
    .sol-row-title { font-size: 2.4894rem !important; }
    
    /* כפתור פתיחת אקורדיון (21.34px) */
    
    /* טקסט אקורדיון פנימי (21.34px) */
    
    /* כותרות שאלות ב-FAQ (38.4px) */
    .faq-title { font-size: 2.1333rem !important; }
    
    /* טקסט שאלות - 25.6px מטופל בטקסט הגוף הכללי */


    /* --- 5. עמוד בריאות הצמח (Plant Health) --- */
    
    /* כותרת הירו טייפרייטר (76.79px) */
    .ph-typewriter { font-size: 4.27777778rem !important; }
    
    /* טקסט רץ בהירו (21.33px) */
    .ph-desc { font-size: 1.1850rem !important; }
    
    /* כותרת סקשן מחירים (76.79px) */
    .pricing-title { font-size: 4.2661rem !important; }
    
    /* כותרת משנה מעל שם חבילת תמחור (30.93px) */
    .tier-name { font-size: 1.7183rem !important; }
    
    /* שם חבילת תמחור Basic / VIP (51.2px) */
    .tier-name strong { font-size: 2.8444rem !important; }
    
    /* שורות הפיצ'רים בחבילה (25.6px) */
    .tier-features li { font-size: 1.4222rem !important; }


    /* --- 6. עמוד ערכים (Values) --- */
    
    /* כותרות טאבים עליונים (44.8px) */
    .v-tab-title { font-size: 2.4889rem !important; }
    
    /* מספרי ענק סטטיסטיקה (160.04px) */
    .v-stat-num { font-size: 8.8911rem !important; line-height: 1; }
    
    /* טקסט תחת המספרים הענקיים (23.04px) */
    .v-stat-label { font-size: 1.2800rem !important; }
    
    /* כותרת כללית של סטטיסטיקה שמופיעה משמאל (44.8px) */
    .v-stats-title { font-size: 2.4889rem !important; }


    /* --- 7. עמוד אודות (About Gene-G) --- */
    
    /* טקסט חזון גדול עם מרכאות (44.8px) */
    .vision-text { font-size: 2.4889rem !important; line-height: 1.3; }
    
    /* כותרת אזור צוות (76.79px) */
    .team-section-title { font-size: 4.2661rem !important; }
    
    /* שם חבר צוות (44.8px) */
    .team-member-name { font-size: 2.4889rem !important; }
    
    /* תפקיד חבר צוות (34.13px) */
    .team-role { font-size: 1.8961rem !important; }
    
    /* טקסט רץ חבר צוות (21.33px) */
    .team-desc { font-size: 1.1850rem !important; }
    
    /* טקסט ציטוט ענק + שם הממליץ (25.6px) */
    .testi-text, .testi-author, .testi-role { font-size: 1.4222rem !important; line-height: 1.4; }


    /* --- 8. עמוד עדכונים (Updates) --- */
    
    /* כותרת ענק הירו (76.79px) */
    .updates-hero-section .section-title { font-size: 4.2661rem !important; }
    
    /* תגיות סינון (17.06px) */
    .update-tag { font-size: 0.9478rem !important; }
    
    /* כותרת מאמר (44.79px) */
    .update-title { font-size: 2.4883rem !important; }
    
    /* תאריך המאמר (14.93px) */
    .update-date { font-size: 0.8294rem !important; }
    
    /* קישורים תחתונים במאמר (21.33px) */
    .bottom-link { font-size: 1.42222222rem !important; }


    /* --- 9. עמוד צור קשר (Contact) --- */
    
    /* כותרות צד שמאל - Head Office (51.2px) */
    .contact-hero-left .section-title { font-size: 2.8444rem !important; }
    
    /* Message us (44.8px) */
    .contact-form-left .section-title { font-size: 2.4889rem !important; }
    
    /* פרטי התקשרות רשימה (34.13px) */
    .contact-details-list li { font-size: 1.8961rem !important; }
    
    /* שמות שדות הטופס (23.47px) */
    .form-group label { font-size: 1.3039rem !important; }
    
    /* טקסט בתוך השדה + קידומת (34.13px) */
    .input-wrapper input, .input-wrapper textarea, .phone-prefix { font-size: 1.8961rem !important; }
    
    /* כפתור שליחה (22.4px) */
    .form-submit-wrapper button[type="submit"] { font-size: 1.2444rem !important; }
}
/* ==========================================================================
   MOBILE RESPONSIVE (Max-Width: 768px) - SINGLE MEDIA QUERY
   Order: Global -> Header/Burger -> Home -> Solutions -> Plant Health -> Values -> About -> Updates -> Contact -> Footer
   ========================================================================== */
@media only screen and (max-width: 768px) {
    /* --- 0. GLOBAL & BASE MOBILE SETUP --- */
    html {
        font-size: 14px; /* קביעת בסיס הגיוני ומדויק למובייל: 1rem = 14px */
        scroll-snap-type: none; /* ביטול סנאפ אגרסיבי במובייל לגלילה חופשית */
    }

    body {
        overflow-x: hidden;
        width: 100%;
    }

    /* אימפורטנט נשמר אך ורק בקלאסים הייעודיים להסתרה והצגה לפי בקשתך */
    .no_m { display: none !important; }
    .m_only { display: block !important; }

    /* שחרור נעילות של מערכת הסנאפ והפלקס הגלובלית */
    .snap-container, .page_wrap {
        height: auto;
        overflow-y: visible;
        scroll-snap-type: none;
    }

    .snap-section {
        height: auto;
        min-height: 0;
        padding: 4.5rem 0;
        scroll-snap-align: none;
    }

    section .container, .container, .wrap {
        padding: 0 5vw; /* ריווח צדדי אחיד ונוח למובייל (~21px) */
        width: 100%;
        max-width: 100%;
    }

    /* הפיכת כל שורות הפלקס לעמודות אנכיות במובייל */
    .frow, .about-grid, .tech-grid, .ph-grid, .contact-hero-grid, .contact-form-grid, .v-hero-grid, .team-grid {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 2rem;
    }

    .section-title, .pricing-title, .vision-text, .v-hero-title, .team-section-title {
        font-size: 2.5rem; /* ~35px לכותרות סקשנים במובייל */
        line-height: 1.15;
        width: 100%;
    }

    /* --- 1. HEADER & FULLSCREEN HAMBURGER OVERLAY (WHITE BG, BLACK TEXT, LOCKED SCROLL) --- */
     .header, .site-header {
         height: 6.5rem;
         padding: 1.8rem 0;
         background-color: transparent;
     }
    
     .header.header--hidden, .site-header.theme-hide {
         transform: translateY(-100%);
     }
    
     .head_logo, .logo {
         z-index: 10001;
         position: relative;
         top: 0;
         left: 0;
     }
    
     .head_logo img, .logo-img {
         width: 9rem;
         height: auto;
     }
    
     /* ביטול מוחלט של פילטרים על הלוגו כשהתפריט פתוח - מבטיח ש-logoblack.svg יישאר שחור תמיד! */
     body.mopen .site-header .logo img,
     body.mopen header .head_logo img,
     body.mopen .site-header.theme-transparent .logo img {
         filter: none !important;
     }
     
     /* ביטול מוחלט של פילטרים וכפיית נראות שחורה מלאה ללוגו כשהתפריט פתוח */
      body.mopen .site-header .logo img,
      body.mopen header .head_logo img,
      body.mopen .site-header.theme-transparent .logo img,
      body.mopen .site-header .logo-img {
          filter: none !important;
          opacity: 1 !important;
          visibility: visible !important;
      }
    
     /* כפתור ההמבורגר */
     .bt_menu {
         display: block;
         position: absolute;
         top: 1.8rem;
         right: 5vw;
         width: 3.21428571rem;
         height: 2.7rem;
         z-index: 10001;
         cursor: pointer;
     }
    
     .bt_menu a { display: block; width: 100%; height: 100%; padding: 0.5rem; }
     .bt_menu span:first-child { top: 0; }
     .bt_menu span:nth-child(2) { top: 0.7rem; }
     .bt_menu span:last-child { top: 1.4rem; }
     
     .bt_menu span {
         position: absolute;
         display: block;
         background-color: var(--c-dark, #000000); /* פסים שחורים במצב רגיל על רקע בהיר */
         width: 2.21428571rem;
         height: 2px;
         border-radius: 2px;
         left: 50%;
         margin-top: 0.5rem;
         margin-left: -1.10714286rem;
         -webkit-transition: background-color 0.5s linear, top .2s .25s, left .2s .25s, opacity .2s .25s, -webkit-transform .2s 0s;
         transition: background-color 0.5s linear, top .2s .25s, left .2s .25s, opacity .2s .25s, transform .2s 0s;
     }
    
     /* פסים לבנים כשההדר שקוף במנוחה מעל רקע כהה */
     .site-header.theme-transparent:not(.uscrolled) .bt_menu span,
     body.lightheader .header:not(.uscrolled) .bt_menu span {
         background-color: #ffffff;
     }
    
     /* --- נעילת גלילה ואנימציית ה-X (תמיד שחור משחור ללא תלות בגלילה!) --- */
     html:has(body.mopen), body.mopen { 
         overflow: hidden !important; 
         height: 100vh !important;
         touch-action: none !important; /* חוסם גלילת מגע במובייל מודרני */
     }
    
     body.mopen .bt_menu span:first-child { -webkit-transform: rotate(45deg); transform: rotate(45deg); }
     body.mopen .bt_menu span:last-child { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
     body.mopen .bt_menu span:first-child, body.mopen .bt_menu span:last-child { top: 0.7rem; }
     body.mopen .bt_menu span:nth-child(2) { opacity: 0; }
     
     /* דורס כל מצב גלילה או הדר שקוף מול הפסים של ה-X כדי שתמיד יישארו שחורים מול הרקע הלבן */
     body.mopen .bt_menu span,
     body.mopen .site-header .bt_menu span,
     body.mopen .header .bt_menu span,
     body.mopen .site-header.theme-transparent .bt_menu span {
         background-color: #000000 !important; 
         -webkit-transition: background .2s, top .2s, left .2s, opacity .2s, -webkit-transform .2s .25s;
         transition: background .2s, top .2s, left .2s, opacity .2s, transform .2s .25s;
     }
    
     /* מעטפת התפריט המלא (Overlay) - עכשיו ברקע לבן נקי! */
     .head_menu_wrap, .main-nav {
         display: flex;
         position: fixed;
         flex-direction: column;
         justify-content: center;
         visibility: hidden;
         opacity: 0;
         width: 100vw;
         height: 100dvh;
         top: 0;
         left: 0;
         padding-top: 30vw;
         z-index: 10000;
         background-color: #ffffff !important; /* רקע לבן מוחלט לפי הבקשה */
         touch-action: auto !important; /* מאפשר גלילה פנימית בתפריט עצמו אם המסך נמוך מאוד */
         overflow-y: auto;
         -webkit-transition: all .5s ease-in-out;
         transition: all .5s ease-in-out;
     }
    
     body.mopen .head_menu_wrap, body.mopen .main-nav {
         visibility: visible;
         opacity: 1;
     }
     
     .head_menu_wrap {
        overflow: hidden;
     }
    
     .main_menu, .header-menu {
         width: 100vw;
         margin: 0 !important;
         display: flex;
         flex-direction: column;
         justify-content: center;
         height: 100%;
         gap: 0;
     }
    
     .header-menu li, .mitem {
         width: 100%;
         padding: 0;
         border-bottom: 1px solid #eaeaea; /* קו הפרדה עדין ומותאם לרקע לבן */
     }
    
     /* קישורי התפריט - טקסט שחור ובולט */
     .header-menu li > a, .main_menu .mitem > a {
         display: block;
         color: #000000 !important; /* שחור מוחלט */
         font-size: 2.14285714rem;
         font-weight: 500;
         line-height: 1.93;
         padding: 0.5rem 5vw 0.5rem;
     }
    
     /* אנימציית כניסה מדורגת לפריטים */
     .mitemmtoptc, .header-menu li {
         position: relative;
         top: 10px;
         opacity: 0;
         -webkit-transition: opacity 1s, top 1s;
         transition: opacity 1s, top 1s;
     }
    
     body.mopen .mitemmtoptc, body.mopen .header-menu li {
         opacity: 1;
         top: 0;
     }
    
     /* כפתור ה-Client Login בתפריט המובייל - מותאם לרקע הלבן */
     .main-nav .btn-outline {
         margin: 0 auto 15vw;
           width: calc(100% - 10vw);
         text-align: center;
         border-color: #000000 !important;
         color: #000000 !important;
     }

    /* --- 2. PAGE 1: HOME (home.php) --- */
     .hero-section {
         padding-top: 8rem;
         min-height: 85vh;
         display: flex;
         align-items: center;
     }
    
     .hero-content {
         max-width: 100%;
         text-align: left;
     }
    
     .hero-title {
         font-size: 2.8rem;
         line-height: 1.1;
     }
    
     .hero-subtitle {
         font-size: 1.2rem;
         margin-bottom: 2rem;
     }
    
     /* הגנה קריטית: העלאת ה-z-index של הסקשן כדי שהסקשן האפור הבא לא יכסה אותו בגלילה */
     .about-section {
         position: relative;
         z-index: 5;
     }
    
     .about-left, .about-right {
         width: 100%;
         position: relative;
         z-index: 5;
     }
    
     .about-right {
         font-size: 1.1rem;
     }
    
     .about-bottom {
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 1.5rem;
         height: auto;
         padding-top: 2rem;
         padding-bottom: 0;
         position: relative;
         z-index: 5;
     }
    
     /* סידור מחדש באמצעות order: הלינקים תמיד למעלה, התמונה תמיד למטה! */
     .about-feat-left {
         order: 1;
         width: 100%;
         display: flex;
         justify-content: center;
         position: relative;
         z-index: 10;
     }
    
     .about-feat-right {
         order: 2;
         width: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         gap: 1.5rem;
         position: relative;
         z-index: 10;
     }
    
     /* הצבת הירקות בסוף הסקשן מתחת ללינקים */
     .about-image-wrapper {
         order: 3;
         position: relative;
         left: 0;
         bottom: 0;
         width: 85%;
         margin: 1.5rem auto 0;
         z-index: 1;
     }
    
     /* הבטחת נראות, קריאות וצבע שחור חזק לכל הלינקים */
     .feature-item, .about-feat-left a, .about-feat-right a {
         display: inline-flex;
         align-items: center;
         font-size: 1.5rem;
         font-weight: 500;
         color: #000000;
         opacity: 1;
         visibility: visible;
         position: relative;
         z-index: 10;
     }
    
     /* ביטול אפקט הכרטיסייה הנדבקת (Card Stacking) והחזרה לגלילה רגילה במובייל! */
     .tech-section {
         position: relative;
         top: auto;
         z-index: 2;
     }
    
     .plant-health-section {
         position: relative;
         z-index: 2;
     }
    
     .tech-header {
         max-width: 100%;
         margin-bottom: 2.5rem;
     }
    
     .tech-item {
        text-align: center;
         width: 100%;
         margin-bottom: 2rem;
     }
     .tech-icon {
         justify-content: center;
      }
    
     .ph-left, .ph-right {
         width: 100%;
     }
    
     .ph-nav-arrows {
         margin-bottom: 2rem;
         display: none;
     }
     
     .ph-right .section-title {
        font-size: 2.5rem;
     }
     
     
     
     
     
     
     .about-feat-left, .about-feat-right {
        padding: 0;
     }
     
     .about-section .container {
        height: unset;
     }
     
     .about-section {
        padding-bottom: 0;
     }

    /* --- 3. PAGE 2: SOLUTIONS (solutions.php) --- */
    .sol-hero-section {
        height: auto;
        padding-bottom: 0;
    }

    .sol-hero-sticky {
        position: relative;
        height: auto;
    }

    .image-scroll-wrapper {
        position: relative;
        height: auto;
    }

    .sol-hero-right {
        position: relative;
        top: 0;
        right: 0;
        width: 100%;
        margin-top: 2rem;
    }

    .sol-row-header {
        flex-direction: column;
        gap: 1rem;
    }

    .sol-row-title, .sol-row-excerpt, .sol-row-img, .sol-row-extra {
        width: 100%;
    }

    .sol-row-content-inner {
        flex-direction: column;
        gap: 1.5rem;
        padding-top: 1.5rem;
    }

    .faq-header {
        padding: 1.5rem 0;
    }

    .faq-title {
        font-size: 1.3rem;
        line-height: 1.3;
    }

    .faq-content-inner {
        max-width: 100%;
    }

    /* --- 4. PAGE 3: PLANT HEALTH (plant-health.php) --- */
    .ph-scrolly-section {
        height: auto; /* התאמה לגלילה טבעית במובייל */
        min-height: 100vh;
    }

    .ph-sticky-viewport {
        position: relative;
        height: auto;
        min-height: 80vh;
    }

    .ph-content-layer.pos-right, .ph-content-layer.pos-left {
        padding: 4rem 10vw;
        justify-content: center;
    }

    .ph-text-box {
        max-width: 100%;
        padding: 0;
    }

    .ph-typewriter {
        font-size: 2rem;
        min-height: 4.5rem;
    }

    .ph-image-section {
        height: auto;
        min-height: 50vh;
        padding: 2rem 0;
    }

    .ph-full-img {
        max-height: 50vh;
    }

    /* גריד קלפי ההשוואה (Pricing Cards) */
    .pricing-grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .pricing-card {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 2.5rem 1.8rem;
    }
    
    /* הבטחת צבע שחור לפסי ההמבורגר בעמוד Genetic Solutions במנוחה (ללא אימפורטנט) */
     body:has(.solutions_wrap):not(.mopen) .site-header .bt_menu span,
     body:has(.solutions_wrap):not(.mopen) header .bt_menu span,
     body:has(.solutions_wrap):not(.mopen) .bt_menu span {
         background-color: #000000;
     }

/* --- 5. PAGE 4: OUR VALUES (values.php) --- */
      .v-hero-left, .v-hero-right {
          width: 100%;
      }
     
      .v-hero-right {
          position: relative;
          top: 0;
          right: 0;
          width: 80%;
          margin: 2rem auto 0;
      }
     
      .v-tabs-wrapper {
          flex-direction: column;
          gap: 1.5rem;
          margin-bottom: 3rem;
      }
     
      .v-tab {
          width: 100%;
          padding-bottom: 1rem;
      }
     
      /* מעטפת הטבלה: מתוחה עד הקצה הימני עם פאדינג עליון ותחתון נדיב בשביל הבליטות של המסגרת */
      .v-table-wrapper {
          width: calc(100% + 1.5rem);
          margin-right: -1.5rem;
          overflow-x: auto;
          overflow-y: hidden;
          -webkit-overflow-scrolling: touch;
          padding-top: 1.5rem; /* נותן מקום לבליטה העליונה של המסגרת הירוקה */
          padding-bottom: 2.5rem; /* נותן מקום לבליטה התחתונה ולגלילה */
          margin-bottom: 3rem;
          position: relative;
      }
     
      /* מוודא שמסגרת ה-after של הדסקטופ מבוטלת לחלוטין */
      .v-table-wrapper::after {
          display: none;
      }
     
      /* דריסת ה-flex-direction: column הגלובלי והחזרת הטבלה לשורות אופקיות ורחבות */
      .v-table-row,
      .v-table-wrapper .frow {
          display: flex;
          flex-direction: row;
          flex-wrap: nowrap;
          width: max-content;
          min-width: 100%;
          align-items: stretch;
      }
     
      /* עיצוב התאים */
      .v-col {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 1.2rem 0.5rem;
          flex-shrink: 0;
      }
     
      /* עמודת שמות הפיצ'רים (משמאל) */
      .v-col-name {
          width: 12rem;
          min-width: 12rem;
          align-items: flex-start;
          justify-content: center;
          font-size: 1rem;
      }
     
      /* 4 עמודות המתחרים */
      .v-col-comp {
          width: 8rem;
          min-width: 8rem;
          text-align: center;
      }
     
      /* עמודת Gene-G (מימין) + רווח בסוף הגלילה (5vw/~1.5rem) */
      .v-col-geneg {
          width: 8.5rem;
          min-width: 8.5rem;
          text-align: center;
          margin-right: 1.5rem;
          position: relative;
      }
     
      /* מירכוז מוחלט ומדויק לאייקונים ולדגלים */
      .v-col-comp img, .v-col-geneg img, .v-icon-check, .v-icon-x, .v-flag {
          margin: 0 auto;
          display: block;
          align-self: center;
      }
     
      /* הקטנה והרחקה של לוגו Gene-G כדי שלא יגע במסגרת! */
      .v-geneg-logo {
          width: 4.2rem; /* קטן ומדויק יותר למובייל */
          height: auto;
          margin: 0.5rem auto 0;
          display: block;
      }
     
      /* --- המסגרת הירוקה על התאים (עם בליטה מלמעלה ומלמטה!) --- */
      
      /* תא עליון: בולט כלפי מעלה מחוץ לשורת ההדר */
      .v-table-header .v-col-geneg {
          border-top: 3px solid var(--c-primary);
          border-left: 3px solid var(--c-primary);
          border-right: 3px solid var(--c-primary);
          border-radius: 1.25rem 1.25rem 0 0;
          padding-top: 1.8rem; /* דוחף את התוכן למטה בתוך המסגרת */
          margin-top: -1rem; /* מושך את הבורדר עצמו למעלה שייבלט מחוץ לטבלה! */
          background-color: #ffffff; /* מוודא שהבליטה מסתירה קווים מאחוריה אם יש */
      }
     
      /* תאים אמצעיים: מסגרת צדדית בלבד */
      .v-table-row:not(.v-table-header):not(:last-child) .v-col-geneg {
          border-left: 3px solid var(--c-primary);
          border-right: 3px solid var(--c-primary);
      }
     
      /* תא תחתון: בולט כלפי מטה מחוץ לשורה האחרונה */
      .v-table-row:last-child .v-col-geneg {
          border-bottom: 3px solid var(--c-primary);
          border-left: 3px solid var(--c-primary);
          border-right: 3px solid var(--c-primary);
          border-radius: 0 0 1.25rem 1.25rem;
          padding-bottom: 1.8rem; /* מרווח נשימה מתחת לאייקון האחרון */
          margin-bottom: -1rem; /* מושך את הבורדר למטה שייבלט מחוץ לטבלה! */
      }
     
      .v-stats-box {
          flex-direction: column;
          padding: 3rem 1.5rem;
          gap: 2.5rem;
          border-radius: 1.5rem;
      }
     
      .v-stats-left, .v-stats-right {
          width: 100%;
      }
     
      .v-stats-right {
          flex-direction: column;
          gap: 2.5rem;
      }
     
      .v-stat-num {
          font-size: 5rem;
      }
      .v-geneg-top img {
          width: 6rem;
      }


    /* --- 6. PAGE 5: ABOUT GENE-G (about.php) --- */
     .vision-text {
         font-size: 1.6rem;
         line-height: 1.4;
     }
    
     .team-left, .team-center, .team-right-spacer {
         width: 100%;
     }
    
     .team-left {
         position: relative;
         top: 0;
         margin-bottom: 1rem;
     }
    
     /* הסתרה מוחלטת של מעטפת התמונות הכללית והנפרדת במובייל! */
     .team-image-wrapper {
         display: none;
     }
    
     /* עיצוב התמונה הפנימית החדשה שהוזרקה לתוך האקורדיון מתחת לטקסט */
     .team-mobile-img {
         width: 100%;
         max-width: 240px; /* רוחב מושלם ונוח לקריאה במובייל */
         height: auto;
         aspect-ratio: 3 / 4;
         object-fit: cover;
         object-position: center top;
         border-radius: 1.25rem;
         margin: 1.8rem 0 0.5rem 0; /* רוחב נשימה עדין מתחת ללינקדאין */
         display: block;
         opacity: 1;
         visibility: visible;
     }
    
     .testi-text {
         font-size: 1.2rem;
         max-width: 100%;
         margin-bottom: 2rem;
     }
    
     .about-testi-section .splide__arrows {
         margin-top: 2.5rem;
     }

    /* --- 7. PAGE 6: UPDATES (updates.php) --- */
    .updates-hero-section {
        padding-top: 6rem;
    }

    .updates-tags-wrapper {
        gap: 0.8rem;
        flex-direction: row;
    }

    .update-tag {
        padding: 0.4rem 1rem;
        font-size: 0.8rem;
    }

    .update-row {
        flex-direction: column;
        padding: 2rem 0;
    }

    .update-left, .update-right {
        width: 100%;
    }

    .update-left {
        padding-right: 0;
        margin-bottom: 1rem;
    }

    .update-title {
        font-size: 1.6rem;
    }

    .update-right {
        margin-top: 0;
    }

    .bottom-links {
        flex-direction: column;
        gap: 1.2rem;
        align-items: center;
    }

    /* --- 8. PAGE 7: CONTACT (contact.php) --- */
    .contact-hero-left, .contact-hero-right, .contact-form-left, .contact-form-right {
        width: 100%;
    }

    /* ביטול המיקום האבסולוטי של תמונת המשרד והזרמתה למובייל */
    .contact-hero-right {
        position: relative;
        top: 0;
        right: 0;
        transform: none;
        width: 100%;
        margin-top: 2.5rem;
    }

    .contact-main-img {
        border-radius: 1.5rem;
        width: 100%;
        max-height: 300px;
        object-fit: cover;
    }

    .contact-form-left {
        position: relative;
        margin-bottom: 1.5rem;
    }

    .input-wrapper input, .input-wrapper textarea {
        font-size: 1.33333333rem;
    }


    /* --- 9. FOOTER (footer.php) --- */
    .footer-top {
        flex-direction: column !important;
        gap: 3rem;
        padding: 0 0 3rem 0;
    }

    .footer-navs {
       flex-wrap: wrap;
        flex-direction: column;
        gap: 2.5rem;
        width: 100%;
    }

    .footer-col {
        width: calc(50% - 2.5rem);
    }

    .footer-action {
        width: 100%;
        margin-top: 1rem;
    }

    .btn-outline-dark, .btn-outline-dark {
        width: 100%;
        text-align: center;
    }
    
    .btn-outline-dark, .main-nav .btn-outline {
      min-height: 4rem !important;
      padding: 0 2rem !important;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1.5rem;
        align-items: center;
        text-align: center;
        padding-bottom: 0;
    }
    .about-grid {
      padding: 0 5vw;
      padding-top: 0;
   }
   
   .plant-health-section .container {
      height: unset;
      padding: 0 5vw !important;
   }
   .tech-section > .container, .plant-health-section > .container {
       padding-top: 0 !important;
   }
   .footer-heading {
      font-size: 1rem;
   }
   .site-footer.snap-section {
      padding-bottom: 0;
   }
   .footer-logo img {
      height: 2.6rem;
   }
   .footer-copy {
       font-size: 1rem;
       margin-top: -0.5rem;
   }
   .section-title br {
      display: none;
   }
   .sol-hero-left .section-title {
      font-size: 2.5rem;
   }
   .sol-hero-desc {
      font-size: 1.5rem;
   }
   .image-scroll-wrapper .container {
      height: unset;
   }
   .sol-list-section .container, .sol-faq-section .container {
      padding: 0 5vw !important;
   }
   .sol-row-title {
      font-size: 2rem;
   }
   .sol-row {
       padding: 10vw 0 calc(10vw - 1.5rem);
   }
   .ph-image-section {
      height: unset !important;
      min-height: unset !important;
      padding-top: 4.5rem !important;
   }
   .ph-pricing-section {
      padding: 4.5rem 0 !important;
   }
   .section-title, .pricing-title, .vision-text, .v-hero-title, .team-section-title {
      font-size: 2rem;
   }
   .pricing-grid {
      flex-direction: column !important;
   }
   .pricing-title {
      margin-bottom: 3rem;
   }
   .pricing-card {
      width: 100% !important;
   }
   .tier-name .tm-super {
      font-size: 1em;
   }
   .section-title br, .pricing-title br, .vision-text br, .v-hero-title br, .team-section-title br {
      display: none !important;
   }
   .values-hero-section {
      padding-top: calc(10vw + 4.5rem) !important;
      padding-bottom: 0 !important;
   }
   .v-tab, .v-tab::after {
      opacity: 1 !important;
   }
   .v-table-row {
      gap: 0;
   }
   .values-stats-section {
      padding: 4.5rem 0 !important;
   }
   .values-stats-section .container {
      padding: 0 5vw !important;
   }
   .v-stats-title {
      font-size: 2rem;
   }
   .v-stats-box {
     text-align: center;
  }
  .v-stats-right {
      align-items: center;
   }
   .about-vision-section {
      padding-top: calc(10vw + 4.5rem) !important;
      padding-bottom: 4.5rem !important;
   }
   .about-team-section, .about-testi-section {
      padding: 4.5rem 0 !important;
   }
   .about-testi-section {
      padding-top: calc(10vw + 4.5rem) !important;
   }
   
   .team-member-name {
      font-size: 1.8rem;
   }
   .team-grid {
      gap: 0;
   }
   .updates-hero-section .section-title {
      font-size: 2rem;
   }
   .updates-hero-section {
      padding-top: calc(10vw + 4.5rem) !important;
      padding-bottom: 2rem !important;
   }
   .update-row {
      overflow: unset;
   }
   .updates-bottom-section {
      padding-top: 0 !important;
      padding-bottom: 4.5rem !important;
   }
   .contact-hero-left .section-title {
      font-size: 2rem;
      margin-bottom: 2rem;
   }
   .contact-hero-section {
      padding-top: calc(10vw + 4.5rem) !important;
   }
   .contact-detail-icon {
      width: 1.5rem;
   }
   .contact-details-list li {
      font-size: 1.5rem;
      gap: 1rem;
   }
   .contact-main-img {
      max-height: unset;
   }
   .contact-form-section {
      padding-top: 0 !important;
      padding-bottom: 4.5rem !important;
   }
   .contact-form-left .section-title {
      font-size: 2rem;
   }
   .contact-form-left {
        margin-bottom: 0;
    }
    .contact-form-grid {
       gap: 0;
    }
    .contact-socials {
       flex-direction: row;
       gap: 1rem;
    }
    .about-grid .section-title br {
      display: block !important;
    }
    
   /* ==========================================================================
      Plant Health Highlight - Mobile Fix
      ========================================================================== */
   .ph-highlight-section {
       height: 150vh !important; /* אורך גלילה קצר ונוח יותר למובייל */
       padding: 0 !important;
   }
   
   .ph-image-section {
       margin-top: 0 !important; /* ביטול המשיכה השלילית במובייל שגרמה לעליית סקשן המחירים */
   }
   .ph-highlight-text {
     max-width: unset;
   }
   
   
   .about-intro-section {
       position: relative !important;
       height: auto !important;
       padding: 5rem 0 !important;
   }
   
   .about-intro-grid {
     width: 100%;
       flex-direction: column;
       gap: 4rem;
   }
   
   .about-intro-left, .about-intro-right {
       width: 100%;
   }
   .about-intro-left {
     padding-right: 0;
   }
   
   .about-intro-docs-wrap {
       flex-direction: column;
       align-items: flex-start;
       gap: 1.5rem;
   }
   
   .docs-list {
       flex-direction: column;
       gap: 1.2rem;
   }
   
   /* במובייל הכותרת לא נדבקת אלא גוללת כרגיל */
   .team-left {
       position: relative;
       top: 0;
       margin-bottom: 2rem;
   }
   
   .contact-pill {
     position: relative !important;
     top: unset;
     margin: 0 0 2rem !important;
   }

   /* --- Single Article Page --- */
   .article-hero-section {
       padding-top: 7rem;
       padding-bottom: 1rem;
   }

   .article-title {
       font-size: 2.4883rem !important;
   }

   .article-content h2 {
       font-size: 1.75rem;
       margin: 2.25rem 0 1rem;
   }

   .article-content h3 {
       font-size: 1.4rem;
       margin: 1.75rem 0 0.75rem;
   }

   .article-excerpt {
       font-size: 1.15rem;
   }

   .article-body-section {
       padding-bottom: 8rem;
   }
}


.geneg-whatsapp {
    position: fixed;
    right: calc(20.8px + env(safe-area-inset-right, 0px));
    bottom: calc(20.8px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    display: block;
    width: 62.4px;
    height: 62.4px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    line-height: 0;
    text-decoration: none;
    transform: none;
    filter: none;
    transition: none;
}

.geneg-whatsapp img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: none;
}

.geneg-whatsapp__default {
    opacity: 1;
}

.geneg-whatsapp__hover {
    opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
    .geneg-whatsapp--has-hover:hover .geneg-whatsapp__default {
        opacity: 0;
    }

    .geneg-whatsapp--has-hover:hover .geneg-whatsapp__hover {
        opacity: 1;
    }
}

.geneg-whatsapp:focus-visible {
    outline: 2px solid var(--c-dark, #000) !important;
    outline-offset: 4px;
}

body.mopen .geneg-whatsapp {
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 768px) {
    .geneg-whatsapp {
        right: calc(14px + env(safe-area-inset-right, 0px));
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
        width: 42px;
        height: 42px;
    }
}
/* ==========================================================================
   Quality Page
   ========================================================================== */
html.quality-page,
.quality-page body {
    scroll-snap-type: none !important;
}

.quality-page .snap-section {
    scroll-snap-align: none !important;
    scroll-snap-stop: normal;
}

.quality_wrap {
    /* The same four type sizes used by the Solutions page. */
    --quality-title-size: 4.2661rem;
    --quality-heading-size: 2.4894rem;
    --quality-lead-size: 1.8967rem;
    --quality-body-size: 1.42222222rem;
    overflow-wrap: anywhere;
}

@media only screen and (min-width: 769px) {
    html.quality-page {
        scroll-snap-type: y proximity !important;
    }

    /* Only the Certificates section is a stop; long text scrolls naturally. */
    .quality-certificates {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .quality-certificates {
        scroll-margin-top: calc(var(--header-height) + 1rem);
    }

    .quality-page .site-footer {
        scroll-snap-align: end !important;
    }
}

.quality_wrap .quality-container,
.quality-cta .container {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
    padding-inline: 17.15%;
}

.quality-copy {
    width: 85%;
}

.quality-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(53.125vw, 1020px);
    padding-block: max(110px, 10vw) 5vw;
    background: #f3f3f1;
    isolation: isolate;
}

.quality-hero-media,
.quality-hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.quality-hero-media {
    z-index: -2;
    opacity: 0;
    transition: opacity .8s ease;
}

.quality-hero-media.is-loaded {
    opacity: 1;
}

.quality-hero-media img {
    display: block;
    object-fit: cover;
    object-position: center;
}

.quality-hero--has-image::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 24%, transparent 68%, rgba(255,255,255,.4));
    pointer-events: none;
}

.quality-hero--no-image {
    min-height: 0;
    padding-block: max(140px, 13vw) 5vw;
}

.quality-title {
    display: grid;
    font-size: var(--quality-title-size);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.02em;
}

/* Reserve the completed title's space before the shared typewriter starts. */
.quality-title::before {
    content: attr(data-title) '_';
    grid-area: 1 / 1;
    visibility: hidden;
    white-space: pre-line;
}

.quality-title-typing {
    grid-area: 1 / 1;
    min-width: 0;
}

.quality-content {
    padding-block: 6.1vw 7.35vw;
}

.quality-intro {
    margin-bottom: 3.2vw;
    font-size: var(--quality-lead-size) !important;
    font-weight: 300 !important;
    line-height: 1.4 !important;
}

.quality-richtext,
.quality-richtext p,
.quality-richtext li {
    font-size: var(--quality-body-size) !important;
    font-weight: 300;
    line-height: 1.33333333;
}

.quality-richtext p,
.quality-richtext ul,
.quality-richtext ol {
    margin-bottom: 1.55vw;
}

.quality-richtext > :last-child {
    margin-bottom: 0;
}

.quality-richtext ul,
.quality-richtext ol {
    padding-left: 1.5em;
    list-style: disc;
}

.quality-richtext ol {
    list-style: decimal;
}

.quality-richtext a {
    text-decoration: underline;
    text-underline-offset: .15em;
}

.quality-richtext h2,
.quality-richtext h3 {
    font-size: var(--quality-heading-size);
    font-weight: 600;
    margin-block: 1.5em .6em;
}

.quality-quote {
    margin-block: 2.35vw 2.7vw;
    margin-left: -3.2vw;
    font-size: var(--quality-lead-size);
    font-style: italic;
    font-weight: 400;
    line-height: 1.4;
}

.quality-certificates {
    padding-block: 5.65vw 5.61vw;
    border-top: 1px solid #dedede;
}

.quality-certificates-title {
    margin-bottom: 1.8vw;
    font-size: var(--quality-heading-size);
    font-weight: 600;
    line-height: 1.2;
}

.quality-certificates-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 9vw;
}

.quality-certificates-list li {
    min-width: 0;
    max-width: 100%;
}

.quality-certificate {
    display: inline-flex;
    align-items: center;
    gap: 1.4vw;
    max-width: 100%;
    min-height: 44px;
    color: var(--c-primary);
    font-size: var(--quality-body-size);
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    filter: brightness(1);
    transition: filter .25s ease;
}

.quality-certificate img {
    flex-shrink: 0;
    width: clamp(20px, 1.6vw, 31px);
    height: auto;
}

.quality-certificate:hover,
.quality-certificate:focus-visible {
    filter: brightness(0);
}

.quality-certificate span {
    text-decoration: none;
}

.quality-cta {
    position: relative;
    display: block;
    height: auto;
    min-height: 0;
    padding: 5.34vw 0;
    overflow: visible;
    background: var(--c-primary);
    color: #fff;
    isolation: isolate;
}

.quality-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('assets/img/grey-sec-bg.png') repeat;
    opacity: .15;
    pointer-events: none;
}

.quality-cta-inner {
    display: flex;
    align-items: center;
    gap: 2.2vw;
    width: fit-content;
    max-width: 100%;
    min-height: 44px;
    font-size: var(--quality-heading-size);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -.015em;
}

.quality-cta-arrow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: clamp(46px, 3.8vw, 73px);
    aspect-ratio: 1;
    border: 1px solid currentColor;
    border-radius: 50%;
    transition: background-color .2s ease;
}

.quality-cta-arrow img {
    width: 47%;
    height: auto;
    display: block;
    transition: opacity .2s ease;
}

.quality-cta-arrow::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--c-primary);
    -webkit-mask: url('assets/img/arr_right_white.svg') center / 47% auto no-repeat;
    mask: url('assets/img/arr_right_white.svg') center / 47% auto no-repeat;
    opacity: 0;
    transition: opacity .2s ease;
}

.quality-cta-arrow:hover,
.quality-cta-arrow:focus-visible {
    background-color: #fff;
}

.quality-cta-arrow:hover img,
.quality-cta-arrow:focus-visible img {
    opacity: 0;
}

.quality-cta-arrow:hover::after,
.quality-cta-arrow:focus-visible::after {
    opacity: 1;
}

.quality_wrap a:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 5px;
}

@media only screen and (max-width: 768px) {
    .quality_wrap {
        --quality-title-size: 2.5rem;
        --quality-heading-size: 2rem;
        --quality-lead-size: 1.5rem;
        --quality-body-size: 1rem;
    }

    .quality_wrap .quality-container,
    .quality-cta .container {
        padding-inline: 5vw;
    }

    .quality-copy {
        width: 100%;
    }

    .quality-hero {
        min-height: 460px;
        min-height: clamp(400px, 72svh, 620px);
        padding-block: 120px 52px;
    }

    .quality-hero--no-image {
        min-height: 0;
        padding-block: 130px 45px;
    }

    .quality-title {
        max-width: 13em;
        line-height: 1.1;
    }

    .quality-content {
        padding-block: 52px 58px;
    }

    .quality-intro {
        margin-bottom: 30px;
        line-height: 1.6 !important;
    }

    .quality-richtext,
    .quality-richtext p,
    .quality-richtext li {
        line-height: 1.6;
    }

    .quality-richtext p,
    .quality-richtext ul,
    .quality-richtext ol {
        margin-bottom: 22px;
    }

    .quality-richtext > :last-child {
        margin-bottom: 0;
    }

    .quality-quote {
        margin: 30px 0;
    }

    .quality-certificates {
        padding-block: 42px 48px;
    }

    .quality-certificates-title {
        margin-bottom: 20px;
    }

    .quality-certificates-list {
        gap: 12px 35px;
    }

    .quality-certificate {
        gap: 14px;
    }

    .quality-cta {
        padding-block: 46px;
    }

    .quality-cta-inner {
        gap: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.quality-page {
        scroll-behavior: auto;
        scroll-snap-type: none !important;
    }

    .quality-hero-media {
        opacity: 1;
        transition: none;
    }

    .quality-title::before {
        visibility: visible;
    }

    .quality-title-typing {
        display: none;
    }

    .quality_wrap a,
    .quality-cta-arrow,
    .quality-cta-arrow img,
    .quality-cta-arrow::after {
        transition: none;
    }
}