/* -------------------------------------------------------------
 * NIBBANA Israel Web Style System
 * Modern HSL Design System, responsive grid layout, and transitions
 * ------------------------------------------------------------- */

/* Define Global Variables */
:root {
    /* Colors */
    --color-primary: HSL(170, 45%, 28%);       /* Deep Forest Teal */
    --color-primary-light: HSL(170, 35%, 45%); /* Mid-tone Teal */
    --color-accent: HSL(168, 55%, 62%);        /* Minty Seafoam Green */
    --color-accent-light: HSL(168, 70%, 90%);  /* Soft Mint */
    --color-dark: HSL(215, 12%, 20%);          /* Dark Slate Charcoal */
    --color-light: HSL(170, 20%, 97%);         /* Soft Sage Off-White */
    --color-white: HSL(0, 0%, 100%);           /* Pure White */
    --color-gray: HSL(0, 0%, 90%);             /* Soft light gray */
    --color-gray-dark: HSL(215, 5%, 60%);      /* Slate Gray text */
    --color-bloom: HSL(194, 30%, 48%);         /* Bloom Slate Blue */
    --color-gold: HSL(45, 96%, 52%);           /* Energy → money gold */
    --color-gold-deep: HSL(40, 90%, 45%);

    /* Gradients */
    --grad-primary: linear-gradient(135deg, HSL(170,45%,28%) 0%, HSL(178,40%,40%) 55%, HSL(168,55%,55%) 100%);
    --grad-title: linear-gradient(100deg, HSL(170,45%,26%) 0%, HSL(178,48%,38%) 45%, HSL(165,60%,52%) 100%);
    --grad-mint: linear-gradient(135deg, HSL(168,55%,62%) 0%, HSL(178,45%,48%) 100%);
    --grad-gold: linear-gradient(135deg, HSL(45,96%,58%) 0%, HSL(38,92%,48%) 100%);

    /* Glass */
    --glass-bg: rgba(255, 255, 255, 0.65);
    --glass-border: rgba(255, 255, 255, 0.6);

    /* Typography — ONE unified family across the whole site.
       Heebo carries both Hebrew and Latin, so English mode uses it too. */
    --font-hebrew: 'Heebo', sans-serif;
    --font-english: 'Heebo', sans-serif; /* unified (was 'Poppins') */

    /* Layout & Effects */
    --header-height: 80px;
    --border-radius-lg: 24px;
    --border-radius-md: 16px;
    --border-radius-sm: 8px;
    --shadow-sm: 0 6px 18px rgba(16, 50, 45, 0.06);
    --shadow-md: 0 16px 36px rgba(16, 50, 45, 0.10);
    --shadow-lg: 0 30px 60px rgba(16, 50, 45, 0.16);
    --shadow-glow: 0 18px 50px rgba(45, 160, 140, 0.28);
    --transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring-soft: cubic-bezier(0.3, 1.25, 0.45, 1);
    --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-in-out-smooth: cubic-bezier(0.65, 0, 0.35, 1);

    /* Premium layered elevation — softer, multi-stop shadows that read as real depth */
    --elev-1: 0 1px 2px rgba(16, 50, 45, 0.04), 0 2px 6px rgba(16, 50, 45, 0.05);
    --elev-2: 0 2px 4px rgba(16, 50, 45, 0.04), 0 8px 20px rgba(16, 50, 45, 0.08);
    --elev-3: 0 4px 8px rgba(16, 50, 45, 0.05), 0 18px 40px rgba(16, 50, 45, 0.11);
    --elev-4: 0 8px 16px rgba(16, 50, 45, 0.06), 0 32px 64px rgba(16, 50, 45, 0.16);
    --elev-ring: 0 0 0 1px rgba(45, 120, 110, 0.08);

    /* Refined glass surfaces (built only from existing hues) */
    --glass-strong: rgba(255, 255, 255, 0.72);
    --glass-tint: linear-gradient(135deg, rgba(255,255,255,0.78) 0%, rgba(232,248,244,0.55) 100%);
    --hairline: 1px solid rgba(16, 50, 45, 0.08);

    /* Spacing rhythm — consistent vertical & component scale */
    --space-2xs: 6px;
    --space-xs: 12px;
    --space-sm: 20px;
    --space-md: 32px;
    --space-lg: 56px;
    --space-xl: 88px;
    --space-2xl: 128px;

    /* Tints derived from palette for subtle surface depth */
    --tint-primary: rgba(45, 120, 110, 0.06);
    --tint-accent: rgba(104, 211, 192, 0.10);

    --content-max: 1280px;
    --reveal-distance: 30px;
}

/* Global Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-family: var(--font-hebrew);
    background-color: var(--color-light);
    color: var(--color-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-tap-highlight-color: transparent;
}

/* Subtle palette-derived depth on the page background (no new colors) */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60% 50% at 85% -5%, var(--tint-accent) 0%, transparent 60%),
        radial-gradient(55% 45% at 0% 100%, var(--tint-primary) 0%, transparent 55%);
}

/* Premium selection + custom scrollbar */
::selection {
    background: var(--color-accent-light);
    color: var(--color-primary);
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(45, 120, 110, 0.28);
    border-radius: 99px;
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(45, 120, 110, 0.5); background-clip: content-box; }
html { scrollbar-color: rgba(45, 120, 110, 0.35) transparent; scrollbar-width: thin; }

/* RTL / LTR Core setups */
html[dir="rtl"] {
    font-family: var(--font-hebrew);
}

html[dir="ltr"] {
    font-family: var(--font-english);
}

/* Form controls don't inherit font by default — force the unified family
   onto every input, textarea, select and button so nothing falls back to
   the browser's system UI font. */
button, input, optgroup, select, textarea {
    font-family: inherit;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    line-height: 1.6;
}

ul, ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-smooth);
}

/* Global typographic polish — refined rhythm & wrapping */
h1, h2, h3, h4 {
    text-wrap: balance;
    letter-spacing: -0.01em;
    line-height: 1.12;
}
p {
    text-wrap: pretty;
}
:focus-visible {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Header & Navigation */
.site-header {
    height: var(--header-height);
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: var(--transition-smooth);
}

.header-container {
    max-width: 1280px;
    height: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    position: relative;
}

/* Logo Design */
.logo-wrapper {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

/* Real logo image — proportions locked so it can never stretch/smear */
.logo-img {
    height: 46px;
    width: auto;
    aspect-ratio: 1071 / 285;   /* native ratio, hard-locked */
    object-fit: contain;        /* never distort, even if both axes get bounded */
    flex-shrink: 0;             /* don't let flex squeeze it */
    display: block;
    /* render on its own layer to avoid the backdrop-filter header softening it */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.logo-accent {
    font-size: 24px;
    font-weight: 900;
    color: var(--color-primary);
    letter-spacing: 1px;
}

.logo-text {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-gray-dark);
    letter-spacing: 2.5px;
    margin-top: 2px;
}

/* Navigation Tabs */
.tabs-navigation {
    position: relative;
    height: 100%;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-list {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 4px;
}

.nav-item {
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-link {
    padding: 8px 18px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-dark);
    border-radius: 20px;
    position: relative;
    z-index: 2;
}

.nav-link:hover, .nav-link.active {
    color: var(--color-primary);
}

/* Navigation Sliding Underline */
.nav-underline {
    position: absolute;
    bottom: 20px;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0;
    z-index: 1;
}

/* Action Panel & Buttons */
.action-panel {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-shrink: 0;
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
}

.lang-btn {
    color: var(--color-gray-dark);
    padding: 4px;
}

.lang-btn.active {
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-accent);
}

.lang-separator {
    color: var(--color-gray);
}

.cta-button {
    background: var(--grad-primary);
    color: var(--color-white) !important;
    padding: 11px 24px;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(16, 80, 70, 0.25);
    transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease;
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(16, 80, 70, 0.35);
}

/* Mobile Nav Toggle Button */
.mobile-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 1100;
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: 2px;
    transition: var(--transition-smooth);
}

/* Main Content Area */
.main-content {
    flex-grow: 1;
    margin-top: var(--header-height);
    position: relative;
    min-height: calc(100vh - var(--header-height) - 80px);
}

/* Section Switching Animations (SPA) */
.tab-section {
    display: none;
    opacity: 0;
    padding: 60px 24px;
    max-width: 1200px;
    margin: 0 auto;
    transform: translateY(15px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.tab-section.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Section Header Styles */
.section-header {
    text-align: center;
    margin-bottom: 50px;
    /* Stack tag → title → description vertically and centre them, so a short
       title never sits beside the tag chip on the same line (RTL safe). */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-tag {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 16px;
    border-radius: 50px;
    background: var(--color-accent-light);
    border: 1px solid rgba(45, 160, 140, 0.18);
}

.section-title {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 900;
    line-height: 1.25;
    background: var(--grad-title);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-primary); /* fallback */
    display: inline-block;
}

/* centered accent underline under headers */
.section-header .section-title::after {
    content: '';
    display: block;
    width: 64px;
    height: 4px;
    margin: 18px auto 0;
    border-radius: 4px;
    background: var(--grad-mint);
}

.section-description {
    font-size: 18px;
    color: var(--color-gray-dark);
    max-width: 800px;
    margin: 16px auto 0;
}

/* -------------------------------------------------------------
 * 1. HOME SECTION STYLING
 * ------------------------------------------------------------- */
.hero-section {
    background: #0b0f19;
    /* Full-bleed: break out of the 1200px centered container, edge to edge.
       --sbw (set in JS) is the scrollbar width; subtracting it makes the hero
       exactly the VISIBLE width and centres it on the visible area, so there's
       no corner gap regardless of RTL/LTR or which side the scrollbar sits on. */
    width: calc(100vw - var(--sbw, 0px));
    margin-inline: calc(50% - 50vw + (var(--sbw, 0px) / 2));
    margin-top: -60px; /* cancel the .tab-section top padding so it sits flush under the header */
    border-radius: 0;
    padding: clamp(100px, 14vw, 160px) clamp(28px, 8vw, 120px) clamp(48px, 7vw, 110px);
    min-height: min(90vh, 880px);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
    box-shadow: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

/* Hide the old grain texture on the photo hero
   (orbs are kept — restyled further down as ambient light layers) */
.hero-grain {
    display: none !important;
}

/* Readability scrim over the photo (stronger on the title side).
   The side gradient has to follow the TEXT, not a fixed edge: the headline
   sits right in Hebrew and left in English, and the brightest part of the clip
   is the white wireframe tower on the left. Gradients have no logical
   direction, so the side pass is swapped via a [dir] override below. */
.hero-section {
    --hero-scrim-side: linear-gradient(to left, rgba(7, 18, 28, 0.62) 0%, rgba(7, 18, 28, 0.28) 42%, rgba(7, 18, 28, 0.05) 70%, transparent 100%);
}
html[dir="ltr"] .hero-section {
    --hero-scrim-side: linear-gradient(to right, rgba(7, 18, 28, 0.68) 0%, rgba(7, 18, 28, 0.34) 42%, rgba(7, 18, 28, 0.06) 70%, transparent 100%);
}
.hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        /* bottom-right corner mask — hides the clip's baked-in "Gemini" watermark, blends into the scrim.
           Stays physical: the watermark is burned into the video and never flips with dir. */
        radial-gradient(290px 175px at 100% 100%, rgba(7, 18, 28, 0.97) 0%, rgba(7, 18, 28, 0.82) 38%, rgba(7, 18, 28, 0.35) 66%, transparent 86%),
        var(--hero-scrim-side),
        linear-gradient(to top, rgba(7, 18, 28, 0.45) 0%, transparent 38%);
}

/* -------------------------------------------------------------
 * HERO VIDEO (skyline wireframe-to-green clip, plays on first scroll)
 * ------------------------------------------------------------- */
.hero-video {
    position: absolute;
    /* The source clip has a ~3% black band baked down its LEFT edge (and a
       smaller one along the bottom). object-fit:cover fills the width exactly,
       so there's no room to shift it away. Instead the element is oversized and
       pinned to the clean TOP-RIGHT corner, so the extra width spills past the
       LEFT edge and the extra height past the BOTTOM — both black bands get
       clipped by the hero's overflow:hidden. No transform is used here, so the
       scroll parallax (which sets an inline transform) doesn't fight it. */
    top: 0;
    right: 0;
    left: auto;
    width: 110%;                  /* +10% spills off the left edge → crops the ~3% left band */
    height: 124%;                 /* overflow downward → crops the bottom band + watermark */
    object-fit: cover;
    object-position: center top;  /* anchor to the top (no upward stretch) */
    z-index: 1;                   /* above the static photo, below the scrim + content */
    pointer-events: none;
}

/* Corner patch hiding the clip's baked-in white NIBBANA logo (top-right of
   the video frame). object-fit's centre-crop makes the logo's on-screen spot
   drift with viewport width — at wide aspect ratios it sits ~86-96% across,
   at narrow ones it self-crops past the right edge — so the patch is sized
   in vw to track it. Backdrop blur + dim smears the white mark into the sky
   on every frame (grey or green) with no colour guessing; the mask fades the
   patch edges so there is no visible seam. Physical top/right on purpose:
   the logo is baked into the video, which never flips with dir. */
.hero-logo-mask {
    position: absolute;
    top: 0;
    right: 0;
    width: clamp(220px, 24vw, 640px);
    height: clamp(130px, 12vw, 330px);
    z-index: 2;                   /* above the video, below the content */
    pointer-events: none;
    background: rgba(10, 20, 30, 0.24);
    -webkit-backdrop-filter: blur(26px) brightness(0.85) saturate(0.85);
    backdrop-filter: blur(26px) brightness(0.85) saturate(0.85);
    /* Two intersected linear fades → opacity is exactly 0 at the patch's
       left and bottom edges (a radial can't zero both edges without leaving
       a visible cut line), so the blur dissolves with no seam. */
    -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 98%),
                        linear-gradient(to bottom, #000 58%, transparent 97%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to left, #000 55%, transparent 98%),
                linear-gradient(to bottom, #000 58%, transparent 97%);
    mask-composite: intersect;
}
/* No backdrop-filter support → fall back to an opaque corner scrim in the
   same dark tone the hero's edge gradients already use. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hero-logo-mask {
        background: radial-gradient(140% 140% at 100% 0%,
            rgba(7, 18, 28, 0.96) 0%,
            rgba(7, 18, 28, 0.9) 45%,
            rgba(7, 18, 28, 0.4) 72%,
            transparent 95%);
    }
}

/* Hero content sits above everything */
.hero-section .hero-content {
    z-index: 4;
}

@keyframes heroGradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Floating blurred orbs */
.hero-orbs {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.5;
    will-change: transform;
}

.orb-1 {
    width: 320px; height: 320px;
    background: HSL(168, 70%, 60%);
    top: -90px; left: -60px;
    animation: float1 14s ease-in-out infinite;
}

.orb-2 {
    width: 260px; height: 260px;
    background: HSL(150, 65%, 55%);
    bottom: -110px; right: 8%;
    animation: float2 17s ease-in-out infinite;
}

.orb-3 {
    width: 200px; height: 200px;
    background: HSL(45, 90%, 60%);
    top: 30%; right: -50px;
    opacity: 0.35;
    animation: float1 20s ease-in-out infinite reverse;
}

@keyframes float1 {
    0%,100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(40px, 30px) scale(1.12); }
}

@keyframes float2 {
    0%,100% { transform: translate(0,0) scale(1); }
    50% { transform: translate(-50px, -24px) scale(1.08); }
}

/* Subtle grain texture */
.hero-grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.06;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-content {
    max-width: 600px;
    position: relative;
    z-index: 2;
}

.hero-title {
    font-size: clamp(34px, 5.4vw, 56px);
    font-weight: 900;
    line-height: 1.12;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
    text-shadow: 0 6px 30px rgba(0, 0, 0, 0.18);
}

/* Solo hero — vertically centered, anchored to the reading edge so the
   headline owns the frame: right in Hebrew (RTL), left in English (LTR).
   These MUST be logical, not physical — hard-coded `right`/`text-align:right`
   is what kept the English headline stuck on the right-hand side. */
.hero-content-solo {
    position: absolute;
    /* Vertically centered via margin-auto (NOT transform) so the scroll
       parallax — which animates `transform` — can't wipe out the centering
       and snap the text on first scroll. Position stays pinned on refresh. */
    top: 0;
    bottom: 0;
    height: max-content;
    margin-top: auto;
    margin-bottom: auto;
    inset-inline-start: clamp(32px, 8vw, 120px);
    inset-inline-end: auto;
    max-width: 620px;
    text-align: start;
    z-index: 4;
}
/* Brand kicker — anchors the headline and makes the brand unmistakable */
.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: clamp(13px, 1.4vw, 16px);
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--color-accent);
    margin-bottom: 22px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}
/* decorative kicker dash removed per request */
.hero-title-solo {
    font-size: clamp(46px, 6.4vw, 80px);
    font-weight: 900;
    line-height: 1.05;
    margin-bottom: 26px;
    letter-spacing: -1px;
    /* top line stays pure white for contrast against the sky */
    color: #fff;
    -webkit-text-fill-color: #fff;
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55), 0 0 50px rgba(0, 0, 0, 0.25);
}
/* Bottom line "לערך עסקי" carries the brand green */
.hero-title-solo em {
    font-style: normal;
    /* bright mint gradient — high contrast against the dark hero video */
    background: linear-gradient(100deg, HSL(160, 78%, 80%) 0%, HSL(168, 64%, 64%) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: HSL(165, 66%, 74%); /* fallback — light mint */
    filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.6));
}
/* decorative accent underline removed per request */

