/* ===== Client Reviews — copy on the left, video cards on the right =====
   The same markup carries a light and a dark skin: the reviews page adds
   .rvw-dark to the section and only the colour tokens change. ===== */
.rvw-green {
    --rvw-green: #1e9e57;
    --rvw-green-dark: #157a42;
    --rvw-mint: #2ed573;
    --rvw-ink: #0f2a1c;
    --rvw-body: #4a5a51;
    --rvw-muted: #7f8f86;
    --rvw-card: #ffffff;
    --rvw-card-line: #eaf1ec;
    --rvw-rule: #eef3ef;
    --rvw-gold: #f5b73d;
    background: linear-gradient(180deg, #ffffff 0%, #f2f7f4 100%);
    padding: 56px 0 60px;
    position: relative;
    overflow: hidden;
}

    /* nothing entered in the CMS → the section stays out of the page */
    .rvw-green:not(:has(.rvw-card)) { display: none; }

.rvw-green .rvw-inner {
    display: grid;
    grid-template-columns: 30% minmax(0, 1fr);
    gap: 44px;
    align-items: center;
}
    /* a grid item's automatic minimum is its content, and an un-sized swiper track
       is very wide — without this the cards column stretched the whole grid */
    .rvw-green .rvw-side,
    .rvw-green .rvw-cards { min-width: 0; }

/* ── left column ── */
.rvw-green .sub-title {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--rvw-green-dark); font-weight: 600; font-size: 12px;
    letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px;
}
    .rvw-green .sub-title::after { content: ""; width: 26px; height: 2px; background: var(--rvw-green); }

.rvw-green .rvw-title {
    color: var(--rvw-ink); font-weight: 700; font-size: 38px; line-height: 1.15;
    letter-spacing: -0.02em; margin: 0 0 14px;
}
    /* the trailing words pick up the brand colour, as in the reference */
    .rvw-green .rvw-title .tail { color: var(--rvw-green); display: block; }

.rvw-green .rvw-text { color: var(--rvw-body); font-size: 15px; line-height: 1.7; margin: 0 0 26px; max-width: 34ch; }

.rvw-green .rvw-all {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 13px 24px; border-radius: 10px;
    border: 1px solid #bfe6cf; background: transparent; color: var(--rvw-green-dark);
    font-size: 15px; font-weight: 600; text-decoration: none;
    transition: transform .2s cubic-bezier(.33,1,.68,1), box-shadow .2s ease-out, background .2s ease-out, color .2s ease-out, border-color .2s ease-out;
}
    .rvw-green .rvw-all svg { width: 18px; height: 18px; transition: transform .2s ease-out; }
    .rvw-green .rvw-all:hover {
        background: linear-gradient(135deg, #1e9e57, #157a42); color: #fff; border-color: transparent;
        transform: translateY(-2px); box-shadow: 0 12px 24px rgba(30,158,87,.26);
    }
        .rvw-green .rvw-all:hover svg { transform: translateX(3px); }
    .rvw-green .rvw-all:focus-visible { outline: 3px solid var(--rvw-green-dark); outline-offset: 3px; }

/* ── Slider controls: one centred row of ← • • • → beneath the cards ────────
   The .rvw-controls container groups the prev arrow, the Swiper-managed
   pagination bullets (.rvw-dots), and the next arrow so they always sit on the
   same horizontal line. Swiper still finds .rvw-prev / .rvw-next / .rvw-dots
   by class, unchanged. */
.rvw-green .rvw-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 18px;
    padding: 0 8px;
    flex-wrap: nowrap;
}
    .rvw-green .rvw-controls .rvw-prev,
    .rvw-green .rvw-controls .rvw-next {
        flex: 0 0 auto;
        width: 44px; height: 44px; border-radius: 50%;
        /* white on the section's #f2f7f4 ground with a real border: the old
           transparent fill + #cfe4d8 border measured ~1.2:1 against that
           background, so the control had almost no visible boundary */
        border: 1px solid #b4dcc6;
        background: #ffffff;
        color: var(--rvw-green-dark);
        box-shadow: 0 2px 8px rgba(10, 31, 20, .07);
        display: flex; align-items: center; justify-content: center; cursor: pointer;
        transition: background .2s ease-out, color .2s ease-out, transform .2s cubic-bezier(.33,1,.68,1), border-color .2s ease-out, box-shadow .2s ease-out;
    }
        .rvw-green .rvw-controls .rvw-prev svg,
        .rvw-green .rvw-controls .rvw-next svg { width: 18px; height: 18px; }
        .rvw-green .rvw-controls .rvw-prev:hover,
        .rvw-green .rvw-controls .rvw-next:hover {
            background: var(--rvw-green); border-color: var(--rvw-green); color: #fff;
            box-shadow: 0 6px 16px rgba(30, 158, 87, .28);
        }
        .rvw-green .rvw-controls .rvw-prev:focus-visible,
        .rvw-green .rvw-controls .rvw-next:focus-visible { outline: 3px solid var(--rvw-green-dark); outline-offset: 3px; }
        .rvw-green .rvw-controls .rvw-prev.swiper-button-disabled,
        .rvw-green .rvw-controls .rvw-next.swiper-button-disabled { opacity: .4; cursor: default; }
    .rvw-green .rvw-controls .rvw-dots {
        margin: 0;
        display: inline-flex; align-items: center; justify-content: center; gap: 0;
        flex: 0 1 auto;
    }