/* English runs much longer than the Hebrew for the same headline
   ("From environmental risk" vs "מסיכון סביבתי"), so at the Hebrew measure it
   broke into four ragged lines with "risk" stranded alone. Give LTR a wider
   column and a slightly smaller cap so the intended two-line break holds. */
html[dir="ltr"] .hero-content-solo { max-width: 860px; }
html[dir="ltr"] .hero-title-solo { font-size: clamp(40px, 5.2vw, 66px); }
html[dir="ltr"] .hero-kicker {
    /* the LTR side of the frame is the bright wireframe tower — the mint
       kicker needs a harder shadow than it does over the dark sky */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 2px 14px rgba(0, 0, 0, 0.7);
}

@media (max-width: 767px) {
    .hero-content-solo { max-width: 88%; inset-inline-start: 20px; }
    .hero-title-solo { font-size: clamp(34px, 11vw, 52px); }
    .hero-kicker { font-size: 12px; margin-bottom: 16px; }
}

.hero-subtitle {
    font-size: 22px;
    font-weight: 400;
    opacity: 0.9;
    line-height: 1.5;
    margin-bottom: 40px;
}

.btn {
    display: inline-block;
    padding: 15px 38px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s var(--ease-spring), box-shadow 0.35s ease;
}

/* Sheen sweep on hover for all buttons */
.btn::after,
.cta-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}

.btn:hover::after,
.cta-button:hover::after {
    left: 130%;
}

.btn-primary {
    background: var(--grad-mint);
    color: var(--color-primary);
    box-shadow: 0 10px 26px rgba(45, 180, 150, 0.35);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(45, 180, 150, 0.45);
}

/* Clients logo grid */
.clients-section {
    margin-top: 80px;
    text-align: center;
}

.section-subtitle {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-gray-dark);
    margin-bottom: 30px;
}

.logo-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
}

.logo-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray);
    border-radius: var(--border-radius-sm);
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90px;
    font-weight: 700;
    font-size: 18px;
    color: var(--color-primary-light);
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.logo-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
    color: var(--color-primary);
}

/* Intro Strategy Columns */
.strategy-intro-section {
    margin-top: 80px;
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.intro-card h2 {
    font-size: 28px;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1.4;
    border-inline-start: 4px solid var(--color-accent);
    padding-inline-start: 20px;
}

.intro-card p {
    font-size: 17px;
    color: var(--color-dark);
    margin-bottom: 16px;
    line-height: 1.7;
}

.intro-card p:last-child {
    margin-bottom: 0;
}

/* -------------------------------------------------------------
 * 2. SERVICES SECTION STYLING (3D Cards)
 * ------------------------------------------------------------- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-card {
    height: 380px;
    perspective: 1000px;
    cursor: pointer;
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-md);
    padding: 40px 30px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: var(--shadow-md);
}

.card-front {
    background-color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.card-icon {
    font-size: 40px;
    color: var(--color-primary);
    background: var(--color-accent-light);
    width: 80px;
    height: 80px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.card-front h3 {
    font-size: 22px;
    font-weight: 900;
    color: var(--color-primary);
    margin-top: 30px;
}

.card-front p {
    font-size: 15px;
    color: var(--color-gray-dark);
    margin-top: 10px;
}

.card-back {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}

.card-back h3 {
    font-size: 18px;
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
    margin-bottom: 0;
}

.card-list {
    flex-grow: 1;
}

.card-list li {
    font-size: 15px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-list li::before {
    content: '\f104'; /* FontAwesome angle-left */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--color-accent);
}

/* Card Hover Flips */
.service-card:hover .card-front {
    transform: rotateY(-180deg);
}

.service-card:hover .card-back {
    transform: rotateY(0deg);
}

.service-card:hover .card-icon {
    background: var(--color-primary);
    color: var(--color-accent);
}

/* =============================================================
 * SERVICES — leading services (icon cards) + additional services
 * (simple two-line list). Logical (inline-start) properties keep
 * it RTL-first and mirror it cleanly in LTR.
 * ============================================================= */
.services-lists {
    max-width: 1080px;
    margin-inline: auto;
}
/* Tighter gap between the tab header and the first services group
   (double class beats the elevation-layer .section-header rule) */
.section-header.section-header--tight { margin-bottom: clamp(18px, 2.5vw, 28px); }
.services-group + .services-group { margin-top: clamp(40px, 5vw, 56px); }
.services-group-title {
    font-size: clamp(19px, 2.2vw, 24px);
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 18px;
}
.lead-services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.more-services-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 40px;
    margin: 0;
    padding: 0;
}
.more-service {
    padding: 12px 0;
    border-bottom: 1px solid rgba(45, 160, 140, 0.14);
}
.more-service .more-name {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.35;
}
.more-service .more-sub {
    display: block;
    font-size: 13.5px;
    color: var(--color-gray-dark);
    line-height: 1.55;
    margin-top: 2px;
}
@media (max-width: 767px) {
    .lead-services-grid,
    .more-services-list { grid-template-columns: 1fr; }
}
.svc-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 22px;
    background: linear-gradient(162deg, #ffffff 0%, #f3faf7 100%);
    border: 1px solid rgba(45, 160, 140, 0.12);
    border-radius: 16px;
    box-shadow: var(--elev-1);
    transition: transform 0.35s var(--ease-out-expo),
                box-shadow 0.35s ease, border-color 0.35s ease;
}
.svc-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--elev-3);
    border-color: rgba(45, 160, 140, 0.32);
}
.svc-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    background: var(--grad-mint);
    border-radius: 13px;
    box-shadow: 0 10px 22px rgba(45, 180, 150, 0.28);
}
.svc-text h3 {
    font-size: 16.5px;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1.3;
    margin: 2px 0 5px;
}
.svc-text p {
    font-size: 13.5px;
    color: var(--color-gray-dark);
    line-height: 1.55;
    margin: 0;
}
@media (max-width: 575px) {
    .lead-services-grid { gap: 12px; }
    .svc-item { padding: 16px 18px; }
}

/* -------------------------------------------------------------
 * 3. PROCESS SECTION STYLING (Circular Node Map)
 * ------------------------------------------------------------- */
.process-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
    margin-top: 40px;
}

.process-circular-wrapper {
    position: relative;
    width: 480px;
    height: 480px;
    border: 2px dashed rgba(44, 42, 42, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.circular-node-center {
    width: 200px;
    height: 200px;
    background-color: var(--color-white);
    border: 4px solid var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    z-index: 10;
}

.node-center-content h4 {
    font-size: 14px;
    color: var(--color-accent);
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 8px;
}

.active-node-description {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.4;
}

.process-nodes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    --rotor: 0deg; /* global ring rotation, set by app.js on click; nodes inherit it */
}

.process-node {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 76px;
    height: 76px;
    margin-top: -38px;
    margin-left: -38px;
    background-color: var(--color-white);
    border: 2px solid var(--color-primary-light);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transform: rotate(calc(var(--angle) + var(--rotor))) translate(240px) rotate(calc(-1 * (var(--angle) + var(--rotor))));
    transition: transform 0.9s var(--ease-out-expo),
                background-color 0.4s var(--ease-out-soft),
                border-color 0.4s var(--ease-out-soft),
                box-shadow 0.4s var(--ease-out-soft);
    z-index: 5;
}

.node-num {
    font-size: 18px;
    font-weight: 900;
    color: var(--color-primary);
}

.node-label {
    display: none;
    position: absolute;
    white-space: nowrap;
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    z-index: 15;
}

/* Circular Node Hover/Active */
.process-node:hover, .process-node.active {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    transform: rotate(calc(var(--angle) + var(--rotor))) translate(240px) rotate(calc(-1 * (var(--angle) + var(--rotor)))) scale(1.15);
}

.process-node:hover .node-label, .process-node.active .node-label {
    display: block;
    top: -40px;
}

/* Side details panel */
.process-details-panel {
    flex-grow: 1;
    background-color: var(--color-white);
    padding: 40px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(0,0,0,0.03);
    min-height: 250px;
    display: flex;
    align-items: center;
}

.step-detail-card {
    transition: var(--transition-smooth);
}

.step-detail-card h3 {
    font-size: 24px;
    font-weight: 900;
    color: var(--color-primary);
    margin-bottom: 16px;
}

.step-detail-card p {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-dark);
}

.step-detail-card.hidden {
    display: none;
}

/* -------------------------------------------------------------
 * 4. CARBON MANAGEMENT (BLOOM PLATFORM)
 * ------------------------------------------------------------- */
.carbon-platform-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    margin-top: 40px;
}

.platform-info .highlight-text {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.4;
    margin-bottom: 20px;
}

.platform-info p {
    font-size: 17px;
    color: var(--color-dark);
    margin-bottom: 20px;
    line-height: 1.7;
}

.platform-features {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.p-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 700;
}

.p-feature i {
    color: var(--color-accent);
    background-color: var(--color-primary);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* Dashboard Mockup Styling */
.dashboard-mockup {
    background-color: var(--color-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(0, 0, 0, 0.05);
    overflow: hidden;
    padding: 24px;
}

.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-gray);
    padding-bottom: 16px;
    margin-bottom: 24px;
}

.dash-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark);
}

.dash-status {
    background-color: rgba(104, 211, 192, 0.2);
    color: var(--color-primary-light);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
}

.dash-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 30px;
}

.metric-box {
    background-color: var(--color-light);
    border: 1px solid var(--color-gray);
    border-radius: var(--border-radius-sm);
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.m-label {
    font-size: 12px;
    color: var(--color-gray-dark);
    margin-bottom: 4px;
}

.m-val {
    font-size: 24px;
    font-weight: 900;
    color: var(--color-primary);
}

.m-change {
    font-size: 11px;
    font-weight: 700;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.m-change.positive {
    color: var(--color-primary-light);
}

/* SVG Chart Mockup */
.dash-chart-mock {
    height: 150px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    padding: 0 10px;
    border-bottom: 2px solid var(--color-gray);
}

.chart-bar {
    background-color: var(--color-bloom);
    width: 100%;
    height: var(--height);
    border-radius: 6px 6px 0 0;
    position: relative;
    transition: var(--transition-smooth);
}

.chart-bar:hover {
    background-color: var(--color-accent);
}

.chart-bar span {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--color-gray-dark);
    font-weight: 500;
}

/* -------------------------------------------------------------
 * 5. TEAM SECTION STYLING
 * ------------------------------------------------------------- */
.team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 50px;
}

.team-card {
    background-color: var(--color-white);
    border-radius: var(--border-radius-md);
    padding: 30px;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 24px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: var(--transition-smooth);
}

.team-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.team-card.large {
    padding: 40px;
}

.member-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: var(--color-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 3px solid var(--color-accent);
}

.member-photo-sm {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--color-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border: 2px solid var(--color-primary-light);
}

.photo-placeholder {
    font-size: 40px;
    color: var(--color-primary-light);
}

.member-photo-sm .photo-placeholder {
    font-size: 28px;
}

.member-info h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary);
}

.member-role {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-accent);
    display: block;
    margin-bottom: 10px;
}

.member-bio {
    font-size: 14px;
    color: var(--color-dark);
    line-height: 1.5;
}

.member-social {
    margin-top: 12px;
}

.member-social a {
    font-size: 20px;
    color: var(--color-gray-dark);
}

.member-social a:hover {
    color: var(--color-primary);
}

.sub-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.sub-team-grid .team-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
}

/* -------------------------------------------------------------
 * 6. CONTACT & VALUES STYLING
 * ------------------------------------------------------------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-top: 40px;
}

.contact-form-wrapper {
    background-color: var(--color-white);
    padding: 40px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}

.contact-form-wrapper h3, .principles-wrapper h3 {
    font-size: 24px;
    font-weight: 900;
    color: var(--color-primary);
    margin-bottom: 24px;
}

.lead-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-group label {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-dark);
}

.lead-form input, .lead-form textarea {
    border: none;
    border-bottom: 1px solid var(--color-gray);
    padding: 10px 0;
    font-size: 16px;
    font-family: var(--font-hebrew);
    background: transparent;
    transition: var(--transition-smooth);
}

.lead-form input:focus, .lead-form textarea:focus {
    outline: none;
    border-bottom: 2px solid var(--color-primary);
}

.submit-btn {
    grid-column: span 2;
    border: none;
    background-color: var(--color-primary);
    color: var(--color-white);
    margin-top: 10px;
    font-size: 16px;
}

.submit-btn:hover {
    background-color: var(--color-primary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.form-feedback {
    margin-top: 20px;
    padding: 12px;
    border-radius: var(--border-radius-sm);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.form-feedback.success {
    background-color: rgba(104, 211, 192, 0.2);
    color: var(--color-primary);
}

.form-feedback.error {
    background-color: rgba(239, 68, 68, 0.1);
    color: rgb(239, 68, 68);
}

/* Guided Principles Checklist */
.principles-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.principle-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.p-num {
    font-size: 28px;
    font-weight: 900;
    color: var(--color-accent);
    line-height: 1;
}

.principle-item h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.principle-item p {
    font-size: 15px;
    color: var(--color-gray-dark);
    line-height: 1.5;
}

/* -------------------------------------------------------------
 * FOOTER
 * ------------------------------------------------------------- */
.site-footer {
    background-color: var(--color-dark);
    color: var(--color-white);
    padding: 30px 24px;
    margin-top: 80px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-logo {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: var(--color-accent);
    text-transform: uppercase;
}

/* -------------------------------------------------------------
 * RESPONSIVE & MOBILE OVERRIDES
 * ------------------------------------------------------------- */
@media (max-width: 991px) {
    /* Mobile / tablet header: switch the horizontal tabs to a hamburger overlay
       so the nav never crowds or overlaps the logo on narrower screens. */
    .mobile-nav-toggle {
        display: flex;
    }

    .tabs-navigation {
        display: none; /* Toggled open via JS */
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--header-height));
        background-color: var(--color-white);
        flex-direction: column;
        justify-content: flex-start;
        padding: 40px;
        align-items: center;
        gap: 24px;
        border-top: 1px solid var(--color-gray);
        overflow-y: auto;
    }

    .tabs-navigation.open {
        display: flex;
    }

    .nav-list {
        flex-direction: column;
        align-items: center;
        gap: 28px;
        height: auto;
    }

    .nav-item {
        height: auto;
    }

    .nav-link {
        font-size: 20px;
    }

    .nav-underline {
        display: none;
    }

    /* Lang switch + CTA are reachable via the "צור קשר" tab on mobile */
    .action-panel {
        display: none;
    }

    .hero-section {
        flex-direction: column;
        padding: 50px 30px;
        text-align: center;
    }
    .hero-title {
        font-size: 36px;
    }
    .logo-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .intro-grid {
        grid-template-columns: 1fr;
    }
    .services-grid {
        grid-template-columns: 1fr 1fr;
    }
    .process-container {
        flex-direction: column;
    }
    .carbon-platform-container {
        grid-template-columns: 1fr;
    }
    .team-grid {
        grid-template-columns: 1fr;
    }
    .sub-team-grid {
        grid-template-columns: 1fr;
    }
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .process-circular-wrapper {
        width: 320px;
        height: 320px;
    }

    .circular-node-center {
        width: 150px;
        height: 150px;
    }

    .process-node {
        transform: rotate(calc(var(--angle) + var(--rotor))) translate(150px) rotate(calc(-1 * (var(--angle) + var(--rotor))));
        width: 60px;
        height: 60px;
        margin-top: -30px;
        margin-left: -30px;
    }

    .process-node:hover, .process-node.active {
        transform: rotate(calc(var(--angle) + var(--rotor))) translate(150px) rotate(calc(-1 * (var(--angle) + var(--rotor)))) scale(1.1);
    }
}

/* -------------------------------------------------------------
 * WHO WE ARE (About tab)
 * ------------------------------------------------------------- */
.whoweare-section {
    margin-top: 80px;
}

.whoweare-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 50px;
    align-items: start;
}

.whoweare-text p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--color-dark);
    margin-bottom: 18px;
}