/* Kept only for the /page/reviews grid layout, where no prev/next buttons
   are rendered but the CSS class still exists on the reviews section header. */
.rvw-green .rvw-nav { display: flex; gap: 14px; margin-top: 30px; }
    .rvw-green .rvw-nav button {
        width: 44px; height: 44px; border-radius: 50%;
        border: 1px solid #cfe4d8; background: transparent; color: var(--rvw-green-dark);
        display: flex; align-items: center; justify-content: center; cursor: pointer;
        transition: background .2s ease-out, color .2s ease-out, transform .2s cubic-bezier(.33,1,.68,1), border-color .2s ease-out;
    }
        .rvw-green .rvw-nav button svg { width: 18px; height: 18px; }
        .rvw-green .rvw-nav button:hover { background: var(--rvw-green); border-color: var(--rvw-green); color: #fff; }
        .rvw-green .rvw-nav button:focus-visible { outline: 3px solid var(--rvw-green-dark); outline-offset: 3px; }
        .rvw-green .rvw-nav button.swiper-button-disabled { opacity: .4; cursor: default; }

/* ── cards ── */
.rvw-green .rvw-slider { overflow: hidden; padding: 6px 4px 30px; }
.rvw-green .rvw-slider .swiper-wrapper { align-items: stretch; }
.rvw-green .rvw-slider .swiper-slide { height: auto; }

.rvw-card {
    display: flex; flex-direction: column; height: 100%;
    background: var(--rvw-card); border: 1px solid var(--rvw-card-line); border-radius: 18px;
    padding: 14px 14px 18px;
    box-shadow: 0 10px 26px rgba(10,31,20,.08), 0 2px 4px rgba(10,31,20,.04);
    transition: transform .2s cubic-bezier(.33,1,.68,1), box-shadow .2s ease-out;
}
    .rvw-card:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(30,158,87,.16); }

/* the video tile, same treatment as the project Video Gallery: poster,
   bottom shade, white disc with a red play glyph and a pulsing ring */
.rvw-media {
    position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
    border: 0; padding: 0; margin: 0; background: #0f2a1c; cursor: pointer;
    overflow: hidden; border-radius: 12px;
}
    .rvw-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s ease; }
    .rvw-media:hover img { transform: scale(1.08); }
    .rvw-media:focus-visible { outline: 3px solid var(--rvw-green); outline-offset: 3px; }

    .rvw-sh {
        position: absolute; inset: 0; pointer-events: none;
        background: linear-gradient(180deg, rgba(10,31,20,.12) 0%, transparent 38%, rgba(10,31,20,.82) 100%);
    }

    .rvw-play {
        position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
        width: 56px; height: 56px; border-radius: 50%;
        background: rgba(255,255,255,.92); color: #e0362f; font-size: 19px;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 10px 24px rgba(0,0,0,.4);
        transition: transform .25s ease;
    }
        .rvw-play i { margin-left: 3px; }
        .rvw-play::before {
            content: ""; position: absolute; inset: -8px; border-radius: 50%;
            border: 2px solid rgba(255,255,255,.55);
            animation: rvwPulse 2s ease-out infinite;
        }
        .rvw-media:hover .rvw-play { transform: translate(-50%, -50%) scale(1.12); }