.whoweare-text p:first-child {
    font-weight: 700;
    color: var(--color-primary);
}

/* ── "מי אנחנו" — text-forward editorial layout (no icon cards) ── */
.wwa-lead {
    max-width: 760px;
    margin: 0 auto 56px;
    text-align: center;
}
.wwa-lead-text {
    font-size: clamp(19px, 2.2vw, 24px);
    line-height: 1.8;
    color: var(--color-dark);
    font-weight: 400;
}
.wwa-lead-text strong {
    color: var(--color-primary);
    font-weight: 700;
}

/* Three points: clean text columns separated by an accent rule, no boxes/icons */
.wwa-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(28px, 4vw, 56px);
    max-width: 1000px;
    margin: 0 auto 56px;
}
.wwa-point {
    text-align: start;
    padding-top: 22px;
    border-top: 2px solid var(--color-accent);
}
.wwa-point h3 {
    font-size: clamp(19px, 2vw, 22px);
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 12px;
}
.wwa-point p {
    font-size: clamp(15.5px, 1.6vw, 17px);
    line-height: 1.75;
    color: var(--color-dark);
    opacity: 0.85;
}

/* Closing statement — one strong banner, the payoff of the section */
.wwa-callout {
    max-width: 1000px;
    margin: 0 auto;
    background: var(--grad-primary);
    border-radius: var(--border-radius-lg);
    padding: clamp(32px, 5vw, 48px) clamp(28px, 6vw, 64px);
    text-align: center;
    box-shadow: var(--shadow-glow);
}
.wwa-callout p {
    margin: 0;
    color: var(--color-white);
    font-size: clamp(18px, 2.2vw, 24px);
    line-height: 1.65;
    font-weight: 500;
}
.wwa-callout strong {
    /* bright pale mint — clearly legible against the deep-teal callout */
    color: HSL(158, 85%, 84%);
    font-weight: 800;
}

@media (max-width: 767px) {
    .wwa-lead { margin-bottom: 40px; }
    .wwa-points { grid-template-columns: 1fr; gap: 28px; margin-bottom: 44px; }
}

.parent-companies {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.parent-card {
    background-color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    transition: var(--transition-smooth);
}

.parent-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.parent-card img {
    height: 54px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    margin-bottom: 14px;
    border-radius: 6px;
}

.parent-card p {
    font-size: 14px;
    color: var(--color-gray-dark);
    line-height: 1.6;
}

/* -------------------------------------------------------------
 * CLIENTS — HONEYCOMB
 * ------------------------------------------------------------- */
.clients-honeycomb {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    max-width: 820px;
    margin: 0 auto;
}

.hex {
    width: 150px;
    height: 168px;
    transition: var(--transition-smooth);
}

.hex.hex-offset {
    margin-top: 26px; /* margin (not transform) so reveal/hover transforms stay free */
}

.hex-inner {
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background-color: var(--color-white);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    transition: var(--transition-smooth);
}

.hex:hover {
    transform: translateY(-6px);
}

.hex.hex-offset:hover {
    transform: translateY(-6px);
}

.hex:hover .hex-inner {
    background-color: var(--color-accent-light);
}

.hex-inner img {
    max-width: 100%;
    max-height: 72px;
    object-fit: contain;
    filter: grayscale(40%);
    transition: var(--transition-smooth);
}

.hex:hover .hex-inner img {
    filter: grayscale(0);
}

/* -------------------------------------------------------------
 * CLIENTS — AUTO CAROUSEL
 * ------------------------------------------------------------- */
.clients-carousel {
    /* --logo-h is the single knob for logo scale. Every tier below is derived
       from it, so the responsive blocks only ever override this one value and
       the whole optical ladder scales with it proportionally. */
    --logo-h: 46px;
    --logo-gap: 48px;
    --logo-pad: 16px;
    margin-top: 50px;
    overflow: hidden;
    direction: ltr;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.carousel-track {
    display: flex;
    align-items: center;
    gap: var(--logo-gap);
    width: max-content;
    /* Long duration = gentle glide; the track holds two identical sets and
       travels -50%, so speed scales with the duration alone. */
    animation: scrollLogos 120s linear infinite;
}

/* Entrance: the carousel fades in ("appears") — opacity only, no slide.
   The .reveal class is added by app.js; these overrides cancel its
   translate/scale so only the fade remains. */
.clients-carousel.reveal,
.clients-carousel.reveal.in-view { transform: none; }

.clients-carousel:hover .carousel-track {
    animation-play-state: paused;
}

.carousel-item {
    /* Sized to its own logo rather than a fixed width, so the ink-to-ink
       rhythm is constant: pad + gap + pad = 80px between every neighbouring
       pair. A fixed item width would strand narrow marks (Maccabi Haifa) in
       the middle of a wide empty box and bunch the long wordmarks. */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    max-width: 280px;
    padding: 0 var(--logo-pad);
}

.carousel-item img {
    /* HEIGHT is the only dimension that decides a logo's size. max-width is a
       runaway guard at 100% of the item, never the binding constraint — the
       old 128px cap is what made wide marks (Nova, Bank Hapoalim) shrink to
       half the height of square ones (Maccabi Haifa, Ashdod).
       The height is definite rather than a max so that, combined with the
       width/height attributes on each <img>, the browser can reserve the
       correct box before a lazy image loads. Every source asset is taller
       than its tier, so this renders identically to a max-height. */
    width: auto;
    height: var(--logo-h);
    max-width: 100%;
    object-fit: contain;
    opacity: 1;
    transition: var(--transition-smooth);
}

/* ---- Optical size ladder -------------------------------------------------
   Equal pixel height does not read as equal size. A long wordmark carries far
   more ink across the row than a compact mark at the same height, so height
   steps down as aspect ratio grows. Tiers approximate h proportional to
   AR^-0.35, which is the blend between equal-height (AR^0) and equal-area
   (AR^-0.5) that reads most evenly. Assign by the logo's trimmed aspect
   ratio; see the class on each <img> in index.html.
   Tuned by eye against the rendered row, not computed: a wide wordmark still
   dominated at 0.87x, so the wide tier drops a full 30% below the default
   instead of 13%. Values are multipliers of --logo-h (46px at desktop), so
   they scale with the breakpoint: wide = 32px, default = 46px, compact = 54px. */
.carousel-item img.logo-compact { height: calc(var(--logo-h) * 1.17); } /* 54px */
.carousel-item img.logo-wide    { height: calc(var(--logo-h) * 0.70); } /* 32px */
/* Some wide logos are DENSE lockups — two or three lines of small type inside
   the same footprint (Gadir, IAA, Ashdod Refinery, Oshira). Dropping those to
   32px makes their type unreadable, so they sit one step up. Detail level, not
   aspect ratio, is what decides this one. */
.carousel-item img.logo-wide.is-detailed { height: calc(var(--logo-h) * 0.87); } /* 40px */

/* Contrast lift, applied per-logo instead of globally. A blanket drop-shadow
   made dark marks (Nova, Barkan, Bank Hapoalim) read heavier than the rest;
   only these two measure under ~3:1 against the cream background. */
.carousel-item img.logo-lift {
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.25));
}

.carousel-item:hover img {
    transform: scale(1.06);
}

/* Text wordmark fallback for clients without a usable logo image */
.carousel-item .client-wordmark {
    font-family: var(--font-hebrew, 'Heebo', sans-serif);
    font-weight: 800;
    font-size: 19px;
    line-height: 1;
    white-space: nowrap;
    color: var(--color-primary);
    letter-spacing: 0.2px;
    padding: 0 4px;
}
.carousel-item .client-wordmark[dir="ltr"] { font-family: var(--font-hebrew); }

@keyframes scrollLogos {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

/* -------------------------------------------------------------
 * WHY US GRID (About tab)
 * ------------------------------------------------------------- */
.why-section {
    margin-top: 80px;
}

.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.why-card {
    background-color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    padding: 32px 26px;
    text-align: center;
    transition: var(--transition-smooth);
}

.why-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
}

.why-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--color-accent-light);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    transition: var(--transition-smooth);
}

.why-card:hover .why-icon {
    background: var(--color-primary);
    color: var(--color-accent);
}

.why-card h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.5;
}

/* -------------------------------------------------------------
 * VISION — sub headers spacing
 * ------------------------------------------------------------- */
.process-subheader,
.services-subheader {
    margin-top: 90px;
}

.vision-principles {
    max-width: 920px;
    margin: 0 auto;
}

/* -------------------------------------------------------------
 * TEAM V2 (photo cards)
 * ------------------------------------------------------------- */
.team-grid-full {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 26px;
    /* Every row takes the tallest card's height, so all 8 cards match and the
       LinkedIn icons sit on one line across both rows, not just within a row. */
    grid-auto-rows: 1fr;
    align-items: stretch;
}

.team-card-v2 {
    background-color: var(--color-white);
    border-radius: var(--border-radius-md);
    padding: 30px 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
    text-align: center;
    transition: var(--transition-smooth);
    /* Flex column so the LinkedIn icon can pin to the card bottom and
       all cards align regardless of bio length */
    display: flex;
    flex-direction: column;
}

.team-card-v2:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-accent);
}

.member-photo-v2 {
    width: 120px;
    height: 120px;
    margin: 0 auto 18px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--color-light);
    border: 3px solid var(--color-accent);
    box-shadow: var(--shadow-sm);
}

.member-photo-v2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.team-card-v2 h3 {
    font-size: 19px;
    font-weight: 900;
    color: var(--color-primary);
}

.team-card-v2 .member-role {
    font-size: 13px;
    min-height: 32px;
    display: block;
    margin: 6px 0 12px;
}

.team-card-v2 .member-bio {
    font-size: 13.5px;
    color: var(--color-gray-dark);
    line-height: 1.55;
}

.team-card-v2 .member-social {
    margin-top: auto;   /* pin to the bottom of the flex-column card */
    padding-top: 14px;
}

.team-card-v2 .member-social a {
    font-size: 22px;
    color: var(--color-primary-light);
}

.team-card-v2 .member-social a:hover {
    color: var(--color-primary);
}

/* -------------------------------------------------------------
 * DIVISIONS
 * ------------------------------------------------------------- */
.divisions-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.division-card {
    background: linear-gradient(160deg, var(--color-white) 0%, var(--color-light) 100%);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    padding: 36px 30px;
    transition: var(--transition-smooth);
}

.division-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
}

.division-icon {
    width: 70px;
    height: 70px;
    border-radius: var(--border-radius-sm);
    background: var(--color-primary);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 22px;
}

.division-card h3 {
    font-size: 22px;
    font-weight: 900;
    color: var(--color-primary);
    margin-bottom: 12px;
}

.division-card p {
    font-size: 15px;
    color: var(--color-dark);
    line-height: 1.7;
}

/* -------------------------------------------------------------
 * BLOG
 * ------------------------------------------------------------- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.blog-card {
    background-color: var(--color-white);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition-smooth);
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.blog-thumb {
    height: 150px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 54px;
    color: var(--color-accent);
}

.blog-body {
    padding: 26px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Small pill/chip — clearly a category tag, not a heading */
.blog-tag {
    align-self: flex-start;
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--color-primary);
    background: var(--color-accent-light);
    border: 1px solid rgba(45, 160, 140, 0.25);
    border-radius: 999px;
    padding: 4px 12px;
    letter-spacing: 0.4px;
    margin-bottom: 12px;
}

/* Title and excerpt occupy a FIXED number of lines whether the text is short
   or long. English runs noticeably longer than the Hebrew for the same post,
   which is what made the three cards ragged. min-height pads a short string up
   to the line count; line-clamp trims a long one down to it — so collapsed
   cards are identical in both languages without needing align-items:stretch
   (which would make one expanded card stretch its row mates). */
.blog-body h3 {
    font-size: 20px;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1.4;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(2 * 1.4em);
}

.blog-body p {
    font-size: 14.5px;
    color: var(--color-gray-dark);
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: calc(3 * 1.65em);
}

.blog-link {
    margin-top: 18px;
    font-weight: 700;
    color: var(--color-primary);
    align-self: flex-start;
}

.blog-link:hover {
    color: var(--color-accent);
}

/* -------------------------------------------------------------
 * CONTACT INFO PANEL
 * ------------------------------------------------------------- */
.contact-info-wrapper {
    background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--color-white);
    padding: 40px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}

.contact-info-wrapper h3 {
    font-size: 24px;
    font-weight: 900;
    margin-bottom: 26px;
    color: var(--color-white);
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.contact-details li {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ci-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.ci-label {
    display: block;
    font-size: 12px;
    opacity: 0.7;
    margin-bottom: 2px;
}

.contact-details a {
    color: var(--color-white);
    font-weight: 700;
    font-size: 16px;
}

.contact-details a:hover {
    color: var(--color-accent);
}

.contact-cta-box {
    margin-top: 36px;
    padding: 24px;
    border-radius: var(--border-radius-md);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-cta-box i {
    font-size: 28px;
    color: var(--color-accent);
}

.contact-cta-box p {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

/* Select styling to match inputs */
.lead-form select {
    border: none;
    border-bottom: 1px solid var(--color-gray);
    padding: 10px 0;
    font-size: 16px;
    font-family: var(--font-hebrew);
    background: transparent;
    color: var(--color-dark);
    transition: var(--transition-smooth);
}

.lead-form select:focus {
    outline: none;
    border-bottom: 2px solid var(--color-primary);
}

/* -------------------------------------------------------------
 * RESPONSIVE — NEW COMPONENTS
 * ------------------------------------------------------------- */
@media (max-width: 991px) {
    .whoweare-grid {
        grid-template-columns: 1fr;
    }
    .why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .divisions-grid {
        grid-template-columns: 1fr;
    }
    .blog-grid {
        grid-template-columns: 1fr;
    }
    .process-subheader,
    .services-subheader {
        margin-top: 60px;
    }
    .contact-info-wrapper {
        order: -1; /* show contact details above the form on stacked layout */
    }
    /* Tablet: scale the whole optical ladder from the one variable so the
       tier relationships (compact/wide/xwide) survive the step down. */
    .clients-carousel {
        --logo-h: 40px;
        --logo-gap: 40px;
        --logo-pad: 14px;
    }
    .carousel-item {
        height: 70px;
        max-width: 240px;
    }
}

@media (max-width: 767px) {
    .why-grid {
        grid-template-columns: 1fr;
    }
    .hex {
        width: 124px;
        height: 140px;
    }
    .hex-inner {
        padding: 22px;
    }
    .team-grid-full {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 18px;
    }
    .member-photo-v2 {
        width: 96px;
        height: 96px;
    }
    /* Mobile: same ladder, one step smaller again. Never reintroduce a
       max-width cap on the img here — that is the bug this section fixes,
       and it bites hardest on narrow screens. */
    .clients-carousel {
        --logo-h: 34px;
        --logo-gap: 32px;
        --logo-pad: 12px;
    }
    .carousel-item {
        height: 60px;
        max-width: 200px;
    }
}

/* -------------------------------------------------------------
 * LTR (English) fine-tuning
 * ------------------------------------------------------------- */
html[dir="ltr"] .lead-form input,
html[dir="ltr"] .lead-form textarea,
html[dir="ltr"] .lead-form select {
    font-family: var(--font-english);
}

html[dir="ltr"] .section-tag {
    letter-spacing: 1.5px;
}

/* ---- Deliberately PHYSICAL properties (do not "convert" these) ----------
   The stylesheet is otherwise on logical properties so it mirrors with `dir`.
   These stay physical on purpose; converting them is a regression:
     .hero-video, .hero-logo-mask  — crop/mask artefacts burned into the video
                                     frame, which never flips with direction
     left:50% + translateX(-50%)   — horizontal CENTRING (.process-node,
     / margin-left:-Npx              .chart-bar span, .turbine-blades .blade,
                                     .skip-link). Not reading direction.
     left:0 + width:100%           — full-bleed bars (.site-header,
                                     .tabs-navigation, .process-nodes)
     .orb-1/2/3                    — ambient blobs deliberately off-canvas
     .cta-button::after, heroSweep — decorative light sweeps; mirroring them
                                     buys nothing visible and risks the anim
   Anything genuinely direction-dependent already uses logical properties or
   an explicit [dir="ltr"] / [dir="rtl"] pair (ticker, blog-link, principle-
   item, hero scrim). */

/* ---- Per-language typography -------------------------------------------
   The whole site is set in Heebo, whose Latin is Roboto-derived. Hebrew has
   no uppercase and almost no descenders, so the metrics that suit it leave
   English display type looking loose and body copy looking tight. These
   rules only fire on lang="en", so the Hebrew baseline is untouched. */
html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] .section-title,
html[lang="en"] .hero-title-solo {
    letter-spacing: -0.015em;   /* Latin display type tightens; Hebrew must not */
    line-height: 1.18;
}
html[lang="en"] h3,
html[lang="en"] h4 {
    letter-spacing: -0.008em;
    line-height: 1.3;
}
html[lang="en"] p,
html[lang="en"] .member-bio,
html[lang="en"] .section-description {
    line-height: 1.72;          /* Latin needs more leading than Hebrew here */
}
/* English runs ~20-30% longer than the Hebrew for the same string, so stop
   short words dangling alone on the last line of headings and leads. */
html[lang="en"] .section-title,
html[lang="en"] .section-description,
html[lang="en"] .hero-subtitle {
    text-wrap: balance;
}

/* Reduced motion: honor user preference */
@media (prefers-reduced-motion: reduce) {
    .carousel-track {
        animation: none;
    }
}

/* -------------------------------------------------------------
 * SCROLL REVEAL SYSTEM
 * ------------------------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s var(--ease-out-expo), transform 0.7s var(--ease-out-expo);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
}

.reveal.in-view {
    opacity: 1;
    transform: none;
}

/* Premium glow on card hover (overrides earlier box-shadows) */
.why-card:hover,
.division-card:hover,
.blog-card:hover,
.team-card-v2:hover,
.parent-card:hover {
    box-shadow: var(--shadow-glow);
}

.hex:hover .hex-inner {
    box-shadow: 0 14px 34px rgba(45, 160, 140, 0.30);
}

/* -------------------------------------------------------------
 * DIVISIONS DROPDOWN MENU
 * ------------------------------------------------------------- */
.nav-item.has-dropdown {
    position: relative;
}

.dropdown {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 210px;
    background: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-md);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.28s ease, transform 0.28s var(--ease-out-expo), visibility 0.28s;
    z-index: 1001;
}

.nav-item.has-dropdown:hover .dropdown,
.nav-item.has-dropdown:focus-within .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-link {
    display: block;
    padding: 11px 16px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: var(--color-dark);
    white-space: nowrap;
    transition: var(--transition-smooth);
}

.dropdown-link:hover {
    background: var(--color-accent-light);
    color: var(--color-primary);
}

/* Division highlight when reached via dropdown */
.division-card.flash,
.division-spec.flash {
    animation: divFlash 1.6s ease;
}

@keyframes divFlash {
    0%, 100% { box-shadow: var(--shadow-sm); }
    25%, 60% { box-shadow: 0 0 0 3px var(--color-accent), var(--shadow-glow); }
}

/* Merged Vision section on the Home page */
.vision-inline-section {
    margin-top: 90px;
}

/* -------------------------------------------------------------
 * DIVISIONS — SPEC SHEETS
 * ------------------------------------------------------------- */
.divisions-specs {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.division-spec {
    background-color: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 36px;
    scroll-margin-top: calc(var(--header-height) + 24px);
    transition: var(--transition-smooth);
}

.division-spec:hover {
    box-shadow: var(--shadow-md);
}

.division-spec-head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--color-gray);
}

.division-spec-head h3 {
    font-size: 26px;
    font-weight: 900;
    color: var(--color-primary);
}

.division-tagline {
    font-size: 15px;
    color: var(--color-gray-dark);
    margin-top: 4px;
    line-height: 1.5;
}

.spec-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 40px;
}

.spec-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.spec-title i {
    color: var(--color-accent);
}

.spec-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.spec-list li {
    position: relative;
    padding-inline-start: 22px;
    font-size: 15px;
    color: var(--color-dark);
    line-height: 1.5;
}

.spec-list li::before {
    content: '\f058'; /* circle-check */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--color-accent);
    position: absolute;
    inset-inline-start: 0;
    top: 3px;
    font-size: 12px;
}

.spec-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.spec-metric {
    background-color: var(--color-light);
    border: 1px solid var(--color-gray);
    border-radius: var(--border-radius-sm);
    padding: 12px 16px;
    min-width: 96px;
}

.sm-val {
    display: block;
    font-size: 20px;
    font-weight: 900;
    color: var(--color-primary);
}

.sm-label {
    display: block;
    font-size: 11px;
    color: var(--color-gray-dark);
    margin-top: 3px;
}

.spec-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.spec-chip {
    background-color: var(--color-accent-light);
    color: var(--color-primary);
    border-radius: 50px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
}

.spec-foot {
    margin-top: 26px;
    padding-top: 16px;
    border-top: 1px dashed var(--color-gray);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gray-dark);
}

@media (max-width: 767px) {
    .spec-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .division-spec {
        padding: 24px;
    }
}

/* Home page integrated sections spacing */
.team-inline-section {
    margin-top: 90px;
}

.honeycomb-section {
    margin-top: 36px;
}

/* Mobile: divisions dropdown expands inline inside the overlay nav */
@media (max-width: 991px) {
    .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 8px 0 0;
        min-width: 0;
        align-items: center;
        gap: 12px;
    }
    .dropdown-link {
        color: var(--color-primary);
        font-size: 17px;
    }
}

/* =============================================================
 * PREMIUM UPGRADE LAYER  (v2 — refined & elegant)
 * Layered over base components via the cascade. Palette unchanged.
 * Motion: transform/opacity only (60fps), honours reduced-motion.
 * ============================================================= */

/* ---- Interactive surface cards: cursor spotlight + refined lift ---- */
.why-card,
.division-card,
.blog-card,
.team-card-v2,
.parent-card {
    position: relative;
    isolation: isolate;
    transition:
        transform 0.55s var(--ease-out-expo),
        box-shadow 0.55s var(--ease-out-expo),
        border-color 0.45s var(--ease-out-expo);
    will-change: transform;
}

/* Soft glow that follows the cursor (--mx/--my set in app.js) */
.why-card::before,
.division-card::before,
.blog-card::before,
.team-card-v2::before,
.parent-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.45s var(--ease-out-soft);
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%),
                rgba(104, 211, 192, 0.18), transparent 62%);
}

.why-card:hover::before,
.division-card:hover::before,
.blog-card:hover::before,
.team-card-v2:hover::before,
.parent-card:hover::before { opacity: 1; }

/* Refined hover (supersedes the earlier flat lift) */
.why-card:hover,
.division-card:hover,
.blog-card:hover,
.team-card-v2:hover,
.parent-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--elev-4);
    border-color: rgba(104, 211, 192, 0.55);
}

/* Icon micro-motion inside why-cards */
.why-card:hover .why-icon {
    transform: translateY(-3px) scale(1.06) rotate(-4deg);
    box-shadow: var(--shadow-glow);
}

/* ---- Buttons: premium press + lift + sharper shadow ---- */
.btn-primary {
    box-shadow: 0 10px 26px rgba(45, 180, 150, 0.32), var(--elev-ring);
    transition: transform 0.4s var(--ease-spring), box-shadow 0.4s var(--ease-out-expo);
}
.btn-primary:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 20px 44px rgba(45, 180, 150, 0.46); }
.btn-primary:active { transform: translateY(-1px) scale(0.985); transition-duration: 0.08s; }
.cta-button:active { transform: scale(0.96); transition-duration: 0.08s; }

/* ---- Nav: gradient sliding underline + hover pill ---- */
.nav-underline {
    height: 3px;
    background: var(--grad-mint);
    border-radius: 99px;
    box-shadow: 0 2px 10px rgba(104, 211, 192, 0.5);
    transition: all 0.42s var(--ease-out-expo);
}
.nav-link {
    transition: color 0.3s var(--ease-out-soft), background-color 0.3s var(--ease-out-soft);
}
.nav-link:hover { background-color: var(--tint-accent); }

/* ---- Reveal system: refined stagger + gentle scale-in ---- */
.reveal {
    transform: translateY(var(--reveal-distance)) scale(0.985);
    transition:
        opacity 0.8s var(--ease-out-expo),
        transform 0.8s var(--ease-out-expo);
    transition-delay: var(--reveal-delay, 0s);
}
.reveal.in-view { transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
    .why-card, .division-card, .blog-card, .team-card-v2, .parent-card,
    .btn-primary, .nav-underline, .reveal { transition: none !important; }
    .reveal { transform: none !important; }
    .why-card::before, .division-card::before, .blog-card::before,
    .team-card-v2::before, .parent-card::before { display: none; }
}

/* ---- Hero signature: staggered entrance + slow light-sweep + scroll cue ---- */
@keyframes heroRise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}
#about .hero-content .hero-title,
#about .hero-content .hero-subtitle,
#about .hero-content .hero-actions {
    animation: heroRise 0.9s var(--ease-out-expo) both;
}
#about .hero-content .hero-title    { animation-delay: 0.15s; }
#about .hero-content .hero-subtitle { animation-delay: 0.34s; }
#about .hero-content .hero-actions  { animation-delay: 0.52s; }

/* Slow premium light sweep across the photo (under text, over scrim) */
.hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(115deg,
        transparent 38%,
        rgba(255, 255, 255, 0.07) 48%,
        rgba(104, 211, 192, 0.12) 52%,
        transparent 62%);
    transform: translateX(-60%);
    animation: heroSweep 11s var(--ease-in-out-smooth) 1.5s infinite;
}
@keyframes heroSweep {
    0%   { transform: translateX(-60%); opacity: 0; }
    12%  { opacity: 1; }
    40%  { transform: translateX(60%); opacity: 0; }
    100% { transform: translateX(60%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    #about .hero-content .hero-title,
    #about .hero-content .hero-subtitle,
    #about .hero-content .hero-actions { animation: none !important; opacity: 1; transform: none; }
    .hero-section::before { animation: none !important; display: none; }
}

/* ---- Section header refinement — distinctive eyebrow + glowing accent ---- */
.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--glass-tint);
    border: 1px solid rgba(45, 160, 140, 0.22);
    box-shadow: var(--elev-1);
    backdrop-filter: blur(6px);
}
.section-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(104, 211, 192, 0.22);
    flex-shrink: 0;
}
.section-header .section-title::after {
    width: 72px;
    height: 4px;
    background: var(--grad-mint);
    box-shadow: 0 2px 14px rgba(104, 211, 192, 0.55);
}

/* =============================================================
 * PER-TAB POLISH  (services flip cards + process diagram)
 * Palette unchanged; depth, gradients and refined motion only.
 * ============================================================= */