@keyframes rvwPulse { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.45); opacity: 0; } }

    .rvw-vt {
        position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2;
        color: #fff; font-weight: 700; font-size: 14px; text-shadow: 0 2px 10px rgba(0,0,0,.5);
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

.rvw-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 8px 0; }
    /* a review with neither a video nor a photo is a plain quote card */
    .rvw-card > .rvw-body:first-child { padding-top: 6px; }

.rvw-stars { display: flex; gap: 4px; margin-bottom: 12px; }
    .rvw-stars svg { width: 17px; height: 17px; fill: var(--rvw-gold); }

.rvw-quote-wrap { position: relative; padding-right: 34px; }
    .rvw-mark {
        position: absolute; right: 0; top: 2px;
        width: 26px; height: 26px; fill: var(--rvw-green); opacity: .22;
    }

.rvw-quote {
    color: var(--rvw-body); font-size: 14.5px; line-height: 1.7; font-style: italic;
    margin: 0 0 18px; border: 0; padding: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.rvw-person { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--rvw-rule); }
    .rvw-avatar {
        width: 46px; height: 46px; flex: 0 0 auto; border-radius: 50%;
        background: linear-gradient(135deg, #2fbf71, #157a42); color: #ffffff;
        display: flex; align-items: center; justify-content: center;
    }
        .rvw-avatar svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
    .rvw-who { display: flex; flex-direction: column; min-width: 0; }
    .rvw-name { color: var(--rvw-ink); font-weight: 700; font-size: 15px; line-height: 1.35; }
    .rvw-role { color: var(--rvw-green); font-size: 13.5px; font-weight: 600; }
    .rvw-date { color: var(--rvw-muted); font-size: 12px; }

.rvw-dots { text-align: center; margin-top: 4px; }
    .rvw-dots .swiper-pagination-bullet { width: 9px; height: 9px; background: #cfe9db; opacity: 1; margin: 0 4px; transition: all .25s ease; }
    .rvw-dots .swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--rvw-green); width: 22px; border-radius: 6px; }

/* ── stats strip ── */
.rvw-green .rvw-stats-wrap { margin-top: 34px; }
.rvw-stats {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--rvw-card); border: 1px solid var(--rvw-card-line); border-radius: 18px;
    box-shadow: 0 10px 26px rgba(10,31,20,.06);
    overflow: hidden;
}
.rvw-stat { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 24px 20px; }
    .rvw-stat + .rvw-stat { border-left: 1px solid var(--rvw-rule); }
    .rvw-stat-ico {
        flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
        animation: rvwBob 3.4s ease-in-out infinite;
    }
    .rvw-stat:nth-child(2) .rvw-stat-ico { animation-delay: .4s; }
    .rvw-stat:nth-child(3) .rvw-stat-ico { animation-delay: .8s; }
    .rvw-stat:nth-child(4) .rvw-stat-ico { animation-delay: 1.2s; }
        .rvw-stat-ico svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
        /* each stat keeps its own colour, as in the reference */
        .rvw-stat-ico.ico-users { color: #2fbf71; }
        .rvw-stat-ico.ico-star { color: #f5b73d; }
        .rvw-stat-ico.ico-check, .rvw-stat-ico.ico-shield { color: #1e9e57; }
        .rvw-stat-ico.ico-briefcase { color: #a06ee1; }
        .rvw-stat-ico.ico-home, .rvw-stat-ico.ico-key, .rvw-stat-ico.ico-leaf, .rvw-stat-ico.ico-default { color: #4fc3f7; }
@keyframes rvwBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-4deg); } }
    .rvw-stat-body { display: flex; flex-direction: column; min-width: 0; }
    .rvw-stat-num { color: var(--rvw-ink); font-weight: 700; font-size: 27px; line-height: 1.1; letter-spacing: -0.02em; }
    .rvw-stat-lbl { color: var(--rvw-body); font-size: 13.5px; }

/* ── a card with no video yet still holds the card's shape ── */
.rvw-media.is-blank {
    cursor: default;
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #123c29, #0a2419);
}
    .rvw-media.is-blank span {
        color: rgba(255, 255, 255, .55);
        font-size: 30px; font-weight: 700; letter-spacing: .06em;
    }

/* ── premium skin: green ground, gold ornament (used on /page/reviews) ────────
   Same markup as the home section — only the tokens and a few accents change. */
.rvw-green.rvw-royal {
    --rvw-green: #d9b45e;
    --rvw-green-dark: #f0d38a;
    --rvw-ink: #fdf7e6;
    --rvw-body: #ddd3ba;
    --rvw-muted: #a3997f;
    --rvw-card: rgba(255, 252, 240, 0.05);
    --rvw-card-line: rgba(217, 180, 94, 0.28);
    --rvw-rule: rgba(217, 180, 94, 0.22);
    --rvw-gold: #e8c874;
    background:
        radial-gradient(70% 55% at 82% 8%, rgba(217, 180, 94, .20), transparent 68%),
        radial-gradient(85% 70% at 8% 100%, rgba(30, 158, 87, .22), transparent 70%),
        linear-gradient(160deg, #0f3d29 0%, #0a2c1e 46%, #06180f 100%);
}
    /* a hairline of gold top and bottom, the way a plaque is framed */
    .rvw-green.rvw-royal::before,
    .rvw-green.rvw-royal::after {
        content: ""; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(217, 180, 94, .55) 22%, rgba(240, 211, 138, .9) 50%, rgba(217, 180, 94, .55) 78%, transparent);
    }
    .rvw-green.rvw-royal::before { top: 0; }
    .rvw-green.rvw-royal::after { bottom: 0; }

    .rvw-green.rvw-royal .auto-container { position: relative; z-index: 1; }

    .rvw-green.rvw-royal .sub-title { color: #e8c874; }
        .rvw-green.rvw-royal .sub-title::after { background: linear-gradient(90deg, #d9b45e, transparent); }

    .rvw-green.rvw-royal .rvw-title { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-weight: 600; }
        /* the second line is the gold one */
        .rvw-green.rvw-royal .rvw-title .tail {
            background: linear-gradient(100deg, #f4e3b4, #d9b45e 45%, #f0d38a);
            -webkit-background-clip: text; background-clip: text; color: transparent;
        }

    .rvw-green.rvw-royal .rvw-all {
        background: linear-gradient(135deg, #f0d38a, #cfa54c);
        border-color: transparent; color: #0a2c1e; font-weight: 700;
        box-shadow: 0 10px 24px rgba(0, 0, 0, .38);
    }
        .rvw-green.rvw-royal .rvw-all:hover {
            background: linear-gradient(135deg, #ffe9b4, #dcb75f);
            color: #0a2c1e; box-shadow: 0 16px 30px rgba(217, 180, 94, .3);
        }
        .rvw-green.rvw-royal .rvw-all:focus-visible { outline: 3px solid #f0d38a; }

    .rvw-green.rvw-royal .rvw-nav button { border-color: rgba(217, 180, 94, .45); color: #e8c874; }
        .rvw-green.rvw-royal .rvw-nav button:hover {
            background: linear-gradient(135deg, #f0d38a, #cfa54c); border-color: transparent; color: #0a2c1e;
        }
        .rvw-green.rvw-royal .rvw-nav button:focus-visible { outline: 3px solid #f0d38a; }

    .rvw-green.rvw-royal .rvw-card {
        -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
        box-shadow: 0 18px 38px rgba(0, 0, 0, .42);
    }
        .rvw-green.rvw-royal .rvw-card:hover {
            border-color: rgba(240, 211, 138, .55);
            box-shadow: 0 24px 48px rgba(0, 0, 0, .5), 0 0 0 1px rgba(240, 211, 138, .18);
        }


    .rvw-green.rvw-royal .rvw-mark { fill: #d9b45e; opacity: .4; }
    .rvw-green.rvw-royal .rvw-avatar { background: linear-gradient(135deg, #f0d38a, #cfa54c); color: #0a2c1e; }
    .rvw-green.rvw-royal .rvw-role { color: #e8c874; }

    .rvw-green.rvw-royal .rvw-dots .swiper-pagination-bullet { background: rgba(217, 180, 94, .35); }
    .rvw-green.rvw-royal .rvw-dots .swiper-pagination-bullet-active { background: #e8c874; }

    .rvw-green.rvw-royal .rvw-stats { box-shadow: 0 18px 38px rgba(0, 0, 0, .4); }
        /* on gold-on-green the per-stat colours turn muddy — keep them all gold */
        .rvw-green.rvw-royal .rvw-stat-ico { color: #e8c874 !important; }


/* ── the reviews page: a centred header, then every review at once ──────── */
.rvw-page .rvw-head { text-align: center; max-width: 660px; margin: 0 auto 44px; }
    .rvw-page .rvw-head .rvw-text { max-width: none; margin-bottom: 26px; }
    .rvw-page .rvw-head .rvw-title { font-size: 46px; }

.rvw-grid { width: 100%; }
.rvw-grid-inner {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 26px;
    align-items: stretch;
}
.rvw-cell { display: flex; }
    .rvw-cell > .rvw-card { width: 100%; }

@media (max-width: 1199px) {
    .rvw-green .rvw-inner { grid-template-columns: 34% minmax(0, 1fr); gap: 28px; }
    .rvw-green .rvw-title { font-size: 32px; }
}

@media (max-width: 991px) {
    .rvw-green { padding: 40px 0 44px; }
    .rvw-green .rvw-inner { grid-template-columns: 1fr; gap: 24px; }
    .rvw-green .rvw-text { max-width: none; }
    .rvw-green .rvw-nav { margin-top: 20px; }
    .rvw-green .rvw-controls { gap: 16px; margin-top: 14px; }
    .rvw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rvw-stat:nth-child(3) { border-left: 0; }
    .rvw-stat:nth-child(n+3) { border-top: 1px solid var(--rvw-rule); }
    /* /page/reviews: scale down the standalone-page heading so it fits the frame
       instead of consuming the visible viewport and pushing the review cards
       off-screen. */
    .rvw-page .rvw-head { margin-bottom: 30px; }
    .rvw-page .rvw-head .rvw-title { font-size: 34px; }
}

@media (max-width: 575px) {
    .rvw-green { padding: 28px 0 32px; }
    .rvw-green .rvw-title { font-size: 25px; }
    .rvw-green .rvw-text { font-size: 14px; }
    .rvw-stats { grid-template-columns: 1fr; }
    .rvw-stat + .rvw-stat { border-left: 0; border-top: 1px solid var(--rvw-rule); }
    .rvw-stat { padding: 16px 18px; justify-content: flex-start; }
    .rvw-stat-num { font-size: 23px; }
    .rvw-stat-ico svg { width: 28px; height: 28px; }
    /* Mobile /page/reviews: heading was 46px with no override — that alone was
       clipping the first row of review cards off the top of the visible area. */
    .rvw-page .rvw-head { margin-bottom: 22px; }
    .rvw-page .rvw-head .rvw-title { font-size: 26px; line-height: 1.2; }
    .rvw-page .rvw-head .rvw-text { font-size: 14px; margin-bottom: 20px; }
    /* Cards go one-up on mobile so the media panel gets the full width. */
    .rvw-grid-inner { grid-template-columns: 1fr; gap: 18px; }
    /* Older mobile Safari (<14.5) ignores `aspect-ratio`; a min-height fallback
       stops the media container from collapsing to zero and the poster image
       disappearing on those devices. */
    .rvw-media { min-height: 190px; }
    .rvw-card { padding: 10px 10px 14px; }
    .rvw-body { padding: 14px 6px 0; }
    /* Compact ← • • → row on phones — arrows shrink slightly, gap tightens. */
    .rvw-green .rvw-controls { gap: 12px; padding: 0; }
    .rvw-green .rvw-controls .rvw-prev,
    .rvw-green .rvw-controls .rvw-next { width: 40px; height: 40px; }
        .rvw-green .rvw-controls .rvw-prev svg,
        .rvw-green .rvw-controls .rvw-next svg { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .rvw-play::before, .rvw-stat-ico { animation: none !important; }
}