/* ---- Services: premium flip cards ---- */
.card-front,
.card-back {
    border-radius: var(--border-radius-lg);
    box-shadow: var(--elev-3);
}
.card-front {
    background: linear-gradient(162deg, #ffffff 0%, #f3faf7 100%);
    border: 1px solid rgba(45, 160, 140, 0.10);
}
.card-icon {
    border-radius: 18px;
    background: var(--grad-mint);
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(45, 180, 150, 0.30);
}
/* keep the icon treatment consistent through the flip */
.service-card:hover .card-icon {
    background: var(--grad-mint);
    color: #ffffff;
}
.card-back {
    background: linear-gradient(155deg, var(--color-primary) 0%, #1f6b5f 55%, #15564c 100%);
}

/* ---- Process: refined ring, glowing center, deeper nodes ---- */
.process-circular-wrapper {
    border: 2px dotted rgba(45, 120, 110, 0.20);
}
.circular-node-center {
    box-shadow: var(--elev-4), 0 0 0 10px rgba(104, 211, 192, 0.07);
    position: relative;
}
.circular-node-center::after {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1px solid rgba(104, 211, 192, 0.40);
    pointer-events: none;
    animation: pulseRing 3.2s var(--ease-in-out-smooth) infinite;
}
@keyframes pulseRing {
    0%, 100% { opacity: 0.30; transform: scale(1); }
    50%      { opacity: 0.65; transform: scale(1.035); }
}
.process-node {
    box-shadow: var(--elev-2);
    transition:
        transform 0.5s var(--ease-out-expo),
        background-color 0.4s var(--ease-out-soft),
        border-color 0.4s var(--ease-out-soft),
        box-shadow 0.4s var(--ease-out-soft);
}
.process-node:hover,
.process-node.active {
    box-shadow: 0 0 0 4px rgba(104, 211, 192, 0.28), var(--elev-3);
}
.process-details-panel {
    box-shadow: var(--elev-3);
    background: linear-gradient(160deg, #ffffff 0%, #f5faf8 100%);
    border: 1px solid rgba(45, 160, 140, 0.10);
}

@media (prefers-reduced-motion: reduce) {
    .circular-node-center::after { animation: none !important; }
    .process-node { transition: none !important; }
}

/* ---- Contact form: refined focus states ---- */
.lead-form input,
.lead-form textarea,
.lead-form select {
    border-bottom: 1.5px solid rgba(45, 120, 110, 0.18);
    padding-inline: 8px;
    border-radius: 6px 6px 0 0;
    transition:
        border-color 0.35s var(--ease-out-soft),
        background-color 0.35s var(--ease-out-soft),
        box-shadow 0.35s var(--ease-out-soft);
}
.lead-form input:focus,
.lead-form textarea:focus,
.lead-form select:focus {
    border-bottom-color: var(--color-primary-light);
    background-color: var(--tint-accent);
    box-shadow: 0 2px 0 0 var(--color-accent);
}
.form-group:focus-within label {
    color: var(--color-primary);
}

/* =============================================================
 * WIND TURBINE — process wheel kinetic upgrade
 * Decorative blades spin continuously; the node ring (rotor) is
 * rotated by app.js on click. Palette unchanged.
 * ============================================================= */

/* Continuously-spinning decorative blade layer (behind the nodes) */
.turbine-blades {
    position: absolute;
    inset: 0;
    z-index: 1;                 /* above wrapper bg, below nodes (5) and hub (10) */
    pointer-events: none;
    transform-origin: 50% 50%;
    opacity: 0.13;
    animation: turbineSpin 26s linear infinite;
}
.turbine-blades .blade {
    position: absolute;
    bottom: 50%;                /* blade base sits at the hub center */
    left: 50%;
    width: 16%;
    height: 43%;
    transform-origin: 50% 100%; /* pivot at the hub */
    background: linear-gradient(to top, var(--color-primary) 0%, var(--color-accent) 100%);
    /* tapered turbine-blade silhouette: narrow at hub, bulged mid, pointed tip */
    clip-path: polygon(50% 0%, 72% 52%, 60% 100%, 40% 100%, 28% 52%);
}
.turbine-blades .blade:nth-child(1) { transform: translateX(-50%) rotate(0deg); }
.turbine-blades .blade:nth-child(2) { transform: translateX(-50%) rotate(120deg); }
.turbine-blades .blade:nth-child(3) { transform: translateX(-50%) rotate(240deg); }

@keyframes turbineSpin {
    to { transform: rotate(360deg); }
}

/* Detail panel as a single-cell grid stack → zero layout shift on switch */
.process-details-panel {
    display: grid;
    align-items: center;
}
.process-details-panel .step-detail-card {
    grid-area: 1 / 1;          /* all cards share one cell; panel sizes to tallest */
    opacity: 1;
    transform: none;
    transition: opacity 0.45s var(--ease-out-soft),
                transform 0.45s var(--ease-out-expo);
}
/* Panel-scoped: fade/slide instead of display:none (beats the global rule) */
.process-details-panel .step-detail-card.hidden {
    display: block;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .turbine-blades { animation: none !important; }
    .process-node { transition: none !important; }
    .process-details-panel .step-detail-card { transition: none !important; }
}

/* =============================================================
 * CLIMATE RISKS — full-width feature band (overrides the card)
 * Wide, clean B2B presentation. Palette unchanged.
 * ============================================================= */
.division-feature {
    /* scrollbar-exact full-bleed (see .hero-section) — edge to edge, no corner gap */
    width: calc(100vw - var(--sbw, 0px));
    margin-inline: calc(50% - 50vw + (var(--sbw, 0px) / 2));
    padding: clamp(56px, 7vw, 104px) 0;
    background:
        radial-gradient(70% 60% at 85% 0%, var(--tint-accent) 0%, transparent 60%),
        linear-gradient(180deg, var(--color-light) 0%, #ffffff 50%, var(--color-light) 100%);
    border: 0;
    border-top: var(--hairline);
    border-bottom: var(--hairline);
    border-radius: 0;
    box-shadow: none;
}
.division-feature:hover { box-shadow: none; }

.feature-inner {
    max-width: 1160px;
    margin: 0 auto;
    padding-inline: clamp(28px, 6vw, 72px);
}

/* Header: eyebrow + strong statement */
/* The division NAME is the large primary heading */
.feature-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: clamp(30px, 4.4vw, 50px);
    font-weight: 900;
    letter-spacing: -0.2px;
    line-height: 1.12;
    color: var(--color-primary);
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}
.feature-eyebrow i { color: var(--color-accent); font-size: 0.66em; }

/* The long statement becomes the smaller, green secondary sub-title */
.feature-statement {
    font-size: clamp(16px, 1.9vw, 22px);
    font-weight: 600;
    line-height: 1.55;
    color: var(--color-primary-light);
    max-width: 62ch;
    margin-top: 14px;
}

/* Service groups */
.feature-group { margin-top: clamp(40px, 5vw, 64px); }

.feature-group-title {
    font-size: clamp(18px, 2vw, 22px);
    font-weight: 800;
    color: var(--color-dark);
    margin-bottom: 26px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--color-accent-light);
    display: inline-block;
}

.feature-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px clamp(32px, 5vw, 64px);
}

.feature-service {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.fs-mark {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--grad-mint);
    color: #ffffff;
    font-size: 14px;
    box-shadow: 0 8px 18px rgba(45, 180, 150, 0.28);
    margin-top: 2px;
}

.fs-body { display: flex; flex-direction: column; gap: 5px; }

.fs-body strong {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.45;
}

.fs-body span {
    font-size: 16px;
    color: var(--color-gray-dark);
    line-height: 1.7;
}

@media (max-width: 767px) {
    .feature-list { grid-template-columns: 1fr; gap: 22px; }
    .feature-statement { max-width: none; }
}

/* ---- IREC feature: lead paragraph + Q&A subsections (light, clean) ---- */
.feature-lead {
    font-size: clamp(17px, 1.6vw, 20px);
    line-height: 1.85;
    color: var(--color-dark);
    max-width: 68ch;
    margin-top: 26px;
}

.feature-qa-grid {
    margin-top: clamp(38px, 4.5vw, 60px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 36px clamp(36px, 4vw, 60px);
}

.feature-qa h4 {
    font-size: 19px;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 14px;
    padding-bottom: 11px;
    border-bottom: 2px solid var(--color-accent-light);
}

.feature-qa p {
    font-size: 16px;
    line-height: 1.85;
    color: var(--color-gray-dark);
}

@media (max-width: 767px) {
    .feature-qa-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* =============================================================
 * CARBON PRICES TABLE (Services) — light, clean, RTL
 * Data filtered from carboncredits.com (EU ETS, UK, Nature-Based)
 * ============================================================= */
.carbon-prices {
    max-width: 760px;
    margin: 0 auto;
}
.cp-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    border: 1px solid rgba(16, 50, 45, 0.08);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--elev-2);
}

/* Column header row */
.cp-table thead th {
    background: var(--color-primary);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 15px 22px;
    text-align: start;
}
.cp-table thead .cp-col-price,
.cp-table thead .cp-col-change { text-align: center; }

/* Group sub-headers (Compliance / Voluntary) */
.cp-group th {
    background: var(--color-accent-light);
    color: var(--color-primary);
    text-align: start;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.4px;
    padding: 11px 22px;
}

/* Data cells */
.cp-table td {
    padding: 16px 22px;
    border-top: 1px solid var(--color-gray);
    font-size: 16px;
    vertical-align: middle;
}
.cp-name {
    font-weight: 700;
    color: var(--color-dark);
    text-align: start;
}
.cp-sub {
    color: var(--color-gray-dark);
    font-weight: 500;
    font-size: 13px;
    margin-inline-start: 6px;
}
.cp-price {
    text-align: center;
    font-weight: 800;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}
.cp-price bdi { direction: ltr; unicode-bidi: isolate; }
.cp-change {
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.cp-change bdi { direction: ltr; unicode-bidi: isolate; }
.cp-change.up   { color: #1f9d5b; }
.cp-change.down { color: #cf4b5c; }
.cp-change.flat { color: var(--color-gray-dark); }

/* Source credit */
.cp-source {
    text-align: center;
    margin-top: 16px;
    font-size: 13px;
    color: var(--color-gray-dark);
}
.cp-source a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cp-source a:hover { color: var(--color-primary-light); }
.cp-asof { color: var(--color-gray-dark); opacity: 0.75; }

@media (max-width: 575px) {
    .cp-table thead th,
    .cp-group th { padding-inline: 14px; }
    .cp-table td { padding: 13px 14px; font-size: 15px; }
    .cp-change { font-size: 14px; }
}

/* =============================================================
 * ELEVATION LAYER v3 — unified motion language & luxury polish
 * One easing vocabulary (--ease-out-expo / --ease-out-soft /
 * --ease-spring-soft), transform/opacity-only motion, palette
 * untouched. Layered last so it wins the cascade.
 * ============================================================= */

/* ---- Spacing rhythm: one consistent vertical scale ---- */
.whoweare-section,
.clients-section,
.why-section,
.vision-inline-section,
.team-inline-section {
    margin-top: clamp(84px, 10vw, 128px);
}
.honeycomb-section { margin-top: 44px; }
.process-subheader,
.services-subheader { margin-top: clamp(84px, 10vw, 120px); }
.section-header { margin-bottom: clamp(44px, 5vw, 64px); }
.site-footer { margin-top: clamp(84px, 10vw, 120px); padding: 36px 24px; }

/* ---- Tab switching: slightly longer, expo-eased entrance ---- */
.tab-section {
    transform: translateY(22px);
    transition: opacity 0.6s var(--ease-out-soft), transform 0.65s var(--ease-out-expo);
}
.tab-section.active { transform: translateY(0); }

/* ---- Nav underline: fluid soft-spring glide ---- */
.nav-underline {
    transition:
        left 0.5s var(--ease-spring-soft),
        width 0.5s var(--ease-spring-soft) 0.03s,
        opacity 0.25s ease;
}

/* ---- Hero orbs: ambient breathing light above the video ---- */
.hero-orbs {
    z-index: 2;               /* above the video (1), under the scrim + content */
    mix-blend-mode: screen;
}
.orb {
    filter: blur(64px);
    opacity: 0.38;
    will-change: transform, opacity;
}
.orb-1 { animation: orbDrift1 21s var(--ease-in-out-smooth) infinite; }
.orb-2 { animation: orbDrift2 26s var(--ease-in-out-smooth) infinite; }
.orb-3 { opacity: 0.22; animation: orbDrift3 31s var(--ease-in-out-smooth) infinite; }

@keyframes orbDrift1 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1);        opacity: 0.38; }
    28%      { transform: translate3d(38px, 26px, 0) scale(1.10); opacity: 0.46; }
    56%      { transform: translate3d(14px, 52px, 0) scale(0.94); opacity: 0.32; }
    80%      { transform: translate3d(-20px, 18px, 0) scale(1.05); opacity: 0.42; }
}
@keyframes orbDrift2 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1);          opacity: 0.38; }
    30%      { transform: translate3d(-46px, -22px, 0) scale(1.08); opacity: 0.30; }
    62%      { transform: translate3d(-18px, -50px, 0) scale(0.95); opacity: 0.44; }
    84%      { transform: translate3d(22px, -12px, 0) scale(1.04);  opacity: 0.36; }
}
@keyframes orbDrift3 {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1);          opacity: 0.22; }
    33%      { transform: translate3d(-30px, 34px, 0) scale(1.12); opacity: 0.28; }
    66%      { transform: translate3d(16px, 58px, 0) scale(0.92);  opacity: 0.17; }
}

/* Parallax layers driven by app.js (inline transform) — keep them composited */
.hero-video,
.hero-content { will-change: transform; }

/* ---- Carousel: GPU-composited marquee ---- */
.carousel-track { will-change: transform; backface-visibility: hidden; }

/* ---- Turbine: tighter spin + soft motion blur on the blades ---- */
.turbine-blades {
    animation-duration: 22s;
    opacity: 0.15;
}
.turbine-blades .blade { filter: blur(1.1px); }

/* ---- Process: center label swap micro-animation ---- */
.active-node-description.label-swap {
    animation: labelSwap 0.5s var(--ease-out-expo);
}
@keyframes labelSwap {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Service flip cards: perfected 3D flip ---- */
.service-card {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s var(--ease-out-expo);
}
.service-card:hover { transform: translateY(-6px); }
.card-front,
.card-back {
    transition: transform 0.85s cubic-bezier(0.5, 0.08, 0.18, 1);
    will-change: transform;
    transform: rotateY(0) translateZ(0.1px);
}
.card-back { transform: rotateY(180deg) translateZ(0.1px); }
.service-card:hover .card-front { transform: rotateY(-180deg) translateZ(0.1px); }
.service-card:hover .card-back  { transform: rotateY(0deg) translateZ(0.1px); }

/* ---- Scroll-reveal variants (override the generic fade-up) ---- */
/* Honeycomb cells: staggered scale-in */
.hex.reveal {
    transform: scale(0.55);
    transition: opacity 0.6s var(--ease-out-soft), transform 0.85s var(--ease-spring-soft);
    transition-delay: var(--reveal-delay, 0s);
}
.hex.reveal.in-view { transform: scale(1); }

/* Principle items: slide in from the side (direction-aware) */
.principle-item.reveal { transform: translateX(-44px); }
html[dir="rtl"] .principle-item.reveal { transform: translateX(44px); }
.principle-item.reveal.in-view,
html[dir="rtl"] .principle-item.reveal.in-view { transform: translateX(0); }

/* Why-cards: deeper slide-up */
.why-card.reveal { transform: translateY(48px); }
.why-card.reveal.in-view { transform: translateY(0); }

/* ---- Team cards: hover micro-interactions ---- */
.member-photo-v2 {
    transition: box-shadow 0.5s var(--ease-out-soft), border-color 0.5s var(--ease-out-soft);
}
.member-photo-v2 img { transition: transform 0.8s var(--ease-out-expo); }
.team-card-v2:hover .member-photo-v2 {
    box-shadow: 0 0 0 6px rgba(104, 211, 192, 0.18), 0 14px 30px rgba(45, 160, 140, 0.25);
}
.team-card-v2:hover .member-photo-v2 img { transform: scale(1.07); }
.team-card-v2 .member-social a {
    display: inline-block;
    transition: transform 0.4s var(--ease-spring-soft), color 0.3s var(--ease-out-soft);
}
.team-card-v2:hover .member-social a { transform: translateY(-3px); color: var(--color-primary); }

/* ---- Blog cards: hover micro-interactions ---- */
.blog-thumb { position: relative; overflow: hidden; }
.blog-thumb i { transition: transform 0.7s var(--ease-out-expo); }
.blog-card:hover .blog-thumb i { transform: scale(1.14) rotate(-4deg); }
.blog-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 80% 0%, rgba(104, 211, 192, 0.28), transparent 55%);
    opacity: 0;
    transition: opacity 0.5s var(--ease-out-soft);
}
.blog-card:hover .blog-thumb::after { opacity: 1; }
.blog-link {
    display: inline-block;
    transition: color 0.3s var(--ease-out-soft), transform 0.45s var(--ease-out-expo);
}
.blog-card:hover .blog-link { transform: translateX(-5px); }
html[dir="ltr"] .blog-card:hover .blog-link { transform: translateX(5px); }

/* ---- Bloom dashboard: glass polish, live pulse, growing bars ---- */
.platform-preview { perspective: 1200px; }
.dashboard-mockup {
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(45, 160, 140, 0.12);
    background: linear-gradient(165deg, #ffffff 0%, #f4faf8 100%);
    box-shadow: var(--elev-4), var(--elev-ring);
    transition: transform 0.7s var(--ease-out-expo), box-shadow 0.7s var(--ease-out-expo);
}
.platform-preview:hover .dashboard-mockup {
    transform: translateY(-6px) rotate3d(1, -1, 0, 2.5deg);
    box-shadow: var(--elev-4), 0 28px 64px rgba(45, 160, 140, 0.18);
}
.dash-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.dash-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
    animation: livePulse 2.2s var(--ease-in-out-smooth) infinite;
}
@keyframes livePulse {
    0%   { box-shadow: 0 0 0 0 rgba(104, 211, 192, 0.45); }
    70%  { box-shadow: 0 0 0 7px rgba(104, 211, 192, 0); }
    100% { box-shadow: 0 0 0 0 rgba(104, 211, 192, 0); }
}
.metric-box {
    border: 1px solid rgba(45, 160, 140, 0.10);
    box-shadow: var(--elev-1);
}
.chart-bar {
    transform-origin: bottom;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(to top, var(--color-bloom), HSL(194, 35%, 58%));
    transition:
        transform 0.9s var(--ease-out-expo),
        opacity 0.6s var(--ease-out-soft),
        background-color 0.35s var(--ease-out-soft);
}
.platform-preview.reveal .chart-bar { transform: scaleY(0); opacity: 0.4; }
.platform-preview.reveal.in-view .chart-bar { transform: scaleY(1); opacity: 1; }
.platform-preview.reveal.in-view .chart-bar:nth-child(2) { transition-delay: 0.07s; }
.platform-preview.reveal.in-view .chart-bar:nth-child(3) { transition-delay: 0.14s; }
.platform-preview.reveal.in-view .chart-bar:nth-child(4) { transition-delay: 0.21s; }
.platform-preview.reveal.in-view .chart-bar:nth-child(5) { transition-delay: 0.28s; }

/* ---- Carbon prices: row hover tint ---- */
.cp-table td { transition: background-color 0.3s var(--ease-out-soft); }
.cp-table tbody tr:not(.cp-group):hover td { background-color: var(--tint-accent); }

/* ---- Hero text: slightly richer presence over the video ---- */
.hero-title { text-shadow: 0 8px 36px rgba(0, 0, 0, 0.32); }
.hero-subtitle { opacity: 0.94; text-shadow: 0 4px 22px rgba(0, 0, 0, 0.28); }

/* =============================================================
 * DIVISIONS — ENRICHED CONTENT (Climate dimensions + IREC facts)
 * ============================================================= */

/* Climate Risks: the איפה / מה / למה dimension cards */
.dimension-grid {
    margin-top: clamp(34px, 4.5vw, 54px);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.dimension-card {
    position: relative;
    overflow: hidden;
    background: var(--color-white);
    border: var(--hairline);
    border-radius: var(--border-radius-md);
    box-shadow: var(--elev-2);
    padding: 30px 28px;
    transition:
        transform 0.55s var(--ease-out-expo),
        box-shadow 0.55s var(--ease-out-expo),
        border-color 0.45s var(--ease-out-soft);
}
.dimension-card::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--grad-mint);
}
.dimension-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--elev-3);
    border-color: rgba(104, 211, 192, 0.5);
}
.dim-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--color-accent-light);
    color: var(--color-primary);
    display: grid;
    place-items: center;
    font-size: 21px;
    margin-bottom: 16px;
    transition: transform 0.5s var(--ease-spring-soft), background-color 0.4s var(--ease-out-soft), color 0.4s var(--ease-out-soft);
}
.dimension-card:hover .dim-icon {
    transform: translateY(-3px) scale(1.06);
    background: var(--color-primary);
    color: var(--color-accent);
}
.dim-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 21px;
    font-weight: 900;
    color: var(--color-primary);
}
.dim-latin {
    font-family: var(--font-english);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--color-gray-dark);
}
.dimension-card p {
    margin-top: 10px;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--color-gray-dark);
}

/* IREC: key-facts grid + emphasized nuance note */
.irec-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px clamp(28px, 4vw, 52px);
}
.irec-point {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--color-white);
    border: var(--hairline);
    border-radius: var(--border-radius-md);
    box-shadow: var(--elev-1);
    padding: 22px 24px;
    transition:
        transform 0.55s var(--ease-out-expo),
        box-shadow 0.55s var(--ease-out-expo),
        border-color 0.45s var(--ease-out-soft);
}
.irec-point:hover {
    transform: translateY(-5px);
    box-shadow: var(--elev-3);
    border-color: rgba(104, 211, 192, 0.5);
}
.ip-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--color-accent-light);
    color: var(--color-primary);
    display: grid;
    place-items: center;
    font-size: 17px;
    margin-top: 2px;
    transition: transform 0.5s var(--ease-spring-soft), background-color 0.4s var(--ease-out-soft), color 0.4s var(--ease-out-soft);
}
.irec-point:hover .ip-icon {
    transform: scale(1.08);
    background: var(--color-primary);
    color: var(--color-accent);
}
.irec-point p {
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--color-dark);
}
.irec-note {
    margin-top: 26px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: linear-gradient(135deg, var(--tint-accent) 0%, transparent 65%), var(--color-white);
    border: 1px solid rgba(45, 160, 140, 0.25);
    border-inline-start: 4px solid var(--color-accent);
    border-radius: var(--border-radius-md);
    box-shadow: var(--elev-2);
    padding: 24px 26px;
}
.irec-note .ip-icon { background: var(--color-primary); color: var(--color-accent); }
.irec-note p {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.75;
    color: var(--color-primary);
}

@media (max-width: 991px) {
    .dimension-grid { grid-template-columns: 1fr; gap: 18px; }
    .irec-points { grid-template-columns: 1fr; gap: 18px; }
}

/* ---- Reduced motion: silence the entire v3 layer ---- */
@media (prefers-reduced-motion: reduce) {
    .orb,
    .dash-status::before,
    .active-node-description.label-swap { animation: none !important; }
    .tab-section,
    .nav-underline,
    .service-card,
    .card-front,
    .card-back,
    .hex.reveal,
    .principle-item.reveal,
    .why-card.reveal,
    .dimension-card,
    .irec-point,
    .chart-bar,
    .dashboard-mockup { transition: none !important; }
    .platform-preview.reveal .chart-bar { transform: none; opacity: 1; }
    .hex.reveal,
    .principle-item.reveal,
    html[dir="rtl"] .principle-item.reveal,
    .why-card.reveal { transform: none; }
}

/* =============================================================
 * MODULE LAYER v4 — Contact (minimal), Divisions motion,
 * Reports accordion, Newsletter, SEO footer.
 * Palette + easing vocabulary unchanged. RTL-first.
 * ============================================================= */

/* ---- 1. Contact: minimalist 3-field form with floating labels ---- */
.form-intro {
    margin-top: -10px;
    margin-bottom: 28px;
    font-size: 15px;
    color: var(--color-gray-dark);
    line-height: 1.6;
}
.lead-form-minimal {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.lead-form-minimal .form-group {
    position: relative;
    gap: 0;
}
.lead-form-minimal input {
    width: 100%;
    border: none;
    border-bottom: 1.5px solid rgba(45, 120, 110, 0.22);
    border-radius: 0;
    background: transparent;
    padding: 16px 2px 9px;
    font-size: 16px;
    font-family: var(--font-hebrew);
    color: var(--color-dark);
    transition:
        border-color 0.35s var(--ease-out-soft),
        box-shadow 0.35s var(--ease-out-soft);
}
.lead-form-minimal input:focus {
    outline: none;
    background: transparent;
    border-bottom-color: var(--color-primary);
    box-shadow: 0 1px 0 0 var(--color-primary);
}
.lead-form-minimal label {
    position: absolute;
    inset-inline-start: 2px;
    top: 16px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-gray-dark);
    pointer-events: none;
    transition: transform 0.28s var(--ease-out-expo), font-size 0.28s var(--ease-out-expo), color 0.28s var(--ease-out-soft);
}
/* Float the label up on focus or when filled (translateY only → RTL/LTR safe) */
.lead-form-minimal input:focus + label,
.lead-form-minimal input:not(:placeholder-shown) + label {
    transform: translateY(-22px);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--color-primary);
}
.lead-form-minimal input.invalid {
    border-bottom-color: hsl(0, 70%, 58%);
    box-shadow: 0 1px 0 0 hsl(0, 70%, 58%);
}
.lead-form-minimal input.invalid + label { color: hsl(0, 70%, 55%); }
.lead-form-minimal .submit-btn {
    grid-column: auto;
    width: 100%;
    margin-top: 8px;
    padding: 15px;
}

/* ---- 3. I-REC micro-tabs ---- */
.irec-tabs { margin-top: clamp(34px, 4.5vw, 54px); }
.irec-tabstrip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.irec-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid rgba(45, 160, 140, 0.35);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.07);
    color: var(--color-primary);
    font-family: var(--font-hebrew);
    font-size: 15px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.2s ease, box-shadow 0.22s ease;
}
.irec-tab i { color: var(--color-primary); transition: color 0.22s ease; }
.irec-tab:hover { background: #fff; border-color: var(--color-primary); box-shadow: 0 3px 10px rgba(45, 160, 140, 0.18); transform: translateY(-1px); }
.irec-tab.active {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}
.irec-tab.active i { color: #ffffff; }
/* Desktop: keep all i-rec tab pills (incl. "פנו אלינו") on one horizontal row */
@media (min-width: 768px) {
    .irec-tabstrip { flex-wrap: nowrap; }
    .irec-tab { flex: 0 1 auto; white-space: nowrap; }
}
.irec-panels {
    display: grid;
    margin-top: 0;
}
.irec-panel {
    grid-area: 1 / 1;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(10px);
    transition:
        grid-template-rows 0.5s var(--ease-out-expo),
        opacity 0.45s var(--ease-out-soft),
        transform 0.5s var(--ease-out-expo);
    pointer-events: none;
}
.irec-panel.active {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.irec-panel-inner {
    overflow: hidden;
    min-height: 0;
}
.irec-panel.active .irec-panel-inner {
    background: var(--glass-tint);
    border: 1px solid rgba(45, 160, 140, 0.16);
    border-inline-start: 4px solid var(--color-accent);
    border-radius: var(--border-radius-md);
    box-shadow: var(--elev-1);
    padding: 24px 26px;
}
.irec-panel-inner p {
    font-size: 16px;
    line-height: 1.85;
    color: var(--color-dark);
}

/* ---- 4. Blog cards: clickable accordion-in-card + date + "full blog" CTA ---- */
/* Let an expanded card grow on its own instead of stretching its row mates. */
.blog-grid { align-items: start; }

/* The whole card is the toggle (role=button); keep the exact card visual. */
.blog-card[aria-controls] { cursor: pointer; }
.blog-card[aria-controls]:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

/* Footer row: expand chevron pinned to the card's end edge. */
.blog-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* auto (not a fixed 16px) so the chevron sits on the card's baseline in
       every card, which is what keeps the row even once the clamps are on. */
    margin-top: auto;
    padding-top: 16px;
}
.blog-expand-hint {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-accent-light);
    color: var(--color-primary);
    font-size: 12px;
    transition: transform 0.45s var(--ease-out-expo), background-color 0.35s var(--ease-out-soft);
}
.blog-card.open .blog-expand-hint { transform: rotate(-180deg); }
.blog-card.open .blog-expand-hint,
.blog-card:hover .blog-expand-hint { background: var(--color-primary); color: var(--color-accent); }

/* Expand panel: smooth slide via animatable grid rows (no max-height guessing). */
.blog-card-expand {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s var(--ease-out-expo);
}
.blog-card.open .blog-card-expand { grid-template-rows: 1fr; }
.blog-card-expand-inner {
    overflow: hidden;
    min-height: 0;
    border-top: 1px solid rgba(45, 120, 110, 0.12);
    margin-top: 0;
}
.blog-card-expand-inner p {
    padding: 20px 26px 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--color-gray-dark);
}
.report-full-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 16px 26px 24px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--color-primary);
    transition: gap 0.4s var(--ease-out-expo), color 0.3s var(--ease-out-soft);
}
.report-full-link i { color: var(--color-accent); }
.report-full-link:hover { gap: 16px; color: var(--color-primary-light); }

.blog-cta {
    margin-top: clamp(36px, 4.5vw, 52px);
    text-align: center;
}
.blog-full-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.blog-full-link i { transition: transform 0.4s var(--ease-out-expo); }
.blog-full-link:hover i { transform: translateX(-5px); }
html[dir="ltr"] .blog-full-link:hover i { transform: translateX(5px); }

/* ---- 5. Newsletter subscription ---- */
.newsletter {
    margin-top: clamp(48px, 6vw, 72px);
    max-width: 880px;
    margin-inline: auto;
    background: linear-gradient(135deg, var(--color-primary) 0%, #1f6b5f 60%, #15564c 100%);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--elev-3);
    padding: clamp(28px, 4vw, 44px);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 24px 40px;
    color: #ffffff;
}
.newsletter-text h3 { font-size: clamp(20px, 2.4vw, 26px); font-weight: 900; }
.newsletter-text p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); }
.newsletter-form { display: flex; gap: 12px; flex-wrap: wrap; }
.newsletter-field {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    padding-inline-start: 18px;
    transition: border-color 0.35s var(--ease-out-soft), background-color 0.35s var(--ease-out-soft);
}
.newsletter-field i { color: var(--color-accent); font-size: 15px; }
.newsletter-field:focus-within {
    background: rgba(255, 255, 255, 0.18);
    border-color: var(--color-accent);
}
.newsletter-field input {
    border: none;
    background: transparent;
    color: #ffffff;
    font-family: var(--font-hebrew);
    font-size: 15px;
    padding: 13px 16px;
    min-width: 230px;
    outline: none;
}
.newsletter-field input::placeholder { color: rgba(255, 255, 255, 0.7); }
.newsletter-field input.invalid { box-shadow: none; }
.newsletter .newsletter-btn {
    margin: 0;
    background: var(--color-white);
    color: var(--color-primary);
    border: none;
    padding: 13px 30px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}
.newsletter .newsletter-btn:hover { background: var(--color-accent-light); }
.newsletter-feedback {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
}
.newsletter-feedback.error { color: hsl(45, 96%, 78%); }
.newsletter-feedback.success { color: var(--color-accent); }

/* ---- 6. SEO footer ---- */
/* Base .footer-container is a flex row (single-line legacy footer); the new
   multi-row footer needs its children (top + bottom) to stack. */
.site-footer .footer-container { display: block; }
.footer-top {
    display: grid;
    grid-template-columns: 1.1fr 2fr;
    gap: 40px clamp(32px, 6vw, 80px);
    padding-bottom: 32px;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    text-align: start;
}
.footer-tagline {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    max-width: 34ch;
}
.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 32px;
}
.footer-col h4 {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: 14px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
/* Footer links reuse .nav-link / .dropdown-link, which add a hover capsule
   background + box padding. Neutralize all of that here so dimensions stay
   identical idle↔hover (zero jitter) and only text color + underline change.
   Scoped to .site-footer so it always wins over the nav/dropdown hover rules. */
.site-footer .footer-link {
    display: inline;
    padding: 0;
    margin: 0;
    border-radius: 0;
    background: none;
    font-size: 14.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}
.site-footer .footer-link:hover,
.site-footer .footer-link:focus-visible {
    background: none;
    padding: 0;
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}
.footer-bottom > p { font-size: 13.5px; color: rgba(255, 255, 255, 0.62); }
.footer-external { display: flex; gap: 22px; }
.footer-external a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    transition: color 0.3s var(--ease-out-soft), transform 0.4s var(--ease-spring-soft);
}
.footer-external a i { color: var(--color-accent); }
.footer-external a:hover { color: #ffffff; transform: translateY(-2px); }

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .newsletter { grid-template-columns: 1fr; }
    .footer-top { grid-template-columns: 1fr; gap: 32px; }
    .footer-links { gap: 28px; }
}
@media (max-width: 767px) {
    .irec-tab { flex: 1 1 auto; justify-content: center; }
    .newsletter-form { flex-direction: column; align-items: stretch; }
    .newsletter-field input { min-width: 0; width: 100%; }
    .footer-links { grid-template-columns: 1fr 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 460px) {
    .footer-links { grid-template-columns: 1fr; }
}

/* Clip stray horizontal overflow at the page level (the classic 100vw +
   scrollbar excess, hero orbs, clients marquee). Clipping on <body> never
   cuts the full-bleed hero / divisions bands — those are exactly 100vw, so
   they sit flush to the viewport edges, not beyond it. overflow-x: clip
   (not hidden) creates no scroll container, so the sticky header is intact. */
body { overflow-x: clip; }

/* =============================================================
 * DIVISION BACKGROUND SCENES — full-bleed ambient animation living
 * behind each division band (like the homepage turbine/orbs). Inline
 * SVG + pure CSS keyframes, transform/opacity only, low opacity,
 * pinned to the band's top/bottom region, always behind the content.
 * ============================================================= */
.division-feature { position: relative; overflow: hidden; }
.feature-inner { position: relative; z-index: 1; }

.division-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
/* soft scrim keeps body text crisp over the scene */
.division-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, transparent 22%, transparent 78%, rgba(255,255,255,0.28) 100%);
}

/* keep agSway for the small Agro feature-icon sprout */
@keyframes agSway {
    0%, 100% { transform: rotate(-3.5deg); }
    50%      { transform: rotate(3.5deg); }
}

/* ---- Climate: drifting clouds across the sky + a faint sun ---- */
.bg-climate { opacity: 0.7; }
.bg-climate .cloud path { fill: hsl(202, 32%, 83%); }
.bg-climate .cl-sun {
    position: absolute;
    top: -10%;
    inset-inline-start: 8%;
    width: clamp(220px, 26vw, 440px);
    height: clamp(220px, 26vw, 440px);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,210,110,0.55) 0%, rgba(255,210,110,0.18) 42%, transparent 70%);
}
.bg-climate .cl-sky {
    position: absolute;
    top: 0;
    inset-inline: 0;
    width: 100%;
    height: clamp(280px, 58%, 620px);
}
.bg-climate .cloud { will-change: translate; }
.bg-climate .cloud-a { animation: cloudDrift 40s linear infinite; }
.bg-climate .cloud-b { animation: cloudDrift 58s linear infinite -20s; }
.bg-climate .cloud-c { animation: cloudDrift 48s linear infinite -36s; }
.bg-climate .cloud-d { animation: cloudDrift 66s linear infinite -10s; }
.bg-climate .cloud-e { animation: cloudDrift 52s linear infinite -46s; }
@keyframes cloudDrift {
    0%   { translate: -360px 0; }
    50%  { translate: 560px 26px; }
    100% { translate: 1480px 0; }
}

/* ---- Agro: a single small plant gently sprouting from the ground ---- */
.bg-agro { opacity: 0.55; }
.bg-agro .ag-field {
    position: absolute;
    inset-inline: 0;
    top: 0;
    width: 100%;
    height: clamp(300px, 52%, 500px);
}
.bg-agro .ag-plant {
    transform-box: fill-box;
    transform-origin: bottom center;
    animation: agroSprout 13s var(--ease-in-out-smooth) infinite;
    will-change: transform, opacity;
}
@keyframes agroSprout {
    /* Uniform scale (not scaleY) from the bottom origin keeps the leaf/stem
       proportions intact — the plant grows up from the ground instead of
       squashing flat then stretching tall. */
    0%   { transform: scale(0.12) rotate(0deg);   opacity: 0; }
    20%  { opacity: 1; }
    55%  { transform: scale(1)    rotate(1.6deg);  opacity: 1; }
    78%  { transform: scale(1)    rotate(-1.6deg); opacity: 1; }
    92%  { transform: scale(1)    rotate(0deg);    opacity: 1; }
    100% { transform: scale(1)    rotate(0deg);    opacity: 0; }
}

/* ---- I-REC: distant panel, gentle sunrise, cable with flowing green power ---- */
.bg-irec { opacity: 0.55; }
.bg-irec .ir-scene {
    position: absolute;
    inset-inline: 0;
    top: 0;
    width: 100%;
    height: clamp(300px, 56%, 560px);
}
.bg-irec .ir-sun {
    transform-box: view-box;
    transform-origin: center;
    will-change: transform, opacity;
    animation: irSunrise 13s var(--ease-in-out-smooth) infinite;
}
@keyframes irSunrise {
    0%   { transform: translateY(74px); opacity: 0; }
    22%  { opacity: 1; }
    55%  { transform: translateY(0);    opacity: 1; }
    85%  { transform: translateY(0);    opacity: 1; }
    100% { transform: translateY(74px); opacity: 0; }
}
.bg-irec .ir-cable-flow {
    stroke-dasharray: 16 26;
    filter: drop-shadow(0 0 3px hsl(150, 62%, 55%));
    will-change: stroke-dashoffset;
    animation: cableFlow 2.6s linear infinite;
}
@keyframes cableFlow { to { stroke-dashoffset: -42; } }

/* ---- LTR (English) mode: mirror the ambient scenes to the right ----
   The scenes sit in the start-side ~third of each band, clear of the
   right-aligned Hebrew copy. English text is left-aligned, so flip the
   decorative SVGs horizontally to keep the reading side clean. The SVGs
   are aria-hidden and contain no text, and their keyframes animate inner
   groups, so a scaleX(-1) on the <svg> element itself is side-effect free. */
html[dir="ltr"] .bg-climate .cl-sky,
html[dir="ltr"] .bg-agro .ag-field,
html[dir="ltr"] .bg-irec .ir-scene {
    transform: scaleX(-1);
}
/* The climate sun is a positioned <span>, not part of the SVG — pin it to
   the right edge instead of mirroring. */
html[dir="ltr"] .bg-climate .cl-sun {
    inset-inline-start: auto;
    inset-inline-end: 8%;
}

/* =============================================================
 * NIBBANA AGRO — division content (metrics, counters, timeline,
 * team, CTA + contact form). Light premium, full-width, RTL.
 * ============================================================= */
.feature-subtitle {
    font-size: clamp(17px, 1.8vw, 21px);
    font-weight: 600;
    color: var(--color-primary-light);
    margin-top: 16px;
    max-width: 60ch;
    line-height: 1.5;
}

/* Key-capability cards with the mini SVG animations */
.agro-feats {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.agro-feat {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--color-white);
    border: var(--hairline);
    border-radius: var(--border-radius-md);
    box-shadow: var(--elev-1);
    padding: 22px 24px;
    transition: transform 0.55s var(--ease-out-expo), box-shadow 0.55s var(--ease-out-expo), border-color 0.45s var(--ease-out-soft);
}
.agro-feat:hover { transform: translateY(-5px); box-shadow: var(--elev-3); border-color: rgba(104, 211, 192, 0.5); }
.agro-feat-icon {
    flex-shrink: 0;
    width: 54px;
    height: 54px;
    border-radius: 15px;
    background: var(--color-accent-light);
    display: grid;
    place-items: center;
}
.agro-feat-icon .afi { width: 32px; height: 32px; overflow: visible; }
.agro-feat-body strong { display: block; font-size: 18px; font-weight: 800; color: var(--color-primary); margin-bottom: 6px; }
.agro-feat-body span { font-size: 15px; line-height: 1.7; color: var(--color-gray-dark); }

/* Mini SVG keyframes */
.afi-monitor .ping { transform-box: fill-box; transform-origin: center; }
.afi-monitor .ping-1 { animation: afiPing 2.4s var(--ease-out-soft) infinite; }
.afi-monitor .ping-2 { animation: afiPing 2.4s var(--ease-out-soft) 1.2s infinite; }
@keyframes afiPing {
    0%   { transform: scale(0.45); opacity: 0.9; }
    80%  { opacity: 0; }
    100% { transform: scale(1.5); opacity: 0; }
}
.afi-energy .bolt {
    transform-box: fill-box;
    transform-origin: center;
    animation: afiGlow 1.9s var(--ease-in-out-smooth) infinite;
}
@keyframes afiGlow {
    0%, 100% { opacity: 0.55; transform: scale(0.94); }
    50%      { opacity: 1; transform: scale(1.07); }
}
.afi-grow .sprout {
    transform-box: fill-box;
    transform-origin: bottom center;
    animation: agSway 4.2s var(--ease-in-out-smooth) infinite;
}

/* Power-in-numbers counters */
.agro-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: clamp(44px, 5.5vw, 68px);
}
.agro-stat {
    background: linear-gradient(160deg, #ffffff 0%, #f3faf7 100%);
    border: 1px solid rgba(45, 160, 140, 0.12);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--elev-2);
    padding: 32px 28px;
    text-align: center;
}
.agro-stat-num {
    display: inline-flex;
    align-items: baseline;
    font-size: clamp(42px, 5vw, 62px);
    font-weight: 900;
    line-height: 1;
    background: var(--grad-title);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.agro-stat-plus { -webkit-text-fill-color: initial; color: var(--color-accent); }
.agro-stat-label { display: block; font-size: 16px; font-weight: 800; color: var(--color-dark); margin-top: 12px; }
.agro-stat-desc { font-size: 14px; line-height: 1.65; color: var(--color-gray-dark); margin-top: 12px; }

/* Dedicated solutions callout */
.agro-callout {
    margin-top: clamp(40px, 5vw, 64px);
    background: linear-gradient(135deg, var(--tint-accent) 0%, transparent 65%), var(--color-white);
    border: 1px solid rgba(45, 160, 140, 0.25);
    border-inline-start: 4px solid var(--color-accent);
    border-radius: var(--border-radius-md);
    box-shadow: var(--elev-1);
    padding: 28px 30px;
}
.agro-callout h4 { font-size: clamp(19px, 2.2vw, 24px); font-weight: 800; color: var(--color-primary); margin-bottom: 12px; }
.agro-callout p { font-size: 16px; line-height: 1.85; color: var(--color-dark); }

/* 5.5 — Agro division: widen the text and tighten vertical rhythm to remove
   the large empty band beside the lead and the wide gaps between blocks.
   Scoped to #div-agro so Climate / i-rec divisions are unaffected. */
#div-agro .agro-full-lead { max-width: none; margin-bottom: 20px; }
#div-agro .feature-group { margin-top: 28px; }
#div-agro .agro-stats { margin-top: 28px; }
#div-agro .agro-callout { margin-top: 28px; padding: 22px 26px; }
#div-agro .agro-feat { padding: 18px 20px; }
#div-agro .agro-stat { padding: 24px 22px; }
#div-agro .agro-stat-desc { margin-top: 8px; }

/* Project workflow stepper */
.agro-timeline {
    list-style: none;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.agro-step {
    position: relative;
    z-index: 1;
    background: var(--color-white);
    border: var(--hairline);
    border-radius: var(--border-radius-md);
    box-shadow: var(--elev-1);
    padding: 28px 26px;
}
.agro-step-num {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--grad-mint);
    color: #ffffff;
    font-weight: 900;
    font-size: 18px;
    box-shadow: 0 8px 18px rgba(45, 180, 150, 0.28);
    margin-bottom: 16px;
}
.agro-step-body h5 { font-size: 18px; font-weight: 800; color: var(--color-primary); margin-bottom: 12px; }
.agro-step-act, .agro-step-val { font-size: 14.5px; line-height: 1.7; color: var(--color-gray-dark); margin-bottom: 8px; }
.agro-step-act strong, .agro-step-val strong { color: var(--color-primary); font-weight: 700; }
@media (min-width: 768px) {
    /* connector line behind the step cards (shows through the gaps) */
    .agro-timeline::before {
        content: "";
        position: absolute;
        top: 51px;
        inset-inline: 6%;
        height: 2px;
        background: linear-gradient(to right, transparent, var(--color-accent), transparent);
        z-index: 0;
    }
}

/* Agro team */
.agro-team {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
    max-width: 840px;
}
.member-photo-v2.is-icon {
    display: grid;
    place-items: center;
    background: var(--grad-mint);
    color: #ffffff;
    font-size: 38px;
}

/* Agro CTA + dedicated contact form (dark band) */
.agro-cta {
    margin-top: clamp(48px, 6vw, 76px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px clamp(32px, 5vw, 60px);
    align-items: start;
    background: linear-gradient(135deg, var(--color-primary) 0%, #1f6b5f 60%, #15564c 100%);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--elev-3);
    padding: clamp(30px, 4vw, 48px);
    color: #ffffff;
}
.agro-cta-head h3 { font-size: clamp(21px, 2.6vw, 28px); font-weight: 900; line-height: 1.35; }
.agro-cta-head p { margin-top: 14px; font-size: 15.5px; line-height: 1.7; color: rgba(255, 255, 255, 0.85); }
.agro-phones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.agro-phone {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    padding: 10px 18px;
    color: #ffffff;
    font-weight: 700;
    font-size: 15px;
    transition: background-color 0.3s var(--ease-out-soft), transform 0.35s var(--ease-spring-soft);
}
.agro-phone i { color: var(--color-accent); }
.agro-phone:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }

.agro-form { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 20px; align-content: start; }
.agro-form .form-group { position: relative; display: block; }
.agro-form .form-group-wide { grid-column: 1 / -1; }
.agro-form input,
.agro-form textarea {
    width: 100%;
    border: none;
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.3);
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    font-family: var(--font-hebrew);
    font-size: 15px;
    padding: 14px 2px 8px;
    transition: border-color 0.35s var(--ease-out-soft);
}
.agro-form textarea { resize: vertical; }
.agro-form input:focus,
.agro-form textarea:focus { outline: none; border-bottom-color: var(--color-accent); }
.agro-form label {
    position: absolute;
    inset-inline-start: 2px;
    top: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    pointer-events: none;
    transition: transform 0.28s var(--ease-out-expo), font-size 0.28s var(--ease-out-expo), color 0.28s var(--ease-out-soft);
}
.agro-form input:focus + label,
.agro-form input:not(:placeholder-shown) + label,
.agro-form textarea:focus + label,
.agro-form textarea:not(:placeholder-shown) + label {
    transform: translateY(-20px);
    font-size: 12px;
    font-weight: 700;
    color: var(--color-accent);
}
.agro-form input.invalid,
.agro-form textarea.invalid { border-bottom-color: hsl(0, 85%, 74%); }
.agro-submit {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 4px;
    background: var(--color-white);
    color: var(--color-primary);
    border: none;
}
.agro-submit:hover { background: var(--color-accent-light); }
.agro-form-feedback { grid-column: 1 / -1; margin: 0; font-size: 14px; font-weight: 700; color: #ffffff; }
.agro-form-feedback.error { color: hsl(45, 96%, 80%); }
.agro-form-feedback.success { color: var(--color-accent); }

@media (max-width: 860px) {
    .agro-feats,
    .agro-stats,
    .agro-timeline,
    .agro-team,
    .agro-cta,
    .agro-form { grid-template-columns: 1fr; }
}

/* ---- Reduced motion: silence module-layer animation ---- */
@media (prefers-reduced-motion: reduce) {
    .irec-panel { transition: none !important; }
    .bg-climate .cloud,
    .bg-agro .ag-plant,
    .bg-agro .ag-sprout,
    .bg-irec .ir-sun,
    .bg-irec .ir-cable-flow,
    .afi-monitor .ping,
    .afi-energy .bolt,
    .afi-grow .sprout { animation: none !important; }
    .afi-monitor .ping { opacity: 0.5; }
    /* settle the background scenes into a calm resolved state */
    .bg-agro .ag-plant { transform: scale(1); opacity: 1; filter: none; }
    .ticker-track { animation: none !important; }
}

/* =============================================================
 * TASK BATCH — ticker, parent tree, Agro read-more/sub-tabs,
 * plant energy glow. Light premium aesthetic, RTL-safe.
 * ============================================================= */

/* ---- 1. Carbon prices scrolling ticker (homepage, below hero) ---- */
.carbon-ticker-container {
    /* scrollbar-exact full-bleed (see .hero-section) — no corner gap, no overflow */
    width: calc(100vw - var(--sbw, 0px));
    margin-inline: calc(50% - 50vw + (var(--sbw, 0px) / 2));
    height: 44px;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: linear-gradient(180deg, rgba(16,38,34,0.92), rgba(16,38,34,0.86));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(104,211,192,0.22);
}
.ticker-track {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    will-change: transform;
    /* 90s for the full -50% travel: the track holds 8 price-sets (4 per loop
       half), so a comfortable, readable glide needs a long duration. */
    animation: tickerLoop 90s linear infinite;
}
.carbon-ticker-container:hover .ticker-track { animation-play-state: paused; }
.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 0 30px;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    border-inline-end: 1px solid rgba(255,255,255,0.1);
}
.ticker-item .ti-name { color: #ffffff; font-weight: 700; }
.ticker-item .ti-name small { font-weight: 500; opacity: 0.7; }
.ticker-item .ti-price { color: var(--color-accent); font-weight: 700; }
.ticker-item .ti-change { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.ticker-item .ti-change.up   { color: hsl(145, 60%, 62%); }
.ticker-item .ti-change.down { color: hsl(2, 75%, 68%); }
.ticker-item .ti-change.flat { color: rgba(255,255,255,0.6); }
@keyframes tickerLoop {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }   /* track holds two identical sets */
}
html[dir="rtl"] .ticker-track { animation-name: tickerLoopRtl; }
@keyframes tickerLoopRtl {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
}

/* ---- 3. Parent companies tree (Granot + Commodex → Nibbana Israel) ---- */
.parent-companies {
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.parent-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0;
}
.parent-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 4vw, 48px);
    width: 100%;
}
/* Larger, box-free cards that blend into the page (logos blend via multiply) */
.parent-tree .parent-card {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: clamp(18px, 2.2vw, 28px) clamp(14px, 2vw, 26px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.5s var(--ease-out-expo);
}
.parent-tree .parent-card::before { display: none; }   /* kill the inherited spotlight glow */
.parent-tree .parent-card:hover { transform: translateY(-4px); box-shadow: none; }
.parent-logo {
    display: inline-grid;
    place-items: center;
    background: transparent;
    box-shadow: none;
    padding: 0;
    margin-bottom: 18px;
}
.parent-logo img {
    height: clamp(72px, 9vw, 108px);
    width: auto;
    max-width: 260px;
    object-fit: contain;
    display: block;
    margin: 0;
    border-radius: 0;
    /* logos are now transparent PNGs — no blend hack needed */
    transition: transform 0.5s var(--ease-out-expo), filter 0.5s var(--ease-out-soft);
}
.parent-tree .parent-card:hover .parent-logo img {
    transform: scale(1.06);
    filter: drop-shadow(0 8px 18px rgba(16, 50, 45, 0.18));
}
.parent-name {
    font-size: clamp(18px, 2vw, 23px);
    font-weight: 900;
    color: var(--color-primary);
    margin-bottom: 12px;
}
.parent-tree .parent-card p {
    font-size: 15.5px;
    color: var(--color-dark);
    line-height: 1.7;
    max-width: 36ch;
}
.parent-connector { width: 72%; height: 56px; display: block; }
/* the bottom node is the real Nibbana color logo on a clean light card */
.parent-node {
    display: grid;
    place-items: center;
    background: #ffffff;
    border: 1px solid rgba(45, 160, 140, 0.18);
    border-radius: 16px;
    padding: 18px clamp(30px, 4vw, 52px);
    box-shadow: var(--elev-2);
}
.parent-node-logo {
    height: clamp(40px, 5vw, 60px);
    width: auto;
    max-width: 240px;
    object-fit: contain;
    display: block;
}

/* ---- 4/5. Agro: Read-more button, expandable container, sub-tabs ---- */
.btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 1.5px solid rgba(45, 160, 140, 0.4);
    box-shadow: none;
}
.btn-secondary:hover { background: var(--tint-accent); border-color: var(--color-primary); }
.agro-subtabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 30px 0 26px;
}
.agro-subtab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid rgba(45, 160, 140, 0.35);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.07);
    color: var(--color-primary);
    font-family: var(--font-hebrew);
    font-size: 15px;
    font-weight: 700;
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.2s ease, box-shadow 0.22s ease;
}
.agro-subtab:hover { background: #fff; border-color: var(--color-primary); box-shadow: 0 3px 10px rgba(45, 160, 140, 0.18); transform: translateY(-1px); }
.agro-subtab.active {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}
/* Smooth, flicker-free tab switching: fade only (no transform jump), and the
   panel contents are excluded from the scroll-reveal observer in app.js. */
.agro-subpanel { opacity: 1; transition: opacity 0.4s ease-out; }
.agro-subpanel[hidden] { display: none; opacity: 0; }
/* tighten leading margins inside panels (the moved blocks already have their own) */
.agro-subpanel > .feature-group:first-child,
.agro-subpanel > .agro-cta:first-child { margin-top: 0; }

/* relocated full description at the top of the Capabilities tab */
.agro-full-lead {
    font-size: 16px;
    line-height: 1.85;
    color: var(--color-dark);
    max-width: 70ch;
    margin-bottom: 30px;
}

/* ---- 5. Agro plant: electrified green-energy aura + extra shoots ---- */
.bg-agro .ag-plant {
    animation: agroSprout 13s var(--ease-in-out-smooth) infinite, agroEnergy 13s var(--ease-in-out-smooth) infinite;
}
/* a distinct neon-green electric aura that pulses at the peak of growth */
@keyframes agroEnergy {
    0%, 45%   { filter: none; }
    55%       { filter: drop-shadow(0 0 7px var(--color-accent)); }
    68%       { filter: drop-shadow(0 0 16px hsl(150,95%,60%)) drop-shadow(0 0 6px var(--color-accent)); }
    78%       { filter: drop-shadow(0 0 11px hsl(150,90%,58%)); }
    86%       { filter: drop-shadow(0 0 18px hsl(150,95%,62%)) drop-shadow(0 0 5px #ffffff); }
    100%      { filter: none; }
}
/* stem stroke flashes to neon green at the peak (leaves are fill-only, unaffected) */
.bg-agro .ag-plant path { animation: agroStroke 13s var(--ease-in-out-smooth) infinite; }
@keyframes agroStroke {
    0%, 55%, 100% { stroke: hsl(160, 40%, 48%); }
    70%, 86%      { stroke: hsl(145, 92%, 55%); }
}
/* small secondary shoots that sprout after the main plant — a green-energy field */
.bg-agro .ag-sprout {
    transform-box: fill-box;
    transform-origin: bottom center;
    opacity: 0;
    animation: agroMiniSprout 13s var(--ease-in-out-smooth) infinite;
    will-change: transform, opacity, filter;
}
.bg-agro .ag-sprout-1 { animation-delay: 1.1s; }
.bg-agro .ag-sprout-2 { animation-delay: 1.9s; }
.bg-agro .ag-sprout-3 { animation-delay: 2.6s; }
@keyframes agroMiniSprout {
    /* uniform scale to match the main plant — no vertical squash/stretch */
    0%, 40% { transform: scale(0); opacity: 0; filter: none; }
    58%     { transform: scale(1); opacity: 1; filter: none; }
    74%     { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 10px hsl(150,95%,60%)); }
    86%     { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 6px var(--color-accent)); }
    100%    { transform: scale(1); opacity: 0; filter: none; }
}

/* ---- 4. Newsletter LinkedIn link (below the subscribe row) ---- */
.newsletter-linkedin {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    width: fit-content;
    margin-top: 6px;
    padding: 9px 18px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    transition: background-color 0.3s var(--ease-out-soft), transform 0.35s var(--ease-spring-soft);
}
.newsletter-linkedin i { color: var(--color-accent); font-size: 15px; }
.newsletter-linkedin:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }

@media (max-width: 600px) {
    .ticker-item { padding: 0 18px; font-size: 12.5px; }
    .parent-row { grid-template-columns: 1fr; gap: 16px; }
    .parent-connector { height: 32px; }
    .parent-node { padding: 14px 24px; margin-top: 4px; }
    .agro-subtab { flex: 1 1 auto; justify-content: center; text-align: center; }
}

/* ============================================================================
   DEEP MOBILE UX RECONSTRUCTION
   Scope: <= 991px ONLY. Desktop / laptop (>= 992px) is intentionally untouched.
   All rules below are isolated inside mobile media queries so the existing
   wide-screen design is preserved byte-for-byte.
   ============================================================================ */

@media (max-width: 991px) {
    /* ---- 1a. Sticky, always-reachable mobile header ---------------------- */
    /* The header is already position:fixed globally; on small screens we make
       the panel near-opaque so scrolling content never muddies the bar, and add
       a faint separator so it reads as a crisp, app-like top bar. */
    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background-color: rgba(255, 255, 255, 0.96);
        box-shadow: 0 2px 18px rgba(16, 50, 45, 0.07);
    }

    /* ---- 1b. Mobile drawer: a perfect, evenly-padded vertical stack ------ */
    .tabs-navigation.open {
        padding: 26px 22px 56px;
        gap: 4px;
        justify-content: flex-start;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }
    .nav-list {
        width: 100%;
        max-width: 440px;
        margin: 0 auto;
        gap: 2px;
    }
    .nav-item {
        width: 100%;
        height: auto;
        justify-content: center;
    }
    /* full-width, generously padded tap targets, cleanly centered */
    .nav-list > .nav-item > .nav-link {
        display: block;
        width: 100%;
        text-align: center;
        padding: 15px 12px;
        border-radius: 14px;
        font-size: 18px;
    }
    .nav-list > .nav-item + .nav-item {
        border-top: 1px solid rgba(16, 50, 45, 0.07);
    }
    /* Divisions: stack the dropdown BELOW its label instead of beside it.
       The default row layout was what produced the overlapping link cluster. */
    .nav-item.has-dropdown {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .dropdown {
        width: 100%;
        align-items: stretch;
        gap: 2px;
        padding: 2px 0 8px;
    }
    .dropdown-link {
        text-align: center;
        padding: 11px 12px;
        font-size: 16px;
        border-radius: 12px;
    }

    /* ---- 2a / 2b. Stop decorative scenes overlapping text & buttons ------ */
    /* .division-bg holds wide-canvas SVG scenes (Agro sprout, I-REC panels,
       climate clouds) sized for the 2-column desktop layout. Once the cards
       stack into one narrow column those graphics sit on top of the Hebrew
       copy (the green leaf over the Agro paragraph) and leak a gray shape
       beside the I-REC tabs. On mobile we retire the ambient scene entirely so
       nothing can ever layer over the typography or the tab buttons. */
    .division-bg {
        display: none;
    }
}

@media (max-width: 767px) {
    /* ---- 3. Spacing & padding audit: uniform, app-like side gutters ------ */
    /* One consistent 20px gutter everywhere so content stops feeling stretched
       edge-to-edge or crushed. */
    .tab-section {
        padding: 38px 20px;
    }

    /* ---- Mobile hero: immersive, full-bleed, spacious ------------------- */
    /* Let the hero sit flush directly under the fixed header (no sliver, no
       tucking its top behind the opaque mobile bar). */
    #about {
        padding-top: 0;
    }
    .hero-section {
        margin-top: 0;
        /* fill the screen below the fixed header for a full, immersive hero;
           generous top padding clears the header, content is vertically
           centred for an open, premium feel */
        min-height: calc(100vh - var(--header-height));
        padding: 40px 22px 56px;
        justify-content: center;
        /* skyline cover image as a robust backdrop so the hero is never a
           cramped strip or a flat dark block if the <video> can't autoplay
           (common on mobile Safari / low-power mode) */
        background-color: #0b0f19;
        background-image: url("../assets/hero-bg.png");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    /* Kill the desktop logo-mask patch: at narrow aspect ratios the video's
       centre-crop already pushes the baked-in logo past the right edge, so
       the patch would only blur empty sky (wasted paint). */
    .hero-logo-mask {
        display: none !important;
    }

    .division-feature {
        padding-inline: 20px;
    }
    /* I-REC tab pills: full-width, evenly stacked, comfortable tap height */
    .irec-tabstrip {
        gap: 10px;
    }
    .irec-tab {
        flex: 1 1 100%;
        justify-content: center;
        padding: 13px 18px;
    }
}

/* =============================================================
 * 2026 ONE-PAGER REFRESH — new home-page modifiers
 * Self-contained block: desktop baseline + scoped mobile rules.
 * ============================================================= */

/* Header CTA reduced to an envelope icon */
.cta-button.cta-icon-only {
    padding: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    line-height: 1;
    border-radius: 50%;
}
.cta-button.cta-icon-only::after { content: none; }

/* "מי אנחנו" now full-width (parent-company tree removed) */
.whoweare-grid.whoweare-fullwidth {
    display: block;
    max-width: 920px;
    margin: 0 auto;
}
.whoweare-grid.whoweare-fullwidth .whoweare-text { max-width: none; }
.whoweare-closing {
    /* fold into the paragraph flow — no separating divider/gap */
    font-weight: 700;
    color: var(--color-primary);
}

/* Vision title broken into two stacked rows (no hyphen) */
.vision-title-stacked .vt-row { display: block; }
.vision-title-stacked .vt-row + .vt-row { margin-top: 4px; }

/* Leadership grid: exactly 4 across → two centred RTL rows of 8.
   max-width matches the .whoweare-fullwidth / principles column (920px)
   so the cards align to the same grid line as the rest of the home page. */
.team-grid-2row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    justify-content: center;
    justify-items: stretch;
    gap: 24px;
    max-width: 920px;
    margin: 0 auto;
}

/* Monogram avatar for members without a photo */
.member-photo-v2.is-monogram {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
    border-color: var(--color-accent);
}
.member-photo-v2.is-monogram span {
    font-family: 'Heebo', sans-serif;
    font-weight: 900;
    font-size: 34px;
    color: var(--color-accent-light);
    letter-spacing: 1px;
}

@media (max-width: 991px) {
    .team-grid-2row { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
}
@media (max-width: 600px) {
    .team-grid-2row { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
    .member-photo-v2.is-monogram span { font-size: 28px; }
}

/* Services: 8-pillar catalogue (one-pager) — flip-card back description */
.services-grid-8 .card-back-text {
    margin-top: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-white, #fff);
    opacity: 0.95;
}

/* Climate division — accordion (content_aklim) */
/* ---- Climate section: pill tab navigation ---- */
.climate-tabs { margin-top: 28px; }

.cl-tab-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}
.cl-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 50px;
    border: 1.5px solid rgba(45, 160, 140, 0.35);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.07);
    font-family: 'Heebo', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary);
    cursor: pointer;
    transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.2s ease, box-shadow 0.22s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.cl-tab:hover {
    background: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 3px 10px rgba(45, 160, 140, 0.18);
    transform: translateY(-1px);
}
.cl-tab.cl-tab-active,
.cl-tab[aria-selected="true"] {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}
.cl-tab i { font-size: 14px; }

.cl-tab-panels { }

.cl-tab-panel {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--border-radius-md, 14px);
    box-shadow: var(--shadow-sm);
    padding: 22px 26px;
}
.cl-tab-panel p { margin-bottom: 12px; line-height: 1.7; }
.cl-tab-panel p:last-child { margin-bottom: 0; }
.cl-tab-hidden { display: none; }
/* "How to start" content merged into the bottom of the Services panel */
.cl-start-callout {
    margin-top: 24px;
    padding: 20px 22px;
    background: linear-gradient(135deg, rgba(45,160,140,0.08) 0%, rgba(110,231,207,0.12) 100%);
    border: 1px solid rgba(45,160,140,0.22);
    border-radius: var(--border-radius-md, 14px);
}
.cl-start-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    color: var(--color-primary);
    font-size: 15px;
    margin-bottom: 8px;
}
.cl-start-eyebrow i { color: var(--color-accent); }
.cl-start-callout p { margin: 0; line-height: 1.75; }
.cl-start-callout strong { color: var(--color-primary); }
.cl-subhead {
    margin: 18px 0 8px;
    font-family: 'Heebo', sans-serif;
    font-weight: 800;
    color: var(--color-primary);
    font-size: 16px;
}
.cl-questions { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.cl-questions li {
    position: relative;
    padding-inline-start: 30px;
    line-height: 1.6;
}
.cl-questions li::before {
    content: "\f059"; /* circle-question */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--color-accent);
    position: absolute;
    inset-inline-start: 0;
    top: 2px;
}

/* Division CTA blocks reuse .agro-cta styling; keep submit button font consistent
   (tikunim note: the send button must match the site typography) */
.division-submit,
.agro-submit {
    font-family: 'Heebo', sans-serif !important;
    font-weight: 700;
}
.division-cta { margin-top: 0; }

@media (max-width: 600px) {
    .cl-tab { font-size: 13px; padding: 8px 14px; gap: 6px; }
    .cl-tab-panel { padding: 16px 18px; }
}

/* ═══════════════════════════════════════════════════════════════
   TABS VISUAL UPGRADE — glass card wrapper + separator + panel card
   ═══════════════════════════════════════════════════════════════ */

/* 1. Glass card container that wraps the entire tab component for all 3 divisions */
.climate-tabs,
.irec-tabs,
.agro-tabs-component {
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 22px;
    padding: 20px 22px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow:
        0 4px 28px rgba(0, 0, 0, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    margin-top: 28px;
}

/* Reset double margin when inside the wrapper */
.agro-tabs-component .agro-subtabs { margin-top: 0; }
.climate-tabs .cl-tab-bar { margin-bottom: 0; }
.irec-tabs .irec-tabstrip { margin-bottom: 0; }

/* 2. Separator line between tab bar and content panel */
.climate-tabs .cl-tab-bar,
.irec-tabs .irec-tabstrip,
.agro-tabs-component .agro-subtabs {
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.09);
    margin-bottom: 20px;
}

/* 3. Agro panels get the same card look as climate panels */
.agro-subpanel.active {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--border-radius-md, 14px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    padding: 22px 26px;
}

/* Footer */
.footer-logo-img { height: 40px; width: auto; display: block; }
.footer-top { grid-template-columns: 0.8fr 2.4fr; }
.footer-links { gap: 28px 48px; }
.site-footer .footer-col h4 { white-space: nowrap; }
.site-footer .footer-link { line-height: 1.5; text-wrap: pretty; }
@media (max-width: 991px) { .footer-top { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════
   WCAG AA / IS 5568 ACCESSIBILITY ADDITIONS
   ═══════════════════════════════════════════════════════════════ */

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0;
    margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
    background: var(--color-primary); color: #fff; padding: 10px 22px;
    border-radius: 0 0 10px 10px; font-weight: 700; font-size: 15px;
    z-index: 9999; transition: top 0.2s; text-decoration: none; white-space: nowrap;
}
.skip-link:focus { top: 0; outline: 3px solid var(--color-accent); outline-offset: 2px; }

.footer-access-stmt-btn {
    background: none; border: none; color: rgba(255,255,255,0.7);
    font-size: inherit; font-family: inherit; cursor: pointer; padding: 0;
    text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s;
}
.footer-access-stmt-btn:hover,
.footer-access-stmt-btn:focus-visible { color: #fff; }

/* ── Accessibility widget ── */
#access-widget {
    position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 8000;
    display: flex; flex-direction: column; align-items: flex-start;
}
#access-toggle {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--color-primary); color: #fff;
    border: 2px solid rgba(255,255,255,0.35); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    transition: background 0.2s, transform 0.2s; order: 2;
}
#access-toggle:hover { background: var(--color-accent); transform: scale(1.08); }
#access-toggle:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }

#access-panel {
    background: #fff; border: 1px solid rgba(0,0,0,0.12); border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.18); width: 230px; padding: 0 0 14px;
    margin-bottom: 10px; order: 1;
    animation: accessPanelIn 0.22s cubic-bezier(0.22,1,0.36,1);
}
#access-panel[hidden] { display: none; }
@keyframes accessPanelIn {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.access-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px 10px; border-bottom: 1px solid rgba(0,0,0,0.08);
}
.access-panel-title {
    font-size: 14px; font-weight: 800; color: var(--color-primary);
    margin: 0; font-family: var(--font-hebrew,'Heebo',sans-serif);
}
.access-close {
    background: none; border: none; cursor: pointer; color: var(--color-dark);
    padding: 4px; border-radius: 6px; display: flex; align-items: center; transition: background 0.15s;
}
.access-close:hover { background: rgba(0,0,0,0.06); }
.access-close:focus-visible { outline: 2px solid var(--color-primary); }

.access-options { list-style: none; padding: 8px 10px 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.access-btn {
    width: 100%; display: flex; align-items: center; gap: 10px;
    background: none; border: 1.5px solid transparent; border-radius: 10px;
    padding: 8px 10px; cursor: pointer;
    font-family: var(--font-hebrew,'Heebo',sans-serif); font-size: 14px; font-weight: 600;
    color: var(--color-dark); text-align: start;
    transition: background 0.15s, border-color 0.15s;
}
.access-btn:hover { background: rgba(45,160,140,0.07); border-color: var(--color-accent); }
.access-btn[aria-pressed="true"] { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.access-btn[aria-pressed="true"] .access-btn-icon { color: #fff; }
.access-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.access-btn-icon { font-size: 13px; font-weight: 900; color: var(--color-primary); min-width: 22px; text-align: center; }
.access-reset {
    display: block; width: calc(100% - 20px); margin: 10px 10px 0; padding: 8px;
    background: none; border: 1.5px solid rgba(0,0,0,0.15); border-radius: 10px;
    cursor: pointer; font-family: var(--font-hebrew,'Heebo',sans-serif);
    font-size: 13px; font-weight: 700; color: #666; transition: border-color 0.15s, color 0.15s;
}
.access-reset:hover { border-color: var(--color-primary); color: var(--color-primary); }
.access-reset:focus-visible { outline: 2px solid var(--color-primary); }

/* Body-level accessibility modifier classes */
/* Apply filters to body children only — NOT body itself.
   Filtering body breaks position:fixed (including the widget button). */
body.ac-grayscale > *:not(#access-widget):not(#access-stmt-modal)  { filter: grayscale(100%); }
body.ac-contrast  > *:not(#access-widget):not(#access-stmt-modal)  { filter: contrast(150%) brightness(0.9); }
body.ac-invert    > *:not(#access-widget):not(#access-stmt-modal)  { filter: invert(1) hue-rotate(180deg); }
body.ac-light-bg  > *:not(#access-widget):not(#access-stmt-modal)  { background: #fff !important; filter: brightness(1.12); }
body.ac-readable-font *  { font-family: Arial, Helvetica, sans-serif !important; }
body.ac-highlight-links a {
    outline: 2px solid #e60000 !important;
    outline-offset: 2px !important;
    text-decoration: underline !important;
}
/* font scaling handled via JS zoom on body children */

/* ── Accessibility statement modal ── */
#access-stmt-modal {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; align-items: center; justify-content: center;
}
#access-stmt-modal[hidden] { display: none; }
.access-stmt-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
}
.access-stmt-inner {
    position: relative; background: #fff; border-radius: 20px;
    max-width: 620px; width: calc(100% - 40px); max-height: 80vh;
    overflow-y: auto; padding: 36px 40px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25); text-align: start;
}
.access-stmt-inner h2 { font-size: 24px; font-weight: 900; color: var(--color-primary); margin: 0 0 4px; }
.access-stmt-date { font-size: 13px; color: #888; margin-bottom: 24px; }
.access-stmt-inner h3 { font-size: 16px; font-weight: 800; color: var(--color-primary); margin: 20px 0 6px; }
.access-stmt-inner p,
.access-stmt-inner li { font-size: 15px; line-height: 1.75; color: #333; }
.access-stmt-inner ul { padding-inline-start: 20px; margin: 6px 0; }
.access-stmt-inner a { color: var(--color-primary); }
.access-stmt-close {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    color: #555;
    display: flex;
    align-items: center;
    transition: background 0.15s;
}
.access-stmt-close:hover { background: rgba(0,0,0,0.07); }
.access-stmt-close:focus-visible { outline: 2px solid var(--color-primary); }
@media (max-width: 540px) {
    .access-stmt-inner { padding: 24px 20px; }
    #access-widget { bottom: 16px; inset-inline-end: 16px; }
}